Update index.html

index.html

@@ -16,9 +16,9 @@
   <script type="text/javascript">
     const { useState, useEffect } = React;
 
-    const INTRO_VIDEO_DATASET = "imstevenpmwork/hackaton_closure";
+    const INTRO_VIDEO_DATASET = "imstevenpmwork/hackaton_closure"; 
 
-    /* Extract rank & team from filename "<rank>-<team>-....mp4" */
+    /* Extract rank & team from filename "<rank>-<team>-... .mp4" */
     function parseRankTeam(path) {
       const name = path.split("/").pop();
       const m = name.match(/^(\d+)-(\d+)-/);
@@ -30,189 +30,142 @@
       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);
-          }
+      /* -------- fetch intro video once -------- */
+      async function loadIntro() {
+        if (!INTRO_VIDEO_DATASET) return;
+        try {
+          const res = await fetch(
+            `https://datasets-server.huggingface.co/rows?dataset=${INTRO_VIDEO_DATASET}&config=default&split=train&offset=0&limit=1`
+          );
+          const json = await res.json();
+          const row = json.rows?.[0]?.row || {};
+          const url = row.video || Object.values(row).find((v) => typeof v === "string" && v.endsWith(".mp4"));
+          if (url) setIntroSrc(url.startsWith("http") ? url : `https://huggingface.co/datasets/${INTRO_VIDEO_DATASET}/resolve/main/${url}`);
+        } catch (err) {
+          console.error("Intro video load failed", err);
         }
+      }
 
-        async function fetchAssets() {
-          /* 1️⃣  ranked videos */
-          const tree = await (
-            await fetch(
-              "https://huggingface.co/api/datasets/maringetxway/all-winners/tree/main"
-            )
-          ).json();
-
-          const vids = tree
-            .filter((f) => f.path.endsWith(".mp4"))
-            .map((f) => {
-              const { rank, team } = parseRankTeam(f.path);
-              return {
-                url: `https://huggingface.co/datasets/maringetxway/all-winners/resolve/main/${encodeURIComponent(
-                  f.path
-                )}`,
-                rank,
-                team,
-              };
-            })
-            .sort((a, b) => a.rank - b.rank);
-          setVideos(vids);
-
-          /* 2️⃣  datasets per team (links) */
-          const ds = await (
-            await fetch(
-              "https://huggingface.co/api/datasets?author=maringetxway"
-            )
-          ).json();
-          const map = {};
-          ds.forEach(({ id }) => {
-            const m = id.match(/maringetxway\/team[_-]?(\d+)/i);
-            if (m) {
-              const t = +m[1];
-              if (!map[t]) map[t] = [];
-              map[t].push(
-                `https://huggingface.co/spaces/lerobot/visualize_dataset?dataset=${id}`
-              );
-            }
-          });
-          setTeamDatasets(map);
-        }
+      /* -------- fetch ranked videos & dataset links -------- */
+      async function loadMainContent() {
+        /* videos */
+        const treeRes = await fetch(
+          "https://huggingface.co/api/datasets/maringetxway/all-winners/tree/main"
+        );
+        const tree = await treeRes.json();
+        const ranked = tree
+          .filter((f) => f.path.endsWith(".mp4"))
+          .map((f) => {
+            const { rank, team } = parseRankTeam(f.path);
+            return {
+              url: `https://huggingface.co/datasets/maringetxway/all-winners/resolve/main/${encodeURIComponent(
+                f.path
+              )}`,
+              rank,
+              team,
+            };
+          })
+          .sort((a, b) => a.rank - b.rank);
+        setVideos(ranked);
+
+        /* dataset visualisers per team */
+        const dsRes = await fetch(
+          "https://huggingface.co/api/datasets?author=maringetxway"
+        );
+        const dsList = await dsRes.json();
+        const map = {};
+        dsList.forEach(({ id }) => {
+          const m = id.match(/maringetxway\/team[_-]?(\d+)/i);
+          if (m) {
+            const t = +m[1];
+            if (!map[t]) map[t] = [];
+            map[t].push(`https://huggingface.co/spaces/lerobot/visualize_dataset?dataset=${id}`);
+          }
+        });
+        setTeamDatasets(map);
+      }
 
-        fetchIntro();
-        fetchAssets();
+      useEffect(() => {
+        loadIntro();
+        loadMainContent();
       }, []);
 
