Skip to content

Commit a6fdb32

Browse files
rominargrominarg
committed
first commit
0 parents  commit a6fdb32

4 files changed

Lines changed: 488 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>SentimentAPI — Análisis de Sentimientos de Feedbacks</title>
7+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
<body>
12+
13+
<nav class="navbar navbar-expand-lg navbar-dark navbar-custom mb-5">
14+
<div class="container">
15+
<a class="navbar-brand fw-bold" href="#">
16+
<i class="bi bi-bar-chart-fill me-2"></i> SentimentAPI Analytics
17+
</a>
18+
19+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
20+
<span class="navbar-toggler-icon"></span>
21+
</button>
22+
23+
<div class="collapse navbar-collapse" id="navbarContent">
24+
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
25+
26+
<li class="nav-item dropdown">
27+
<a class="nav-link dropdown-toggle active" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
28+
<i class="bi bi-globe me-1"></i> Idioma
29+
</a>
30+
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="languageDropdown">
31+
<li>
32+
<a class="dropdown-item d-flex align-items-center" href="?lang=es">
33+
<span class="me-2">🇪🇸</span> Español
34+
</a>
35+
</li>
36+
<li>
37+
<a class="dropdown-item d-flex align-items-center" href="?lang=pt">
38+
<span class="me-2">🇧🇷</span> Português
39+
</a>
40+
</li>
41+
</ul>
42+
</li>
43+
44+
</ul>
45+
</div>
46+
</div> </nav>
47+
48+
<div class="container pb-5">
49+
<div class="row justify-content-center">
50+
<div class="col-lg-10">
51+
52+
<div class="card card-custom bg-white">
53+
54+
<div class="card-header bg-white border-bottom-0 pt-4 px-4 text-center">
55+
<h3 class="fw-bold">Carga de Datos Masiva</h3>
56+
<p class="text-muted">Sube tu archivo .csv para analizar múltiples opiniones simultáneamente.</p>
57+
</div>
58+
59+
<div class="card-body px-4 pb-5">
60+
<div class="upload-zone mb-4 text-center p-4 p-md-5 rounded">
61+
<i class="bi bi-cloud-arrow-up-fill fs-1 text-secondary mb-3"></i>
62+
<h5 class="fw-bold">Arrastra tu archivo aquí</h5>
63+
<p class="small text-muted mb-4">Soporta archivos .CSV con una frase por línea</p>
64+
65+
<div class="row justify-content-center">
66+
<div class="col-12 col-md-8 col-lg-6">
67+
<input class="form-control" type="file" id="csvFile" accept=".csv">
68+
</div>
69+
</div>
70+
71+
<button class="btn btn-dark mt-4 px-5 py-2 fw-bold rounded-pill shadow-sm" onclick="procesarCSV()" id="btnProcesar">
72+
<i class="bi bi-gear-wide-connected me-2"></i> Analizar CSV
73+
</button>
74+
</div>
75+
76+
<div class="progress-container mb-4" id="progressBarContainer" style="display:none;">
77+
<div class="d-flex justify-content-between small fw-bold mb-1">
78+
<span>Procesando...</span>
79+
<span id="progressText">0%</span>
80+
</div>
81+
<div class="progress" style="height: 8px;">
82+
<div class="progress-bar bg-dark" id="progressBar" role="progressbar" style="width: 0%"></div>
83+
</div>
84+
</div>
85+
86+
<div id="resultsArea" style="display:none;">
87+
<h6 class="text-uppercase fw-bold text-muted small mb-3"><i class="bi bi-table"></i> Resultados del Análisis</h6>
88+
89+
<div class="table-responsive mb-4">
90+
<table class="table table-hover align-middle custom-table">
91+
<thead class="table-light">
92+
<tr>
93+
<th style="width: 60%;">Comentario</th>
94+
<th style="width: 20%;" class="text-center">Predicción</th>
95+
<th style="width: 20%;" class="text-center">Confianza</th>
96+
</tr>
97+
</thead>
98+
<tbody id="tableBody">
99+
</tbody>
100+
</table>
101+
</div>
102+
103+
<div class="row g-3" id="summaryStats">
104+
<div class="col-md-4">
105+
<div class="stat-card p-3 rounded bg-success-subtle text-center h-100">
106+
<h2 class="text-success fw-bold mb-0" id="totalPos">0</h2>
107+
<small class="text-success fw-bold text-uppercase">Positivos</small>
108+
</div>
109+
</div>
110+
<div class="col-md-4">
111+
<div class="stat-card p-3 rounded bg-danger-subtle text-center h-100">
112+
<h2 class="text-danger fw-bold mb-0" id="totalNeg">0</h2>
113+
<small class="text-danger fw-bold text-uppercase">Negativos</small>
114+
</div>
115+
</div>
116+
<div class="col-md-4">
117+
<div class="stat-card p-3 rounded bg-secondary-subtle text-center h-100">
118+
<h2 class="text-dark fw-bold mb-0" id="totalTotal">0</h2>
119+
<small class="text-dark fw-bold text-uppercase">Total</small>
120+
</div>
121+
</div>
122+
</div>
123+
</div> </div>
124+
</div>
125+
126+
</div>
127+
</div>
128+
</div>
129+
130+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
131+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
132+
<script src="script.js"></script>
133+
134+
</body>
135+
</html>

