voicemenuspe

Running

App Files Files Community

lokesh341 commited on 16 days ago

Commit

d9059f7

verified ·

1 Parent(s): f8ccf24

Update templates/menu_page.html

Browse files

Files changed (1) hide show

templates/menu_page.html +70 -66

templates/menu_page.html CHANGED Viewed

@@ -20,7 +20,7 @@
 </head>
 <body>
     <div class="menu-container">
-        <h1>Welcome to the Menu</h1>
         <div id="menu-items"></div>
         <button onclick="viewCart()">View Cart</button>
     </div>
@@ -31,37 +31,64 @@
     </div>
     <script>
-        const menuItems = [
-            { name: 'Samosa', price: 9, ingredients: 'Potatoes, Peas, Flour, Spices', description: 'Crispy fried pastry filled with spiced potatoes and peas.', imageUrl: 'https://via.placeholder.com/100', category: 'veg' },
-            { name: 'Onion Pakoda', price: 10, ingredients: 'Onions, Gram Flour, Spices', description: 'Deep-fried onion fritters seasoned with herbs and spices.', imageUrl: 'https://via.placeholder.com/100', category: 'veg' },
-            { name: 'Chilli Gobi', price: 12, ingredients: 'Cauliflower, Chili Sauce, Spices', description: 'Cauliflower florets tossed in a spicy chili sauce.', imageUrl: 'https://via.placeholder.com/100', category: 'veg' },
-            { name: 'Paneer Butter Masala', price: 13, ingredients: 'Paneer, Tomato, Butter, Spices', description: 'Soft paneer cubes in a creamy, flavorful gravy.', imageUrl: 'https://via.placeholder.com/100', category: 'veg' },
-            { name: 'Aloo Gobi', price: 10, ingredients: 'Potatoes, Cauliflower, Spices', description: 'A traditional Indian curry with potatoes and cauliflower.', imageUrl: 'https://via.placeholder.com/100', category: 'veg' },
-            { name: 'Vegetable Biryani', price: 15, ingredients: 'Basmati Rice, Mixed Vegetables, Spices', description: 'Aromatic rice cooked with seasonal vegetables and spices.', imageUrl: 'https://via.placeholder.com/100', category: 'veg' },
-            { name: 'Palak Paneer', price: 14, ingredients: 'Spinach, Paneer, Spices', description: 'Spinach and cottage cheese cooked with mild spices.', imageUrl: 'https://via.placeholder.com/100', category: 'veg' },
-            { name: 'Dal Tadka', price: 8, ingredients: 'Yellow Lentils, Garlic, Ginger, Spices', description: 'Lentils cooked with spices and topped with tempering.', imageUrl: 'https://via.placeholder.com/100', category: 'veg' },
-            { name: 'Veg Manchurian', price: 11, ingredients: 'Vegetables, Soy Sauce, Spices', description: 'Crispy vegetable balls served in a spicy Chinese sauce.', imageUrl: 'https://via.placeholder.com/100', category: 'veg' },
-            // Non-Vegetarian Items
-            { name: 'Chicken Biryani', price: 14, ingredients: 'Chicken, Basmati Rice, Spices', description: 'Aromatic basmati rice cooked with tender chicken and spices.', imageUrl: 'https://via.placeholder.com/100', category: 'non-veg' },
-            { name: 'Mutton Biryani', price: 16, ingredients: 'Mutton, Basmati Rice, Spices', description: 'Flavorful rice dish made with succulent mutton and aromatic spices.', imageUrl: 'https://via.placeholder.com/100', category: 'non-veg' },
-            { name: 'Fish Curry', price: 18, ingredients: 'Fish, Spices, Coconut Milk', description: 'Delicious fish curry made with fresh fish and coconut milk.', imageUrl: 'https://via.placeholder.com/100', category: 'non-veg' },
-            { name: 'Butter Chicken', price: 15, ingredients: 'Chicken, Tomato, Butter, Cream', description: 'Tender chicken cooked in a rich, creamy tomato sauce.', imageUrl: 'https://via.placeholder.com/100', category: 'non-veg' },
-            { name: 'Chicken Tikka', price: 12, ingredients: 'Chicken, Yogurt, Spices', description: 'Grilled chicken marinated in yogurt and spices.', imageUrl: 'https://via.placeholder.com/100', category: 'non-veg' },
-            { name: 'Lamb Korma', price: 17, ingredients: 'Lamb, Cream, Spices', description: 'Lamb cooked in a rich, creamy gravy with a blend of aromatic spices.', imageUrl: 'https://via.placeholder.com/100', category: 'non-veg' },
-            { name: 'Prawn Masala', price: 20, ingredients: 'Prawns, Spices, Tomatoes', description: 'Juicy prawns cooked in a flavorful, spicy masala.', imageUrl: 'https://via.placeholder.com/100', category: 'non-veg' },
-            { name: 'Chicken Shawarma', price: 13, ingredients: 'Chicken, Garlic, Spices', description: 'Grilled chicken served in a flatbread with garlic sauce.', imageUrl: 'https://via.placeholder.com/100', category: 'non-veg' },
-            { name: 'Egg Curry', price: 9, ingredients: 'Eggs, Spices, Tomatoes', description: 'Hard-boiled eggs cooked in a spicy curry.', imageUrl: 'https://via.placeholder.com/100', category: 'non-veg' },
-        ];
-        const menuContainer = document.getElementById('menu-items');
         const cart = [];
