VoiceMenu20

Sleeping

App Files Files Community

DSatishchandra commited on Feb 19, 2025

Commit

a2d8fd3

verified ·

1 Parent(s): 758c9f3

Update templates/menu_page.html

Browse files

Files changed (1) hide show

templates/menu_page.html +104 -77

templates/menu_page.html CHANGED Viewed

@@ -7,28 +7,26 @@
     <style>
         body {
             font-family: Arial, sans-serif;
-            text-align: center;
             background-color: #f4f4f9;
             margin: 0;
             padding: 0;
-            height: 100vh;
             display: flex;
             justify-content: center;
             align-items: center;
         }
         .container {
             text-align: center;
             background-color: #fff;
-            border-radius: 10px;
             padding: 40px;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            width: 90%;
-            max-width: 500px;
         }
         h1 {
             color: #333;
-            font-size: 2rem;
-            margin-bottom: 20px;
         }
         .mic-button {
             width: 80px;
@@ -45,15 +43,8 @@
             font-size: 1.2rem;
             color: #555;
         }
-        .response {
-            margin-top: 20px;
-            font-size: 1.2rem;
-            color: #333;
-            display: none;
-        }
         .menu-items-container {
             margin-top: 30px;
-            padding-top: 20px;
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 20px;
@@ -65,10 +56,6 @@
             box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
             text-align: left;
         }
-        .menu-item h3 {
-            font-size: 1.5rem;
-            color: #333;
-        }
     </style>
 </head>
 <body>
@@ -77,28 +64,19 @@
         <h1>AI Dining Assistant</h1>
         <button class="mic-button" id="mic-button">🎤</button>
         <div class="status" id="status">Press the mic button to start...</div>
-        <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" 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>
     </div>
     <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) {
@@ -107,18 +85,18 @@
             }
         });
-        // 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 = [];
@@ -128,35 +106,83 @@
                 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;
                 }
             };
@@ -164,27 +190,28 @@
             setTimeout(() => mediaRecorder.stop(), 5000); // Stop recording after 5 seconds
         }
-        // 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);
             });
         }
-        // Trigger the speech for menu items when the page loads
-        window.onload = function() {
-            speakMenuItems();
-        };
     </script>
 </body>

     <style>
         body {
             font-family: Arial, sans-serif;
             background-color: #f4f4f9;
+            text-align: center;
             margin: 0;
             padding: 0;
             display: flex;
             justify-content: center;
             align-items: center;
+            height: 100vh;
         }
         .container {
             text-align: center;
             background-color: #fff;
             padding: 40px;
+            border-radius: 10px;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            width: 80%;
+            max-width: 600px;
         }
         h1 {
             color: #333;
         }
         .mic-button {
             width: 80px;
             font-size: 1.2rem;
             color: #555;
         }
         .menu-items-container {
             margin-top: 30px;
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 20px;
             box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
             text-align: left;
         }
     </style>
 </head>
 <body>
         <h1>AI Dining Assistant</h1>
         <button class="mic-button" id="mic-button">🎤</button>
         <div class="status" id="status">Press the mic button to start...</div>
+        <div class="menu-items-container" id="menu-items">
+            <!-- Menu items will be populated here dynamically -->
         </div>
     </div>
     <script>
         const micButton = document.getElementById('mic-button');
         const status = document.getElementById('status');
+        const menuItemsContainer = document.getElementById('menu-items');
         let isListening = false;
+        let selectedItem = '';
+        let quantity = 0;
         micButton.addEventListener('click', () => {
             if (!isListening) {
             }
         });
+        // Greet user
         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...";
+                startListeningForName();
             };
         }
+        // Start listening for user input (name)
+        async function startListeningForName() {
             const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
             const mediaRecorder = new MediaRecorder(stream, { mimeType: "audio/webm;codecs=opus" });
             const audioChunks = [];
                 const formData = new FormData();
                 formData.append("audio", audioBlob);
+                status.textContent = "Processing your name... Please wait.";
                 try {
+                    const result = await fetch("/process-audio", { method: "POST", body: formData });
+                    const data = await result.json();
+                    selectedItem = data.name;
+                    status.textContent = `Hello ${selectedItem}! How can I help you today?`;
+                    suggestFood();
+                } catch (error) {
+                    status.textContent = "Sorry, I couldn’t understand that. Could you please repeat?";
+                    isListening = false;
+                }
+            };
+            mediaRecorder.start();
+            setTimeout(() => mediaRecorder.stop(), 5000); // Stop recording after 5 seconds
+        }
+        // Suggest food items to the user
+        function suggestFood() {
+            fetch('/menu') // GET request to fetch menu items from the server
+                .then(response => response.json())
+                .then(data => {
+                    menuItemsContainer.innerHTML = "";
+                    data.forEach(item => {
+                        const menuItemDiv = document.createElement('div');
+                        menuItemDiv.classList.add('menu-item');
+                        menuItemDiv.innerHTML = `
+                            <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}" onclick="takeOrder('${item.Name}')">Order</button>
+                        `;
+                        menuItemsContainer.appendChild(menuItemDiv);
                     });
+                    speakMenuItems(data);
+                });
+        }
+        // Read out the menu items
+        function speakMenuItems(items) {
+            const utterance = new SpeechSynthesisUtterance("Here are the menu items:");
+            speechSynthesis.speak(utterance);
+            items.forEach(item => {
+                const itemUtterance = new SpeechSynthesisUtterance(`${item.Name}, Price: $${item.Price__c}, Ingredients: ${item.Ingredients__c}`);
+                speechSynthesis.speak(itemUtterance);
+            });
+        }
+        // Handle user order
+        function takeOrder(item) {
+            selectedItem = item;
+            const utterance = new SpeechSynthesisUtterance(`You selected ${item}. How many would you like?`);
+            speechSynthesis.speak(utterance);
+            status.textContent = `You selected ${item}. How many would you like?`;
+            startListeningForQuantity();
+        }
+        // Start listening for quantity
+        async function startListeningForQuantity() {
+            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 quantity... Please wait.";
+                try {
+                    const result = await fetch("/process-audio", { method: "POST", body: formData });
+                    const data = await result.json();
+                    quantity = parseInt(data.quantity);
+                    status.textContent = `You want ${quantity} of ${selectedItem}. Please confirm your order.`;
+                    confirmOrder();
                 } catch (error) {
+                    status.textContent = "Sorry, I couldn’t understand that. Could you please repeat?";
                     isListening = false;
                 }
             };
             setTimeout(() => mediaRecorder.stop(), 5000); // Stop recording after 5 seconds
         }
+        // Confirm the order and send it to the backend
+        function confirmOrder() {
+            const orderDetails = {
+                item: selectedItem,
+                quantity: quantity
+            };
+            fetch('/order', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(orderDetails)
+            })
+            .then(response => response.json())
+            .then(data => {
+                status.textContent = `Order placed for ${quantity} of ${selectedItem}.`;
+            })
+            .catch(error => {
+                status.textContent = "Error placing order.";
             });
         }
     </script>
 </body>