Spaces:
No application file
No application file
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Real-time Emotion Detection</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary-color: #6C63FF; | |
| --secondary-color: #4CAF50; | |
| --background-color: #f8f9fa; | |
| --text-color: #333; | |
| --card-background: #ffffff; | |
| --shadow-color: rgba(0, 0, 0, 0.1); | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| color: var(--text-color); | |
| margin: 0; | |
| padding: 0; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| background-color: #f3f4f6; | |
| background-image: | |
| radial-gradient(at 47% 33%, hsl(262.00, 83%, 91%) 0, transparent 59%), | |
| radial-gradient(at 82% 65%, hsl(218.00, 39%, 91%) 0, transparent 55%); | |
| } | |
| .container { | |
| max-width: 700px; | |
| width: 100%; | |
| padding: 2rem; | |
| box-sizing: border-box; | |
| } | |
| h1 { | |
| font-size: 2.5rem; | |
| font-weight: 600; | |
| color: var(--primary-color); | |
| margin-bottom: 2rem; | |
| text-align: center; | |
| } | |
| .video-container { | |
| background-color: var(--card-background); | |
| border-radius: 12px; | |
| overflow: hidden; | |
| box-shadow: 0 10px 20px var(--shadow-color); | |
| transition: transform 0.3s ease; | |
| } | |
| .video-container:hover { | |
| transform: translateY(-5px); | |
| } | |
| img { | |
| display: block; | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| #music-recommendations { | |
| margin-top: 2rem; | |
| background-color: var(--card-background); | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| box-shadow: 0 10px 20px var(--shadow-color); | |
| } | |
| #music-recommendations h2 { | |
| color: var(--primary-color); | |
| font-size: 1.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| #recommendations-list { | |
| list-style: none; | |
| padding: 0; | |
| } | |
| #recommendations-list li { | |
| background-color: rgba(255, 255, 255, 0.7); | |
| margin: 0.5rem 0; | |
| padding: 0.75rem 1rem; | |
| border-radius: 6px; | |
| font-size: 0.9rem; | |
| transition: background-color 0.3s ease; | |
| } | |
| #recommendations-list li:hover { | |
| background-color: rgba(255, 255, 255, 0.9); | |
| } | |
| #music-player { | |
| margin-top: 2rem; | |
| width: 100%; | |
| } | |
| button { | |
| background-color: var(--primary-color); | |
| color: white; | |
| border: none; | |
| padding: 0.75rem 1.5rem; | |
| font-size: 1rem; | |
| border-radius: 30px; | |
| cursor: pointer; | |
| transition: background-color 0.3s ease, transform 0.2s ease; | |
| margin-top: 2rem; | |
| font-weight: 600; | |
| box-shadow: 0 4px 6px var(--shadow-color); | |
| align-self: center; | |
| /* Center the button */ | |
| } | |
| button:hover { | |
| background-color: #5753e0; | |
| transform: translateY(-2px); | |
| } | |
| @media (max-width: 768px) { | |
| .container { | |
| padding: 1rem; | |
| } | |
| h1 { | |
| font-size: 2rem; | |
| } | |
| button { | |
| width: 100%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Real-time Emotion Detection</h1> | |
| <div class="video-container"> | |
| <img src="{{ url_for('video_feed') }}" alt="Real-time emotion detection feed"> | |
| </div> | |
| <div id="music-recommendations"> | |
| <h2>Music Recommendations</h2> | |
| <ul id="recommendations-list"></ul> | |
| </div> | |
| <div id="music-player"></div> | |
| <button onclick="fetchAndPlayMusic()">Get Recommendations & Play</button> | |
| </div> | |
| <script> | |
| async function fetchRecommendations() { | |
| try { | |
| const response = await fetch('/get_music_recommendation'); | |
| const data = await response.json(); | |
| const recommendationsList = document.getElementById('recommendations-list'); | |
| recommendationsList.innerHTML = ''; | |
| data.recommendations.forEach(song => { | |
| const li = document.createElement('li'); | |
| li.textContent = song; | |
| recommendationsList.appendChild(li); | |
| }); | |
| } catch (error) { | |
| console.error('Error fetching recommendations:', error); | |
| } | |
| } | |
| async function playMusic() { | |
| try { | |
| const response = await fetch('/play_music'); | |
| const data = await response.json(); | |
| console.log('Video URL:', data.video_url); | |
| if (data.video_url) { | |
| window.open(data.video_url, '_blank'); | |
| } | |
| } catch (error) { | |
| console.error('Error playing music:', error); | |
| } | |
| } | |
| async function fetchAndPlayMusic() { | |
| await fetchRecommendations(); | |
| await playMusic(); | |
| } | |
| </script> | |
| </body> | |
| </html> |