Spaces:

roboticshack
/

demo

Running

App Files Files Community

mishig HF Staff commited on 6 days ago

Commit

a44ad63

verified ·

1 Parent(s): 18fefa8

Update index.html

Browse files

Files changed (1) hide show

index.html +162 -18

index.html CHANGED Viewed

@@ -1,19 +1,163 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Mistral AI Robotics 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/roboticshack/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/roboticshack/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=roboticshack")
+          .then(res => res.json())
+          .then(data => {
+            const map = {};
+            data.forEach(entry => {
+                const match = entry.id.match(/roboticshack\/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://mistral.ai/",
+            className: "text-orange-500 underline",
+            target: "_blank"
+          }, "Mistral AI"), " Robotics Hackathon"
+        ),
+        React.createElement("p", { className: "text-center text-gray-700 mb-6" },
+          "Paris, France", React.createElement("br", null),
+          "11 April 2025, 13:00 – 13 April 2025, 14:00"
+        ),
+        React.createElement("div", {
+          className: "flex flex-wrap justify-center items-center gap-8 mb-10"
+        },
+          // Powered by
+          React.createElement("div", { className: "flex items-center gap-2" },
+            React.createElement("span", { className: "text-lg font-semibold" }, "Powered by:"),
+            React.createElement("a", {
+              href: "https://lsvp.com/", target: "_blank"
+            }, React.createElement("img", {
+              src: "https://lsvp.com/wp-content/uploads/2023/04/logo_lightspeed_venture_partners.svg",
+              className: "h-8 max-w-20 object-contain"
+            }))
+          ),
+          // Sponsored by
+          React.createElement("div", { className: "flex items-center gap-2" },
+            React.createElement("span", { className: "text-lg font-semibold" }, "Sponsored by:"),
+            [
+              ["https://huggingface.co/", "https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.svg"],
+              ["https://www.joinef.com/", "https://hal-assets-prod.s3.amazonaws.com/programs/02c353f7-9aee-451d-84b4-9419731124e1.png"],
+              ["https://www.nvidia.com/", "https://upload.wikimedia.org/wikipedia/sco/thumb/2/21/Nvidia_logo.svg/702px-Nvidia_logo.svg.png?20150924223142"],
+              ["https://www.motier.vc/", "https://cdn.prod.website-files.com/61dd4bedf96feb260d027b32/620901ff3592bf41e41e3779_motier-ventures.svg"],
+              ["https://www.scaleway.com/en/", "https://www.scaleway.com/_next/static/media/logo.7e2996cb.svg"],
+              ["https://www.linkedin.com/company/sotafamily/", "https://d1f2tohd72skfr.cloudfront.net/2025/03/13/e4937700-e9cb-4d6f-bfd3-66dc172fa3c4"]
+            ].map(([href, src], i) =>
+              React.createElement("a", {
+                key: i, href, target: "_blank"
+              }, React.createElement("img", {
+                src, className: "h-8 max-w-20 object-contain"
+              }))
+            )
+          ),
+          // Office space
+          React.createElement("div", { className: "flex items-center gap-2" },
+            React.createElement("span", { className: "text-lg font-semibold" }, "Office space by:"),
+            React.createElement("a", {
+              href: "https://www.photoroom.com/", target: "_blank"
+            }, React.createElement("img", {
+              src: "https://media.licdn.com/dms/image/v2/D4E0BAQGY9CCqd-ULZA/company-logo_200_200/company-logo_200_200/0/1721219031708/photoroom_logo?e=1750291200&v=beta&t=Ja2zXQoUenH2WgRb-jkSoPIFwcOQQ9t-r322tMfyLGs",
+              className: "h-8 max-w-20 object-contain"
+            }))
+          )
+        ),
+        React.createElement("div", { className: "text-center text-base text-gray-800 font-medium mb-10" },
+          React.createElement("a", {
+            href: "https://github.com/huggingface/lerobot/blob/main/examples/10_use_so100.md",
+            className: "underline text-blue-600", target: "_blank"
+          }, "SO-ARM100 arms by Rob Knight & LeRobot team")
+        ),
+        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>