Update templates/index.html

templates/index.html

@@ -17,6 +17,7 @@
       --info: #3498db;
       --bg-light: #f8f9fa;
       --bg-card: #2d2d2d;
+      --border: #444;
     }
 
     * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -28,48 +29,52 @@
       line-height: 1.6;
     }
 
-    h1 { color: #2c3e50; margin-bottom: 20px; }
+    h1 { color: #2c3e50; margin-bottom: 20px; text-align: center; }
     label { font-weight: bold; display: block; margin-bottom: 8px; }
 
     textarea {
       width: 100%;
-      height: 120px;
+      height: 140px;
       padding: 12px;
-      margin-bottom: 12px;
+      margin-bottom: 16px;
       font-family: monospace;
       border: 1px solid #ccc;
-      border-radius: 6px;
+      border-radius: 8px;
       resize: vertical;
+      font-size: 1rem;
     }
 
     button {
-      padding: 12px 24px;
+      padding: 14px 32px;
       background: var(--primary);
       color: white;
       border: none;
-      border-radius: 6px;
+      border-radius: 8px;
       cursor: pointer;
-      font-size: 1rem;
+      font-size: 1.1rem;
       transition: background 0.2s;
+      display: block;
+      margin: 0 auto 30px;
     }
     button:hover { background: var(--primary-dark); }
 
     #result {
       margin-top: 30px;
-      padding: 20px;
+      padding: 24px;
       background: white;
-      border-radius: 8px;
-      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+      border-radius: 12px;
+      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+      min-height: 200px;
     }
 
     .spinner {
-      border: 4px solid #f3f3f3;
-      border-top: 4px solid var(--info);
+      border: 5px solid #f3f3f3;
+      border-top: 5px solid var(--info);
       border-radius: 50%;
-      width: 40px;
-      height: 40px;
+      width: 50px;
+      height: 50px;
       animation: spin 1s linear infinite;
-      margin: 20px auto;
+      margin: 30px auto;
     }
 
     @keyframes spin {
@@ -79,12 +84,13 @@
 
     /* Resultados de agentes */
     .agent-result {
-      margin: 16px 0;
-      padding: 16px;
-      border-radius: 6px;
+      margin: 20px 0;
+      padding: 18px;
+      border-radius: 10px;
       background: var(--bg-card);
       color: var(--text-light);
-      border-left: 4px solid var(--success);
+      border-left: 5px solid var(--success);
+      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
     }
 
     .agent-result.error {
@@ -96,18 +102,38 @@
     .agent-result strong {
       color: var(--success-light);
       display: block;
-      margin-bottom: 8px;
+      margin-bottom: 10px;
+      font-size: 1.2rem;
+    }
+
+    .generated-image {
+      margin: 20px 0;
+      text-align: center;
+    }
+
+    .generated-image img {
+      max-width: 100%;
+      border-radius: 12px;
+      box-shadow: 0 8px 20px rgba(0,0,0,0.3);
+      margin-bottom: 10px;
+    }
+
+    .caption {
+      color: #aaa;
+      font-size: 0.95rem;
+      margin-top: 8px;
     }
 
     .download-btn {
       display: inline-block;
-      padding: 12px 24px;
+      padding: 12px 28px;
       background: #1976d2;
       color: white;
       text-decoration: none;
-      border-radius: 6px;
-      margin-top: 16px;
+      border-radius: 8px;
+      margin-top: 20px;
       transition: background 0.2s;
+      font-weight: bold;
     }
 
     .download-btn:hover {
@@ -118,7 +144,7 @@
       background: #272822;
       color: #f8f8f2;
       padding: 15px;
-      border-radius: 6px;
+      border-radius: 8px;
       overflow-x: auto;
       margin: 12px 0;
     }
@@ -142,61 +168,71 @@
       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;">
+        <div style="text-align:center; color:#666; padding:40px;">
           <div class="spinner"></div>
-          Procesando... (puede tardar 10–60 segundos la primera vez)
+          <p>Procesando tu misión... (puede tardar 10–90 segundos la primera vez)</p>
         </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(resultado => {  // ← cambiamos 'r' por 'resultado' para evitar conflictos
+          data.results.forEach(resultado => {
             const isError = !resultado.success;
             html += `
               <div class="agent-result ${isError ? 'error' : ''}">
                 <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>`;
-  
+                <div>${resultado.response ? resultado.response.substring(0, 400) + (resultado.response.length > 400 ? '...' : '') : resultado.error || 'Sin respuesta'}</div>`;
+
             // Mostrar imágenes si existen
-            if (resultado.image_urls && resultado.image_urls.length > 0) {
+            if (resultado.image_url) {
+              html += `
+                <div class="generated-image">
+                  <img src="${resultado.image_url}" alt="Imagen generada por ${resultado.agent}">
+                  <div class="caption">Generada con FLUX.1-schnell</div>
+                </div>`;
+            } else 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 class="generated-image">
+                    <img src="${url}" alt="Imagen generada por ${resultado.agent}">
+                    <div class="caption">Generada con FLUX.1-schnell</div>
                   </div>`;
               });
+            } else if (resultado.queries && resultado.queries.length > 0) {
+              html += `<p><em>Ideas de imagen: ${resultado.queries.join(" • ")}</em></p>`;
             }
+
+            html += '</div>';
           });
         } else {
           html += '<p>No se delegó a ningún agente.</p>';
         }
-  
+
         // Link de descarga de documento
         if (data.file_url) {
           html += `
@@ -204,7 +240,7 @@
               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>`;