Spaces:
Sleeping
Sleeping
File size: 7,183 Bytes
dd31583 cf50f79 dd31583 cf50f79 d02c912 cf50f79 d02c912 cf50f79 d02c912 7e2f6f4 cf50f79 d02c912 dd31583 cf50f79 d02c912 cf50f79 416ef9a cf50f79 7e2f6f4 416ef9a cf50f79 dd31583 cf50f79 dd31583 cf50f79 d02c912 416ef9a cf50f79 dd31583 cf50f79 dd31583 cf50f79 dd31583 cf50f79 7e2f6f4 dd31583 d02c912 7e2f6f4 d02c912 7e2f6f4 d02c912 7e2f6f4 cf50f79 7e2f6f4 d02c912 cf50f79 dd31583 d02c912 dd31583 d02c912 dd31583 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 |
<!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%; 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> |