Update static/script.js

static/script.js

@@ -44,12 +44,12 @@ function handleResponse(userInput) {
         options = [
             { text: 'Vegetarian', class: 'green' },
             { text: 'Non-Vegetarian', class: 'red' },
-            { text: 'Both', class: 'gray' } // Added "Both" option
+            { text: 'Both', class: 'gray' }
         ];
     } else if (lastMessage.includes('vegetarian') || lastMessage.includes('non-vegetarian') || lastMessage.includes('both')) {
-        botResponse = `Great choice! 🍽️ These are the available ingredients for ${lastMessage}:`;
-        fetchIngredients(lastMessage.toLowerCase()); // Pass the preference directly
-        return; // Exit early to handle ingredients fetch
+        botResponse = `Great choice! 🍽️ These are the available ingredients for ${lastMessage} (including any "Both" category):`;
+        fetchIngredients(lastMessage.toLowerCase());
+        return;
     }
 
     addMessage('bot', botResponse);
@@ -75,6 +75,8 @@ function fetchIngredients(dietaryPreference) {
             addMessage('bot', 'Great choice! These are available ingredients:');
             displayIngredientsList(ingredients);
             displaySelectedIngredients();
+            // Log ingredients to console for debugging
+            console.log(`Ingredients fetched for ${dietaryPreference}:`, ingredients);
         }
     })
     .catch(error => {
@@ -105,7 +107,7 @@ function displayIngredientsList(ingredients) {
         img.src = ingredient.image_url || 'https://via.placeholder.com/80';
         img.alt = ingredient.name;
         const name = document.createElement('div');
-        name.textContent = ingredient.name;
+        name.textContent = `${ingredient.name} (Category: ${ingredient.category})`; // Show category for clarity
         name.style.textAlign = 'center';
         name.style.marginTop = '5px';
         name.style.fontSize = '12px';
@@ -142,7 +144,7 @@ function displaySelectedIngredients() {
 
     selectedIngredients.forEach(ingredient => {
         const div = document.createElement('div');
-        div.textContent = ingredient.name;
+        div.textContent = `${ingredient.name} (Category: ${ingredient.category})`;
         selectedArea.appendChild(div);
     });
 }