Spaces:
Sleeping
Sleeping
Update static/script.js
Browse files- static/script.js +10 -18
static/script.js
CHANGED
@@ -18,7 +18,7 @@ function addMessage(role, message) {
|
|
18 |
messageDiv.textContent = message;
|
19 |
elements.chatMessages.appendChild(messageDiv);
|
20 |
elements.chatMessages.scrollTop = elements.chatMessages.scrollHeight;
|
21 |
-
console.log(
|
22 |
}
|
23 |
|
24 |
function sendMessage() {
|
@@ -44,14 +44,14 @@ function handleResponse(userInput) {
|
|
44 |
let options = [];
|
45 |
|
46 |
if (conversation.length === 2) { // After name input
|
47 |
-
botResponse =
|
48 |
options = [
|
49 |
{ text: 'Vegetarian', class: 'green' },
|
50 |
{ text: 'Non-Vegetarian', class: 'red' },
|
51 |
{ text: 'Both', class: 'gray' }
|
52 |
];
|
53 |
} else if (lastMessage.includes('vegetarian') || lastMessage.includes('non-vegetarian') || lastMessage.includes('both')) {
|
54 |
-
botResponse =
|
55 |
fetchIngredients(lastMessage);
|
56 |
return;
|
57 |
}
|
@@ -73,17 +73,17 @@ function fetchIngredients(dietaryPreference) {
|
|
73 |
.then(response => response.json())
|
74 |
.then(data => {
|
75 |
if (data.error) {
|
76 |
-
addMessage('bot',
|
77 |
} else {
|
78 |
const ingredients = data.ingredients || [];
|
79 |
addMessage('bot', 'Great choice! These are available ingredients:');
|
80 |
displayIngredientsList(ingredients);
|
81 |
displaySelectedIngredients();
|
82 |
-
console.log(
|
83 |
}
|
84 |
})
|
85 |
.catch(error => {
|
86 |
-
addMessage('bot',
|
87 |
});
|
88 |
}
|
89 |
|
@@ -117,12 +117,6 @@ function displayIngredientsList(ingredients) {
|
|
117 |
name.style.textAlign = 'center';
|
118 |
name.style.marginTop = '5px';
|
119 |
name.style.fontSize = '12px';
|
120 |
-
const description = document.createElement('div');
|
121 |
-
description.textContent = ingredient.description; // Display the description
|
122 |
-
description.style.fontSize = '10px';
|
123 |
-
description.style.color = '#666';
|
124 |
-
description.style.marginTop = '5px';
|
125 |
-
|
126 |
const button = document.createElement('button');
|
127 |
button.textContent = 'Add';
|
128 |
button.onclick = () => {
|
@@ -131,10 +125,8 @@ function displayIngredientsList(ingredients) {
|
|
131 |
displaySelectedIngredients();
|
132 |
}
|
133 |
};
|
134 |
-
|
135 |
item.appendChild(img);
|
136 |
item.appendChild(name);
|
137 |
-
item.appendChild(description); // Add description below name
|
138 |
item.appendChild(button);
|
139 |
ingredientsList.appendChild(item);
|
140 |
});
|
@@ -201,7 +193,7 @@ function displayOptions(options) {
|
|
201 |
options.forEach(opt => {
|
202 |
const button = document.createElement('button');
|
203 |
button.textContent = opt.text;
|
204 |
-
button.className =
|
205 |
button.onclick = () => {
|
206 |
addMessage('user', opt.text);
|
207 |
conversation.push({ role: 'user', message: opt.text });
|
@@ -215,7 +207,7 @@ function displayOptions(options) {
|
|
215 |
backButton.className = 'option-button';
|
216 |
backButton.onclick = () => {
|
217 |
const userName = conversation.length > 1 ? conversation[1].message : 'User';
|
218 |
-
conversation = [{ role: 'bot', message:
|
219 |
selectedIngredients = [];
|
220 |
elements.chatMessages.innerHTML = '';
|
221 |
conversation.forEach(msg => addMessage(msg.role, msg.message));
|
@@ -235,8 +227,8 @@ function sendSelectedIngredients() {
|
|
235 |
return;
|
236 |
}
|
237 |
const ingredientsList = selectedIngredients.map(ing => ing.name).join(', ');
|
238 |
-
addMessage('user',
|
239 |
-
addMessage('bot',
|
240 |
selectedIngredients = []; // Reset after sending
|
241 |
displaySelectedIngredients(); // Update the display
|
242 |
}
|
|
|
18 |
messageDiv.textContent = message;
|
19 |
elements.chatMessages.appendChild(messageDiv);
|
20 |
elements.chatMessages.scrollTop = elements.chatMessages.scrollHeight;
|
21 |
+
console.log(Added ${role} message: ${message});
|
22 |
}
|
23 |
|
24 |
function sendMessage() {
|
|
|
44 |
let options = [];
|
45 |
|
46 |
if (conversation.length === 2) { // After name input
|
47 |
+
botResponse = Nice to meet you, ${userInput}! 😊 Let's create your perfect meal! What type of food would you prefer?;
|
48 |
options = [
|
49 |
{ text: 'Vegetarian', class: 'green' },
|
50 |
{ text: 'Non-Vegetarian', class: 'red' },
|
51 |
{ text: 'Both', class: 'gray' }
|
52 |
];
|
53 |
} else if (lastMessage.includes('vegetarian') || lastMessage.includes('non-vegetarian') || lastMessage.includes('both')) {
|
54 |
+
botResponse = Great choice! 🍽️ These are the available ingredients for ${lastMessage}:;
|
55 |
fetchIngredients(lastMessage);
|
56 |
return;
|
57 |
}
|
|
|
73 |
.then(response => response.json())
|
74 |
.then(data => {
|
75 |
if (data.error) {
|
76 |
+
addMessage('bot', Sorry, there was an error fetching ingredients: ${data.error});
|
77 |
} else {
|
78 |
const ingredients = data.ingredients || [];
|
79 |
addMessage('bot', 'Great choice! These are available ingredients:');
|
80 |
displayIngredientsList(ingredients);
|
81 |
displaySelectedIngredients();
|
82 |
+
console.log(Ingredients fetched for ${dietaryPreference}:, ingredients);
|
83 |
}
|
84 |
})
|
85 |
.catch(error => {
|
86 |
+
addMessage('bot', Error: Unable to connect to the ingredient database. ${error.message});
|
87 |
});
|
88 |
}
|
89 |
|
|
|
117 |
name.style.textAlign = 'center';
|
118 |
name.style.marginTop = '5px';
|
119 |
name.style.fontSize = '12px';
|
|
|
|
|
|
|
|
|
|
|
|
|
120 |
const button = document.createElement('button');
|
121 |
button.textContent = 'Add';
|
122 |
button.onclick = () => {
|
|
|
125 |
displaySelectedIngredients();
|
126 |
}
|
127 |
};
|
|
|
128 |
item.appendChild(img);
|
129 |
item.appendChild(name);
|
|
|
130 |
item.appendChild(button);
|
131 |
ingredientsList.appendChild(item);
|
132 |
});
|
|
|
193 |
options.forEach(opt => {
|
194 |
const button = document.createElement('button');
|
195 |
button.textContent = opt.text;
|
196 |
+
button.className = option-button ${opt.class};
|
197 |
button.onclick = () => {
|
198 |
addMessage('user', opt.text);
|
199 |
conversation.push({ role: 'user', message: opt.text });
|
|
|
207 |
backButton.className = 'option-button';
|
208 |
backButton.onclick = () => {
|
209 |
const userName = conversation.length > 1 ? conversation[1].message : 'User';
|
210 |
+
conversation = [{ role: 'bot', message: Hi there! I'm Chef Bot! May I know your name? }, { role: 'user', message: userName }, { role: 'bot', message: Nice to meet you, ${userName}! 😊 Let's create your perfect meal! What type of food would you prefer? }];
|
211 |
selectedIngredients = [];
|
212 |
elements.chatMessages.innerHTML = '';
|
213 |
conversation.forEach(msg => addMessage(msg.role, msg.message));
|
|
|
227 |
return;
|
228 |
}
|
229 |
const ingredientsList = selectedIngredients.map(ing => ing.name).join(', ');
|
230 |
+
addMessage('user', Selected ingredients: ${ingredientsList});
|
231 |
+
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!);
|
232 |
selectedIngredients = []; // Reset after sending
|
233 |
displaySelectedIngredients(); // Update the display
|
234 |
}
|