Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Agents | CosmicCanvas Pro</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .cosmic-gradient { | |
| background: linear-gradient(135deg, #0ea5e9 0%, #d946ef 50%, #7c3aed 100%); | |
| } | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .nebula-text { | |
| background: linear-gradient(45deg, #0ea5e9, #d946ef, #7c3aed); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .agent-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(14, 165, 233, 0.3); | |
| } | |
| .pipeline-step { | |
| transition: all 0.3s ease; | |
| } | |
| .pipeline-step:hover { | |
| transform: scale(1.05); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-black text-white"> | |
| <!-- Navigation --> | |
| <nav class="glass-effect rounded-2xl m-4"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 bg-gradient-to-r from-cosmic-500 to-nebula-500 rounded-full"></div> | |
| <span class="text-xl font-bold nebula-text">CosmicCanvas Pro</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-6"> | |
| <a href="index.html" class="hover:text-cosmic-300 transition-colors">Home</a> | |
| <a href="create.html" class="hover:text-nebula-300 transition-colors">Create</a> | |
| <a href="gallery.html" class="hover:text-cosmic-300 transition-colors">Gallery</a> | |
| <a href="agents.html" class="text-nebula-300">AI Agents</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="glass-effect hover:bg-white/20 px-4 py-2 rounded-lg transition-colors"> | |
| <i data-feather="user"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Agent System Overview --> | |
| <section class="container mx-auto px-4 py-12"> | |
| <div class="text-center mb-16"> | |
| <h1 class="text-5xl md:text-6xl font-bold nebula-text mb-4">Multi-Agent System</h1> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| Our nano-banana powered AI agents work in harmony to deliver cosmic-level art generation | |
| </p> | |
| </div> | |
| <!-- Agent Cards --> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16"> | |
| <!-- Data Agent --> | |
| <div class="agent-card glass-effect rounded-2xl p-6 transition-transform"> | |
| <div class="cosmic-gradient w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="database" class="text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Data Acquisition Agent</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Collects and curates high-quality cosmic art datasets from multiple sources | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="text-xs px-2 py-1 rounded-full bg-cosmic-500/20 text-cosmic-300">Scraping</span> | |
| <span class="text-xs px-2 py-1 rounded-full bg-nebula-500/20 text-nebula-300">Cleaning</span> | |
| <span class="text-xs px-2 py-1 rounded-full bg-cosmic-500/20 text-cosmic-300">APIs</span> | |
| </div> | |
| </div> | |
| <!-- EDA Agent --> | |
| <div class="agent-card glass-effect rounded-2xl p-6 transition-transform"> | |
| <div class="cosmic-gradient w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="bar-chart-2" class="text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">EDA Agent</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Performs exploratory data analysis and visualizes cosmic art patterns | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="text-xs px-2 py-1 rounded-full bg-nebula-500/20 text-nebula-300">Statistics</span> | |
| <span class="text-xs px-2 py-1 rounded-full bg-cosmic-500/20 text-cosmic-300">Visualization</span> | |
| <span class="text-xs px-2 py-1 rounded-full bg-nebula-500/20 text-nebula-300">Patterns</span> | |
| </div> | |
| </div> | |
| <!-- Model Agent --> | |
| <div class="agent-card glass-effect rounded-2xl p-6 transition-transform"> | |
| <div class="cosmic-gradient w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="cpu" class="text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Model Pipeline Agent</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Implements and optimizes the cosmic art generation model pipeline | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="text-xs px-2 py-1 rounded-full bg-cosmic-500/20 text-cosmic-300">Training</span> | |
| <span class="text-xs px-2 py-1 rounded-full bg-nebula-500/20 text-nebula-300">Fine-tuning</span> | |
| <span class="text-xs px-2 py-1 rounded-full bg-cosmic-500/20 text-cosmic-300">Optimization</span> | |
| </div> | |
| </div> | |
| <!-- Eval Agent --> | |
| <div class="agent-card glass-effect rounded-2xl p-6 transition-transform"> | |
| <div class="cosmic-gradient w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="award" class="text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Evaluation Agent</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Conducts comparative analysis and evaluates model performance | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="text-xs px-2 py-1 rounded-full bg-nebula-500/20 text-nebula-300">Metrics</span> | |
| <span class="text-xs px-2 py-1 rounded-full bg-cosmic-500/20 text-cosmic-300">Benchmarking</span> | |
| <span class="text-xs px-2 py-1 rounded-full bg-nebula-500/20 text-nebula-300">Analysis</span> | |
| </div> | |
| </div> | |
| <!-- API Agent --> | |
| <div class="agent-card glass-effect rounded-2xl p-6 transition-transform"> | |
| <div class="cosmic-gradient w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="code" class="text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">API Agent</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Manages the interface between our cosmic models and frontend | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="text-xs px-2 py-1 rounded-full bg-cosmic-500/20 text-cosmic-300">FastAPI</span> | |
| <span class="text-xs px-2 py-1 rounded-full bg-nebula-500/20 text-nebula-300">Endpoints</span> | |
| <span class="text-xs px-2 py-1 rounded-full bg-cosmic-500/20 text-cosmic-300">Integration</span> | |
| </div> | |
| </div> | |
| <!-- Orchestrator --> | |
| <div class="agent-card glass-effect rounded-2xl p-6 transition-transform"> | |
| <div class="cosmic-gradient w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="command" class="text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Orchestrator Agent</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Coordinates all agents and manages the cosmic workflow | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="text-xs px-2 py-1 rounded-full bg-nebula-500/20 text-nebula-300">Coordination</span> | |
| <span class="text-xs px-2 py-1 rounded-full bg-cosmic-500/20 text-cosmic-300">Workflow</span> | |
| <span class="text-xs px-2 py-1 rounded-full bg-nebula-500/20 text-nebula-300">Management</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pipeline Visualization --> | |
| <div class="glass-effect rounded-2xl p-8 mb-16"> | |
| <h2 class="text-3xl font-bold mb-8 text-center nebula-text">Cosmic Pipeline Flow</h2> | |
| <div class="flex flex-col md:flex-row justify-center items-center md:items-stretch space-y-8 md:space-y-0 space-x-0 md:space-x-4 lg:space-x-8"> | |
| <!-- Pipeline Step 1 --> | |
| <div class="pipeline-step flex flex-col items-center"> | |
| <div class="cosmic-gradient w-16 h-16 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="download" class="text-white text-xl"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">Data Acquisition</h3> | |
| <p class="text-sm text-gray-400 text-center">Collecting cosmic art datasets from multiple sources</p> | |
| <div class="h-8 w-px bg-gradient-to-b from-cosmic-500 to-nebula-500 my-4 md:h-px md:w-16 lg:w-24 md:mt-6"></div> | |
| </div> | |
| <!-- Pipeline Step 2 --> | |
| <div class="pipeline-step flex flex-col items-center"> | |
| <div class="cosmic-gradient w-16 h-16 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="search" class="text-white text-xl"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">EDA & Analysis</h3> | |
| <p class="text-sm text-gray-400 text-center">Exploring patterns in cosmic visual styles</p> | |
| <div class="h-8 w-px bg-gradient-to-b from-cosmic-500 to-nebula-500 my-4 md:h-px md:w-16 lg:w-24 md:mt-6"></div> | |
| </div> | |
| <!-- Pipeline Step 3 --> | |
| <div class="pipeline-step flex flex-col items-center"> | |
| <div class="cosmic-gradient w-16 h-16 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="cpu" class="text-white text-xl"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">Model Training</h3> | |
| <p class="text-sm text-gray-400 text-center">Building the cosmic generation pipeline</p> | |
| <div class="h-8 w-px bg-gradient-to-b from-cosmic-500 to-nebula-500 my-4 md:h-px md:w-16 lg:w-24 md:mt-6"></div> | |
| </div> | |
| <!-- Pipeline Step 4 --> | |
| <div class="pipeline-step flex flex-col items-center"> | |
| <div class="cosmic-gradient w-16 h-16 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="bar-chart-2" class="text-white text-xl"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">Evaluation</h3> | |
| <p class="text-sm text-gray-400 text-center">Comparing model performance metrics</p> | |
| <div class="h-8 w-px bg-gradient-to-b from-cosmic-500 to-nebula-500 my-4 md:h-px md:w-16 lg:w-24 md:mt-6"></div> | |
| </div> | |
| <!-- Pipeline Step 5 --> | |
| <div class="pipeline-step flex flex-col items-center"> | |
| <div class="cosmic-gradient w-16 h-16 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="zap" class="text-white text-xl"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">Deployment</h3> | |
| <p class="text-sm text-gray-400 text-center">Serving cosmic art to users</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Comparative Analysis --> | |
| <div class="glass-effect rounded-2xl p-8"> | |
| <h2 class="text-3xl font-bold mb-8 text-center nebula-text">Comparative Evaluation</h2> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="border-b border-gray-700"> | |
| <th class="text-left py-4 px-4">Model</th> | |
| <th class="text-right py-4 px-4">FID Score ↓</th> | |
| <th class="text-right py-4 px-4">CLIP Score ↑</th> | |
| <th class="text-right py-4 px-4">Generation Time</th> | |
| <th class="text-right py-4 px-4">User Rating</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b border-gray-800 hover:bg-white/5"> | |
| <td class="py-4 px-4">CosmicV1</td> | |
| <td class="text-right py-4 px-4">18.7</td> | |
| <td class="text-right py-4 px-4">0.82</td> | |
| <td class="text-right py-4 px-4">2.1s</td> | |
| <td class="text-right py-4 px-4">4.2/5</td> | |
| </tr> | |
| <tr class="border-b border-gray-800 hover:bg-white/5"> | |
| <td class="py-4 px-4">CosmicV2 (Current)</td> | |
| <td class="text-right py-4 px-4 text-cosmic-300">15.2</td> | |
| <td class="text-right py-4 px-4 text-cosmic-300">0.87</td> | |
| <td class="text-right py-4 px-4 text-cosmic-300">1.8s</td> | |
| <td class="text-right py-4 px-4 text-cosmic-300">4.5/5</td> | |
| </tr> | |
| <tr class="border-b border-gray-800 hover:bg-white/5"> | |
| <td class="py-4 px-4">Nano-Banana Pro</td> | |
| <td class="text-right py-4 px-4 text-nebula-300">12.9</td> | |
| <td class="text-right py-4 px-4 text-nebula-300">0.91</td> | |
| <td class="text-right py-4 px-4 text-nebula-300">1.5s</td> | |
| <td class="text-right py-4 px-4 text-nebula-300">4.8/5</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8 mt-8"> | |
| <div> | |
| <h3 class="font-bold mb-4 text-cosmic-300">Performance Metrics</h3> | |
| <div class="h-64 bg-gradient-to-br from-cosmic-900/30 to-nebula-900/30 rounded-xl"></div> | |
| </div> | |
| <div> | |
| <h3 class="font-bold mb-4 text-nebula-300">User Feedback</h3> | |
| <div class="h-64 bg-gradient-to-br from-nebula-900/30 to-cosmic-900/30 rounded-xl"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |