Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Multi-Agent System</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header class="header"> | |
| <div class="header-left"> | |
| <div class="logo"> | |
| <svg width="28" height="28" viewBox="0 0 28 28" fill="none"> | |
| <circle cx="14" cy="14" r="13" stroke="#7c3aed" stroke-width="1.5"/> | |
| <circle cx="14" cy="8" r="3" fill="#7c3aed"/> | |
| <circle cx="7" cy="20" r="3" fill="#2563eb"/> | |
| <circle cx="21" cy="20" r="3" fill="#06b6d4"/> | |
| <line x1="14" y1="11" x2="8.5" y2="18" stroke="#7c3aed" stroke-width="1" stroke-opacity="0.6"/> | |
| <line x1="14" y1="11" x2="19.5" y2="18" stroke="#7c3aed" stroke-width="1" stroke-opacity="0.6"/> | |
| <line x1="10" y1="20" x2="18" y2="20" stroke="#2563eb" stroke-width="1" stroke-opacity="0.4"/> | |
| </svg> | |
| <span class="logo-text">Multi-Agent System</span> | |
| </div> | |
| <span class="powered-by">Powered by <span class="gemini-badge">Groq · Llama 3.3 70B</span></span> | |
| </div> | |
| <div class="header-right"> | |
| <div class="health-indicator" id="healthDot" title="Backend status"></div> | |
| <span class="health-label" id="healthLabel">Connecting…</span> | |
| <button class="btn-icon" id="themeToggle" title="Toggle theme">☀</button> | |
| </div> | |
| </header> | |
| <!-- Error Banner --> | |
| <div class="error-banner" id="errorBanner" style="display:none"> | |
| <span class="error-banner-icon">⚠</span> | |
| <span id="errorBannerMsg"></span> | |
| <button class="error-banner-close" id="errorBannerClose">✕</button> | |
| </div> | |
| <!-- Main Layout --> | |
| <main class="layout"> | |
| <!-- LEFT PANEL: Input + History --> | |
| <aside class="panel panel-left"> | |
| <section class="input-section"> | |
| <h2 class="section-title">New Task</h2> | |
| <div class="textarea-wrapper"> | |
| <textarea | |
| id="taskInput" | |
| placeholder="Describe a complex task for the agents to solve…" | |
| rows="5" | |
| ></textarea> | |
| <span class="char-count" id="charCount">0 / 2000</span> | |
| </div> | |
| <div class="sample-tasks"> | |
| <span class="label-small">Quick examples</span> | |
| <div class="chips" id="sampleChips"> | |
| <button class="chip">Research quantum computing breakthroughs in 2024</button> | |
| <button class="chip">Analyze pros and cons of microservices vs monolith</button> | |
| <button class="chip">Write a Python script to parse and visualize CSV data</button> | |
| <button class="chip">Summarize the latest AI safety research findings</button> | |
| </div> | |
| </div> | |
| <div class="submit-row"> | |
| <label class="toggle-row"> | |
| <input type="checkbox" id="streamToggle" checked /> | |
| <span class="toggle-track"><span class="toggle-thumb"></span></span> | |
| <span>Stream live</span> | |
| </label> | |
| <button class="btn-primary" id="submitBtn"> | |
| <span id="submitText">Run Agents</span> | |
| <svg class="btn-icon-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none"> | |
| <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> | |
| </svg> | |
| </button> | |
| </div> | |
| </section> | |
| <section class="history-section"> | |
| <h2 class="section-title">Recent Tasks</h2> | |
| <div class="task-history" id="taskHistory"> | |
| <p class="empty-state">No tasks yet</p> | |
| </div> | |
| </section> | |
| </aside> | |
| <!-- CENTER PANEL: Workflow + Output --> | |
| <section class="panel panel-center"> | |
| <!-- Agent Graph --> | |
| <div class="workflow-card"> | |
| <div class="card-header"> | |
| <span class="card-title">Agent Workflow</span> | |
| <span class="status-badge" id="globalStatus">Idle</span> | |
| </div> | |
| <div class="agent-graph" id="agentGraph"> | |
| <div class="graph-track"> | |
| <div class="agent-node" id="node-memory_retrieve" data-agent="memory_retrieve"> | |
| <div class="node-icon">🧠</div> | |
| <div class="node-label">Memory</div> | |
| <div class="node-sub">Retrieve</div> | |
| <div class="node-state idle">idle</div> | |
| </div> | |
| <div class="graph-arrow"></div> | |
| <div class="agent-node" id="node-planner" data-agent="planner"> | |
| <div class="node-icon">📋</div> | |
| <div class="node-label">Planner</div> | |
| <div class="node-sub">Decompose</div> | |
| <div class="node-state idle">idle</div> | |
| </div> | |
| <div class="graph-arrow"></div> | |
| <div class="agent-node" id="node-executor" data-agent="executor"> | |
| <div class="node-icon">⚙️</div> | |
| <div class="node-label">Executor</div> | |
| <div class="node-sub">Execute</div> | |
| <div class="node-state idle">idle</div> | |
| </div> | |
| <div class="graph-arrow"></div> | |
| <div class="agent-node" id="node-critic" data-agent="critic"> | |
| <div class="node-icon">🔍</div> | |
| <div class="node-label">Critic</div> | |
| <div class="node-sub">Reflect</div> | |
| <div class="node-state idle">idle</div> | |
| </div> | |
| <div class="graph-arrow"></div> | |
| <div class="agent-node" id="node-memory_store" data-agent="memory_store"> | |
| <div class="node-icon">💾</div> | |
| <div class="node-label">Memory</div> | |
| <div class="node-sub">Store</div> | |
| <div class="node-state idle">idle</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Plan Steps --> | |
| <div class="plan-card" id="planCard" style="display:none"> | |
| <div class="card-header"> | |
| <span class="card-title">Execution Plan</span> | |
| <span id="planProgress" class="plan-progress">0 / 0 steps</span> | |
| </div> | |
| <div class="plan-steps" id="planSteps"></div> | |
| </div> | |
| <!-- Final Output --> | |
| <div class="output-card" id="outputCard" style="display:none"> | |
| <div class="card-header"> | |
| <span class="card-title">Final Output</span> | |
| <div class="output-actions"> | |
| <span class="quality-badge" id="qualityBadge"></span> | |
| <button class="btn-ghost" id="copyBtn">Copy</button> | |
| </div> | |
| </div> | |
| <div class="output-content" id="outputContent"></div> | |
| </div> | |
| </section> | |
| <!-- RIGHT PANEL: Live Events + Metrics --> | |
| <aside class="panel panel-right"> | |
| <section class="events-section"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Live Events</h2> | |
| <button class="btn-ghost-sm" id="clearEvents">Clear</button> | |
| </div> | |
| <div class="event-log" id="eventLog"> | |
| <p class="empty-state">Events will appear here</p> | |
| </div> | |
| </section> | |
| <section class="metrics-section"> | |
| <h2 class="section-title">Metrics</h2> | |
| <div class="metrics-grid"> | |
| <div class="metric-card"> | |
| <span class="metric-value" id="metricTokens">—</span> | |
| <span class="metric-label">Tokens</span> | |
| </div> | |
| <div class="metric-card"> | |
| <span class="metric-value" id="metricSteps">—</span> | |
| <span class="metric-label">Steps</span> | |
| </div> | |
| <div class="metric-card"> | |
| <span class="metric-value" id="metricIter">—</span> | |
| <span class="metric-label">Iterations</span> | |
| </div> | |
| <div class="metric-card"> | |
| <span class="metric-value" id="metricScore">—</span> | |
| <span class="metric-label">Quality</span> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="tools-section"> | |
| <h2 class="section-title">Available Tools</h2> | |
| <div class="tool-list"> | |
| <div class="tool-item"><span class="tool-dot"></span>web_search</div> | |
| <div class="tool-item"><span class="tool-dot"></span>fetch_url</div> | |
| <div class="tool-item"><span class="tool-dot"></span>calculate</div> | |
| <div class="tool-item"><span class="tool-dot"></span>run_python</div> | |
| <div class="tool-item"><span class="tool-dot"></span>write_file</div> | |
| <div class="tool-item"><span class="tool-dot"></span>read_file</div> | |
| <div class="tool-item"><span class="tool-dot"></span>get_datetime</div> | |
| <div class="tool-item"><span class="tool-dot"></span>synthesize</div> | |
| </div> | |
| </section> | |
| </aside> | |
| </main> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> | |