|
|
<!DOCTYPE html> |
|
|
<html lang="es"> |
|
|
<head> |
|
|
<meta charset="utf-8" /> |
|
|
<title>Explorador CSV Consumertec</title> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" /> |
|
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script> |
|
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script> |
|
|
|
|
|
<style> |
|
|
:root{ |
|
|
--bg:#020617; |
|
|
--card:#020617; |
|
|
--border:#1f2937; |
|
|
--accent:#22d3ee; |
|
|
--accent2:#4ade80; |
|
|
--text:#e5e7eb; |
|
|
--muted:#9ca3af; |
|
|
} |
|
|
*{box-sizing:border-box;margin:0;padding:0;} |
|
|
body{ |
|
|
min-height:100vh; |
|
|
display:flex; |
|
|
align-items:center; |
|
|
justify-content:center; |
|
|
font-family:system-ui,-apple-system,"Segoe UI",sans-serif; |
|
|
background:radial-gradient(circle at top,#0f172a,#020617); |
|
|
color:var(--text); |
|
|
padding:10px; |
|
|
} |
|
|
.card{ |
|
|
width:min(1100px,100%); |
|
|
max-height:96vh; |
|
|
background:var(--card); |
|
|
border-radius:20px; |
|
|
border:1px solid var(--border); |
|
|
padding:18px 20px; |
|
|
box-shadow:0 22px 50px rgba(0,0,0,0.6); |
|
|
display:flex; |
|
|
flex-direction:column; |
|
|
gap:12px; |
|
|
overflow-y:auto; |
|
|
} |
|
|
h1{ |
|
|
font-size:1.7rem; |
|
|
text-align:center; |
|
|
margin-bottom:4px; |
|
|
} |
|
|
p{ |
|
|
font-size:0.9rem; |
|
|
line-height:1.5; |
|
|
color:var(--muted); |
|
|
text-align:justify; |
|
|
text-justify:inter-word; |
|
|
} |
|
|
.section-title{ |
|
|
font-size:1rem; |
|
|
font-weight:600; |
|
|
margin-bottom:4px; |
|
|
margin-top:8px; |
|
|
} |
|
|
label{ |
|
|
font-size:0.85rem; |
|
|
margin-bottom:4px; |
|
|
display:block; |
|
|
color:var(--muted); |
|
|
} |
|
|
input[type="file"]{ |
|
|
width:100%; |
|
|
padding:8px; |
|
|
border-radius:10px; |
|
|
border:1px dashed var(--border); |
|
|
background:#020617; |
|
|
color:var(--muted); |
|
|
font-size:0.85rem; |
|
|
} |
|
|
input[type="text"], |
|
|
select{ |
|
|
width:100%; |
|
|
padding:8px; |
|
|
border-radius:10px; |
|
|
border:1px solid var(--border); |
|
|
background:#020617; |
|
|
color:var(--text); |
|
|
font-size:0.85rem; |
|
|
} |
|
|
textarea{ |
|
|
width:100%; |
|
|
min-height:90px; |
|
|
max-height:200px; |
|
|
resize:vertical; |
|
|
border-radius:10px; |
|
|
border:1px solid var(--border); |
|
|
background:#020617; |
|
|
color:var(--text); |
|
|
padding:8px 10px; |
|
|
font-size:0.85rem; |
|
|
line-height:1.4; |
|
|
} |
|
|
.row{ |
|
|
display:flex; |
|
|
flex-wrap:wrap; |
|
|
gap:10px; |
|
|
margin-top:6px; |
|
|
align-items:center; |
|
|
} |
|
|
.row > *{ flex:1 1 auto; } |
|
|
.btn{ |
|
|
display:inline-flex; |
|
|
align-items:center; |
|
|
justify-content:center; |
|
|
padding:8px 16px; |
|
|
border-radius:999px; |
|
|
text-decoration:none; |
|
|
border:none; |
|
|
background:linear-gradient(135deg,var(--accent),var(--accent2)); |
|
|
color:#020617; |
|
|
font-weight:600; |
|
|
font-size:0.85rem; |
|
|
letter-spacing:0.02em; |
|
|
cursor:pointer; |
|
|
transition:transform 0.1s ease, filter 0.1s ease; |
|
|
white-space:nowrap; |
|
|
} |
|
|
.btn.secondary{ |
|
|
background:#111827; |
|
|
color:var(--muted); |
|
|
border:1px solid var(--border); |
|
|
} |
|
|
.btn:hover{ |
|
|
filter:brightness(1.06); |
|
|
transform:translateY(-1px); |
|
|
} |
|
|
.status{ |
|
|
font-size:0.83rem; |
|
|
color:var(--muted); |
|
|
margin-top:4px; |
|
|
} |
|
|
.output-box{ |
|
|
margin-top:8px; |
|
|
border-radius:10px; |
|
|
border:1px solid var(--border); |
|
|
background:#020617; |
|
|
padding:8px 10px; |
|
|
font-size:0.83rem; |
|
|
line-height:1.45; |
|
|
max-height:260px; |
|
|
overflow:auto; |
|
|
white-space:pre-wrap; |
|
|
} |
|
|
.small{ font-size:0.8rem; color:var(--muted); } |
|
|
.mode-options{ |
|
|
display:flex; |
|
|
flex-direction:column; |
|
|
gap:8px; |
|
|
margin-top:4px; |
|
|
flex-wrap:wrap; |
|
|
} |
|
|
.mode-group{ |
|
|
display:flex; |
|
|
flex-wrap:wrap; |
|
|
gap:12px; |
|
|
} |
|
|
.mode-group.hidden{ display:none; } |
|
|
.mode-group.disabled{ opacity:0.3; pointer-events:none; } |
|
|
.mode-options label{ |
|
|
display:flex; |
|
|
align-items:center; |
|
|
gap:6px; |
|
|
cursor:pointer; |
|
|
font-size:0.85rem; |
|
|
} |
|
|
.mode-options input[type="radio"]{ |
|
|
accent-color:#22d3ee; |
|
|
width:16px; |
|
|
height:16px; |
|
|
} |
|
|
#textOutput{ |
|
|
max-height:60vh; |
|
|
overflow-y:auto; |
|
|
} |
|
|
.chart-wrapper{ |
|
|
margin-top:8px; |
|
|
border-radius:10px; |
|
|
border:1px solid var(--border); |
|
|
background:#020617; |
|
|
padding:8px 10px; |
|
|
height:260px; |
|
|
} |
|
|
#chartCanvas{ width:100%; height:100%; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="card"> |
|
|
<h1>Explorador CSV Consumertec</h1> |
|
|
<p> |
|
|
Este chatbot está diseñado para trabajar con archivos <strong>OUTPUT_MAP_COMPARISONS.csv</strong> y |
|
|
otros CSV derivados de los experimentos de Consumertec. Primero se <strong>sube en la sección 1</strong> |
|
|
el archivo CSV que se desea analizar. A partir de su estructura, en la <strong>sección 2</strong> se |
|
|
activan los <strong>prompts internos</strong> compatibles. Después se ejecuta el análisis: |
|
|
la <strong>sección 5</strong> calcula un <strong>resumen numérico determinista en el navegador</strong> |
|
|
(sin usar backend). Luego, ese resumen numérico se envía al <strong>backend LLM</strong> como evidencia |
|
|
para generar la explicación de la <strong>sección 6</strong> (sin repetir tablas). |
|
|
</p> |
|
|
|
|
|
|
|
|
<div id="llmStatus" class="status small"> |
|
|
ℹ️ La sección 5 se calcula de forma determinista en el navegador. Luego, ese resumen numérico se envía al backend LLM |
|
|
como evidencia para construir la sección 6 (sin reimprimir tablas ni listados). |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="section-title">1. Subir archivo CSV</div> |
|
|
<label for="csvInput" id="csvLabel"> |
|
|
Sube primero el CSV que quieres analizar. Según sus columnas, se activarán las opciones de análisis en la sección 2. |
|
|
</label> |
|
|
<input id="csvInput" type="file" accept=".csv" /> |
|
|
<div id="fileStatus" class="status">⚠️ Ningún archivo seleccionado.</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="section-title">2. Elegir tipo de análisis y prompt interno</div> |
|
|
<p class="small"> |
|
|
Después de subir el CSV, se mostrarán aquí los tipos de análisis compatibles. Cada tipo activa sus |
|
|
prompts internos. El prompt seleccionado se mostrará en la <strong>sección 3</strong> (puedes editarlo) |
|
|
y se usará junto con la evidencia numérica determinista de la sección 5 como entrada al backend LLM. |
|
|
</p> |
|
|
|
|
|
<div class="mode-options"> |
|
|
|
|
|
<div id="group_comparaciones" class="mode-group hidden"> |
|
|
<label> |
|
|
<input id="mode_comparaciones_basico" type="radio" name="mode" |
|
|
onclick="setMode('comparaciones','comparaciones_basico')" /> |
|
|
Prompt 1 — Comparación (PRODUCT_TEST vs RESPONSE) |
|
|
</label> |
|
|
<label> |
|
|
<input id="mode_comparaciones_escenarios" type="radio" name="mode" |
|
|
onclick="setMode('comparaciones','comparaciones_escenarios')" /> |
|
|
Prompt 5 — Comparación por escenarios y modalidades |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="group_whiteness" class="mode-group hidden"> |
|
|
<label> |
|
|
<input id="mode_whiteness_basico" type="radio" name="mode" |
|
|
onclick="setMode('whiteness','whiteness_basico')" /> |
|
|
Prompt 2 — Blancura por MONITOR (métricas WI) |
|
|
</label> |
|
|
<label> |
|
|
<input id="mode_whiteness_productos" type="radio" name="mode" |
|
|
onclick="setMode('whiteness','whiteness_productos')" /> |
|
|
Prompt 6 — Perfil de blancura por producto |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="group_resumen" class="mode-group hidden"> |
|
|
<label> |
|
|
<input id="mode_resumen_basico" type="radio" name="mode" |
|
|
onclick="setMode('resumen','resumen_basico')" /> |
|
|
Prompt 3 — Resumen general de la tabla |
|
|
</label> |
|
|
<label> |
|
|
<input id="mode_resumen_avanzado" type="radio" name="mode" |
|
|
onclick="setMode('resumen','resumen_avanzado')" /> |
|
|
Prompt 7 — Resumen avanzado y bloques de variables |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="group_response_rel" class="mode-group hidden"> |
|
|
<label> |
|
|
<input id="mode_response_basico" type="radio" name="mode" |
|
|
onclick="setMode('response_rel','response_basico')" /> |
|
|
Prompt 4 — Comparar RESPONSE con las demás columnas |
|
|
</label> |
|
|
<label> |
|
|
<input id="mode_response_extremos" type="radio" name="mode" |
|
|
onclick="setMode('response_rel','response_extremos')" /> |
|
|
Prompt 8 — RESPONSE: mejores y peores resultados |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="status small" id="modeStatus"> |
|
|
Primero sube un CSV en la sección 1. Luego se activarán aquí los tipos de análisis compatibles. |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="section-title">3. Prompt de análisis</div> |
|
|
<label for="question"> |
|
|
El prompt se rellenará automáticamente según el análisis elegido, pero puedes editarlo libremente. |
|
|
Este texto se enviará al <strong>backend LLM</strong> junto con el resumen numérico determinista (sección 5), |
|
|
como evidencia para generar la explicación de la sección 6. |
|
|
</label> |
|
|
<textarea id="question" placeholder="Sube un CSV y elige un tipo de análisis; aquí aparecerá el prompt asociado, que podrás ajustar…"></textarea> |
|
|
<div class="row"> |
|
|
<button class="btn" type="button" onclick="analizarCSV()"> |
|
|
4. Analizar CSV |
|
|
</button> |
|
|
</div> |
|
|
<div id="analysisStatus" class="status"> |
|
|
⏳ Sube un CSV, elige un tipo de análisis en la sección 2 y luego usa el botón Analizar. |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="section-title">5. Resultados numéricos (resumen determinista en el navegador)</div> |
|
|
<div id="numericOutput" class="output-box small"> |
|
|
// Sección 5 — Resumen numérico determinista (generado en el navegador). |
|
|
// Ejecuta “4. Analizar CSV” para generarlo aquí. |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="section-title">6. Explicación (LLM usando el resumen numérico como evidencia)</div> |
|
|
<div id="textOutput" class="output-box"> |
|
|
// Aquí se generará la explicación producida por el LLM usando tu prompt (sección 3) + evidencia numérica (sección 5). |
|
|
</div> |
|
|
|
|
|
<div class="row"> |
|
|
<div> |
|
|
<label for="reportTitle" class="small"> |
|
|
Título del reporte (se usará como título en el PDF y en el nombre del archivo) |
|
|
</label> |
|
|
<input id="reportTitle" |
|
|
type="text" |
|
|
placeholder="Ejemplo: Informe de desempeño de productos Consumertec" /> |
|
|
</div> |
|
|
<div style="flex:0 0 auto;"> |
|
|
<button class="btn secondary" type="button" onclick="descargarPDF()"> |
|
|
Descargar secciones 6 y 7 (.pdf) |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="section-title">7. Visualización gráfica de resultados (desde la sección 5)</div> |
|
|
<p class="small"> |
|
|
Estos gráficos se generan a partir del resumen determinista de la sección 5. |
|
|
El LLM no usa los gráficos; son una ayuda visual para interpretar los resultados. |
|
|
</p> |
|
|
<div class="row"> |
|
|
<div> |
|
|
<label for="chartType">Tipo de gráfico</label> |
|
|
<select id="chartType" onchange="cambiarTipoGrafico()"> |
|
|
<option value="bar">Barras</option> |
|
|
<option value="line">Líneas</option> |
|
|
</select> |
|
|
</div> |
|
|
<div id="chartStatus" class="status"> |
|
|
⚠️ Aún no hay datos para graficar. Ejecuta un análisis primero. |
|
|
</div> |
|
|
</div> |
|
|
<div class="chart-wrapper"> |
|
|
<canvas id="chartCanvas"></canvas> |
|
|
</div> |
|
|
|
|
|
<div id="chartMultiStatus" class="status"> |
|
|
⚠️ Aún no hay datos para el gráfico multivariable. Ejecuta un análisis compatible (por ejemplo, Comparaciones). |
|
|
</div> |
|
|
<div class="chart-wrapper"> |
|
|
<canvas id="chartCanvasMulti"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<script src="static/state.js"></script> |
|
|
<script src="static/core.js"></script> |
|
|
|
|
|
<script src="static/modes/comparaciones.js"></script> |
|
|
<script src="static/modes/whiteness.js"></script> |
|
|
<script src="static/modes/resumen.js"></script> |
|
|
<script src="static/modes/response_rel.js"></script> |
|
|
|
|
|
<script src="static/pdf.js"></script> |
|
|
</body> |
|
|
</html> |
