Update static/script.js

static/script.js

@@ -50,15 +50,24 @@ function handleResponse(userInput) {
     } else if (lastMessage.includes('non-vegetarian')) {
         conversation.push({ role: 'user', message: 'Non-Vegetarian' });
         console.log("Food preference selected: Non-Vegetarian");
-        botResponse = 'Great choice! 🍽️ Please select a non-vegetarian option:';
+        botResponse = 'Great choice! 🍽️ Please select ingredients:';
         fetchIngredients('non-vegetarian');
         return;
     } else if (lastMessage.includes('vegetarian')) {
         conversation.push({ role: 'user', message: 'Vegetarian' });
         console.log("Food preference selected: Vegetarian");
-        botResponse = 'Great choice! 🍽️ Here are some vegetarian ingredients:';
+        botResponse = 'Great choice! 🍽️ Please select ingredients:';
         fetchIngredients('vegetarian');
         return;
+    } else if (lastMessage.includes('submit ingredients') && selectedIngredients.length > 0) {
+        botResponse = 'Ingredients submitted! Here are some dishes based on your selection:';
+        let category = 'non-vegetarian';
+        if (selectedIngredients.some(ing => ing.name.toLowerCase().includes('vegetarian'))) category = 'vegetarian';
+        else if (selectedIngredients.some(ing => ing.name.toLowerCase().includes('chicken'))) category = 'chicken';
+        else if (selectedIngredients.some(ing => ing.name.toLowerCase().includes('mutton'))) category = 'mutton';
+        fetchMenuItems(category);
+        selectedIngredients = [];
+        return;
     } else if (lastMessage.includes('yes') && selectedMenuItem) {
         botResponse = 'Here are some ingredients to customize your dish:';
         fetchIngredients('non-vegetarian'); // Fetch non-veg ingredients for customization
@@ -146,11 +155,12 @@ function displayIngredientsList(ingredients) {
         const item = document.createElement('div');
         item.className = 'ingredient-item';
         const img = document.createElement('img');
-        img.src = ingredient.image_url || 'https://via.placeholder.com/80';
+        img.src = ingredient.image_url || 'https://picsum.photos/80';
         img.alt = ingredient.name;
         console.log(`Setting image src for ${ingredient.name} to: ${img.src}`); // Debug log
         img.style.width = '80px';
         img.style.height = '80px';
+        img.onerror = () => console.error(`Image failed to load for ${ingredient.name}`);
         const name = document.createElement('div');
         name.textContent = ingredient.name;
         name.style.textAlign = 'center';
@@ -169,6 +179,20 @@ function displayIngredientsList(ingredients) {
         item.appendChild(button);
         ingredientsList.appendChild(item);
     });
+
+    // Add submit button if not present
+    let submitButton = document.querySelector('.submit-button');
+    if (!submitButton && ingredients.length > 0) {
+        submitButton = document.createElement('button');
+        submitButton.className = 'submit-button';
+        submitButton.textContent = 'Submit Ingredients';
+        submitButton.onclick = () => {
+            addMessage('user', 'Submit Ingredients');
+            conversation.push({ role: 'user', message: 'submit ingredients' });
+            handleResponse('submit ingredients');
+        };
+        chatMessages.appendChild(submitButton);
+    }
 }
 
 function displayMenuItems(menuItems) {
@@ -191,11 +215,12 @@ function displayMenuItems(menuItems) {
         const menuItem = document.createElement('div');
         menuItem.className = 'menu-item';
         const img = document.createElement('img');
-        img.src = item.image_url || 'https://via.placeholder.com/80';
+        img.src = item.image_url || 'https://picsum.photos/80';
         img.alt = item.name;
         console.log(`Setting image src for ${item.name} to: ${img.src}`); // Debug log
         img.style.width = '80px';
         img.style.height = '80px';
+        img.onerror = () => console.error(`Image failed to load for ${item.name}`);
         const name = document.createElement('div');
         name.textContent = item.name;
         name.style.textAlign = 'center';
@@ -250,17 +275,6 @@ function displaySelectedIngredients() {
         div.textContent = ingredient.name;
         selectedArea.appendChild(div);
     });
-
-    if (selectedIngredients.length > 0) {
-        let submitButton = document.querySelector('.submit-button');
-        if (!submitButton) {
-            submitButton = document.createElement('button');
-            submitButton.className = 'submit-button';
-            submitButton.textContent = 'Submit Ingredients';
-            submitButton.onclick = submitIngredients;
-            chatMessages.appendChild(submitButton);
-        }
-    }
 }
 
 function submitIngredients() {
@@ -275,13 +289,11 @@ function submitIngredients() {
     .then(data => {
         if (data.success) {
             // Determine category based on selected ingredients
-            let category = 'non-vegetarian'; // Default for now
-            if (selectedIngredients.some(ing => ing.name.toLowerCase() === 'chicken')) {
-                category = 'chicken';
-            } else if (selectedIngredients.some(ing => ing.name.toLowerCase() === 'mutton')) {
-                category = 'mutton';
-            }
-            fetchMenuItems(category); // Fetch menu items based on category
+            let category = 'non-vegetarian';
+            if (selectedIngredients.some(ing => ing.name.toLowerCase().includes('vegetarian'))) category = 'vegetarian';
+            else if (selectedIngredients.some(ing => ing.name.toLowerCase().includes('chicken'))) category = 'chicken';
+            else if (selectedIngredients.some(ing => ing.name.toLowerCase().includes('mutton'))) category = 'mutton';
+            fetchMenuItems(category);
         } else {
             addMessage('bot', 'There was an issue submitting your ingredients. Please try again.');
         }
@@ -354,7 +366,7 @@ function displayOptions(options) {
     });
     chatMessages.appendChild(document.createElement('br'));
     const backButton = document.createElement('button');
-    backButton.textText = 'Go Back';
+    backButton.textContent = 'Go Back';
     backButton.className = 'option-button';
     backButton.onclick = () => {
         conversation.pop();