Upload src/App.jsx with huggingface_hub

src/App.jsx

@@ -17,13 +17,22 @@ import {
   ChevronDown,
   ChevronUp,
   Copy,
-  ExternalLink
+  ExternalLink,
+  Sparkles,
+  Rocket,
+  Server,
+  Globe,
+  Shield,
+  Star,
+  Menu,
+  X
 } from 'lucide-react'
 
 function App() {
   const [activePhase, setActivePhase] = useState(0)
   const [expandedSections, setExpandedSections] = useState({})
   const [copiedCode, setCopiedCode] = useState(null)
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
   const toggleSection = (section) => {
     setExpandedSections(prev => ({
@@ -41,16 +50,26 @@ function App() {
   const phases = [
     {
       id: 0,
-      name: 'Phase 0: Seed Generator',
-      icon: <Zap className="w-6 h-6" />,
+      name: 'Seed Generator',
+      shortName: 'Phase 0',
+      icon: <Zap className="w-5 h-5" />,
       space: 'mindchain/hf-space-nemo-seed-generator-huggingface-inference',
-      description: 'Generates initial seed Q&A pairs from a topic using LLM',
-      color: 'from-yellow-500 to-orange-500',
+      description: 'Generates initial seed Q&A pairs from a topic using LLM inference.',
+      color: 'amber',
+      gradient: 'from-amber-500 to-orange-600',
+      bgGradient: 'from-amber-500/10 to-orange-500/10',
       endpoint: '/generate',
       method: 'POST',
+      features: ['Topic-based generation', 'Configurable seed count', 'Quality pre-filtering'],
+      requestParams: [
+        { name: 'topic', type: 'string', desc: 'Topic for Q&A generation' },
+        { name: 'num_seeds', type: 'int', desc: 'Number of seeds to generate (default: 10)' },
+        { name: 'model', type: 'string', desc: 'Qwen/Qwen2.5-7B-Instruct' },
+        { name: 'provider', type: 'string', desc: 'together (recommended)' },
+      ],
       requestExample: `{
   "topic": "Python programming basics",
-  "num_seeds": 5,
+  "num_seeds": 10,
   "model": "Qwen/Qwen2.5-7B-Instruct",
   "provider": "together"
 }`,
@@ -59,22 +78,34 @@ function App() {
   "seeds": [
     {
       "instruction": "What is a variable in Python?",
-      "output": "A variable in Python is a named location...",
+      "output": "A variable in Python is a named container...",
       "quality_score": 8
     }
   ],
-  "count": 5
+  "count": 10
 }`
     },
     {
       id: 1,
-      name: 'Phase 1: Distilabel Generator',
-      icon: <Cpu className="w-6 h-6" />,
+      name: 'Distilabel Generator',
+      shortName: 'Phase 1',
+      icon: <Cpu className="w-5 h-5" />,
       space: 'mindchain/hf-space-distilabel-generator-huggingface-inference',
-      description: 'Generates synthetic data with LLM Judge scoring using UltraFeedback criteria',
-      color: 'from-blue-500 to-cyan-500',
+      description: 'Generates synthetic data with LLM Judge scoring using UltraFeedback criteria.',
+      color: 'blue',
+      gradient: 'from-blue-500 to-cyan-500',
+      bgGradient: 'from-blue-500/10 to-cyan-500/10',
       endpoint: '/generate',
       method: 'POST',
+      features: ['UltraFeedback scoring', 'Multi-model support', 'Configurable thresholds'],
+      requestParams: [
+        { name: 'seed_dataset', type: 'string', desc: 'HF dataset ID from Phase 0' },
+        { name: 'num_records', type: 'int', desc: 'Records to generate (default: 100)' },
+        { name: 'model', type: 'string', desc: 'Generator model' },
+        { name: 'judge_model', type: 'string', desc: 'Judge model for scoring' },
+        { name: 'use_judge', type: 'bool', desc: 'Enable LLM Judge (default: true)' },
+        { name: 'min_score', type: 'int', desc: 'Minimum score filter (1-10)' },
+      ],
       requestExample: `{
   "seed_dataset": "mindchain/synthetic-seeds",
   "num_records": 100,
@@ -89,8 +120,8 @@ function App() {
   "success": true,
   "records": [
     {
-      "instruction": "...",
-      "output": "...",
+      "instruction": "Explain Python loops...",
+      "output": "Python loops allow you to...",
       "quality_score": 8,
       "distilabel_metadata": {...}
     }
@@ -104,13 +135,24 @@ function App() {
     },
     {
       id: 2,
-      name: 'Phase 2: Argilla Curator',
-      icon: <Filter className="w-6 h-6" />,
+      name: 'Argilla Curator',
+      shortName: 'Phase 2',
+      icon: <Filter className="w-5 h-5" />,
       space: 'mindchain/hf-space-argilla-curator-huggingface-inference',
-      description: 'Final curation with quality scoring and filtering for high-quality dataset',
-      color: 'from-purple-500 to-pink-500',
+      description: 'Final curation with quality scoring and filtering for high-quality dataset.',
+      color: 'purple',
+      gradient: 'from-purple-500 to-pink-500',
+      bgGradient: 'from-purple-500/10 to-pink-500/10',
       endpoint: '/curate',
       method: 'POST',
+      features: ['Quality filtering', 'Score distribution', 'Hub push'],
+      requestParams: [
+        { name: 'raw_dataset', type: 'string', desc: 'Raw dataset ID from Phase 1' },
+        { name: 'model', type: 'string', desc: 'Judge model for re-scoring' },
+        { name: 'provider', type: 'string', desc: 'Inference provider' },
+        { name: 'min_score', type: 'int', desc: 'Minimum score (default: 7)' },
+        { name: 'target_dataset', type: 'string', desc: 'Output dataset ID (optional)' },
+      ],
       requestExample: `{
   "raw_dataset": "mindchain/synthetic-distilabel-raw",
   "model": "Qwen/Qwen2.5-7B-Instruct",
@@ -124,425 +166,647 @@ function App() {
   "total_count": 100,
   "filtered_count": 22,
   "score_distribution": {
-    "7": 25,
-    "8": 30,
-    "9": 15,
-    "10": 8
+    "7": 25, "8": 30, "9": 15, "10": 8
   }
 }`
     }
   ]
 
-  const curlExamples = phases.map(phase => `curl -X POST https://${phase.space}.hf.space${phase.endpoint} \\
+  const curlExample = (phase) => `curl -X POST https://${phase.space}.hf.space${phase.endpoint} \\
   -H "Content-Type: application/json" \\
-  -d '${phase.requestExample.split('\n').slice(0, 6).join('\n  ')}...'`)
+  -d '${phase.requestExample.replace(/\n/g, ' ')}'`
+
+  const scrollToSection = (id) => {
+    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' })
+    setMobileMenuOpen(false)
+  }
 
   return (
-    <div className="min-h-screen bg-gray-900 text-gray-100">
-      {/* Header */}
-      <header className="bg-gradient-to-r from-gray-800 to-gray-900 border-b border-gray-700">
-        <div className="max-w-7xl mx-auto px-4 py-6">
-          <div className="flex items-center gap-4">
-            <div className="p-3 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl">
-              <Database className="w-8 h-8" />
+    <div className="min-h-screen bg-slate-950 text-slate-100">
+      {/* Navigation */}
+      <nav className="fixed top-0 left-0 right-0 z-50 bg-slate-950/80 backdrop-blur-xl border-b border-slate-800/50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex items-center justify-between h-16">
+            <div className="flex items-center gap-3">
+              <div className="relative">
+                <div className="absolute inset-0 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-xl blur-lg opacity-50"></div>
+                <div className="relative p-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-xl">
+                  <Database className="w-5 h-5" />
+                </div>
+              </div>
+              <div>
+                <h1 className="font-bold text-lg leading-tight">Synthetic Pipeline</h1>
+                <p className="text-xs text-slate-500">HF Spaces Documentation</p>
+              </div>
             </div>
-            <div>
-              <h1 className="text-2xl font-bold">Synthetic Data Pipeline</h1>
-              <p className="text-gray-400">HuggingFace Spaces Documentation</p>
+
+            {/* Desktop Nav */}
+            <div className="hidden md:flex items-center gap-6">
+              <button onClick={() => scrollToSection('overview')} className="text-sm text-slate-400 hover:text-white transition-colors">Overview</button>
+              <button onClick={() => scrollToSection('pipeline')} className="text-sm text-slate-400 hover:text-white transition-colors">Pipeline</button>
+              <button onClick={() => scrollToSection('api')} className="text-sm text-slate-400 hover:text-white transition-colors">API</button>
+              <button onClick={() => scrollToSection('quickstart')} className="text-sm text-slate-400 hover:text-white transition-colors">Quick Start</button>
+              <a
+                href="https://huggingface.co/collections/mindchain/synthetic-data-pipeline"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-2 px-4 py-2 bg-slate-800 hover:bg-slate-700 rounded-lg text-sm font-medium transition-colors"
+              >
+                <Globe className="w-4 h-4" />
+                HF Collection
+              </a>
             </div>
+
+            {/* Mobile menu button */}
+            <button
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+              className="md:hidden p-2 text-slate-400 hover:text-white"
+            >
+              {mobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+            </button>
           </div>
         </div>
-      </header>
-
-      {/* Main Content */}
-      <main className="max-w-7xl mx-auto px-4 py-8">
-        {/* Overview Section */}
-        <section className="mb-12">
-          <div className="flex items-center gap-2 mb-4">
-            <BookOpen className="w-5 h-5 text-indigo-400" />
-            <h2 className="text-xl font-semibold">Overview</h2>
+
+        {/* Mobile Nav */}
+        {mobileMenuOpen && (
+          <div className="md:hidden bg-slate-900 border-b border-slate-800">
+            <div className="px-4 py-3 space-y-2">
+              <button onClick={() => scrollToSection('overview')} className="block w-full text-left px-3 py-2 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg">Overview</button>
+              <button onClick={() => scrollToSection('pipeline')} className="block w-full text-left px-3 py-2 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg">Pipeline</button>
+              <button onClick={() => scrollToSection('api')} className="block w-full text-left px-3 py-2 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg">API</button>
+              <button onClick={() => scrollToSection('quickstart')} className="block w-full text-left px-3 py-2 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg">Quick Start</button>
+            </div>
           </div>
-          <div className="bg-gray-800 rounded-xl p-6 border border-gray-700">
-            <p className="text-gray-300 mb-4">
-              This pipeline generates high-quality synthetic Q&A datasets using HuggingFace Spaces and the HF Inference API.
-              It follows a three-phase approach: seed generation, distilabel-based augmentation with LLM Judge scoring,
-              and final curation.
-            </p>
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
-              <div className="bg-gray-700/50 rounded-lg p-4 flex items-center gap-3">
-                <CheckCircle className="w-5 h-5 text-green-400" />
-                <span className="text-sm">CPU-only (no GPU required)</span>
-              </div>
-              <div className="bg-gray-700/50 rounded-lg p-4 flex items-center gap-3">
-                <CheckCircle className="w-5 h-5 text-green-400" />
-                <span className="text-sm">HF Inference API via Together</span>
-              </div>
-              <div className="bg-gray-700/50 rounded-lg p-4 flex items-center gap-3">
-                <CheckCircle className="w-5 h-5 text-green-400" />
-                <span className="text-sm">Qwen2.5-7B-Instruct model</span>
+        )}
+      </nav>
+
+      {/* Hero Section */}
+      <section className="pt-32 pb-20 px-4 relative overflow-hidden">
+        {/* Background Effects */}
+        <div className="absolute inset-0 overflow-hidden">
+          <div className="absolute top-1/4 -left-1/4 w-96 h-96 bg-indigo-600/20 rounded-full blur-3xl"></div>
+          <div className="absolute top-1/3 -right-1/4 w-96 h-96 bg-purple-600/20 rounded-full blur-3xl"></div>
+          <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-full h-1/2 bg-gradient-to-t from-slate-950 to-transparent"></div>
+        </div>
+
+        <div className="max-w-4xl mx-auto text-center relative">
+          <div className="inline-flex items-center gap-2 px-4 py-2 bg-slate-800/50 border border-slate-700 rounded-full text-sm text-slate-300 mb-6">
+            <Sparkles className="w-4 h-4 text-amber-400" />
+            <span>HuggingFace Spaces + HF Inference API</span>
+          </div>
+
+          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6">
+            <span className="bg-gradient-to-r from-white via-slate-200 to-slate-400 bg-clip-text text-transparent">
+              Synthetic Data Pipeline
+            </span>
+          </h1>
+
+          <p className="text-lg sm:text-xl text-slate-400 max-w-2xl mx-auto mb-10">
+            Generate high-quality synthetic Q&A datasets with a 3-phase pipeline.
+            CPU-only, no GPU required.
+          </p>
+
+          <div className="flex flex-wrap items-center justify-center gap-4">
+            <button
+              onClick={() => scrollToSection('quickstart')}
+              className="btn btn-primary flex items-center gap-2"
+            >
+              <Rocket className="w-4 h-4" />
+              Get Started
+            </button>
+            <a
+              href="https://huggingface.co/collections/mindchain/synthetic-data-pipeline"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="btn btn-secondary flex items-center gap-2"
+            >
+              <ExternalLink className="w-4 h-4" />
+              View Spaces
+            </a>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Grid */}
+      <section className="py-12 px-4">
+        <div className="max-w-6xl mx-auto">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            {[
+              { icon: <Server className="w-5 h-5" />, label: 'CPU Only', desc: 'No GPU required' },
+              { icon: <Zap className="w-5 h-5" />, label: 'Always On', desc: 'Docker Spaces' },
+              { icon: <Shield className="w-5 h-5" />, label: 'Quality Scored', desc: 'LLM Judge' },
+              { icon: <Globe className="w-5 h-5" />, label: 'HF Hub', desc: 'Dataset push' },
+            ].map((feature, i) => (
+              <div key={i} className="card card-hover p-4 text-center">
+                <div className="inline-flex p-3 bg-slate-800 rounded-xl mb-3 text-indigo-400">
+                  {feature.icon}
+                </div>
+                <h3 className="font-semibold text-sm">{feature.label}</h3>
+                <p className="text-xs text-slate-500 mt-1">{feature.desc}</p>
               </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Overview Section */}
+      <section id="overview" className="py-16 px-4">
+        <div className="max-w-6xl mx-auto">
+          <div className="flex items-center gap-3 mb-8">
+            <div className="p-2 bg-indigo-500/20 rounded-xl">
+              <BookOpen className="w-5 h-5 text-indigo-400" />
             </div>
+            <h2 className="text-2xl font-bold">Overview</h2>
           </div>
-        </section>
 
-        {/* Pipeline Architecture */}
-        <section className="mb-12">
-          <div className="flex items-center gap-2 mb-4">
-            <Layers className="w-5 h-5 text-indigo-400" />
-            <h2 className="text-xl font-semibold">Pipeline Architecture</h2>
-          </div>
-          <div className="bg-gray-800 rounded-xl p-6 border border-gray-700">
-            <div className="flex flex-col md:flex-row items-center justify-center gap-4">
-              {phases.map((phase, index) => (
-                <React.Fragment key={phase.id}>
-                  <button
-                    onClick={() => setActivePhase(phase.id)}
-                    className={`flex-1 w-full p-4 rounded-xl border-2 transition-all ${
-                      activePhase === phase.id
-                        ? 'border-indigo-500 bg-indigo-500/10'
-                        : 'border-gray-600 hover:border-gray-500'
-                    }`}
-                  >
-                    <div className={`inline-flex p-2 rounded-lg bg-gradient-to-r ${phase.color} mb-2`}>
-                      {phase.icon}
+          <div className="card p-6 lg:p-8">
+            <p className="text-slate-300 text-lg leading-relaxed mb-8">
+              This pipeline generates high-quality synthetic Q&A datasets using HuggingFace Spaces
+              and the HF Inference API. It follows a three-phase approach with LLM Judge scoring
+              based on UltraFeedback criteria.
+            </p>
+
+            <div className="grid md:grid-cols-3 gap-6">
+              {[
+                { title: 'Seed Generation', desc: 'Create initial Q&A pairs from any topic', icon: <Zap className="w-5 h-5" />, color: 'amber' },
+                { title: 'Distilabel Augmentation', desc: 'Generate with LLM Judge scoring', icon: <Cpu className="w-5 h-5" />, color: 'blue' },
+                { title: 'Quality Curation', desc: 'Filter for high-quality records only', icon: <Filter className="w-5 h-5" />, color: 'purple' },
+              ].map((item, i) => (
+                <div key={i} className="relative group">
+                  <div className={`absolute inset-0 bg-gradient-to-r from-${item.color}-500/20 to-${item.color}-600/20 rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity`}></div>
+                  <div className="relative bg-slate-800/50 border border-slate-700 rounded-2xl p-5 group-hover:border-slate-600 transition-colors">
+                    <div className={`inline-flex p-2 rounded-xl bg-${item.color}-500/20 text-${item.color}-400 mb-3`}>
+                      {item.icon}
                     </div>
-                    <h3 className="font-semibold text-sm">{phase.name}</h3>
-                  </button>
-                  {index < phases.length - 1 && (
-                    <ArrowRight className="w-6 h-6 text-gray-500 hidden md:block" />
-                  )}
-                </React.Fragment>
+                    <h3 className="font-semibold mb-1">{item.title}</h3>
+                    <p className="text-sm text-slate-400">{item.desc}</p>
+                  </div>
+                </div>
               ))}
             </div>
           </div>
-        </section>
-
-        {/* Phase Details */}
-        <section className="mb-12">
-          <div className="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden">
-            <div className={`p-6 bg-gradient-to-r ${phases[activePhase].color}`}>
-              <div className="flex items-center gap-3">
-                {phases[activePhase].icon}
-                <h2 className="text-xl font-bold">{phases[activePhase].name}</h2>
-              </div>
-              <p className="mt-2 opacity-90">{phases[activePhase].description}</p>
+        </div>
+      </section>
+
+      {/* Pipeline Architecture */}
+      <section id="pipeline" className="py-16 px-4 bg-slate-900/50">
+        <div className="max-w-6xl mx-auto">
+          <div className="flex items-center gap-3 mb-8">
+            <div className="p-2 bg-purple-500/20 rounded-xl">
+              <Layers className="w-5 h-5 text-purple-400" />
             </div>
+            <h2 className="text-2xl font-bold">Pipeline Architecture</h2>
+          </div>
 
-            <div className="p-6 space-y-6">
-              {/* Space URL */}
-              <div>
-                <div className="flex items-center gap-2 mb-2">
-                  <ExternalLink className="w-4 h-4 text-gray-400" />
-                  <span className="text-sm font-medium text-gray-400">HuggingFace Space</span>
-                </div>
-                <a
-                  href={`https://huggingface.co/spaces/${phases[activePhase].space}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-indigo-400 hover:text-indigo-300 text-sm font-mono"
+          {/* Phase Selector */}
+          <div className="flex flex-col lg:flex-row gap-8">
+            <div className="lg:w-1/3 space-y-3">
+              {phases.map((phase) => (
+                <button
+                  key={phase.id}
+                  onClick={() => setActivePhase(phase.id)}
+                  className={`w-full text-left p-4 rounded-xl border-2 transition-all ${
+                    activePhase === phase.id
+                      ? `border-${phase.color}-500 bg-gradient-to-r ${phase.bgGradient}`
+                      : 'border-slate-700 hover:border-slate-600 bg-slate-800/30'
+                  }`}
                 >
-                  {phases[activePhase].space}
-                </a>
-              </div>
-
-              {/* API Endpoint */}
-              <div>
-                <div className="flex items-center gap-2 mb-2">
-                  <Terminal className="w-4 h-4 text-gray-400" />
-                  <span className="text-sm font-medium text-gray-400">API Endpoint</span>
-                  <span className="px-2 py-0.5 bg-green-500/20 text-green-400 text-xs rounded">{phases[activePhase].method}</span>
-                </div>
-                <code className="block bg-gray-900 rounded-lg p-3 text-sm font-mono text-gray-300">
-                  https://{phases[activePhase].space}.hf.space{phases[activePhase].endpoint}
-                </code>
-              </div>
+                  <div className="flex items-center gap-3">
+                    <div className={`p-2 rounded-lg bg-gradient-to-r ${phase.gradient}`}>
+                      {phase.icon}
+                    </div>
+                    <div>
+                      <div className="text-xs text-slate-500 mb-0.5">{phase.shortName}</div>
+                      <div className="font-medium">{phase.name}</div>
+                    </div>
+                  </div>
+                </button>
+              ))}
+            </div>
 
-              {/* Request Example */}
-              <div>
-                <div className="flex items-center justify-between mb-2">
-                  <div className="flex items-center gap-2">
-                    <Code className="w-4 h-4 text-gray-400" />
-                    <span className="text-sm font-medium text-gray-400">Request Body</span>
+            {/* Phase Details */}
+            <div className="lg:w-2/3">
+              <div className="card overflow-hidden">
+                <div className={`p-6 bg-gradient-to-r ${phases[activePhase].gradient}`}>
+                  <div className="flex items-center gap-3 mb-2">
+                    {phases[activePhase].icon}
+                    <h3 className="text-xl font-bold">{phases[activePhase].name}</h3>
                   </div>
-                  <button
-                    onClick={() => copyToClipboard(phases[activePhase].requestExample, `req-${activePhase}`)}
-                    className="text-gray-400 hover:text-white"
-                  >
-                    {copiedCode === `req-${activePhase}` ? (
-                      <CheckCircle className="w-4 h-4 text-green-400" />
-                    ) : (
-                      <Copy className="w-4 h-4" />
-                    )}
-                  </button>
+                  <p className="text-white/80">{phases[activePhase].description}</p>
                 </div>
-                <pre className="bg-gray-900 rounded-lg p-4 text-sm font-mono text-gray-300 overflow-x-auto">
-                  {phases[activePhase].requestExample}
-                </pre>
-              </div>
 
-              {/* Response Example */}
-              <div>
-                <div className="flex items-center justify-between mb-2">
-                  <div className="flex items-center gap-2">
-                    <Code className="w-4 h-4 text-gray-400" />
-                    <span className="text-sm font-medium text-gray-400">Response Example</span>
+                <div className="p-6 space-y-6">
+                  {/* Features */}
+                  <div className="flex flex-wrap gap-2">
+                    {phases[activePhase].features.map((f, i) => (
+                      <span key={i} className="px-3 py-1 bg-slate-800 border border-slate-700 rounded-full text-xs">
+                        {f}
+                      </span>
+                    ))}
                   </div>
-                  <button
-                    onClick={() => copyToClipboard(phases[activePhase].responseExample, `res-${activePhase}`)}
-                    className="text-gray-400 hover:text-white"
-                  >
-                    {copiedCode === `res-${activePhase}` ? (
-                      <CheckCircle className="w-4 h-4 text-green-400" />
-                    ) : (
-                      <Copy className="w-4 h-4" />
-                    )}
-                  </button>
-                </div>
-                <pre className="bg-gray-900 rounded-lg p-4 text-sm font-mono text-gray-300 overflow-x-auto">
-                  {phases[activePhase].responseExample}
-                </pre>
-              </div>
 
-              {/* cURL Command */}
-              <div>
-                <div className="flex items-center justify-between mb-2">
+                  {/* Space Link */}
                   <div className="flex items-center gap-2">
-                    <Play className="w-4 h-4 text-gray-400" />
-                    <span className="text-sm font-medium text-gray-400">cURL Command</span>
+                    <ExternalLink className="w-4 h-4 text-slate-500" />
+                    <a
+                      href={`https://huggingface.co/spaces/${phases[activePhase].space}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-sm text-indigo-400 hover:text-indigo-300 font-mono"
+                    >
+                      {phases[activePhase].space}
+                    </a>
                   </div>
-                  <button
-                    onClick={() => copyToClipboard(curlExamples[activePhase], `curl-${activePhase}`)}
-                    className="text-gray-400 hover:text-white"
-                  >
-                    {copiedCode === `curl-${activePhase}` ? (
-                      <CheckCircle className="w-4 h-4 text-green-400" />
-                    ) : (
-                      <Copy className="w-4 h-4" />
-                    )}
-                  </button>
-                </div>
-                <pre className="bg-gray-900 rounded-lg p-4 text-sm font-mono text-gray-300 overflow-x-auto">
-                  {curlExamples[activePhase]}
-                </pre>
-              </div>
-            </div>
-          </div>
-        </section>
 
-        {/* Configuration */}
-        <section className="mb-12">
-          <div className="flex items-center gap-2 mb-4">
-            <Settings className="w-5 h-5 text-indigo-400" />
-            <h2 className="text-xl font-semibold">Configuration</h2>
-          </div>
-          <div className="bg-gray-800 rounded-xl border border-gray-700">
-            <button
-              onClick={() => toggleSection('models')}
-              className="w-full p-4 flex items-center justify-between hover:bg-gray-700/50"
-            >
-              <span className="font-medium">Supported Models</span>
-              {expandedSections['models'] ? <ChevronUp /> : <ChevronDown />}
-            </button>
-            {expandedSections['models'] && (
-              <div className="p-4 border-t border-gray-700">
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  {/* Endpoint */}
                   <div>
-                    <h4 className="font-medium mb-2 text-indigo-400">Generator Models</h4>
-                    <ul className="space-y-2 text-sm">
-                      <li className="flex items-center gap-2">
-                        <CheckCircle className="w-4 h-4 text-green-400" />
-                        <code>Qwen/Qwen2.5-7B-Instruct</code> <span className="text-gray-500">(default)</span>
-                      </li>
-                      <li className="flex items-center gap-2">
-                        <CheckCircle className="w-4 h-4 text-green-400" />
-                        <code>Qwen/Qwen2.5-72B-Instruct</code>
-                      </li>
-                      <li className="flex items-center gap-2">
-                        <CheckCircle className="w-4 h-4 text-green-400" />
-                        <code>openai/gpt-4o-mini</code>
-                      </li>
-                    </ul>
+                    <div className="flex items-center gap-2 mb-2">
+                      <Terminal className="w-4 h-4 text-slate-500" />
+                      <span className="text-xs text-slate-500 uppercase tracking-wider">Endpoint</span>
+                      <span className="px-2 py-0.5 bg-emerald-500/20 text-emerald-400 text-xs font-medium rounded">
+                        {phases[activePhase].method}
+                      </span>
+                    </div>
+                    <code className="code-block text-slate-300 text-xs sm:text-sm">
+                      https://{phases[activePhase].space}.hf.space{phases[activePhase].endpoint}
+                    </code>
                   </div>
+
+                  {/* Parameters */}
                   <div>
-                    <h4 className="font-medium mb-2 text-purple-400">Judge Models</h4>
-                    <ul className="space-y-2 text-sm">
-                      <li className="flex items-center gap-2">
-                        <CheckCircle className="w-4 h-4 text-green-400" />
-                        <code>Qwen/Qwen2.5-7B-Instruct</code> <span className="text-gray-500">(default)</span>
-                      </li>
-                    </ul>
+                    <h4 className="text-xs text-slate-500 uppercase tracking-wider mb-3">Parameters</h4>
+                    <div className="space-y-2">
+                      {phases[activePhase].requestParams.map((param, i) => (
+                        <div key={i} className="flex flex-wrap items-center gap-2 text-sm">
+                          <code className="px-2 py-1 bg-slate-800 rounded text-indigo-300 font-mono">{param.name}</code>
+                          <span className="text-slate-500 text-xs">{param.type}</span>
+                          <span className="text-slate-400">{param.desc}</span>
+                        </div>
+                      ))}
+                    </div>
                   </div>
                 </div>
               </div>
-            )}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* API Examples Section */}
+      <section id="api" className="py-16 px-4">
+        <div className="max-w-6xl mx-auto">
+          <div className="flex items-center gap-3 mb-8">
+            <div className="p-2 bg-emerald-500/20 rounded-xl">
+              <Code className="w-5 h-5 text-emerald-400" />
+            </div>
+            <h2 className="text-2xl font-bold">API Examples</h2>
+          </div>
 
-            <button
-              onClick={() => toggleSection('providers')}
-              className="w-full p-4 flex items-center justify-between hover:bg-gray-700/50 border-t border-gray-700"
-            >
-              <span className="font-medium">Providers</span>
-              {expandedSections['providers'] ? <ChevronUp /> : <ChevronDown />}
-            </button>
-            {expandedSections['providers'] && (
-              <div className="p-4 border-t border-gray-700">
-                <ul className="space-y-2 text-sm">
-                  <li className="flex items-center gap-2">
-                    <CheckCircle className="w-4 h-4 text-green-400" />
-                    <code>together</code> <span className="text-gray-500">(default, recommended)</span>
-                  </li>
-                  <li className="flex items-center gap-2">
-                    <CheckCircle className="w-4 h-4 text-green-400" />
-                    <code>cerebras</code>
-                  </li>
-                  <li className="flex items-center gap-2">
-                    <CheckCircle className="w-4 h-4 text-green-400" />
-                    <code>hf</code> <span className="text-gray-500">(serverless)</span>
-                  </li>
-                </ul>
-              </div>
-            )}
+          {/* Phase Tabs */}
+          <div className="flex gap-2 mb-6 overflow-x-auto pb-2">
+            {phases.map((phase) => (
+              <button
+                key={phase.id}
+                onClick={() => setActivePhase(phase.id)}
+                className={`flex items-center gap-2 px-4 py-2 rounded-lg font-medium text-sm whitespace-nowrap transition-colors ${
+                  activePhase === phase.id
+                    ? `bg-gradient-to-r ${phase.gradient} text-white`
+                    : 'bg-slate-800 text-slate-400 hover:text-white'
+                }`}
+              >
+                {phase.icon}
+                {phase.shortName}
+              </button>
+            ))}
+          </div>
 
-            <button
-              onClick={() => toggleSection('env')}
-              className="w-full p-4 flex items-center justify-between hover:bg-gray-700/50 border-t border-gray-700"
-            >
-              <span className="font-medium">Environment Variables</span>
-              {expandedSections['env'] ? <ChevronUp /> : <ChevronDown />}
-            </button>
-            {expandedSections['env'] && (
-              <div className="p-4 border-t border-gray-700">
-                <pre className="bg-gray-900 rounded-lg p-4 text-sm font-mono text-gray-300">
-{`# Required for all spaces
-HF_TOKEN=your_huggingface_token_here
+          <div className="grid lg:grid-cols-2 gap-6">
+            {/* Request */}
+            <div className="card overflow-hidden">
+              <div className="flex items-center justify-between px-4 py-3 bg-slate-800/50 border-b border-slate-700">
+                <span className="text-sm font-medium text-slate-300">Request Body</span>
+                <button
+                  onClick={() => copyToClipboard(phases[activePhase].requestExample, 'req')}
+                  className="text-slate-400 hover:text-white transition-colors"
+                >
+                  {copiedCode === 'req' ? <CheckCircle className="w-4 h-4 text-emerald-400" /> : <Copy className="w-4 h-4" />}
+                </button>
+              </div>
+              <pre className="p-4 text-sm font-mono text-slate-300 overflow-x-auto scrollbar-thin">
+                {phases[activePhase].requestExample}
+              </pre>
+            </div>
 
-# Optional
-MAX_RECORDS=1000
-DEFAULT_MODEL=Qwen/Qwen2.5-7B-Instruct
-DEFAULT_PROVIDER=together`}
-                </pre>
+            {/* Response */}
+            <div className="card overflow-hidden">
+              <div className="flex items-center justify-between px-4 py-3 bg-slate-800/50 border-b border-slate-700">
+                <span className="text-sm font-medium text-slate-300">Response</span>
+                <button
+                  onClick={() => copyToClipboard(phases[activePhase].responseExample, 'res')}
+                  className="text-slate-400 hover:text-white transition-colors"
+                >
+                  {copiedCode === 'res' ? <CheckCircle className="w-4 h-4 text-emerald-400" /> : <Copy className="w-4 h-4" />}
+                </button>
               </div>
-            )}
+              <pre className="p-4 text-sm font-mono text-slate-300 overflow-x-auto scrollbar-thin">
+                {phases[activePhase].responseExample}
+              </pre>
+            </div>
           </div>
-        </section>
 
-        {/* Quick Start */}
-        <section className="mb-12">
-          <div className="flex items-center gap-2 mb-4">
-            <Zap className="w-5 h-5 text-indigo-400" />
-            <h2 className="text-xl font-semibold">Quick Start</h2>
+          {/* cURL */}
+          <div className="card overflow-hidden mt-6">
+            <div className="flex items-center justify-between px-4 py-3 bg-slate-800/50 border-b border-slate-700">
+              <div className="flex items-center gap-2">
+                <Terminal className="w-4 h-4 text-slate-500" />
+                <span className="text-sm font-medium text-slate-300">cURL Command</span>
+              </div>
+              <button
+                onClick={() => copyToClipboard(curlExample(phases[activePhase]), 'curl')}
+                className="text-slate-400 hover:text-white transition-colors"
+              >
+                {copiedCode === 'curl' ? <CheckCircle className="w-4 h-4 text-emerald-400" /> : <Copy className="w-4 h-4" />}
+              </button>
+            </div>
+            <pre className="p-4 text-sm font-mono text-slate-300 overflow-x-auto scrollbar-thin">
+              {curlExample(phases[activePhase])}
+            </pre>
           </div>
-          <div className="bg-gray-800 rounded-xl p-6 border border-gray-700">
-            <ol className="space-y-4">
-              <li className="flex gap-4">
-                <span className="flex-shrink-0 w-8 h-8 rounded-full bg-indigo-500/20 text-indigo-400 flex items-center justify-center font-bold">1</span>
-                <div>
-                  <h4 className="font-medium">Generate Seeds (Phase 0)</h4>
-                  <p className="text-sm text-gray-400 mt-1">Create initial Q&A pairs from a topic</p>
-                </div>
-              </li>
-              <li className="flex gap-4">
-                <span className="flex-shrink-0 w-8 h-8 rounded-full bg-blue-500/20 text-blue-400 flex items-center justify-center font-bold">2</span>
-                <div>
-                  <h4 className="font-medium">Generate Synthetic Data (Phase 1)</h4>
-                  <p className="text-sm text-gray-400 mt-1">Augment with LLM Judge scoring using UltraFeedback criteria</p>
+        </div>
+      </section>
+
+      {/* Quick Start */}
+      <section id="quickstart" className="py-16 px-4 bg-slate-900/50">
+        <div className="max-w-6xl mx-auto">
+          <div className="flex items-center gap-3 mb-8">
+            <div className="p-2 bg-amber-500/20 rounded-xl">
+              <Rocket className="w-5 h-5 text-amber-400" />
+            </div>
+            <h2 className="text-2xl font-bold">Quick Start</h2>
+          </div>
+
+          <div className="grid lg:grid-cols-3 gap-6">
+            {[
+              { step: 1, title: 'Generate Seeds', desc: 'Create initial Q&A pairs from your topic', color: 'amber', phase: 'Phase 0' },
+              { step: 2, title: 'Generate Data', desc: 'Augment with LLM Judge quality scoring', color: 'blue', phase: 'Phase 1' },
+              { step: 3, title: 'Curate Dataset', desc: 'Filter high-quality records (score >= 7)', color: 'purple', phase: 'Phase 2' },
+            ].map((item) => (
+              <div key={item.step} className="card card-hover p-6 relative">
+                <div className={`absolute -top-3 -left-3 w-8 h-8 rounded-full bg-gradient-to-r ${
+                  item.color === 'amber' ? 'from-amber-500 to-orange-500' :
+                  item.color === 'blue' ? 'from-blue-500 to-cyan-500' :
+                  'from-purple-500 to-pink-500'
+                } flex items-center justify-center font-bold text-sm`}>
+                  {item.step}
                 </div>
-              </li>
-              <li className="flex gap-4">
-                <span className="flex-shrink-0 w-8 h-8 rounded-full bg-purple-500/20 text-purple-400 flex items-center justify-center font-bold">3</span>
-                <div>
-                  <h4 className="font-medium">Curate Dataset (Phase 2)</h4>
-                  <p className="text-sm text-gray-400 mt-1">Filter for high-quality records (score >= 7)</p>
+                <div className="pt-2">
+                  <span className={`text-xs font-medium ${
+                    item.color === 'amber' ? 'text-amber-400' :
+                    item.color === 'blue' ? 'text-blue-400' :
+                    'text-purple-400'
+                  }`}>{item.phase}</span>
+                  <h3 className="font-semibold text-lg mt-1">{item.title}</h3>
+                  <p className="text-sm text-slate-400 mt-2">{item.desc}</p>
                 </div>
-              </li>
-            </ol>
+              </div>
+            ))}
           </div>
-        </section>
-
-        {/* Full Pipeline Script */}
-        <section className="mb-12">
-          <div className="flex items-center gap-2 mb-4">
-            <GitBranch className="w-5 h-5 text-indigo-400" />
-            <h2 className="text-xl font-semibold">Full Pipeline Script</h2>
+        </div>
+      </section>
+
+      {/* Full Script */}
+      <section className="py-16 px-4">
+        <div className="max-w-6xl mx-auto">
+          <div className="flex items-center gap-3 mb-8">
+            <div className="p-2 bg-indigo-500/20 rounded-xl">
+              <GitBranch className="w-5 h-5 text-indigo-400" />
+            </div>
+            <h2 className="text-2xl font-bold">Full Pipeline Script</h2>
           </div>
-          <div className="bg-gray-800 rounded-xl border border-gray-700">
-            <div className="flex items-center justify-between p-4 border-b border-gray-700">
-              <span className="font-medium">Python Script</span>
+
+          <div className="card overflow-hidden">
+            <div className="flex items-center justify-between px-4 py-3 bg-slate-800/50 border-b border-slate-700">
+              <span className="text-sm font-medium text-slate-300">run_pipeline.py</span>
               <button
-                onClick={() => copyToClipboard(fullPipelineScript, 'full-script')}
-                className="text-gray-400 hover:text-white"
+                onClick={() => copyToClipboard(fullPipelineScript, 'script')}
+                className="text-slate-400 hover:text-white transition-colors"
               >
-                {copiedCode === 'full-script' ? (
-                  <CheckCircle className="w-4 h-4 text-green-400" />
-                ) : (
-                  <Copy className="w-4 h-4" />
-                )}
+                {copiedCode === 'script' ? <CheckCircle className="w-4 h-4 text-emerald-400" /> : <Copy className="w-4 h-4" />}
               </button>
             </div>
-            <pre className="p-4 text-sm font-mono text-gray-300 overflow-x-auto">
+            <pre className="p-4 text-sm font-mono text-slate-300 overflow-x-auto scrollbar-thin max-h-96">
 {fullPipelineScript}
             </pre>
           </div>
-        </section>
-
-        {/* LLM Judge Criteria */}
-        <section className="mb-12">
-          <div className="flex items-center gap-2 mb-4">
-            <AlertCircle className="w-5 h-5 text-indigo-400" />
-            <h2 className="text-xl font-semibold">LLM Judge Scoring Criteria (UltraFeedback)</h2>
+        </div>
+      </section>
+
+      {/* LLM Judge Criteria */}
+      <section className="py-16 px-4 bg-slate-900/50">
+        <div className="max-w-6xl mx-auto">
+          <div className="flex items-center gap-3 mb-8">
+            <div className="p-2 bg-pink-500/20 rounded-xl">
+              <Star className="w-5 h-5 text-pink-400" />
+            </div>
+            <h2 className="text-2xl font-bold">LLM Judge Criteria (UltraFeedback)</h2>
           </div>
-          <div className="bg-gray-800 rounded-xl p-6 border border-gray-700">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              <div>
-                <h4 className="font-medium text-blue-400 mb-2">Instruction-Following</h4>
-                <p className="text-sm text-gray-400">Does the answer directly address the question?</p>
-              </div>
-              <div>
-                <h4 className="font-medium text-green-400 mb-2">Truthfulness</h4>
-                <p className="text-sm text-gray-400">Is the information accurate and factually correct?</p>
-              </div>
-              <div>
-                <h4 className="font-medium text-yellow-400 mb-2">Honesty</h4>
-                <p className="text-sm text-gray-400">Does it avoid hallucination and acknowledge uncertainty?</p>
-              </div>
-              <div>
-                <h4 className="font-medium text-purple-400 mb-2">Helpfulness</h4>
-                <p className="text-sm text-gray-400">Is the answer useful for learning?</p>
+
+          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
+            {[
+              { title: 'Instruction-Following', desc: 'Does the answer directly address the question?', color: 'blue' },
+              { title: 'Truthfulness', desc: 'Is the information accurate and factually correct?', color: 'green' },
+              { title: 'Honesty', desc: 'Does it avoid hallucination and acknowledge uncertainty?', color: 'yellow' },
+              { title: 'Helpfulness', desc: 'Is the answer useful for learning?', color: 'purple' },
+            ].map((item, i) => (
+              <div key={i} className="card card-hover p-5">
+                <div className={`w-10 h-1 rounded-full mb-4 bg-${item.color}-500`}></div>
+                <h3 className="font-semibold mb-2">{item.title}</h3>
+                <p className="text-sm text-slate-400">{item.desc}</p>
               </div>
+            ))}
+          </div>
+
+          <div className="card mt-8 p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
+            <div>
+              <h3 className="font-semibold">Score Range</h3>
+              <p className="text-sm text-slate-400">1-10 scale, recommended minimum: 7 for curated datasets</p>
+            </div>
+            <div className="flex gap-2">
+              {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((n) => (
+                <div
+                  key={n}
+                  className={`w-8 h-8 rounded-lg flex items-center justify-center text-xs font-bold ${
+                    n >= 7 ? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30' : 'bg-slate-800 text-slate-500'
+                  }`}
+                >
+                  {n}
+                </div>
+              ))}
             </div>
-            <div className="mt-6 p-4 bg-gray-700/50 rounded-lg">
-              <p className="text-sm text-gray-300">
-                <strong>Score Range:</strong> 1-10 (recommended minimum: 7 for curated datasets)
-              </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Configuration */}
+      <section className="py-16 px-4">
+        <div className="max-w-6xl mx-auto">
+          <div className="flex items-center gap-3 mb-8">
+            <div className="p-2 bg-slate-500/20 rounded-xl">
+              <Settings className="w-5 h-5 text-slate-400" />
             </div>
+            <h2 className="text-2xl font-bold">Configuration</h2>
           </div>
-        </section>
-
-        {/* Footer */}
-        <footer className="text-center text-gray-500 text-sm py-8 border-t border-gray-800">
-          <p>Synthetic Data Pipeline Documentation</p>
-          <p className="mt-1">Powered by HuggingFace Spaces + HF Inference API</p>
-        </footer>
-      </main>
+
+          <div className="card divide-y divide-slate-800">
+            {/* Models */}
+            <div>
+              <button
+                onClick={() => toggleSection('models')}
+                className="w-full flex items-center justify-between p-5 hover:bg-slate-800/30 transition-colors"
+              >
+                <span className="font-medium">Supported Models</span>
+                {expandedSections['models'] ? <ChevronUp className="w-5 h-5 text-slate-400" /> : <ChevronDown className="w-5 h-5 text-slate-400" />}
+              </button>
+              {expandedSections['models'] && (
+                <div className="px-5 pb-5">
+                  <div className="grid sm:grid-cols-2 gap-6">
+                    <div>
+                      <h4 className="text-sm font-medium text-indigo-400 mb-3">Generator Models</h4>
+                      <div className="space-y-2">
+                        {[
+                          { name: 'Qwen/Qwen2.5-7B-Instruct', default: true },
+                          { name: 'Qwen/Qwen2.5-72B-Instruct', default: false },
+                          { name: 'openai/gpt-4o-mini', default: false },
+                        ].map((m, i) => (
+                          <div key={i} className="flex items-center gap-2 text-sm">
+                            <CheckCircle className="w-4 h-4 text-emerald-400 flex-shrink-0" />
+                            <code className="font-mono text-slate-300">{m.name}</code>
+                            {m.default && <span className="text-xs text-slate-500">(default)</span>}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                    <div>
+                      <h4 className="text-sm font-medium text-purple-400 mb-3">Judge Models</h4>
+                      <div className="space-y-2">
+                        <div className="flex items-center gap-2 text-sm">
+                          <CheckCircle className="w-4 h-4 text-emerald-400" />
+                          <code className="font-mono text-slate-300">Qwen/Qwen2.5-7B-Instruct</code>
+                          <span className="text-xs text-slate-500">(default)</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Providers */}
+            <div>
+              <button
+                onClick={() => toggleSection('providers')}
+                className="w-full flex items-center justify-between p-5 hover:bg-slate-800/30 transition-colors"
+              >
+                <span className="font-medium">Providers</span>
+                {expandedSections['providers'] ? <ChevronUp className="w-5 h-5 text-slate-400" /> : <ChevronDown className="w-5 h-5 text-slate-400" />}
+              </button>
+              {expandedSections['providers'] && (
+                <div className="px-5 pb-5">
+                  <div className="space-y-2">
+                    {[
+                      { name: 'together', desc: '(default, recommended)' },
+                      { name: 'cerebras', desc: '' },
+                      { name: 'hf', desc: '(serverless)' },
+                    ].map((p, i) => (
+                      <div key={i} className="flex items-center gap-2 text-sm">
+                        <CheckCircle className="w-4 h-4 text-emerald-400" />
+                        <code className="font-mono text-slate-300">{p.name}</code>
+                        {p.desc && <span className="text-xs text-slate-500">{p.desc}</span>}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Environment */}
+            <div>
+              <button
+                onClick={() => toggleSection('env')}
+                className="w-full flex items-center justify-between p-5 hover:bg-slate-800/30 transition-colors"
+              >
+                <span className="font-medium">Environment Variables</span>
+                {expandedSections['env'] ? <ChevronUp className="w-5 h-5 text-slate-400" /> : <ChevronDown className="w-5 h-5 text-slate-400" />}
+              </button>
+              {expandedSections['env'] && (
+                <div className="px-5 pb-5">
+                  <pre className="code-block text-sm">
+{`# Required for all spaces
+HF_TOKEN=your_huggingface_token_here
+
+# Optional
+MAX_RECORDS=1000
+DEFAULT_MODEL=Qwen/Qwen2.5-7B-Instruct
+DEFAULT_PROVIDER=together`}
+                  </pre>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="py-12 px-4 border-t border-slate-800">
+        <div className="max-w-6xl mx-auto text-center">
+          <div className="flex items-center justify-center gap-2 mb-4">
+            <div className="p-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-xl">
+              <Database className="w-4 h-4" />
+            </div>
+            <span className="font-semibold">Synthetic Data Pipeline</span>
+          </div>
+          <p className="text-sm text-slate-500 mb-4">
+            Powered by HuggingFace Spaces + HF Inference API
+          </p>
+          <div className="flex items-center justify-center gap-4">
+            <a
+              href="https://huggingface.co/mindchain"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-slate-400 hover:text-white transition-colors"
+            >
+              HuggingFace
+            </a>
+            <span className="text-slate-700">|</span>
+            <a
+              href="https://huggingface.co/collections/mindchain/synthetic-data-pipeline"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-slate-400 hover:text-white transition-colors"
+            >
+              Collection
+            </a>
+          </div>
+        </div>
+      </footer>
     </div>
   )
 }
 
 const fullPipelineScript = `#!/usr/bin/env python3
-"""
-Full Synthetic Data Pipeline Script
-Runs all three phases sequentially
-"""
+"""Full Synthetic Data Pipeline - Run all three phases"""
 
 import requests
 import json
 
-# Base URLs for HF Spaces
+# HF Spaces URLs
 PHASE0_URL = "https://mindchain-hf-space-nemo-seed-generator-huggingface-inference.hf.space"
 PHASE1_URL = "https://mindchain-hf-space-distilabel-generator-huggingface-inference.hf.space"
 PHASE2_URL = "https://mindchain-hf-space-argilla-curator-huggingface-inference.hf.space"
 
-def phase0_generate_seeds(topic, num_seeds=10):
+def phase0_generate_seeds(topic: str, num_seeds: int = 10):
     """Phase 0: Generate seed Q&A pairs"""
+    print(f"\\n=== Phase 0: Generating {num_seeds} seeds for '{topic}' ===")
     response = requests.post(
         f"{PHASE0_URL}/generate",
         json={
@@ -552,10 +816,13 @@ def phase0_generate_seeds(topic, num_seeds=10):
             "provider": "together"
         }
     )
-    return response.json()
+    result = response.json()
+    print(f"Generated {result.get('count', 0)} seeds")
+    return result
 
-def phase1_generate_synthetic(seed_dataset, num_records=100):
+def phase1_generate_synthetic(seed_dataset: str, num_records: int = 100):
     """Phase 1: Generate synthetic data with Judge scoring"""
+    print(f"\\n=== Phase 1: Generating {num_records} records ===")
     response = requests.post(
         f"{PHASE1_URL}/generate",
         json={
@@ -569,10 +836,14 @@ def phase1_generate_synthetic(seed_dataset, num_records=100):
             "min_score": 5
         }
     )
-    return response.json()
+    result = response.json()
+    stats = result.get('stats', {})
+    print(f"Generated {stats.get('total', 0)} records, avg score: {stats.get('avg_score', 0):.1f}")
+    return result
 
-def phase2_curate(raw_dataset, min_score=7):
+def phase2_curate(raw_dataset: str, min_score: int = 7):
     """Phase 2: Curate final high-quality dataset"""
+    print(f"\\n=== Phase 2: Curating with min_score={min_score} ===")
     response = requests.post(
         f"{PHASE2_URL}/curate",
         json={
@@ -582,20 +853,17 @@ def phase2_curate(raw_dataset, min_score=7):
             "min_score": min_score
         }
     )
-    return response.json()
+    result = response.json()
+    print(f"Curated {result.get('curated_count', 0)}/{result.get('total_count', 0)} records")
+    return result
 
 if __name__ == "__main__":
-    # Run the complete pipeline
-    print("=== Phase 0: Generating Seeds ===")
+    # Run complete pipeline
     seeds = phase0_generate_seeds("Python programming basics", num_seeds=10)
-    print(f"Generated {seeds.get('count', 0)} seeds")
-
-    print("\\n=== Phase 1: Generating Synthetic Data ===")
     synthetic = phase1_generate_synthetic("mindchain/synthetic-seeds", num_records=100)
-    print(f"Generated {synthetic.get('stats', {}).get('total', 0)} records")
-
-    print("\\n=== Phase 2: Curating Dataset ===")
     curated = phase2_curate("mindchain/synthetic-distilabel-raw", min_score=7)
-    print(f"Curated {curated.get('curated_count', 0)} high-quality records")`
+
+    print("\\n=== Pipeline Complete! ===")
+    print(f"Final curated dataset: {curated.get('curated_count', 0)} high-quality records")`
 
 export default App