Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <title>🎶 Emotion Chat + Music Recommender</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| background: #121212; | |
| color: white; | |
| text-align: center; | |
| } | |
| #chat-container { | |
| width: 50%; | |
| margin: auto; | |
| padding: 10px; | |
| } | |
| .message { | |
| padding: 10px; | |
| margin: 5px 0; | |
| border-radius: 10px; | |
| } | |
| .user { | |
| background: #007bff; | |
| color: white; | |
| text-align: right; | |
| } | |
| .bot { | |
| background: #28a745; | |
| color: white; | |
| } | |
| input, | |
| button { | |
| margin-top: 10px; | |
| padding: 10px; | |
| border: none; | |
| border-radius: 5px; | |
| } | |
| input { | |
| width: 40%; | |
| } | |
| button { | |
| background: #ff9800; | |
| color: white; | |
| cursor: pointer; | |
| } | |
| audio { | |
| margin-top: 10px; | |
| width: 100%; | |
| } | |
| #chat-box { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .message { | |
| padding: 10px 15px; | |
| border-radius: 10px; | |
| max-width: 70%; | |
| word-wrap: break-word; | |
| } | |
| .user-message { | |
| align-self: flex-end; | |
| background-color: #007bff; | |
| color: white; | |
| border-bottom-right-radius: 0; | |
| } | |
| .other-user-message { | |
| align-self: flex-start; | |
| background-color: #e0e0e0; | |
| color: black; | |
| border-bottom-left-radius: 0; | |
| } | |
| .recommendation-message { | |
| align-self: center; | |
| background-color: #28a745; | |
| color: white; | |
| font-weight: bold; | |
| border-radius: 12px; | |
| padding: 15px; | |
| text-align: center; | |
| box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); | |
| } | |
| /* MODAL STYLES */ | |
| .modal { | |
| display: block; | |
| /* Show on load */ | |
| position: fixed; | |
| z-index: 1; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.6); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .modal-content { | |
| background: white; | |
| padding: 20px; | |
| border-radius: 8px; | |
| text-align: center; | |
| color: black; | |
| width: 300px; | |
| } | |
| .modal-content input { | |
| width: 80%; | |
| padding: 8px; | |
| margin-top: 10px; | |
| } | |
| .modal-content button { | |
| background: #007bff; | |
| color: white; | |
| padding: 8px 15px; | |
| margin-top: 10px; | |
| cursor: pointer; | |
| border-radius: 5px; | |
| border: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>🎵 Smart Music Rekomend</h1> | |
| <!-- Chat Box --> | |
| <div id="chat-container"> | |
| <div id="user-list" style="margin-bottom: 10px; text-align: left;"></div> | |
| <div id="chat-box"></div> | |
| <br> | |
| <input type="text" id="message" placeholder="Type your message..." disabled> | |
| <button onclick="sendMessage()" disabled>Send</button> | |
| <audio hidden="true" id="music-player" controls></audio> | |
| </div> | |
| <!-- MODAL FOR USERNAME INPUT --> | |
| <div id="username-modal" class="modal"> | |
| <div class="modal-content"> | |
| <h2>Enter Your Name</h2> | |
| <input type="text" id="username" placeholder="Your Name"> | |
| <br> | |
| <button onclick="connectChat()">Join Chat</button> | |
| </div> | |
| </div> | |
| <script> | |
| let ws; | |
| let username = ""; | |
| let musicStatus = ""; | |
| let delayedMusic = { | |
| song: "", | |
| genre: "" | |
| }; | |
| function connectChat() { | |
| username = document.getElementById("username").value.trim(); | |
| if (!username) { | |
| alert("Please enter a username!"); | |
| return; | |
| } | |
| ws = new WebSocket(`${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/chat/${username}`); | |
| document.getElementById("music-player").addEventListener("play", () => { | |
| musicStatus = "playing" | |
| }); | |
| document.getElementById("music-player").addEventListener("ended", () => { | |
| musicStatus = "stop" | |
| if (delayedMusic.song != "") playCurrentMusic(delayedMusic) | |
| }); | |
| ws.onmessage = function (event) { | |
| const data = JSON.parse(event.data); | |
| const chatBox = document.getElementById("chat-box"); | |
| if (data.type === "user_list") { | |
| const userListDiv = document.getElementById("user-list"); | |
| userListDiv.innerHTML = `<strong>👥 Online:</strong> ${data.users.join(", ")}`; | |
| return; | |
| } | |
| if (data.username === username) { | |
| // Udah di-render pas kirim, skip | |
| return; | |
| } | |
| if (data.recommendations) { | |
| if (musicStatus != "playing") { | |
| console.log("data") | |
| console.log(data) | |
| playCurrentMusic({ | |
| song: data.recommendations[0], | |
| genre: data.genre | |
| }) | |
| } else { | |
| delayedMusic = { | |
| song: data.recommendations[0], | |
| genre: data.genre | |
| } | |
| } | |
| } else { | |
| let messageDiv = document.createElement("div"); | |
| messageDiv.classList.add("message", "other-user-message"); | |
| messageDiv.innerHTML = `<strong>${data.username}</strong>: ${data.message}`; | |
| chatBox.appendChild(messageDiv); | |
| } | |
| chatBox.scrollTop = chatBox.scrollHeight; | |
| }; | |
| ws.onopen = function () { | |
| document.getElementById("message").disabled = false; | |
| document.getElementById("message").nextElementSibling.disabled = false; | |
| // Hide modal | |
| document.getElementById("username-modal").style.display = "none"; | |
| }; | |
| ws.onerror = function () { | |
| alert("WebSocket connection error! Ensure server is running."); | |
| }; | |
| ws.onclose = function () { | |
| alert("Connection closed!"); | |
| }; | |
| } | |
| function playCurrentMusic(recommendationSong) { | |
| const chatBox = document.getElementById("chat-box"); | |
| delayedMusic = { | |
| song: "", | |
| genre: "" | |
| }; | |
| let recommendationDiv = document.createElement("div"); | |
| recommendationDiv.classList.add("recommendation-message"); | |
| recommendationDiv.innerHTML = `🎵 Recommended Song: "${recommendationSong.genre}" 🎶`; | |
| chatBox.appendChild(recommendationDiv); | |
| console.log("recommendation song") | |
| console.log(recommendationSong) | |
| document.getElementById("music-player").src = recommendationSong.song | |
| document.getElementById("music-player").play() | |
| } | |
| function sendMessage() { | |
| let inputField = document.getElementById("message"); | |
| let messageText = inputField.value.trim(); | |
| let chatBox = document.getElementById("chat-box"); | |
| if (messageText === "" || !ws || ws.readyState !== WebSocket.OPEN) return; | |
| // Send message to WebSocket server | |
| ws.send(JSON.stringify({ username, message: messageText })); | |
| // Show user message in chat | |
| let messageDiv = document.createElement("div"); | |
| messageDiv.classList.add("message", "user-message"); | |
| messageDiv.innerHTML = `<strong>${username}</strong>: ${messageText}`; | |
| chatBox.appendChild(messageDiv); | |
| inputField.value = ""; | |
| chatBox.scrollTop = chatBox.scrollHeight; | |
| } | |
| </script> | |
| </body> | |
| </html> |