Spaces:
Sleeping
Sleeping
File size: 2,221 Bytes
710dc3d 3b46c4c 710dc3d 3b46c4c 9dae632 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
document.getElementById('submit').addEventListener('click', async function () {
const input = document.getElementById('input').value.trim();
if (!input) return;
// Display user input
displayMessage(input, true);
// Clear input
document.getElementById('input').value = '';
// Fetch recipes based on input
const response = await fetch('/get_recipes', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ input })
});
const recipes = await response.json();
// Display bot response
const botMessage = recipes.length
? "✨ Here are some recipes you might love based on your ingredients:"
: "I couldn't find any recipes with those exact ingredients. Try some alternatives!";
displayMessage(botMessage, false);
// Display recipes
recipes.forEach(recipe => {
displayRecipeCard(recipe);
});
});
document.getElementById('clear').addEventListener('click', function () {
document.getElementById('messages').innerHTML = ''; // Clear the results
document.getElementById('input').value = ''; // Clear the input field
});
function displayMessage(message, isUser) {
const messageContainer = document.createElement('div');
messageContainer.classList.add(isUser ? 'user-message' : 'bot-message');
messageContainer.textContent = message;
document.getElementById('messages').appendChild(messageContainer);
scrollToBottom();
}
function displayRecipeCard(recipe) {
const card = document.createElement('div');
card.classList.add('recipe-card');
card.innerHTML = `
<img src="${recipe.image}" alt="${recipe.name}">
<div class="details">
<h3>${recipe.name}</h3>
<p>${recipe.description}</p>
<p><strong>Ingredients:</strong> ${recipe.ingredients.join(', ')}</p>
<p><strong>Match Score:</strong> ${recipe.matchScore}%</p>
</div>
`;
document.getElementById('messages').appendChild(card);
scrollToBottom();
}
function scrollToBottom() {
const messages = document.getElementById('messages');
messages.scrollTop = messages.scrollHeight;
}
|