|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
|
<title>LeRobot Hackathon Gallery</title> |
|
|
<link rel="stylesheet" href="style.css" /> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<h1>🤖 LeRobot Hackathon Demos</h1> |
|
|
<p>Select a project to watch the demo video:</p> |
|
|
|
|
|
<select id="teamSelect"></select> |
|
|
|
|
|
<video id="videoPlayer" width="720" height="400" controls autoplay muted playsinline> |
|
|
<source id="videoSource" src="" type="video/mp4" /> |
|
|
Your browser does not support the video tag. |
|
|
</video> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
async function loadVideos() { |
|
|
const select = document.getElementById("teamSelect"); |
|
|
const player = document.getElementById("videoPlayer"); |
|
|
const source = document.getElementById("videoSource"); |
|
|
|
|
|
const response = await fetch("https://datasets-server.huggingface.co/rows?dataset=LeRobot-worldwide-hackathon/submissions&config=default&split=train&offset=0&limit=100"); |
|
|
const data = await response.json(); |
|
|
|
|
|
const rows = data.rows; |
|
|
|
|
|
rows.forEach(row => { |
|
|
const videoUrl = row.row.video; |
|
|
const teamName = row.row.team_name; |
|
|
const title = row.row.project_title; |
|
|
const option = document.createElement("option"); |
|
|
option.value = videoUrl; |
|
|
option.textContent = `${teamName} - ${title}`; |
|
|
select.appendChild(option); |
|
|
}); |
|
|
|
|
|
if (rows.length > 0) { |
|
|
source.src = rows[0].row.video; |
|
|
player.load(); |
|
|
player.play(); |
|
|
} |
|
|
|
|
|
select.addEventListener("change", () => { |
|
|
source.src = select.value; |
|
|
player.load(); |
|
|
player.play(); |
|
|
}); |
|
|
} |
|
|
|
|
|
loadVideos(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
|
|
|
