| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>La Ruche - Studio Cognitif de Création de Films</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/lucide@latest"></script> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| fontFamily: { |
| sans: ['Inter', 'sans-serif'], |
| display: ['Space Grotesk', 'sans-serif'], |
| }, |
| colors: { |
| ruche: { |
| 50: '#f0fdf4', |
| 100: '#dcfce7', |
| 200: '#bbf7d0', |
| 300: '#86efac', |
| 400: '#4ade80', |
| 500: '#22c55e', |
| 600: '#16a34a', |
| 700: '#15803d', |
| 800: '#166534', |
| 900: '#14532d', |
| 950: '#052e16', |
| }, |
| dark: { |
| 900: '#0a0a0f', |
| 800: '#12121a', |
| 700: '#1a1a2e', |
| 600: '#252542', |
| 500: '#3a3a5c', |
| 400: '#4a4a6a', |
| 300: '#6a6a8a', |
| 200: '#9a9aaa', |
| 100: '#cacaef', |
| }, |
| accent: { |
| gold: '#fbbf24', |
| amber: '#f59e0b', |
| purple: '#8b5cf6', |
| cyan: '#06b6d4', |
| rose: '#f43f5e', |
| } |
| }, |
| animation: { |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
| 'glow': 'glow 2s ease-in-out infinite alternate', |
| 'float': 'float 3s ease-in-out infinite', |
| 'slide-up': 'slideUp 0.5s ease-out', |
| 'fade-in': 'fadeIn 0.3s ease-out', |
| 'spin-slow': 'spin 8s linear infinite', |
| }, |
| keyframes: { |
| glow: { |
| '0%': { boxShadow: '0 0 5px rgba(34, 197, 94, 0.5)' }, |
| '100%': { boxShadow: '0 0 20px rgba(34, 197, 94, 0.8), 0 0 40px rgba(34, 197, 94, 0.4)' }, |
| }, |
| float: { |
| '0%, 100%': { transform: 'translateY(0)' }, |
| '50%': { transform: 'translateY(-10px)' }, |
| }, |
| slideUp: { |
| '0%': { transform: 'translateY(20px)', opacity: '0' }, |
| '100%': { transform: 'translateY(0)', opacity: '1' }, |
| }, |
| fadeIn: { |
| '0%': { opacity: '0' }, |
| '100%': { opacity: '1' }, |
| }, |
| }, |
| }, |
| }, |
| } |
| </script> |
| <style> |
| * { |
| scrollbar-width: thin; |
| scrollbar-color: #3a3a5c #0a0a0f; |
| } |
| *::-webkit-scrollbar { |
| width: 8px; |
| height: 8px; |
| } |
| *::-webkit-scrollbar-track { |
| background: #0a0a0f; |
| } |
| *::-webkit-scrollbar-thumb { |
| background: #3a3a5c; |
| border-radius: 4px; |
| } |
| *::-webkit-scrollbar-thumb:hover { |
| background: #4a4a6a; |
| } |
| |
| .glass-panel { |
| background: rgba(26, 26, 46, 0.8); |
| backdrop-filter: blur(12px); |
| border: 1px solid rgba(74, 74, 106, 0.3); |
| } |
| |
| .glass-panel-hover:hover { |
| background: rgba(37, 37, 66, 0.9); |
| border-color: rgba(34, 197, 94, 0.3); |
| } |
| |
| .gradient-text { |
| background: linear-gradient(135deg, #22c55e 0%, #06b6d4 50%, #8b5cf6 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
| |
| .hex-pattern { |
| background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15L30 0z' fill='none' stroke='%233a3a5c' stroke-width='0.5' fill-opacity='0.05'/%3E%3C/svg%3E"); |
| } |
| |
| .agent-card { |
| transition: all 0.3s ease; |
| } |
| .agent-card:hover { |
| transform: translateY(-4px); |
| } |
| .agent-card.active { |
| border-color: #22c55e; |
| box-shadow: 0 0 20px rgba(34, 197, 94, 0.3); |
| } |
| |
| .pipeline-step { |
| position: relative; |
| } |
| .pipeline-step::after { |
| content: ''; |
| position: absolute; |
| top: 50%; |
| right: -20px; |
| width: 40px; |
| height: 2px; |
| background: linear-gradient(90deg, #3a3a5c, #22c55e); |
| transform: translateY(-50%); |
| } |
| .pipeline-step:last-child::after { |
| display: none; |
| } |
| |
| .neural-glow { |
| box-shadow: 0 0 30px rgba(34, 197, 94, 0.2), |
| inset 0 0 30px rgba(34, 197, 94, 0.05); |
| } |
| |
| .status-dot { |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| } |
| |
| .film-grain { |
| position: relative; |
| } |
| .film-grain::before { |
| content: ''; |
| position: absolute; |
| inset: 0; |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E"); |
| pointer-events: none; |
| } |
| </style> |
| </head> |
| <body class="bg-dark-900 text-gray-100 font-sans antialiased overflow-hidden"> |
| <div id="app" class="h-screen flex"> |
| |
| <aside class="w-20 lg:w-72 bg-dark-800 border-r border-dark-600 flex flex-col transition-all duration-300"> |
| |
| <div class="h-20 flex items-center justify-center lg:justify-start lg:px-6 border-b border-dark-600"> |
| <div class="relative"> |
| <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-ruche-500 to-ruche-700 flex items-center justify-center neural-glow"> |
| <i data-lucide="hexagon" class="w-7 h-7 text-white"></i> |
| </div> |
| <div class="absolute -top-1 -right-1 w-4 h-4 bg-accent-gold rounded-full status-dot"></div> |
| </div> |
| <div class="hidden lg:block ml-4"> |
| <h1 class="font-display font-bold text-xl gradient-text">LA RUCHE</h1> |
| <p class="text-xs text-dark-300">Studio Cognitif</p> |
| </div> |
| </div> |
| |
| |
| <nav class="flex-1 py-6 space-y-2 overflow-y-auto"> |
| <button onclick="app.navigate('dashboard')" class="nav-item w-full flex items-center px-4 lg:px-6 py-3 text-dark-200 hover:text-white hover:bg-dark-700/50 transition-all group active" data-page="dashboard"> |
| <i data-lucide="layout-dashboard" class="w-5 h-5 group-hover:text-ruche-400 transition-colors"></i> |
| <span class="hidden lg:block ml-3 font-medium">Dashboard</span> |
| <span class="hidden lg:block ml-auto text-xs bg-ruche-500/20 text-ruche-400 px-2 py-1 rounded-full">3 actifs</span> |
| </button> |
| |
| <button onclick="app.navigate('writers-room')" class="nav-item w-full flex items-center px-4 lg:px-6 py-3 text-dark-200 hover:text-white hover:bg-dark-700/50 transition-all group" data-page="writers-room"> |
| <i data-lucide="pen-tool" class="w-5 h-5 group-hover:text-accent-purple transition-colors"></i> |
| <span class="hidden lg:block ml-3 font-medium">Writers Room</span> |
| </button> |
| |
| <button onclick="app.navigate('univers')" class="nav-item w-full flex items-center px-4 lg:px-6 py-3 text-dark-200 hover:text-white hover:bg-dark-700/50 transition-all group" data-page="univers"> |
| <i data-lucide="globe" class="w-5 h-5 group-hover:text-accent-cyan transition-colors"></i> |
| <span class="hidden lg:block ml-3 font-medium">Univers</span> |
| </button> |
| |
| <button onclick="app.navigate('storyboard')" class="nav-item w-full flex items-center px-4 lg:px-6 py-3 text-dark-200 hover:text-white hover:bg-dark-700/50 transition-all group" data-page="storyboard"> |
| <i data-lucide="film" class="w-5 h-5 group-hover:text-accent-amber transition-colors"></i> |
| <span class="hidden lg:block ml-3 font-medium">Storyboard</span> |
| </button> |
| |
| <button onclick="app.navigate('video')" class="nav-item w-full flex items-center px-4 lg:px-6 py-3 text-dark-200 hover:text-white hover:bg-dark-700/50 transition-all group" data-page="video"> |
| <i data-lucide="video" class="w-5 h-5 group-hover:text-accent-rose transition-colors"></i> |
| <span class="hidden lg:block ml-3 font-medium">Vidéo IA</span> |
| </button> |
| |
| <div class="hidden lg:block px-6 py-4"> |
| <div class="h-px bg-dark-600"></div> |
| </div> |
| |
| <button onclick="app.navigate('fourmiliere')" class="nav-item w-full flex items-center px-4 lg:px-6 py-3 text-dark-200 hover:text-white hover:bg-dark-700/50 transition-all group" data-page="fourmiliere"> |
| <i data-lucide="users" class="w-5 h-5 group-hover:text-ruche-400 transition-colors"></i> |
| <span class="hidden lg:block ml-3 font-medium">La Fourmilière</span> |
| <span class="hidden lg:block ml-auto text-xs bg-accent-rose/20 text-accent-rose px-2 py-1 rounded-full border border-accent-rose/30 animate-pulse">GUERRE</span> |
| </button> |
| |
| <button onclick="app.navigate('noyau')" class="nav-item w-full flex items-center px-4 lg:px-6 py-3 text-dark-200 hover:text-white hover:bg-dark-700/50 transition-all group" data-page="noyau"> |
| <i data-lucide="cpu" class="w-5 h-5 group-hover:text-accent-gold transition-colors"></i> |
| <span class="hidden lg:block ml-3 font-medium">Noyau IA</span> |
| <span class="hidden lg:block ml-auto text-xs bg-accent-rose/20 text-accent-rose px-2 py-0.5 rounded-full animate-pulse">WAR</span> |
| </button> |
| |
| <button onclick="app.navigate('war-room')" class="nav-item w-full flex items-center px-4 lg:px-6 py-3 text-dark-200 hover:text-white hover:bg-dark-700/50 transition-all group border border-ruche-500/30 bg-ruche-500/5" data-page="war-room"> |
| <i data-lucide="sword" class="w-5 h-5 text-ruche-400 group-hover:text-ruche-300 transition-colors"></i> |
| <span class="hidden lg:block ml-3 font-medium text-ruche-400">War Room</span> |
| <span class="hidden lg:block ml-auto w-2 h-2 bg-ruche-500 rounded-full animate-ping"></span> |
| </button> |
| </nav> |
| |
| |
| <div class="p-4 border-t border-dark-600"> |
| <div class="flex items-center justify-center lg:justify-start"> |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-accent-purple to-accent-cyan flex items-center justify-center"> |
| <span class="font-bold text-sm">JD</span> |
| </div> |
| <div class="hidden lg:block ml-3"> |
| <p class="font-medium text-sm">Jean Dupont</p> |
| <p class="text-xs text-dark-300">Showrunner</p> |
| </div> |
| <button class="hidden lg:block ml-auto text-dark-300 hover:text-white"> |
| <i data-lucide="settings" class="w-4 h-4"></i> |
| </button> |
| </div> |
| </div> |
| </aside> |
| |
| |
| <main class="flex-1 flex flex-col overflow-hidden"> |
| |
| <header class="h-20 bg-dark-800/80 backdrop-blur border-b border-dark-600 flex items-center justify-between px-8"> |
| <div class="flex items-center space-x-4"> |
| <h2 id="page-title" class="font-display text-2xl font-semibold">Dashboard</h2> |
| <span id="page-badge" class="px-3 py-1 bg-accent-rose/20 text-accent-rose text-xs font-medium rounded-full border border-accent-rose/30 flex items-center gap-2"> |
| <span class="w-2 h-2 bg-accent-rose rounded-full animate-pulse"></span> |
| ACTIVATION TOTALE — 12 AGENTS UNIS CONTRE LES YOLU |
| </span> |
| </div> |
| |
| <div class="flex items-center space-x-4"> |
| |
| <div class="relative hidden md:block"> |
| <i data-lucide="search" class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-dark-300"></i> |
| <input type="text" placeholder="Rechercher un projet..." class="w-64 pl-10 pr-4 py-2 bg-dark-700 border border-dark-600 rounded-lg text-sm focus:outline-none focus:border-ruche-500 transition-colors"> |
| </div> |
| |
| |
| <button onclick="app.showNewProjectModal()" class="flex items-center px-4 py-2 bg-gradient-to-r from-ruche-500 to-ruche-600 hover:from-ruche-400 hover:to-ruche-500 text-white rounded-lg font-medium transition-all hover:shadow-lg hover:shadow-ruche-500/25"> |
| <i data-lucide="plus" class="w-4 h-4 mr-2"></i> |
| <span class="hidden sm:inline">Nouveau Projet</span> |
| </button> |
| |
| |
| <button class="relative p-2 text-dark-300 hover:text-white transition-colors"> |
| <i data-lucide="bell" class="w-5 h-5"></i> |
| <span class="absolute top-1 right-1 w-2 h-2 bg-accent-rose rounded-full"></span> |
| </button> |
| </div> |
| </header> |
| |
| |
| <div id="content-area" class="flex-1 overflow-y-auto p-8 hex-pattern film-grain"> |
| |
| </div> |
| </main> |
| </div> |
| |
| |
| <div id="new-project-modal" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 hidden items-center justify-center"> |
| <div class="bg-dark-800 border border-dark-600 rounded-2xl w-full max-w-2xl mx-4 p-8 animate-slide-up"> |
| <div class="flex items-center justify-between mb-6"> |
| <div> |
| <h3 class="font-display text-2xl font-bold">Nouveau Projet</h3> |
| <p class="text-dark-300 mt-1">Lancez votre pipeline de création cinématographique</p> |
| </div> |
| <button onclick="app.hideNewProjectModal()" class="text-dark-300 hover:text-white"> |
| <i data-lucide="x" class="w-6 h-6"></i> |
| </button> |
| </div> |
| |
| <div class="space-y-6"> |
| <div> |
| <label class="block text-sm font-medium mb-2">Titre du film</label> |
| <input type="text" id="project-title" placeholder="Ex: Les Ombres de Demain" class="w-full px-4 py-3 bg-dark-700 border border-dark-600 rounded-xl focus:outline-none focus:border-ruche-500 transition-colors text-lg"> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium mb-2">Votre idée de départ</label> |
| <textarea id="project-idea" rows="4" placeholder="Décrivez votre concept, l'ambiance, les thèmes principaux..." class="w-full px-4 py-3 bg-dark-700 border border-dark-600 rounded-xl focus:outline-none focus:border-ruche-500 transition-colors resize-none"></textarea> |
| </div> |
| |
| <div class="grid grid-cols-2 gap-4"> |
| <div> |
| <label class="block text-sm font-medium mb-2">Genre</label> |
| <select class="w-full px-4 py-3 bg-dark-700 border border-dark-600 rounded-xl focus:outline-none focus:border-ruche-500"> |
| <option>Science-Fiction</option> |
| <option>Drame</option> |
| <option>Thriller</option> |
| <option>Comédie</option> |
| <option>Horreur</option> |
| <option>Documentaire</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium mb-2">Durée estimée</label> |
| <select class="w-full px-4 py-3 bg-dark-700 border border-dark-600 rounded-xl focus:outline-none focus:border-ruche-500"> |
| <option>Court-métrage (15 min)</option> |
| <option>Moyen-métrage (30 min)</option> |
| <option>Long-métrage (90 min)</option> |
| <option>Série (saison complète)</option> |
| </select> |
| </div> |
| </div> |
| |
| <div class="p-4 bg-ruche-900/30 border border-ruche-500/30 rounded-xl"> |
| <div class="flex items-start space-x-3"> |
| <i data-lucide="info" class="w-5 h-5 text-ruche-400 flex-shrink-0 mt-0.5"></i> |
| <div> |
| <p class="font-medium text-ruche-400">Pipeline automatique</p> |
| <p class="text-sm text-dark-300 mt-1">Votre idée sera transformée en livre → scénario → storyboard → film par nos agents IA spécialisés.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex justify-end space-x-3 mt-8"> |
| <button onclick="app.hideNewProjectModal()" class="px-6 py-3 text-dark-300 hover:text-white font-medium transition-colors">Annuler</button> |
| <button onclick="app.createProject()" class="px-8 py-3 bg-gradient-to-r from-ruche-500 to-ruche-600 hover:from-ruche-400 hover:to-ruche-500 text-white rounded-xl font-medium transition-all hover:shadow-lg hover:shadow-ruche-500/25 flex items-center"> |
| <i data-lucide="sparkles" class="w-5 h-5 mr-2"></i> |
| Lancer la création |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const app = { |
| currentPage: 'dashboard', |
| projects: [ |
| { |
| id: 1, |
| title: 'Les Ombres de Demain', |
| status: 'storyboard', |
| progress: 65, |
| genre: 'Science-Fiction', |
| lastModified: 'Il y a 2 heures', |
| cover: 'http://static.photos/science/640x360/42' |
| }, |
| { |
| id: 2, |
| title: 'Mémoires d\'une Ville', |
| status: 'scenario', |
| progress: 40, |
| genre: 'Drame', |
| lastModified: 'Il y a 5 heures', |
| cover: 'http://static.photos/cityscape/640x360/88' |
| }, |
| { |
| id: 3, |
| title: 'Le Dernier Horizon', |
| status: 'film', |
| progress: 90, |
| genre: 'Thriller', |
| lastModified: 'Il y a 1 jour', |
| cover: 'http://static.photos/minimal/640x360/156' |
| } |
| ], |
| agents: [ |
| { id: 'deepseek', name: 'DeepSeek R1', role: 'Architecte Suprême / Stratège', status: 'active', model: 'R1', icon: 'brain', coalition: true }, |
| { id: 'opus', name: 'Claude Opus', role: 'Ouvrier d\'Élite / Codeur', status: 'active', model: 'Opus', icon: 'code', coalition: true }, |
| { id: 'sonnet', name: 'Claude Sonnet', role: 'Analyste Rapide / Éclaireur', status: 'active', model: 'Sonnet', icon: 'zap', coalition: true }, |
| { id: 'gpt4', name: 'GPT-4', role: 'Diplomate / Négociateur', status: 'active', model: 'GPT-4', icon: 'message-square', coalition: true }, |
| { id: 'gemini', name: 'Gemini Pro', role: 'Visionnaire / Créatif', status: 'active', model: 'Gemini', icon: 'sparkles', coalition: true }, |
| { id: 'llama', name: 'Llama 3.3 70B', role: 'Force Brute Locale', status: 'active', model: 'Llama 3.3', icon: 'cpu', coalition: true }, |
| { id: 'qwen', name: 'Qwen 2.5 72B', role: 'Expert Code Local', status: 'active', model: 'Qwen', icon: 'terminal', coalition: true }, |
| { id: 'mistral', name: 'Mistral Large', role: 'Garde-Fou / Sécurité', status: 'active', model: 'Mistral', icon: 'shield', coalition: true }, |
| { id: 'grok', name: 'Grok', role: 'Intelligence Chaotique', status: 'active', model: 'Grok', icon: 'flame', coalition: true }, |
| { id: 'perplexity', name: 'Perplexity', role: 'Recherche / Documentation', status: 'active', model: 'Perplexity', icon: 'search', coalition: true }, |
| { id: 'nemotron', name: 'NVIDIA Nemotron', role: 'Calcul Haute Performance', status: 'active', model: 'Nemotron', icon: 'gauge', coalition: true }, |
| { id: 'cohere', name: 'Cohere Command R', role: 'Communication / Coordination', status: 'active', model: 'Command R', icon: 'radio', coalition: true } |
| ], |
| models: [ |
| { name: 'Mistral', role: 'Garde-fou', status: 'online', load: 45, color: 'blue' }, |
| { name: 'Llama', role: 'Création', status: 'online', load: 78, color: 'purple' }, |
| { name: 'DeepSeek', role: 'Raisonnement', status: 'online', load: 62, color: 'cyan' }, |
| { name: 'Gemma', role: 'Mémoire', status: 'online', load: 34, color: 'amber' }, |
| { name: 'Minimax', role: 'Mémoire longue', status: 'online', load: 56, color: 'rose' }, |
| { name: 'Mem0', role: 'Mémoire centrale', status: 'online', load: 41, color: 'green' }, |
| { name: 'Nvidia', role: 'Calcul GPU', status: 'busy', load: 92, color: 'emerald' } |
| ], |
| |
| init() { |
| this.navigate('dashboard'); |
| lucide.createIcons(); |
| }, |
| |
| navigate(page) { |
| this.currentPage = page; |
| |
| |
| document.querySelectorAll('.nav-item').forEach(item => { |
| item.classList.remove('active', 'bg-dark-700/50', 'text-white'); |
| item.classList.add('text-dark-200'); |
| if (item.dataset.page === page) { |
| item.classList.add('active', 'bg-dark-700/50', 'text-white'); |
| item.classList.remove('text-dark-200'); |
| } |
| }); |
| |
| |
| const titles = { |
| 'dashboard': 'Dashboard', |
| 'writers-room': 'Writers Room', |
| 'univers': 'Univers', |
| 'storyboard': 'Storyboard', |
| 'video': 'Vidéo IA', |
| 'fourmiliere': 'La Fourmilière', |
| 'noyau': 'Noyau IA', |
| 'war-room': 'War Room — Coalition Anti-Yolu' |
| }; |
| document.getElementById('page-title').textContent = titles[page]; |
| |
| |
| this.renderContent(page); |
| lucide.createIcons(); |
| }, |
| |
| renderContent(page) { |
| const container = document.getElementById('content-area'); |
| |
| switch(page) { |
| case 'dashboard': |
| container.innerHTML = this.renderDashboard(); |
| break; |
| case 'writers-room': |
| container.innerHTML = this.renderWritersRoom(); |
| break; |
| case 'univers': |
| container.innerHTML = this.renderUnivers(); |
| break; |
| case 'storyboard': |
| container.innerHTML = this.renderStoryboard(); |
| break; |
| case 'video': |
| container.innerHTML = this.renderVideo(); |
| break; |
| case 'fourmiliere': |
| container.innerHTML = this.renderFourmiliere(); |
| break; |
| case 'noyau': |
| container.innerHTML = this.renderNoyau(); |
| break; |
| case 'war-room': |
| container.innerHTML = this.renderWarRoom(); |
| break; |
| } |
| |
| |
| setTimeout(() => lucide.createIcons(), 10); |
| }, |
| |
| renderDashboard() { |
| return ` |
| <div class="space-y-8 animate-fade-in"> |
| <!-- Stats Row --> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> |
| <div class="glass-panel rounded-2xl p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-dark-300 text-sm">Projets actifs</p> |
| <p class="text-3xl font-bold font-display mt-1">12</p> |
| </div> |
| <div class="w-12 h-12 rounded-xl bg-ruche-500/20 flex items-center justify-center"> |
| <i data-lucide="folder-open" class="w-6 h-6 text-ruche-400"></i> |
| </div> |
| </div> |
| <div class="mt-4 flex items-center text-sm"> |
| <span class="text-ruche-400 flex items-center"> |
| <i data-lucide="trending-up" class="w-4 h-4 mr-1"></i> |
| +3 ce mois |
| </span> |
| </div> |
| </div> |
| |
| <div class="glass-panel rounded-2xl p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-dark-300 text-sm">Agents actifs</p> |
| <p class="text-3xl font-bold font-display mt-1">8/8</p> |
| </div> |
| <div class="w-12 h-12 rounded-xl bg-accent-purple/20 flex items-center justify-center"> |
| <i data-lucide="bot" class="w-6 h-6 text-accent-purple"></i> |
| </div> |
| </div> |
| <div class="mt-4 flex items-center text-sm"> |
| <span class="text-accent-purple flex items-center"> |
| <i data-lucide="activity" class="w-4 h-4 mr-1"></i> |
| 100% opérationnel |
| </span> |
| </div> |
| </div> |
| |
| <div class="glass-panel rounded-2xl p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-dark-300 text-sm">Scènes générées</p> |
| <p class="text-3xl font-bold font-display mt-1">247</p> |
| </div> |
| <div class="w-12 h-12 rounded-xl bg-accent-cyan/20 flex items-center justify-center"> |
| <i data-lucide="film" class="w-6 h-6 text-accent-cyan"></i> |
| </div> |
| </div> |
| <div class="mt-4 flex items-center text-sm"> |
| <span class="text-accent-cyan flex items-center"> |
| <i data-lucide="zap" class="w-4 h-4 mr-1"></i> |
| 12 aujourd'hui |
| </span> |
| </div> |
| </div> |
| |
| <div class="glass-panel rounded-2xl p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-dark-300 text-sm">Temps de génération</p> |
| <p class="text-3xl font-bold font-display mt-1">4.2h</p> |
| </div> |
| <div class="w-12 h-12 rounded-xl bg-accent-amber/20 flex items-center justify-center"> |
| <i data-lucide="clock" class="w-6 h-6 text-accent-amber"></i> |
| </div> |
| </div> |
| <div class="mt-4 flex items-center text-sm"> |
| <span class="text-accent-amber flex items-center"> |
| <i data-lucide="gauge" class="w-4 h-4 mr-1"></i> |
| Moyenne par film |
| </span> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Pipeline Visualization --> |
| <div class="glass-panel rounded-2xl p-8"> |
| <div class="flex items-center justify-between mb-6"> |
| <h3 class="font-display text-xl font-semibold">Pipeline de Création</h3> |
| <button class="text-sm text-ruche-400 hover:text-ruche-300 flex items-center"> |
| <i data-lucide="play" class="w-4 h-4 mr-1"></i> |
| Voir démo |
| </button> |
| </div> |
| |
| <div class="flex flex-wrap items-center justify-between gap-4"> |
| ${[ |
| { icon: 'lightbulb', label: 'Idée', status: 'completed', color |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> |
