Spaces:
Runtime error
Runtime error
File size: 5,843 Bytes
f25bf8c d34414b f25bf8c 8aea391 d34414b 4a27f26 8aea391 d34414b 8aea391 d34414b 8aea391 d34414b 8aea391 f25bf8c d34414b f25bf8c d34414b f25bf8c d34414b 8aea391 d34414b 8aea391 d34414b fb6c8e3 d34414b de0a5eb ddf2bde f6687da ddf2bde f6687da a5a6d34 f6687da a5a6d34 f6687da 64c0523 ddf2bde d34414b f25bf8c |
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 141 142 143 144 145 146 147 148 149 |
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Análisis de Comentarios de YouTube</title>
<style>
/* Estilos existentes */
body {
background-color: #121212; /* Fondo oscuro */
color: #e0e0e0; /* Texto claro */
font-family: Arial, sans-serif;
}
.container {
width: 80%;
margin: auto;
padding: 20px;
}
h1 {
color: #ffffff;
}
.video-details {
margin-top: 20px;
padding: 15px;
border: 1px solid #333;
background-color: #1e1e1e;
}
h2 {
font-size: 20px;
color: gray;
margin-top: 5px;
}
#processing-spinner {
display: none; /* Ocultar el spinner por defecto */
text-align: center;
margin: 20px 0;
}
.spinner {
border: 8px solid #f3f3f3; /* Color claro */
border-top: 8px solid #3498db; /* Color del spinner */
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
margin: auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<script>
function clearResults() {
// Limpiar el contenido de los resultados
document.getElementById("video-details").innerHTML = '';
document.getElementById("wordcloud").innerHTML = '';
document.getElementById("sentiment-daily-graph").innerHTML = '';
document.getElementById("scores-graph").innerHTML = '';
document.getElementById("sankey-graph").innerHTML = '';
// Mostrar el spinner de procesamiento
document.getElementById("processing-spinner").style.display = 'block';
}
</script>
</head>
<body>
<div class="container">
<h1>Análisis de Comentarios de YouTube</h1>
<h2>by Cuauhtémoc Bautista</h2>
<form method="POST" action="/" onsubmit="clearResults()">
<label for="url">Ingresa una URL de un video de YouTube:</label>
<input type="text" id="url" name="url" required>
<button type="submit">Analizar</button>
</form>
<div id="processing-spinner" aria-live="polite">
<div class="spinner"></div>
Procesando, por favor espere...
</div>
<div id="video-details">
{% if video_details %}
<div class="video-details">
<h2>Detalles del Video</h2>
<p><strong>Nombre del video:</strong> {{ video_details.title }}</p>
<p><strong>Canal:</strong> {{ video_details.channel_title }}</p>
<p><strong>Número de vistas:</strong> {{ video_details.view_count }}</p>
<p><strong>Número de comentarios:</strong> {{ video_details.comment_count }}</p>
<p><strong>Comentarios positivos:</strong> {{ sentiment_count.positivo }}</p>
<p><strong>Comentarios negativos:</strong> {{ sentiment_count.negativo }}</p>
<p><strong>Comentarios neutros:</strong> {{ sentiment_count.neutro }}</p>
</div>
{% endif %}
</div>
<div id="wordcloud">
{% if wordcloud_path %}
<h2>Nube de palabras</h2>
<img src="{{ url_for('static', filename='wordcloud.png') }}" alt="Nube de Palabras" width="800" height="400">
{% endif %}
</div>
<div id="sentiment-daily-graph">
{% if sentiment_daily_graph %}
<h2>Evolución comentarios por sentimiento</h2>
<div>{{ sentiment_daily_graph | safe }}</div>
{% endif %}
</div>
<div id="scores-graph">
{% if scores_graph %}
<h2>Gráfico de Scores</h2>
<div>{{ scores_graph | safe }}</div>
{% endif %}
</div>
<div id="sankey-graph">
{% if sankey_graph %}
<h2>Gráfico de Sankey</h2>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
<!-- Imagen de flechas bidireccionales -->
<div style="flex-shrink: 0;">
<img src="{{ url_for('static', filename='bidirectional_arrows.jpeg') }}"
alt="Flechas Bidireccionales"
style="width: 30%; height: 30%;">
</div>
<!-- Texto descriptivo -->
<div style="flex-grow: 1; margin-left: 20px; text-align: justify; color: #e0e0e0;">
<p style="font-size: 16px; line-height: 1.6;">
Este gráfico muestra cómo los datos se agrupan y se combinan.
En el lado izquierdo, están los grupos más pequeños y específicos,
formados con datos que están muy relacionados entre sí.
A medida que avanzamos hacia la derecha, los grupos se hacen más grandes y generales,
combinando varios de los grupos más pequeños en categorías amplias.
</p>
</div>
</div>
<!-- Gráfico de Sankey -->
<div>
{{ sankey_graph | safe }}
</div>
{% endif %}
</div>
</div>
</body>
</html> |