Skip to content

Commit

Permalink
New front end (#1947)
Browse files Browse the repository at this point in the history
  • Loading branch information
farzaank authored Nov 11, 2023
1 parent 801e8fc commit 3648c7f
Show file tree
Hide file tree
Showing 41 changed files with 736 additions and 233 deletions.
6 changes: 2 additions & 4 deletions src/helm-frontend/README.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
React Frontend for HELM
-------------------------
## React Frontend for HELM

This directory contains the files for building and developing an alternative React based frontend for HELM. If you are looking for the current frontend deployed to https://crfm.stanford.edu/helm/latest/ you will want to look in `helm/benchmark/static` and `helm/benchmark/proxy/static`. If you are looking to make changes to the alternative React frontend, then you are in the correct place.

This app makes use of [React](https://react.dev/) + [TypeScript](https://www.typescriptlang.org/) and built with [vite](https://vitejs.dev/). [Tailwindcss](https://tailwindcss.com/) is used for CSS along with some help from the UI frameworks [daisyUI](https://daisyui.com/) and [tremor](https://www.tremor.so/). [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) is used for tests.



### Installation

```bash
npm Install
```
Expand Down
1 change: 1 addition & 0 deletions src/helm-frontend/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 4 additions & 0 deletions src/helm-frontend/public/config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
window.BENCHMARK_OUTPUT_BASE_URL =
"https://storage.googleapis.com/crfm-helm-public/";
window.SUITE = "v0.2.4";
window.RELEASE = "v0.3.0";
20 changes: 11 additions & 9 deletions src/helm-frontend/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,26 +1,28 @@
import "./App.css";
import { HashRouter as Router, Route, Routes } 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 Landing from "@/routes/Landing";
import Leaderboard from "@/routes/Leaderboard";

export default function App() {
return (
<Router>
<Routes>
<Route element={<Layout />}>
<Route path="/" element={<Home />} />
<Route path="/models" element={<Models />} />
<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={`/`} 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>
Expand Down
Binary file added src/helm-frontend/src/assets/heim-logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/helm-frontend/src/assets/helmhero.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 39 additions & 0 deletions src/helm-frontend/src/components/Alert.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { useState } from "react";
import Link from "./Link";

export default function Alert() {
const [visible, setVisible] = useState(true);

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={"/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>
)
);
}
2 changes: 1 addition & 1 deletion src/helm-frontend/src/components/Card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ export default function Card() {
<div className="stats shadow">
<div className="stat">
<div className="stat-title">Total Models</div>
<div className="stat-value">123</div>
<div className="stat-value">1</div>
</div>
</div>
);
Expand Down
5 changes: 3 additions & 2 deletions src/helm-frontend/src/components/Footer.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import getBenchmarkSuite from "@/utils/getBenchmarkSuite";
import getBenchmarkRelease from "@/utils/getBenchmarkRelease";
//import getBenchmarkSuite from "@/utils/getBenchmarkSuite";

export default function Footer() {
const version = getBenchmarkSuite();
const version = getBenchmarkRelease();
return (
<div className="bottom-0 right-0 p-4 bg-white-800 text-black text-right">
<p>Version {version}</p>
Expand Down
43 changes: 43 additions & 0 deletions src/helm-frontend/src/components/Hero.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import helmHero from "@/assets/helmhero.png";
import { Link } from "react-router-dom";

export default function Hero() {
return (
<div className="flex px-6 py-14">
{/* Left side content */}
<div className="flex-1 p-4 flex flex-col justify-center">
{" "}
{/* Added flex and justify-center */}
<h1 className="text-4xl mb-4 mx-4">
{" "}
{/* Added mx-4 for horizontal margin */}
HELM is{" "}
<strong>
{" "}
a transparent benchmarking system for language models{" "}
</strong>
, providing standardized evaluations with multiple metrics and open
access.
</h1>
<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>
</div>
</div>

{/* Right side image */}
<div className="w-1/3 mx-4">
{" "}
{/* Added mx-4 for horizontal margin */}
<img
src={helmHero}
alt="HELM Hero"
className="object-cover w-full h-full"
/>
</div>
</div>
);
}
128 changes: 128 additions & 0 deletions src/helm-frontend/src/components/LeaderboardTables.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
import { useEffect, useState } from "react";
import { ChevronUpDownIcon } from "@heroicons/react/24/solid";
import type GroupsTable from "@/types/GroupsTable";
import RowValue from "@/components/RowValue";

interface Props {
groupsTables: GroupsTable[];
activeGroup: number;
ignoreHref?: boolean;
sortable?: boolean;
sortFirstMetric?: boolean;
}

export default function LeaderboardTables({
groupsTables,
activeGroup,
ignoreHref = false,
sortable = true,
sortFirstMetric = true,
}: Props) {
const [activeSortColumn, setActiveSortColumn] = useState<number | undefined>(
sortFirstMetric ? 1 : undefined,
);
const [activeGroupsTable, setActiveGroupsTable] = useState<GroupsTable>({
...groupsTables[activeGroup],
});
const [sortDirection, setSortDirection] = useState<number>(1);

useEffect(() => {
setActiveGroupsTable({ ...groupsTables[activeGroup] });
}, [activeGroup, groupsTables]);

const handleSort = (columnIndex: number) => {
let sort = sortDirection;
if (activeSortColumn === columnIndex) {
sort = sort * -1;
} else {
sort = 1;
}
setActiveSortColumn(columnIndex);
setSortDirection(sort);

setActiveGroupsTable((prev) => {
const group = { ...prev };
group.rows.sort((a, b) => {
const av = a[columnIndex]?.value;
const bv = b[columnIndex]?.value;
if (av !== undefined && bv === undefined) {
return -1;
}
if (bv !== undefined && av === undefined) {
return 1;
}
if (typeof av === "number" && typeof bv === "number") {
return (av - bv) * sort;
}
if (typeof av === "string" && typeof bv === "string") {
if (sort === 1) {
return av.localeCompare(bv);
}
return bv.localeCompare(av);
}

return 0;
});

return group;
});
};
useEffect(() => {
if (sortFirstMetric && activeSortColumn) {
handleSort(activeSortColumn);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [sortFirstMetric, activeSortColumn]);

return (
<div className="rounded-lg overflow-hidden shadow-md bg-white p-4">
<div className="overflow-x-auto">
<table className="table w-full px-4">
<thead>
<tr>
{activeGroupsTable.header.map((headerValue, idx) => (
<th
key={`${activeGroup}-${idx}`}
className={`${
idx === activeSortColumn ? "bg-gray-100" : ""
} whitespace-nowrap px-4`}
>
<div className="flex gap-2 items-center">
<span>{headerValue.value}</span>
{sortable ? (
<button className="link" onClick={() => handleSort(idx)}>
<ChevronUpDownIcon className="w-6 h-6" />
</button>
) : null}
</div>
</th>
))}
</tr>
</thead>
<tbody>
{activeGroupsTable.rows.map((row, idx) => (
<tr
key={`${activeGroup}-${idx}`}
className={`${idx % 2 === 0 ? "bg-gray-50" : ""}`}
>
{" "}
{/* Added alternating row highlighting */}
{row.map((rowValue, cellIdx) => (
<td
key={`${activeGroup}-${cellIdx}`}
className={`${cellIdx === 0 ? "text-lg" : ""}`}
>
<RowValue
ignoreHref={ignoreHref && cellIdx === 0}
value={rowValue}
/>
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
</div>
);
}
12 changes: 8 additions & 4 deletions src/helm-frontend/src/components/MetricsList.tsx
Original file line number Diff line number Diff line change
@@ -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[];
Expand All @@ -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),
Expand Down
9 changes: 6 additions & 3 deletions src/helm-frontend/src/components/ModelsList.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type Model from "@/types/Model";
import { Link as ReactRouterLink } from "react-router-dom";

interface Props {
models: Model[];
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/helm-frontend/src/components/NavBar/NavBar.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@ test("displays nav bar", () => {
);

expect(screen.getByRole("navigation")).toHaveTextContent(
"ModelsScenariosResultsRaw RunsModelsScenariosResultsRaw Runs",
"ModelsScenariosLeaderboardRaw RunsModelsScenariosLeaderboardRaw Runs",
);
});
11 changes: 5 additions & 6 deletions src/helm-frontend/src/components/NavBar/NavBar.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { Link } from "react-router-dom";
import { Bars3Icon } from "@heroicons/react/24/outline";
import crfmLogo from "@/assets/crfm-logo.png";
import helmLogo from "@/assets/helm-logo-simple.png";
//import helmLogo from "@/assets/helm-logo-simple.png";
import NavDropdown from "@/components/NavDropdown";

export default function NavBar() {
return (
Expand All @@ -25,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">
Expand All @@ -39,9 +40,7 @@ export default function NavBar() {
<Link to="https://crfm.stanford.edu/" className="w-24">
<img src={crfmLogo} className="object-contain" />
</Link>
<Link to="/" className="ml-4 w-24">
<img src={helmLogo} className="object-contain" />
</Link>
<NavDropdown></NavDropdown>
</div>
<div className="flex-none hidden md:block">
<ul className="flex flex-row gap-6 px-1">
Expand All @@ -52,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>
Expand Down
Loading

0 comments on commit 3648c7f

Please sign in to comment.