‎resultado.html‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>SentimentAPI — Análisis de Sentimientos de Feedbacks</title>
7+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
<body>
12+
13+
<nav class="navbar navbar-expand-lg navbar-dark navbar-custom mb-5">
14+
<div class="container">
15+
<a class="navbar-brand fw-bold" href="index.html">
16+
<i class="bi bi-bar-chart-fill me-2"></i> SentimentAPI Analytics
17+
</a>
18+
19+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
20+
<span class="navbar-toggler-icon"></span>
21+
</button>
22+
23+
<div class="collapse navbar-collapse" id="navbarContent">
24+
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
25+
26+
<li class="nav-item dropdown">
27+
<a class="nav-link dropdown-toggle active" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
28+
<i class="bi bi-globe me-1"></i> Idioma
29+
</a>
30+
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="languageDropdown">
31+
<li>
32+
<a class="dropdown-item d-flex align-items-center" href="?lang=es">
33+
<span class="me-2">🇪🇸</span> Español
34+
</a>
35+
</li>
36+
<li>
37+
<a class="dropdown-item d-flex align-items-center" href="?lang=pt">
38+
<span class="me-2">🇧🇷</span> Português
39+
</a>
40+
</li>
41+
</ul>
42+
</li>
43+
44+
</ul>
45+
</div>
46+
</div> </nav>
47+
48+
<div class="container pb-5">
49+
<div class="row justify-content-center">
50+
<div class="col-lg-10">
51+
52+
<div class="card card-custom bg-white h-100">
53+
<div class="card-header bg-white border-bottom-0 pt-4 px-4 text-center">
54+
<h3 class="fw-bold"><i class="bi bi-clipboard-data"></i> Resultados del Análisis</h3>
55+
<p class="text-muted">Resumen de métricas y clasificación de feedback</p>
56+
</div>
57+
58+
<div class="card-body px-4">
59+
60+
<div class="row mb-5">
61+
<div class="col-md-6 mb-4 mb-md-0">
62+
<h6 class="text-center text-uppercase fw-bold text-muted small mb-3">Distribución de Sentimientos</h6>
63+
<div class="chart-container">
64+
<canvas id="pieChart"></canvas>
65+
</div>
66+
</div>
67+
<div class="col-md-6">
68+
<h6 class="text-center text-uppercase fw-bold text-muted small mb-3">Precisión del Modelo (Training)</h6>
69+
<div class="chart-container">
70+
<canvas id="lineChart"></canvas>
71+
</div>
72+
</div>
73+
</div>
74+
75+
<hr class="my-4">
76+
77+
<div class="d-flex justify-content-center mb-4">
78+
<ul class="nav nav-pills gap-2" id="pills-tab" role="tablist">
79+
<li class="nav-item">
80+
<button class="nav-link active" onclick="filtrarHistorial('todos')" id="tab-todos">
81+
Todos <span class="badge bg-secondary ms-1" id="count-todos">0</span>
82+
</button>
83+
</li>
84+
<li class="nav-item">
85+
<button class="nav-link" onclick="filtrarHistorial('positivo')" id="tab-positivos">
86+
<i class="bi bi-emoji-smile"></i> Positivos <span class="badge bg-success ms-1" id="count-positivo">0</span>
87+
</button>
88+
</li>
89+
<li class="nav-item">
90+
<button class="nav-link" onclick="filtrarHistorial('negativo')" id="tab-negativos">
91+
<i class="bi bi-emoji-frown"></i> Negativos <span class="badge bg-danger ms-1" id="count-negativo">0</span>
92+
</button>
93+
</li>
94+
<li class="nav-item">
95+
<button class="nav-link" onclick="filtrarHistorial('neutro')" id="tab-neutros">
96+
<i class="bi bi-emoji-neutral"></i> Neutros <span class="badge bg-secondary ms-1" id="count-neutro">0</span>
97+
</button>
98+
</li>
99+
</ul>
100+
</div>
101+
102+
<div id="listaHistorial" class="overflow-auto px-lg-5" style="max-height: 400px;">
103+
</div>
104+
105+
<div class="d-flex justify-content-center gap-3 mt-5 mb-3">
106+
<button class="btn btn-outline-dark px-4 py-2 fw-bold rounded-pill" onclick="window.location.href='index.html'">
107+
<i class="bi bi-arrow-left me-2"></i> Volver
108+
</button>
109+
<button class="btn btn-dark px-4 py-2 fw-bold rounded-pill">
110+
<i class="bi bi-file-earmark-pdf me-2"></i> Descargar Reporte
111+
</button>
112+
</div>
113+
114+
</div>
115+
</div>
116+
</div>
117+
</div>
118+
</div>
119+
120+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
121+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
122+
<script src="script.js"></script>
123+
124+
</body>
125+
</html>

