Spaces:
Sleeping
Sleeping
Update static/script.js
Browse files- static/script.js +15 -7
static/script.js
CHANGED
@@ -105,13 +105,21 @@ function displayIngredientsList(ingredients) {
|
|
105 |
ingredients.forEach(ingredient => {
|
106 |
const item = document.createElement('div');
|
107 |
item.className = 'ingredient-item';
|
108 |
-
|
109 |
-
img
|
110 |
-
img
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
111 |
const name = document.createElement('div');
|
112 |
name.textContent = ingredient.name;
|
113 |
name.style.textAlign = 'center';
|
114 |
-
name.style.marginTop = '5px';
|
115 |
name.style.fontSize = '12px';
|
116 |
const button = document.createElement('button');
|
117 |
button.textContent = 'Add';
|
@@ -121,8 +129,8 @@ function displayIngredientsList(ingredients) {
|
|
121 |
displaySelectedIngredients();
|
122 |
}
|
123 |
};
|
124 |
-
item.appendChild(img);
|
125 |
item.appendChild(name);
|
|
|
126 |
item.appendChild(button);
|
127 |
ingredientsList.appendChild(item);
|
128 |
});
|
@@ -194,7 +202,7 @@ function displayOptions(options) {
|
|
194 |
optionsDiv.appendChild(backButton);
|
195 |
}
|
196 |
|
197 |
-
//
|
198 |
function sendSelectedIngredients() {
|
199 |
if (selectedIngredients.length === 0) {
|
200 |
addMessage('bot', 'Please select at least one ingredient before sending!');
|
@@ -202,7 +210,7 @@ function sendSelectedIngredients() {
|
|
202 |
}
|
203 |
const ingredientsList = selectedIngredients.map(ing => ing.name).join(', ');
|
204 |
addMessage('user', `Selected ingredients: ${ingredientsList}`);
|
205 |
-
addMessage('bot', `Great! I’ll suggest a recipe with ${ingredientsList}. How about a
|
206 |
selectedIngredients = []; // Reset after sending
|
207 |
displaySelectedIngredients(); // Update the display
|
208 |
}
|
|
|
105 |
ingredients.forEach(ingredient => {
|
106 |
const item = document.createElement('div');
|
107 |
item.className = 'ingredient-item';
|
108 |
+
// Only use image if provided, otherwise just show name and button
|
109 |
+
const img = ingredient.image_url ? document.createElement('img') : null;
|
110 |
+
if (img) {
|
111 |
+
img.src = ingredient.image_url;
|
112 |
+
img.alt = ingredient.name;
|
113 |
+
img.style.width = '80px';
|
114 |
+
img.style.height = '80px';
|
115 |
+
img.style.objectFit = 'cover';
|
116 |
+
img.style.borderRadius = '5px';
|
117 |
+
item.appendChild(img);
|
118 |
+
}
|
119 |
const name = document.createElement('div');
|
120 |
name.textContent = ingredient.name;
|
121 |
name.style.textAlign = 'center';
|
122 |
+
name.style.marginTop = img ? '5px' : '0';
|
123 |
name.style.fontSize = '12px';
|
124 |
const button = document.createElement('button');
|
125 |
button.textContent = 'Add';
|
|
|
129 |
displaySelectedIngredients();
|
130 |
}
|
131 |
};
|
|
|
132 |
item.appendChild(name);
|
133 |
+
if (img) item.appendChild(img); // Add image only if it exists
|
134 |
item.appendChild(button);
|
135 |
ingredientsList.appendChild(item);
|
136 |
});
|
|
|
202 |
optionsDiv.appendChild(backButton);
|
203 |
}
|
204 |
|
205 |
+
// Function to handle sending selected ingredients
|
206 |
function sendSelectedIngredients() {
|
207 |
if (selectedIngredients.length === 0) {
|
208 |
addMessage('bot', 'Please select at least one ingredient before sending!');
|
|
|
210 |
}
|
211 |
const ingredientsList = selectedIngredients.map(ing => ing.name).join(', ');
|
212 |
addMessage('user', `Selected ingredients: ${ingredientsList}`);
|
213 |
+
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!`);
|
214 |
selectedIngredients = []; // Reset after sending
|
215 |
displaySelectedIngredients(); // Update the display
|
216 |
}
|