Spaces:
Running
Running
| <html class="dark" lang="en"><head> | |
| <meta charset="utf-8"/> | |
| <meta content="width=device-width, initial-scale=1.0" name="viewport"/> | |
| <title>Aetheris Control | Neural Architect</title> | |
| <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;900&family=Manrope:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet"/> | |
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> | |
| <script id="tailwind-config"> | |
| tailwind.config = { | |
| darkMode: "class", | |
| theme: { | |
| extend: { | |
| colors: { | |
| "on-surface-variant": "#a8abb4", | |
| "surface-container-lowest": "#000000", | |
| "secondary": "#37ee9b", | |
| "surface-container-low": "#0f141a", | |
| "surface": "#0a0e14", | |
| "primary-fixed-dim": "#00e2ee", | |
| "primary": "#99f7ff", | |
| "on-tertiary-container": "#533a00", | |
| "on-secondary-container": "#e2ffe9", | |
| "secondary-fixed-dim": "#19df8f", | |
| "error-container": "#9f0519", | |
| "on-secondary-fixed": "#003d23", | |
| "on-error-container": "#ffa8a3", | |
| "on-tertiary": "#5f4200", | |
| "on-secondary": "#005331", | |
| "surface-container": "#151a21", | |
| "inverse-on-surface": "#51555d", | |
| "outline-variant": "#44484f", | |
| "on-primary-fixed": "#004145", | |
| "secondary-fixed": "#37ee9b", | |
| "error": "#ff716c", | |
| "tertiary-fixed-dim": "#ecaa00", | |
| "on-secondary-fixed-variant": "#005d38", | |
| "on-background": "#f1f3fd", | |
| "tertiary": "#ffc965", | |
| "primary-dim": "#00e2ee", | |
| "on-tertiary-fixed": "#392700", | |
| "secondary-dim": "#19df8f", | |
| "on-error": "#490006", | |
| "surface-container-highest": "#20262f", | |
| "background": "#0a0e14", | |
| "on-primary-container": "#00555a", | |
| "secondary-container": "#006d42", | |
| "primary-container": "#00f1fe", | |
| "tertiary-fixed": "#feb700", | |
| "outline": "#72757d", | |
| "primary-fixed": "#00f1fe", | |
| "error-dim": "#d7383b", | |
| "on-surface": "#f1f3fd", | |
| "on-primary-fixed-variant": "#006065", | |
| "surface-variant": "#20262f", | |
| "surface-container-high": "#1b2028", | |
| "inverse-surface": "#f8f9ff", | |
| "surface-dim": "#0a0e14", | |
| "tertiary-dim": "#ecaa00", | |
| "surface-bright": "#262c36", | |
| "tertiary-container": "#feb700", | |
| "inverse-primary": "#006a70", | |
| "on-tertiary-fixed-variant": "#5f4200", | |
| "on-primary": "#005f64", | |
| "surface-tint": "#99f7ff" | |
| }, | |
| fontFamily: { | |
| "headline": ["Space Grotesk"], | |
| "body": ["Manrope"], | |
| "label": ["Space Grotesk"] | |
| }, | |
| borderRadius: {"DEFAULT": "0.125rem", "lg": "0.25rem", "xl": "0.5rem", "full": "0.75rem"}, | |
| }, | |
| }, | |
| } | |
| </script> | |
| <style> | |
| .material-symbols-outlined { | |
| font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; | |
| vertical-align: middle; | |
| } | |
| ::-webkit-scrollbar { width: 2px; } | |
| ::-webkit-scrollbar-thumb { background: #00e2ee; border-radius: 10px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| .glass-card { | |
| background: rgba(32, 38, 47, 0.6); | |
| backdrop-filter: blur(20px); | |
| border: 1px solid rgba(68, 72, 79, 0.2); | |
| } | |
| .glow-text-primary { text-shadow: 0 0 10px rgba(153, 247, 255, 0.5); } | |
| .glow-border-active { box-shadow: 0 0 15px rgba(0, 241, 254, 0.15); } | |
| .custom-scrollbar::-webkit-scrollbar { width: 4px; } | |
| </style> | |
| </head> | |
| <body class="bg-surface text-on-surface font-body selection:bg-primary-container selection:text-on-primary-fixed"> | |
| <!-- Top Navigation Bar --> | |
| <nav class="fixed top-0 left-0 w-full flex justify-between items-center px-8 h-16 bg-[#0a0e14]/90 backdrop-blur-md border-b border-slate-800/50 z-50 shadow-[0_0_20px_rgba(0,242,255,0.05)]"> | |
| <div class="flex items-center gap-12"> | |
| <span class="text-2xl font-black tracking-tighter text-cyan-400 uppercase font-headline">Neural Architect</span> | |
| <div class="hidden md:flex gap-8"> | |
| <a class="text-cyan-400 font-bold border-b-2 border-cyan-400 font-headline tracking-tight text-sm uppercase" href="#">System: Optimal</a> | |
| <a class="text-slate-400 font-medium hover:text-slate-100 transition-all duration-300 font-headline tracking-tight text-sm uppercase" href="#">Telemetry: Live</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-6"> | |
| <button class="bg-primary-container text-on-primary-fixed px-4 py-1.5 font-headline text-xs font-bold uppercase tracking-widest scale-95 active:scale-90 transition-transform hover:shadow-[0_0_15px_#00f1fe]"> | |
| Task: Strategic Oversight | |
| </button> | |
| <div class="flex gap-4 text-on-surface-variant"> | |
| <span class="material-symbols-outlined cursor-pointer hover:text-primary transition-colors">notifications_active</span> | |
| <span class="material-symbols-outlined cursor-pointer hover:text-primary transition-colors">settings</span> | |
| <span class="material-symbols-outlined cursor-pointer hover:text-primary transition-colors">account_circle</span> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Sidebar Navigation --> | |
| <aside class="fixed left-0 top-0 h-screen w-72 z-40 bg-[#0f141a] flex flex-col py-8 border-r border-slate-800/30 pt-24 shadow-[10px_0_30px_rgba(0,0,0,0.5)]"> | |
| <div class="px-6 mb-10"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded bg-surface-container-highest border border-outline-variant flex items-center justify-center"> | |
| <span class="material-symbols-outlined text-primary">psychology</span> | |
| </div> | |
| <div> | |
| <h3 class="font-headline text-sm font-bold text-cyan-400 tracking-tight">Mission Control</h3> | |
| <p class="text-[10px] text-secondary font-bold tracking-widest uppercase">Neural Link: Active</p> | |
| </div> | |
| </div> | |
| </div> | |
| <nav class="flex-1 space-y-1"> | |
| <a class="flex items-center gap-4 bg-[#20262f] text-cyan-400 border-l-4 border-cyan-400 px-6 py-4 shadow-[inset_0_0_15px_rgba(0,242,255,0.1)] font-headline text-xs uppercase tracking-widest" href="#"> | |
| <span class="material-symbols-outlined">dashboard</span> | |
| Mission Overview | |
| </a> | |
| <a class="flex items-center gap-4 text-slate-500 px-6 py-4 hover:text-slate-200 hover:bg-[#161b22] hover:translate-x-1 transition-all duration-200 font-headline text-xs uppercase tracking-widest" href="#"> | |
| <span class="material-symbols-outlined">supervisor_account</span> | |
| Manager View | |
| </a> | |
| <a class="flex items-center gap-4 text-slate-500 px-6 py-4 hover:text-slate-200 hover:bg-[#161b22] hover:translate-x-1 transition-all duration-200 font-headline text-xs uppercase tracking-widest" href="#"> | |
| <span class="material-symbols-outlined">smart_toy</span> | |
| Agent Monitor | |
| </a> | |
| <a class="flex items-center gap-4 text-slate-500 px-6 py-4 hover:text-slate-200 hover:bg-[#161b22] hover:translate-x-1 transition-all duration-200 font-headline text-xs uppercase tracking-widest" href="#"> | |
| <span class="material-symbols-outlined">history</span> | |
| History | |
| </a> | |
| </nav> | |
| <div class="mt-auto px-6 pt-6 border-t border-outline-variant/10"> | |
| <div class="flex flex-col gap-4"> | |
| <div class="flex items-center gap-3 text-slate-500 hover:text-primary cursor-pointer transition-colors group"> | |
| <span class="material-symbols-outlined text-sm">memory</span> | |
| <span class="font-headline text-[10px] uppercase tracking-widest group-hover:glow-text-primary">Diagnostics</span> | |
| </div> | |
| <div class="flex items-center gap-3 text-slate-500 hover:text-primary cursor-pointer transition-colors group"> | |
| <span class="material-symbols-outlined text-sm">terminal</span> | |
| <span class="font-headline text-[10px] uppercase tracking-widest group-hover:glow-text-primary">Logs</span> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Content Canvas --> | |
| <main class="ml-72 pt-24 p-8 min-h-screen"> | |
| <!-- Top Section: Header & Status --> | |
| <section class="grid grid-cols-1 md:grid-cols-12 gap-6 mb-8"> | |
| <div class="md:col-span-8 glass-card p-6 rounded relative overflow-hidden border-l-4 border-primary"> | |
| <div class="absolute top-0 right-0 w-32 h-32 bg-primary/5 blur-3xl rounded-full -mr-16 -mt-16"></div> | |
| <div class="relative z-10"> | |
| <div class="flex items-center gap-2 mb-2"> | |
| <span class="material-symbols-outlined text-primary text-sm">shield_person</span> | |
| <h2 class="font-headline text-xs font-bold uppercase tracking-[0.2em] text-on-surface-variant">Command Central: Executive</h2> | |
| </div> | |
| <p class="text-2xl md:text-3xl font-light text-on-surface mb-4 font-headline"> | |
| Project Orchestration: <span class="text-primary font-bold">Aetheris Protocol</span> Synchronized. | |
| </p> | |
| <div class="flex items-center gap-4"> | |
| <div class="flex items-center gap-2 px-3 py-1 bg-surface-container rounded-full border border-primary/20"> | |
| <span class="relative flex h-2 w-2"> | |
| <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span> | |
| <span class="relative inline-flex rounded-full h-2 w-2 bg-primary"></span> | |
| </span> | |
| <span class="text-[10px] font-bold uppercase tracking-widest text-primary glow-text-primary">Master Orchestrator Online</span> | |
| </div> | |
| <span class="text-[10px] text-on-surface-variant uppercase tracking-widest">Neural Uptime: 99.9%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:col-span-4 bg-primary-container p-6 rounded flex flex-col justify-between overflow-hidden relative"> | |
| <div class="absolute -bottom-4 -right-4 opacity-10"> | |
| <span class="material-symbols-outlined text-9xl text-on-primary-fixed">psychology</span> | |
| </div> | |
| <h3 class="text-on-primary-fixed font-headline text-xs font-black uppercase tracking-widest">System Load</h3> | |
| <div class="mt-4"> | |
| <div class="text-4xl font-black text-on-primary-fixed font-headline tracking-tighter">84.2<span class="text-xl font-medium">%</span></div> | |
| <div class="w-full h-1 bg-on-primary-fixed/20 mt-2"> | |
| <div class="w-[84.2%] h-full bg-on-primary-fixed relative"> | |
| <div class="absolute right-0 top-0 bottom-0 w-2 bg-on-primary-fixed shadow-[0_0_10px_white]"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-[10px] text-on-primary-fixed/70 uppercase font-bold tracking-widest mt-4">Node: XC-909 Cluster</p> | |
| </div> | |
| </section> | |
| <!-- Master Agent Block --> | |
| <h2 class="font-headline text-sm font-bold uppercase tracking-[0.3em] text-on-surface-variant mb-6 flex items-center gap-4"> | |
| Master Orchestrator | |
| <span class="h-px flex-1 bg-outline-variant/30"></span> | |
| </h2> | |
| <section class="mb-12"> | |
| <div class="glass-card rounded p-6 border-l-4 border-primary hover:bg-surface-container-high transition-all duration-300"> | |
| <div class="grid grid-cols-1 lg:grid-cols-12 gap-8"> | |
| <div class="lg:col-span-4 space-y-6"> | |
| <div class="flex items-center gap-5"> | |
| <div class="w-16 h-16 rounded-lg bg-surface border-2 border-primary/30 flex items-center justify-center shadow-[0_0_20px_rgba(0,241,254,0.1)]"> | |
| <span class="material-symbols-outlined text-primary text-4xl">shield_person</span> | |
| </div> | |
| <div> | |
| <h4 class="font-headline text-xl font-bold text-on-surface">Manager</h4> | |
| <div class="flex flex-col"> | |
| <span id="managerProvider" | |
| class="text-xs text-secondary font-bold uppercase tracking-widest">Waiting...</span> | |
| <span id="managerModel" | |
| class="text-[10px] text-on-surface-variant mt-1 font-mono">---</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <h5 class="text-[10px] font-black uppercase tracking-widest text-primary mb-2">Neural Status</h5> | |
| <div class="flex items-center gap-3 bg-surface-container-lowest p-3 rounded border border-outline-variant/20"> | |
| <span class="material-symbols-outlined text-secondary text-sm">check_circle</span> | |
| <span class="text-xs text-on-surface-variant">Analyzing user request and orchestrating task delegation across sub-agents.</span> | |
| </div> | |
| </div> | |
| <div> | |
| <h5 class="text-[10px] font-black uppercase tracking-widest text-primary mb-2">Defined Role</h5> | |
| <div class="text-[11px] leading-relaxed text-on-surface-variant h-32 overflow-y-auto pr-2 custom-scrollbar italic bg-surface-container-lowest/50 p-3 rounded"> | |
| Eres el gerente de proyecto de Mission Control AI. Tu trabajo es ANALIZAR la solicitud del usuario y DECIDIR qué agentes van a trabajar en ella. NUNCA te delegues a ti mismo (manager). Si la tarea es saludo, pregunta quién soy, hora/fecha, o solo pedir ideas de imagen (sin pedir generarla explícitamente), responde directamente sin delegar (delegate: []). Solo delega a image_agent si el usuario pide EXPLÍCITAMENTE generar, crear o mostrar la imagen real. Para ideas o descripciones de imagen, responde tú mismo con sugerencias. Saluda brevemente en 1 línea. Siempre termina tu respuesta con un JSON de delegación: {"delegate": ["agent_key1", "agent_key2"]} REGLAS DE DELEGACIÓN (síguellas estrictamente): | |
| - imagen / foto / dibujo / ilustración / visualiza / ideas para imagen → responde directamente con sugerencias (delegate: []) | |
| - genera la imagen / crea la imagen / muestra la imagen / imagen real → image_agent | |
| - informe / reporte / word / documento / redacta → writer + analyst | |
| - excel / planilla / hoja / spreadsheet / tabla → backend_dev | |
| - python / script / groovy / jenkins / api / devops / código → backend_dev | |
| - html / css / web / interfaz / frontend / página → frontend_dev | |
| - app completa full-stack → backend_dev + frontend_dev | |
| - analisis / viabilidad / evaluar / riesgos / revisar → analyst | |
| - saludo / hola / quien eres / pregunta simple → delegate: [] | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:col-span-8 flex flex-col"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h5 class="text-[10px] font-black uppercase tracking-widest text-primary">Global Activity Terminal</h5> | |
| <div class="flex gap-2"> | |
| <span class="w-2 h-2 rounded-full bg-red-500/50"></span> | |
| <span class="w-2 h-2 rounded-full bg-yellow-500/50"></span> | |
| <span class="w-2 h-2 rounded-full bg-green-500/50"></span> | |
| </div> | |
| </div> | |
| <div class="flex-1 bg-surface-container-lowest p-5 rounded font-mono text-xs text-on-surface-variant overflow-hidden leading-relaxed border border-outline-variant/30 shadow-inner relative"> | |
| <div id="terminal" class="space-y-1 overflow-y-auto h-64"> | |
| <p class="text-primary-dim">> Initializing Mission Control v2.5.0...</p> | |
| <p class="text-secondary">> Success: Connection to HuggingFace Router established.</p> | |
| <p class="text-on-surface-variant/60">> Waiting for user input via Neural Interface...</p> | |
| <p class="text-primary">> Request detected: "Generate technical documentation for Aetheris Protocol"</p> | |
| <p class="text-secondary">> Parsing intent: [DOCUMENTATION_GEN] [TECHNICAL_SPEC]</p> | |
| <p class="text-primary-dim">> Delegating to: [WRITER], [ANALYST], [BACKEND_DEV]</p> | |
| <p class="animate-pulse border-r-2 border-primary w-1 h-4 inline-block"></p> | |
| </div> | |
| <div class="mt-2 flex items-center gap-2"> | |
| <span class="text-primary">></span> | |
| <input id="terminalInput" | |
| class="flex-1 bg-transparent outline-none text-sm text-on-surface font-mono" | |
| placeholder="Escribe tu misión y presiona Enter..." /> | |
| </div> | |
| <div class="absolute bottom-4 right-4 text-[9px] uppercase tracking-tighter text-on-surface-variant/30"> | |
| Thread ID: 0x99F7FF-MNGR | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Middle Section: Specialized Agent Manifest --> | |
| <h2 class="font-headline text-sm font-bold uppercase tracking-[0.3em] text-on-surface-variant mb-6 flex items-center gap-4"> | |
| Specialized Agent Manifest | |
| <span class="h-px flex-1 bg-outline-variant/30"></span> | |
| </h2> | |
| <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12"> | |
| <!-- Agent 1: Backend --> | |
| <div class="glass-card rounded p-5 hover:bg-surface-container-high transition-all duration-300 group"> | |
| <div class="flex items-start justify-between mb-4"> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-12 h-12 rounded bg-surface border border-outline-variant overflow-hidden group-hover:border-primary/50 transition-colors flex items-center justify-center"> | |
| <span class="material-symbols-outlined text-primary-dim text-2xl">database</span> | |
| </div> | |
| <div> | |
| <h4 class="font-headline text-sm font-bold text-on-surface">Backend</h4> | |
| <span class="text-[10px] text-secondary font-bold uppercase tracking-widest">OpenRouter</span> | |
| </div> | |
| </div> | |
| <span class="material-symbols-outlined text-primary text-lg">terminal</span> | |
| </div> | |
| <div class="bg-surface-container-lowest p-3 rounded mb-4 font-mono text-[10px] text-on-surface-variant h-20 overflow-hidden leading-relaxed border border-outline-variant/20"> | |
| <p class="text-primary-dim opacity-70">>> API Script generated...</p> | |
| <p class="text-primary-dim opacity-70">>> Database schema synced.</p> | |
| <p class="text-primary-dim opacity-90">>> Endpoint 0x24F deployed.</p> | |
| </div> | |
| <div class="flex justify-between items-center text-[10px] font-bold uppercase tracking-widest text-on-surface-variant"> | |
| <span>Llama-3.3-70B</span> | |
| <span>Load: 42%</span> | |
| </div> | |
| </div> | |
| <!-- Agent 2: Frontend --> | |
| <div class="glass-card rounded p-5 hover:bg-surface-container-high transition-all duration-300 group"> | |
| <div class="flex items-start justify-between mb-4"> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-12 h-12 rounded bg-surface border border-outline-variant overflow-hidden group-hover:border-primary/50 transition-colors flex items-center justify-center"> | |
| <span class="material-symbols-outlined text-primary-dim text-2xl">web</span> | |
| </div> | |
| <div> | |
| <h4 class="font-headline text-sm font-bold text-on-surface">Frontend</h4> | |
| <span class="text-[10px] text-secondary font-bold uppercase tracking-widest">OpenRouter</span> | |
| </div> | |
| </div> | |
| <span class="material-symbols-outlined text-primary text-lg">brush</span> | |
| </div> | |
| <div class="bg-surface-container-lowest p-3 rounded mb-4 font-mono text-[10px] text-on-surface-variant h-20 overflow-hidden leading-relaxed border border-outline-variant/20"> | |
| <p class="text-primary-dim opacity-70">>> HTML skeleton ready...</p> | |
| <p class="text-primary-dim opacity-70">>> Tailwind JIT compiling...</p> | |
| <p class="text-secondary">>> Viewport optimized.</p> | |
| </div> | |
| <div class="flex justify-between items-center text-[10px] font-bold uppercase tracking-widest text-on-surface-variant"> | |
| <span>Gemma-3-27B</span> | |
| <span>Load: 18%</span> | |
| </div> | |
| </div> | |
| <!-- Agent 3: Analyst --> | |
| <div class="glass-card rounded p-5 hover:bg-surface-container-high transition-all duration-300 group border-l-2 border-primary/40"> | |
| <div class="flex items-start justify-between mb-4"> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-12 h-12 rounded bg-surface border border-outline-variant overflow-hidden group-hover:border-primary/50 transition-colors flex items-center justify-center"> | |
| <span class="material-symbols-outlined text-primary-dim text-2xl">analytics</span> | |
| </div> | |
| <div> | |
| <h4 class="font-headline text-sm font-bold text-on-surface">Analyst</h4> | |
| <span class="text-[10px] text-secondary font-bold uppercase tracking-widest">OpenRouter</span> | |
| </div> | |
| </div> | |
| <span class="material-symbols-outlined text-primary text-lg">query_stats</span> | |
| </div> | |
| <div class="bg-surface-container-lowest p-3 rounded mb-4 font-mono text-[10px] text-on-surface-variant h-20 overflow-hidden leading-relaxed border border-outline-variant/20"> | |
| <p class="text-primary-dim opacity-70">>> Risks evaluated...</p> | |
| <p class="text-primary-dim opacity-90">>> Feasibility: High.</p> | |
| <p class="text-primary-dim opacity-70">>> ROI mapping complete.</p> | |
| </div> | |
| <div class="flex justify-between items-center text-[10px] font-bold uppercase tracking-widest text-on-surface-variant"> | |
| <span>Mistral-Small</span> | |
| <span>Load: 31%</span> | |
| </div> | |
| </div> | |
| <!-- Agent 4: Writer --> | |
| <div class="glass-card rounded p-5 hover:bg-surface-container-high transition-all duration-300 group"> | |
| <div class="flex items-start justify-between mb-4"> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-12 h-12 rounded bg-surface border border-outline-variant overflow-hidden group-hover:border-primary/50 transition-colors flex items-center justify-center"> | |
| <span class="material-symbols-outlined text-primary-dim text-2xl">edit_note</span> | |
| </div> | |
| <div> | |
| <h4 class="font-headline text-sm font-bold text-on-surface">Writer</h4> | |
| <span class="text-[10px] text-secondary font-bold uppercase tracking-widest">HuggingFace</span> | |
| </div> | |
| </div> | |
| <span class="material-symbols-outlined text-primary text-lg">article</span> | |
| </div> | |
| <div class="bg-surface-container-lowest p-3 rounded mb-4 font-mono text-[10px] text-on-surface-variant h-20 overflow-hidden leading-relaxed border border-outline-variant/20"> | |
| <p class="text-primary-dim opacity-70">>> Drafting report...</p> | |
| <p class="text-primary-dim opacity-90">>> 500+ words generated.</p> | |
| <p class="text-primary-dim opacity-70">>> Formatting subheaders.</p> | |
| </div> | |
| <div class="flex justify-between items-center text-[10px] font-bold uppercase tracking-widest text-on-surface-variant"> | |
| <span>Qwen-2.5-7B</span> | |
| <span>Load: 67%</span> | |
| </div> | |
| </div> | |
| <!-- Agent 5: ImageAgent --> | |
| <div class="glass-card rounded p-5 hover:bg-surface-container-high transition-all duration-300 group"> | |
| <div class="flex items-start justify-between mb-4"> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-12 h-12 rounded bg-surface border border-outline-variant overflow-hidden group-hover:border-primary/50 transition-colors flex items-center justify-center"> | |
| <span class="material-symbols-outlined text-primary-dim text-2xl">image</span> | |
| </div> | |
| <div> | |
| <h4 class="font-headline text-sm font-bold text-on-surface">ImageAgent</h4> | |
| <!-- 🔥 dinámico --> | |
| <span id="imageAgentProvider" class="text-[10px] text-secondary font-bold uppercase tracking-widest">Idle</span> | |
| </div> | |
| </div> | |
| <span class="material-symbols-outlined text-primary text-lg">auto_fix_high</span> | |
| </div> | |
| <!-- 🔥 TERMINAL DEL AGENTE --> | |
| <div id="imageAgentTerminal" class="bg-surface-container-lowest p-3 rounded mb-4 font-mono text-[10px] text-on-surface-variant h-24 overflow-y-auto border border-outline-variant/20"> | |
| <p class="opacity-50">>> Waiting...</p> | |
| </div> | |
| <!-- 🔥 CONTENEDOR DE IMÁGENES --> | |
| <div id="imageAgentImages" class="mt-2"></div> | |
| <div class="flex justify-between items-center text-[10px] font-bold uppercase tracking-widest text-on-surface-variant"> | |
| <span id="imageAgentModel">---</span> | |
| <span id="imageAgentLoad">Load: 0%</span> | |
| </div> | |
| </div> | |
| <!--<div class="glass-card rounded p-5 hover:bg-surface-container-high transition-all duration-300 group"> | |
| <div class="flex items-start justify-between mb-4"> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-12 h-12 rounded bg-surface border border-outline-variant overflow-hidden group-hover:border-primary/50 transition-colors flex items-center justify-center"> | |
| <span class="material-symbols-outlined text-primary-dim text-2xl">image</span> | |
| </div> | |
| <div> | |
| <h4 class="font-headline text-sm font-bold text-on-surface">ImageAgent</h4> | |
| <span class="text-[10px] text-secondary font-bold uppercase tracking-widest">Gemini</span> ORIGINAL | |
| </div> | |
| </div> | |
| <span class="material-symbols-outlined text-primary text-lg">auto_fix_high</span> | |
| </div> | |
| <div class="bg-surface-container-lowest p-3 rounded mb-4 font-mono text-[10px] text-on-surface-variant h-20 overflow-hidden leading-relaxed border border-outline-variant/20"> | |
| <p class="text-primary-dim opacity-70">>> Processing queries...</p> | |
| <p class="text-secondary">>> Image queries ready.</p> | |
| <p class="text-primary-dim opacity-70">>> Rendering prompt v2.5</p> | |
| </div> | |
| <div class="flex justify-between items-center text-[10px] font-bold uppercase tracking-widest text-on-surface-variant"> | |
| <span>Gemini-2.5-Pro</span> | |
| <span>Load: 54%</span> | |
| </div> | |
| </div> | |
| <!-- Agent 6: System Node --> | |
| <div class="glass-card rounded p-5 opacity-80 hover:bg-surface-container-high transition-all duration-300 group border-l-2 border-outline"> | |
| <div class="flex items-start justify-between mb-4"> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-12 h-12 rounded bg-surface border border-outline-variant overflow-hidden flex items-center justify-center"> | |
| <span class="material-symbols-outlined text-outline text-2xl">hub</span> | |
| </div> | |
| <div> | |
| <h4 class="font-headline text-sm font-bold text-on-surface">System Node</h4> | |
| <span class="text-[10px] text-outline font-bold uppercase tracking-widest">Standby</span> | |
| </div> | |
| </div> | |
| <span class="material-symbols-outlined text-outline text-lg">potted_plant</span> | |
| </div> | |
| <div class="bg-surface-container-lowest p-3 rounded mb-4 font-mono text-[10px] text-on-surface-variant/40 h-20 overflow-hidden leading-relaxed border border-outline-variant/10"> | |
| <p>-- STANDBY MODE --</p> | |
| <p>-- Awaiting instruction...</p> | |
| </div> | |
| <div class="flex justify-between items-center text-[10px] font-bold uppercase tracking-widest text-on-surface-variant/40"> | |
| <span>Cluster XC-909</span> | |
| <span>Load: 0%</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Bottom Section: Response History & Execution Log --> | |
| <section class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Response History --> | |
| <div class="lg:col-span-2 glass-card p-6 rounded"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="font-headline text-xs font-black uppercase tracking-widest flex items-center gap-2"> | |
| <span class="material-symbols-outlined text-primary">history_edu</span> | |
| Response History | |
| </h3> | |
| <span class="text-[10px] font-bold text-primary uppercase border border-primary/20 px-2 py-0.5 rounded">Live Feed</span> | |
| </div> | |
| <div class="space-y-3 max-h-64 overflow-y-auto pr-2 custom-scrollbar"> | |
| <div class="flex flex-col gap-1 p-3 bg-surface-container-low border border-outline-variant/10 rounded"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-[10px] font-bold text-primary-dim uppercase tracking-tighter">Backend</span> | |
| <span class="text-[9px] text-outline uppercase">14:32:01</span> | |
| </div> | |
| <p class="text-sm text-on-surface-variant italic">"API Script generated successfully. Connecting to PostgreSQL node..."</p> | |
| </div> | |
| <div class="flex flex-col gap-1 p-3 bg-surface-container-low border border-outline-variant/10 rounded"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-[10px] font-bold text-secondary uppercase tracking-tighter">ImageAgent</span> | |
| <span class="text-[9px] text-outline uppercase">14:31:45</span> | |
| </div> | |
| <p class="text-sm text-on-surface-variant italic">"Image queries ready: ['cyberpunk dashboard', 'neural network visualization']"</p> | |
| </div> | |
| <div class="flex flex-col gap-1 p-3 bg-surface-container-low border border-outline-variant/10 rounded"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-[10px] font-bold text-tertiary uppercase tracking-tighter">Writer</span> | |
| <span class="text-[9px] text-outline uppercase">14:30:12</span> | |
| </div> | |
| <p class="text-sm text-on-surface-variant italic">"Executive summary drafted. Integrating Analyst data into Section 3."</p> | |
| </div> | |
| <div class="flex flex-col gap-1 p-3 bg-surface-container-low border border-outline-variant/10 rounded"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-[10px] font-bold text-primary uppercase tracking-tighter">Analyst</span> | |
| <span class="text-[9px] text-outline uppercase">14:28:55</span> | |
| </div> | |
| <p class="text-sm text-on-surface-variant italic">"Risk assessment complete: Mitigation strategies for node latency identified."</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Task Execution Log --> | |
| <div class="glass-card p-6 rounded"> | |
| <h3 class="font-headline text-xs font-black uppercase tracking-widest mb-6">Execution Log</h3> | |
| <div class="space-y-4"> | |
| <div class="flex gap-3 items-start p-2 hover:bg-surface-container transition-colors rounded group"> | |
| <div class="mt-1 w-2 h-2 rounded-full bg-secondary"></div> | |
| <div> | |
| <p class="text-xs font-bold text-on-surface">Data Refinement Complete</p> | |
| <p class="text-[10px] text-on-surface-variant font-mono">Backend | Hash: #AF920</p> | |
| </div> | |
| <span class="ml-auto text-[9px] font-bold text-outline uppercase tracking-tighter">2m ago</span> | |
| </div> | |
| <div class="flex gap-3 items-start p-2 hover:bg-surface-container transition-colors rounded group"> | |
| <div class="mt-1 w-2 h-2 rounded-full bg-secondary"></div> | |
| <div> | |
| <p class="text-xs font-bold text-on-surface">Layout Matrix Validated</p> | |
| <p class="text-[10px] text-on-surface-variant font-mono">Frontend | Hash: #BE841</p> | |
| </div> | |
| <span class="ml-auto text-[9px] font-bold text-outline uppercase tracking-tighter">8m ago</span> | |
| </div> | |
| <div class="flex gap-3 items-start p-2 hover:bg-surface-container transition-colors rounded group"> | |
| <div class="mt-1 w-2 h-2 rounded-full bg-secondary"></div> | |
| <div> | |
| <p class="text-xs font-bold text-on-surface">Visual Prompt Sync</p> | |
| <p class="text-[10px] text-on-surface-variant font-mono">ImageAgent | Hash: #DD129</p> | |
| </div> | |
| <span class="ml-auto text-[9px] font-bold text-outline uppercase tracking-tighter">14m ago</span> | |
| </div> | |
| <div class="flex gap-3 items-start p-2 hover:bg-surface-container transition-colors rounded group opacity-50"> | |
| <div class="mt-1 w-2 h-2 rounded-full bg-outline"></div> | |
| <div> | |
| <p class="text-xs font-bold text-on-surface">Cache Purge</p> | |
| <p class="text-[10px] text-on-surface-variant font-mono">System | Hash: #EE002</p> | |
| </div> | |
| <span class="ml-auto text-[9px] font-bold text-outline uppercase tracking-tighter">21m ago</span> | |
| </div> | |
| </div> | |
| <button class="w-full mt-6 py-2 border border-outline-variant/30 text-[10px] uppercase font-black tracking-widest text-primary hover:bg-primary/5 transition-all"> | |
| View Comprehensive Log | |
| </button> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Floating Action Button --> | |
| <button class="fixed bottom-8 right-8 w-14 h-14 rounded-full bg-primary-container text-on-primary-fixed shadow-[0_0_20px_rgba(0,241,254,0.4)] flex items-center justify-center group hover:scale-110 active:scale-95 transition-all z-50"> | |
| <span class="material-symbols-outlined text-2xl font-bold">add</span> | |
| </button> | |
| <!-- 3. SCRIPT FINAL (ANTES DE </body>) --> | |
| <script> | |
| const terminal = document.getElementById("terminal"); | |
| const input = document.getElementById("terminalInput"); | |
| // helper para escribir líneas | |
| function writeLine(text, type="system") { | |
| let color = "text-on-surface-variant"; | |
| if (type === "user") color = "text-primary"; | |
| if (type === "manager") color = "text-secondary"; | |
| if (type === "system") color = "text-on-surface-variant"; | |
| terminal.innerHTML += `<p class="${color}">${text}</p>`; | |
| terminal.scrollTop = terminal.scrollHeight; | |
| } | |
| // evento ENTER | |
| input.addEventListener("keydown", async function(e) { | |
| if (e.key === "Enter") { | |
| e.preventDefault(); | |
| const task = input.value.trim(); | |
| if (!task) return; | |
| input.value = ""; | |
| // 👤 Usuario | |
| writeLine(`> Usuario: ${task}`, "user"); | |
| // ⚙️ Sistema | |
| writeLine("> Sistema: Analizando solicitud...", "system"); | |
| // 🔥 MANAGER | |
| const managerRes = await fetch("/api/manager", { | |
| method: "POST", | |
| headers: {"Content-Type": "application/json"}, | |
| body: JSON.stringify({ task }) | |
| }); | |
| const managerData = await managerRes.json(); | |
| document.getElementById("managerProvider").innerText = | |
| managerData.provider || "Unknown"; | |
| document.getElementById("managerModel").innerText = | |
| managerData.model || "Unknown Model"; | |
| writeLine(`> Agente Maestro: ${managerData.response}`, "manager"); | |
| if (managerData.delegate && managerData.delegate.length > 0) { | |
| writeLine( | |
| `> Sistema: Delegando a ${managerData.delegate.join(", ")}`, | |
| "system" | |
| ); | |
| } | |
| // ⚙️ Sistema ejecutando | |
| writeLine("> Sistema: Ejecutando agentes...", "system"); | |
| // 🔥 MISIÓN COMPLETA | |
| const missionRes = await fetch("/api/mission", { | |
| method: "POST", | |
| headers: {"Content-Type": "application/json"}, | |
| body: JSON.stringify({ task }) | |
| }); | |
| const data = await missionRes.json(); | |
| // resultados por agente | |
| if (!data.results || data.results.length === 0) { | |
| writeLine("> Sistema: No se requirieron agentes.", "system"); | |
| } else { | |
| data.results.forEach(r => { | |
| const agentName = r.agent || "unknown_agent"; | |
| if (r.success) { | |
| writeLine(`> ${agentName}: OK`, "manager"); | |
| } else { | |
| writeLine(`> ${agentName}: ERROR`, "system"); | |
| } | |
| if (r.response) { | |
| writeLine(`> ${r.response.substring(0,150)}`, "system"); | |
| } | |
| if (r.agent === "image_agent") { | |
| // 🎯 actualizar provider | |
| document.getElementById("imageAgentProvider").innerText = "Gemini"; | |
| document.getElementById("imageAgentModel").innerText = "Gemini-2.5-Pro"; | |
| const terminal = document.getElementById("imageAgentTerminal"); | |
| const container = document.getElementById("imageAgentImages"); | |
| // limpiar | |
| terminal.innerHTML = ""; | |
| container.innerHTML = ""; | |
| // 🧠 proceso | |
| terminal.innerHTML += `<p>> Detectando intención de imagen...</p>`; | |
| terminal.innerHTML += `<p class="text-secondary">> Generando prompt...</p>`; | |
| terminal.innerHTML += `<p>> Renderizando imagen...</p>`; | |
| // ✅ SI HAY IMÁGENES | |
| if (r.image_urls && r.image_urls.length > 0) { | |
| r.image_urls.forEach(url => { | |
| container.innerHTML += ` | |
| <div class="relative group mt-3 inline-block"> | |
| <!-- Imagen --> | |
| <img src="${url}" | |
| class="rounded shadow w-40 transition-transform duration-300 group-hover:scale-105" /> | |
| <!-- Hover overlay --> | |
| <div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 flex flex-col justify-center items-center gap-2 transition"> | |
| <a href="${url}" target="_blank" | |
| class="bg-white text-black px-3 py-1 text-xs rounded"> | |
| Ver | |
| </a> | |
| <a href="${url}" download | |
| class="bg-primary text-black px-3 py-1 text-xs rounded"> | |
| Descargar | |
| </a> | |
| </div> | |
| </div> | |
| `; | |
| }); | |
| terminal.innerHTML += `<p class="text-secondary">> Imagen generada ✔</p>`; | |
| } | |
| // ⚠️ SI NO HAY IMÁGENES PERO HAY TEXTO | |
| else if (r.response) { | |
| terminal.innerHTML += ` | |
| <p class="text-yellow-400"> | |
| > No se generó imagen, mostrando descripción: | |
| </p> | |
| <p>${r.response}</p> | |
| `; | |
| } | |
| // ❌ ERROR REAL | |
| else { | |
| terminal.innerHTML += ` | |
| <p class="text-red-400"> | |
| > Error generando imagen | |
| </p> | |
| `; | |
| } | |
| } | |
| }); | |
| } | |
| writeLine("> Sistema: Misión completada ✔", "system"); | |
| } | |
| }); | |
| </script> | |
| </body></html> |