Update templates/menu_page.html

templates/menu_page.html

@@ -91,48 +91,119 @@
     </div>
 
     <script>
-        const listenButton = document.getElementById("listen-btn");
-        const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
-
-        recognition.lang = "en-US";
-        recognition.interimResults = false;
-
-        function speak(text) {
-            const msg = new SpeechSynthesisUtterance(text);
-            window.speechSynthesis.speak(msg);
+    const listenButton = document.getElementById("listen-btn");
+    const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+    recognition.lang = "en-US";
+    recognition.interimResults = false;
+
+    let cart = [];  // To store the cart items
+
+    function speak(text) {
+        const msg = new SpeechSynthesisUtterance(text);
+        window.speechSynthesis.speak(msg);
+    }
+
+    listenButton.addEventListener("click", () => {
+        speak("Please say the category you want to explore, such as Appetizer or Main Course.");
+        recognition.start();
+    });
+
+    recognition.onresult = (event) => {
+        const command = event.results[0][0].transcript.toLowerCase();
+        console.log("User said:", command);
+
+        if (command.includes("appetizer") || command.includes("main course")) {
+            // Identify the category and filter items (for demo, we simply proceed with a generic response)
+            const category = command.includes("appetizer") ? "Appetizer" : "Main Course";
+            speak(`You selected ${category}. What would you like to order from the ${category} menu?`);
+            askForItem(category);
+        } else {
+            speak("Sorry, I couldn't recognize that. Please say 'Appetizer' or 'Main Course'.");
         }
-
-        listenButton.addEventListener("click", () => {
-            speak("Please say the item you want to order.");
-            recognition.start();
+    };
+
+    function askForItem(category) {
+        // Get all items from the selected category
+        const items = document.querySelectorAll(`.menu-item[data-category="${category}"]`);
+        let itemsText = `The ${category} menu includes: `;
+        items.forEach(item => {
+            itemsText += item.querySelector("h3").textContent + ", ";
         });
-
+        speak(itemsText);
+        recognition.start();
         recognition.onresult = (event) => {
-            const command = event.results[0][0].transcript.toLowerCase();
-            console.log("User said:", command);
+            const itemOrdered = event.results[0][0].transcript.toLowerCase();
+            const itemElement = Array.from(items).find(item => item.querySelector("h3").textContent.toLowerCase().includes(itemOrdered));
+
+            if (itemElement) {
+                const itemName = itemElement.querySelector("h3").textContent;
+                speak(`You selected ${itemName}. How many would you like to order?`);
+                askForQuantity(itemName);
+            } else {
+                speak("Sorry, I couldn't find that item. Please say the item again.");
+            }
+        };
+    }
 
-            // Add logic to recognize specific items or trigger actions based on the command
-            if (command.includes("order")) {
-                // For example, navigate or process an order (customize as needed)
-                speak("Your order has been placed.");
+    function askForQuantity(itemName) {
+        recognition.start();
+        recognition.onresult = (event) => {
+            const quantity = event.results[0][0].transcript.trim();
+            if (isNaN(quantity)) {
+                speak("Sorry, I didn't catch that. Please say a number.");
+            } else {
+                cart.push({ itemName, quantity });
+                speak(`${quantity} of ${itemName} added to your cart. Would you like to add more items?`);
+                askToContinue();
             }
         };
+    }
 
-        recognition.onerror = (event) => {
-            console.error("Speech recognition error:", event.error);
-            speak("Sorry, I couldn't understand that. Please try again.");
+    function askToContinue() {
+        recognition.start();
+        recognition.onresult = (event) => {
+            const command = event.results[0][0].transcript.toLowerCase();
+            if (command.includes("yes")) {
+                speak("What would you like to order next?");
+                recognition.stop();
+            } else if (command.includes("no")) {
+                announceCartSummary();
+            } else {
+                speak("Sorry, I didn't understand. Please say 'yes' to continue or 'no' to proceed to checkout.");
+            }
         };
+    }
 
-        // Voice reading of menu items on page load
-        window.onload = function() {
-            const menuItems = document.querySelectorAll('.menu-item h3');
-            let itemsText = "The menu includes: ";
-            menuItems.forEach(item => {
-                itemsText += item.textContent + ", ";
-            });
-            speak(itemsText); // Speak all the item names
-        }
-    </script>
+    function announceCartSummary() {
+        let cartSummary = "Your cart includes: ";
+        cart.forEach(item => {
+            cartSummary += `${item.quantity} of ${item.itemName}, `;
+        });
+        cartSummary += "Would you like to proceed with the order?";
+        speak(cartSummary);
+        confirmationForOrder();
+    }
+
+    function confirmationForOrder() {
+        recognition.start();
+        recognition.onresult = (event) => {
+            const confirmation = event.results[0][0].transcript.toLowerCase();
+            if (confirmation.includes("yes")) {
+                speak("Your order has been placed successfully. Thank you!");
+                // Implement the final order placing logic here
+            } else if (confirmation.includes("no")) {
+                speak("Your order has been cancelled. Thank you!");
+                // Cancel order logic
+            } else {
+                speak("Sorry, I didn't understand. Please confirm if you'd like to place the order.");
+            }
+        };
+    }
 
+    recognition.onerror = (event) => {
+        console.error("Speech recognition error:", event.error);
+        speak("Sorry, I couldn't understand that. Please try again.");
+    };
+</script>
 </body>
 </html>