| <!DOCTYPE html> |
| <html lang="en"> |
|
|
| <head> |
| <meta charset="UTF-8" /> |
| <title>LeRobot Worldwide Hackathon - All demo</title> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| |
| <script src="https://cdn.tailwindcss.com"></script> |
| |
| <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/LeRobot-worldwide-hackathon/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/LeRobot-worldwide-hackathon/submissions/resolve/main/${encodeURIComponent(file.path)}`; |
| const match = file.path.match(/(?:^|\/)(\d+)/i); |
| const team = match ? match[1] : null; |
| const label = team ? `Team ${team}` : "Unknown Team"; |
| return { |
| url, |
| label, |
| team: team ? parseInt(team) : null |
| }; |
| }).sort((a, b) => a.team - b.team); |
| setVideos(videoFiles); |
| }); |
| fetch("https://huggingface.co/api/datasets?author=maringetxway") |
| .then(res => res.json()) |
| .then(data => { |
| const map = {}; |
| data.forEach(entry => { |
| const match = entry.id.match(/maringetxway\/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", |
| style: { |
| backgroundColor: "#3A3B3C" |
| } |
| }, |
| 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 text-white" |
| }, |
| "LeRobot Worldwide Hackathon" |
| ), |
| React.createElement("p", { |
| className: "text-white text-center mb-6" |
| }, |
| "🌍 Worldwide", React.createElement("br", null), |
| "📅 June 2025, 14 at 09:00 AM local time – June 2025, 15 at 06:00 PM local time" |
| ), |
| React.createElement("div", { |
| className: "flex flex-wrap justify-center items-center gap-8 mb-10" |
| }, |
| ), |
| |
| 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" |
| }, |
| 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> |
|
|
|
|
|
|
