- add voice mode

backend/app.py

@@ -103,7 +103,7 @@ async def broadcast_user_list():
 async def periodic_recommendation():
     while True:
         user_list = list(clients.keys())
-        if len(user_list) >= 2:
+        if len(user_list) >= 1:
             sleep_task = asyncio.create_task(asyncio.sleep(60))  # Start sleep
 
             try:

frontend/index.html

@@ -135,6 +135,91 @@
             border-radius: 5px;
             border: none;
         }
+
+        #voice-btn {
+            background: #d8e7f8;
+            color: black;
+            padding: 8px 15px;
+            margin-top: 10px;
+            cursor: pointer;
+            border-radius: 5px;
+            border: none;
+        }
+
+        #mic-bubble {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background-color: #555;
+            margin-left: 10px;
+            cursor: pointer;
+            transition: background-color 0.3s ease, transform 0.3s ease;
+        }
+
+        /* Saat recording aktif */
+        #mic-bubble.recording {
+            background-color: red;
+            animation: pulse-recording 1s infinite;
+        }
+
+        /* Saat suara terdeteksi (speechstart) */
+        #mic-bubble.voice-active {
+            background-color: #00e676;
+            box-shadow: 0 0 12px 4px rgba(0, 230, 118, 0.6);
+            animation: pulse-voice 0.5s ease-out;
+        }
+
+        #cafe-mode-btn {
+            background: linear-gradient(to right, #b47b48, #d5a679);
+            border: none;
+            color: white;
+            padding: 10px 20px;
+            margin-bottom: 20px;
+            border-radius: 25px;
+            font-size: 16px;
+            font-family: 'Courier New', Courier, monospace;
+            cursor: pointer;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+            transition: all 0.3s ease;
+        }
+
+        #cafe-mode-btn:hover {
+            transform: scale(1.05);
+            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
+        }
+
+        #voice-btn.recording {
+            animation: pulse 1s infinite;
+            background-color: red !important;
+        }
+
+        @keyframes pulse-recording {
+            0% {
+                box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4);
+            }
+
+            70% {
+                box-shadow: 0 0 0 15px rgba(255, 0, 0, 0);
+            }
+
+            100% {
+                box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
+            }
+        }
+
+        @keyframes pulse-voice {
+            0% {
+                transform: scale(1);
+            }
+
+            50% {
+                transform: scale(1.2);
+            }
+
+            100% {
+                transform: scale(1);
+            }
+        }
     </style>
 </head>
 
@@ -146,22 +231,37 @@
         <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>
+        <input type="text" id="message" placeholder="Ketik pesanmu..." disabled>
+        <div id="mic-bubble" title="~"></div>
+        <button id="message-send" onclick="sendMessage(null)" disabled>Kirim</button>
+        <button id="voice-btn" onclick="toggleVoice()" disabled>🎙</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>
+            <h2>Masukkan Namamu...</h2>
             <input type="text" id="username" placeholder="Your Name">
             <br>
-            <button onclick="connectChat()">Join Chat</button>
+            <button onclick="connectChat(false)">Join Chat</button>
+            <p>Atau</p>
+            <button id="cafe-mode-btn" onclick="connectChat(true)">Cafe Mode</button>
         </div>
     </div>
 
     <script>
+        const chatBox = document.getElementById("chat-box");
+        const chatTyping = document.getElementById("message");
+        const chatSending = document.getElementById("message-send");
+        const chatVoice = document.getElementById("voice-btn")
+        const userListDiv = document.getElementById("user-list");
+        const dialogUserName = document.getElementById("username");
+        const dialog = document.getElementById("username-modal");
+        const micBubble = document.getElementById("mic-bubble");
+        const musicPlayer = document.getElementById("music-player");
+
+
         let ws;
         let username = "";
         let musicStatus = "";
@@ -169,34 +269,55 @@
             song: "",
             genre: ""
         };
+        let isCafe = false;
 
