analizadordocumentoJAC

Sleeping

App Files Files Community

jcalbornoz commited on Oct 7, 2025

Commit

cf50f79

verified ·

1 Parent(s): 45af1ae

Update index.html

Browse files

Files changed (1) hide show

index.html +130 -32

index.html CHANGED Viewed

@@ -1,63 +1,130 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Resumidor de Documentos</title>
     <style>
-        body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; background-color: #f4f4f9; }
         .container {
-            width: 80%;
-            max-width: 800px;
             margin: 0 auto;
             padding: 20px;
             border: 1px solid #ccc;
             border-radius: 10px;
             background-color: #fff;
-            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
         }
-        h1 { color: #333; }
-        p { color: #666; }
-        #file-upload { margin: 20px 0; }
         button {
             padding: 10px 20px;
-            background-color: #007bff;
             color: white;
             border: none;
             border-radius: 5px;
             cursor: pointer;
             transition: background-color 0.3s;
         }
-        button:hover {
-            background-color: #0056b3;
         }
-        #summary-result {
-            margin-top: 20px;
-            text-align: left;
-            background-color: #e9ecef;
             padding: 15px;
             border-radius: 8px;
         }
-        #loading {
             color: #007bff;
-            font-size: 1.2em;
-            margin-top: 10px;
         }
