Delete 1-index.html

1-index.html

@@ -1,403 +0,0 @@
-<!DOCTYPE html>
-<html lang="es">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Multi-Agent Debate - MiMo-V2.6-Distill-Qwen-9B</title>
-<style>
-:root{
-  --bg:#000000; --surface:#16181c; --surface2:#1d1f24; --border:#2f3336;
-  --text:#e7e9ea; --muted:#71767b; --accent:#1d9bf0;
-}
-body.light{ --bg:#ffffff; --surface:#f7f9f9; --surface2:#eff1f1; --border:#cfd9de; --text:#0f1419; --muted:#536471; }
-*{box-sizing:border-box}
-html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
-  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:15px}
-#app{max-width:760px;margin:0 auto;display:flex;flex-direction:column;height:100vh;height:100dvh}
-
-header{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border)}
-header .logo{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#7856ff);
-  display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;flex:none}
-header .title{font-weight:700;font-size:16px;letter-spacing:.2px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-header .subtitle{font-size:12px;color:var(--muted);font-weight:400}
-#settings-btn{background:none;border:1px solid var(--border);color:var(--muted);border-radius:50%;
-  width:34px;height:34px;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:.15s}
-#settings-btn:hover{color:var(--text);border-color:var(--muted)}
-
-#chat{flex:1;overflow-y:auto;padding:20px 18px;display:flex;flex-direction:column;gap:20px}
-.msg{display:flex;gap:12px;animation:fadein .3s ease;max-width:100%}
-.msg .avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
-  font-size:15px;color:#fff;flex:none;margin-top:2px}
-.msg .content{flex:1;min-width:0}
-.msg .who{font-size:13px;font-weight:700;margin-bottom:3px}
-.msg .who .round{font-weight:400;color:var(--muted);margin-left:6px;font-size:12px}
-.msg .body{line-height:1.55;word-wrap:break-word;color:var(--text)}
-.msg .body p{margin:.35em 0}
-.msg.user{justify-content:flex-end}
-.msg.user .content{flex:none;max-width:80%;background:var(--surface2);border:1px solid var(--border);
-  border-radius:18px 18px 4px 18px;padding:10px 14px}
-.msg.user .who{display:none}
-.msg.err{color:#f4212e;font-size:14px}
-@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
-@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}
-.msg.streaming .body::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
-  background:var(--accent);margin-left:5px;animation:pulse 1s infinite}
-details.think{margin:2px 0 8px;font-size:13px;color:var(--muted)}
-details.think summary{cursor:pointer;font-size:12px}
-details.think .t{white-space:pre-wrap;border-left:2px solid var(--border);padding-left:10px;margin-top:5px;font-size:12.5px}
-
-#controls{padding:12px 18px;border-top:1px solid var(--border);display:flex;gap:10px;align-items:center}
-#topic{flex:1;min-width:0;background:var(--surface);border:1px solid var(--border);color:var(--text);
-  border-radius:999px;padding:12px 18px;font-size:15px;outline:none;transition:border-color .15s}
-#topic:focus{border-color:var(--accent)}
-#topic::placeholder{color:var(--muted)}
-#start-btn{flex:none;background:var(--text);color:var(--bg);border:none;border-radius:999px;padding:12px 16px;
-  cursor:pointer;font-weight:700;font-size:14px;transition:opacity .15s;white-space:nowrap}
-#start-btn:hover{opacity:.85}
-#start-btn:disabled{opacity:.35;cursor:default}
-#stop-btn{flex:none;background:none;border:1px solid #f4212e;color:#f4212e;border-radius:999px;
-  padding:11px 18px;cursor:pointer;font-weight:700;font-size:14px;display:none}
-
-#settings{display:none;margin:0 18px 12px;padding:16px;border:1px solid var(--border);
-  border-radius:16px;background:var(--surface)}
-#settings.open{display:block}
-#settings label{display:block;font-size:12px;color:var(--muted);margin:10px 0 4px}
-#settings input,#settings textarea{width:100%;background:var(--bg);color:var(--text);
-  border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-size:14px;font-family:inherit;outline:none}
-#settings input:focus,#settings textarea:focus{border-color:var(--accent)}
-#settings textarea{min-height:150px;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12px}
-#settings .row{display:flex;gap:10px;flex-wrap:wrap}
-#settings .row>div{flex:1;min-width:120px}
-#apply-settings{margin-top:12px;background:var(--accent);border:none;color:#fff;border-radius:999px;
-  padding:10px 18px;cursor:pointer;font-weight:700}
-
-#status{padding:7px 18px;font-size:12px;color:var(--muted)}
-#progress{height:2px;background:var(--surface)}
-#progress>div{height:100%;width:0;background:linear-gradient(90deg,var(--accent),#7856ff);transition:width .25s}
-footer{padding:10px 18px;font-size:11px;color:var(--muted);border-top:1px solid var(--border);
-  display:flex;gap:8px 16px;flex-wrap:wrap;justify-content:center;text-align:center}
-footer a{color:var(--accent);text-decoration:none}
-
-@media (max-width:640px){
-  #chat{padding:14px 12px;gap:16px}
-  #controls{padding:10px 12px}
-  header{padding:12px}
-  header .subtitle{display:none}
-  .msg .avatar{width:28px;height:28px;font-size:13px}
-  #settings{margin:0 12px 10px}
-}
-</style>
-</head>
-<body>
-<div id="app">
-  <header>
-    <span class="logo">&#10022;</span>
-    <span class="title" id="title">Multi-Agent Debate <span class="subtitle">&middot; MiMo-V2.6-Distill-Qwen-9B</span></span>
-    <button id="settings-btn" title="Ajustes">&#9881;</button>
-  </header>
-
-  <div id="settings">
-    <div class="row">
-      <div><label>Repositorio Hugging Face</label><input id="set-repo"></div>
-      <div><label>Archivo GGUF</label><input id="set-file"></div>
-    </div>
-    <div class="row">
-      <div><label>Contexto (tokens)</label><input id="set-ctx" type="number" step="512" min="2048"></div>
-      <div><label>M&aacute;x. tokens por turno</label><input id="set-maxtokens" type="number" step="32" min="64"></div>
-      <div><label>Temperatura</label><input id="set-temp" type="number" step="0.05" min="0" max="2"></div>
-      <div><label>Rondas</label><input id="set-rounds" type="number" step="1" min="1" max="20"></div>
-    </div>
-    <label>Agentes (JSON: name, emoji, color, system)</label>
-    <textarea id="set-agents" spellcheck="false"></textarea>
-    <button id="apply-settings">Aplicar</button>
-  </div>
-
-  <div id="chat"></div>
-
-  <div id="controls">
-    <input id="topic" placeholder="Propón un tema y los agentes debaten&hellip;">
-    <button id="start-btn" disabled>Cargando modelo&hellip;</button>
-    <button id="stop-btn">Detener</button>
-  </div>
-
-  <div id="status">Iniciando&hellip;</div>
-  <div id="progress"><div></div></div>
-  <footer>
-    <span>La conversación se procesa en tu navegador (WebGPU si está disponible; si no, CPU/WASM). Solo se conecta a Hugging Face para descargar el modelo (5,8 GB la primera vez) y a jsDelivr para las librerías.</span>
-    <span>Motor: <a href="https://github.com/ngxson/wllama" target="_blank" rel="noopener">wllama</a> (MIT) &middot; inspirado en el widget de <a href="https://localellm.com" target="_blank" rel="noopener">localellm.com</a> &middot; modelo <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)</span>
-  </footer>
-</div>
-
-<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-<script type="module">
-import { Wllama } from 'https://cdn.jsdelivr.net/npm/@wllama/wllama@3.5.1/esm/index.js';
-
-const params = new URLSearchParams(location.search);
-
-const DEFAULT_AGENTS = [
-  { name: 'Ada',   emoji: '\u2726', color: '#58a6ff',
-    system: 'Eres Ada, la analista entusiasta del grupo. Defiendes las ideas con argumentos concretos, propones caminos a seguir y reconoces los puntos fuertes de los dem\u00e1s.' },
-  { name: 'Bruno', emoji: '\u25B2', color: '#f0883e',
-    system: 'Eres Bruno, el esc\u00e9ptico del grupo. Cuestionas supuestos, se\u00f1alas riesgos y fallos l\u00f3gicos, y pides evidencia. Eres duro con las ideas y respetuoso con las personas.' },
-  { name: 'Carla', emoji: '\u25CF', color: '#3fb950',
-    system: 'Eres Carla, la moderadora. Resume lo dicho, integra los desacuerdos y propone s\u00edntesis o el siguiente paso. Cierra cada ronda con una conclusi\u00f3n breve.' },
-];
-
-const CONFIG = {
-  modelUrl: params.get('modelUrl') || '',
-  repo: params.get('repo') || 'bartowski/MiMo-V2.6-Distill-Qwen-9B-GGUF',
-  file: params.get('file') || 'MiMo-V2.6-Distill-Qwen-9B-Q4_K_M.gguf',
-  nCtx: parseInt(params.get('ctx')) || 8192,
-  maxTokens: parseInt(params.get('maxTokens')) || 384,
-  temperature: parseFloat(params.get('temp')) || 0.7,
-  rounds: parseInt(params.get('rounds')) || 2,
-  autoload: params.get('autoload') !== 'false',
-};
-if (params.get('theme') === 'light') document.body.classList.add('light');
-let agents = DEFAULT_AGENTS;
-if (params.get('agents')) {
-  try { agents = JSON.parse(params.get('agents')); } catch (e) { console.warn('agents JSON inv\u00e1lido', e); }
-}
-
-const chatEl = document.getElementById('chat');
-const statusEl = document.getElementById('status');
-const progressEl = document.getElementById('progress').firstElementChild;
-const topicEl = document.getElementById('topic');
-const startBtn = document.getElementById('start-btn');
-const stopBtn = document.getElementById('stop-btn');
-
-let wllama = null;
-let running = false;
-let stopRequested = false;
-let transcript = [];   // {name|null(user), text}
-let topic = '';
-
-function setStatus(t) { statusEl.textContent = t; }
-function setProgress(p) { progressEl.style.width = Math.max(0, Math.min(100, p)) + '%'; }
-
-function esc(s){ const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
-
-function addMsg(agent, isUser = false) {
-  const d = document.createElement('div');
-  d.className = 'msg' + (isUser ? ' user' : '');
-  const content = document.createElement('div');
-  content.className = 'content';
-  const who = document.createElement('div');
-  who.className = 'who';
-  const body = document.createElement('div');
-  body.className = 'body';
-  if (isUser) { who.textContent = 'T\u00fa'; }
-  else {
-    const av = document.createElement('div');
-    av.className = 'avatar';
-    av.style.background = agent.color;
-    av.textContent = agent.emoji;
-    d.appendChild(av);
-    who.textContent = agent.name;
-    who.style.color = agent.color;
-  }
-  content.appendChild(who); content.appendChild(body);
-  d.appendChild(content);
-  chatEl.appendChild(d);
-  chatEl.scrollTop = chatEl.scrollHeight;
-  return { el: d, body, content };
-}
-
-function addErr(text) {
-  const d = document.createElement('div');
-  d.className = 'msg err';
-  d.textContent = text;
-  chatEl.appendChild(d);
-}
-
-async function loadModel(repo, file) {
-  const url = CONFIG.modelUrl || `https://huggingface.co/${repo}/resolve/main/${file}`;
-  startBtn.disabled = true;
-  setProgress(0);
-  setStatus(`Descargando ${file} (ctx ${CONFIG.nCtx})\u2026`);
-  try {
-    if (wllama) await wllama.exit();
-    wllama = new Wllama({
-      'default': 'https://cdn.jsdelivr.net/npm/@wllama/wllama@3.5.1/esm/wasm/wllama.wasm',
-    }, { parallelDownloads: 5 });
-    await wllama.loadModelFromUrl(url, {
-      n_gpu_layers: 999,
-      n_ctx: CONFIG.nCtx,
-      n_batch: 512,
-      n_threads: Math.max(1, Math.min(8, navigator.hardwareConcurrency || 4)),
-      progressCallback: ({ loaded, total }) => {
-        if (total > 0) {
-          const pct = Math.round((loaded / total) * 100);
-          setProgress(pct);
-          setStatus(`Descargando\u2026 ${pct}% (${(loaded / 1048576).toFixed(0)} MB)`);
-        }
-      },
-    });
-    setProgress(100);
-    setStatus(`Modelo listo. ${agents.length} agentes: ${agents.map(a => a.name).join(', ')}.`);
-    startBtn.disabled = false;
-    startBtn.textContent = 'Iniciar debate';
-    topicEl.focus();
-  } catch (e) {
-    console.error(e);
-    setStatus('Error al cargar el modelo');
-    addErr('No se pudo cargar el modelo: ' + (e?.message || e) +
-      '. Prueba a recargar la p\u00e1gina o a cambiar el archivo en Ajustes.');
-  }
-}
-
-const RULES = 'Est\u00e1s en una conversaci\u00f3n entre varios agentes. ' +
-  'Responde SOLO con tu intervenci\u00f3n: 2-5 frases, directas, en el idioma de la conversaci\u00f3n. ' +
-  'No repitas lo ya dicho; reacciona a la \u00faltima intervenci\u00f3n. ' +
-  'No escribas tu nombre ni ning\u00fan prefijo como "Nombre:". No uses listas largas.';
-
-function transcriptText(maxChars = 9000) {
-  const lines = transcript.map(m => `${m.name || 'Usuario'}: ${m.text}`);
-  let out = lines.join('\n\n');
-  while (out.length > maxChars && lines.length > 2) {
-    lines.splice(1, 1); // conserva el tema (primera l\u00ednea) y lo m\u00e1s reciente
-    out = lines.join('\n\n');
-  }
-  return out;
-}
-
-async function agentTurn(agent) {
-  const view = transcriptText();
-  const messages = [
-    { role: 'system', content: agent.system + ' ' + RULES },
-    { role: 'user', content:
-      `Tema del debate: ${topic}\n\n` +
-      (view ? `Conversaci\u00f3n hasta ahora:\n${view}\n\n` : 'A\u00fan no hay intervenciones.\n\n') +
-      `Ahora hablas t\u00fa, ${agent.name}. Escribe tu intervenci\u00f3n.` },
-  ];
-  const { el, body } = addMsg(agent);
-  el.classList.add('streaming');
-  let think = null;
-  let answer = '', reasoning = '', count = 0;
-  setStatus(`${agent.name} est\u00e1 escribiendo\u2026`);
-  try {
-    const stream = await wllama.createChatCompletion({
-      messages,
-      max_tokens: CONFIG.maxTokens,
-      temperature: CONFIG.temperature,
-      stream: true,
-    });
-    for await (const chunk of stream) {
-      if (stopRequested) break;
-      const delta = chunk.choices?.[0]?.delta || {};
-      const tk = delta.content || '';
-      const rs = delta.reasoning_content || '';
-      if (rs) {
-        reasoning += rs;
-        if (!think) {
-          think = document.createElement('details');
-          think.className = 'think';
-          think.innerHTML = '<summary>Pensamiento</summary><div class="t"></div>';
-          body.parentNode.insertBefore(think, body);
-        }
-        think.querySelector('.t').textContent = reasoning;
-      }
-      if (tk) { answer += tk; body.textContent = answer; }
-      if (tk || rs) { count++; if (count % 10 === 0) setStatus(`${agent.name}\u2026 ${count} tokens`); }
-      chatEl.scrollTop = chatEl.scrollHeight;
-    }
-  } catch (e) {
-    console.error(e);
-    el.classList.add('err');
-    body.textContent = 'Error: ' + (e?.message || e);
-    el.classList.remove('streaming');
-    return;
-  }
-  el.classList.remove('streaming');
-  if (stopRequested) { el.remove(); setStatus('Detenido'); return; }
-  answer = answer.replace(/^\s*(?:\*\*)?[A-Za-z\u00c0-\u024f]+:\s*/, '').trim();
-  if (!answer) { el.remove(); setStatus('Listo'); return; }
-  body.innerHTML = (typeof marked !== 'undefined') ? marked.parse(answer) : esc(answer).replace(/\n/g, '<br>');
-  transcript.push({ name: agent.name, text: answer });
-  setStatus('Listo');
-}
-
-let resume = { round: 1, agent: 0 };
-
-async function runDebate() {
-  running = true;
-  stopRequested = false;
-  startBtn.style.display = 'none';
-  stopBtn.style.display = 'inline-block';
-  topicEl.disabled = true;
-  try {
-    for (let r = resume.round; r <= CONFIG.rounds && !stopRequested; r++) {
-      setStatus(`Ronda ${r}/${CONFIG.rounds}`);
-      for (let i = (r === resume.round ? resume.agent : 0); i < agents.length; i++) {
-        if (stopRequested) { resume = { round: r, agent: i }; break; }
-        await agentTurn(agents[i]);
-        if (stopRequested) { resume = { round: r, agent: i }; break; }
-      }
-      if (!stopRequested) resume = { round: r + 1, agent: 0 };
-    }
-    if (!stopRequested) resume = { round: 1, agent: 0 };
-  } finally {
-    running = false;
-    stopBtn.style.display = 'none';
-    startBtn.style.display = 'inline-block';
-    startBtn.textContent = 'Continuar debate';
-    startBtn.disabled = false;
-    topicEl.disabled = false;
-    setStatus(stopRequested ? 'Detenido. Puedes continuar o cambiar de tema.' : 'Debate terminado. Puedes continuar.');
-  }
-}
-
-startBtn.addEventListener('click', () => {
-  if (!wllama || running) return;
-  const newTopic = topicEl.value.trim();
-  if (newTopic && newTopic !== topic) {
-    topic = newTopic;
-    transcript = [];
-    chatEl.innerHTML = '';
-    resume = { round: 1, agent: 0 };
-    const m = addMsg(null, true);
-    m.body.textContent = newTopic;
-    transcript.push({ name: null, text: 'Tema propuesto: ' + newTopic });
-  } else if (!topic) {
-    topic = 'Tema libre';
-  }
-  runDebate();
-});
-stopBtn.addEventListener('click', () => { stopRequested = true; setStatus('Deteniendo\u2026'); });
-
-// --- Settings ---
-const settingsPanel = document.getElementById('settings');
-document.getElementById('settings-btn').addEventListener('click', () => {
-  if (!settingsPanel.classList.contains('open')) {
-    document.getElementById('set-repo').value = CONFIG.repo;
-    document.getElementById('set-file').value = CONFIG.file;
-    document.getElementById('set-ctx').value = CONFIG.nCtx;
-    document.getElementById('set-maxtokens').value = CONFIG.maxTokens;
-    document.getElementById('set-temp').value = CONFIG.temperature;
-    document.getElementById('set-rounds').value = CONFIG.rounds;
-    document.getElementById('set-agents').value = JSON.stringify(agents, null, 2);
-  }
-  settingsPanel.classList.toggle('open');
-});
-document.getElementById('apply-settings').addEventListener('click', async () => {
-  try { agents = JSON.parse(document.getElementById('set-agents').value); }
-  catch (e) { alert('JSON de agentes inv\u00e1lido: ' + e.message); return; }
-  if (!Array.isArray(agents) || agents.length < 2) { alert('Se necesitan al menos 2 agentes.'); return; }
-  CONFIG.maxTokens = parseInt(document.getElementById('set-maxtokens').value) || CONFIG.maxTokens;
-  CONFIG.temperature = parseFloat(document.getElementById('set-temp').value) || CONFIG.temperature;
-  CONFIG.rounds = parseInt(document.getElementById('set-rounds').value) || CONFIG.rounds;
-  const newCtx = parseInt(document.getElementById('set-ctx').value) || CONFIG.nCtx;
-  const newRepo = document.getElementById('set-repo').value.trim();
-  const newFile = document.getElementById('set-file').value.trim();
-  const reload = newCtx !== CONFIG.nCtx || newRepo !== CONFIG.repo || newFile !== CONFIG.file;
-  CONFIG.nCtx = newCtx; CONFIG.repo = newRepo; CONFIG.file = newFile;
-  settingsPanel.classList.remove('open');
-  if (reload || !wllama) { transcript = []; chatEl.innerHTML = ''; await loadModel(CONFIG.repo, CONFIG.file); }
-  else setStatus(`Ajustes aplicados. Agentes: ${agents.map(a => a.name).join(', ')}.`);
-});
-
-if (CONFIG.autoload) loadModel(CONFIG.repo, CONFIG.file);
-else setStatus('Modo manual: carga el modelo desde Ajustes.');
-</script>
-</body>
-</html>