Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Mistral AI Robotics Hackathon</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <!-- Tailwind CDN --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- React & ReactDOM CDN --> | |
| <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> | |
| <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> | |
| </head> | |
| <body class="bg-white"> | |
| <div id="root"></div> | |
| <script type="text/javascript"> | |
| const { useEffect, useState } = React; | |
| function App() { | |
| const [videos, setVideos] = useState([]); | |
| const [teamDatasets, setTeamDatasets] = useState({}); | |
| useEffect(() => { | |
| fetch("https://huggingface.co/api/datasets/roboticshack/submissions/tree/main") | |
| .then(res => res.json()) | |
| .then(data => { | |
| const videoFiles = data | |
| .filter(file => file.path.endsWith(".mp4")) | |
| .map(file => { | |
| const url = `https://huggingface.co/datasets/roboticshack/submissions/resolve/main/${encodeURIComponent(file.path)}`; | |
| const match = file.path.match(/(?:team|group)[-_ ]?(\d+)/i); | |
| const team = match ? match[1] : null; | |
| const label = team ? `Team ${team}` : "Unknown Team"; | |
| return { url, label, team }; | |
| }); | |
| setVideos(videoFiles); | |
| }); | |
| fetch("https://huggingface.co/api/datasets?author=roboticshack") | |
| .then(res => res.json()) | |
| .then(data => { | |
| const map = {}; | |
| data.forEach(entry => { | |
| const match = entry.id.match(/roboticshack\/team[_-]?(\d+)/i); | |
| if (match) { | |
| const team = match[1]; | |
| if (!map[team]) map[team] = []; | |
| map[team].push(`https://huggingface.co/spaces/lerobot/visualize_dataset?dataset=${entry.id}`); | |
| } | |
| }); | |
| setTeamDatasets(map); | |
| }); | |
| }, []); | |
| return React.createElement("div", { | |
| className: "min-h-screen p-6 bg-[linear-gradient(-45deg,#dbeafe,#f0abfc,#fcd34d,#a5f3fc)] bg-[length:400%_400%]", | |
| style: { animation: "gradientBG 15s ease infinite" } | |
| }, | |
| React.createElement("style", { | |
| dangerouslySetInnerHTML: { | |
| __html: ` | |
| @keyframes gradientBG { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| ` | |
| } | |
| }), | |
| React.createElement("h1", { className: "text-3xl font-bold mb-2 text-center" }, | |
| React.createElement("a", { | |
| href: "https://mistral.ai/", | |
| className: "text-orange-500 underline", | |
| target: "_blank" | |
| }, "Mistral AI"), " Robotics Hackathon" | |
| ), | |
| React.createElement("p", { className: "text-center text-gray-700 mb-6" }, | |
| "Paris, France", React.createElement("br", null), | |
| "11 April 2025, 13:00 – 13 April 2025, 14:00" | |
| ), | |
| React.createElement("div", { | |
| className: "flex flex-wrap justify-center items-center gap-8 mb-10" | |
| }, | |
| // Powered by | |
| React.createElement("div", { className: "flex items-center gap-2" }, | |
| React.createElement("span", { className: "text-lg font-semibold" }, "Powered by:"), | |
| React.createElement("a", { | |
| href: "https://lsvp.com/", target: "_blank" | |
| }, React.createElement("img", { | |
| src: "https://lsvp.com/wp-content/uploads/2023/04/logo_lightspeed_venture_partners.svg", | |
| className: "h-8 max-w-20 object-contain" | |
| })) | |
| ), | |
| // Sponsored by | |
| React.createElement("div", { className: "flex items-center gap-2" }, | |
| React.createElement("span", { className: "text-lg font-semibold" }, "Sponsored by:"), | |
| [ | |
| ["https://huggingface.co/", "https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.svg"], | |
| ["https://www.joinef.com/", "https://huggingface.co/spaces/roboticshack/demo/resolve/main/logo-ef.jpeg"], | |
| ["https://www.nvidia.com/", "https://upload.wikimedia.org/wikipedia/sco/thumb/2/21/Nvidia_logo.svg/702px-Nvidia_logo.svg.png?20150924223142"], | |
| ["https://www.motier.vc/", "https://cdn.prod.website-files.com/61dd4bedf96feb260d027b32/620901ff3592bf41e41e3779_motier-ventures.svg"], | |
| ["https://www.scaleway.com/en/", "https://www.scaleway.com/_next/static/media/logo.7e2996cb.svg"], | |
| ["https://www.linkedin.com/company/sotafamily/", "https://huggingface.co/spaces/roboticshack/demo/resolve/main/logo-sota.jpeg"] | |
| ].map(([href, src], i) => | |
| React.createElement("a", { | |
| key: i, href, target: "_blank" | |
| }, React.createElement("img", { | |
| src, className: "h-8 max-w-20 object-contain" | |
| })) | |
| ) | |
| ), | |
| // Office space | |
| React.createElement("div", { className: "flex items-center gap-2" }, | |
| React.createElement("span", { className: "text-lg font-semibold" }, "Office space by:"), | |
| React.createElement("a", { | |
| href: "https://www.photoroom.com/", target: "_blank" | |
| }, React.createElement("img", { | |
| 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", | |
| className: "h-8 max-w-20 object-contain" | |
| })) | |
| ) | |
| ), | |
| React.createElement("div", { className: "text-center text-base text-gray-800 font-medium mb-10" }, | |
| React.createElement("a", { | |
| href: "https://github.com/huggingface/lerobot/blob/main/examples/10_use_so100.md", | |
| className: "underline text-blue-600", target: "_blank" | |
| }, "SO-ARM100 arms by Rob Knight & LeRobot team") | |
| ), | |
| React.createElement("div", { | |
| className: "columns-1 sm:columns-2 lg:columns-3 gap-4 space-y-4" | |
| }, videos.map((video, i) => | |
| React.createElement("div", { | |
| key: i, className: "break-inside-avoid bg-white rounded-2xl shadow-md overflow-hidden" | |
| }, | |
| React.createElement("video", { | |
| src: video.url, controls: true, className: "w-full h-auto" | |
| }), | |
| React.createElement("div", { | |
| className: "p-2 text-center text-sm font-medium text-gray-700" | |
| }, | |
| video.label, | |
| video.team && teamDatasets[video.team] && | |
| React.createElement("div", { className: "mt-1 space-y-1" }, | |
| teamDatasets[video.team].map((url, j) => | |
| React.createElement("div", { key: j }, | |
| React.createElement("a", { | |
| href: url, | |
| className: "text-blue-500 underline", | |
| target: "_blank" | |
| }, `Dataset: ${url.split('=')[1]}`) | |
| ) | |
| ) | |
| ) | |
| ) | |
| ) | |
| )) | |
| ); | |
| } | |
| ReactDOM.createRoot(document.getElementById("root")).render(React.createElement(App)); | |
| </script> | |
| </body> | |
| </html> | |