Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
update mobile view; fix iphone scroll bug
Browse files- frontend/public/index.html +23 -1
- frontend/src/App.js +42 -32
- frontend/src/components/shared/PageHeader.js +4 -3
- frontend/src/config/theme.js +9 -0
- frontend/src/pages/LeaderboardPage/components/Leaderboard/components/Filters/QuickFilters.js +26 -23
- frontend/src/pages/LeaderboardPage/components/Leaderboard/components/Filters/SearchBar.js +12 -6
- frontend/src/pages/LeaderboardPage/components/Leaderboard/components/Table/Table.js +2 -1
frontend/public/index.html
CHANGED
@@ -3,7 +3,10 @@
|
|
3 |
<head>
|
4 |
<meta charset="utf-8" />
|
5 |
<link rel="icon" href="%PUBLIC_URL%/logo32.png" />
|
6 |
-
<meta
|
|
|
|
|
|
|
7 |
<meta
|
8 |
name="description"
|
9 |
content="Interactive leaderboard tracking and comparing open-source Large Language Models across multiple benchmarks: IFEval, BBH, MATH, GPQA, MUSR, and MMLU-PRO."
|
@@ -56,6 +59,25 @@
|
|
56 |
href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap"
|
57 |
rel="stylesheet"
|
58 |
/>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
59 |
</head>
|
60 |
<body>
|
61 |
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
|
3 |
<head>
|
4 |
<meta charset="utf-8" />
|
5 |
<link rel="icon" href="%PUBLIC_URL%/logo32.png" />
|
6 |
+
<meta
|
7 |
+
name="viewport"
|
8 |
+
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
|
9 |
+
/>
|
10 |
<meta
|
11 |
name="description"
|
12 |
content="Interactive leaderboard tracking and comparing open-source Large Language Models across multiple benchmarks: IFEval, BBH, MATH, GPQA, MUSR, and MMLU-PRO."
|
|
|
59 |
href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap"
|
60 |
rel="stylesheet"
|
61 |
/>
|
62 |
+
<style>
|
63 |
+
html,
|
64 |
+
body {
|
65 |
+
position: fixed;
|
66 |
+
width: 100%;
|
67 |
+
height: 100%;
|
68 |
+
overflow: hidden;
|
69 |
+
-webkit-overflow-scrolling: touch;
|
70 |
+
}
|
71 |
+
#root {
|
72 |
+
position: absolute;
|
73 |
+
top: 0;
|
74 |
+
left: 0;
|
75 |
+
right: 0;
|
76 |
+
bottom: 0;
|
77 |
+
overflow-y: auto;
|
78 |
+
-webkit-overflow-scrolling: touch;
|
79 |
+
}
|
80 |
+
</style>
|
81 |
</head>
|
82 |
<body>
|
83 |
<noscript>You need to enable JavaScript to run this app.</noscript>
|
frontend/src/App.js
CHANGED
@@ -70,45 +70,55 @@ function App() {
|
|
70 |
const theme = getTheme(mode);
|
71 |
|
72 |
return (
|
73 |
-
<
|
74 |
-
|
75 |
-
|
76 |
-
|
77 |
-
|
78 |
-
|
79 |
-
|
80 |
-
|
81 |
-
|
82 |
-
|
83 |
-
|
84 |
-
|
85 |
-
|
86 |
-
|
87 |
-
|
88 |
-
<Navigation onToggleTheme={toggleTheme} mode={mode} />
|
89 |
<Box
|
90 |
sx={{
|
91 |
-
|
92 |
display: "flex",
|
93 |
flexDirection: "column",
|
94 |
-
|
95 |
-
|
96 |
-
pb: 4,
|
97 |
}}
|
98 |
>
|
99 |
-
<
|
100 |
-
|
101 |
-
|
102 |
-
|
103 |
-
|
104 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
105 |
</Box>
|
106 |
-
|
107 |
-
|
108 |
-
|
109 |
-
|
110 |
-
|
111 |
-
</QueryClientProvider>
|
112 |
);
|
113 |
}
|
114 |
|
|
|
70 |
const theme = getTheme(mode);
|
71 |
|
72 |
return (
|
73 |
+
<div
|
74 |
+
className="App"
|
75 |
+
style={{
|
76 |
+
height: "100%",
|
77 |
+
width: "100%",
|
78 |
+
WebkitOverflowScrolling: "touch",
|
79 |
+
overflow: "auto",
|
80 |
+
}}
|
81 |
+
>
|
82 |
+
<QueryClientProvider client={queryClient}>
|
83 |
+
<ThemeProvider theme={theme}>
|
84 |
+
<CssBaseline />
|
85 |
+
<Router>
|
86 |
+
<LeaderboardProvider>
|
87 |
+
<UrlHandler />
|
|
|
88 |
<Box
|
89 |
sx={{
|
90 |
+
minHeight: "100vh",
|
91 |
display: "flex",
|
92 |
flexDirection: "column",
|
93 |
+
bgcolor: "background.default",
|
94 |
+
color: "text.primary",
|
|
|
95 |
}}
|
96 |
>
|
97 |
+
<Navigation onToggleTheme={toggleTheme} mode={mode} />
|
98 |
+
<Box
|
99 |
+
sx={{
|
100 |
+
flex: 1,
|
101 |
+
display: "flex",
|
102 |
+
flexDirection: "column",
|
103 |
+
width: "100%",
|
104 |
+
px: 4,
|
105 |
+
pb: 4,
|
106 |
+
}}
|
107 |
+
>
|
108 |
+
<Routes>
|
109 |
+
<Route path="/" element={<LeaderboardPage />} />
|
110 |
+
<Route path="/add" element={<AddModelPage />} />
|
111 |
+
<Route path="/quote" element={<QuotePage />} />
|
112 |
+
<Route path="/vote" element={<VoteModelPage />} />
|
113 |
+
</Routes>
|
114 |
+
</Box>
|
115 |
+
<Footer />
|
116 |
</Box>
|
117 |
+
</LeaderboardProvider>
|
118 |
+
</Router>
|
119 |
+
</ThemeProvider>
|
120 |
+
</QueryClientProvider>
|
121 |
+
</div>
|
|
|
122 |
);
|
123 |
}
|
124 |
|
frontend/src/components/shared/PageHeader.js
CHANGED
@@ -1,5 +1,5 @@
|
|
1 |
-
import React from
|
2 |
-
import { Box, Typography } from
|
3 |
|
4 |
const PageHeader = ({ title, subtitle }) => {
|
5 |
return (
|
@@ -8,6 +8,7 @@ const PageHeader = ({ title, subtitle }) => {
|
|
8 |
display: "flex",
|
9 |
flexDirection: "column",
|
10 |
alignItems: "center",
|
|
|
11 |
mb: 6,
|
12 |
mt: 6,
|
13 |
gap: 2,
|
@@ -25,4 +26,4 @@ const PageHeader = ({ title, subtitle }) => {
|
|
25 |
);
|
26 |
};
|
27 |
|
28 |
-
export default PageHeader;
|
|
|
1 |
+
import React from "react";
|
2 |
+
import { Box, Typography } from "@mui/material";
|
3 |
|
4 |
const PageHeader = ({ title, subtitle }) => {
|
5 |
return (
|
|
|
8 |
display: "flex",
|
9 |
flexDirection: "column",
|
10 |
alignItems: "center",
|
11 |
+
textAlign: "center",
|
12 |
mb: 6,
|
13 |
mt: 6,
|
14 |
gap: 2,
|
|
|
26 |
);
|
27 |
};
|
28 |
|
29 |
+
export default PageHeader;
|
frontend/src/config/theme.js
CHANGED
@@ -371,6 +371,15 @@ const getDesignTokens = (mode) => ({
|
|
371 |
},
|
372 |
},
|
373 |
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
374 |
});
|
375 |
|
376 |
const getTheme = (mode) => {
|
|
|
371 |
},
|
372 |
},
|
373 |
},
|
374 |
+
breakpoints: {
|
375 |
+
values: {
|
376 |
+
xs: 0,
|
377 |
+
sm: 600,
|
378 |
+
md: 900,
|
379 |
+
lg: 1240,
|
380 |
+
xl: 1536,
|
381 |
+
},
|
382 |
+
},
|
383 |
});
|
384 |
|
385 |
const getTheme = (mode) => {
|
frontend/src/pages/LeaderboardPage/components/Leaderboard/components/Filters/QuickFilters.js
CHANGED
@@ -151,34 +151,37 @@ const QuickFilters = ({ totalCount = 0, loading = false }) => {
|
|
151 |
<Box sx={{ width: "100%" }}>
|
152 |
<Box
|
153 |
sx={{
|
154 |
-
|
155 |
-
|
156 |
-
|
157 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
158 |
width: "100%",
|
159 |
-
|
160 |
-
|
161 |
-
|
|
|
|
|
|
|
162 |
}}
|
163 |
>
|
164 |
<Box
|
165 |
sx={{
|
166 |
display: "flex",
|
167 |
alignItems: "center",
|
168 |
-
gap:
|
169 |
-
|
170 |
-
|
171 |
}}
|
172 |
>
|
173 |
-
<Typography
|
174 |
-
variant="subtitle2"
|
175 |
-
sx={{
|
176 |
-
fontSize: "0.8rem",
|
177 |
-
fontWeight: 700,
|
178 |
-
color: "text.secondary",
|
179 |
-
whiteSpace: "nowrap",
|
180 |
-
}}
|
181 |
-
>
|
182 |
Quick Filters
|
183 |
</Typography>
|
184 |
<InfoIconWithTooltip
|
@@ -190,8 +193,8 @@ const QuickFilters = ({ totalCount = 0, loading = false }) => {
|
|
190 |
<Box
|
191 |
sx={{
|
192 |
display: "flex",
|
193 |
-
flexDirection: { xs: "column",
|
194 |
-
alignItems: { xs: "stretch",
|
195 |
gap: 2,
|
196 |
flex: 1,
|
197 |
width: { xs: "100%", md: "auto" },
|
@@ -200,9 +203,9 @@ const QuickFilters = ({ totalCount = 0, loading = false }) => {
|
|
200 |
<Box
|
201 |
sx={{
|
202 |
display: "flex",
|
203 |
-
flexDirection: { xs: "column",
|
204 |
gap: 0.5,
|
205 |
-
flexWrap: { xs: "nowrap",
|
206 |
borderRight: {
|
207 |
xs: "none",
|
208 |
md: (theme) => `1px solid ${alpha(theme.palette.divider, 0.2)}`,
|
|
|
151 |
<Box sx={{ width: "100%" }}>
|
152 |
<Box
|
153 |
sx={{
|
154 |
+
backgroundColor: (theme) => ({
|
155 |
+
xs: alpha(theme.palette.primary.main, 0.02),
|
156 |
+
lg: "transparent",
|
157 |
+
}),
|
158 |
+
borderColor: (theme) => ({
|
159 |
+
xs: alpha(theme.palette.primary.main, 0.2),
|
160 |
+
lg: "transparent",
|
161 |
+
}),
|
162 |
+
border: "1px solid",
|
163 |
+
borderRadius: 1,
|
164 |
+
p: 3,
|
165 |
+
position: "relative",
|
166 |
width: "100%",
|
167 |
+
display: "flex",
|
168 |
+
flexDirection: { xs: "column", lg: "row" },
|
169 |
+
transition: (theme) =>
|
170 |
+
theme.transitions.create(["border-color", "background-color"], {
|
171 |
+
duration: theme.transitions.duration.short,
|
172 |
+
}),
|
173 |
}}
|
174 |
>
|
175 |
<Box
|
176 |
sx={{
|
177 |
display: "flex",
|
178 |
alignItems: "center",
|
179 |
+
gap: 0.5,
|
180 |
+
mb: 1.5,
|
181 |
+
mr: 2,
|
182 |
}}
|
183 |
>
|
184 |
+
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
185 |
Quick Filters
|
186 |
</Typography>
|
187 |
<InfoIconWithTooltip
|
|
|
193 |
<Box
|
194 |
sx={{
|
195 |
display: "flex",
|
196 |
+
flexDirection: { xs: "column", lg: "row" },
|
197 |
+
alignItems: { xs: "stretch", lg: "center" },
|
198 |
gap: 2,
|
199 |
flex: 1,
|
200 |
width: { xs: "100%", md: "auto" },
|
|
|
203 |
<Box
|
204 |
sx={{
|
205 |
display: "flex",
|
206 |
+
flexDirection: { xs: "column", lg: "row" },
|
207 |
gap: 0.5,
|
208 |
+
flexWrap: { xs: "nowrap", lg: "nowrap" },
|
209 |
borderRight: {
|
210 |
xs: "none",
|
211 |
md: (theme) => `1px solid ${alpha(theme.palette.divider, 0.2)}`,
|
frontend/src/pages/LeaderboardPage/components/Leaderboard/components/Filters/SearchBar.js
CHANGED
@@ -190,6 +190,7 @@ const SearchBar = ({
|
|
190 |
flex: 1,
|
191 |
fontSize: "1rem",
|
192 |
color: "text.primary",
|
|
|
193 |
"& .MuiInputBase-input": {
|
194 |
padding: "2px 0",
|
195 |
fontWeight: 600,
|
@@ -244,7 +245,7 @@ const SearchBar = ({
|
|
244 |
variant="body2"
|
245 |
sx={{
|
246 |
fontWeight: 600,
|
247 |
-
display: { xs: "none",
|
248 |
}}
|
249 |
>
|
250 |
Reset
|
@@ -282,7 +283,7 @@ const SearchBar = ({
|
|
282 |
variant="body2"
|
283 |
sx={{
|
284 |
fontWeight: 600,
|
285 |
-
display: { xs: "none",
|
286 |
}}
|
287 |
>
|
288 |
Advanced Filters
|
@@ -290,11 +291,13 @@ const SearchBar = ({
|
|
290 |
</Box>
|
291 |
<InfoIconWithTooltip
|
292 |
tooltip={UI_TOOLTIPS.SEARCH_BAR}
|
293 |
-
iconProps={{
|
|
|
|
|
294 |
/>
|
295 |
</Box>
|
296 |
</Paper>
|
297 |
-
<Box sx={{ ml: 3.5 }}>
|
298 |
{localValue ? (
|
299 |
<SearchDescription searchValue={localValue} />
|
300 |
) : (
|
@@ -304,10 +307,13 @@ const SearchBar = ({
|
|
304 |
sx={{
|
305 |
color: "text.secondary",
|
306 |
fontSize: "0.75rem",
|
307 |
-
textAlign: "left",
|
308 |
opacity: 1,
|
309 |
transition: "opacity 0.2s ease",
|
310 |
-
|
|
|
|
|
|
|
311 |
}}
|
312 |
>
|
313 |
Supports strict search and regex • Use semicolons for multiple
|
|
|
190 |
flex: 1,
|
191 |
fontSize: "1rem",
|
192 |
color: "text.primary",
|
193 |
+
mr: 4,
|
194 |
"& .MuiInputBase-input": {
|
195 |
padding: "2px 0",
|
196 |
fontWeight: 600,
|
|
|
245 |
variant="body2"
|
246 |
sx={{
|
247 |
fontWeight: 600,
|
248 |
+
display: { xs: "none", md: "block" },
|
249 |
}}
|
250 |
>
|
251 |
Reset
|
|
|
283 |
variant="body2"
|
284 |
sx={{
|
285 |
fontWeight: 600,
|
286 |
+
display: { xs: "none", md: "block" },
|
287 |
}}
|
288 |
>
|
289 |
Advanced Filters
|
|
|
291 |
</Box>
|
292 |
<InfoIconWithTooltip
|
293 |
tooltip={UI_TOOLTIPS.SEARCH_BAR}
|
294 |
+
iconProps={{
|
295 |
+
sx: { fontSize: "1.2rem", display: { xs: "none", md: "block" } },
|
296 |
+
}}
|
297 |
/>
|
298 |
</Box>
|
299 |
</Paper>
|
300 |
+
<Box sx={{ ml: 3.5, mr: 3.5 }}>
|
301 |
{localValue ? (
|
302 |
<SearchDescription searchValue={localValue} />
|
303 |
) : (
|
|
|
307 |
sx={{
|
308 |
color: "text.secondary",
|
309 |
fontSize: "0.75rem",
|
310 |
+
textAlign: { xs: "center", sm: "left" },
|
311 |
opacity: 1,
|
312 |
transition: "opacity 0.2s ease",
|
313 |
+
minHeight: "18px",
|
314 |
+
width: "100%",
|
315 |
+
whiteSpace: "normal",
|
316 |
+
lineHeight: 1.5,
|
317 |
}}
|
318 |
>
|
319 |
Supports strict search and regex • Use semicolons for multiple
|
frontend/src/pages/LeaderboardPage/components/Leaderboard/components/Table/Table.js
CHANGED
@@ -194,9 +194,10 @@ const TableControls = React.memo(
|
|
194 |
<Box
|
195 |
sx={{
|
196 |
display: "flex",
|
197 |
-
justifyContent: "flex-end",
|
198 |
gap: 1,
|
199 |
mb: 2,
|
|
|
200 |
}}
|
201 |
>
|
202 |
<TableOptions
|
|
|
194 |
<Box
|
195 |
sx={{
|
196 |
display: "flex",
|
197 |
+
justifyContent: { xs: "center", md: "flex-end" },
|
198 |
gap: 1,
|
199 |
mb: 2,
|
200 |
+
pt: { xs: 2, md: 0 },
|
201 |
}}
|
202 |
>
|
203 |
<TableOptions
|