-        // Function to automatically display the menu
-        function showMenu() {
-            menuContainer.innerHTML = ''; // Clear previous menu items
-            menuItems.forEach(item => {
                 const div = document.createElement('div');
                 div.classList.add('menu-item');
                 div.innerHTML = `<div class="details">
@@ -71,46 +98,28 @@
                                         <p>${item.description}</p>
                                         <p><strong>Ingredients:</strong> ${item.ingredients}</p>
                                         <p><strong>Price:</strong> $${item.price}</p>
-                                        <button onclick="askForQuantity('${item.name}')">Add to Cart</button>
                                     </div>
                                   </div>`;
                 menuContainer.appendChild(div);
             });
         }
-        // Function to ask for quantity and add the item to the cart
-        function askForQuantity(itemName) {
-            const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
-            recognition.lang = 'en-US';
-            recognition.interimResults = false;
-            recognition.onresult = (event) => {
-                const command = event.results[0][0].transcript.toLowerCase();
-                const quantityMatch = command.match(/(\d+)\s*([\w\s]*)/);
-                if (quantityMatch) {
-                    const quantity = parseInt(quantityMatch[1]);
-                    const item = menuItems.find(item => item.name.toLowerCase() === itemName.toLowerCase());
-                    if (item) {
-                        const cartItem = { ...item, quantity };
-                        cart.push(cartItem);
-                        speak(`Added ${quantity} ${itemName} to the cart.`);
-                    }
-                } else {
-                    speak('Please specify the quantity for the item.');
-                }
-            };
-            recognition.onerror = () => {
-                speak('Sorry, I couldn’t understand that. Please try again.');
-            };
-            speak(`How many ${itemName}s would you like to add to the cart?`, () => {
                 recognition.start();
             });
         }
-        // Function to view the cart
         function viewCart() {
             const cartContainer = document.getElementById('cart-container');
             const cartItemsContainer = document.getElementById('cart-items');
@@ -124,15 +133,10 @@
             cartContainer.style.display = 'block';
         }
-        // Function for speech synthesis
-        function speak(text) {
-            const msg = new SpeechSynthesisUtterance(text);
-            window.speechSynthesis.speak(msg);
-        }
-        window.onload = showMenu;
     </script>
 </body>
 </html>

 </head>
 <body>
     <div class="menu-container">
+        <h1>Welcome to the Biryani Hub Menu</h1>
         <div id="menu-items"></div>
         <button onclick="viewCart()">View Cart</button>
     </div>
     </div>
     <script>
