Update templates/menu_page.html

templates/menu_page.html

@@ -80,106 +80,112 @@
         <div class="response" id="response">Response will appear here...</div>
 
         <!-- Display the menu items dynamically -->
-      <div class="menu-items-container">
-    {% for item in menu_items %}
-        <div class="menu-item">
-            <h3>{{ item.Name }}</h3>
-            <p><strong>Price:</strong> ${{ item.Price__c }}</p>
-            <p><strong>Ingredients:</strong> {{ item.Ingredients__c }}</p>
-            <p><strong>Category:</strong> {{ item.Category__c }}</p>
-            <button class="order-btn" data-item="{{ item.Name }}">Order</button>
+        <div class="menu-items-container">
+            {% for item in menu_items %}
+                <div class="menu-item" id="menu-item-{{ loop.index }}">
+                    <h3>{{ item.Name }}</h3>
+                    <p><strong>Price:</strong> ${{ item.Price__c }}</p>
+                    <p><strong>Ingredients:</strong> {{ item.Ingredients__c }}</p>
+                    <p><strong>Category:</strong> {{ item.Category__c }}</p>
+                    <button class="order-btn" data-item="{{ item.Name }}">Order</button>
+                </div>
+            {% endfor %}
         </div>
-    {% endfor %}
-</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 {
-                // POST request to send the recorded audio to the server for processing
-                const result = await fetch("/process-audio", { 
-                    method: "POST", 
-                    body: formData 
-                });
-
-                const data = await result.json(); // Get the server's response
-
-                // Display the response and use speech synthesis to speak the response
-                response.textContent = data.response;
-                response.style.display = "block";
-                const utterance = new SpeechSynthesisUtterance(data.response);
-                speechSynthesis.speak(utterance);
-
-                utterance.onend = () => {
-                    // Handle further interaction or end conversation
-                    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;
+    <script>
+        const micButton = document.getElementById('mic-button');
+        const status = document.getElementById('status');
+        const response = document.getElementById('response');
+        const menuItemsContainer = document.querySelector('.menu-items-container');
+        let isListening = false;
+
+        micButton.addEventListener('click', () => {
+            if (!isListening) {
+                isListening = true;
+                greetUser();
             }
-        };
-        mediaRecorder.start();
-        setTimeout(() => mediaRecorder.stop(), 5000); // Stop recording after 5 seconds
-    }
+        });
+
+        // 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();
+            };
+        }
 
-    // Additional example: GET request to fetch some data (e.g., menu items)
-    async function fetchMenuItems() {
-        try {
-            const result = await fetch("/menu");  // This is a GET request
-            const menuItems = await result.json();
+        // 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 {
+                    // POST request to send the recorded audio to the server for processing
+                    const result = await fetch("/process-audio", { 
+                        method: "POST", 
+                        body: formData 
+                    });
+
+                    const data = await result.json(); // Get the server's response
+
+                    // Display the response and use speech synthesis to speak the response
+                    response.textContent = data.response;
+                    response.style.display = "block";
+                    const utterance = new SpeechSynthesisUtterance(data.response);
+                    speechSynthesis.speak(utterance);
+
+                    utterance.onend = () => {
+                        // Handle further interaction or end conversation
+                        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
+        }
 
-            // Process the menu items or display them as needed
-            console.log(menuItems);  // You can now use this data to display menu items on the page
-        } catch (error) {
-            console.error("Error fetching menu items:", error);
+        // Function to speak out the menu items
+        function speakMenuItems() {
+            const utterance = new SpeechSynthesisUtterance("Here are the menu items:");
+            speechSynthesis.speak(utterance);
+
+            menuItemsContainer.querySelectorAll('.menu-item').forEach(item => {
+                const name = item.querySelector('h3').innerText;
+                const price = item.querySelector('p').innerText;
+                const ingredients = item.querySelector('p').innerText;
+                const category = item.querySelector('p').innerText;
+                
+                const menuItemText = `${name}, Price: ${price}, Ingredients: ${ingredients}, Category: ${category}`;
+                const itemUtterance = new SpeechSynthesisUtterance(menuItemText);
+                speechSynthesis.speak(itemUtterance);
+            });
         }
-    }
 
-    // Call fetchMenuItems to load the menu when the page is ready or as needed
-    fetchMenuItems();
+        // Trigger the speech for menu items when the page loads
+        window.onload = function() {
+            speakMenuItems();
+        };
+    </script>
 
-</script>
 </body>
 </html>