Spaces:
Running
Running
Update index.html
Browse files- index.html +312 -18
index.html
CHANGED
|
@@ -1,19 +1,313 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
</html>
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="es">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚔️</text></svg>">
|
| 7 |
+
<title>AI Debate Arena — Multi-Agent Intelligence Competition</title>
|
| 8 |
+
<style>
|
| 9 |
+
:root{
|
| 10 |
+
--bg:#0a0e1a; --bg2:#0f1526; --panel:#141b31; --panel2:#1a2340;
|
| 11 |
+
--border:#263156; --text:#e8ecf8; --muted:#8b94b8;
|
| 12 |
+
--accent:#f43f5e; --accent2:#8b5cf6; --gold:#fbbf24; --ok:#34d399; --warn:#f59e0b;
|
| 13 |
+
}
|
| 14 |
+
*{box-sizing:border-box;margin:0;padding:0}
|
| 15 |
+
html,body{height:100%}
|
| 16 |
+
body{background:radial-gradient(1200px 600px at 50% -10%,#1b2242 0%,var(--bg) 60%);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;min-height:100vh;display:flex;flex-direction:column}
|
| 17 |
+
header{display:flex;align-items:center;gap:14px;padding:12px 20px;border-bottom:1px solid var(--border);background:rgba(10,14,26,.85);backdrop-filter:blur(8px);position:sticky;top:0;z-index:50;flex-wrap:wrap}
|
| 18 |
+
.logo{font-size:1.25rem;font-weight:900;letter-spacing:.06em;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;white-space:cursor:default}
|
| 19 |
+
.logo small{display:block;font-size:.6rem;letter-spacing:.3em;color:var(--muted);-webkit-text-fill-color:var(--muted);font-weight:600}
|
| 20 |
+
nav{display:flex;gap:6px;flex-wrap:wrap}
|
| 21 |
+
nav button{background:transparent;border:1px solid transparent;color:var(--muted);padding:7px 13px;border-radius:999px;cursor:pointer;font-size:.85rem;font-weight:600}
|
| 22 |
+
nav button:hover{color:var(--text)}
|
| 23 |
+
nav button.active{background:var(--panel2);border-color:var(--border);color:var(--text)}
|
| 24 |
+
#model-pill{margin-left:auto;font-size:.75rem;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:5px 12px;display:flex;align-items:center;gap:7px}
|
| 25 |
+
#model-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}
|
| 26 |
+
#model-pill.ready .dot{background:var(--ok)}
|
| 27 |
+
#model-pill.loading .dot{background:var(--warn);animation:pulse 1s infinite}
|
| 28 |
+
@keyframes pulse{50%{opacity:.3}}
|
| 29 |
+
main{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:22px 16px 60px}
|
| 30 |
+
.view{display:none;animation:fadein .3s}
|
| 31 |
+
.view.active{display:block}
|
| 32 |
+
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
|
| 33 |
+
h2.section{font-size:1.05rem;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin:26px 0 12px;font-weight:700}
|
| 34 |
+
.btn{background:linear-gradient(90deg,var(--accent),var(--accent2));border:none;color:#fff;padding:13px 30px;border-radius:12px;font-size:1rem;font-weight:800;letter-spacing:.08em;cursor:pointer;transition:transform .15s,box-shadow .15s}
|
| 35 |
+
.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px rgba(244,63,94,.35)}
|
| 36 |
+
.btn:disabled{opacity:.45;cursor:not-allowed}
|
| 37 |
+
.btn.ghost{background:var(--panel2);border:1px solid var(--border);font-weight:600;letter-spacing:0;padding:10px 18px}
|
| 38 |
+
.btn.ghost:hover:not(:disabled){box-shadow:none;border-color:var(--accent2)}
|
| 39 |
+
.btn.small{padding:7px 13px;font-size:.8rem;border-radius:9px}
|
| 40 |
+
input[type=text],textarea,select{background:var(--bg2);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:11px 14px;font-size:.95rem;width:100%;outline:none;font-family:inherit}
|
| 41 |
+
input[type=text]:focus,textarea:focus,select:focus{border-color:var(--accent2)}
|
| 42 |
+
label{display:block;font-size:.78rem;color:var(--muted);margin:10px 0 5px;font-weight:600;letter-spacing:.04em}
|
| 43 |
+
/* LOBBY */
|
| 44 |
+
.hero{text-align:center;padding:26px 0 8px}
|
| 45 |
+
.hero h1{font-size:clamp(1.8rem,5vw,3rem);font-weight:900;letter-spacing:.04em}
|
| 46 |
+
.hero h1 span{background:linear-gradient(90deg,var(--accent),var(--gold),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
|
| 47 |
+
.hero p{color:var(--muted);letter-spacing:.28em;font-size:.72rem;margin-top:8px;text-transform:uppercase}
|
| 48 |
+
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:10px}
|
| 49 |
+
.mode-card{background:var(--panel);border:2px solid var(--border);border-radius:14px;padding:16px;cursor:pointer;transition:border-color .15s,transform .15s;position:relative}
|
| 50 |
+
.mode-card:hover{transform:translateY(-2px)}
|
| 51 |
+
.mode-card.sel{border-color:var(--accent)}
|
| 52 |
+
.mode-card.soon{opacity:.55;cursor:not-allowed}
|
| 53 |
+
.mode-card h3{font-size:1rem;margin-bottom:4px}
|
| 54 |
+
.mode-card p{font-size:.78rem;color:var(--muted);line-height:1.4}
|
| 55 |
+
.badge{position:absolute;top:10px;right:10px;font-size:.62rem;font-weight:800;letter-spacing:.08em;padding:3px 8px;border-radius:999px;background:var(--panel2);border:1px solid var(--border);color:var(--muted)}
|
| 56 |
+
.badge.live{background:rgba(52,211,153,.15);border-color:var(--ok);color:var(--ok)}
|
| 57 |
+
.badge.dev{background:rgba(245,158,11,.12);border-color:var(--warn);color:var(--warn)}
|
| 58 |
+
.lobby-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin-top:18px}
|
| 59 |
+
@media(max-width:820px){.lobby-grid{grid-template-columns:1fr}}
|
| 60 |
+
.panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px}
|
| 61 |
+
.topic-row{display:flex;gap:8px}
|
| 62 |
+
.topic-row input{flex:1}
|
| 63 |
+
.topic-row select{width:190px;flex:none}
|
| 64 |
+
.pick-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
|
| 65 |
+
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--border);border-radius:999px;padding:5px 11px;font-size:.8rem}
|
| 66 |
+
.chip b{font-weight:700}
|
| 67 |
+
.progress-wrap{height:8px;background:var(--bg2);border-radius:99px;overflow:hidden;margin-top:12px;border:1px solid var(--border)}
|
| 68 |
+
.progress-wrap>div{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .3s}
|
| 69 |
+
#load-status{font-size:.78rem;color:var(--muted);margin-top:8px;min-height:1.1em}
|
| 70 |
+
/* ROSTER */
|
| 71 |
+
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
|
| 72 |
+
.agent-card{background:var(--panel);border:2px solid var(--border);border-radius:16px;padding:16px;cursor:pointer;transition:border-color .15s,transform .15s;position:relative;overflow:hidden}
|
| 73 |
+
.agent-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--ac,#888)}
|
| 74 |
+
.agent-card:hover{transform:translateY(-3px)}
|
| 75 |
+
.agent-card.sel{border-color:var(--ac,#888);box-shadow:0 0 0 1px var(--ac,#888),0 8px 24px rgba(0,0,0,.35)}
|
| 76 |
+
.agent-card .avatar{font-size:2rem}
|
| 77 |
+
.agent-card h3{margin:6px 0 2px;font-size:1.02rem}
|
| 78 |
+
.agent-card .spec{font-size:.75rem;color:var(--ac,#888);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
|
| 79 |
+
.agent-card .style{font-size:.78rem;color:var(--muted);margin:4px 0 10px}
|
| 80 |
+
.stat{display:grid;grid-template-columns:88px 1fr 26px;align-items:center;gap:8px;font-size:.7rem;color:var(--muted);margin-top:5px}
|
| 81 |
+
.stat .bar{height:6px;background:var(--bg2);border-radius:99px;overflow:hidden}
|
| 82 |
+
.stat .bar>div{height:100%;background:var(--ac,#888)}
|
| 83 |
+
.stat b{color:var(--text);text-align:right;font-size:.72rem}
|
| 84 |
+
.agent-card .tools{position:absolute;top:10px;right:10px;display:flex;gap:5px}
|
| 85 |
+
.icon-btn{background:var(--panel2);border:1px solid var(--border);color:var(--muted);border-radius:8px;width:28px;height:28px;cursor:pointer;font-size:.8rem;line-height:1}
|
| 86 |
+
.icon-btn:hover{color:var(--text);border-color:var(--accent2)}
|
| 87 |
+
.stats-note{font-size:.72rem;color:var(--muted);margin-top:10px;font-style:italic}
|
| 88 |
+
.record{font-size:.7rem;color:var(--muted);margin-top:8px;border-top:1px dashed var(--border);padding-top:7px}
|
| 89 |
+
/* BATTLE */
|
| 90 |
+
.battle-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
|
| 91 |
+
.phase-track{display:flex;gap:5px;flex:1;min-width:200px;flex-wrap:wrap}
|
| 92 |
+
.phase-step{font-size:.66rem;font-weight:800;letter-spacing:.06em;padding:5px 10px;border-radius:999px;background:var(--panel);border:1px solid var(--border);color:var(--muted);text-transform:uppercase}
|
| 93 |
+
.phase-step.now{background:rgba(244,63,94,.15);border-color:var(--accent);color:var(--accent);animation:pulse 1.4s infinite}
|
| 94 |
+
.phase-step.done{color:var(--ok);border-color:rgba(52,211,153,.4)}
|
| 95 |
+
.fighters{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch;margin-bottom:12px}
|
| 96 |
+
@media(max-width:700px){.fighters{grid-template-columns:1fr}}
|
| 97 |
+
.fighter{background:var(--panel);border:2px solid var(--border);border-radius:16px;padding:14px;text-align:center;transition:border-color .2s,box-shadow .2s}
|
| 98 |
+
.fighter.turn{border-color:var(--ac,#888);box-shadow:0 0 22px -4px var(--ac,#888)}
|
| 99 |
+
.fighter .avatar{font-size:2.2rem}
|
| 100 |
+
.fighter h3{font-size:.95rem;margin:4px 0 2px}
|
| 101 |
+
.fighter .strat{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
|
| 102 |
+
.fighter.winner-card{border-color:var(--gold);box-shadow:0 0 26px -4px var(--gold)}
|
| 103 |
+
.vs{align-self:center;font-weight:900;font-size:1.4rem;color:var(--accent);text-align:center}
|
| 104 |
+
#battle-log{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:16px;min-height:280px;max-height:52vh;overflow-y:auto}
|
| 105 |
+
.msg{margin-bottom:14px;display:flex;gap:10px}
|
| 106 |
+
.msg .mavatar{width:38px;height:38px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;background:var(--panel2);border:1px solid var(--border)}
|
| 107 |
+
.msg .mbody{flex:1;min-width:0}
|
| 108 |
+
.msg .mhead{font-size:.74rem;font-weight:800;margin-bottom:3px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
|
| 109 |
+
.msg .mhead .ph{color:var(--muted);font-weight:600;font-size:.66rem;text-transform:uppercase;letter-spacing:.06em}
|
| 110 |
+
.msg .mtext{font-size:.9rem;line-height:1.55;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:10px 13px;white-space:pre-wrap;word-wrap:break-word}
|
| 111 |
+
.msg.streaming .mtext{border-color:var(--ac,#888)}
|
| 112 |
+
.msg.user .mtext{border-color:var(--accent2)}
|
| 113 |
+
.msg.system .mtext{background:transparent;border-style:dashed;color:var(--muted);text-align:center;font-size:.8rem}
|
| 114 |
+
.battle-controls{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;align-items:center}
|
| 115 |
+
.battle-controls input{flex:1;min-width:180px}
|
| 116 |
+
.flash{animation:flash .8s}
|
| 117 |
+
@keyframes flash{0%{background:rgba(244,63,94,.35)}100%{background:transparent}}
|
| 118 |
+
/* RESULTS */
|
| 119 |
+
.verdict-hero{text-align:center;padding:18px 0 6px}
|
| 120 |
+
.verdict-hero .crown{font-size:3rem}
|
| 121 |
+
.score-table{width:100%;border-collapse:collapse;margin-top:12px;font-size:.85rem}
|
| 122 |
+
.score-table th,.score-table td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:right}
|
| 123 |
+
.score-table th:first-child,.score-table td:first-child{text-align:left}
|
| 124 |
+
.score-table th{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
|
| 125 |
+
.judge-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px}
|
| 126 |
+
.judge-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px}
|
| 127 |
+
.judge-card h4{font-size:.85rem;margin-bottom:8px}
|
| 128 |
+
.judge-card p{font-size:.78rem;color:var(--muted);line-height:1.5}
|
| 129 |
+
.awards{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
|
| 130 |
+
.award{background:var(--panel2);border:1px solid var(--gold);color:var(--gold);border-radius:12px;padding:9px 14px;font-size:.8rem;font-weight:700}
|
| 131 |
+
.note{font-size:.75rem;color:var(--muted);margin-top:14px;font-style:italic;line-height:1.5}
|
| 132 |
+
/* HALL */
|
| 133 |
+
table.hall{width:100%;border-collapse:collapse;font-size:.85rem}
|
| 134 |
+
table.hall th,table.hall td{padding:10px;border-bottom:1px solid var(--border);text-align:left}
|
| 135 |
+
table.hall th{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em}
|
| 136 |
+
.conf{font-size:.66rem;padding:2px 8px;border-radius:99px;border:1px solid var(--border)}
|
| 137 |
+
.conf.low{color:var(--warn);border-color:var(--warn)}
|
| 138 |
+
.conf.mid{color:var(--accent2);border-color:var(--accent2)}
|
| 139 |
+
.conf.high{color:var(--ok);border-color:var(--ok)}
|
| 140 |
+
.match-item{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:10px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;cursor:pointer}
|
| 141 |
+
.match-item:hover{border-color:var(--accent2)}
|
| 142 |
+
.match-item .mtopic{flex:1;min-width:160px;font-weight:600;font-size:.9rem}
|
| 143 |
+
.match-item .mmeta{font-size:.72rem;color:var(--muted)}
|
| 144 |
+
/* ROADMAP */
|
| 145 |
+
.phase{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:12px;border-left:4px solid var(--muted)}
|
| 146 |
+
.phase.done{border-left-color:var(--ok)}
|
| 147 |
+
.phase.partial{border-left-color:var(--warn)}
|
| 148 |
+
.phase.todo{border-left-color:var(--muted)}
|
| 149 |
+
.phase h3{font-size:.95rem;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
|
| 150 |
+
.phase ul{margin:10px 0 0 18px;font-size:.82rem;color:var(--muted);line-height:1.7}
|
| 151 |
+
.tag{font-size:.62rem;font-weight:800;padding:3px 9px;border-radius:99px;letter-spacing:.06em}
|
| 152 |
+
.tag.done{background:rgba(52,211,153,.15);color:var(--ok)}
|
| 153 |
+
.tag.partial{background:rgba(245,158,11,.15);color:var(--warn)}
|
| 154 |
+
.tag.todo{background:var(--panel2);color:var(--muted)}
|
| 155 |
+
/* MODAL */
|
| 156 |
+
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;z-index:100;padding:16px}
|
| 157 |
+
.modal-back.open{display:flex}
|
| 158 |
+
.modal{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:22px;width:100%;max-width:480px;max-height:88vh;overflow-y:auto}
|
| 159 |
+
.modal h3{margin-bottom:6px}
|
| 160 |
+
.emoji-pick{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
|
| 161 |
+
.emoji-pick button{font-size:1.2rem;background:var(--bg2);border:1px solid var(--border);border-radius:9px;width:38px;height:38px;cursor:pointer}
|
| 162 |
+
.emoji-pick button.sel{border-color:var(--accent2)}
|
| 163 |
+
.color-pick{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
|
| 164 |
+
.color-pick button{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer}
|
| 165 |
+
.color-pick button.sel{border-color:#fff}
|
| 166 |
+
footer{text-align:center;color:var(--muted);font-size:.72rem;padding:18px;border-top:1px solid var(--border);line-height:1.8}
|
| 167 |
+
footer a{color:var(--accent2)}
|
| 168 |
+
</style>
|
| 169 |
+
</head>
|
| 170 |
+
<body>
|
| 171 |
+
<header>
|
| 172 |
+
<div class="logo">⚔️ AI DEBATE ARENA<small>THINK · CHALLENGE · DEFEND · WIN</small></div>
|
| 173 |
+
<nav>
|
| 174 |
+
<button data-view="lobby" class="active">Lobby</button>
|
| 175 |
+
<button data-view="roster">Agentes</button>
|
| 176 |
+
<button data-view="hall">Hall of Fame</button>
|
| 177 |
+
<button data-view="roadmap">Roadmap V2</button>
|
| 178 |
+
</nav>
|
| 179 |
+
<div id="model-pill"><span class="dot"></span><span id="model-pill-text">modelo sin cargar</span></div>
|
| 180 |
+
</header>
|
| 181 |
+
<main>
|
| 182 |
+
<!-- ============ LOBBY ============ -->
|
| 183 |
+
<section id="view-lobby" class="view active">
|
| 184 |
+
<div class="hero">
|
| 185 |
+
<h1>⚔️ <span>AI DEBATE ARENA</span></h1>
|
| 186 |
+
<p>Multi-Agent Intelligence Competition Platform</p>
|
| 187 |
+
</div>
|
| 188 |
+
<h2 class="section">Modalidad de batalla</h2>
|
| 189 |
+
<div class="modes" id="modes"></div>
|
| 190 |
+
<div class="lobby-grid">
|
| 191 |
+
<div class="panel">
|
| 192 |
+
<h2 class="section" style="margin-top:0">Configuración del combate</h2>
|
| 193 |
+
<label>Tema del debate</label>
|
| 194 |
+
<div class="topic-row">
|
| 195 |
+
<input type="text" id="topic" placeholder="Escribe el tema y pulsa Enter para luchar…">
|
| 196 |
+
<select id="topic-pick"><option value="">🎲 10 temas al azar…</option></select>
|
| 197 |
+
</div>
|
| 198 |
+
<label>Rondas de crossfire + refutación</label>
|
| 199 |
+
<select id="rounds"><option value="1">1 ronda</option><option value="2" selected>2 rondas</option><option value="3">3 rondas</option><option value="4">4 rondas</option></select>
|
| 200 |
+
<label>Modelo local (se descarga en tu navegador)</label>
|
| 201 |
+
<select id="model-sel">
|
| 202 |
+
<option value="mimo" selected>MiMo 9B · calidad (~5,8 GB, primera vez)</option>
|
| 203 |
+
<option value="qwen">Qwen2.5 0.5B · prueba rápida (~350 MB)</option>
|
| 204 |
+
</select>
|
| 205 |
+
<div class="pick-line" id="picked-line"></div>
|
| 206 |
+
<div style="display:flex;gap:10px;margin-top:16px;flex-wrap:wrap">
|
| 207 |
+
<button class="btn" id="start-btn">▶ START BATTLE</button>
|
| 208 |
+
<button class="btn ghost" id="random-match">🎲 Random Match</button>
|
| 209 |
+
</div>
|
| 210 |
+
<div class="progress-wrap"><div id="load-bar"></div></div>
|
| 211 |
+
<div id="load-status"></div>
|
| 212 |
+
</div>
|
| 213 |
+
<div class="panel">
|
| 214 |
+
<h2 class="section" style="margin-top:0">Arena Control Center</h2>
|
| 215 |
+
<p style="font-size:.82rem;color:var(--muted);line-height:1.7">
|
| 216 |
+
Los agentes comparten <b style="color:var(--text)">un único modelo local</b> (wllama/WebGPU):
|
| 217 |
+
son identidades y contextos independientes, no modelos distintos.
|
| 218 |
+
Los jueces evalúan con contextos separados y sin ver las puntuaciones de los otros jueces.
|
| 219 |
+
</p>
|
| 220 |
+
<p style="font-size:.82rem;color:var(--muted);line-height:1.7;margin-top:10px">
|
| 221 |
+
Modo activo: <b style="color:var(--ok)">Sequential Arena</b> (turnos sobre el mismo runtime).
|
| 222 |
+
Multi-Model Arena: fase futura. Historial y estadísticas se guardan solo en este navegador.
|
| 223 |
+
</p>
|
| 224 |
+
</div>
|
| 225 |
+
</div>
|
| 226 |
+
</section>
|
| 227 |
+
<!-- ============ ROSTER ============ -->
|
| 228 |
+
<section id="view-roster" class="view">
|
| 229 |
+
<h2 class="section">Agent Roster — elige combatientes <span id="pick-count" style="color:var(--accent)"></span></h2>
|
| 230 |
+
<p style="font-size:.8rem;color:var(--muted);margin-bottom:12px">Haz clic en las fichas para seleccionar: 2 para Duel, de 3 a 8 para Free For All.</p>
|
| 231 |
+
<div class="roster" id="roster"></div>
|
| 232 |
+
<p class="stats-note">Las estadísticas de las fichas (lógica, creatividad, agresividad) son valores ilustrativos de personalidad, no capacidades medidas del modelo.</p>
|
| 233 |
+
<button class="btn ghost" id="add-agent" style="margin-top:14px">+ Crear agente personalizado</button>
|
| 234 |
+
</section>
|
| 235 |
+
<!-- ============ BATTLE ============ -->
|
| 236 |
+
<section id="view-battle" class="view">
|
| 237 |
+
<div class="battle-top">
|
| 238 |
+
<div class="phase-track" id="phase-track"></div>
|
| 239 |
+
<button class="btn ghost small" id="stop-btn" style="display:none">⏸ Pausar</button>
|
| 240 |
+
</div>
|
| 241 |
+
<div class="fighters" id="fighters"></div>
|
| 242 |
+
<div id="battle-log"></div>
|
| 243 |
+
<div class="battle-controls">
|
| 244 |
+
<input type="text" id="challenge-input" placeholder="Challenge Agent: intervén tú en la batalla… (no puntúa)">
|
| 245 |
+
<button class="btn ghost small" id="challenge-btn">⚡ Intervenir</button>
|
| 246 |
+
<button class="btn ghost small" id="exit-battle">← Salir</button>
|
| 247 |
+
</div>
|
| 248 |
+
</section>
|
| 249 |
+
<!-- ============ RESULTS ============ -->
|
| 250 |
+
<section id="view-results" class="view">
|
| 251 |
+
<div class="verdict-hero" id="verdict-hero"></div>
|
| 252 |
+
<h2 class="section">Puntuaciones (ponderación Arena)</h2>
|
| 253 |
+
<div style="overflow-x:auto"><table class="score-table" id="score-table"></table></div>
|
| 254 |
+
<h2 class="section">Los tres jueces + Head Judge</h2>
|
| 255 |
+
<div class="judge-cards" id="judge-cards"></div>
|
| 256 |
+
<h2 class="section">Reconocimientos</h2>
|
| 257 |
+
<div class="awards" id="awards"></div>
|
| 258 |
+
<p class="note">Los jueces son evaluaciones del mismo modelo local con contextos independientes: no son modelos distintos ni verificación factual externa.</p>
|
| 259 |
+
<div style="display:flex;gap:10px;margin-top:18px;flex-wrap:wrap">
|
| 260 |
+
<button class="btn" id="rematch-btn">🔄 Rematch</button>
|
| 261 |
+
<button class="btn ghost" id="results-lobby">← Volver al Lobby</button>
|
| 262 |
+
</div>
|
| 263 |
+
</section>
|
| 264 |
+
<!-- ============ HALL ============ -->
|
| 265 |
+
<section id="view-hall" class="view">
|
| 266 |
+
<h2 class="section">Hall of Fame — clasificación histórica (este navegador)</h2>
|
| 267 |
+
<div style="overflow-x:auto"><table class="hall" id="hall-table"></table></div>
|
| 268 |
+
<h2 class="section">Arena Memory — batallas guardadas</h2>
|
| 269 |
+
<div id="match-list"></div>
|
| 270 |
+
</section>
|
| 271 |
+
<!-- ============ ROADMAP ============ -->
|
| 272 |
+
<section id="view-roadmap" class="view">
|
| 273 |
+
<h2 class="section">Roadmap V2 — estado real del proyecto</h2>
|
| 274 |
+
<div id="roadmap-list"></div>
|
| 275 |
+
</section>
|
| 276 |
+
</main>
|
| 277 |
+
<footer>
|
| 278 |
+
AI Debate Arena · motor <a href="https://github.com/ngxson/wllama" target="_blank" rel="noopener">wllama</a> (MIT) · modelo
|
| 279 |
+
<a href="https://huggingface.co/XiaomiMiMo/MiMo-V2.6-Distill-Qwen-9B" target="_blank" rel="noopener">MiMo-V2.6-Distill-Qwen-9B</a> (MIT, Xiaomi) ·
|
| 280 |
+
inferencia 100% local en tu navegador (WebGPU o CPU/WASM)<br>
|
| 281 |
+
Basado en <a href="https://huggingface.co/spaces/fivetech/Multi-Agent-Debate-MiMo-WebGPU" target="_blank" rel="noopener">Multi-Agent-Debate-MiMo-WebGPU</a> · V2 en desarrollo: las fases no marcadas como disponibles aún están en construcción.
|
| 282 |
+
</footer>
|
| 283 |
+
<!-- AGENT MODAL -->
|
| 284 |
+
<div class="modal-back" id="agent-modal">
|
| 285 |
+
<div class="modal">
|
| 286 |
+
<h3 id="am-title">Editar agente</h3>
|
| 287 |
+
<label>Nombre</label><input type="text" id="am-name" maxlength="30">
|
| 288 |
+
<label>Avatar</label><div class="emoji-pick" id="am-emojis"></div>
|
| 289 |
+
<label>Color</label><div class="color-pick" id="am-colors"></div>
|
| 290 |
+
<label>Especialidad</label><input type="text" id="am-spec" maxlength="40">
|
| 291 |
+
<label>Estilo</label><input type="text" id="am-style" maxlength="60">
|
| 292 |
+
<label>Estrategia de debate</label>
|
| 293 |
+
<select id="am-strategy">
|
| 294 |
+
<option value="attack">Attack — buscar debilidades rivales</option>
|
| 295 |
+
<option value="defense">Defense — proteger la posición</option>
|
| 296 |
+
<option value="evidence">Evidence — priorizar evidencias</option>
|
| 297 |
+
<option value="socratic">Socratic — cuestionar con preguntas</option>
|
| 298 |
+
<option value="counterattack">Counterattack — responder objeciones</option>
|
| 299 |
+
<option value="adaptive">Adaptive — cambiar entre rondas</option>
|
| 300 |
+
</select>
|
| 301 |
+
<label>Personalidad (prompt del agente)</label>
|
| 302 |
+
<textarea id="am-system" rows="4"></textarea>
|
| 303 |
+
<div style="display:flex;gap:10px;margin-top:16px;justify-content:flex-end">
|
| 304 |
+
<button class="btn ghost small" id="am-delete">Eliminar</button>
|
| 305 |
+
<button class="btn ghost small" id="am-cancel">Cancelar</button>
|
| 306 |
+
<button class="btn small" id="am-save">Guardar</button>
|
| 307 |
+
</div>
|
| 308 |
+
</div>
|
| 309 |
+
</div>
|
| 310 |
+
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
| 311 |
+
<script type="module" src="app.js"></script>
|
| 312 |
+
</body>
|
| 313 |
</html>
|