Update index.html

index.html

@@ -16,35 +16,39 @@
   <div id="root"></div>
 
   <script type="text/javascript">
-    const { useEffect, useState } = React;
-
+    const {
+      useEffect,
+      useState
+    } = React;
     function App() {
       const [videos, setVideos] = useState([]);
       const [teamDatasets, setTeamDatasets] = useState({});
-      const [searchQuery, setSearchQuery] = useState("");
-
       useEffect(() => {
-        fetch("https://datasets-server.huggingface.co/rows?dataset=LeRobot-worldwide-hackathon%2Fsubmissions&config=default&split=train&offset=0&limit=100")
+        fetch("https://huggingface.co/api/datasets/LeRobot-worldwide-hackathon/submissions/tree/main")
           .then(res => res.json())
           .then(data => {
-            const videoFiles = data.rows
-              .map(row => row.row.video)
-              .filter(url => typeof url === "string" && url.endsWith(".mp4"))
-              .map(url => {
-                const match = url.match(/(?:team|group)[-_ ]?(\d+)/i);
+            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 };
+                return {
+                  url,
+                  label,
+                  team
+                };
               });
             setVideos(videoFiles);
           });
-
-        fetch("https://huggingface.co/api/datasets?author=LeRobot-worldwide-hackathon")
+        fetch("https://huggingface.co/api/datasets?author=maringetxway")
           .then(res => res.json())
           .then(data => {
             const map = {};
             data.forEach(entry => {
-              const match = entry.id.match(/LeRobot-worldwide-hackathon\/team[_-]?(\d+)/i);
+              const match = entry.id.match(/maringetxway\/team[_-]?(\d+)/i);
               if (match) {
                 const team = match[1];
                 if (!map[team]) map[team] = [];
@@ -54,77 +58,63 @@
             setTeamDatasets(map);
           });
       }, []);
-
-      const filteredVideos = videos.filter(video => {
-        return (
-          video.label.toLowerCase().includes(searchQuery) ||
-          video.url.toLowerCase().includes(searchQuery)
-        );
-      });
-
-      return React.createElement("div", {
-        className: "min-h-screen p-6",
-        style: { backgroundColor: "#3A3B3C" }
-      },
+    return React.createElement("div", {
+      className: "min-h-screen p-6",
+        style: {
+        backgroundColor: "#3A3B3C" // Dark gray color
+      }
+    },
         React.createElement("style", {
           dangerouslySetInnerHTML: {
             __html: `
-              @keyframes gradientBG {
-                0% { background-position: 0% 50%; }
-                50% { background-position: 100% 50%; }
-                100% { background-position: 0% 50%; }
-              }
-            `
+                  @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("h1", {
+        className: "text-3xl font-bold mb-2 text-center text-white" // Added text-white
+      },
+       "LeRobot Worldwide Hackathon"
+        ),
         React.createElement("p", {
-          className: "text-white text-center mb-6"
-        },
+            className: "text-white text-center 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 justify-center mb-6"
-        },
-          React.createElement("input", {
-            type: "text",
-            placeholder: "Search videos…",
-            className: "px-4 py-2 w-full max-w-md border rounded-md shadow-md",
-            value: searchQuery,
-            onChange: (e) => setSearchQuery(e.target.value.toLowerCase())
-          })
+            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"
-        }, filteredVideos.map((video, i) =>
+        }, videos.map((video, i) =>
           React.createElement("div", {
-            key: i,
-            className: "break-inside-avoid bg-white rounded-2xl shadow-md overflow-hidden"
-          },
+              key: i,
+              className: "break-inside-avoid bg-white rounded-2xl shadow-md overflow-hidden"
+            },
             React.createElement("video", {
               src: video.url,
               controls: true,
-              autoplay: true,
-              muted: true,
-              loop: true,
-              playsInline: true,
               className: "w-full h-auto"
             }),
             React.createElement("div", {
-              className: "p-2 text-center text-sm font-medium text-gray-700"
-            },
+                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"
-              },
+                  className: "mt-1 space-y-1"
+                },
                 teamDatasets[video.team].map((url, j) =>
                   React.createElement("div", {
-                    key: j
-                  },
+                      key: j
+                    },
                     React.createElement("a", {
                       href: url,
                       className: "text-blue-500 underline",
@@ -138,7 +128,6 @@
         ))
       );
     }
-
     ReactDOM.createRoot(document.getElementById("root")).render(React.createElement(App));
   </script>
 </body>