Update index.html

index.html

@@ -1,55 +1,46 @@
-<!DOCTYPE html>
-<html lang="es">
-<head>
-    <meta charset="UTF-8">
-    <script src="https://cdn.tailwindcss.com"></script>
-    <title>PragmaLens AI Audit</title>
-</head>
-<body class="bg-slate-900 text-slate-100 min-h-screen p-8">
-    <div class="max-w-4xl mx-auto">
-        <h1 class="text-4xl font-bold mb-8 text-indigo-400">🔍 PragmaLens AI</h1>
-        
-        <div class="bg-slate-800 p-6 rounded-xl border border-slate-700 shadow-xl">
-            <input type="file" id="pdfInput" class="block w-full mb-4 text-sm text-slate-400 file:bg-indigo-600 file:px-4 file:py-2 file:rounded-lg cursor-pointer">
-            <textarea id="textInput" class="w-full bg-slate-950 p-4 rounded-lg border border-slate-700 h-32" placeholder="Introduce el texto aquí..."></textarea>
-            <button id="analyzeBtn" class="w-full mt-4 bg-indigo-600 hover:bg-indigo-500 py-3 rounded-lg font-bold transition">Ejecutar Auditoría</button>
-        </div>
+<script>
+    document.getElementById('analyzeBtn').onclick = async () => {
+        const resDiv = document.getElementById('results');
+        const content = document.getElementById('content');
+        const file = document.getElementById('pdfInput').files[0];
+        const text = document.getElementById('textInput').value;
 
-        <div id="results" class="mt-8 hidden bg-slate-800 p-6 rounded-xl border border-indigo-500/30">
-            <h2 class="text-xl font-bold mb-4 text-indigo-300">Resultados del Análisis</h2>
-            <div id="content" class="text-sm space-y-4"></div>
-        </div>
-    </div>
+        resDiv.classList.remove('hidden');
+        content.innerHTML = "<div class='animate-pulse text-indigo-400'>Analizando discurso...</div>";
 
-    <script>
-        document.getElementById('analyzeBtn').onclick = async () => {
-            const resDiv = document.getElementById('results');
-            const content = document.getElementById('content');
-            const file = document.getElementById('pdfInput').files[0];
-            const text = document.getElementById('textInput').value;
-
-            resDiv.classList.remove('hidden');
-            content.innerText = "Procesando análisis lingüístico...";
+        try {
+            let data;
+            if (file) {
+                const fd = new FormData();
+                fd.append('file', file);
+                const res = await fetch('/analyze_pdf', {method: 'POST', body: fd});
+                data = await res.json();
+            } else {
+                const res = await fetch('/analyze', {
+                    method: 'POST', headers: {'Content-Type': 'application/json'},
+                    body: JSON.stringify({text})
+                });
+                data = await res.json();
+            }
 
-            try {
-                let data;
-                if (file) {
-                    const fd = new FormData();
-                    fd.append('file', file);
-                    const res = await fetch('/analyze_pdf', {method: 'POST', body: fd});
-                    data = await res.json();
-                } else {
-                    const res = await fetch('/analyze', {
-                        method: 'POST', headers: {'Content-Type': 'application/json'},
-                        body: JSON.stringify({text})
-                    });
-                    data = await res.json();
+            // Transformamos el JSON en una interfaz visual
+            let html = "";
+            for (const [key, section] of Object.entries(data)) {
+                html += `<div class="mb-6 border-l-4 border-indigo-500 pl-4">
+                            <h3 class="text-lg font-bold capitalize text-indigo-300 mb-2">${key.replace('_', ' ')}</h3>
+                            <div class="grid gap-2">`;
+                
+                for (const [subKey, val] of Object.entries(section)) {
+                    html += `<div>
+                                <span class="text-xs font-bold uppercase text-slate-400">${subKey.replace('_', ' ')}:</span>
+                                <p class="text-sm text-slate-200">${val}</p>
+                             </div>`;
                 }
-                content.innerHTML = `<pre class="whitespace-pre-wrap">${JSON.stringify(data, null, 2)}</pre>`;
-            } catch (e) {
-                content.innerText = "Error: " + e.message;
+                html += `</div></div>`;
             }
-        };
-    </script>
-</body>
-</html>
+            content.innerHTML = html;
+        } catch (e) {
+            content.innerText = "Error procesando el JSON: " + e.message;
+        }
+    };
+</script>