‎script.js‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
// === DATOS SIMULADOS (Mock Data) ===
2+
let historialData = [
3+
{ id: 1, texto: "El servicio fue excelente, me encantó la rapidez.", prevision: 'positivo', probabilidad: 0.98 },
4+
{ id: 2, texto: "No estoy seguro si volvería, fue regular.", prevision: 'neutro', probabilidad: 0.55 },
5+
{ id: 3, texto: "Pésima atención, tardaron horas.", prevision: 'negativo', probabilidad: 0.89 },
6+
{ id: 4, texto: "Muy buena calidad del producto.", prevision: 'positivo', probabilidad: 0.92 }
7+
];
8+
9+
// Inicializar al cargar la página
10+
document.addEventListener("DOMContentLoaded", function() {
11+
renderCharts();
12+
filtrarHistorial('todos');
13+
actualizarContadores();
14+
});
15+
16+
// === GENERACIÓN DE GRÁFICOS (Chart.js) ===
17+
function renderCharts() {
18+
// 1. Gráfico de Torta (Distribución)
19+
const ctxPie = document.getElementById('pieChart').getContext('2d');
20+
new Chart(ctxPie, {
21+
type: 'doughnut',
22+
data: {
23+
labels: ['Positivos', 'Negativos', 'Neutros'],
24+
datasets: [{
25+
data: [50, 25, 25],
26+
backgroundColor: ['#198754', '#dc3545', '#6c757d'],
27+
hoverOffset: 4
28+
}]
29+
},
30+
options: { maintainAspectRatio: false, responsive: true }
31+
});
32+
33+
// 2. Gráfico de Línea (Simulando Accuracy)
34+
const ctxLine = document.getElementById('lineChart').getContext('2d');
35+
new Chart(ctxLine, {
36+
type: 'line',
37+
data: {
38+
labels: ['Epoch 1', 'Epoch 2', 'Epoch 3', 'Epoch 4', 'Epoch 5'],
39+
datasets: [{
40+
label: 'Precisión (Accuracy)',
41+
data: [0.65, 0.72, 0.81, 0.88, 0.94],
42+
borderColor: '#000',
43+
backgroundColor: 'rgba(0,0,0,0.1)',
44+
tension: 0.3,
45+
fill: true
46+
}]
47+
},
48+
options: {
49+
maintainAspectRatio: false,
50+
responsive: true,
51+
scales: {
52+
y: { beginAtZero: false, min: 0.5, max: 1.0 }
53+
}
54+
}
55+
});
56+
}
57+
58+
// === LÓGICA DE LISTADO Y FILTROS ===
59+
function actualizarContadores() {
60+
document.getElementById('count-todos').innerText = historialData.length;
61+
document.getElementById('count-positivo').innerText = historialData.filter(x => x.prevision === 'positivo').length;
62+
document.getElementById('count-negativo').innerText = historialData.filter(x => x.prevision === 'negativo').length;
63+
document.getElementById('count-neutro').innerText = historialData.filter(x => x.prevision === 'neutro').length;
64+
}
65+
66+
function filtrarHistorial(filtro) {
67+
// Gestión visual de botones activos
68+
document.querySelectorAll('.nav-link').forEach(btn => btn.classList.remove('active'));
69+
if(filtro === 'todos') document.getElementById('tab-todos').classList.add('active');
70+
if(filtro === 'positivo') document.getElementById('tab-positivos').classList.add('active');
71+
if(filtro === 'negativo') document.getElementById('tab-negativos').classList.add('active');
72+
if(filtro === 'neutro') document.getElementById('tab-neutros').classList.add('active');
73+
74+
const lista = document.getElementById('listaHistorial');
75+
lista.innerHTML = '';
76+
77+
const datosFiltrados = historialData.filter(item => filtro === 'todos' || item.prevision === filtro);
78+
79+
if (datosFiltrados.length === 0) {
80+
lista.innerHTML = '<div class="text-center text-muted py-4">No hay datos.</div>';
81+
return;
82+
}
83+
84+
datosFiltrados.forEach(item => {
85+
let icono = "bi-circle-fill";
86+
let colorText = "text-muted";
87+
88+
if(item.prevision === 'positivo') { icono = "bi-hand-thumbs-up-fill"; colorText = "text-success"; }
89+
else if(item.prevision === 'negativo') { icono = "bi-exclamation-triangle-fill"; colorText = "text-danger"; }
90+
91+
const div = document.createElement('div');
92+
div.className = `card p-3 mb-2 history-item ${item.prevision}`;
93+
div.innerHTML = `
94+
<div class="d-flex justify-content-between align-items-center">
95+
<div>
96+
<h6 class="fw-bold mb-1 ${colorText}">
97+
<i class="bi ${icono} me-1"></i> ${item.prevision.toUpperCase()}
98+
</h6>
99+
<p class="mb-0 text-muted small">"${item.texto}"</p>
100+
</div>
101+
<span class="badge bg-white text-dark border shadow-sm">${Math.round(item.probabilidad * 100)}%</span>
102+
</div>
103+
`;
104+
lista.appendChild(div);
105+
});
106+
}

0 commit comments

Comments
 (0)