Update templates/menu_page.html

templates/menu_page.html

@@ -80,78 +80,106 @@
         <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>
-            {% endfor %}
+      <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>
+    {% endfor %}
+</div>
+
     </div>
 
-    <script>
-        const micButton = document.getElementById('mic-button');
-        const status = document.getElementById('status');
-        const response = document.getElementById('response');
-        let isListening = false;
+   <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();
-            };
+    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 
+                });
 
-        // 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 {
-                    const result = await fetch("/process-audio", { method: "POST", body: formData });
-                    const data = await result.json();
-                    response.textContent = data.response;
-                    response.style.display = "block";
-                    const utterance = new SpeechSynthesisUtterance(data.response);
-                    speechSynthesis.speak(utterance);
-                    utterance.onend = () => {
-                        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
+                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
+    }
+
+    // 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();
+
+            // 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);
         }
-    </script>
+    }
+
+    // Call fetchMenuItems to load the menu when the page is ready or as needed
+    fetchMenuItems();
 
+</script>
 </body>
 </html>