Update index.html

index.html

@@ -16,29 +16,48 @@
   <script type="text/javascript">
     const { useState, useEffect } = React;
 
-    /**
-     * Utility: extract rank & team # from a filename "<rank>-<team>-... .mp4"
-     */
-    function parseRankTeam(filepath) {
-      const name = filepath.split("/").pop();
+    const INTRO_VIDEO_DATASET = "imstevenpmwork/hackaton_closure/";
+
+    /* Extract rank & team from filename "<rank>-<team>-....mp4" */
+    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 {
+            // Use datasets‑server rows endpoint: grab first row, field "video"
+            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) {
+              // assume the field storing the file path is called "video" or similar
+              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() {
-          // Fetch video files
+          /* 1️⃣  ranked videos */
           const tree = await (
             await fetch(
               "https://huggingface.co/api/datasets/maringetxway/all-winners/tree/main"
             )
           ).json();
 
-          const videoFiles = tree
+          const vids = tree
             .filter((f) => f.path.endsWith(".mp4"))
             .map((f) => {
               const { rank, team } = parseRankTeam(f.path);
@@ -51,16 +70,16 @@
               };
             })
             .sort((a, b) => a.rank - b.rank);
-          setVideos(videoFiles);
+          setVideos(vids);
 
-          // Fetch datasets by team (optional links)
-          const datasets = await (
+          /* 2️⃣  datasets per team (links) */
+          const ds = await (
             await fetch(
               "https://huggingface.co/api/datasets?author=maringetxway"
             )
           ).json();
           const map = {};
-          datasets.forEach(({ id }) => {
+          ds.forEach(({ id }) => {
             const m = id.match(/maringetxway\/team[_-]?(\d+)/i);
             if (m) {
               const t = +m[1];
@@ -73,30 +92,39 @@
           setTeamDatasets(map);
         }
 
+        fetchIntro();
         fetchAssets();
       }, []);
 
       return React.createElement(
         "div",
         { className: "min-h-screen py-10 px-4 max-w-3xl mx-auto" },
-        /* Heading */
+        /* Title */
         React.createElement(
           "h1",
           {
             className:
-              "text-center text-4xl font-bold text-white mb-4 drop-shadow-lg",
+              "text-center text-4xl font-bold text-white mb-6 drop-shadow-lg",
           },
           "LeRobot Worldwide Hackathon – Winners"
         ),
-                /* Description */
+        /* Intro with mixed weight */
         React.createElement(
           "p",
           {
             className:
-              "font-bold text-white text-center whitespace-pre-line mb-10 leading-relaxed",
+              "text-white text-center whitespace-pre-line mb-6 leading-relaxed",
           },
-          `🏆 €15,000 in robotics hardware prizes \n\n `
+          [
+            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! "
+          ]
         ),
+        /* Prize breakdown */
         React.createElement(
           "p",
           {
@@ -108,7 +136,7 @@
         /* Logos */
         React.createElement(
           "div",
-          { className: "flex justify-center items-center gap-6 mb-4" },
+          { className: "flex justify-center items-center gap-6 mb-10" },
           React.createElement("img", {
             src: "seeedstudio.png",
             alt: "Seeed Studio logo",
@@ -120,7 +148,23 @@
             className: "h-12 w-auto",
           })
         ),
-        /* Videos */
+        /* Stand‑alone intro video */
+        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",
+            })
+          ),
+        /* Ranked video list */
         ...videos.map((video, idx) =>
           React.createElement(
             "section",
@@ -163,7 +207,7 @@
               )
           )
         ),
-        /* Sponsors section */
+        /* Sponsors */
         React.createElement(
           "div",
           {
@@ -171,17 +215,4 @@
               "bg-white rounded-xl shadow-lg p-8 mt-20 flex justify-center",
           },
           React.createElement("img", {
-            src: "sponsors.png",
-            alt: "Sponsors",
-            className: "max-w-full h-auto",
-          })
-        )
-      );
-    }
-
-    ReactDOM.createRoot(document.getElementById("root")).render(
-      React.createElement(App)
-    );
-  </script>
-</body>
-</html>
+            src