+        const menuItems = {
+            veg: [
+                { name: 'Samosa', price: 9, ingredients: 'Potatoes, Peas, Flour, Spices', description: 'Crispy fried pastry filled with spiced potatoes and peas.', imageUrl: 'https://via.placeholder.com/100' },
+                { name: 'Onion Pakoda', price: 10, ingredients: 'Onions, Gram Flour, Spices', description: 'Deep-fried onion fritters seasoned with herbs and spices.', imageUrl: 'https://via.placeholder.com/100' },
+                { name: 'Chilli Gobi', price: 12, ingredients: 'Cauliflower, Chili Sauce, Spices', description: 'Cauliflower florets tossed in a spicy chili sauce.', imageUrl: 'https://via.placeholder.com/100' },
+            ],
+            nonVeg: [
+                { name: 'Chicken Biryani', price: 14, ingredients: 'Chicken, Basmati Rice, Spices', description: 'Aromatic basmati rice cooked with tender chicken and spices.', imageUrl: 'https://via.placeholder.com/100' },
+                { name: 'Mutton Biryani', price: 16, ingredients: 'Mutton, Basmati Rice, Spices', description: 'Flavorful rice dish made with succulent mutton and aromatic spices.', imageUrl: 'https://via.placeholder.com/100' },
+                { name: 'Butter Chicken', price: 15, ingredients: 'Chicken, Tomato, Butter, Cream', description: 'Tender chicken cooked in a rich, creamy tomato sauce.', imageUrl: 'https://via.placeholder.com/100' },
+            ]
+        };
         const cart = [];
+        // Speech recognition to interact with the user
+        const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+        recognition.lang = 'en-US';
+        recognition.interimResults = false;
+        recognition.maxAlternatives = 1;
+        function speak(text, callback) {
+            const msg = new SpeechSynthesisUtterance(text);
+            msg.onend = callback;
+            window.speechSynthesis.speak(msg);
+        }
+        function askForVegOrNonVeg() {
+            speak("Would you prefer the veg or non-veg menu?", () => {
+                recognition.start();
+            });
+        }
+        recognition.onresult = (event) => {
+            const command = event.results[0][0].transcript.toLowerCase();
+            console.log("User said:", command);
+            if (command.includes('veg')) {
+                showMenu('veg');
+                speak("Here are the vegetarian items.", () => askForItemsToAdd());
+            } else if (command.includes('non-veg')) {
+                showMenu('nonVeg');
+                speak("Here are the non-vegetarian items.", () => askForItemsToAdd());
+            } else {
+                speak("Please say either veg or non-veg.", () => {
+                    recognition.start();
+                });
+            }
+        };
+        recognition.onerror = (event) => {
+            console.error("Speech recognition error:", event.error);
+            speak("Sorry, I couldn't understand that. Please try again.", () => recognition.start());
+        };
+        function showMenu(type) {
+            const menuContainer = document.getElementById('menu-items');
+            menuContainer.innerHTML = ''; // Clear previous menu items
+            menuItems[type].forEach(item => {
                 const div = document.createElement('div');
                 div.classList.add('menu-item');
                 div.innerHTML = `<div class="details">
                                         <p>${item.description}</p>
                                         <p><strong>Ingredients:</strong> ${item.ingredients}</p>
                                         <p><strong>Price:</strong> $${item.price}</p>
+                                        <p><strong>Quantity:</strong> <input type="number" id="quantity-${item.name}" value="1" min="1" /></p>
+                                        <button onclick="addToCart('${item.name}')">Add to Cart</button>
                                     </div>
                                   </div>`;
                 menuContainer.appendChild(div);
             });
         }
+        function askForItemsToAdd() {
+            speak("Please say the name of the item you'd like to add to the cart.", () => {
                 recognition.start();
             });
         }
+        function addToCart(itemName) {
+            const quantity = document.getElementById(`quantity-${itemName}`).value;
+            const item = menuItems.veg.concat(menuItems.nonVeg).find(i => i.name === itemName);
+            const cartItem = { ...item, quantity: parseInt(quantity) };
+            cart.push(cartItem);
+            speak(`Added ${quantity} of ${itemName} to the cart.`);
+        }
         function viewCart() {
             const cartContainer = document.getElementById('cart-container');
             const cartItemsContainer = document.getElementById('cart-items');
             cartContainer.style.display = 'block';
         }
+        window.onload = () => {
+            speak("Welcome to the Biryani Hub menu.", () => askForVegOrNonVeg());
+        };
     </script>
 </body>
 </html>