-        function connectChat() {
-            username = document.getElementById("username").value.trim();
-            if (!username) {
+        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+
+        if (!SpeechRecognition) {
+            alert("Browser tidak mendukung Speech Recognition. Gunakan Google Chrome.");
+        }
+
+        const recognition = new SpeechRecognition();
+
+        function connectChat(pIsCafe) {
+            isCafe = pIsCafe;
+            username = dialogUserName.value.trim();
+            if (!username && isCafe == false) {
                 alert("Please enter a username!");
                 return;
             }
             console.log("location host")
             console.log(location.host)
             // ws = new WebSocket(`${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/chat/${username}`);
-            // ws = new WebSocket(`ws://localhost:8000/chat/${username}`);
+            if (isCafe == true) {
+                userListDiv.innerHTML = "<strong>👥 Mulailah ngobrol dan kami sesuaikan alunan irama yang sesuai untuk anda 🎵</strong>"
+                chatTyping.style.display = "none"
+                chatSending.style.display = "none"
+                chatVoice.style.display = "none"
+                startRecognition()
+                username = "cafe"
+            } else {
+                micBubble.style.display = "none"
+                chatSending.disabled = false
+                chatVoice.disabled = false
+            }
+            ws = new WebSocket(`ws://localhost:8000/chat/${username}`);
 
-            ws = new WebSocket(`${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/chat/${username}`);
+            // ws = new WebSocket(`${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/chat/${username}`);
 
-            document.getElementById("music-player").addEventListener("play", () => {
+            musicPlayer.addEventListener("play", () => {
                 musicStatus = "playing"
             });
-            document.getElementById("music-player").addEventListener("ended", () => {
+            musicPlayer.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;
                 }
@@ -227,15 +348,16 @@
                     chatBox.appendChild(messageDiv);
                 }
 
+
                 chatBox.scrollTop = chatBox.scrollHeight;
             };
 
             ws.onopen = function () {
-                document.getElementById("message").disabled = false;
-                document.getElementById("message").nextElementSibling.disabled = false;
+                chatTyping.disabled = false;
+                chatTyping.nextElementSibling.disabled = false;
 
                 // Hide modal
-                document.getElementById("username-modal").style.display = "none";
+                dialog.style.display = "none";
             };
 
             ws.onerror = function () {
@@ -248,7 +370,6 @@
         }
 
         function playCurrentMusic(recommendationSong) {
-            const chatBox = document.getElementById("chat-box");
             delayedMusic = {
                 song: "",
                 genre: ""
@@ -259,14 +380,15 @@
             chatBox.appendChild(recommendationDiv);
             console.log("recommendation song")
             console.log(recommendationSong)
-            document.getElementById("music-player").src = recommendationSong.song
-            document.getElementById("music-player").play()
+            musicPlayer.src = recommendationSong.song
+            musicPlayer.play()
         }
 
-        function sendMessage() {
-            let inputField = document.getElementById("message");
-            let messageText = inputField.value.trim();
-            let chatBox = document.getElementById("chat-box");
+        function sendMessage(voiceChat) {
+            let inputField = chatTyping;
+            console.log("sending")
+            console.log(voiceChat)
+            let messageText = voiceChat == undefined || voiceChat == null ? inputField.value.trim() : voiceChat;
 
             if (messageText === "" || !ws || ws.readyState !== WebSocket.OPEN) return;
 
@@ -282,6 +404,51 @@
             inputField.value = "";
             chatBox.scrollTop = chatBox.scrollHeight;
         }
+
+        function startRecognition() {
+            recognition.lang = 'id-ID';
+            recognition.interimResults = false;
+            recognition.maxAlternatives = 1;
+
+            recognition.start();
+
+            recognition.onstart = function () {
+                micBubble.classList.add("recording");
+            };
+
+            recognition.onspeechstart = function () {
+                micBubble.classList.add("voice-active");
+            };
+
+
+            recognition.onspeechend = function () {
+                micBubble.classList.remove("voice-active");
+            };
+
+            recognition.onend = function () {
+                micBubble.classList.remove("recording", "voice-active");
+                console.log("cafe")
+                console.log(isCafe)
+                if (isCafe == true) {
+                    console.log("start ga sih")
+                    startRecognition();
+                } else {
+                    recognition.stop();
+                }
+            };
+
+            recognition.onresult = function (event) {
+                const transcript = event.results[0][0].transcript;
+                console.log("transcript")
+                console.log(transcript)
+                sendMessage(transcript)
+            };
+
+            recognition.onerror = function (event) {
+                micBubble.classList.remove("recording", "voice-active");
+                alert('Terjadi kesalahan: ' + event.error);
+            };
+        }
     </script>
 </body>