Update static/script.js

static/script.js

@@ -2,6 +2,7 @@ let conversation = [
     { role: 'bot', message: 'Hi there! I\'m Chef Bot! May I know your name?' }
 ];
 let selectedIngredients = [];
+let currentStep = 'name'; // Track conversation step: 'name', 'dietary', 'ingredients', 'recipes'
 
 function addMessage(role, message) {
     const chatMessages = document.getElementById('chatMessages');
@@ -42,48 +43,52 @@ function handleResponse(userInput) {
     let botResponse = '';
     let options = [];
 
-    if (conversation.length === 2) { // After name input
+    if (currentStep === 'name' && conversation.length === 2) {
+        currentStep = 'dietary';
         botResponse = `Nice to meet you, ${userInput}! 😊 Let's create your perfect meal! What type of food would you prefer?`;
         options = [
             { text: 'Vegetarian', class: 'green' },
             { text: 'Non-Vegetarian', class: 'red' }
         ];
-    } else if (lastMessage.includes('vegetarian')) {
-        botResponse = 'Great choice! 🍽️ We have some amazing vegetarian options! What\'s your dietary preference?';
-        options = [
-            { text: 'Vegan', class: '' },
-            { text: 'Gluten-Free', class: '' },
-            { text: 'Vegetarian', class: '' },
-            { text: 'Low Carb', class: '' },
-            { text: 'Dairy-Free', class: '' },
-            { text: 'Keto', class: '' },
-            { text: 'Halal', class: '' }
-        ];
-    } else if (lastMessage.includes('non-vegetarian')) {
-        botResponse = 'Great choice! 🍽️ We have some amazing non-vegetarian options! What\'s your dietary preference?';
-        options = [
-            { text: 'Low Carb', class: '' },
-            { text: 'Dairy-Free', class: '' },
-            { text: 'Keto', class: '' },
-            { text: 'Halal', class: '' }
-        ];
-    } else if (lastMessage.includes('low carb') || lastMessage.includes('dairy-free') || lastMessage.includes('keto') || lastMessage.includes('halal') || lastMessage.includes('gluten-free') || lastMessage.includes('vegan') || lastMessage.includes('vegetarian')) {
-        fetchIngredients(lastMessage);
-        return; // Exit early to handle ingredients fetch
+    } else if (currentStep === 'dietary' && (lastMessage.includes('vegetarian') || lastMessage.includes('non-vegetarian'))) {
+        currentStep = 'ingredients';
+        botResponse = 'Great choice! 🍽️ Please select your ingredients from the list below.';
+    } else if (currentStep === 'ingredients' && selectedIngredients.length > 0) {
+        // No automatic transition; wait for "Send" button
+        return;
+    } else if (currentStep === 'recipes') {
+        // Handle back button logic if needed
+        if (lastMessage.includes('back')) {
+            if (conversation.length > 2) {
+                conversation.pop(); // Remove 'back'
+                const prevMessage = conversation[conversation.length - 1].message.toLowerCase();
+                if (prevMessage.includes('vegetarian') || prevMessage.includes('non-vegetarian')) {
+                    currentStep = 'dietary';
+                    selectedIngredients = [];
+                    chatMessages.innerHTML = '';
+                    conversation.forEach(msg => addMessage(msg.role, msg.message));
+                    handleResponse(prevMessage);
+                    return;
+                }
+            }
+        }
     }
 
     addMessage('bot', botResponse);
     if (options.length > 0) {
         displayOptions(options);
+    } else if (currentStep === 'ingredients') {
+        fetchIngredients(lastMessage);
+        addSendButton();
+    } else if (currentStep === 'recipes') {
+        displayBackButton();
     }
 }
 
 function fetchIngredients(dietaryPreference) {
     fetch('/get_ingredients', {
         method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
+        headers: {'Content-Type': 'application/json'},
         body: JSON.stringify({ dietary_preference: dietaryPreference })
     })
     .then(response => response.json())
@@ -109,7 +114,6 @@ function displayIngredientsList(ingredients) {
         return;
     }
 
-    // Create or update ingredients list
     let ingredientsList = document.querySelector('.ingredients-list');
     if (!ingredientsList) {
         ingredientsList = document.createElement('div');
@@ -123,7 +127,7 @@ 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'; // Fallback image
+        img.src = ingredient.image_url || 'https://via.placeholder.com/80';
         img.alt = ingredient.name;
         const name = document.createElement('div');
         name.textContent = ingredient.name;
@@ -152,7 +156,6 @@ function displaySelectedIngredients() {
         return;
     }
 
-    // Create or update selected ingredients area
     let selectedArea = document.querySelector('.selected-ingredients');
     if (!selectedArea) {
         selectedArea = document.createElement('div');
@@ -169,12 +172,121 @@ function displaySelectedIngredients() {
     });
 }
 
-function displayOptions(options) {
+function addSendButton() {
     const chatMessages = document.getElementById('chatMessages');
-    if (!chatMessages) {
-        console.error('Chat messages container not found for options!');
-        return;
+    if (!chatMessages) return;
+
+    let sendButton = document.querySelector('.send-button');
+    if (!sendButton) {
+        sendButton = document.createElement('button');
+        sendButton.textContent = 'Send';
+        sendButton.className = 'option-button send-button';
+        sendButton.onclick = () => {
+            if (selectedIngredients.length > 0) {
+                generateRecipes();
+            } else {
+                addMessage('bot', 'Please select at least one ingredient first!');
+            }
+        };
+        chatMessages.appendChild(sendButton);
+    }
+}
+
+function generateRecipes() {
+    const ingredients = selectedIngredients.map(item => item.name);
+    fetch('/generate_recipes', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({ ingredients: ingredients })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.error) {
+            addMessage('bot', `Error generating recipes: ${data.error}`);
+        } else {
+            currentStep = 'recipes';
+            addMessage('bot', 'Here are 5 South Indian recipes based on your ingredients:');
+            displayRecipes(data.recipes);
+            displayBackButton();
+        }
+    })
+    .catch(error => {
+        addMessage('bot', `Error: Unable to generate recipes. ${error.message}`);
+    });
+}
+
+function displayRecipes(recipes) {
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) return;
+
+    recipes.forEach(recipe => {
+        const item = document.createElement('div');
+        item.className = 'recipe-item';
+        const img = document.createElement('img');
+        img.src = recipe.image_url;
+        img.alt = recipe.name;
+        img.style.width = '100px';
+        img.style.height = '100px';
+        img.style.objectFit = 'cover';
+        const name = document.createElement('div');
+        name.textContent = recipe.name;
+        name.style.margin = '5px 0';
+        const desc = document.createElement('div');
+        desc.textContent = recipe.description;
+        desc.style.fontSize = '12px';
+        const button = document.createElement('button');
+        button.textContent = 'Add to Cart';
+        button.className = 'option-button';
+        button.onclick = () => showPopup(recipe);
+        item.appendChild(img);
+        item.appendChild(name);
+        item.appendChild(desc);
+        item.appendChild(button);
+        chatMessages.appendChild(item);
+    });
+}
+
+function showPopup(recipe) {
+    const popup = document.getElementById('popup');
+    const popupContent = document.getElementById('popupContent');
+    if (!popup || !popupContent) return;
+
+    popupContent.innerHTML = `
+        <h3>${recipe.name}</h3>
+        <img src="${recipe.image_url}" alt="${recipe.name}" style="width: 100%; max-width: 250px;">
+        <p><strong>Description:</strong> ${recipe.description}</p>
+        <p><strong>Preparation Steps:</strong> ${recipe.details.preparation}</p>
+        <p><strong>Key Ingredients:</strong> ${recipe.details.key_ingredients.join(', ')}</p>
+    `;
+    popup.style.display = 'block';
+}
+
+function closePopup() {
+    const popup = document.getElementById('popup');
+    if (popup) popup.style.display = 'none';
+}
+
+function displayBackButton() {
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) return;
+
+    let backButton = document.querySelector('.back-button');
+    if (!backButton) {
+        backButton = document.createElement('button');
+        backButton.textContent = 'Back';
+        backButton.className = 'option-button back-button';
+        backButton.onclick = () => {
+            addMessage('user', 'Back');
+            conversation.push({ role: 'user', message: 'Back' });
+            handleResponse('Back');
+        };
+        chatMessages.appendChild(backButton);
     }
+}
+
+function displayOptions(options) {
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) return;
     options.forEach(opt => {
         const button = document.createElement('button');
         button.textContent = opt.text;
@@ -182,24 +294,13 @@ function displayOptions(options) {
         button.onclick = () => {
             addMessage('user', opt.text);
             conversation.push({ role: 'user', message: opt.text });
-            chatMessages.innerHTML = ''; // Clear previous messages
+            chatMessages.innerHTML = '';
             conversation.forEach(msg => addMessage(msg.role, msg.message));
             setTimeout(() => handleResponse(opt.text), 500);
         };
         chatMessages.appendChild(button);
     });
     chatMessages.appendChild(document.createElement('br'));
-    const backButton = document.createElement('button');
-    backButton.textContent = 'Go Back';
-    backButton.className = 'option-button';
-    backButton.onclick = () => {
-        conversation.pop(); // Remove last user input
-        selectedIngredients = []; // Clear selected ingredients
-        chatMessages.innerHTML = ''; // Clear previous messages
-        conversation.forEach(msg => addMessage(msg.role, msg.message));
-        setTimeout(() => handleResponse(conversation[conversation.length - 1].message), 500);
-    };
-    chatMessages.appendChild(backButton);
 }
 
 // Add event listener for Enter key