updates

stanford-crfm · Nov 1, 2023 · 444760a · 444760a
1 parent 02f3ec4
commit 444760a
Show file tree

Hide file tree

Showing 21 changed files with 421 additions and 296 deletions.
diff --git a/src/helm-frontend/README.md b/src/helm-frontend/README.md
@@ -69,3 +69,4 @@ VITE_HELM_BENCHMARKS_ENDPOINT="https://storage.googleapis.com/crfm-helm-public/"
 # Change to current version
 VITE_HELM_BENCHMARKS_SUITE="v0.2.3"
 ```
+# helm-fork
diff --git a/src/helm-frontend/index.html b/src/helm-frontend/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Holistic Evaluation of Language Models (HELM)</title>
     <meta name="description" content="The Holistic Evaluation of Language Models (HELM) serves as a living benchmark for transparency in language models. Providing broad coverage and recognizing incompleteness, multi-metric measurements, and standardization. All data and analysis are freely accessible on the website for exploration and study." />
+    <script type="text/javascript" src="/config.js"></script>
   </head>
   <body class="block">
     <div id="root"></div>

diff --git a/src/helm-frontend/public/config.js b/src/helm-frontend/public/config.js
@@ -0,0 +1,4 @@
+window.BENCHMARK_OUTPUT_BASE_URL = "benchmark_output";
+window.SUITE = "latest";
+window.RELEASE = null;
+window.LEGACY_RELEASE = "v2.4.0";
diff --git a/src/helm-frontend/src/App.tsx b/src/helm-frontend/src/App.tsx
@@ -1,27 +1,49 @@
 import "./App.css";
-import { HashRouter as Router, Route, Routes } from "react-router-dom";
+import {
+  HashRouter as Router,
+  Route,
+  Routes,
+  useLocation,
+} from "react-router-dom";
 import Layout from "@/layouts/Main";
-import Home from "@/routes/Home";
 import Models from "@/routes/Models";
 import Scenarios from "@/routes/Scenarios";
 import Groups from "@/routes/Groups";
 import Group from "@/routes/Group";
 import Runs from "@/routes/Runs";
 import Run from "@/routes/Run";
-import LegacyLanding from "@/routes/LegacyLanding";
+import Landing from "@/routes/Landing";
+import Leaderboard from "@/routes/Leaderboard";
+import { useEffect } from "react";
+
+function RedirectToBasePath() {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
+  const legacyRelease = (window as any).LEGACY_RELEASE;
+  const location = useLocation();
+
+  useEffect(() => {
+    if (location.pathname === "/") {
+      window.location.replace(`#/${legacyRelease}`);
+    }
+  }, [location, legacyRelease]);
+
+  return null;
+}
+
 export default function App() {
   return (
     <Router>
+      <RedirectToBasePath />
       <Routes>
-        <Route element={<Layout />}>
-          <Route path={"/"} element={<Home />} />
-          <Route path="/models" element={<Models />} />
-          <Route path="/landing" element={<LegacyLanding />} />
-          <Route path="/scenarios" element={<Scenarios />} />
-          <Route path="/groups" element={<Groups />} />
-          <Route path="/groups/:groupName" element={<Group />} />
-          <Route path="/runs" element={<Runs />} />
-          <Route path="/runs/:runName" element={<Run />} />
+        <Route path={`/:legacyRelease`} element={<Layout />}>
+          <Route index element={<Landing />} />
+          <Route path="models" element={<Models />} />
+          <Route path="leaderboard" element={<Leaderboard />} />
+          <Route path="scenarios" element={<Scenarios />} />
+          <Route path="groups" element={<Groups />} />
+          <Route path="groups/:groupName" element={<Group />} />
+          <Route path="runs" element={<Runs />} />
+          <Route path="runs/:runName" element={<Run />} />
         </Route>
       </Routes>
     </Router>

diff --git a/src/helm-frontend/src/assets/heim-logo.png b/src/helm-frontend/src/assets/heim-logo.png
diff --git a/src/helm-frontend/src/assets/helmhero.png b/src/helm-frontend/src/assets/helmhero.png
diff --git a/src/helm-frontend/src/components/Alert.tsx b/src/helm-frontend/src/components/Alert.tsx
@@ -0,0 +1,41 @@
+import { useState } from "react";
+import Link from "./Link";
+
+export default function Alert() {
+  const [visible, setVisible] = useState(true);
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
+  const legacyRelease = (window as any).LEGACY_RELEASE;
+
+  const handleClose = () => {
+    setVisible(false);
+  };
+
+  return (
+    visible && (
+      <div
+        className="fixed bottom-5 right-5 bg-gray-100 border border-gray-400 text-gray-700 px-4 py-3 rounded z-50"
+        role="alert"
+      >
+        <div className="px-3">
+          <strong className="font-bold">
+            Welcome to the new results view,
+          </strong>
+          <span className="block sm:inline"> for the old view, </span>
+          <Link to={"/" + legacyRelease + "/groups"}>
+            <a className="underline text-gray-700 mr-2">click here</a>
+          </Link>
+        </div>
+        <span
+          className="absolute top-1 bottom-1 right-0 px-4 py-3"
+          onClick={handleClose}
+        >
+          <img
+            src="https://www.svgrepo.com/show/12848/x-symbol.svg"
+            alt="Close"
+            className="h-3 w-3"
+          />
+        </span>
+      </div>
+    )
+  );
+}
diff --git a/src/helm-frontend/src/components/Hero.tsx b/src/helm-frontend/src/components/Hero.tsx
@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 
 export default function Hero() {
   return (
-    <div className="flex px-4 py-36">
+    <div className="flex px-6 py-14">
       {/* Left side content */}
       <div className="flex-1 p-4 flex flex-col justify-center">
         {" "}
@@ -19,9 +19,9 @@ export default function Hero() {
           , providing standardized evaluations with multiple metrics and open
           access.
         </h1>
-        <div className="flex justify-end w-1/4 ">
-          <Link to="/leaderboard">
-            <button className="px-10 btn btn-grey rounded-md">
+        <div className="flex justify-end w-1/4">
+          <Link to="leaderboard">
+            <button className="px-6 btn btn-grey rounded-md">
               <body>Visit Leaderboard</body>
             </button>
           </Link>

diff --git a/src/helm-frontend/src/components/MetricsList.tsx b/src/helm-frontend/src/components/MetricsList.tsx
@@ -1,5 +1,6 @@
 import type Metric from "@/types/Metric";
 import type MetricGroup from "@/types/MetricGroup";
+import { Link as ReactRouterLink } from "react-router-dom";
 
 interface Props {
   metrics: Metric[];
@@ -16,11 +17,14 @@ export default function MetricList({ metrics, metricGroups }: Props) {
             {metrics.filter((metric) =>
               metricGroup.metrics.some((m) => m.name === metric.name),
             ).length > 0 ? (
-              <h4>
-                {metricGroup.display_name} ({metricGroup.name})
-              </h4>
+              <ReactRouterLink
+                className="text-black"
+                to={"groups/" + metricGroup.name}
+              >
+                <h4>{metricGroup.display_name}</h4>
+              </ReactRouterLink>
             ) : null}
-            <ul>
+            <ul className="list-disc list-inside">
               {metrics
                 .filter((metric) =>
                   metricGroup.metrics.some((m) => m.name === metric.name),

diff --git a/src/helm-frontend/src/components/ModelsList.tsx b/src/helm-frontend/src/components/ModelsList.tsx
@@ -1,4 +1,5 @@
 import type Model from "@/types/Model";
+import { Link as ReactRouterLink } from "react-router-dom";
 
 interface Props {
   models: Model[];
@@ -15,9 +16,11 @@ export default function ModelsList({ models }: Props) {
               {model.creator_organization} / {model.display_name}
             </li>
           ) : (
-            <li key={idx}>
-              {model.creator_organization} / {model.display_name}
-            </li>
+            <ReactRouterLink className="text-black" to={"models"}>
+              <li key={idx}>
+                {model.creator_organization} / {model.display_name}
+              </li>
+            </ReactRouterLink>
           ),
         )}
       </ul>

diff --git a/src/helm-frontend/src/components/NavBar/NavBar.test.tsx b/src/helm-frontend/src/components/NavBar/NavBar.test.tsx
@@ -11,6 +11,6 @@ test("displays nav bar", () => {
   );
 
   expect(screen.getByRole("navigation")).toHaveTextContent(
-    "ModelsScenariosResultsRaw RunsModelsScenariosResultsRaw Runs",
+    "ModelsScenariosLeaderboardRaw RunsModelsScenariosLeaderboardRaw Runs",
   );
 });
diff --git a/src/helm-frontend/src/components/NavBar/NavBar.tsx b/src/helm-frontend/src/components/NavBar/NavBar.tsx
@@ -26,7 +26,7 @@ export default function NavBar() {
               <Link to="scenarios">Scenarios</Link>
             </li>
             <li>
-              <Link to="groups">Results</Link>
+              <Link to="leaderboard">Leaderboard</Link>
             </li>
             <li>
               <Link to="runs" className="whitespace-nowrap">
@@ -51,7 +51,7 @@ export default function NavBar() {
             <Link to="scenarios">Scenarios</Link>
           </li>
           <li>
-            <Link to="groups">Results</Link>
+            <Link to="leaderboard">Leaderboard</Link>
           </li>
           <li>
             <Link to="runs">Raw Runs</Link>

diff --git a/src/helm-frontend/src/components/NavDropdown.tsx b/src/helm-frontend/src/components/NavDropdown.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { Link } from "react-router-dom";
+import heimLogo from "@/assets/heim-logo.png";
 
 function NavDropdown() {
   const [dropdownOpen, setDropdownOpen] = useState(false);
@@ -50,23 +51,29 @@ function NavDropdown() {
               role="menuitem"
             >
               <Link to="/">
-                <img
-                  src="https://crfm.stanford.edu/helm/v0.3.0/images/helm-logo-simple.png"
-                  alt="Image 1"
-                  className="w-full h-12 object-cover"
-                />
+                <div className="flex items-center">
+                  <img
+                    src="https://crfm.stanford.edu/helm/v0.3.0/images/helm-logo-simple.png"
+                    alt="Image 1"
+                    className="w-15 h-8 object-cover mr-2"
+                  />
+                  <span>Holistic evaluation of language models</span>
+                </div>
               </Link>
             </div>
             <div
               className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
               role="menuitem"
             >
               <Link to="https://crfm.stanford.edu/heim/latest/?">
-                <img
-                  src="https://crfm.stanford.edu/heim/latest/images/heim-logo.png"
-                  alt="Image 2"
-                  className="w-full h-12 object-cover"
-                />
+                <div className="flex items-center">
+                  <img
+                    src={heimLogo}
+                    alt="Image 2"
+                    className="w-15 h-8 object-cover mr-2"
+                  />
+                  <span>Holistic evaluation of image models</span>
+                </div>
               </Link>
             </div>
           </div>

diff --git a/src/helm-frontend/src/components/RowValue.tsx b/src/helm-frontend/src/components/RowValue.tsx
@@ -16,6 +16,9 @@ function formatNumber(value: string | number): string {
 }
 
 export default function RowValue({ value, ignoreHref = false }: Props) {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
+  const legacyRelease = (window as any).LEGACY_RELEASE;
+
   if (value.value === undefined) {
     return "-";
   }
@@ -27,7 +30,7 @@ export default function RowValue({ value, ignoreHref = false }: Props) {
         return value.href;
       }
 
-      return `/groups/${matches[1]}`;
+      return "/" + legacyRelease + `/groups/${matches[1]}`;
     })();
     return <Link to={href}>{formatNumber(value.value)}</Link>;
   }

diff --git a/src/helm-frontend/src/components/ScenariosList.tsx b/src/helm-frontend/src/components/ScenariosList.tsx
@@ -1,4 +1,5 @@
 import type RunGroup from "@/types/RunGroup";
+import { Link as ReactRouterLink } from "react-router-dom";
 
 interface Props {
   runGroups: RunGroup[];
@@ -33,22 +34,46 @@ export default function ScenariosList({ runGroups }: Props) {
           )
           .map((topLevelGroup, idx) => (
             <li key={idx}>
-              <h2>{topLevelGroup.display_name}</h2>
-              <ul>
+              <ReactRouterLink
+                className="text-black"
+                to={"groups/" + topLevelGroup.name}
+              >
+                <h2>{topLevelGroup.display_name}</h2>
+              </ReactRouterLink>
+              <ul className="list-disc list-inside">
                 {subGroups
                   .filter((subGroup) =>
                     (topLevelGroup.subgroups || []).includes(subGroup.name),
                   )
-                  .map((subGroup, idx) => (
-                    <li
-                      key={idx}
-                      className={`${
-                        subGroup.todo ? "ml-4 text-slate-300" : "ml-4"
-                      }`}
-                    >
-                      {subGroup.display_name}
-                    </li>
-                  ))}
+                  .map((subGroup, idx) =>
+                    subGroup.todo || subGroup.name.includes("CLEVA") ? (
+                      <li
+                        key={idx}
+                        className={`${
+                          subGroup.todo ? "ml-4 text-slate-300" : "ml-4"
+                        }`}
+                      >
+                        {subGroup.display_name}
+                      </li>
+                    ) : (
+                      <ReactRouterLink
+                        className="text-black"
+                        to={"groups/" + subGroup.name}
+                      >
+                        <li
+                          key={idx}
+                          className={`${
+                            subGroup.todo ||
+                            subGroup.display_name.includes("CLEVA")
+                              ? "ml-4 text-slate-300"
+                              : "ml-4"
+                          }`}
+                        >
+                          {subGroup.display_name}
+                        </li>
+                      </ReactRouterLink>
+                    ),
+                  )}
               </ul>
             </li>
           ))}