fivetech commited on
Commit
4d85913
·
verified ·
1 Parent(s): 7ed4157

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +312 -18
index.html CHANGED
@@ -1,19 +1,313 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>