|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<title>LeRobot Worldwide Hackathon – Winners</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-[#FF9D00]"> |
|
|
<div id="root"></div> |
|
|
|
|
|
<script type="text/javascript"> |
|
|
const { useState, useEffect } = React; |
|
|
|
|
|
const INTRO_VIDEO_DATASET = "imstevenpmwork/hackaton_closure/"; |
|
|
|
|
|
|
|
|
function parseRankTeam(path) { |
|
|
const name = path.split("/").pop(); |
|
|
const m = name.match(/^(\d+)-(\d+)-/); |
|
|
return m ? { rank: +m[1], team: +m[2] } : { rank: null, team: null }; |
|
|
} |
|
|
|
|
|
function App() { |
|
|
const [introSrc, setIntroSrc] = useState(null); |
|
|
const [videos, setVideos] = useState([]); |
|
|
const [teamDatasets, setTeamDatasets] = useState({}); |
|
|
|
|
|
useEffect(() => { |
|
|
async function fetchIntro() { |
|
|
try { |
|
|
|
|
|
const rowsRes = await fetch( |
|
|
`https://datasets-server.huggingface.co/rows?dataset=${INTRO_VIDEO_DATASET}&config=default&split=train&offset=0&limit=1` |
|
|
); |
|
|
const rowsJson = await rowsRes.json(); |
|
|
const row = rowsJson.rows?.[0]?.row; |
|
|
if (row) { |
|
|
|
|
|
const videoUrl = row.video || Object.values(row).find((v) => typeof v === "string" && v.endsWith(".mp4")); |
|
|
if (videoUrl) setIntroSrc(videoUrl); |
|
|
} |
|
|
} catch (e) { |
|
|
console.error("Could not load intro video", e); |
|
|
} |
|
|
} |
|
|
|
|
|
async function fetchAssets() { |
|
|
|
|
|
const tree = await ( |
|
|
await fetch( |
|
|
"https://huggingface.co/api/datasets/maringetxway/all-winners/tree/main" |
|
|
) |
|
|
).json(); |
|
|
|
|
|
const vids = tree |
|
|
.filter((f) => f.path.endsWith(".mp4")) |
|
|
.map((f) => { |
|
|
const { rank, team } = parseRankTeam(f.path); |
|
|
return { |
|
|
url: `https://huggingface.co/datasets/maringetxway/all-winners/resolve/main/${encodeURIComponent( |
|
|
f.path |
|
|
)}`, |
|
|
rank, |
|
|
team, |
|
|
}; |
|
|
}) |
|
|
.sort((a, b) => a.rank - b.rank); |
|
|
setVideos(vids); |
|
|
|
|
|
|
|
|
const ds = await ( |
|
|
await fetch( |
|
|
"https://huggingface.co/api/datasets?author=maringetxway" |
|
|
) |
|
|
).json(); |
|
|
const map = {}; |
|
|
ds.forEach(({ id }) => { |
|
|
const m = id.match(/maringetxway\/team[_-]?(\d+)/i); |
|
|
if (m) { |
|
|
const t = +m[1]; |
|
|
if (!map[t]) map[t] = []; |
|
|
map[t].push( |
|
|
`https://huggingface.co/spaces/lerobot/visualize_dataset?dataset=${id}` |
|
|
); |
|
|
} |
|
|
}); |
|
|
setTeamDatasets(map); |
|
|
} |
|
|
|
|
|
fetchIntro(); |
|
|
fetchAssets(); |
|
|
}, []); |
|
|
|
|
|
return React.createElement( |
|
|
"div", |
|
|
{ className: "min-h-screen py-10 px-4 max-w-3xl mx-auto" }, |
|
|
|
|
|
React.createElement( |
|
|
"h1", |
|
|
{ |
|
|
className: |
|
|
"text-center text-4xl font-bold text-white mb-6 drop-shadow-lg", |
|
|
}, |
|
|
"LeRobot Worldwide Hackathon – Winners" |
|
|
), |
|
|
|
|
|
React.createElement( |
|
|
"p", |
|
|
{ |
|
|
className: |
|
|
"text-white text-center whitespace-pre-line mb-6 leading-relaxed", |
|
|
}, |
|
|
[ |
|
|
React.createElement( |
|
|
"span", |
|
|
{ key: "bold", className: "font-bold" }, |
|
|
"🏆 €15,000 in robotics hardware prizes in collaboration with Seeedstudio" |
|
|
), |
|
|
" to support prizes for 10 winning teams and help us celebrate open-source robotics on a global scale! " |
|
|
] |
|
|
), |
|
|
|
|
|
React.createElement( |
|
|
"p", |
|
|
{ |
|
|
className: |
|
|
"text-white text-center whitespace-pre-line mb-10 leading-relaxed", |
|
|
}, |
|
|
`🙌 Here’s a sneak peek at the prizes up for grabs in collaboration with SeeedStudio:\n\n🥇 1st to 3rd place teams: 1 Hope Jr Arm & 1 LeKiwi per team\n\n🥈 4th and 5th place teams: 1 Hope Jr Arm per team\n\n🥉 6th to 24th place teams: 1 LeKiwi per team\n\n🥉 25th to 30th place teams: 1 SO-101 per team\n\nA huge shoutout to everyone for your hard work and passion! It was truly tough to pick the top 30 – there were so many amazing demo videos, and we’re absolutely blown away. We also had a lot of laughs along the way!` |
|
|
), |
|
|
|
|
|
React.createElement( |
|
|
"div", |
|
|
{ className: "flex justify-center items-center gap-6 mb-10" }, |
|
|
React.createElement("img", { |
|
|
src: "seeedstudio.png", |
|
|
alt: "Seeed Studio logo", |
|
|
className: "h-12 w-auto", |
|
|
}), |
|
|
React.createElement("img", { |
|
|
src: "hf.png", |
|
|
alt: "Hugging Face logo", |
|
|
className: "h-12 w-auto", |
|
|
}) |
|
|
), |
|
|
|
|
|
introSrc && |
|
|
React.createElement( |
|
|
"section", |
|
|
{ className: "mb-16" }, |
|
|
React.createElement( |
|
|
"h2", |
|
|
{ className: "sr-only" }, |
|
|
"Intro video" |
|
|
), |
|
|
React.createElement("video", { |
|
|
src: introSrc, |
|
|
controls: true, |
|
|
className: "w-full rounded-xl shadow-2xl mb-10", |
|
|
}) |
|
|
), |
|
|
|
|
|
...videos.map((video, idx) => |
|
|
React.createElement( |
|
|
"section", |
|
|
{ key: idx, className: "mb-16" }, |
|
|
React.createElement( |
|
|
"h2", |
|
|
{ |
|
|
className: |
|
|
"text-2xl font-semibold text-white mb-4 flex items-center gap-2", |
|
|
}, |
|
|
`#${video.rank}`, |
|
|
React.createElement( |
|
|
"span", |
|
|
{ className: "text-base font-normal text-white/80" }, |
|
|
`– Team ${video.team ?? "?"}` |
|
|
) |
|
|
), |
|
|
React.createElement("video", { |
|
|
src: video.url, |
|
|
controls: true, |
|
|
className: "w-full rounded-xl shadow-2xl", |
|
|
}), |
|
|
teamDatasets[video.team] && |
|
|
React.createElement( |
|
|
"div", |
|
|
{ className: "mt-2 space-y-1" }, |
|
|
teamDatasets[video.team].map((url, j) => |
|
|
React.createElement( |
|
|
"a", |
|
|
{ |
|
|
key: j, |
|
|
href: url, |
|
|
target: "_blank", |
|
|
className: |
|
|
"text-sm text-blue-200 underline hover:text-white", |
|
|
}, |
|
|
`Dataset: ${url.split("=")[1]}` |
|
|
) |
|
|
) |
|
|
) |
|
|
) |
|
|
), |
|
|
|
|
|
React.createElement( |
|
|
"div", |
|
|
{ |
|
|
className: |
|
|
"bg-white rounded-xl shadow-lg p-8 mt-20 flex justify-center", |
|
|
}, |
|
|
React.createElement("img", { |
|
|
src |
|
|
|
