Spaces:

LeRobot-worldwide-hackathon
/

demo

Running

App Files Files Community

maringetxway commited on Apr 22

Commit

2899db8

verified ·

1 Parent(s): 289d6c3

Update index.html

Browse files

Files changed (1) hide show

index.html +133 -11

index.html CHANGED Viewed

@@ -1,18 +1,140 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>LeRobot Hackathon Demos</title>
-  <link rel="stylesheet" href="style.css" />
- </head>
-<body>
-  <h1>LeRobot Hackathon Demo Videos</h1>
-  <div class="video-grid" id="videoContainer"></div>
-<script src="main.js">
-</script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8" />
+  <title>LeRobot Worldwide Hackathon</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <!-- Tailwind CDN -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- React & ReactDOM CDN -->
+  <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(/(?:team|group)[-_ ]?(\d+)/i);
+                const team = match ? match[1] : null;
+                const label = team ? `Team ${team}` : "Unknown Team";
+                return {
+                  url,
+                  label,
+                  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 bg-[linear-gradient(-45deg,#dbeafe,#f0abfc,#fcd34d,#a5f3fc)] bg-[length:400%_400%]",
+          style: {
+            animation: "gradientBG 15s ease infinite"
+          }
+        },
+        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"
+          },
+          React.createElement("a", {
+            href: "https://huggingface.co/",
+            className: "text-orange-500 underline",
+            target: "_blank"
+          }, "Hugging Face"), "LeRobot Worldwide Hackathon"
+        ),
+        React.createElement("p", {
+            className: "text-center text-gray-700 mb-6"
+          },
+          "Worldwide", React.createElement("br", null),
+          "June 2025, 14 at 09:00 AM (UTC+2) – June 2025, 15 at 06:00 PM (UTC+2)"
+        ),
+        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-700"
+              },
+              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>