roboticshack/demo
8
1<!DOCTYPE html>2<html lang="en">3 4<head>5 <meta charset="UTF-8" />6 <title>Mistral AI Robotics Hackathon</title>7 <meta name="viewport" content="width=device-width, initial-scale=1.0" />8 <!-- Tailwind CDN -->9 <script src="https://cdn.tailwindcss.com"></script>10 <!-- React & ReactDOM CDN -->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 useState22 } = React;23 24 function App() {25 const [videos, setVideos] = useState([]);26 const [teamDatasets, setTeamDatasets] = useState({});27 28 useEffect(() => {29 fetch("https://huggingface.co/api/datasets/roboticshack/submissions/tree/main")30 .then(res => res.json())31 .then(data => {32 const videoFiles = data33 .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 team44 };45 });46 setVideos(videoFiles);47 });48 49 fetch("https://huggingface.co/api/datasets?author=roboticshack")50 .then(res => res.json())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}`);59 }60 });61 setTeamDatasets(map);62 });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 by101 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 by116 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 arms149 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 space182 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 199 React.createElement("div", {200 className: "flex justify-center mb-10"201 },202 React.createElement("iframe", {203 width: "700",204 height: "400",205 src: "https://www.youtube.com/embed/-oA0K_rTBKs?si=SBTvE5BCJ6A1pPgS",206 title: "YouTube video player",207 frameBorder: "0",208 allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",209 referrerPolicy: "strict-origin-when-cross-origin",210 allowFullScreen: true211 })212 ),213 214 React.createElement("div", {215 className: "columns-1 sm:columns-2 lg:columns-3 gap-4 space-y-4"216 }, videos.map((video, i) =>217 React.createElement("div", {218 key: i,219 className: "break-inside-avoid bg-white rounded-2xl shadow-md overflow-hidden"220 },221 React.createElement("video", {222 src: video.url,223 controls: true,224 className: "w-full h-auto"225 }),226 React.createElement("div", {227 className: "p-2 text-center text-sm font-medium text-gray-700"228 },229 video.label,230 video.team && teamDatasets[video.team] &&231 React.createElement("div", {232 className: "mt-1 space-y-1"233 },234 teamDatasets[video.team].map((url, j) =>235 React.createElement("div", {236 key: j237 },238 React.createElement("a", {239 href: url,240 className: "text-blue-500 underline",241 target: "_blank"242 }, `Dataset: ${url.split('=')[1]}`)243 )244 )245 )246 )247 )248 ))249 );250 }251 252 ReactDOM.createRoot(document.getElementById("root")).render(React.createElement(App));253 </script>254</body>255 256</html>