-        ul { list-style-type: disc; padding-left: 20px; }
-        li { margin-bottom: 10px; line-height: 1.5; }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1>Agente experto en derecho inmobiliario colombiano</h1>
-        <p>Sube un archivo de texto (.txt) o PDF para generar un resumen de 7 puntos clave.</p>
-        <input type="file" id="file-upload" accept=".txt,.pdf">
-        <button onclick="uploadFile()">Generar Resumen</button>
-        <div id="loading" style="display: none;">Cargando...</div>
-        <div id="summary-result"></div>
     </div>
     <script>
         async function uploadFile() {
             const fileInput = document.getElementById('file-upload');
             const file = fileInput.files[0];
             if (!file) {
                 alert('Por favor, selecciona un archivo.');
                 return;
@@ -67,29 +134,60 @@
             formData.append('file', file);
             document.getElementById('loading').style.display = 'block';
-            document.getElementById('summary-result').innerHTML = '';
             try {
                 const response = await fetch('/summarize', {
                     method: 'POST',
                     body: formData
                 });
                 const data = await response.json();
                 if (response.ok) {
-                    const resultDiv = document.getElementById('summary-result');
                     const ul = document.createElement('ul');
                     data.summary.forEach(point => {
                         const li = document.createElement('li');
-                        li.textContent = point;
                         ul.appendChild(li);
                     });
-                    resultDiv.appendChild(ul);
                 } else {
-                    alert('Error: ' + data.error);
                 }
             } catch (error) {
-                alert('Ocurrió un error al conectar con el servidor.');
             } finally {
                 document.getElementById('loading').style.display = 'none';
             }

 <!DOCTYPE html>
 <html>
 <head>
+    <title>Analizador de Documentos Inmobiliarios y JAC</title>
     <style>
+        body { font-family: Arial, sans-serif; text-align: center; margin-top: 20px; background-color: #f4f4f9; color: #333; }
         .container {
+            width: 90%;
+            max-width: 1000px;
             margin: 0 auto;
             padding: 20px;
             border: 1px solid #ccc;
             border-radius: 10px;
             background-color: #fff;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
         }
+        h1 { color: #007bff; }
+        p { color: #666; margin-bottom: 20px;}
+        #upload-section { margin: 20px 0; border-bottom: 1px solid #eee; padding-bottom: 20px; }
         button {
             padding: 10px 20px;
+            background-color: #28a745;
             color: white;
             border: none;
             border-radius: 5px;
             cursor: pointer;
             transition: background-color 0.3s;
+            margin-left: 10px;
         }
+        button:hover { background-color: #218838; }
+        #loading {
+            color: #007bff;
+            font-size: 1.2em;
+            margin-top: 15px;
+            display: none;
         }
+        .results-container {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 30px;
+            text-align: left;
+        }
+        .result-panel {
+            width: 48%; /* Divide el espacio casi a la mitad */
             padding: 15px;
             border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
         }
+        #summary-display {
+            background-color: #e6f7ff; /* Azul claro para el resumen */
+            border: 1px solid #b3e0ff;
+        }
+        #json-display {
+            background-color: #fff0e6; /* Naranja claro para el JSON */
+            border: 1px solid #ffccb3;
+        }
+        h2 {
+            border-bottom: 2px solid #ccc;
+            padding-bottom: 5px;
+            margin-top: 0;
             color: #007bff;
         }
+        ul { list-style-type: none; padding-left: 0; }
+        li { margin-bottom: 12px; line-height: 1.4; border-bottom: 1px dotted #ccc; padding-bottom: 5px;}
+        li strong { color: #333; }
+        pre {
+            background-color: #f8f8f8;
+            padding: 10px;
+            border-radius: 5px;
+            overflow-x: auto;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+            font-size: 0.9em;
+            border: 1px solid #ddd;
+        }
     </style>
 </head>
 <body>
     <div class="container">
+        <h1>Análisis Experto de Documentos</h1>
+        <p>Sube un Certificado de Tradición y Libertad (CTL) o un documento de Junta de Acción Comunal (JAC).</p>
+        <div id="upload-section">
+            <input type="file" id="file-upload" accept=".txt,.pdf">
+            <button onclick="uploadFile()">Analizar Documento</button>
+        </div>
+        <div id="loading">Procesando documento, esto puede tardar si el PDF es escaneado...</div>
+        <div class="results-container">
+            <div id="summary-display" class="result-panel">
+                <h2>✅ Resumen de Puntos Clave</h2>
+                <div id="summary-result">Aquí se mostrará el análisis estructurado de los 7 puntos.</div>
+            </div>
+            <div id="json-display" class="result-panel">
+                <h2>💻 Estructura JSON Completa</h2>
+                <pre id="json-result">El JSON completo se mostrará aquí.</pre>
+            </div>
+        </div>
     </div>
     <script>
+        // Función para limpiar el contenido anterior
+        function resetResults() {
+            document.getElementById('loading').style.display = 'none';
+            document.getElementById('summary-result').innerHTML = '';
+            document.getElementById('json-result').textContent = '';
+            document.getElementById('summary-display').style.display = 'none';
+            document.getElementById('json-display').style.display = 'none';
+        }
         async function uploadFile() {
             const fileInput = document.getElementById('file-upload');
             const file = fileInput.files[0];
+            resetResults();
             if (!file) {
                 alert('Por favor, selecciona un archivo.');
                 return;
             formData.append('file', file);
             document.getElementById('loading').style.display = 'block';
             try {
                 const response = await fetch('/summarize', {
                     method: 'POST',
                     body: formData
                 });
                 const data = await response.json();
                 if (response.ok) {
+                    const summaryDiv = document.getElementById('summary-result');
+                    const jsonPre = document.getElementById('json-result');
+                    // 1. Mostrar el Resumen/Lista
                     const ul = document.createElement('ul');
+                    // El backend devuelve 'summary' como una lista de strings formateados: ["**Campo:** Valor"]
                     data.summary.forEach(point => {
                         const li = document.createElement('li');
+                        // Usamos innerHTML para renderizar el formato ** negrita **
+                        li.innerHTML = point;
                         ul.appendChild(li);
                     });
+                    summaryDiv.appendChild(ul);
+                    // 2. Mostrar el JSON completo
+                    // Los datos reales del JSON están anidados dentro de los strings del resumen.
+                    // Para mostrar el JSON original completo, necesitaríamos que el backend devuelva
+                    // la lista 'summary' Y el objeto JSON original.
+                    // Por simplicidad, reconstruimos o asumimos el JSON original
+                    // ya que el backend lo convierte a 'summary_list' (ver app.py)
+                    // Para mostrar el objeto que se envió desde el backend:
+                    const rawJson = {};
+                    data.summary.forEach(item => {
+                        const parts = item.split(':** ');
+                        if (parts.length === 2) {
+                            // Extrae la clave limpiando las negritas (**)
+                            let key = parts[0].replace(/\*\*/g, '').trim();
+                            key = key.charAt(0).toLowerCase() + key.slice(1).replace(/\s/g, '_');
+                            rawJson[key] = parts[1].trim();
+                        }
+                    });
+                    jsonPre.textContent = JSON.stringify(rawJson, null, 4);
+                    document.getElementById('summary-display').style.display = 'block';
+                    document.getElementById('json-display').style.display = 'block';
                 } else {
+                    // Mostrar error del servidor
+                    document.getElementById('summary-result').innerHTML = `Error: ${data.error}`;
                 }
             } catch (error) {
+                document.getElementById('summary-result').innerHTML = `Ocurrió un error de conexión con el servidor.`;
             } finally {
                 document.getElementById('loading').style.display = 'none';
             }