VoiceMenu20

Sleeping

App Files Files Community

DSatishchandra commited on Feb 18, 2025

Commit

d75fa59

verified ·

1 Parent(s): 8025512

Update templates/menu_page.html

Browse files

Files changed (1) hide show

templates/menu_page.html +33 -93

templates/menu_page.html CHANGED Viewed

@@ -22,15 +22,7 @@
             box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
             text-align: center;
             width: 80%;
-            max-width: 900px;
-        }
-        h1 {
-            color: #333;
-            font-size: 2.5rem;
-            margin-bottom: 20px;
-        }
-        #mic-container {
-            margin-top: 30px;
         }
         #mic-btn {
             font-size: 3rem;
@@ -49,55 +41,13 @@
             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.8rem;
-            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">
-        <h1>Welcome to the Menu</h1>
-        <div id="menu-items" class="menu-items-container">
-            <!-- Menu items will be populated here dynamically -->
-        </div>
-        <div id="mic-container">
-            <button id="mic-btn">🎤</button>
-            <p id="mic-status">Press the mic button to start...</p>
-        </div>
     </div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.6.1/annyang.min.js"></script>
@@ -105,27 +55,15 @@
         let menuItems = [];
         let selectedItem = "";
         let quantity = 0;
-        let step = 0;
-        const menuItemsContainer = document.getElementById('menu-items');
         // Fetch menu items from the backend (Flask)
         fetch('/menu')  // Endpoint that returns the menu data as JSON
             .then(response => response.json())
             .then(data => {
-                menuItems = data;  // Store fetched data
-                menuItems.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);  // Add item to the container
-                });
             })
             .catch(error => console.error('Error fetching menu items:', error));
@@ -135,39 +73,32 @@
             let commands = {};
-            // Command to start the process
-            commands['go to menu'] = function () {
-                console.log("User said: Go to Menu");
-                step = 1;
-                document.getElementById("mic-status").innerText = "Please say 'Appetizer' or 'Main Course' to choose the category.";
             };
-            // Command to choose a category
-            menuItems.forEach(item => {
-                commands[item.category.toLowerCase()] = function () {
-                    console.log("User chose category:", item.category);
-                    step = 2;
-                    document.getElementById("mic-status").innerText = `You chose ${item.category}. Please say the item you want to order, like 'Samosa' or 'Veg Biryani'.`;
-                };
-            });
-            // Command to select an item
             menuItems.forEach(item => {
                 commands[item.name.toLowerCase()] = function () {
-                    console.log("User selected item:", item.name);
                     selectedItem = item.name;
-                    step = 3;
-                    document.getElementById("mic-status").innerText = `You chose ${selectedItem}. Please say the quantity (e.g., 'One', 'Two').`;
                 };
             });
             // Command to set the quantity
             annyang.addCommands({
                 'quantity *number': function (number) {
-                    console.log("User said quantity:", number); // Debugging
                     quantity = parseInt(number);
-                    step = 4;
-                    document.getElementById("mic-status").innerText = `You want ${quantity} of ${selectedItem}. Please confirm your order.`;
                     confirmOrder();
                 }
             });
@@ -181,11 +112,18 @@
         }
         // Handle mic button click to start voice recognition
-        document.getElementById("mic-btn").addEventListener("click", function () {
-            document.getElementById("mic-status").innerText = "Listening...";
             annyang.start();
         });
         // Function to confirm the order and place it
         function confirmOrder() {
             let orderDetails = {
@@ -204,9 +142,11 @@
                 .then(response => response.json())
                 .then(data => {
                     if (data.success) {
-                        document.getElementById("mic-status").innerText = "Order placed successfully!";
                     } else {
-                        document.getElementById("mic-status").innerText = "Error placing order.";
                     }
                 });
         }

             box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
             text-align: center;
             width: 80%;
+            max-width: 600px;
         }
         #mic-btn {
             font-size: 3rem;
             margin-top: 10px;
             color: #666;
         }
     </style>
 </head>
 <body>
     <div class="container">
+        <button id="mic-btn">🎤</button>
+        <p id="mic-status">Press the mic button to start...</p>
     </div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.6.1/annyang.min.js"></script>
         let menuItems = [];
         let selectedItem = "";
         let quantity = 0;
+        const micBtn = document.getElementById("mic-btn");
+        const micStatus = document.getElementById("mic-status");
         // Fetch menu items from the backend (Flask)
         fetch('/menu')  // Endpoint that returns the menu data as JSON
             .then(response => response.json())
             .then(data => {
+                menuItems = data;  // Store fetched menu items in the array
             })
             .catch(error => console.error('Error fetching menu items:', error));
             let commands = {};
+            // Command to say menu items and order details
+            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);
             };
+            // Command to choose an item
             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.`);
                 };
             });
             // Command to set the quantity
             annyang.addCommands({
                 'quantity *number': function (number) {
+                    console.log("User said quantity:", number);
                     quantity = parseInt(number);
+                    micStatus.innerText = `You want ${quantity} of ${selectedItem}. Please confirm your order.`;
+                    speak(`You want ${quantity} of ${selectedItem}. Please confirm your order.`);
                     confirmOrder();
                 }
             });
         }
         // Handle mic button click to start voice recognition
+        micBtn.addEventListener("click", function () {
+            micStatus.innerText = "Listening...";
             annyang.start();
         });
+        // Function to speak the text
+        function speak(text) {
+            const msg = new SpeechSynthesisUtterance(text);
+            msg.rate = 1;  // Speed of speech
+            window.speechSynthesis.speak(msg);
+        }
         // Function to confirm the order and place it
         function confirmOrder() {
             let 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.");
                     }
                 });
         }