Skip to content

Commit 020255d

Browse files
farzaankfarzaank
authored
React near feature parity (stanford-crfm#1893)
1 parent 5e433c5 commit 020255d

28 files changed

+128
-70
lines changed

‎src/helm-frontend/src/components/AccessBadge.test.tsx ‎src/helm-frontend/src/components/AccessBadge/AccessBadge.test.tsx

File renamed without changes.

‎src/helm-frontend/src/components/AccessBadge.tsx ‎src/helm-frontend/src/components/AccessBadge/AccessBadge.tsx

File renamed without changes.

‎src/helm-frontend/src/components/AccessBadge/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./AccessBadge";

‎src/helm-frontend/src/components/Footer.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import getBenchmarkSuite from "@/utils/getBenchmarkSuite";
2+
3+
export default function Footer() {
4+
const version = getBenchmarkSuite();
5+
return (
6+
<div className="bottom-0 right-0 p-4 bg-white-800 text-black text-right">
7+
<p>Version {version}</p>
8+
</div>
9+
);
10+
}

‎src/helm-frontend/src/components/Indicator.test.tsx ‎src/helm-frontend/src/components/Indicator/Indicator.test.tsx

File renamed without changes.

‎src/helm-frontend/src/components/Indicator.tsx ‎src/helm-frontend/src/components/Indicator/Indicator.tsx

File renamed without changes.

‎src/helm-frontend/src/components/Indicator/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./Indicator";

‎src/helm-frontend/src/components/MarkdownValue.test.tsx ‎src/helm-frontend/src/components/MarkdownValue/MarkdownValue.test.tsx

File renamed without changes.

‎src/helm-frontend/src/components/MarkdownValue.tsx ‎src/helm-frontend/src/components/MarkdownValue/MarkdownValue.tsx

File renamed without changes.

‎src/helm-frontend/src/components/MarkdownValue/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./MarkdownValue";

‎src/helm-frontend/src/components/Nav.test.tsx ‎src/helm-frontend/src/components/NavBar/NavBar.test.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { render, screen } from "@testing-library/react";
22
import "@testing-library/jest-dom";
33
import { MemoryRouter } from "react-router-dom";
4-
import Nav from "./Nav";
4+
import NavBar from "./NavBar";
55

6-
test("displays nav", () => {
6+
test("displays nav bar", () => {
77
render(
88
<MemoryRouter>
9-
<Nav />
9+
<NavBar />
1010
</MemoryRouter>,
1111
);
1212

‎src/helm-frontend/src/components/Nav.tsx ‎src/helm-frontend/src/components/NavBar/NavBar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Bars3Icon } from "@heroicons/react/24/outline";
33
import crfmLogo from "@/assets/crfm-logo.png";
44
import helmLogo from "@/assets/helm-logo-simple.png";
55

6-
export default function Nav() {
6+
export default function NavBar() {
77
return (
88
<nav className="navbar h-24 px-8 md:px-12 bg-base-100 max-w[1500]px">
99
<div>

‎src/helm-frontend/src/components/NavBar/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./NavBar";

‎src/helm-frontend/src/components/PageTitle.test.tsx ‎src/helm-frontend/src/components/PageTitle/PageTitle.test.tsx

File renamed without changes.

‎src/helm-frontend/src/components/PageTitle.tsx ‎src/helm-frontend/src/components/PageTitle/PageTitle.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import MarkdownValue from "./MarkdownValue";
1+
import MarkdownValue from "../MarkdownValue/MarkdownValue";
22

33
interface Props {
44
title: string;

‎src/helm-frontend/src/components/PageTitle/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./PageTitle";

‎src/helm-frontend/src/components/Request.test.tsx ‎src/helm-frontend/src/components/Request/Request.test.tsx

File renamed without changes.

‎src/helm-frontend/src/components/Request.tsx ‎src/helm-frontend/src/components/Request/Request.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { List, ListItem } from "@tremor/react";
22
import type DisplayRequest from "@/types/DisplayRequest";
3-
import Preview from "./Preview";
3+
import Preview from "../Preview";
44

55
type Props = {
66
request: DisplayRequest;

‎src/helm-frontend/src/components/Request/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./Request";

‎src/helm-frontend/src/components/Tabs.test.tsx ‎src/helm-frontend/src/components/Tabs/Tabs.test.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { render, screen } from "@testing-library/react";
22
import "@testing-library/jest-dom";
33
import Tabs from "./Tabs";
4-
import Tab from "./Tab";
4+
import Tab from "../Tab";
55

66
test("display tabs", () => {
77
render(

‎src/helm-frontend/src/components/Tabs.tsx ‎src/helm-frontend/src/components/Tabs/Tabs.tsx

File renamed without changes.

‎src/helm-frontend/src/components/Tabs/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./Tabs";

‎src/helm-frontend/src/layouts/Main.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Outlet } from "react-router-dom";
2-
import Nav from "@/components/Nav";
2+
import Nav from "@/components/NavBar/NavBar";
3+
import Footer from "@/components/Footer";
34

45
export default function Main() {
56
return (
@@ -10,6 +11,7 @@ export default function Main() {
1011
<Outlet />
1112
</div>
1213
</main>
14+
<Footer />
1315
</>
1416
);
1517
}

‎src/helm-frontend/src/routes/Group.tsx

+12-10
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useParams } from "react-router";
33
import PageTitle from "@/components/PageTitle";
44
import Tab from "@/components/Tab";
55
import Tabs from "@/components/Tabs";
6-
import GroupsCharts from "@/components/GroupsCharts";
6+
//import GroupsCharts from "@/components/GroupsCharts";
77
import GroupsTables from "@/components/GroupsTables";
88
import type GroupsTable from "@/types/GroupsTable";
99
import type GroupMetadata from "@/types/GroupMetadata";
@@ -18,7 +18,7 @@ export default function Group() {
1818
GroupMetadata | undefined
1919
>();
2020
const [isLoading, setIsLoading] = useState<boolean>(true);
21-
const [showChart, setShowChart] = useState<boolean>(false);
21+
//const [showChart, setShowChart] = useState<boolean>(false);
2222
const [activeGroup, setActiveGroup] = useState<number>(0);
2323

2424
useEffect(() => {
@@ -69,12 +69,14 @@ export default function Group() {
6969
markdown={true}
7070
className="mr-8 mb-16"
7171
/>
72+
{/*
7273
<button
7374
className="btn btn-xs btn-ghost self-end"
7475
onClick={() => setShowChart(!showChart)}
7576
>
7677
{showChart ? "Show Table" : "Show Chart"}
7778
</button>
79+
*/}
7880
</div>
7981
<div className="overflow-x-auto">
8082
{groupsTables.length > 1 ? (
@@ -92,15 +94,15 @@ export default function Group() {
9294
) : null}
9395
</div>
9496

95-
{showChart ? (
97+
{/*showChart ? (
9698
<GroupsCharts groupsTables={groupsTables} activeGroup={activeGroup} />
97-
) : (
98-
<GroupsTables
99-
groupsTables={groupsTables}
100-
activeGroup={activeGroup}
101-
ignoreHref={true}
102-
/>
103-
)}
99+
) : ( */}
100+
<GroupsTables
101+
groupsTables={groupsTables}
102+
activeGroup={activeGroup}
103+
ignoreHref={true}
104+
/>
105+
{/* )*/}
104106
</>
105107
);
106108
}

‎src/helm-frontend/src/routes/Home.tsx

+19-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useEffect, useState } from "react";
2+
import { Link } from "react-router-dom";
23
import getSchema from "@/services/getSchema";
34
import type Schema from "@/types/Schema";
45
import ModelsList from "@/components/ModelsList";
@@ -59,11 +60,25 @@ export default function Home() {
5960

6061
return (
6162
<>
62-
<img src={helmLogo} alt="HELM Logo" className="mx-auto" />
63+
<img
64+
src={helmLogo}
65+
alt="HELM Logo"
66+
width="309"
67+
height="122"
68+
className="mx-auto w-309 h-122"
69+
/>
6370
<div className="flex flex-col sm:flex-row justify-center mt-16 mb-32 flex gap-2 sm:gap-8 md:gap-32">
64-
<button className="px-10 btn btn-primary">Blog post</button>
65-
<button className="px-10 btn btn-primary">Paper</button>
66-
<button className="px-10 btn btn-primary">GitHub</button>
71+
<button className="px-10 btn btn-primary rounded-md">
72+
<Link to="https://crfm.stanford.edu/2022/11/17/helm.html">
73+
Blog post
74+
</Link>
75+
</button>
76+
<button className="px-10 btn btn-primary rounded-md">
77+
<Link to="https://arxiv.org/pdf/2211.09110.pdf">Paper</Link>
78+
</button>
79+
<button className="px-10 btn btn-primary rounded-md">
80+
<Link to="https://github.com/stanford-crfm/helm">Github</Link>
81+
</button>
6782
</div>
6883
<div className="container mx-auto text-lg">
6984
<p>

‎src/helm-frontend/src/routes/Models.tsx

+38-30
Original file line numberDiff line numberDiff line change
@@ -75,36 +75,7 @@ export default function Models() {
7575
title="Models"
7676
subtitle="HELM evaluates models ranging from hundreds of millions to hundreds of billions of parameters. The models are trained on a varietry of data sources, such as general language understanding, instruction following, multi-task learning, code completion, chatbot functionalities, and various other applications."
7777
/>
78-
<div className="grid md:grid-cols-3 grid-cols-1 gap-8">
79-
<Card className="flex flex-col justify-between">
80-
<Text>Models</Text>
81-
<Metric className="text-6xl md:!text-[96px]">{models.length}</Metric>
82-
<CategoryBar
83-
values={[open, limited, closed]}
84-
colors={["green", "yellow", "red"]}
85-
/>
86-
<Legend
87-
categories={["Open", "Limited", "Closed"]}
88-
colors={["green", "yellow", "red"]}
89-
/>
90-
</Card>
91-
<Card className="md:col-span-2">
92-
<Text>Creator Organizations</Text>
93-
<div className="flex justify-between mt-4">
94-
<DonutChart
95-
data={creators}
96-
category="models"
97-
index="name"
98-
variant="pie"
99-
className="basis-5/12"
100-
/>
101-
<Legend
102-
categories={creators.map((creator) => creator.name)}
103-
className="basis-7/12"
104-
/>
105-
</div>
106-
</Card>
107-
</div>
78+
10879
<div className="overflow-x-auto mt-12">
10980
<table className="table">
11081
<thead>
@@ -134,6 +105,43 @@ export default function Models() {
134105
))}
135106
</tbody>
136107
</table>
108+
109+
<PageTitle
110+
title="Analysis"
111+
subtitle="Here is some high level analysis of the models that HELM supports"
112+
/>
113+
<div className="grid md:grid-cols-3 grid-cols-1 gap-8">
114+
<Card className="flex flex-col justify-between">
115+
<Text>Models</Text>
116+
<Metric className="text-6xl md:!text-[96px]">
117+
{models.length}
118+
</Metric>
119+
<CategoryBar
120+
values={[open, limited, closed]}
121+
colors={["green", "yellow", "red"]}
122+
/>
123+
<Legend
124+
categories={["Open", "Limited", "Closed"]}
125+
colors={["green", "yellow", "red"]}
126+
/>
127+
</Card>
128+
<Card className="md:col-span-2">
129+
<Text>Creator Organizations</Text>
130+
<div className="flex justify-between mt-4">
131+
<DonutChart
132+
data={creators}
133+
category="models"
134+
index="name"
135+
variant="pie"
136+
className="basis-5/12"
137+
/>
138+
<Legend
139+
categories={creators.map((creator) => creator.name)}
140+
className="basis-7/12"
141+
/>
142+
</div>
143+
</Card>
144+
</div>
137145
</div>
138146
</>
139147
);

‎src/helm-frontend/src/routes/Scenarios.tsx

+22-18
Original file line numberDiff line numberDiff line change
@@ -59,24 +59,6 @@ export default function Scenarios() {
5959
title="Scenarios"
6060
subtitle="Scenarios offer a broad coverage of diverse language-related tasks, helping to identify gaps in the model's capabilities. They aid in the standardization of model evaluation by creating a consistent benchmark, thereby ensuring fair and controlled comparisons across various models."
6161
/>
62-
<div className="grid md:grid-cols-4 gap-8">
63-
<Card className="flex flex-col">
64-
<Text>Total Scenarios</Text>
65-
<Metric className="mx-auto my-6 md:mt-16 !text-[72px] md:!text-[96px]">
66-
{runGroups.length}
67-
</Metric>
68-
</Card>
69-
<Card className="col-span-3">
70-
<div className="grid md:grid-cols-2 gap-x-12">
71-
<BarList
72-
data={taskBuckets.slice(0, Math.floor(taskBuckets.length / 2))}
73-
/>
74-
<BarList
75-
data={taskBuckets.slice(Math.ceil(taskBuckets.length / 2))}
76-
/>
77-
</div>
78-
</Card>
79-
</div>
8062
<div className="overflow-x-auto mt-12">
8163
<table className="table">
8264
<thead>
@@ -111,6 +93,28 @@ export default function Scenarios() {
11193
))}
11294
</tbody>
11395
</table>
96+
<PageTitle
97+
title="Analysis"
98+
subtitle="Scenarios offer a broad coverage of diverse language-related tasks, helping to identify gaps in the model's capabilities. They aid in the standardization of model evaluation by creating a consistent benchmark, thereby ensuring fair and controlled comparisons across various models."
99+
/>
100+
<div className="grid md:grid-cols-4 gap-8">
101+
<Card className="flex flex-col">
102+
<Text>Total Scenarios</Text>
103+
<Metric className="mx-auto my-6 md:mt-16 !text-[72px] md:!text-[96px]">
104+
{runGroups.length}
105+
</Metric>
106+
</Card>
107+
<Card className="col-span-3">
108+
<div className="grid md:grid-cols-2 gap-x-12">
109+
<BarList
110+
data={taskBuckets.slice(0, Math.floor(taskBuckets.length / 2))}
111+
/>
112+
<BarList
113+
data={taskBuckets.slice(Math.ceil(taskBuckets.length / 2))}
114+
/>
115+
</div>
116+
</Card>
117+
</div>
114118
</div>
115119
</>
116120
);

‎src/helm-frontend/yarn.lock

+10
Original file line numberDiff line numberDiff line change
@@ -2180,6 +2180,11 @@ escape-string-regexp@^4.0.0:
21802180
resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
21812181
integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
21822182

2183+
eslint-config-prettier@^9.0.0:
2184+
version "9.0.0"
2185+
resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-9.0.0.tgz#eb25485946dd0c66cd216a46232dc05451518d1f"
2186+
integrity sha512-IcJsTkJae2S35pRsRAwoCE+925rJJStOdkKnLVgtE+tEpqU0EVVM7OqrwxqgptKdX29NUwC82I5pXsGFIgSevw==
2187+
21832188
eslint-plugin-react-hooks@^4.6.0:
21842189
version "4.6.0"
21852190
resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
@@ -4163,6 +4168,11 @@ prelude-ls@^1.2.1:
41634168
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
41644169
integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
41654170

4171+
prettier@^3.0.3:
4172+
version "3.0.3"
4173+
resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.3.tgz#432a51f7ba422d1469096c0fdc28e235db8f9643"
4174+
integrity sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==
4175+
41664176
pretty-format@^27.0.2:
41674177
version "27.5.1"
41684178
resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"

0 commit comments

Comments
 (0)