+      /* ---------- JSX via React.createElement ---------- */
       return React.createElement(
         "div",
         { className: "min-h-screen py-10 px-4 max-w-3xl mx-auto" },
-        /* Title */
+
+        /* ====== HEADING ====== */
         React.createElement(
           "h1",
-          {
-            className:
-              "text-center text-4xl font-bold text-white mb-6 drop-shadow-lg",
-          },
+          { className: "text-center text-4xl font-bold text-white mb-6 drop-shadow-lg" },
           "LeRobot Worldwide Hackathon – Winners"
         ),
-        /* Intro with mixed weight */
+
+        /* ====== INTRO ====== */
         React.createElement(
           "p",
-          {
-            className:
-              "text-white text-center whitespace-pre-line mb-6 leading-relaxed",
-          },
+          { className: "text-white text-center whitespace-pre-line mb-6 leading-relaxed" },
           [
-            React.createElement(
-              "span",
-              { key: "bold", className: "font-bold" },
-              "🏆 €15,000 in robotics hardware prizes in collaboration with Seeedstudio"
-            ),
+            React.createElement("span", { key: "b", 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 */
+
+        /* ====== PRIZE BREAKDOWN ====== */
         React.createElement(
           "p",
-          {
-            className:
-              "text-white text-center whitespace-pre-line mb-10 leading-relaxed",
-          },
+          { className: "text-white text-center whitespace-pre-line mb-10 leading-relaxed" },
           `🙌 Here’s a sneak peek at the prizes up for grabs in collaboration with SeeedStudio:\n\n🥇 1st to 3rd place teams: 1 Hope Jr Arm & 1 LeKiwi per team\n\n🥈 4th and 5th place teams: 1 Hope Jr Arm per team\n\n🥉 6th to 24th place teams: 1 LeKiwi per team\n\n🥉 25th to 30th place teams: 1 SO-101 per team\n\nA huge shoutout to everyone for your hard work and passion! It was truly tough to pick the top 30 – there were so many amazing demo videos, and we’re absolutely blown away. We also had a lot of laughs along the way!`
         ),
-        /* Logos */
+
+        /* ====== LOGOS ====== */
         React.createElement(
           "div",
           { className: "flex justify-center items-center gap-6 mb-10" },
-          React.createElement("img", {
-            src: "seeedstudio.png",
-            alt: "Seeed Studio logo",
-            className: "h-12 w-auto",
-          }),
-          React.createElement("img", {
-            src: "hf.png",
-            alt: "Hugging Face logo",
-            className: "h-12 w-auto",
-          })
+          React.createElement("img", { src: "seeedstudio.png", alt: "Seeed Studio logo", className: "h-12 w-auto" }),
+          React.createElement("img", { src: "hf.png", alt: "Hugging Face logo", className: "h-12 w-auto" })
         ),
-        /* Stand‑alone intro video */
-        introSrc &&
+
+        /* ====== INTRO VIDEO (optional) ====== */
+        (introSrc ? React.createElement(
+          "section",
+          { className: "mb-16" },
+          React.createElement("video", { src: introSrc, controls: true, className: "w-full rounded-xl shadow-2xl mb-10" })
+        ) : null),
+
+        /* ====== RANKED VIDEOS ====== */
+        ...videos.map((v, i) => React.createElement(
+          "section",
+          { key: i, className: "mb-16" },
           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",
-            })
+            "h2",
+            { className: "text-2xl font-semibold text-white mb-4 flex items-center gap-2" },
+            `#${v.rank}`,
+            React.createElement("span", { className: "text-base font-normal text-white/80" }, `– Team ${v.team ?? "?"}`)
           ),
-        /* Ranked video list */
-        ...videos.map((video, idx) =>
-          React.createElement(
-            "section",
-            { key: idx, className: "mb-16" },
-            React.createElement(
-              "h2",
-              {
-                className:
-                  "text-2xl font-semibold text-white mb-4 flex items-center gap-2",
-              },
-              `#${video.rank}`,
-              React.createElement(
-                "span",
-                { className: "text-base font-normal text-white/80" },
-                `– Team ${video.team ?? "?"}`
-              )
-            ),
-            React.createElement("video", {
-              src: video.url,
-              controls: true,
-              className: "w-full rounded-xl shadow-2xl",
-            }),
-            teamDatasets[video.team] &&
-              React.createElement(
-                "div",
-                { className: "mt-2 space-y-1" },
-                teamDatasets[video.team].map((url, j) =>
-                  React.createElement(
-                    "a",
-                    {
-                      key: j,
-                      href: url,
-                      target: "_blank",
-                      className:
-                        "text-sm text-blue-200 underline hover:text-white",
-                    },
-                    `Dataset: ${url.split("=")[1]}`
-                  )
-                )
-              )
-          )
-        ),
-        /* Sponsors */
+          React.createElement("video", { src: v.url, controls: true, className: "w-full rounded-xl shadow-2xl" }),
+          teamDatasets[v.team] ? React.createElement(
+            "div",
+            { className: "mt-2 space-y-1" },
+            ...teamDatasets[v.team].map((url, j) => React.createElement(
+              "a",
+              { key: j, href: url, target: "_blank", className: "text-sm text-blue-200 underline hover:text-white" },
+              `Dataset: ${url.split("=")[1]}`
+            ))
+          ) : null
+        )),
+
+        /* ====== SPONSORS ====== */
         React.createElement(
           "div",
-          {
-            className:
-              "bg-white rounded-xl shadow-lg p-8 mt-20 flex justify-center",
-          },
-          React.createElement("img", {
-            src
+          { className: "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>