VoiceMenu1

Sleeping

App Files Files Community

DSatishchandra commited on Feb 15, 2025

Commit

bcde189

verified ·

1 Parent(s): fd2f5b6

Update templates/menu_page.html

Browse files

Files changed (1) hide show

templates/menu_page.html +80 -102

templates/menu_page.html CHANGED Viewed

@@ -3,126 +3,104 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Menu - Biryani Hub</title>
-    <style>
-        /* General Body Styling */
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #f8f8f8;
-            margin: 0;
-            padding: 0;
-        }
-        /* Container for the menu */
-        .menu-container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 20px;
-            background-color: #fff;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            border-radius: 8px;
-            margin-top: 50px;
-        }
-        h1 {
-            text-align: center;
-            font-size: 2.5rem;
-            color: #333;
-            margin-bottom: 30px;
-        }
-        .menu-item {
-            border-bottom: 1px solid #eee;
-            padding: 15px 0;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .order-btn {
-            padding: 10px 20px;
-            background-color: #4CAF50;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-        .order-btn:hover {
-            background-color: #45a049;
-        }
-        #listen-btn {
-            padding: 10px 20px;
-            background-color: #4CAF50;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            font-size: 1.2rem;
-            display: block;
-            margin: 30px auto;
-        }
-        #listen-btn:hover {
-            background-color: #45a049;
-        }
-    </style>
 </head>
 <body>
-    <div class="menu-container">
         <h1>Welcome to the Menu</h1>
-        {% for item in menu_items %}
-        <div class="menu-item">
-            <div class="details">
                 <h3>{{ item.name }}</h3>
-                <p><strong>Ingredients:</strong> {{ item.ingredients }}</p>
-                <p><strong>Category:</strong> {{ item.category }}</p>
-                <p class="price">Price: ${{ item.price }}</p>
             </div>
-            <button class="order-btn">Order</button>
         </div>
-        {% endfor %}
-        <!-- Button for triggering voice recognition -->
-        <button id="listen-btn">Say "Order" to order an item</button>
     </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);
         }
-        listenButton.addEventListener("click", () => {
-            speak("Please say the item you want to order.");
-            recognition.start();
         });
-        recognition.onresult = (event) => {
-            const command = event.results[0][0].transcript.toLowerCase();
-            console.log("User said:", command);
-            // 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.");
-            }
-        };
-        recognition.onerror = (event) => {
-            console.error("Speech recognition error:", event.error);
-            speak("Sorry, I couldn't understand that. Please try again.");
-        };
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Menu Page</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.6.1/annyang.min.js"></script> <!-- for voice commands -->
 </head>
 <body>
+    <div class="container">
         <h1>Welcome to the Menu</h1>
+        <div id="menu-items">
+            {% for item in menu_items %}
+            <div class="menu-item">
                 <h3>{{ item.name }}</h3>
+                <p>Price: ${{ item.price }}</p>
+                <p>Ingredients: {{ item.ingredients }}</p>
+                <p>Category: {{ item.category }}</p>
+                <button class="order-btn" data-item="{{ item.name }}">Order</button>
             </div>
+            {% endfor %}
         </div>
+        <div id="mic-container">
+            <button id="mic-btn">🎤</button>
+            <p id="mic-status">Press the mic button to start...</p>
+        </div>
     </div>
     <script>
+        let menuItems = [];
+        let selectedItem = "";
+        let quantity = 0;
+        // Fetch menu items from the backend
+        {% for item in menu_items %}
+        menuItems.push("{{ item.name }}");
+        {% endfor %}
+        // Setup voice interaction
+        if (annyang) {
+            // Add a voice command to handle menu items ordering
+            var commands = {};
+            menuItems.forEach(item => {
+                commands[item.toLowerCase()] = function() {
+                    selectedItem = item;
+                    document.getElementById("mic-status").innerText = "You chose " + item + ". Please say the quantity.";
+                };
+            });
+            // Start voice recognition
+            annyang.addCommands(commands);
+            annyang.start();
         }
+        // Handle mic button click to start voice recognition
+        document.getElementById("mic-btn").addEventListener("click", function() {
+            document.getElementById("mic-status").innerText = "Listening...";
+            annyang.start();
         });
+        // Handle order button click
+        document.querySelectorAll('.order-btn').forEach(button => {
+            button.addEventListener('click', function() {
+                selectedItem = button.getAttribute('data-item');
+                document.getElementById("mic-status").innerText = `You chose ${selectedItem}. Please say the quantity.`;
+            });
+        });
+        // Wait for quantity confirmation via voice and then submit
+        function placeOrder() {
+            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) {
+                    document.getElementById("mic-status").innerText = "Order placed successfully!";
+                } else {
+                    document.getElementById("mic-status").innerText = "Error placing order.";
+                }
+            });
+        }
+        // Listen for quantity after food item selection
+        if (annyang) {
+            annyang.addCommands({
+                'quantity *number': function(number) {
+                    quantity = parseInt(number);
+                    document.getElementById("mic-status").innerText = `You want ${quantity} of ${selectedItem}. Please confirm your order.`;
+                    placeOrder();
+                }
+            });
+        }
     </script>
 </body>
 </html>