Spaces:
Runtime error
Runtime error
| <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.png') }}" | |
| alt="Flechas Bidireccionales" | |
| style="width: 60%; height: 10%;"> | |
| </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> |