Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update global landing page #2593

Merged
merged 10 commits into from
May 3, 2024
Merged

Update global landing page #2593

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4e70ff0
updates from fork
farzaank Apr 30, 2024
6b45174
some changes
farzaank Apr 30, 2024
ae3350a
fix issues
farzaank Apr 30, 2024
966aaa8
fixes
farzaank May 1, 2024
de075c3
fix request URL
farzaank May 1, 2024
f870132
revert config
farzaank May 1, 2024
a19ad42
fix dropdown bug
farzaank May 1, 2024
63b0105
revert
farzaank May 1, 2024
3a356db
add period
farzaank May 2, 2024
8f4de4c
address feedback
farzaank May 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion helm-frontend/project_metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"title": "Lite",
"description": "Lightweight, broad evaluation of the capabilities of language models using in-context learning",
"id": "lite",
"releases": ["v1.1.0", "v1.0.0"]
"releases": ["v1.2.0", "v1.1.0", "v1.0.0"]
},
{
"title": "Classic",
Expand All @@ -22,5 +22,17 @@
"description": "Evaluations of instruction following models with absolute ratings",
"id": "instruct",
"releases": ["v1.0.0"]
},
{
"title": "MMLU",
"description": "Massive Multitask Language Understanding (MMLU) evaluations using standardized prompts",
"id": "mmlu",
"releases": ["v1.1.0", "v1.0.0"]
},
{
"title": "All Leaderboards",
"description": "Home page for all HELM leaderboards",
"id": "home",
"releases": ["v1.0.0"]
}
]
25 changes: 11 additions & 14 deletions helm-frontend/src/components/CardGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default function CardGrid() {

useEffect(() => {
fetch(
"https://storage.googleapis.com/crfm-helm-public/config/release_index.json",
"https://raw.githubusercontent.com/stanford-crfm/helm/main/helm-frontend/project_metadata.json",
)
.then((response) => response.json())
.then((data: ReleaseIndexEntry[]) => {
Expand All @@ -24,19 +24,16 @@ export default function CardGrid() {
<div className="p-10 mb-20">
<div className="grid grid-cols-3 gap-4">
{projectEntries &&
projectEntries.map((project, index) => (
<ProjectCard
key={index}
id={project.id}
title={project.title}
imageUrl={
project.imageUrl !== undefined
? String(project.imageUrl)
: undefined
}
text={project.description}
/>
))}
projectEntries.map((project, index) =>
project.id === "home" ? null : (
<ProjectCard
key={index}
id={project.id}
title={project.title}
text={project.description}
/>
),
)}
</div>
</div>
);
Expand Down
16 changes: 9 additions & 7 deletions .../src/components/Landing/GlobalLanding.tsx → ...nd/src/components/Landing/HomeLanding.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const logos = [
zeroOne,
];

export default function LegacyLanding() {
export default function HomeLanding() {
const [schema, setSchema] = useState<Schema | undefined>(undefined);

useEffect(() => {
Expand All @@ -68,17 +68,19 @@ export default function LegacyLanding() {
return (
<>
<SimpleHero />
<div className="container mt-40 mx-auto text-lg">
<div className="container mt-30 mx-auto text-lg">
<div className="flex flex-col sm:flex-row justify-center mb-10 flex sm:gap-8 md:gap-32">
<h1 className="text-4xl mx-4 ">
<strong>HELM Projects</strong>
<strong>HELM Leaderboards</strong>
</h1>
</div>
<div className="flex flex-col sm:flex-row flex sm:gap-8 md:gap-32">
<text>
HELM projects leverage the HELM framework and target particular
domains, languages, or use cases.
</text>
<body>
HELM leaderboards leverage the HELM framework and target particular
domains and/or capabilities. Leaderboards range from real world
applications and specific domains to ones focused on multimodal
capabilities and model-evaluations.
</body>
</div>
</div>
<CardGrid />
Expand Down
31 changes: 14 additions & 17 deletions helm-frontend/src/components/NavDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,28 +11,17 @@ function NavDropdown() {

useEffect(() => {
fetch(
"https://storage.googleapis.com/crfm-helm-public/config/project_metadata.json",
"https://raw.githubusercontent.com/stanford-crfm/helm/main/helm-frontend/project_metadata.json",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file is pretty stale and missing most of the new versions, could you update it?

The other implication of this change is that you can break production websites by merging a pull request to this repository, which isn't currently the case.

Also this should be a constant somewhere given that multiple files are using it...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added from latest on Google Cloud, will make follow-up to use a constant.

)
.then((response) => response.json())
.then((data: ProjectMetadata[]) => {
setProjectMetadata(data);
// set currProjectMetadata to val where projectMetadataEntry.id matches window.PROJECT_ID
if (window.PROJECT_ID) {
if (window.PROJECT_ID === "global") {
// TODO replace this hardcoding if we choose to put global in the project metadata array
setCurrProjectMetadata({
id: "global",
title: "All Projects",
description: "description",
releases: ["releases"],
imageUrl: "imageUrl",
});
} else {
const currentEntry = data.find(
(entry) => entry.id === window.PROJECT_ID,
);
setCurrProjectMetadata(currentEntry);
}
const currentEntry = data.find(
(entry) => entry.id === window.PROJECT_ID,
);
setCurrProjectMetadata(currentEntry);
// handles falling back to HELM lite as was previously done in this file
} else {
const currentEntry = data.find((entry) => entry.id === "lite");
Expand Down Expand Up @@ -79,7 +68,15 @@ function NavDropdown() {
className="block"
role="menuitem"
>
<strong>{item.title}:</strong> {item.description}
<strong
className={
currProjectMetadata.title === item.title ? "underline" : ""
}
>
{item.title}
</strong>
{": "}
{item.description}
</a>
</li>
))}
Expand Down
27 changes: 19 additions & 8 deletions helm-frontend/src/components/ProjectCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,34 @@ import React from "react";
interface CardProps {
id: string;
title: string;
imageUrl: string | undefined;
text: string;
}

const ProjectCard: React.FC<CardProps> = ({ id, title, imageUrl, text }) => {
const ProjectCard: React.FC<CardProps> = ({ id, title, text }) => {
if (!title.includes("HE")) {
title = "HELM " + title;
}
return (
<div className="max-w-sm rounded overflow-hidden bg-gray-100 hover:scale-105 transition-transform duration-300">
{imageUrl ? <img className="w-full" src={imageUrl} alt={title} /> : <></>}
<div className="px-6 py-4">
<div className="font-bold text-xl mb-2">
<a href={getReleaseUrl(undefined, id)}> {title + " →"}</a>
<a href={getReleaseUrl(undefined, id)}>
<div className="px-6 py-4">
<div className="font-bold text-xl mb-2">
<div className="py-3">
<svg
fill="#000000"
width="20px"
height="20px"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M22,7H16.333V4a1,1,0,0,0-1-1H8.667a1,1,0,0,0-1,1v7H2a1,1,0,0,0-1,1v8a1,1,0,0,0,1,1H22a1,1,0,0,0,1-1V8A1,1,0,0,0,22,7ZM7.667,19H3V13H7.667Zm6.666,0H9.667V5h4.666ZM21,19H16.333V9H21Z" />
</svg>
</div>
{title + " →"}
</div>
<p className="text-gray-700 text-base">{text}</p>
</div>
<p className="text-gray-700 text-base">{text}</p>
</div>
</a>
</div>
);
};
Expand Down
2 changes: 1 addition & 1 deletion helm-frontend/src/components/ReleaseDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ function ReleaseDropdown() {

useEffect(() => {
fetch(
"https://storage.googleapis.com/crfm-helm-public/config/project_metadata.json",
"https://raw.githubusercontent.com/stanford-crfm/helm/main/helm-frontend/project_metadata.json",
)
.then((response) => response.json())
.then((data: ProjectMetadata[]) => {
Expand Down
39 changes: 24 additions & 15 deletions helm-frontend/src/components/SimpleHero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,45 @@
import helmHero from "@/assets/helmhero.png";
import { Link } from "react-router-dom";

export default function SimpleHero() {
return (
<div className="flex px-6 py-20">
<div className="flex flex-col md:flex-row px-6 py-36">
<div className="flex-1 p-4 flex flex-col justify-center">
<div className="flex justify-start">
<h1 className="text-5xl mb-4 mx-4 mt-2">
<strong>
A holistic framework for evaluating foundation models.
</strong>
</h1>
<div>
<h1 className="text-4xl mb-4 mx-4 mt-2">
<strong>
A reproducible and transparent framework for evaluating
foundation models.
</strong>
</h1>
<h3
className="text-xl
mb-4 mx-4 mt-2"
>
Find leaderboards with many scenarios, metrics, and models with
support for multimodality and model-graded evaluation.
</h3>
</div>
</div>
<div className="flex justify-start mt-6 ml-4">
<div className="flex flex-col md:flex-row justify-start mt-6 ml-4">
<button
className="px-6 btn btn-grey rounded-md"
className="px-6 btn btn-grey rounded-md mb-4 md:mb-0"
onClick={() =>
window.scrollTo({
top: 700,
top: 760,
behavior: "smooth",
})
}
>
<body>Projects</body>
<div>Leaderboards ↓</div>
</button>
<button className="px-6 btn btn-grey rounded-md md:ml-4">
<a href="https://github.com/stanford-crfm/helm">Github</a>
</button>
<Link to="https://github.com/stanford-crfm/helm" className="ml-4">
<button className="px-6 btn btn-grey rounded-md">Github</button>
</Link>
</div>
</div>

<div className="w-1/3 mx-4">
<div className="mx-4 mt-6 md:mt-0 md:w-1/3">
<img
src={helmHero}
alt="HELM Hero"
Expand Down
6 changes: 3 additions & 3 deletions helm-frontend/src/routes/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import LiteLanding from "@/components/Landing/LiteLanding";
import MMLULanding from "@/components/Landing/MMLULanding";
import HEIMLanding from "@/components/Landing/HEIMLanding";
import VHELMLanding from "@/components/VHELMLanding";
import GlobalLanding from "@/components/Landing/GlobalLanding";
import HomeLanding from "@/components/Landing/HomeLanding";

export default function Home() {
// TODO consider a more streamlined way to do this?
Expand All @@ -17,8 +17,8 @@ export default function Home() {
return <MMLULanding />;
} else if (window.PROJECT_ID === "vhelm") {
return <VHELMLanding />;
} else if (window.PROJECT_ID === "global") {
return <GlobalLanding />;
} else if (window.PROJECT_ID === "home") {
return <HomeLanding />;
} else {
return <LiteLanding />;
}
Expand Down