Spaces:
Sleeping
Sleeping
Update static/script.js
Browse files- static/script.js +21 -19
static/script.js
CHANGED
@@ -5,8 +5,7 @@ let selectedIngredients = [];
|
|
5 |
|
6 |
const elements = {
|
7 |
chatMessages: document.getElementById('chatMessages'),
|
8 |
-
userInput: document.getElementById('userInput')
|
9 |
-
sendButton: document.querySelector('.chat-input button') // Reference the Send button
|
10 |
};
|
11 |
|
12 |
function addMessage(role, message) {
|
@@ -19,7 +18,7 @@ function addMessage(role, message) {
|
|
19 |
messageDiv.textContent = message;
|
20 |
elements.chatMessages.appendChild(messageDiv);
|
21 |
elements.chatMessages.scrollTop = elements.chatMessages.scrollHeight;
|
22 |
-
console.log(
|
23 |
}
|
24 |
|
25 |
function sendMessage() {
|
@@ -45,14 +44,14 @@ function handleResponse(userInput) {
|
|
45 |
let options = [];
|
46 |
|
47 |
if (conversation.length === 2) { // After name input
|
48 |
-
botResponse =
|
49 |
options = [
|
50 |
{ text: 'Vegetarian', class: 'green' },
|
51 |
{ text: 'Non-Vegetarian', class: 'red' },
|
52 |
{ text: 'Both', class: 'gray' }
|
53 |
];
|
54 |
} else if (lastMessage.includes('vegetarian') || lastMessage.includes('non-vegetarian') || lastMessage.includes('both')) {
|
55 |
-
botResponse =
|
56 |
fetchIngredients(lastMessage);
|
57 |
return;
|
58 |
}
|
@@ -74,17 +73,17 @@ function fetchIngredients(dietaryPreference) {
|
|
74 |
.then(response => response.json())
|
75 |
.then(data => {
|
76 |
if (data.error) {
|
77 |
-
addMessage('bot',
|
78 |
} else {
|
79 |
const ingredients = data.ingredients || [];
|
80 |
addMessage('bot', 'Great choice! These are available ingredients:');
|
81 |
displayIngredientsList(ingredients);
|
82 |
displaySelectedIngredients();
|
83 |
-
console.log(
|
84 |
}
|
85 |
})
|
86 |
.catch(error => {
|
87 |
-
addMessage('bot',
|
88 |
});
|
89 |
}
|
90 |
|
@@ -157,12 +156,20 @@ function displaySelectedIngredients() {
|
|
157 |
nameSpan.textContent = ingredient.name;
|
158 |
nameSpan.style.flex = '1';
|
159 |
const removeButton = document.createElement('button');
|
160 |
-
removeButton.innerHTML = '
|
161 |
-
removeButton.className = 'remove-button';
|
162 |
removeButton.onclick = () => {
|
163 |
selectedIngredients = selectedIngredients.filter(item => item.name !== ingredient.name);
|
164 |
displaySelectedIngredients();
|
165 |
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
166 |
div.appendChild(nameSpan);
|
167 |
div.appendChild(removeButton);
|
168 |
selectedArea.appendChild(div);
|
@@ -186,7 +193,7 @@ function displayOptions(options) {
|
|
186 |
options.forEach(opt => {
|
187 |
const button = document.createElement('button');
|
188 |
button.textContent = opt.text;
|
189 |
-
button.className =
|
190 |
button.onclick = () => {
|
191 |
addMessage('user', opt.text);
|
192 |
conversation.push({ role: 'user', message: opt.text });
|
@@ -200,7 +207,7 @@ function displayOptions(options) {
|
|
200 |
backButton.className = 'option-button';
|
201 |
backButton.onclick = () => {
|
202 |
const userName = conversation.length > 1 ? conversation[1].message : 'User';
|
203 |
-
conversation = [{ role: 'bot', message:
|
204 |
selectedIngredients = [];
|
205 |
elements.chatMessages.innerHTML = '';
|
206 |
conversation.forEach(msg => addMessage(msg.role, msg.message));
|
@@ -220,17 +227,12 @@ function sendSelectedIngredients() {
|
|
220 |
return;
|
221 |
}
|
222 |
const ingredientsList = selectedIngredients.map(ing => ing.name).join(', ');
|
223 |
-
addMessage('user',
|
224 |
-
addMessage('bot',
|
225 |
selectedIngredients = []; // Reset after sending
|
226 |
displaySelectedIngredients(); // Update the display
|
227 |
}
|
228 |
|
229 |
-
// Add click event listener for the Send button in chat input
|
230 |
-
if (elements.sendButton) {
|
231 |
-
elements.sendButton.addEventListener('click', sendMessage);
|
232 |
-
}
|
233 |
-
|
234 |
document.getElementById('userInput').addEventListener('keypress', function(e) {
|
235 |
if (e.key === 'Enter') {
|
236 |
sendMessage();
|
|
|
5 |
|
6 |
const elements = {
|
7 |
chatMessages: document.getElementById('chatMessages'),
|
8 |
+
userInput: document.getElementById('userInput')
|
|
|
9 |
};
|
10 |
|
11 |
function addMessage(role, message) {
|
|
|
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 |
|
|
|
156 |
nameSpan.textContent = ingredient.name;
|
157 |
nameSpan.style.flex = '1';
|
158 |
const removeButton = document.createElement('button');
|
159 |
+
removeButton.innerHTML = '✖'; // Unicode for "X" symbol
|
|
|
160 |
removeButton.onclick = () => {
|
161 |
selectedIngredients = selectedIngredients.filter(item => item.name !== ingredient.name);
|
162 |
displaySelectedIngredients();
|
163 |
};
|
164 |
+
removeButton.style.marginLeft = '10px';
|
165 |
+
removeButton.style.padding = '2px 8px';
|
166 |
+
removeButton.style.backgroundColor = '#000000'; // Black background to match image
|
167 |
+
removeButton.style.color = 'white'; // White "X" to match image
|
168 |
+
removeButton.style.border = 'none';
|
169 |
+
removeButton.style.borderRadius = '5px';
|
170 |
+
removeButton.style.cursor = 'pointer';
|
171 |
+
removeButton.style.fontSize = '16px'; // Adjust size for visibility
|
172 |
+
removeButton.style.lineHeight = '1'; // Ensure "X" is centered
|
173 |
div.appendChild(nameSpan);
|
174 |
div.appendChild(removeButton);
|
175 |
selectedArea.appendChild(div);
|
|
|
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 |
}
|
235 |
|
|
|
|
|
|
|
|
|
|
|
236 |
document.getElementById('userInput').addEventListener('keypress', function(e) {
|
237 |
if (e.key === 'Enter') {
|
238 |
sendMessage();
|