Update src/App.js

src/App.js

@@ -1,25 +1,317 @@
-import logo from './logo.svg';
-import './App.css';
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { ArrowRight, Database, GitBranch, Box, Layers, Cloud, GitMerge, Play, Settings } from "lucide-react";
+import { motion } from "framer-motion";
+
+export default function Diagram() {
+  const BoxCard = ({ icon: Icon, title, children }) => (
+    <Card className="rounded-2xl shadow-sm border bg-white/70 backdrop-blur">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-lg flex items-center gap-2"><Icon className="w-5 h-5"/>{title}</CardTitle>
+      </CardHeader>
+      <CardContent className="text-sm text-gray-700 space-y-2">
+        {children}
+      </CardContent>
+    </Card>
+  );
+
+  const Arrow = () => (
+    <div className="flex items-center justify-center">
+      <ArrowRight className="w-6 h-6"/>
+    </div>
+  );
 
-function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+    <div className="p-6 md:p-10 max-w-6xl mx-auto space-y-10">
+      <header className="space-y-2">
+        <h1 className="text-2xl md:text-3xl font-semibold">Hugging Face–Centric Minimal Data Stack</h1>
+        <p className="text-gray-600">Single-backbone workflow for robotics datasets (manipulation, perception, reasoning, HRI) with minimal tools and frictionless integration.</p>
       </header>
+
+      {/* Stage definitions */}
+      <section className="space-y-4">
+        <h2 className="text-xl font-semibold">Stage Definitions & Examples</h2>
+        <ul className="list-disc pl-6 text-gray-700 space-y-2">
+          <li><strong>Data Collection:</strong> Raw recordings from robots or simulations. Example: RGB-D video, audio, and joint states captured during human-robot interaction.</li>
+          <li><strong>Annotation:</strong> Assign labels or semantics to collected data. Example: gesture type, emotion, manipulated object, speech act.</li>
+          <li><strong>Curation:</strong> Filter, validate, and organize annotated data into usable splits (train/val/test). Example: remove bad frames, balance human/robot perspectives.</li>
+          <li><strong>Publishing (Hub):</strong> Versioned dataset hosting on <a href="https://huggingface.co/" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">Hugging Face Hub</a>, with metadata and documentation. Example: pushing curated subsets for manipulation learning.</li>
+          <li><strong>Visualization (Spaces):</strong> Interactive dashboards or viewers built in <a href="https://gradio.app/" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">Gradio</a> or <a href="https://streamlit.io/" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">Streamlit</a> for exploration or validation. Example: playback of synchronized gaze, pose, and audio segments.</li>
+          <li><strong>Reuse & Training:</strong> Loading datasets directly via <a href="https://huggingface.co/docs/datasets" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">🤗 Datasets API</a> for fine-tuning multimodal or planning models. Example: training z<sub>social</sub> encoders or expressive decoders.</li>
+        </ul>
+      </section>
+
+      {/* Main flow diagram */}
+      <section className="grid grid-cols-1 md:grid-cols-5 gap-4 items-stretch">
+        <motion.div initial={{opacity:0, y:10}} animate={{opacity:1, y:0}} transition={{delay:0.05}} className="md:col-span-1">
+          <BoxCard icon={Layers} title="Data Sources">
+            <ul className="list-disc pl-5 space-y-1">
+              <li>Robot logs (RGB-D, audio, pose)</li>
+              <li>Sim runs & demos</li>
+              <li>Interaction clips</li>
+              <li>Planning/intent traces</li>
+            </ul>
+          </BoxCard>
+        </motion.div>
+        <Arrow/>
+        <motion.div initial={{opacity:0, y:10}} animate={{opacity:1, y:0}} transition={{delay:0.1}} className="md:col-span-1">
+          <BoxCard icon={Settings} title="Annotation (min one)">
+            <ul className="list-disc pl-5 space-y-1">
+              <li><a href="https://labelstud.io/" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">Label Studio</a> (self-host or cloud)</li>
+              <li><a href="https://cvat.org/" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">CVAT</a> / <a href="https://roboflow.com/" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">Roboflow</a> (export)</li>
+              <li>Exports: COCO, JSON, CSV</li>
+            </ul>
+          </BoxCard>
+        </motion.div>
+        <Arrow/>
+        <motion.div initial={{opacity:0, y:10}} animate={{opacity:1, y:0}} transition={{delay:0.15}} className="md:col-span-1">
+          <BoxCard icon={Box} title="Curation (optional)">
+            <ul className="list-disc pl-5 space-y-1">
+              <li><a href="https://voxel51.com/" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">FiftyOne</a>: filter, QA, splits</li>
+              <li><a href="https://cleanlab.ai/" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">Cleanlab</a> / Pandas checks</li>
+              <li>Embed search for edge cases</li>
+            </ul>
+          </BoxCard>
+        </motion.div>
+        <Arrow/>
+        <motion.div initial={{opacity:0, y:10}} animate={{opacity:1, y:0}} transition={{delay:0.2}} className="md:col-span-1">
+          <BoxCard icon={GitBranch} title="HF Hub (Backbone)">
+            <ul className="list-disc pl-5 space-y-1">
+              <li><a href="https://huggingface.co/" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">Datasets & models</a> in repos</li>
+              <li>Git + LFS versioning</li>
+              <li>Private org, permissions</li>
+              <li>Tags, README, cards</li>
+            </ul>
+          </BoxCard>
+        </motion.div>
+        <Arrow/>
+        <motion.div initial={{opacity:0, y:10}} animate={{opacity:1, y:0}} transition={{delay:0.25}} className="md:col-span-1">
+          <BoxCard icon={Play} title="HF Spaces (Viz)">
+            <ul className="list-disc pl-5 space-y-1">
+              <li><a href="https://huggingface.co/spaces" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">Gradio/Streamlit viewers</a></li>
+              <li>Clip browser, 3D previews</li>
+              <li>Eval dashboards & demos</li>
+            </ul>
+          </BoxCard>
+        </motion.div>
+      </section>
+
+      {/* Tool comparison */}
+      <section className="space-y-4">
+        <h2 className="text-xl font-semibold">Comparison: Annotation & Curation Tools</h2>
+        <div className="overflow-x-auto">
+          <table className="min-w-full text-sm border-collapse">
+            <thead>
+              <tr className="bg-gray-100 text-gray-700">
+                <th className="p-2 text-left">Tool</th>
+                <th className="p-2 text-left">Strengths</th>
+                <th className="p-2 text-left">Limitations</th>
+                <th className="p-2 text-left">Integration with HF</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y">
+              <tr>
+                <td className="p-2 font-medium"><a href="https://labelstud.io/" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">Label Studio</a></td>
+                <td className="p-2">Open source, multi-modal (image, audio, text, video). Very flexible schema; plugin ecosystem.</td>
+                <td className="p-2">Requires setup for teams; interface slower with 100k+ samples.</td>
+                <td className="p-2">Native <a href="https://huggingface.co/docs/datasets/labelstudio" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">datasets connector</a>; can push directly to HF Hub.</td>
+              </tr>
+              <tr>
+                <td className="p-2 font-medium"><a href="https://cvat.org/" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">CVAT</a></td>
+                <td className="p-2">Great for video and dense bounding-box/pose annotations; powerful auto-annotation tools.</td>
+                <td className="p-2">Primarily vision-focused; heavier deployment (Docker).</td>
+                <td className="p-2">Exports in COCO/VOC formats easily loadable with <code>datasets.load_dataset</code>.</td>
+              </tr>
+              <tr>
+                <td className="p-2 font-medium"><a href="https://roboflow.com/" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">Roboflow</a></td>
+                <td className="p-2">Cloud-based; fast web UI and built-in preprocessing and augmentation.</td>
+                <td className="p-2">Closed-source, limited free tier; less flexible schemas.</td>
+                <td className="p-2">Exports compatible with HF datasets; no native connector but simple upload via API.</td>
+              </tr>
+              <tr>
+                <td className="p-2 font-medium"><a href="https://voxel51.com/" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">FiftyOne</a></td>
+                <td className="p-2">Advanced filtering, visualization, embedding-based analysis.</td>
+                <td className="p-2">Not for annotation itself; local-first.</td>
+                <td className="p-2">Direct push/export to HF Hub for curated dataset versions.</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      {/* Output / training */}
+      <section className="grid grid-cols-1 md:grid-cols-3 gap-4 items-stretch">
+        <motion.div initial={{opacity:0, y:10}} animate={{opacity:1, y:0}} transition={{delay:0.3}}>
+          <BoxCard icon={GitMerge} title="Train & Reuse">
+            <ul className="list-disc pl-5 space-y-1">
+              <li>Load via <a href="https://huggingface.co/docs/datasets" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">datasets streaming</a></li>
+              <li>Fine-tune VL/VLA/ASR models</li>
+              <li>Push checkpoints to HF</li>
+            </ul>
+          </BoxCard>
+        </motion.div>
+        <motion.div initial={{opacity:0, y:10}} animate={{opacity:1, y:0}} transition={{delay:0.35}}>
+          <BoxCard icon={Database} title="Raw Storage (optional)">
+            <ul className="list-disc pl-5 space-y-1">
+              <li><a href="https://aws.amazon.com/s3/" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">AWS S3</a> / <a href="https://cloud.google.com/storage" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">GCS</a> / <a href="https://min.io/" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">MinIO</a> for TB+ raw</li>
+              <li>Keep curated subsets on HF</li>
+              <li>Link via metadata/URIs</li>
+            </ul>
+          </BoxCard>
+        </motion.div>
+        <motion.div initial={{opacity:0, y:10}} animate={{opacity:1, y:0}} transition={{delay:0.4}}>
+          <BoxCard icon={Cloud} title="Governance (lite)">
+            <ul className="list-disc pl-5 space-y-1">
+              <li>Repo permissions & reviews</li>
+              <li>Semantic tags & licenses</li>
+              <li>Changelogs & model cards</li>
+            </ul>
+          </BoxCard>
+        </motion.div>
+      </section>
+
+      {/* Notes */}
+      <section className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <Card className="rounded-2xl">
+          <CardHeader className="pb-2"><CardTitle className="text-lg">Operating Principles</CardTitle></CardHeader>
+          <CardContent className="text-sm text-gray-700 space-y-2">
+            <ul className="list-disc pl-5 space-y-1">
+              <li>Keep the workflow lean: Hugging Face Hub as the single backbone.</li>
+              <li>One annotation tool (<a href="https://labelstud.io/" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">Label Studio</a>, <a href="https://cvat.org/" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">CVAT</a>, or <a href="https://roboflow.com/" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">Roboflow</a>).</li>
+              <li>Optional curation with <a href="https://voxel51.com/" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">FiftyOne</a> before each release.</li>
+              <li>Push each validated dataset as a new HF Hub version.</li>
+              <li>Provide <a href="https://huggingface.co/spaces" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">Spaces</a> for exploration, demo, and review.</li>
+            </ul>
+          </CardContent>
+        </Card>
+        <Card className="rounded-2xl">
+          <CardHeader className="pb-2"><CardTitle className="text-lg">Typical Repo Layout (HF)</CardTitle></CardHeader>
+          <CardContent className="text-sm text-gray-700 space-y-2 font-mono">
+            <pre className="text-xs md:text-sm overflow-auto">
+{`datasets/
+  eurecat/haru-social-vla/
+    README.md  # dataset card with tags + license
+    data/      # small/curated samples or manifests
+    annotations/
+    splits/    # train/val/test lists
+    scripts/   # loading + eval utils
+models/
+  eurecat/haru-expressive-decoder/
+    README.md  # model card (training data, metrics)
+    config/
+    checkpoints/`}
+            </pre>
+          </CardContent>
+        </Card>
+      </section>
+
+      <footer className="text-xs text-gray-500">
+        Tip: enforce tagging conventions (task=manipulation | hri | planning; modality=rgbd | audio | pose; license; privacy). Automate checks in CI before merging a dataset release.
+      </footer>
+
+      {/* ============================= */}
+      {/* MODEL TRAINING & REUSE STACK */}
+      {/* ============================= */}
+
+      <section className="space-y-8 mt-16">
+        <header className="space-y-2">
+          <h2 className="text-2xl font-semibold">Hugging Face–Centric Model Lifecycle Stack</h2>
+          <p className="text-gray-600">Unified workflow for model training, evaluation, storage, deployment, and reuse — using the fewest possible tools while supporting robotics and multimodal tasks.</p>
+        </header>
+
+        {/* Stage definitions */}
+        <section className="space-y-4">
+          <h3 className="text-xl font-semibold">Stage Definitions & Examples</h3>
+          <ul className="list-disc pl-6 text-gray-700 space-y-2">
+            <li><strong>Training:</strong> Model optimization using GPUs (local or <a href="https://www.runpod.io/" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">RunPod</a> cloud). Example: fine-tuning a multimodal encoder on robot-social datasets.</li>
+            <li><strong>Evaluation:</strong> Measure metrics, visualize results. Example: compute CCC for valence/arousal or success rate for manipulation plans.</li>
+            <li><strong>Storage & Versioning:</strong> Upload model checkpoints and configs to <a href="https://huggingface.co/" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">Hugging Face Hub</a> for long-term reproducibility.</li>
+            <li><strong>Deployment:</strong> Serve models for inference in <a href="https://huggingface.co/spaces" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">Spaces</a> or local robots; optional private inference endpoints.</li>
+            <li><strong>Reuse / Continual Learning:</strong> Load models via <code>transformers</code> API; continue training or integrate into reasoning/interaction systems.</li>
+          </ul>
+        </section>
+
+        {/* Model lifecycle flow */}
+        <section className="grid grid-cols-1 md:grid-cols-5 gap-4 items-stretch">
+          <motion.div initial={{opacity:0, y:10}} animate={{opacity:1, y:0}} transition={{delay:0.05}} className="md:col-span-1">
+            <BoxCard icon={Settings} title="Training (GPU/RunPod)">
+              <ul className="list-disc pl-5 space-y-1">
+                <li>Train locally or on <a href="https://www.runpod.io/" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">RunPod</a> cloud GPUs</li>
+                <li>Use <a href="https://huggingface.co/docs/transformers" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">Transformers</a> + <a href="https://huggingface.co/docs/accelerate" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">Accelerate</a> for training</li>
+                <li>Track metrics with <a href="https://wandb.ai/site" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">Weights & Biases</a> or built-in logs</li>
+              </ul>
+            </BoxCard>
+          </motion.div>
+          <Arrow/>
+          <motion.div initial={{opacity:0, y:10}} animate={{opacity:1, y:0}} transition={{delay:0.1}} className="md:col-span-1">
+            <BoxCard icon={Play} title="Evaluation">
+              <ul className="list-disc pl-5 space-y-1">
+                <li>Use <a href="https://huggingface.co/docs/evaluate" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">Evaluate</a> library for metrics</li>
+                <li>Visualize predictions with FiftyOne or Spaces</li>
+                <li>Generate benchmark reports</li>
+              </ul>
+            </BoxCard>
+          </motion.div>
+          <Arrow/>
+          <motion.div initial={{opacity:0, y:10}} animate={{opacity:1, y:0}} transition={{delay:0.15}} className="md:col-span-1">
+            <BoxCard icon={GitBranch} title="Model Storage (HF Hub)">
+              <ul className="list-disc pl-5 space-y-1">
+                <li>Push models via <code>huggingface_hub</code> API</li>
+                <li>Keep config, tokenizer, and weights</li>
+                <li>Versioned releases, changelogs, model cards</li>
+              </ul>
+            </BoxCard>
+          </motion.div>
+          <Arrow/>
+          <motion.div initial={{opacity:0, y:10}} animate={{opacity:1, y:0}} transition={{delay:0.2}} className="md:col-span-1">
+            <BoxCard icon={Cloud} title="Deployment & Inference">
+              <ul className="list-disc pl-5 space-y-1">
+                <li>Serve via HF <a href="https://huggingface.co/inference-api" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">Inference API</a> or Spaces</li>
+                <li>Integrate into robot planner / dialogue manager</li>
+                <li>Optional local FastAPI wrapper for on-prem use</li>
+              </ul>
+            </BoxCard>
+          </motion.div>
+          <Arrow/>
+          <motion.div initial={{opacity:0, y:10}} animate={{opacity:1, y:0}} transition={{delay:0.25}} className="md:col-span-1">
+            <BoxCard icon={GitMerge} title="Reuse & Continual Learning">
+              <ul className="list-disc pl-5 space-y-1">
+                <li>Load via <a href="https://huggingface.co/docs/transformers/quicktour" target="_blank" rel="noreferrer noopener" className="text-blue-600 underline">Transformers.load_pretrained</a></li>
+                <li>Adapt models for new domains or robot skills</li>
+                <li>Fine-tune periodically with new curated data</li>
+              </ul>
+            </BoxCard>
+          </motion.div>
+        </section>
+
+        {/* Summary */}
+        <section className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <Card className="rounded-2xl">
+            <CardHeader className="pb-2"><CardTitle className="text-lg">Minimal Tool Stack</CardTitle></CardHeader>
+            <CardContent className="text-sm text-gray-700 space-y-2">
+              <ul className="list-disc pl-5 space-y-1">
+                <li><strong>Training:</strong> RunPod + HF Accelerate</li>
+                <li><strong>Evaluation:</strong> HF Evaluate + simple scripts</li>
+                <li><strong>Storage:</strong> Hugging Face Hub</li>
+                <li><strong>Deployment:</strong> HF Spaces or Inference API</li>
+                <li><strong>Reuse:</strong> Transformers API</li>
+              </ul>
+            </CardContent>
+          </Card>
+          <Card className="rounded-2xl">
+            <CardHeader className="pb-2"><CardTitle className="text-lg">Best Practices</CardTitle></CardHeader>
+            <CardContent className="text-sm text-gray-700 space-y-2">
+              <ul className="list-disc pl-5 space-y-1">
+                <li>Keep one model repo per skill (e.g., gaze decoder, z<sub>social</sub> encoder)</li>
+                <li>Tag model cards with dataset and evaluation metrics</li>
+                <li>Use Spaces for lightweight demos or robot simulations</li>
+                <li>Automate CI/CD: push training logs + model eval to Hub</li>
+                <li>Leverage private HF orgs for internal research models</li>
+              </ul>
+            </CardContent>
+          </Card>
+        </section>
+      </section>
     </div>
   );
 }
 
-export default App;