VoiceMenu20

Sleeping

App Files Files Community

DSatishchandra commited on Feb 19, 2025

Commit

95ee9b6

verified ·

1 Parent(s): 62b7c73

Update templates/menu_page.html

Browse files

Files changed (1) hide show

templates/menu_page.html +79 -146

templates/menu_page.html CHANGED Viewed

@@ -7,185 +7,118 @@
     <style>
         body {
             font-family: Arial, sans-serif;
-            background-color: #fafafa;
             margin: 0;
             padding: 0;
             display: flex;
             justify-content: center;
             align-items: center;
-            height: 100vh;
         }
         .container {
-            background-color: white;
-            padding: 30px;
-            border-radius: 10px;
-            box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
             text-align: center;
-            width: 80%;
-            max-width: 600px;
         }
-        #mic-btn {
-            font-size: 3rem;
             background-color: #007bff;
             color: white;
             border: none;
-            padding: 20px;
-            border-radius: 50%;
             cursor: pointer;
         }
-        #mic-btn:hover {
-            background-color: #0056b3;
-        }
-        #mic-status {
             font-size: 1.2rem;
-            margin-top: 10px;
-            color: #666;
         }
-        .menu-items-container {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-            gap: 20px;
             margin-top: 20px;
-        }
-        .menu-item {
-            background-color: #f9f9f9;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
-            text-align: left;
-        }
-        .menu-item h3 {
-            font-size: 1.5rem;
             color: #333;
-            margin-bottom: 10px;
-        }
-        .menu-item p {
-            font-size: 1rem;
-            color: #555;
-            margin: 5px 0;
-        }
-        .order-btn {
-            background-color: #28a745;
-            color: white;
-            padding: 10px 20px;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            margin-top: 10px;
-        }
-        .order-btn:hover {
-            background-color: #218838;
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <button id="mic-btn">🎤</button>
-        <p id="mic-status">Press the mic button to start...</p>
-        <div id="menu-items" class="menu-items-container">
-            <!-- Menu items will be populated here dynamically -->
-        </div>
     </div>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.6.1/annyang.min.js"></script>
     <script>
-        let menuItems = [];
-        let selectedItem = "";
-        let quantity = 0;
-        const micBtn = document.getElementById("mic-btn");
-        const micStatus = document.getElementById("mic-status");
-        const menuItemsContainer = document.getElementById('menu-items');
-        // Fetch menu items from the backend (Flask)
-        fetch('/menu')
-            .then(response => response.json())
-            .then(data => {
-                menuItems = data;
-                renderMenuItems(menuItems);
-            })
-            .catch(error => console.error('Error fetching menu items:', error));
-        // Render menu items dynamically
-        function renderMenuItems(items) {
-            menuItemsContainer.innerHTML = "";
-            items.forEach(item => {
-                const menuItemDiv = document.createElement('div');
-                menuItemDiv.classList.add('menu-item');
-                menuItemDiv.innerHTML = `
-                    <h3>${item.name}</h3>
-                    <p><strong>Price:</strong> $${item.price}</p>
-                    <p><strong>Ingredients:</strong> ${item.ingredients}</p>
-                    <p><strong>Category:</strong> ${item.category}</p>
-                    <button class="order-btn" data-item="${item.name}">Order</button>
-                `;
-                menuItemsContainer.appendChild(menuItemDiv);
-            });
-        }
-        // Initialize annyang for voice commands
-        if (annyang) {
-            console.log("annyang initialized");
-            let commands = {};
-            commands['what is the menu'] = function () {
-                micStatus.innerText = "I will tell you the menu.";
-                let menuSpeech = "Here are the menu items: ";
-                menuItems.forEach(item => {
-                    menuSpeech += `${item.name}, Price: $${item.price}, Ingredients: ${item.ingredients}, Category: ${item.category}. `;
-                });
-                speak(menuSpeech);
-            };
-            menuItems.forEach(item => {
-                commands[item.name.toLowerCase()] = function () {
-                    selectedItem = item.name;
-                    micStatus.innerText = `You chose ${selectedItem}. Please say the quantity.`;
-                    speak(`You chose ${selectedItem}. Please say the quantity.`);
-                };
-            });
-            annyang.addCommands(commands);
-            annyang.start();
-        } else {
-            console.log("annyang is not supported on this browser.");
-            alert("Sorry, your browser does not support speech recognition.");
-        }
-        micBtn.addEventListener("click", function () {
-            micStatus.innerText = "Listening...";
-            annyang.start();
         });
-        function speak(text) {
-            const msg = new SpeechSynthesisUtterance(text);
-            msg.rate = 1;
-            window.speechSynthesis.speak(msg);
         }
-        // Function to confirm the order and place it
-        function confirmOrder() {
-            let orderDetails = {
-                item: selectedItem,
-                quantity: quantity
             };
-            fetch('/order', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(orderDetails),
-            })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        micStatus.innerText = "Order placed successfully!";
-                        speak("Order placed successfully!");
-                    } else {
-                        micStatus.innerText = "Error placing order.";
-                        speak("Error placing order.");
-                    }
-                });
         }
     </script>

     <style>
         body {
             font-family: Arial, sans-serif;
+            text-align: center;
+            background-color: #f4f4f9;
             margin: 0;
             padding: 0;
+            height: 100vh;
             display: flex;
             justify-content: center;
             align-items: center;
         }
         .container {
             text-align: center;
+            background-color: #fff;
+            border-radius: 10px;
+            padding: 40px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            width: 90%;
+            max-width: 500px;
         }
