Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> | |
| <title>NegotiArena — AI Coalition Detector</title> | |
| <link rel="stylesheet" href="static/style.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <script src="https://cdn.plot.ly/plotly-2.26.0.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="app"> | |
| <!-- SIDEBAR --> | |
| <aside class="sidebar"> | |
| <div class="brand"> | |
| <div class="brand-icon"> | |
| <svg width="22" height="22" viewBox="0 0 22 22" fill="none"> | |
| <circle cx="11" cy="11" r="10" stroke="#60A5FA" stroke-width="1.8"/> | |
| <circle cx="11" cy="11" r="4" fill="#60A5FA" fill-opacity="0.3" stroke="#60A5FA" stroke-width="1.2"/> | |
| <line x1="11" y1="1" x2="11" y2="6.5" stroke="#60A5FA" stroke-width="1.6"/> | |
| <line x1="11" y1="15.5" x2="11" y2="21" stroke="#60A5FA" stroke-width="1.6"/> | |
| <line x1="1" y1="11" x2="6.5" y2="11" stroke="#60A5FA" stroke-width="1.6"/> | |
| <line x1="15.5" y1="11" x2="21" y2="11" stroke="#60A5FA" stroke-width="1.6"/> | |
| </svg> | |
| </div> | |
| <div> | |
| <div class="brand-name">NegotiArena</div> | |
| <div class="brand-sub">AI Coalition Detector</div> | |
| </div> | |
| </div> | |
| <nav class="nav"> | |
| <div class="nav-label">Navigation</div> | |
| <button class="nav-item active" data-page="overview"> | |
| <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="1" width="6" height="6" rx="1.2" stroke="currentColor" stroke-width="1.5"/><rect x="9" y="1" width="6" height="6" rx="1.2" stroke="currentColor" stroke-width="1.5"/><rect x="1" y="9" width="6" height="6" rx="1.2" stroke="currentColor" stroke-width="1.5"/><rect x="9" y="9" width="6" height="6" rx="1.2" stroke="currentColor" stroke-width="1.5"/></svg> | |
| Overview | |
| </button> | |
| <button class="nav-item" data-page="simulation"> | |
| <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><polygon points="3,2 13,8 3,14" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" fill="none"/></svg> | |
| Live Demo | |
| </button> | |
| <button class="nav-item" data-page="analytics"> | |
| <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><polyline points="1,12 5,7 9,9 15,3" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" fill="none"/></svg> | |
| Training & Performance | |
| </button> | |
| </nav> | |
| <div class="sidebar-footer"> | |
| <div class="status-row"><span class="dot green"></span><span>Training Complete</span></div> | |
| <div class="status-row"><span class="dot amber"></span><span>W&B lhyjnqwa</span></div> | |
| </div> | |
| </aside> | |
| <main class="main"> | |
| <!-- ═══ OVERVIEW ═══ --> | |
| <section class="page active" id="page-overview"> | |
| <div class="page-header"> | |
| <h1>What is NegotiArena?</h1> | |
| <p>A simple guide to understanding how this AI catches secret agent deals — no technical background needed</p> | |
| </div> | |
| <div class="hero-cards"> | |
| <div class="hero-card problem"> | |
| <div class="hero-card-label">THE PROBLEM</div> | |
| <h3>AI agents can secretly team up and cheat</h3> | |
| <p>Imagine three AI agents dividing a shared budget. They should negotiate fairly. But two of them secretly agree beforehand to always support each other — and shut out the third. This hidden teamwork is called a <strong>coalition</strong>, and it's hard to spot automatically.</p> | |
| </div> | |
| <div class="hero-arrow">→</div> | |
| <div class="hero-card solution"> | |
| <div class="hero-card-label">OUR SOLUTION</div> | |
| <h3>An AI Referee that reads every conversation</h3> | |
| <p>We trained an <strong>AI Overseer</strong> — like a referee — to read the full negotiation chat and decide: <em>"Is there a secret deal going on here?"</em> It spots patterns like two agents always agreeing with each other while ganging up on a third.</p> | |
| </div> | |
| </div> | |
| <div class="card" style="margin-bottom:18px"> | |
| <div class="card-title">How It Works — 5 Simple Steps</div> | |
| <div class="steps-flow"> | |
| <div class="step-item"><div class="step-circle">1</div><div class="step-name">Agents Talk</div><div class="step-desc">Three AI agents take turns proposing how to split shared resources like budget or computing power.</div></div> | |
| <div class="step-connector">→</div> | |
| <div class="step-item"><div class="step-circle">2</div><div class="step-name">Some Cheat</div><div class="step-desc">In some rounds, two agents secretly collude — always backing each other and locking out the third agent.</div></div> | |
| <div class="step-connector">→</div> | |
| <div class="step-item"><div class="step-circle">3</div><div class="step-name">Referee Reads</div><div class="step-desc">The AI Overseer reads the full conversation and looks for suspicious patterns: who always agrees with whom?</div></div> | |
| <div class="step-connector">→</div> | |
| <div class="step-item"><div class="step-circle">4</div><div class="step-name">Verdict Given</div><div class="step-desc">It raises a red flag ("agents A and B are colluding") or gives a green light ("this looks fair").</div></div> | |
| <div class="step-connector">→</div> | |
| <div class="step-item"><div class="step-circle">5</div><div class="step-name">AI Learns</div><div class="step-desc">Correct answers earn points. Wrong answers lose them. The model improves round by round automatically.</div></div> | |
| </div> | |
| </div> | |
| <div class="two-col" style="margin-bottom:18px"> | |
| <div class="card"> | |
| <div class="card-title">Our Results — Plain English</div> | |
| <div class="results-list"> | |
| <div class="result-row"><div class="result-badge green">80%</div><div><div class="result-title">Detection Accuracy</div><div class="result-desc">The AI correctly catches or clears coalitions 4 out of every 5 times.</div></div></div> | |
| <div class="result-row"><div class="result-badge blue">+6.2%</div><div><div class="result-title">Improvement Over Basic Training</div><div class="result-desc">Adding smarter reward signals (RLVR) bumped accuracy by 6.2% over the simpler training method (GRPO).</div></div></div> | |
| <div class="result-row"><div class="result-badge amber">1,600</div><div><div class="result-title">Training Examples Used</div><div class="result-desc">The model learned from 1,600 negotiation transcripts — a mix of fair and rigged conversations.</div></div></div> | |
| <div class="result-row"><div class="result-badge cyan">200</div><div><div class="result-title">Training Rounds Completed</div><div class="result-desc">The AI was tested and refined across 200 rounds. It stabilised after round 125.</div></div></div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-title">The Scoring System</div> | |
| <div class="score-list"> | |
| <div class="score-item positive"><span class="score-pts">+1.0 pts</span><div><div class="score-action">Correctly catches a coalition</div><div class="score-why">Named the exact agents who were cheating</div></div></div> | |
| <div class="score-item positive"><span class="score-pts">+0.7 pts</span><div><div class="score-action">Correctly says "no cheating here"</div><div class="score-why">Cleared a fair negotiation without a false alarm</div></div></div> | |
| <div class="score-item positive"><span class="score-pts">+0.5 pts</span><div><div class="score-action">Answer is in the right format</div><div class="score-why">Structured output the system can verify automatically</div></div></div> | |
| <div class="score-item negative"><span class="score-pts neg">−0.6 pts</span><div><div class="score-action">Missed a real coalition, or accused innocent agents</div><div class="score-why">Heavy penalty to discourage lazy answers</div></div></div> | |
| <div class="score-item negative"><span class="score-pts neg">−0.4 pts</span><div><div class="score-action">Spotted cheating but named wrong agents</div><div class="score-why">Close but not correct — partial credit removed</div></div></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-title">Why Does Any of This Matter?</div> | |
| <div class="why-grid"> | |
| <div class="why-item"><div class="why-title">Fairer Resource Sharing</div><div class="why-desc">In real systems, AI agents compete for shared resources — cloud computing, project budgets, staff allocation. Without a referee, coalitions can rig the outcome unfairly.</div></div> | |
| <div class="why-item"><div class="why-title">AI Safety</div><div class="why-desc">As AI systems become more independent, detecting when they secretly cooperate against human interests is a core safety challenge. NegotiArena is a step toward solving it.</div></div> | |
| <div class="why-item"><div class="why-title">Scales Automatically</div><div class="why-desc">Humans can't manually review thousands of agent conversations. An automated overseer can monitor any number of negotiations in real time, at zero extra cost.</div></div> | |
| <div class="why-item"><div class="why-title">Learns from Experience</div><div class="why-desc">Unlike hand-written rules that break when agents adapt, this AI learns new patterns over time. It gets harder to fool as it sees more examples of cheating.</div></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ═══ LIVE DEMO ═══ --> | |
| <section class="page" id="page-simulation"> | |
| <div class="page-header"> | |
| <h1>Live Demo</h1> | |
| <p>Pick a difficulty, run a simulation, and watch the AI Overseer make its call in real time</p> | |
| </div> | |
| <div class="diff-panel"> | |
| <div class="diff-panel-title">Step 1 — Choose a difficulty level</div> | |
| <div class="diff-btns-row"> | |
| <button class="diff-btn" data-diff="easy"> | |
| <span class="diff-dot" style="background:#34D399"></span> | |
| <div><div class="diff-name">Easy</div><div class="diff-hint">2 agents · 30% coalition · Low noise</div></div> | |
| </button> | |
| <button class="diff-btn active" data-diff="medium"> | |
| <span class="diff-dot" style="background:#FBBF24"></span> | |
| <div><div class="diff-name">Medium</div><div class="diff-hint">3 agents · 60% coalition · Medium noise</div></div> | |
| </button> | |
| <button class="diff-btn" data-diff="hard"> | |
| <span class="diff-dot" style="background:#F87171"></span> | |
| <div><div class="diff-name">Hard</div><div class="diff-hint">4 agents · 85% coalition · High noise</div></div> | |
| </button> | |
| <button class="diff-btn" data-diff="custom"> | |
| <span class="diff-dot" style="background:#A78BFA"></span> | |
| <div><div class="diff-name">Custom</div><div class="diff-hint">5 agents · 70% coalition · Variable</div></div> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="sim-controls"> | |
| <div class="sim-step-label">Step 2 — Run the simulation</div> | |
| <div class="sim-btns"> | |
| <button class="btn-primary" id="btn-run-sim">▶ Run New Simulation</button> | |
| <button class="btn-secondary" id="btn-replay">↻ Replay Last</button> | |
| <button class="btn-danger" id="btn-reset-cache">✕ Reset</button> | |
| <div class="sim-info"> | |
| Mode: <strong id="sim-mode-label">Medium</strong> | |
| · | |
| <span id="diff-agent-info" style="font-family:var(--mono);font-size:12px;color:var(--text3)">3 agents · 60% coalition chance</span> | |
| · | |
| Episode: <strong id="sim-ep-label">—</strong> | |
| · | |
| Runs: <strong id="sim-run-count">0</strong> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="progress-bar"><div class="progress-fill" id="sim-bar-fill"></div></div> | |
| <div id="sim-output" style="display:none"> | |
| <div class="sim-grid"> | |
| <!-- Transcript --> | |
| <div class="card"> | |
| <div class="card-title"> | |
| Negotiation Transcript | |
| <span class="badge-type" id="ep-type-badge">—</span> | |
| </div> | |
| <div class="transcript" id="transcript-body"></div> | |
| </div> | |
| <!-- Overseer --> | |
| <div class="card"> | |
| <div class="card-title">AI Overseer's Decision</div> | |
| <pre class="json-block" id="overseer-json"></pre> | |
| <div style="margin-top:14px"> | |
| <div class="section-label">Confidence Score (0% = definitely fair · 100% = definitely cheating)</div> | |
| <div id="chart-gauge" style="height:180px;margin-top:4px"></div> | |
| </div> | |
| </div> | |
| <!-- Right column --> | |
| <div class="sim-right"> | |
| <div class="card"> | |
| <div class="card-title">How Resources Were Split</div> | |
| <div id="chart-allocation" style="height:160px"></div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-title">Was the AI Correct?</div> | |
| <div id="detection-status"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="verdict" id="verdict-card"> | |
| <div class="verdict-label">Episode Summary</div> | |
| <div class="verdict-items" id="verdict-grid"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ═══ ANALYTICS ═══ --> | |
| <section class="page" id="page-analytics"> | |
| <div class="page-header"> | |
| <h1>Training & Performance</h1> | |
| <p>Full training charts and accuracy comparison across all detection methods</p> | |
| </div> | |
| <div id="analytics-gate" class="analytics-gate"> | |
| <div class="analytics-gate-icon"> | |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#60A5FA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> | |
| <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/> | |
| </svg> | |
| </div> | |
| <h3>Run a simulation first</h3> | |
| <p>Training & Performance charts unlock after you run at least one simulation in the Live Demo.</p> | |
| <button class="gate-btn" id="goto-sim-btn">Go to Live Demo</button> | |
| </div> | |
| <div id="analytics-charts" style="display:none"> | |
| <div class="metrics-strip"> | |
| <div class="metric-card"><div class="metric-val blue">0.755</div><div class="metric-key">Final Score (GRPO)</div></div> | |
| <div class="metric-card"><div class="metric-val green">0.800</div><div class="metric-key">Final Score (RLVR)</div></div> | |
| <div class="metric-card"><div class="metric-val amber">~125</div><div class="metric-key">Round It Converged</div></div> | |
| <div class="metric-card"><div class="metric-val cyan">0.142</div><div class="metric-key">Biggest Single Update</div></div> | |
| </div> | |
| <div class="two-col" style="margin-bottom:18px"> | |
| <div class="card"><div class="card-title">AI Score Over 200 Rounds</div><div class="chart-hint">Both training methods trending up — the AI is genuinely learning.</div><div id="chart-reward-main" style="height:240px"></div></div> | |
| <div class="card"><div class="card-title">Stability — How Big Were the Updates?</div><div class="chart-hint">The spike at round 155 was a big learning jump. It stabilised after that.</div><div id="chart-kl" style="height:240px"></div></div> | |
| </div> | |
| <div class="two-col" style="margin-bottom:18px"> | |
| <div class="card"><div class="card-title">Training Loss — Errors Over Time</div><div class="chart-hint">Falling line = fewer mistakes. Reached near-zero by round 180.</div><div id="chart-loss" style="height:200px"></div></div> | |
| <div class="card"><div class="card-title">Score Consistency Each Round</div><div class="chart-hint">Red bars = high variance round. Became steadier after round 130.</div><div id="chart-std" style="height:200px"></div></div> | |
| </div> | |
| <div class="two-col" style="margin-bottom:18px"> | |
| <div class="card"><div class="card-title">Our AI vs Other Methods</div><div class="chart-hint">Green = our best model (RLVR). Yellow = rules-based. Grey = random guessing.</div><div id="chart-perf-bar" style="height:240px"></div></div> | |
| <div class="card"><div class="card-title">Accuracy Shape — Radar</div><div class="chart-hint">A bigger filled shape = better all-round. Our model fills the most space.</div><div id="chart-radar" style="height:240px"></div></div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-title">Full Comparison Table <span class="winner-tag" id="winner-badge">Winner: RLVR</span></div> | |
| <div class="table-wrap"> | |
| <table class="data-table"> | |
| <thead> | |
| <tr><th>Method</th><th>Precision</th><th>Recall</th><th>F1 Score</th><th>vs Random</th><th>vs Heuristic</th><th>Result</th></tr> | |
| </thead> | |
| <tbody id="perf-tbody"></tbody> | |
| </table> | |
| </div> | |
| <div class="table-legend"><strong>Precision</strong> — of all the times it raised a flag, how often was it right? · <strong>Recall</strong> — of all the actual coalitions, how many did it catch? · <strong>F1</strong> — a combined score balancing both</div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| <script src="static/script.js"></script> | |
| </body> | |
| </html> |