Update templates/index.html

templates/index.html

@@ -142,7 +142,7 @@
       const taskInput = document.getElementById('task');
       const task = taskInput.value.trim();
       if (!task) return alert('Escribe algo primero');
-
+  
       const output = document.getElementById('output');
       output.innerHTML = `
         <div style="text-align:center; color:#666; padding:30px;">
@@ -150,59 +150,61 @@
           Procesando... (puede tardar 10–60 segundos la primera vez)
         </div>
       `;
-
+  
       try {
         const res = await fetch('/api/mission', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ task })
         });
-
+  
         const data = await res.json();
-
+  
         if (!res.ok) {
           output.innerHTML = `<pre style="color:red; background:#ffebee; padding:15px; border-radius:8px;">Error ${res.status}: ${JSON.stringify(data, null, 2)}</pre>`;
           return;
         }
-
+  
         let html = '<h3>Resultado de la misión</h3>';
-
+  
         // Razonamiento del manager
         if (data.plan && data.plan.reasoning) {
           html += `<p><strong>Manager pensó:</strong> ${data.plan.reasoning}</p>`;
         }
-
+  
         // Resultados de agentes
         if (data.results && data.results.length > 0) {
           html += '<h4>Agentes que trabajaron:</h4>';
-          data.results.forEach(r => {
-            const isError = !r.success;
+          data.results.forEach(resultado => {  // ← cambiamos 'r' por 'resultado' para evitar conflictos
+            const isError = !resultado.success;
             html += `
               <div class="agent-result ${isError ? 'error' : ''}">
-                <strong>${r.agent} (${isError ? 'Error' : 'Éxito'})</strong>
-                <div>${r.response ? r.response.substring(0, 400) + (r.response.length > 400 ? '...' : '') : r.error || 'Sin respuesta'}</div>
+                <strong>${resultado.agent} (${isError ? 'Error' : 'Éxito'})</strong>
+                <div>${resultado.response ? resultado.response.substring(0, 400) + (resultado.response.length > 400 ? '...' : '') : resultado.error || 'Sin respuesta'}</div>
               </div>`;
+  
+            // Mostrar imágenes si existen
+            if (resultado.image_urls && resultado.image_urls.length > 0) {
+              resultado.image_urls.forEach(url => {
+                html += `
+                  <div style="margin:15px 0;">
+                    <img src="${url}" alt="Imagen generada" style="max-width:100%; border-radius:8px; box-shadow:0 4px 8px rgba(0,0,0,0.2);">
+                  </div>`;
+              });
+            }
           });
         } else {
           html += '<p>No se delegó a ningún agente.</p>';
         }
-
-        //Ver imagen generada
-        if (r.image_url) {
-          html += `
-            <div style="margin-top:15px;">
-              <img src="${r.image_url}" alt="Imagen generada" style="max-width:100%; border-radius:8px; box-shadow:0 4px 8px rgba(0,0,0,0.2);">
-              <p><small>Generada con FLUX.1-schnell</small></p>
-            </div>`;
-        }
-        // Link de descarga
+  
+        // Link de descarga de documento
         if (data.file_url) {
           html += `
             <a href="${data.file_url}" target="_blank" class="download-btn" download>
               Descargar documento generado
             </a>`;
         }
-
+  
         output.innerHTML = html;
       } catch (err) {
         output.innerHTML = `<pre style="color:red; background:#ffebee; padding:15px; border-radius:8px;">Error de conexión: ${err.message}</pre>`;