Update index.html

index.html

@@ -83,6 +83,10 @@ body.light #chat{
 .msg.user .who{display:none}
 .msg.err{align-self:center;max-width:92%;background:var(--sys);color:var(--sys-text);font-size:12.5px;
   border-radius:8px;padding:6px 12px;text-align:center;box-shadow:0 1px 1px rgba(0,0,0,.3)}
+.msg.sys{align-self:center;max-width:92%;background:var(--sys);color:var(--sys-text);font-size:12.5px;
+  border-radius:8px;padding:8px 14px;text-align:left;box-shadow:0 1px 1px rgba(0,0,0,.3)}
+.msg.sys a{color:var(--accent);word-break:break-word}
+#settings input[type=checkbox]{width:auto}
 @keyframes fadein{from{opacity:0;transform:translateY(4px)}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%;
@@ -224,6 +228,9 @@ footer a{color:var(--accent);text-decoration:none}
         <div><label>Rondas</label><input id="set-rounds" type="number" step="1" min="1" max="20"></div>
         <div><label>Orden de turnos</label><select id="set-order"><option value="seq">Secuencial</option><option value="rand">Aleatorio por ronda</option></select></div>
       </div>
+      <div class="row">
+        <div><label style="display:flex;align-items:center;gap:8px;cursor:pointer;margin-top:10px"><input id="set-search" type="checkbox"> 🌐 B&uacute;squeda web al empezar un tema (Tavily sin clave + Wikipedia; solo se env&iacute;a el tema, nunca la conversaci&oacute;n)</label></div>
+      </div>
       <label>Agentes (JSON: name, emoji, color, system)</label>
       <textarea id="set-agents" spellcheck="false"></textarea>
       <button id="apply-settings">Aplicar</button>
@@ -241,7 +248,7 @@ footer a{color:var(--accent);text-decoration:none}
     <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>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. Si la búsqueda web está activada, solo el tema se envía a Tavily (modo sin clave) y a Wikipedia para traer contexto y fuentes.</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>
@@ -292,6 +299,13 @@ const CONFIG = {
   rounds: parseInt(params.get('rounds')) || 2,
   autoload: params.get('autoload') !== 'false',
   order: params.get('order') === 'rand' ? 'rand' : 'seq',
+  search: (() => {
+    const p = params.get('search');
+    if (p === '1') return true;
+    if (p === '0') return false;
+    try { const v = localStorage.getItem('mad_search'); if (v !== null) return v === '1'; } catch (e) {}
+    return true;
+  })(),
 };
 if (params.get('theme') === 'light') document.body.classList.add('light');
 const AGENTS_KEY = 'mad_agents';
@@ -521,6 +535,105 @@ function addErr(text) {
   chatEl.appendChild(d);
 }
 
+let webContext = '';   // bloque de contexto web inyectado en los prompts del debate actual
+let webSources = [];   // fuentes numeradas del debate actual
+
+function addSys(build) {
+  const d = document.createElement('div');
+  d.className = 'msg sys';
+  const body = document.createElement('div');
+  body.className = 'body';
+  d.appendChild(body);
+  chatEl.appendChild(d);
+  build(body);
+  chatEl.scrollTop = chatEl.scrollHeight;
+  return d;
+}
+
+const SEARCH_TIMEOUT_MS = 12000;
+async function fetchJson(url, opts) {
+  const ctrl = new AbortController();
+  const t = setTimeout(() => ctrl.abort(), SEARCH_TIMEOUT_MS);
+  try {
+    const r = await fetch(url, Object.assign({}, opts, { signal: ctrl.signal }));
+    return { ok: r.ok, status: r.status, json: r.ok ? await r.json().catch(() => null) : null };
+  } finally { clearTimeout(t); }
+}
+
+// Solo se envia el tema (query); nunca la conversacion. Sin claves: Tavily keyless
+// (doc oficial: docs.tavily.com/documentation/keyless) y Wikipedia action API (origin=*).
+async function fetchWebContext(query) {
+  const sources = [];
+  const failed = [];
+  try {
+    const r = await fetchJson('https://api.tavily.com/search', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'X-Tavily-Access-Mode': 'keyless' },
+      body: JSON.stringify({ query: query, max_results: 4 }),
+    });
+    if (r.ok && r.json && Array.isArray(r.json.results)) {
+      for (const x of r.json.results) {
+        if (x && x.url && x.title) sources.push({ title: String(x.title), url: String(x.url), snippet: String(x.content || '').slice(0, 280) });
+      }
+      if (!r.json.results.length) failed.push('Tavily no devolvi\u00f3 resultados');
+    } else {
+      failed.push('Tavily respondi\u00f3 ' + r.status + (r.status === 429 ? ' (l\u00edmite gratuito alcanzado; prueba m\u00e1s tarde)' : ''));
+    }
+  } catch (e) { failed.push('Tavily no accesible (' + (e && e.name === 'AbortError' ? 'tiempo de espera' : 'red') + ')'); }
+  try {
+    const u = 'https://es.wikipedia.org/w/api.php?action=query&list=search&format=json&origin=*&srlimit=3&srsearch=' + encodeURIComponent(query);
+    const r = await fetchJson(u);
+    if (r.ok && r.json && r.json.query && Array.isArray(r.json.query.search)) {
+      for (const x of r.json.query.search) {
+        const t = String(x && x.title || '');
+        if (!t) continue;
+        sources.push({ title: 'Wikipedia: ' + t, url: 'https://es.wikipedia.org/wiki/' + encodeURIComponent(t.replace(/ /g, '_')), snippet: String(x.snippet || '').replace(/<[^>]+>/g, '').slice(0, 220) });
+      }
+      if (!r.json.query.search.length) failed.push('Wikipedia sin resultados');
+    } else {
+      failed.push('Wikipedia respondi\u00f3 ' + r.status);
+    }
+  } catch (e) { failed.push('Wikipedia no accesible (' + (e && e.name === 'AbortError' ? 'tiempo de espera' : 'red') + ')'); }
+  return { sources: sources.slice(0, 6), failed: failed };
+}
+
+async function prepareWebContext(q) {
+  addSys(b => { b.textContent = '\u{1F50E} Buscando contexto web sobre \u00ab' + q + '\u00bb (solo se env\u00eda el tema a Tavily y Wikipedia)\u2026'; });
+  let res;
+  try { res = await fetchWebContext(q); }
+  catch (e) { res = { sources: [], failed: ['error inesperado'] }; }
+  webSources = res.sources;
+  if (webSources.length) {
+    webContext = webSources.map((s, i) => '[' + (i + 1) + '] ' + s.title + ' \u2014 ' + s.url + '\n' + s.snippet).join('\n');
+    if (webContext.length > 1600) webContext = webContext.slice(0, 1600);
+    addSys(b => {
+      const t = document.createElement('div');
+      t.textContent = '\u{1F4DA} Fuentes para este debate (los agentes pueden citarlas como [1], [2]\u2026):';
+      b.appendChild(t);
+      const ol = document.createElement('ol');
+      ol.style.margin = '6px 0 0 18px';
+      webSources.forEach(s => {
+        const li = document.createElement('li');
+        const a = document.createElement('a');
+        if (/^https?:\/\//i.test(s.url)) { a.href = s.url; a.target = '_blank'; a.rel = 'noopener'; }
+        a.textContent = s.title;
+        li.appendChild(a);
+        ol.appendChild(li);
+      });
+      b.appendChild(ol);
+      if (res.failed.length) {
+        const f = document.createElement('div');
+        f.style.marginTop = '4px';
+        f.textContent = '\u26a0\uFE0F ' + res.failed.join(' \u00b7 ');
+        b.appendChild(f);
+      }
+    });
+  } else {
+    webContext = '';
+    addSys(b => { b.textContent = '\u26a0\uFE0F B\u00fasqueda web sin resultados ahora (' + (res.failed.join(' \u00b7 ') || 'error') + '). El debate contin\u00faa sin contexto web.'; });
+  }
+}
+
 async function loadModel(repo, file) {
   const url = CONFIG.modelUrl || `https://huggingface.co/${repo}/resolve/main/${file}`;
   startBtn.disabled = true;
@@ -595,6 +708,7 @@ async function agentTurn(agent) {
     { role: 'system', content: agent.system + ' ' + RULES },
     { role: 'user', content:
       `Tema del debate: ${topic}\n\n` +
+      (webContext ? `Contexto web (fuentes numeradas; si las usas, c\u00edtalas como [1], [2]\u2026):\n${webContext}\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.` },
   ];
@@ -696,21 +810,30 @@ async function runDebate() {
   }
 }
 
-startBtn.addEventListener('click', () => {
+startBtn.addEventListener('click', async () => {
   if (!wllama || running) return;
   const newTopic = topicEl.value.trim();
+  let freshTopic = false;
   if (newTopic && newTopic !== topic) {
     topic = newTopic;
     transcript = [];
     chatEl.innerHTML = '';
     resume = { round: 1, order: null, pos: 0 };
+    webContext = '';
+    webSources = [];
     const m = addMsg(null, true);
     m.body.textContent = newTopic;
     transcript.push({ name: null, text: 'Tema propuesto: ' + newTopic });
     recordTopic(newTopic);
+    freshTopic = true;
   } else if (!topic) {
     topic = 'Tema libre';
   }
+  if (CONFIG.search && freshTopic) {
+    startBtn.disabled = true;
+    try { await prepareWebContext(topic); } catch (e) { console.warn('busqueda web', e); }
+    startBtn.disabled = false;
+  }
   runDebate();
 });
 stopBtn.addEventListener('click', () => { stopRequested = true; setStatus('Deteniendo\u2026'); });
@@ -768,6 +891,7 @@ document.getElementById('settings-btn').addEventListener('click', () => {
     document.getElementById('set-temp').value = CONFIG.temperature;
     document.getElementById('set-rounds').value = CONFIG.rounds;
     document.getElementById('set-order').value = CONFIG.order;
+    document.getElementById('set-search').checked = CONFIG.search;
     document.getElementById('set-agents').value = JSON.stringify(agents, null, 2);
   }
   settingsPanel.classList.toggle('open');
@@ -782,6 +906,8 @@ document.getElementById('apply-settings').addEventListener('click', async () =>
   CONFIG.temperature = parseFloat(document.getElementById('set-temp').value) || CONFIG.temperature;
   CONFIG.rounds = parseInt(document.getElementById('set-rounds').value) || CONFIG.rounds;
   CONFIG.order = document.getElementById('set-order').value === 'rand' ? 'rand' : 'seq';
+  CONFIG.search = document.getElementById('set-search').checked;
+  try { localStorage.setItem('mad_search', CONFIG.search ? '1' : '0'); } catch (e) {}
   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();