Spaces:
Running
Running
Update index.html
Browse files- index.html +130 -53
index.html
CHANGED
@@ -1,5 +1,6 @@
|
|
1 |
<!DOCTYPE html>
|
2 |
<html lang="en">
|
|
|
3 |
<head>
|
4 |
<meta charset="UTF-8" />
|
5 |
<title>Mistral AI Robotics Hackathon</title>
|
@@ -10,11 +11,15 @@
|
|
10 |
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
|
11 |
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
|
12 |
</head>
|
|
|
13 |
<body class="bg-white">
|
14 |
<div id="root"></div>
|
15 |
|
16 |
<script type="text/javascript">
|
17 |
-
const {
|
|
|
|
|
|
|
18 |
|
19 |
function App() {
|
20 |
const [videos, setVideos] = useState([]);
|
@@ -27,11 +32,16 @@
|
|
27 |
const videoFiles = data
|
28 |
.filter(file => file.path.endsWith(".mp4"))
|
29 |
.map(file => {
|
30 |
-
const url =
|
|
|
31 |
const match = file.path.match(/(?:team|group)[-_ ]?(\d+)/i);
|
32 |
const team = match ? match[1] : null;
|
33 |
const label = team ? `Team ${team}` : "Unknown Team";
|
34 |
-
return {
|
|
|
|
|
|
|
|
|
35 |
});
|
36 |
setVideos(videoFiles);
|
37 |
});
|
@@ -41,8 +51,8 @@
|
|
41 |
.then(data => {
|
42 |
const map = {};
|
43 |
data.forEach(entry => {
|
44 |
-
|
45 |
-
|
46 |
const team = match[1];
|
47 |
if (!map[team]) map[team] = [];
|
48 |
map[team].push(`https://huggingface.co/spaces/lerobot/visualize_dataset?dataset=${entry.id}`);
|
@@ -53,96 +63,162 @@
|
|
53 |
}, []);
|
54 |
|
55 |
return React.createElement("div", {
|
56 |
-
|
57 |
-
|
58 |
-
|
|
|
|
|
59 |
React.createElement("style", {
|
60 |
dangerouslySetInnerHTML: {
|
61 |
__html: `
|
62 |
-
|
63 |
-
|
64 |
-
|
65 |
-
|
66 |
-
|
67 |
-
|
68 |
}
|
69 |
}),
|
70 |
-
React.createElement("h1", {
|
|
|
|
|
71 |
React.createElement("a", {
|
72 |
href: "https://mistral.ai/",
|
73 |
className: "text-orange-500 underline",
|
74 |
target: "_blank"
|
75 |
-
}, "Mistral
|
76 |
),
|
77 |
-
React.createElement("p", {
|
|
|
|
|
78 |
"Paris, France", React.createElement("br", null),
|
79 |
"11 April 2025, 13:00 – 13 April 2025, 14:00"
|
80 |
),
|
81 |
React.createElement("div", {
|
82 |
-
|
83 |
-
|
84 |
// Powered by
|
85 |
-
React.createElement("div", {
|
86 |
-
|
|
|
|
|
|
|
|
|
87 |
React.createElement("a", {
|
88 |
-
href: "https://lsvp.com/",
|
|
|
89 |
}, React.createElement("img", {
|
90 |
src: "https://lsvp.com/wp-content/uploads/2023/04/logo_lightspeed_venture_partners.svg",
|
91 |
className: "h-8 max-w-32 object-contain"
|
92 |
}))
|
93 |
),
|
94 |
// Sponsored by
|
95 |
-
React.createElement("div", {
|
96 |
-
|
|
|
|
|
|
|
|
|
97 |
[
|
98 |
-
["https://huggingface.co/",
|
|
|
|
|
99 |
["https://www.joinef.com/", "https://huggingface.co/spaces/roboticshack/demo/resolve/main/logo-ef.png"],
|
100 |
-
["https://www.nvidia.com/",
|
101 |
-
|
|
|
|
|
|
|
|
|
102 |
["https://www.scaleway.com/en/", "https://www.scaleway.com/_next/static/media/logo.7e2996cb.svg"],
|
103 |
-
["https://www.linkedin.com/company/sotafamily/",
|
|
|
|
|
104 |
].map(([href, src], i) =>
|
105 |
React.createElement("a", {
|
106 |
-
key: i,
|
|
|
|
|
107 |
}, React.createElement("img", {
|
108 |
-
src,
|
|
|
109 |
}))
|
110 |
)
|
111 |
),
|
112 |
-
//
|
113 |
-
React.createElement("div", {
|
114 |
-
|
|
|
115 |
React.createElement("a", {
|
116 |
-
href: "https://
|
117 |
-
|
118 |
-
|
119 |
-
|
120 |
-
|
121 |
-
|
122 |
-
|
123 |
-
|
124 |
-
|
125 |
-
|
126 |
-
|
127 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
128 |
),
|
129 |
React.createElement("div", {
|
130 |
className: "columns-1 sm:columns-2 lg:columns-3 gap-4 space-y-4"
|
131 |
}, videos.map((video, i) =>
|
132 |
React.createElement("div", {
|
133 |
-
|
134 |
-
|
|
|
135 |
React.createElement("video", {
|
136 |
-
src: video.url,
|
|
|
|
|
137 |
}),
|
138 |
React.createElement("div", {
|
139 |
-
|
140 |
-
|
141 |
video.label,
|
142 |
video.team && teamDatasets[video.team] &&
|
143 |
-
React.createElement("div", {
|
|
|
|
|
144 |
teamDatasets[video.team].map((url, j) =>
|
145 |
-
React.createElement("div", {
|
|
|
|
|
146 |
React.createElement("a", {
|
147 |
href: url,
|
148 |
className: "text-blue-500 underline",
|
@@ -160,4 +236,5 @@
|
|
160 |
ReactDOM.createRoot(document.getElementById("root")).render(React.createElement(App));
|
161 |
</script>
|
162 |
</body>
|
163 |
-
|
|
|
|
1 |
<!DOCTYPE html>
|
2 |
<html lang="en">
|
3 |
+
|
4 |
<head>
|
5 |
<meta charset="UTF-8" />
|
6 |
<title>Mistral AI Robotics Hackathon</title>
|
|
|
11 |
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
|
12 |
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
|
13 |
</head>
|
14 |
+
|
15 |
<body class="bg-white">
|
16 |
<div id="root"></div>
|
17 |
|
18 |
<script type="text/javascript">
|
19 |
+
const {
|
20 |
+
useEffect,
|
21 |
+
useState
|
22 |
+
} = React;
|
23 |
|
24 |
function App() {
|
25 |
const [videos, setVideos] = useState([]);
|
|
|
32 |
const videoFiles = data
|
33 |
.filter(file => file.path.endsWith(".mp4"))
|
34 |
.map(file => {
|
35 |
+
const url =
|
36 |
+
`https://huggingface.co/datasets/roboticshack/submissions/resolve/main/${encodeURIComponent(file.path)}`;
|
37 |
const match = file.path.match(/(?:team|group)[-_ ]?(\d+)/i);
|
38 |
const team = match ? match[1] : null;
|
39 |
const label = team ? `Team ${team}` : "Unknown Team";
|
40 |
+
return {
|
41 |
+
url,
|
42 |
+
label,
|
43 |
+
team
|
44 |
+
};
|
45 |
});
|
46 |
setVideos(videoFiles);
|
47 |
});
|
|
|
51 |
.then(data => {
|
52 |
const map = {};
|
53 |
data.forEach(entry => {
|
54 |
+
const match = entry.id.match(/roboticshack\/team[_-]?(\d+)/i);
|
55 |
+
if (match) {
|
56 |
const team = match[1];
|
57 |
if (!map[team]) map[team] = [];
|
58 |
map[team].push(`https://huggingface.co/spaces/lerobot/visualize_dataset?dataset=${entry.id}`);
|
|
|
63 |
}, []);
|
64 |
|
65 |
return React.createElement("div", {
|
66 |
+
className: "min-h-screen p-6 bg-[linear-gradient(-45deg,#dbeafe,#f0abfc,#fcd34d,#a5f3fc)] bg-[length:400%_400%]",
|
67 |
+
style: {
|
68 |
+
animation: "gradientBG 15s ease infinite"
|
69 |
+
}
|
70 |
+
},
|
71 |
React.createElement("style", {
|
72 |
dangerouslySetInnerHTML: {
|
73 |
__html: `
|
74 |
+
@keyframes gradientBG {
|
75 |
+
0% { background-position: 0% 50%; }
|
76 |
+
50% { background-position: 100% 50%; }
|
77 |
+
100% { background-position: 0% 50%; }
|
78 |
+
}
|
79 |
+
`
|
80 |
}
|
81 |
}),
|
82 |
+
React.createElement("h1", {
|
83 |
+
className: "text-3xl font-bold mb-2 text-center"
|
84 |
+
},
|
85 |
React.createElement("a", {
|
86 |
href: "https://mistral.ai/",
|
87 |
className: "text-orange-500 underline",
|
88 |
target: "_blank"
|
89 |
+
}, "Mistral AI"), " Robotics Hackathon"
|
90 |
),
|
91 |
+
React.createElement("p", {
|
92 |
+
className: "text-center text-gray-700 mb-6"
|
93 |
+
},
|
94 |
"Paris, France", React.createElement("br", null),
|
95 |
"11 April 2025, 13:00 – 13 April 2025, 14:00"
|
96 |
),
|
97 |
React.createElement("div", {
|
98 |
+
className: "flex flex-wrap justify-center items-center gap-8 mb-10"
|
99 |
+
},
|
100 |
// Powered by
|
101 |
+
React.createElement("div", {
|
102 |
+
className: "flex flex-wrap items-center gap-2"
|
103 |
+
},
|
104 |
+
React.createElement("span", {
|
105 |
+
className: "text-lg font-semibold"
|
106 |
+
}, "Powered by:"),
|
107 |
React.createElement("a", {
|
108 |
+
href: "https://lsvp.com/",
|
109 |
+
target: "_blank"
|
110 |
}, React.createElement("img", {
|
111 |
src: "https://lsvp.com/wp-content/uploads/2023/04/logo_lightspeed_venture_partners.svg",
|
112 |
className: "h-8 max-w-32 object-contain"
|
113 |
}))
|
114 |
),
|
115 |
// Sponsored by
|
116 |
+
React.createElement("div", {
|
117 |
+
className: "flex flex-wrap items-center gap-2"
|
118 |
+
},
|
119 |
+
React.createElement("span", {
|
120 |
+
className: "text-lg font-semibold"
|
121 |
+
}, "Sponsored by:"),
|
122 |
[
|
123 |
+
["https://huggingface.co/",
|
124 |
+
"https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.svg"
|
125 |
+
],
|
126 |
["https://www.joinef.com/", "https://huggingface.co/spaces/roboticshack/demo/resolve/main/logo-ef.png"],
|
127 |
+
["https://www.nvidia.com/",
|
128 |
+
"https://upload.wikimedia.org/wikipedia/sco/thumb/2/21/Nvidia_logo.svg/702px-Nvidia_logo.svg.png?20150924223142"
|
129 |
+
],
|
130 |
+
["https://www.motier.vc/",
|
131 |
+
"https://cdn.prod.website-files.com/61dd4bedf96feb260d027b32/620901ff3592bf41e41e3779_motier-ventures.svg"
|
132 |
+
],
|
133 |
["https://www.scaleway.com/en/", "https://www.scaleway.com/_next/static/media/logo.7e2996cb.svg"],
|
134 |
+
["https://www.linkedin.com/company/sotafamily/",
|
135 |
+
"https://huggingface.co/spaces/roboticshack/demo/resolve/main/logo-sota.png"
|
136 |
+
]
|
137 |
].map(([href, src], i) =>
|
138 |
React.createElement("a", {
|
139 |
+
key: i,
|
140 |
+
href,
|
141 |
+
target: "_blank"
|
142 |
}, React.createElement("img", {
|
143 |
+
src,
|
144 |
+
className: "h-8 max-w-32 object-contain"
|
145 |
}))
|
146 |
)
|
147 |
),
|
148 |
+
// SO-ARM100 arms
|
149 |
+
React.createElement("div", {
|
150 |
+
className: "flex flex-wrap items-center gap-2"
|
151 |
+
},
|
152 |
React.createElement("a", {
|
153 |
+
href: "https://github.com/huggingface/lerobot/blob/main/examples/10_use_so100.md",
|
154 |
+
className: "underline text-blue-600",
|
155 |
+
target: "_blank"
|
156 |
+
}, "SO-ARM100 arms"),
|
157 |
+
React.createElement("div", {
|
158 |
+
className: "flex flex-wrap items-center gap-2"
|
159 |
+
},
|
160 |
+
React.createElement("span", {
|
161 |
+
className: "text-lg font-semibold"
|
162 |
+
}, "provided by:"),
|
163 |
+
React.createElement("a", {
|
164 |
+
href: "https://github.com/huggingface/lerobot",
|
165 |
+
target: "_blank"
|
166 |
+
}, React.createElement("img", {
|
167 |
+
src: "https://github.com/huggingface/lerobot/raw/main/media/lerobot-logo-thumbnail.png",
|
168 |
+
className: "h-8 max-w-32 object-contain"
|
169 |
+
})),
|
170 |
+
React.createElement("span", {
|
171 |
+
className: "text-lg font-semibold"
|
172 |
+
}, "&"),
|
173 |
+
React.createElement("a", {
|
174 |
+
href: "https://phospho.ai/",
|
175 |
+
target: "_blank"
|
176 |
+
}, React.createElement("img", {
|
177 |
+
src: "https://framerusercontent.com/images/MYJX4U9UCs4ojvzaR5VuwH7zjY.svg",
|
178 |
+
className: "h-8 max-w-32 object-contain"
|
179 |
+
}))
|
180 |
+
),
|
181 |
+
// Office space
|
182 |
+
React.createElement("div", {
|
183 |
+
className: "flex flex-wrap items-center gap-2"
|
184 |
+
},
|
185 |
+
React.createElement("span", {
|
186 |
+
className: "text-lg font-semibold"
|
187 |
+
}, "Office space by:"),
|
188 |
+
React.createElement("a", {
|
189 |
+
href: "https://www.photoroom.com/",
|
190 |
+
target: "_blank"
|
191 |
+
}, React.createElement("img", {
|
192 |
+
src: "https://media.licdn.com/dms/image/v2/D4E0BAQGY9CCqd-ULZA/company-logo_200_200/company-logo_200_200/0/1721219031708/photoroom_logo?e=1750291200&v=beta&t=Ja2zXQoUenH2WgRb-jkSoPIFwcOQQ9t-r322tMfyLGs",
|
193 |
+
className: "h-8 max-w-32 object-contain"
|
194 |
+
}))
|
195 |
+
),
|
196 |
+
),
|
197 |
),
|
198 |
React.createElement("div", {
|
199 |
className: "columns-1 sm:columns-2 lg:columns-3 gap-4 space-y-4"
|
200 |
}, videos.map((video, i) =>
|
201 |
React.createElement("div", {
|
202 |
+
key: i,
|
203 |
+
className: "break-inside-avoid bg-white rounded-2xl shadow-md overflow-hidden"
|
204 |
+
},
|
205 |
React.createElement("video", {
|
206 |
+
src: video.url,
|
207 |
+
controls: true,
|
208 |
+
className: "w-full h-auto"
|
209 |
}),
|
210 |
React.createElement("div", {
|
211 |
+
className: "p-2 text-center text-sm font-medium text-gray-700"
|
212 |
+
},
|
213 |
video.label,
|
214 |
video.team && teamDatasets[video.team] &&
|
215 |
+
React.createElement("div", {
|
216 |
+
className: "mt-1 space-y-1"
|
217 |
+
},
|
218 |
teamDatasets[video.team].map((url, j) =>
|
219 |
+
React.createElement("div", {
|
220 |
+
key: j
|
221 |
+
},
|
222 |
React.createElement("a", {
|
223 |
href: url,
|
224 |
className: "text-blue-500 underline",
|
|
|
236 |
ReactDOM.createRoot(document.getElementById("root")).render(React.createElement(App));
|
237 |
</script>
|
238 |
</body>
|
239 |
+
|
240 |
+
</html>
|