Spaces:
Running
Running
Design a next-generation Multi-Agent AI Collaboration Platform that redefines the paradigm of human-AI workflows through a revolutionary, production-grade interface. This is not an iteration—it is a complete reimagining of how autonomous agents, human operators, and complex data systems visually coexist and interact.
2bf98f9 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Synapse Canvas — Multi-Agent AI Collaboration Platform</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <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> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| ocean: { | |
| 900: '#0A4F4F', | |
| 800: '#0D6B6B', | |
| 700: '#108888', | |
| 600: '#14A5A5', | |
| 500: '#17C2C2', | |
| }, | |
| coral: { | |
| 500: '#FF6B6B', | |
| 400: '#FF8585', | |
| 300: '#FF9F9F', | |
| }, | |
| charcoal: { | |
| 950: '#000000', | |
| 900: '#0A0A0F', | |
| 800: '#141419', | |
| 700: '#1A1D21', | |
| 600: '#252830', | |
| }, | |
| vermillion: { | |
| 500: '#E85D04', | |
| 400: '#F0701A', | |
| }, | |
| citron: { | |
| 500: '#CCFF00', | |
| 400: '#D4FF33', | |
| }, | |
| agent: { | |
| autonomous: '#F59E0B', | |
| human: '#3B82F6', | |
| system: '#64748B', | |
| execution: '#10B981', | |
| } | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'system-ui', 'sans-serif'], | |
| mono: ['JetBrains Mono', 'monospace'], | |
| display: ['Space Grotesk', 'sans-serif'], | |
| }, | |
| animation: { | |
| 'neural-pulse': 'neuralPulse 2s ease-in-out infinite', | |
| 'data-flow': 'dataFlow 1.5s ease-in-out infinite', | |
| 'bloom-glow': 'bloomGlow 3s ease-in-out infinite', | |
| 'agent-breathe': 'agentBreathe 4s ease-in-out infinite', | |
| 'orbit': 'orbit 20s linear infinite', | |
| }, | |
| keyframes: { | |
| neuralPulse: { | |
| '0%, 100%': { opacity: 0.4, transform: 'scale(1)' }, | |
| '50%': { opacity: 1, transform: 'scale(1.05)' }, | |
| }, | |
| dataFlow: { | |
| '0%': { strokeDashoffset: '100' }, | |
| '100%': { strokeDashoffset: '0' }, | |
| }, | |
| bloomGlow: { | |
| '0%, 100%': { filter: 'blur(20px) opacity(0.5)' }, | |
| '50%': { filter: 'blur(30px) opacity(0.8)' }, | |
| }, | |
| agentBreathe: { | |
| '0%, 100%': { transform: 'scale(0.98)', opacity: 0.9 }, | |
| '50%': { transform: 'scale(1.02)', opacity: 1 }, | |
| }, | |
| orbit: { | |
| '0%': { transform: 'rotate(0deg)' }, | |
| '100%': { transform: 'rotate(360deg)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </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=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| </head> | |
| <body class="bg-charcoal-950 text-zinc-300 font-sans overflow-hidden"> | |
| <!-- Ambient Background Layer --> | |
| <div class="fixed inset-0 pointer-events-none"> | |
| <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top_left,_var(--tw-gradient-stops))] from-ocean-900/20 via-transparent to-transparent"></div> | |
| <div class="absolute top-0 right-0 w-96 h-96 bg-coral-500/10 rounded-full blur-3xl animate-bloom-glow"></div> | |
| <div class="absolute bottom-0 left-0 w-64 h-64 bg-citron-500/5 rounded-full blur-2xl"></div> | |
| <!-- Grid Pattern --> | |
| <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div> | |
| </div> | |
| <!-- Main Application Container --> | |
| <div id="app" class="relative h-screen w-full flex flex-col"> | |
| <!-- Top Navigation Bar --> | |
| <synapse-header></synapse-header> | |
| <!-- Workspace Area --> | |
| <div class="flex-1 flex relative overflow-hidden"> | |
| <!-- Left Sidebar: Agent Palette --> | |
| <synapse-agent-palette></synapse-agent-palette> | |
| <!-- Infinite Canvas --> | |
| <main id="canvas-container" class="flex-1 relative overflow-hidden cursor-grab active:cursor-grabbing"> | |
| <!-- Transform Layer for Pan/Zoom --> | |
| <div id="canvas-transform" class="absolute inset-0 origin-center transition-transform duration-75 ease-out" style="transform: translate(0px, 0px) scale(1);"> | |
| <!-- Canvas Grid --> | |
| <div class="absolute inset-0 opacity-[0.05]" style="background-image: radial-gradient(circle, rgba(255,255,255,0.3) 1px, transparent 1px); background-size: 40px 40px;"></div> | |
| <!-- Connection Layer (SVG) --> | |
| <svg id="connection-layer" class="absolute inset-0 w-full h-full pointer-events-none"> | |
| <defs> | |
| <linearGradient id="flow-gradient" x1="0%" y1="0%" x2="100%" y2="0%"> | |
| <stop offset="0%" stop-color="#0A4F4F" stop-opacity="0.2" /> | |
| <stop offset="50%" stop-color="#CCFF00" stop-opacity="0.6" /> | |
| <stop offset="100%" stop-color="#E85D04" stop-opacity="0.2" /> | |
| </linearGradient> | |
| <filter id="glow"> | |
| <feGaussianBlur stdDeviation="3" result="coloredBlur"/> | |
| <feMerge> | |
| <feMergeNode in="coloredBlur"/> | |
| <feMergeNode in="SourceGraphic"/> | |
| </feMerge> | |
| </filter> | |
| </defs> | |
| <!-- Dynamic connections rendered here --> | |
| </svg> | |
| <!-- Agent Nodes Layer --> | |
| <div id="nodes-layer" class="absolute inset-0"> | |
| <!-- Nodes rendered dynamically --> | |
| </div> | |
| <!-- Floating Context Menu --> | |
| <div id="context-menu" class="absolute hidden bg-charcoal-800/95 backdrop-blur-xl border border-charcoal-600 rounded-xl shadow-2xl p-2 min-w-[200px] z-50"> | |
| <div class="px-3 py-2 text-xs font-medium text-zinc-500 uppercase tracking-wider">Actions</div> | |
| <button class="w-full text-left px-3 py-2 text-sm text-zinc-300 hover:bg-charcoal-700 rounded-lg flex items-center gap-2 transition-colors"> | |
| <i data-feather="zap" class="w-4 h-4 text-citron-500"></i> | |
| Execute Workflow | |
| </button> | |
| <button class="w-full text-left px-3 py-2 text-sm text-zinc-300 hover:bg-charcoal-700 rounded-lg flex items-center gap-2 transition-colors"> | |
| <i data-feather="git-branch" class="w-4 h-4 text-ocean-500"></i> | |
| Fork Agent | |
| </button> | |
| <button class="w-full text-left px-3 py-2 text-sm text-zinc-300 hover:bg-charcoal-700 rounded-lg flex items-center gap-2 transition-colors"> | |
| <i data-feather="shield" class="w-4 h-4 text-coral-500"></i> | |
| Isolate & Debug | |
| </button> | |
| <div class="h-px bg-charcoal-600 my-2"></div> | |
| <button class="w-full text-left px-3 py-2 text-sm text-zinc-400 hover:text-coral-500 hover:bg-coral-500/10 rounded-lg flex items-center gap-2 transition-colors"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| Terminate Agent | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Canvas Controls --> | |
| <div class="absolute bottom-6 right-6 flex flex-col gap-2"> | |
| <button id="zoom-in" class="w-10 h-10 bg-charcoal-800/90 backdrop-blur border border-charcoal-600 rounded-lg flex items-center justify-center text-zinc-400 hover:text-white hover:border-ocean-500 transition-all"> | |
| <i data-feather="plus" class="w-5 h-5"></i> | |
| </button> | |
| <button id="zoom-reset" class="w-10 h-10 bg-charcoal-800/90 backdrop-blur border border-charcoal-600 rounded-lg flex items-center justify-center text-zinc-400 hover:text-white hover:border-ocean-500 transition-all text-xs font-mono"> | |
| 100% | |
| </button> | |
| <button id="zoom-out" class="w-10 h-10 bg-charcoal-800/90 backdrop-blur border border-charcoal-600 rounded-lg flex items-center justify-center text-zinc-400 hover:text-white hover:border-ocean-500 transition-all"> | |
| <i data-feather="minus" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <!-- Mini-map --> | |
| <div class="absolute top-6 right-6 w-48 h-32 bg-charcoal-900/90 backdrop-blur border border-charcoal-700 rounded-lg overflow-hidden"> | |
| <div class="absolute inset-0 opacity-30" style="background-image: radial-gradient(circle, rgba(255,255,255,0.2) 1px, transparent 1px); background-size: 8px 8px;"></div> | |
| <div id="minimap-viewport" class="absolute border-2 border-ocean-500/50 bg-ocean-500/10 rounded" style="left: 20%; top: 20%; width: 40%; height: 40%;"></div> | |
| <!-- Minimap dots for nodes --> | |
| <div class="absolute w-1.5 h-1.5 rounded-full bg-agent-autonomous" style="left: 30%; top: 35%;"></div> | |
| <div class="absolute w-1.5 h-1.5 rounded-full bg-agent-human" style="left: 50%; top: 45%;"></div> | |
| <div class="absolute w-1.5 h-1.5 rounded-full bg-agent-execution" style="left: 40%; top: 55%;"></div> | |
| </div> | |
| </main> | |
| <!-- Right Panel: Inspector --> | |
| <synapse-inspector></synapse-inspector> | |
| </div> | |
| <!-- Bottom Time-Reel --> | |
| <synapse-time-reel></synapse-time-reel> | |
| <!-- Omnibar Command Interface --> | |
| <div id="omnibar" class="fixed bottom-32 left-1/2 -translate-x-1/2 w-[600px] max-w-[90vw] opacity-0 pointer-events-none transition-all duration-300 z-50"> | |
| <div class="bg-charcoal-800/95 backdrop-blur-2xl border border-charcoal-600 rounded-2xl shadow-2xl overflow-hidden"> | |
| <div class="flex items-center gap-3 px-4 py-3 border-b border-charcoal-700"> | |
| <i data-feather="terminal" class="w-5 h-5 text-citron-500"></i> | |
| <input type="text" placeholder="Command agents, query data, or create workflows..." | |
| class="flex-1 bg-transparent text-white placeholder-zinc-500 outline-none font-mono text-sm"> | |
| <span class="text-xs text-zinc-500 px-2 py-1 bg-charcoal-700 rounded">⌘K</span> | |
| </div> | |
| <div class="max-h-64 overflow-y-auto"> | |
| <div class="px-4 py-2 text-xs font-medium text-zinc-500 uppercase tracking-wider">Recent Commands</div> | |
| <button class="w-full text-left px-4 py-3 hover:bg-charcoal-700/50 flex items-center gap-3 transition-colors group"> | |
| <div class="w-8 h-8 rounded-lg bg-agent-autonomous/20 flex items-center justify-center"> | |
| <i data-feather="cpu" class="w-4 h-4 text-agent-autonomous"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="text-sm text-zinc-200 group-hover:text-white">Deploy sentiment analysis agent</div> | |
| <div class="text-xs text-zinc-500">Autonomous • Marketing pipeline</div> | |
| </div> | |
| </button> | |
| <button class="w-full text-left px-4 py-3 hover:bg-charcoal-700/50 flex items-center gap-3 transition-colors group"> | |
| <div class="w-8 h-8 rounded-lg bg-agent-execution/20 flex items-center justify-center"> | |
| <i data-feather="database" class="w-4 h-4 text-agent-execution"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="text-sm text-zinc-200 group-hover:text-white">Sync Q3 financial projections</div> | |
| <div class="text-xs text-zinc-500">Execution • 2.4GB dataset</div> | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Conflict Resolution Modal --> | |
| <div id="conflict-modal" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 hidden items-center justify-center"> | |
| <div class="bg-charcoal-900 border border-charcoal-600 rounded-2xl max-w-2xl w-full mx-4 overflow-hidden"> | |
| <div class="p-6 border-b border-charcoal-700"> | |
| <div class="flex items-center gap-3 mb-2"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-coral-500 to-vermillion-500 flex items-center justify-center animate-pulse"> | |
| <i data-feather="alert-triangle" class="w-5 h-5 text-white"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-white">Agent Conflict Detected</h3> | |
| <p class="text-sm text-zinc-400">Resolution required for workflow integrity</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6 space-y-4"> | |
| <div class="flex gap-4"> | |
| <div class="flex-1 p-4 bg-charcoal-800 rounded-xl border border-agent-autonomous/30"> | |
| <div class="flex items-center gap-2 mb-2"> | |
| <div class="w-2 h-2 rounded-full bg-agent-autonomous animate-pulse"></div> | |
| <span class="text-sm font-medium text-agent-autonomous">Analyzer-7</span> | |
| </div> | |
| <p class="text-sm text-zinc-300">Recommend immediate market exit based on volatility signals. Confidence: 94%</p> | |
| </div> | |
| <div class="flex-1 p-4 bg-charcoal-800 rounded-xl border border-agent-human/30"> | |
| <div class="flex items-center gap-2 mb-2"> | |
| <div class="w-2 h-2 rounded-full bg-agent-human"></div> | |
| <span class="text-sm font-medium text-agent-human">Strategist-3</span> | |
| </div> | |
| <p class="text-sm text-zinc-300">Advocate holding position. Pattern matches 2019 recovery. Confidence: 87%</p> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="h-2 bg-charcoal-700 rounded-full overflow-hidden"> | |
| <div id="conflict-slider-track" class="absolute inset-y-0 left-1/2 w-1 bg-gradient-to-r from-agent-autonomous via-white to-agent-human"></div> | |
| </div> | |
| <input type="range" min="0" max="100" value="50" | |
| class="absolute inset-0 w-full h-full opacity-0 cursor-grab active:cursor-grabbing" | |
| id="conflict-slider"> | |
| <div class="flex justify-between mt-2 text-xs text-zinc-500"> | |
| <span>Follow Analyzer-7</span> | |
| <span id="conflict-value" class="text-white font-mono">50%</span> | |
| <span>Follow Strategist-3</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6 border-t border-charcoal-700 flex gap-3"> | |
| <button class="flex-1 py-3 bg-coral-500 hover:bg-coral-400 text-white rounded-xl font-medium transition-colors"> | |
| Override & Decide | |
| </button> | |
| <button class="px-6 py-3 border border-charcoal-600 hover:bg-charcoal-800 text-zinc-300 rounded-xl transition-colors" onclick="document.getElementById('conflict-modal').classList.add('hidden')"> | |
| Defer | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Component Scripts --> | |
| <script src="components/synapse-header.js"></script> | |
| <script src="components/synapse-agent-palette.js"></script> | |
| <script src="components/synapse-inspector.js"></script> | |
| <script src="components/synapse-time-reel.js"></script> | |
| <script src="components/synapse-agent-node.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |