Spaces:
Sleeping
Sleeping
| <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%; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); min-height: 250px; } | |
| #summary-display { background-color: #e6f7ff; border: 1px solid #b3e0ff; } | |
| #json-display { background-color: #fff0e6; border: 1px solid #ffccb3; } | |
| h2 { border-bottom: 2px solid #ccc; padding-bottom: 5px; margin-top: 0; color: #007bff; } | |
| .narrative-box { | |
| background-color: #ffffff; | |
| padding: 10px; | |
| margin-bottom: 15px; | |
| border-left: 5px solid #007bff; | |
| font-style: italic; | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.05); | |
| } | |
| 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 (incluyendo OCR si es necesario), esto puede tardar varios segundos...</div> | |
| <div class="results-container"> | |
| <div id="summary-display" class="result-panel"> | |
| <h2>✅ Análisis Ejecutivo y Puntos Clave</h2> | |
| <div id="summary-result">Aquí se mostrará el análisis de los 7 campos clave.</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> | |
| function resetResults() { | |
| document.getElementById('loading').style.display = 'none'; | |
| document.getElementById('summary-result').innerHTML = 'Aquí se mostrará el análisis de los 7 campos clave.'; | |
| document.getElementById('json-result').textContent = 'El JSON completo se mostrará aquí.'; | |
| 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; | |
| } | |
| const formData = new FormData(); | |
| 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 Análisis Narrativo (nuevo campo 'narrative') | |
| const narrativeBox = document.createElement('div'); | |
| narrativeBox.className = 'narrative-box'; | |
| narrativeBox.innerHTML = `<strong>Tipo de Documento:</strong> ${data.structured_data.tipo_documento_detectado || 'No detectado.'}<br> | |
| <strong>Análisis Ejecutivo:</strong> ${data.narrative}`; | |
| // 2. Mostrar la Lista de Puntos Clave | |
| const ul = document.createElement('ul'); | |
| if (data.summary && Array.isArray(data.summary)) { | |
| // Filtramos el Análisis Narrativo para que no se duplique en la lista | |
| const filteredSummary = data.summary.filter(point => !point.toLowerCase().includes('analisis extenso narrativo')); | |
| filteredSummary.forEach(point => { | |
| const li = document.createElement('li'); | |
| li.innerHTML = point; | |
| ul.appendChild(li); | |
| }); | |
| } | |
| summaryDiv.innerHTML = ''; | |
| summaryDiv.appendChild(narrativeBox); | |
| summaryDiv.appendChild(ul); | |
| // 3. Mostrar el JSON completo | |
| if (data.structured_data) { | |
| jsonPre.textContent = JSON.stringify(data.structured_data, null, 4); | |
| } | |
| document.getElementById('summary-display').style.display = 'block'; | |
| document.getElementById('json-display').style.display = 'block'; | |
| } else { | |
| document.getElementById('summary-result').innerHTML = `<strong>Error en el análisis:</strong> ${data.error || 'Mensaje de error desconocido.'}`; | |
| document.getElementById('json-result').textContent = 'Error al procesar el documento. Revisa el mensaje de la izquierda para ver el detalle.'; | |
| } | |
| } catch (error) { | |
| console.error("Fetch/Parse Error:", error); | |
| document.getElementById('summary-result').innerHTML = `Ocurrió un error de conexión o parseo de respuesta. Consulta la consola del navegador.`; | |
| } finally { | |
| document.getElementById('loading').style.display = 'none'; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |