Spaces:

lerobot
/

visualize_dataset

Running on CPU Upgrade

App Files Files Community

mishig HF Staff commited on Apr 26

Commit

cebfee6

verified ·

1 Parent(s): 6a1ac9b

Sync from GitHub via hub-sync

Browse files

Files changed (5) hide show

src/app/[org]/[dataset]/[episode]/episode-viewer.tsx +4 -0
src/app/explore/explore-grid.tsx +7 -3
src/app/layout.tsx +1 -7
src/app/page.tsx +5 -0
src/components/hf-auth-button.tsx +12 -10

src/app/[org]/[dataset]/[episode]/episode-viewer.tsx CHANGED Viewed

@@ -19,6 +19,7 @@ import Sidebar from "@/components/side-nav";
 import StatsPanel from "@/components/stats-panel";
 import OverviewPanel from "@/components/overview-panel";
 import Loading from "@/components/loading-component";
 import { hasURDFSupport } from "@/lib/so101-robot";
 import {
   getAdjacentEpisodesVideoInfo,
@@ -530,6 +531,9 @@ function EpisodeViewerInner({
           label="Doctor"
           title="Dataset quality diagnostics (powered by lerobot-doctor)"
         />
       </div>
       {/* Body: sidebar + content */}

 import StatsPanel from "@/components/stats-panel";
 import OverviewPanel from "@/components/overview-panel";
 import Loading from "@/components/loading-component";
+import HfAuthButton from "@/components/hf-auth-button";
 import { hasURDFSupport } from "@/lib/so101-robot";
 import {
   getAdjacentEpisodesVideoInfo,
           label="Doctor"
           title="Dataset quality diagnostics (powered by lerobot-doctor)"
         />
+        <div className="ml-auto pr-3">
+          <HfAuthButton />
+        </div>
       </div>
       {/* Body: sidebar + content */}

src/app/explore/explore-grid.tsx CHANGED Viewed

@@ -3,6 +3,7 @@
 import React, { useEffect, useRef } from "react";
 import Link from "next/link";
 import { postParentMessageWithParams } from "@/utils/postParentMessage";
 type ExploreGridProps = {
   datasets: Array<{ id: string; videoUrl: string | null }>;
@@ -27,9 +28,12 @@ export default function ExploreGrid({
   return (
     <main className="px-8 py-10 max-w-7xl mx-auto">
-      <h1 className="text-xl font-medium tracking-tight mb-6 text-slate-100">
-        Explore LeRobot datasets
-      </h1>
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
         {datasets.map((ds, idx) => (
           <Link

 import React, { useEffect, useRef } from "react";
 import Link from "next/link";
 import { postParentMessageWithParams } from "@/utils/postParentMessage";
+import HfAuthButton from "@/components/hf-auth-button";
 type ExploreGridProps = {
   datasets: Array<{ id: string; videoUrl: string | null }>;
   return (
     <main className="px-8 py-10 max-w-7xl mx-auto">
+      <div className="flex items-center justify-between mb-6 gap-4">
+        <h1 className="text-xl font-medium tracking-tight text-slate-100">
+          Explore LeRobot datasets
+        </h1>
+        <HfAuthButton />
+      </div>
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
         {datasets.map((ds, idx) => (
           <Link

src/app/layout.tsx CHANGED Viewed

@@ -2,7 +2,6 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import { AuthProvider } from "@/context/auth-context";
-import HfAuthButton from "@/components/hf-auth-button";
 const inter = Inter({ subsets: ["latin"] });
@@ -19,12 +18,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <AuthProvider>
-          <div className="fixed top-3 right-3 z-50">
-            <HfAuthButton />
-          </div>
-          {children}
-        </AuthProvider>
       </body>
     </html>
   );

 import { Inter } from "next/font/google";
 import "./globals.css";
 import { AuthProvider } from "@/context/auth-context";
 const inter = Inter({ subsets: ["latin"] });
   return (
     <html lang="en">
       <body className={inter.className}>
+        <AuthProvider>{children}</AuthProvider>
       </body>
     </html>
   );

src/app/page.tsx CHANGED Viewed

@@ -4,6 +4,7 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useSearchParams } from "next/navigation";
 import { authHeaders } from "@/utils/auth";
 export default function Home() {
   return (
@@ -282,6 +283,10 @@ function HomeInner() {
           </button>
         </form>
         {/* Example Datasets */}
         <div className="mt-8">
           <p className="text-white/40 text-xs uppercase tracking-widest mb-3 font-medium">

 import { useRouter } from "next/navigation";
 import { useSearchParams } from "next/navigation";
 import { authHeaders } from "@/utils/auth";
+import HfAuthButton from "@/components/hf-auth-button";
 export default function Home() {
   return (
           </button>
         </form>
+        <div className="mt-3">
+          <HfAuthButton />
+        </div>
         {/* Example Datasets */}
         <div className="mt-8">
           <p className="text-white/40 text-xs uppercase tracking-widest mb-3 font-medium">

src/components/hf-auth-button.tsx CHANGED Viewed

@@ -4,7 +4,7 @@ import React from "react";
 import { useAuth } from "@/context/auth-context";
 const SIGNIN_BADGE_URL =
-  "https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-md-dark.svg";
 export default function HfAuthButton() {
   const { oauth, isAuthAvailable, signIn, signOut } = useAuth();
@@ -16,21 +16,21 @@ export default function HfAuthButton() {
       oauth.userInfo?.preferred_username ?? oauth.userInfo?.name ?? "signed in";
     const avatar = oauth.userInfo?.picture;
     return (
-      <div className="flex items-center gap-2 panel-raised bg-[var(--surface-0)]/85 backdrop-blur px-2 py-1 text-xs text-slate-300">
         {avatar && (
           // eslint-disable-next-line @next/next/no-img-element
           <img
             src={avatar}
             alt=""
-            width={18}
-            height={18}
             className="rounded-full"
           />
         )}
-        <span className="tabular max-w-[10rem] truncate">{name}</span>
         <button
           onClick={signOut}
-          className="rounded-md px-2 py-0.5 text-[10px] uppercase tracking-wide text-slate-400 hover:text-slate-100 hover:bg-white/5 transition-colors"
           title="Sign out of Hugging Face"
         >
           Sign out
@@ -43,16 +43,18 @@ export default function HfAuthButton() {
     <button
       onClick={signIn}
       title="Sign in to access your private datasets"
-      className="flex items-center gap-2 rounded-md transition-opacity hover:opacity-90"
     >
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img
         src={SIGNIN_BADGE_URL}
         alt="Sign in with Hugging Face"
-        height={32}
-        className="h-8 w-auto"
       />
-      <span className="text-xs text-slate-300">to access private datasets</span>
     </button>
   );
 }

 import { useAuth } from "@/context/auth-context";
 const SIGNIN_BADGE_URL =
+  "https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-sm-dark.svg";
 export default function HfAuthButton() {
   const { oauth, isAuthAvailable, signIn, signOut } = useAuth();
       oauth.userInfo?.preferred_username ?? oauth.userInfo?.name ?? "signed in";
     const avatar = oauth.userInfo?.picture;
     return (
+      <div className="inline-flex items-center gap-1.5 panel-raised bg-[var(--surface-0)]/85 backdrop-blur px-1.5 py-0.5 text-[11px] text-slate-300">
         {avatar && (
           // eslint-disable-next-line @next/next/no-img-element
           <img
             src={avatar}
             alt=""
+            width={14}
+            height={14}
             className="rounded-full"
           />
         )}
+        <span className="tabular max-w-[8rem] truncate">{name}</span>
         <button
           onClick={signOut}
+          className="rounded px-1 text-[9px] uppercase tracking-wide text-slate-400 hover:text-slate-100 hover:bg-white/5 transition-colors"
           title="Sign out of Hugging Face"
         >
           Sign out
     <button
       onClick={signIn}
       title="Sign in to access your private datasets"
+      className="inline-flex items-center gap-1.5 rounded-md transition-opacity hover:opacity-90"
     >
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img
         src={SIGNIN_BADGE_URL}
         alt="Sign in with Hugging Face"
+        height={24}
+        className="h-6 w-auto"
       />
+      <span className="text-[11px] text-slate-300/80">
+        to access private datasets
+      </span>
     </button>
   );
 }