Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="CivicAI: Multi-Agent Society Decision & Resource Management Dashboard"> | |
| <title>CivicAI — Society Simulator Dashboard</title> | |
| <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;800&display=swap" rel="stylesheet"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script> | |
| <link rel="stylesheet" href="/dashboard/index.css"> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header id="main-header"> | |
| <div class="header-left"> | |
| <div class="logo-icon">🏛</div> | |
| <div class="header-text"> | |
| <h1>CivicAI</h1> | |
| <p class="subtitle">Multi-Agent Society Decision Engine</p> | |
| </div> | |
| </div> | |
| <div class="header-center"> | |
| <div class="status-badge" id="status-badge"> | |
| <span class="status-dot"></span> | |
| <span id="status-text">Ready</span> | |
| </div> | |
| <div class="turn-display"> | |
| <span class="turn-label">TURN</span> | |
| <span class="turn-number" id="turn-number">0</span> | |
| <span class="turn-max">/ <span id="turn-max-display">50</span></span> | |
| </div> | |
| </div> | |
| <div class="header-right"> | |
| <div class="reward-display"> | |
| <span class="reward-label">TOTAL REWARD</span> | |
| <span class="reward-value" id="total-reward">0.000</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Controls Bar --> | |
| <div id="controls-bar"> | |
| <div class="control-group"> | |
| <label for="task-select">TASK</label> | |
| <select id="task-select"> | |
| <option value="stabilize_economy">🟢 Economic Stability (Easy)</option> | |
| <option value="manage_pandemic">🟡 Pandemic Management (Medium)</option> | |
| <option value="control_crisis">🔴 Social Crisis (Hard)</option> | |
| </select> | |
| </div> | |
| <div class="control-group" style="display: flex; align-items: center; gap: 10px; background: rgba(16, 185, 129, 0.1); padding: 4px 12px; border-radius: 8px; border: 1px solid rgba(16, 185, 129, 0.4); box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);"> | |
| <label for="turns-input" style="color: #10b981; font-weight: 700; text-shadow: 0 0 8px rgba(16,185,129,0.5);">TURNS</label> | |
| <input type="number" id="turns-input" value="50" min="5" max="200" style="width: 120px; background: rgba(15, 23, 42, 0.9); border: 2px solid #10b981; border-radius: 6px; color: #fff; padding: 4px 8px; font-family: 'Inter', sans-serif; font-weight: bold; font-size: 14px; text-align: center; outline: none; box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 0 10px rgba(16,185,129,0.3);"> | |
| <button id="btn-start-nav" class="btn btn-glow" style="padding: 4px 16px; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; border-radius: 6px;" onclick="runFullEpisode()">▶ START</button> | |
| </div> | |
| <div class="control-group"> | |
| <label for="speed-slider">SPEED</label> | |
| <input type="range" id="speed-slider" min="100" max="2000" value="800" step="100"> | |
| <span id="speed-label">800ms</span> | |
| </div> | |
| <div class="btn-group"> | |
| <button id="btn-reset" class="btn btn-secondary" onclick="resetEnv()">↺ Reset</button> | |
| <button id="btn-step" class="btn btn-primary" onclick="runStep()">▶ Step</button> | |
| <button id="btn-autoplay" class="btn btn-accent" onclick="toggleAutoplay()">⏩ Auto</button> | |
| <button id="btn-episode" class="btn btn-glow" onclick="runFullEpisode()">🚀 Start Simulation</button> | |
| </div> | |
| </div> | |
| <!-- Main Content Grid --> | |
| <main id="dashboard-grid"> | |
| <!-- Stats Panel --> | |
| <section id="stats-panel" class="panel"> | |
| <h2 class="panel-title">📊 Society Metrics</h2> | |
| <div class="stats-grid"> | |
| <div class="stat-card" id="stat-population"> | |
| <div class="stat-icon">👥</div> | |
| <span class="stat-label">Population</span> | |
| <span class="stat-value" id="val-population">--</span> | |
| </div> | |
| <div class="stat-card" id="stat-gdp"> | |
| <div class="stat-icon">💰</div> | |
| <span class="stat-label">GDP</span> | |
| <span class="stat-value" id="val-gdp">--</span> | |
| </div> | |
| <div class="stat-card highlight-cyan" id="stat-employment"> | |
| <div class="stat-icon">💼</div> | |
| <span class="stat-label">Employment</span> | |
| <span class="stat-value" id="val-employment">--</span> | |
| <div class="stat-bar"><div class="stat-bar-fill" id="bar-employment" style="width:0%"></div></div> | |
| </div> | |
| <div class="stat-card highlight-red" id="stat-inflation"> | |
| <div class="stat-icon">📈</div> | |
| <span class="stat-label">Inflation</span> | |
| <span class="stat-value" id="val-inflation">--</span> | |
| <div class="stat-bar"><div class="stat-bar-fill bar-red" id="bar-inflation" style="width:0%"></div></div> | |
| </div> | |
| <div class="stat-card highlight-green" id="stat-satisfaction"> | |
| <div class="stat-icon">😊</div> | |
| <span class="stat-label">Satisfaction</span> | |
| <span class="stat-value" id="val-satisfaction">--</span> | |
| <div class="stat-bar"><div class="stat-bar-fill bar-green" id="bar-satisfaction" style="width:0%"></div></div> | |
| </div> | |
| <div class="stat-card highlight-purple" id="stat-health"> | |
| <div class="stat-icon">🏥</div> | |
| <span class="stat-label">Health</span> | |
| <span class="stat-value" id="val-health">--</span> | |
| <div class="stat-bar"><div class="stat-bar-fill bar-purple" id="bar-health" style="width:0%"></div></div> | |
| </div> | |
| <div class="stat-card highlight-orange" id="stat-crime"> | |
| <div class="stat-icon">🚨</div> | |
| <span class="stat-label">Crime</span> | |
| <span class="stat-value" id="val-crime">--</span> | |
| <div class="stat-bar"><div class="stat-bar-fill bar-orange" id="bar-crime" style="width:0%"></div></div> | |
| </div> | |
| <div class="stat-card" id="stat-budget"> | |
| <div class="stat-icon">🏦</div> | |
| <span class="stat-label">Budget</span> | |
| <span class="stat-value" id="val-budget">--</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Charts Panel --> | |
| <section id="charts-panel" class="panel"> | |
| <h2 class="panel-title">📈 Trend Analysis</h2> | |
| <div class="chart-tabs"> | |
| <button class="chart-tab active" data-chart="main" onclick="switchChart('main')">Overview</button> | |
| <button class="chart-tab" data-chart="reward" onclick="switchChart('reward')">Rewards</button> | |
| <button class="chart-tab" data-chart="emergent" onclick="switchChart('emergent')">Emergent</button> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="main-chart"></canvas> | |
| <canvas id="reward-chart" style="display:none"></canvas> | |
| <canvas id="emergent-chart" style="display:none"></canvas> | |
| </div> | |
| </section> | |
| <!-- Resources Panel --> | |
| <section id="resources-panel" class="panel"> | |
| <h2 class="panel-title">📦 Resources</h2> | |
| <div class="resource-bars"> | |
| <div class="resource-item"> | |
| <span class="resource-label">🌾 Food</span> | |
| <div class="resource-bar"><div class="resource-fill food" id="res-food" style="width:0%"></div></div> | |
| <span class="resource-pct" id="pct-food">--</span> | |
| </div> | |
| <div class="resource-item"> | |
| <span class="resource-label">⚡ Energy</span> | |
| <div class="resource-bar"><div class="resource-fill energy" id="res-energy" style="width:0%"></div></div> | |
| <span class="resource-pct" id="pct-energy">--</span> | |
| </div> | |
| <div class="resource-item"> | |
| <span class="resource-label">💊 Medical</span> | |
| <div class="resource-bar"><div class="resource-fill medical" id="res-medical" style="width:0%"></div></div> | |
| <span class="resource-pct" id="pct-medical">--</span> | |
| </div> | |
| <div class="resource-item"> | |
| <span class="resource-label">🏗 Infra</span> | |
| <div class="resource-bar"><div class="resource-fill infra" id="res-infra" style="width:0%"></div></div> | |
| <span class="resource-pct" id="pct-infra">--</span> | |
| </div> | |
| </div> | |
| <!-- Events --> | |
| <h3 class="sub-title">⚡ Active Events</h3> | |
| <div id="events-list" class="events-list"> | |
| <div class="event-empty">No active events</div> | |
| </div> | |
| </section> | |
| <!-- Debate Panel --> | |
| <section id="debate-panel" class="panel"> | |
| <h2 class="panel-title">🗣 Agent Debate</h2> | |
| <div id="debate-container" class="debate-container"> | |
| <div class="debate-empty"> | |
| <div class="debate-icon">🤖</div> | |
| <p>Run a step to see agents debate policies</p> | |
| </div> | |
| </div> | |
| <div id="consensus-bar" class="consensus-bar" style="display:none"> | |
| <span class="consensus-label">Consensus</span> | |
| <div class="consensus-track"><div class="consensus-fill" id="consensus-fill"></div></div> | |
| <span class="consensus-pct" id="consensus-pct">0%</span> | |
| </div> | |
| </section> | |
| <!-- Policy Log --> | |
| <section id="policy-panel" class="panel"> | |
| <h2 class="panel-title">📋 Policy Log</h2> | |
| <div id="policy-log" class="policy-log"> | |
| <div class="policy-empty">No policies executed yet</div> | |
| </div> | |
| </section> | |
| <!-- Emergent Insights --> | |
| <section id="emergent-panel" class="panel"> | |
| <h2 class="panel-title">🧠 Emergent Insights</h2> | |
| <div class="emergent-metrics"> | |
| <div class="emergent-card"> | |
| <span class="em-label">Wealth Inequality (Gini)</span> | |
| <span class="em-value" id="em-gini">--</span> | |
| <div class="em-bar"><div class="em-fill gini-fill" id="em-gini-bar" style="width:0%"></div></div> | |
| </div> | |
| <div class="emergent-card"> | |
| <span class="em-label">Social Unrest</span> | |
| <span class="em-value" id="em-unrest">--</span> | |
| <div class="em-bar"><div class="em-fill unrest-fill" id="em-unrest-bar" style="width:0%"></div></div> | |
| </div> | |
| <div class="emergent-card"> | |
| <span class="em-label">Cooperation Index</span> | |
| <span class="em-value" id="em-coop">--</span> | |
| <div class="em-bar"><div class="em-fill coop-fill" id="em-coop-bar" style="width:0%"></div></div> | |
| </div> | |
| </div> | |
| <div id="insights-log" class="insights-log"> | |
| <p class="insight-empty">Insights will appear as patterns emerge</p> | |
| </div> | |
| </section> | |
| </main> | |
| <footer id="main-footer"> | |
| <span>CivicAI v1.0.0 — Multi-Agent Society Decision & Resource Management Environment</span> | |
| <span class="footer-tag">OpenEnv Compatible • Built for Competition 🏆</span> | |
| </footer> | |
| <script src="/dashboard/app.js?v=2"></script> | |
| </body> | |
| </html> | |