+        h1 {
+            color: #333;
+            font-size: 2rem;
+            margin-bottom: 20px;
+        }
+        .mic-button {
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
             background-color: #007bff;
             color: white;
+            font-size: 40px;
             border: none;
             cursor: pointer;
         }
+        .status {
+            margin-top: 20px;
             font-size: 1.2rem;
+            color: #555;
         }
+        .response {
             margin-top: 20px;
+            font-size: 1.2rem;
             color: #333;
+            display: none;
         }
     </style>
 </head>
 <body>
     <div class="container">
+        <h1>AI Dining Assistant</h1>
+        <button class="mic-button" id="mic-button">🎤</button>
+        <div class="status" id="status">Press the mic button to start...</div>
+        <div class="response" id="response">Response will appear here...</div>
     </div>
     <script>
+        const micButton = document.getElementById('mic-button');
+        const status = document.getElementById('status');
+        const response = document.getElementById('response');
+        let isListening = false;
+        micButton.addEventListener('click', () => {
+            if (!isListening) {
+                isListening = true;
+                greetUser();
+            }
         });
+        // Greeting the user and asking for their name
+        function greetUser() {
+            const utterance = new SpeechSynthesisUtterance("Hi, welcome to Biryani Hub! Can I know your name so I can greet you personally?");
+            speechSynthesis.speak(utterance);
+            utterance.onend = () => {
+                status.textContent = "Listening for your name...";
+                startListening();
+            };
         }
+        // Start listening for the user's response
+        async function startListening() {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            const mediaRecorder = new MediaRecorder(stream, { mimeType: "audio/webm;codecs=opus" });
+            const audioChunks = [];
+            mediaRecorder.ondataavailable = (event) => audioChunks.push(event.data);
+            mediaRecorder.onstop = async () => {
+                const audioBlob = new Blob(audioChunks, { type: "audio/webm" });
+                const formData = new FormData();
+                formData.append("audio", audioBlob);
+                status.textContent = "Processing your preference... Please wait.";
+                try {
+                    const result = await fetch("/process-audio", { method: "POST", body: formData });
+                    const data = await result.json();
+                    response.textContent = data.response;
+                    response.style.display = "block";
+                    const utterance = new SpeechSynthesisUtterance(data.response);
+                    speechSynthesis.speak(utterance);
+                    utterance.onend = () => {
+                        if (!data.response.includes("Goodbye") && !data.response.includes("final order")) {
+                            startListening(); // Continue listening
+                        } else {
+                            status.textContent = "Conversation ended.";
+                            isListening = false;
+                        }
+                    };
+                } catch (error) {
+                    response.textContent = "Sorry, I couldn’t understand that. Could you please repeat?";
+                    status.textContent = "Press the mic button to restart.";
+                    isListening = false;
+                }
             };
+            mediaRecorder.start();
+            setTimeout(() => mediaRecorder.stop(), 5000); // Stop recording after 5 seconds
         }
     </script>