|
|
<!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> |
|
|
|
|
|
|
|
|
|
