Update static/script.js

static/script.js

@@ -105,21 +105,9 @@ function displayIngredientsList(ingredients) {
     ingredients.forEach(ingredient => {
         const item = document.createElement('div');
         item.className = 'ingredient-item';
-        // Only use image if provided, otherwise just show name and button
-        const img = ingredient.image_url ? document.createElement('img') : null;
-        if (img) {
-            img.src = ingredient.image_url;
-            img.alt = ingredient.name;
-            img.style.width = '80px';
-            img.style.height = '80px';
-            img.style.objectFit = 'cover';
-            img.style.borderRadius = '5px';
-            item.appendChild(img);
-        }
         const name = document.createElement('div');
         name.textContent = ingredient.name;
         name.style.textAlign = 'center';
-        name.style.marginTop = img ? '5px' : '0';
         name.style.fontSize = '12px';
         const button = document.createElement('button');
         button.textContent = 'Add';
@@ -130,7 +118,6 @@ function displayIngredientsList(ingredients) {
             }
         };
         item.appendChild(name);
-        if (img) item.appendChild(img); // Add image only if it exists
         item.appendChild(button);
         ingredientsList.appendChild(item);
     });
@@ -153,7 +140,27 @@ function displaySelectedIngredients() {
 
     selectedIngredients.forEach(ingredient => {
         const div = document.createElement('div');
-        div.textContent = ingredient.name;
+        div.style.display = 'flex';
+        div.style.alignItems = 'center';
+        div.style.margin = '5px 0';
+        const nameSpan = document.createElement('span');
+        nameSpan.textContent = ingredient.name;
+        nameSpan.style.flex = '1';
+        const removeButton = document.createElement('button');
+        removeButton.textContent = 'Remove';
+        removeButton.onclick = () => {
+            selectedIngredients = selectedIngredients.filter(item => item.name !== ingredient.name);
+            displaySelectedIngredients();
+        };
+        removeButton.style.marginLeft = '10px';
+        removeButton.style.padding = '2px 8px';
+        removeButton.style.backgroundColor = '#f44336';
+        removeButton.style.color = 'white';
+        removeButton.style.border = 'none';
+        removeButton.style.borderRadius = '5px';
+        removeButton.style.cursor = 'pointer';
+        div.appendChild(nameSpan);
+        div.appendChild(removeButton);
         selectedArea.appendChild(div);
     });
 
@@ -210,7 +217,7 @@ function sendSelectedIngredients() {
     }
     const ingredientsList = selectedIngredients.map(ing => ing.name).join(', ');
     addMessage('user', `Selected ingredients: ${ingredientsList}`);
-    addMessage('bot', `Great! I’ll suggest a recipe with ${ingredientsList}. How about a stir-fried veggie mix? Let me know if you'd like to adjust!`);
+    addMessage('bot', `Great! I’ll suggest a recipe with ${ingredientsList}. How about a yogurt-based curry with onions and tomatoes? Let me know if you'd like to adjust!`);
     selectedIngredients = []; // Reset after sending
     displaySelectedIngredients(); // Update the display
 }