Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Chef Bot</title> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Arial, sans-serif; | |
| background-color: #f4f7fa; | |
| overflow-x: hidden; | |
| line-height: 1.5; | |
| } | |
| .chat-container { | |
| width: 100%; | |
| max-width: 800px; | |
| height: 100vh; | |
| margin: 0 auto; | |
| background-color: #ffffff; | |
| border-radius: 12px; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| .chat-header { | |
| background-color: #0078d4; | |
| color: #ffffff; | |
| padding: 12px; | |
| text-align: center; | |
| font-size: 18px; | |
| font-weight: 600; | |
| flex-shrink: 0; | |
| } | |
| .chat-messages { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 15px; | |
| scroll-behavior: smooth; | |
| } | |
| .bot-message, .user-message { | |
| padding: 10px 15px; | |
| margin: 8px 0; | |
| border-radius: 12px; | |
| max-width: 80%; | |
| font-size: 14px; | |
| line-height: 1.4; | |
| } | |
| .bot-message { | |
| background-color: #e8f0fe; | |
| color: #333; | |
| } | |
| .user-message { | |
| background-color: #0078d4; | |
| color: #ffffff; | |
| margin-left: auto; | |
| } | |
| .chat-input { | |
| display: flex; | |
| padding: 10px; | |
| border-top: 1px solid #e0e0e0; | |
| background-color: #f9f9f9; | |
| flex-shrink: 0; | |
| } | |
| .chat-input input { | |
| flex: 1; | |
| padding: 10px; | |
| border: 1px solid #ccc; | |
| border-radius: 8px; | |
| font-size: 14px; | |
| outline: none; | |
| } | |
| .chat-input button { | |
| padding: 10px 20px; | |
| margin-left: 10px; | |
| background-color: #0078d4; | |
| color: #ffffff; | |
| border: none; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| font-size: 14px; | |
| transition: background-color 0.2s; | |
| } | |
| .chat-input button:hover { | |
| background-color: #005ea2; | |
| } | |
| .ingredients-list, .menu-items-list, .customization-ingredients-list { | |
| display: flex; | |
| flex-wrap: nowrap; | |
| overflow-x: auto; | |
| padding: 10px; | |
| margin: 10px 0; | |
| background-color: #f5f7fa; | |
| border-radius: 10px; | |
| gap: 15px; | |
| scroll-behavior: smooth; | |
| } | |
| .ingredient-item, .menu-item { | |
| flex: 0 0 200px; | |
| background-color: #ffffff; | |
| border: 1px solid #e0e0e0; | |
| border-radius: 10px; | |
| padding: 10px; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); | |
| transition: transform 0.2s; | |
| text-align: center; | |
| } | |
| .ingredient-item:hover, .menu-item:hover { | |
| transform: translateY(-2px); | |
| } | |
| .ingredient-item img, .menu-item img { | |
| width: 100%; | |
| height: 120px; | |
| object-fit: cover; | |
| border-radius: 8px; | |
| margin-bottom: 8px; | |
| } | |
| .ingredient-item div, .menu-item div { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: #333; | |
| margin-bottom: 5px; | |
| } | |
| .ingredient-item button, .menu-item button { | |
| padding: 8px; | |
| background-color: #28a745; | |
| color: #ffffff; | |
| border: none; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| font-size: 12px; | |
| width: 100%; | |
| } | |
| .ingredient-item button:hover, .menu-item button:hover { | |
| background-color: #218838; | |
| } | |
| .selected-ingredients, .selected-customization-ingredients { | |
| background-color: #f1f8ff; | |
| padding: 15px; | |
| border: 1px solid #b3d7ff; | |
| border-radius: 10px; | |
| margin: 10px 0; | |
| font-size: 14px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| } | |
| .selected-ingredients div, .selected-customization-ingredients div { | |
| background-color: #d6e9ff; | |
| padding: 5px 10px; | |
| border-radius: 6px; | |
| font-size: 13px; | |
| } | |
| .customization-input { | |
| margin: 10px 0; | |
| } | |
| .customization-input textarea, .selected-customization-ingredients textarea { | |
| width: 100%; | |
| padding: 8px; | |
| border: 1px solid #b3d7ff; | |
| border-radius: 6px; | |
| font-size: 14px; | |
| outline: none; | |
| margin-bottom: 10px; | |
| } | |
| .customization-input button, .submit-button, .submit-customization-button, .submit-cart-button { | |
| padding: 10px 20px; | |
| background-color: #0078d4; | |
| color: #ffffff; | |
| border: none; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| font-size: 14px; | |
| transition: background-color 0.2s; | |
| } | |
| .customization-input button:hover, .submit-button:hover, .submit-customization-button:hover, .submit-cart-button:hover { | |
| background-color: #005ea2; | |
| } | |
| .option-button { | |
| padding: 10px 20px; | |
| color: #ffffff; | |
| border: none; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| font-size: 14px; | |
| margin: 5px; | |
| transition: background-color 0.2s; | |
| } | |
| .option-button.green { | |
| background-color: #28a745; | |
| } | |
| .option-button.green:hover { | |
| background-color: #218838; | |
| } | |
| .option-button.red { | |
| background-color: #dc3545; | |
| } | |
| .option-button.red:hover { | |
| background-color: #c82333; | |
| } | |
| .cart-items { | |
| background-color: #f1f8ff; | |
| padding: 15px; | |
| border: 1px solid #b3d7ff; | |
| border-radius: 10px; | |
| margin: 10px 0; | |
| font-size: 14px; | |
| } | |
| .cart-item { | |
| display: flex; | |
| align-items: center; | |
| background-color: #d6e9ff; | |
| padding: 5px 10px; | |
| border-radius: 6px; | |
| font-size: 13px; | |
| margin: 5px 0; | |
| } | |
| .cart-item img { | |
| width: 30px; | |
| height: 30px; | |
| object-fit: cover; | |
| border-radius: 6px; | |
| margin-right: 8px; | |
| } | |
| .cart-item .remove-button { | |
| padding: 5px 10px; | |
| margin-left: 8px; | |
| background-color: #dc3545; | |
| color: #ffffff; | |
| border: none; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| font-size: 12px; | |
| } | |
| .cart-item .remove-button:hover { | |
| background-color: #c82333; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 480px) { | |
| .chat-container { | |
| border-radius: 0; | |
| box-shadow: none; | |
| } | |
| .chat-header { | |
| font-size: 16px; | |
| padding: 10px; | |
| } | |
| .chat-messages { | |
| padding: 10px; | |
| } | |
| .bot-message, .user-message { | |
| font-size: 13px; | |
| padding: 8px 12px; | |
| margin: 5px 0; | |
| } | |
| .chat-input input { | |
| font-size: 13px; | |
| padding: 8px; | |
| } | |
| .chat-input button { | |
| font-size: 13px; | |
| padding: 8px 15px; | |
| } | |
| .ingredients-list, .menu-items-list, .customization-ingredients-list { | |
| flex-direction: column; | |
| gap: 10px; | |
| padding: 8px; | |
| } | |
| .ingredient-item, .menu-item { | |
| flex: 0 0 auto; | |
| width: 100%; | |
| max-width: 250px; | |
| } | |
| .ingredient-item img, .menu-item img { | |
| height: 100px; | |
| } | |
| .ingredient-item div, .menu-item div { | |
| font-size: 13px; | |
| } | |
| .ingredient-item button, .menu-item button { | |
| font-size: 11px; | |
| padding: 6px; | |
| } | |
| .option-button { | |
| font-size: 13px; | |
| padding: 8px 15px; | |
| } | |
| .selected-ingredients, .selected-customization-ingredients, .cart-items { | |
| padding: 10px; | |
| gap: 8px; | |
| } | |
| .cart-item { | |
| font-size: 12px; | |
| padding: 4px 8px; | |
| } | |
| .cart-item img { | |
| width: 25px; | |
| height: 25px; | |
| } | |
| } | |
| @media (min-width: 481px) and (max-width: 768px) { | |
| .chat-container { | |
| max-width: 600px; | |
| } | |
| .chat-header { | |
| font-size: 17px; | |
| padding: 11px; | |
| } | |
| .chat-messages { | |
| padding: 12px; | |
| } | |
| .ingredient-item, .menu-item { | |
| flex: 0 0 180px; | |
| } | |
| .ingredient-item img, .menu-item img { | |
| height: 110px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="chat-container"> | |
| <div class="chat-header">🍳 Chef Bot</div> | |
| <div class="chat-messages" id="chatMessages"> | |
| <div class="bot-message">Hi there! I'm Chef Bot! May I know your name?</div> | |
| </div> | |
| <div class="chat-input"> | |
| <input type="text" id="userInput" placeholder="Type your name or message..."> | |
| <button onclick="sendMessage()">Send</button> | |
| </div> | |
| </div> | |
| <script> | |
| let currentStep = 'greeting'; // other possible values: 'food_type', 'select_ingredients', 'menu_display', 'customization', 'post_cart' | |
| let conversation = [ | |
| { role: 'bot', message: "Hi there! I'm Chef Bot! May I know your name?" } | |
| ]; | |
| let selectedIngredients = []; | |
| let selectedMenuItem = null; | |
| let cart = []; | |
| function addMessage(role, message) { | |
| const chatMessages = document.getElementById('chatMessages'); | |
| if (!chatMessages) { | |
| console.error('Chat messages container not found!'); | |
| return; | |
| } | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = role === 'bot' ? 'bot-message' : 'user-message'; | |
| messageDiv.textContent = message; | |
| chatMessages.appendChild(messageDiv); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| console.log(`Added ${role} message: ${message}`); | |
| } | |
| function sendMessage() { | |
| const userInput = document.getElementById('userInput'); | |
| if (!userInput) { | |
| console.error('User input field not found!'); | |
| return; | |
| } | |
| const message = userInput.value.trim(); | |
| if (message) { | |
| addMessage('user', message); | |
| conversation.push({ role: 'user', message: message }); | |
| userInput.value = ''; | |
| setTimeout(() => handleResponse(message), 500); | |
| } else { | |
| console.warn('Empty message!'); | |
| } | |
| displayCart(); | |
| } | |
| function handleResponse(userInput) { | |
| const lastMessage = conversation[conversation.length - 1].message.toLowerCase(); | |
| let botResponse = ''; | |
| let options = []; | |
| // Check for previous states and handle accordingly | |
| if (conversation.length === 2) { // After name input | |
| currentStep = 'food_type'; | |
| botResponse = `Nice to meet you, ${userInput}! 😊 Let's create your perfect meal! What type of food would you prefer?`; | |
| options = [ | |
| { text: 'Vegetarian', class: 'green' }, | |
| { text: 'Non-Vegetarian', class: 'red' } | |
| ]; | |
| } else if (lastMessage.includes('non-vegetarian')) { | |
| console.log('User selected non-vegetarian option.'); | |
| currentStep = 'select_ingredients'; | |
| botResponse = 'Great choice! 🍽️ Please select a non-vegetarian option:'; | |
| fetchIngredients('non-vegetarian'); | |
| return; | |
| } else if (lastMessage.includes('vegetarian')) { | |
| console.log('User selected vegetarian option.'); | |
| currentStep = 'select_ingredients'; | |
| botResponse = 'Great choice! 🍽️ Here are some vegetarian ingredients:'; | |
| fetchIngredients('vegetarian'); | |
| return; | |
| } else if (lastMessage.includes('chicken') || lastMessage.includes('beef') || lastMessage.includes('lamb')) { | |
| currentStep = 'select_ingredients'; | |
| botResponse = `Great! Here are some ${lastMessage} ingredients available:`; | |
| fetchIngredients(lastMessage.toLowerCase()); | |
| return; | |
| } else if (lastMessage.includes('yes') && selectedMenuItem) { | |
| botResponse = 'Here are some ingredients to customize your dish:'; | |
| handleYesResponse(); | |
| return; | |
| } else if (lastMessage.includes('no') && selectedMenuItem) { | |
| // Submit the dish without customization | |
| submitCustomizationIngredients(); | |
| return; | |
| } else if (lastMessage.includes('yes') && currentStep === 'post_cart') { | |
| // After user says 'yes', ask again for food preference (veg or non-veg) | |
| botResponse = `Let's get started again! What type of food would you prefer this time?`; | |
| options = [ | |
| { text: 'Vegetarian', class: 'green' }, | |
| { text: 'Non-Vegetarian', class: 'red' } | |
| ]; | |
| currentStep = 'food_type'; | |
| addMessage('bot', botResponse); | |
| displayOptions(options); | |
| return; | |
| } else if (lastMessage.includes('no') && currentStep === 'post_cart') { | |
| addMessage('bot', 'Awesome! 🧾 Here’s your final cart:'); | |
| displayCart(); // Optional: show final cart again | |
| addMessage('bot', 'Thank you for your order! 👨🍳🍲'); | |
| currentStep = 'end'; // Step after cart | |
| return; | |
| } else if (currentStep === 'customization') { | |
| currentStep = 'menu_display'; // Reverting to menu display after customization | |
| console.log('Step changed to menu_display.'); | |
| fetchMenuItems({ ingredient_names: ingredientNames }); | |
| return; | |
| } | |
| addMessage('bot', botResponse); | |
| if (options.length > 0) { | |
| displayOptions(options); | |
| } | |
| displayCart(); | |
| } | |
| function resetToPreviousStep() { | |
| console.log('Resetting to previous step. Current step:', currentStep); | |
| // Based on the currentStep, go back to the previous step | |
| if (currentStep === 'food_type') { | |
| currentStep = 'greeting'; | |
| conversation.push({ role: 'bot', message: "Hi there! I'm Chef Bot! May I know your name?" }); | |
| console.log('Step changed to greeting. Conversation updated.'); | |
| } else if (currentStep === 'select_ingredients') { | |
| currentStep = 'food_type'; | |
| conversation.push({ role: 'bot', message: 'What type of food would you prefer?' }); | |
| console.log('Step changed to food_type. Conversation updated.'); | |
| } else if (currentStep === 'customization') { | |
| currentStep = 'menu_display'; | |
| console.log('Step changed to menu_display.'); | |
| //fetchMenuItems({ ingredient_names: ingredientNames }); | |
| } else if (currentStep === 'post_cart') { | |
| currentStep = 'food_type'; | |
| conversation.push({ role: 'bot', message: 'What type of food would you prefer?' }); | |
| console.log('Step changed to food_type after post_cart. Conversation updated.'); | |
| } else { | |
| console.error('Unexpected currentStep value:', currentStep); | |
| } | |
| // Ensure the bot message is updated according to the previous step | |
| setTimeout(() => handleResponse(conversation[conversation.length - 1].message), 500); | |
| } | |
| function handleYesResponse() { | |
| if (!selectedMenuItem) { | |
| addMessage('bot', 'No dish selected. Please choose a dish first.'); | |
| return; | |
| } | |
| const botResponse = `Here is your selected dish: ${selectedMenuItem.name}`; | |
| addMessage('bot', botResponse); | |
| // Display selected menu item | |
| const chatMessages = document.getElementById('chatMessages'); | |
| const menuItemDiv = document.createElement('div'); | |
| menuItemDiv.className = 'menu-item'; | |
| const img = document.createElement('img'); | |
| img.src = selectedMenuItem.image_url || 'https://via.placeholder.com/120'; | |
| img.alt = selectedMenuItem.name; | |
| const name = document.createElement('div'); | |
| name.textContent = selectedMenuItem.name; | |
| menuItemDiv.appendChild(img); | |
| menuItemDiv.appendChild(name); | |
| chatMessages.appendChild(menuItemDiv); | |
| // Fetch ingredients for customization | |
| fetchIngredientsForCustomization('both'); | |
| } | |
| function fetchIngredientsForCustomization(foodPreference) { | |
| fetch('/get_ingredients', { // Reuse existing endpoint | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ dietary_preference: foodPreference }) | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.error) { | |
| addMessage('bot', `Sorry, there was an error fetching ingredients: ${data.error}`); | |
| } else { | |
| const ingredients = data.ingredients || []; | |
| addMessage('bot', 'Please select ingredients to customize:'); | |
| displayCustomizationIngredients(ingredients); | |
| } | |
| }) | |
| .catch(error => { | |
| addMessage('bot', `Error: Unable to connect to the ingredient database. ${error.message}`); | |
| }); | |
| } | |
| function displayCustomizationIngredients(ingredients) { | |
| const chatMessages = document.getElementById('chatMessages'); | |
| if (!chatMessages) { | |
| console.error('Chat messages container not found for customization ingredients!'); | |
| return; | |
| } | |
| let ingredientsList = document.querySelector('.customization-ingredients-list'); | |
| if (!ingredientsList) { | |
| ingredientsList = document.createElement('div'); | |
| ingredientsList.className = 'customization-ingredients-list'; | |
| chatMessages.appendChild(ingredientsList); | |
| } else { | |
| ingredientsList.innerHTML = ''; | |
| } | |
| ingredients.forEach(ingredient => { | |
| const item = document.createElement('div'); | |
| item.className = 'ingredient-item'; | |
| const img = document.createElement('img'); | |
| img.src = ingredient.image_url || 'https://via.placeholder.com/120'; | |
| img.alt = ingredient.name; | |
| const name = document.createElement('div'); | |
| name.textContent = ingredient.name; | |
| const button = document.createElement('button'); | |
| button.textContent = 'Add'; | |
| button.onclick = () => { | |
| if (!selectedIngredients.some(item => item.name === ingredient.name)) { | |
| selectedIngredients.push({ name: ingredient.name, image_url: ingredient.image_url }); | |
| displaySelectedCustomizationIngredients(); | |
| } | |
| }; | |
| item.appendChild(img); | |
| item.appendChild(name); | |
| item.appendChild(button); | |
| ingredientsList.appendChild(item); | |
| }); | |
| displaySelectedCustomizationIngredients(); | |
| } | |
| function displaySelectedCustomizationIngredients() { | |
| const chatMessages = document.getElementById('chatMessages'); | |
| if (!chatMessages) { | |
| console.error('Chat messages container not found for selected customization ingredients!'); | |
| return; | |
| } | |
| let selectedArea = document.querySelector('.selected-customization-ingredients'); | |
| if (!selectedArea) { | |
| selectedArea = document.createElement('div'); | |
| selectedArea.className = 'selected-customization-ingredients'; | |
| chatMessages.appendChild(selectedArea); | |
| } else { | |
| selectedArea.innerHTML = ''; | |
| } | |
| const selectedIngredientsText = selectedIngredients.length > 0 | |
| ? `${selectedMenuItem.name} with ${selectedIngredients.map(ingredient => ingredient.name).join(', ')}` | |
| : selectedMenuItem.name; | |
| const ingredientsDiv = document.createElement('div'); | |
| ingredientsDiv.textContent = selectedIngredientsText; | |
| selectedArea.appendChild(ingredientsDiv); | |
| selectedIngredients.forEach(ingredient => { | |
| const div = document.createElement('div'); | |
| div.textContent = ingredient.name; | |
| const removeButton = document.createElement('button'); | |
| removeButton.textContent = 'X'; | |
| removeButton.style.marginLeft = '5px'; | |
| removeButton.style.padding = '2px 5px'; | |
| removeButton.style.backgroundColor = '#dc3545'; | |
| removeButton.style.color = '#ffffff'; | |
| removeButton.style.border = 'none'; | |
| removeButton.style.borderRadius = '4px'; | |
| removeButton.style.cursor = 'pointer'; | |
| removeButton.onclick = () => { | |
| selectedIngredients = selectedIngredients.filter(item => item.name !== ingredient.name); | |
| displaySelectedCustomizationIngredients(); | |
| }; | |
| div.appendChild(removeButton); | |
| selectedArea.appendChild(div); | |
| }); | |
| if (!document.querySelector('.submit-customization-button')) { | |
| const textarea = document.createElement('textarea'); | |
| textarea.placeholder = 'Enter any special instructions...'; | |
| selectedArea.appendChild(textarea); | |
| const submitButton = document.createElement('button'); | |
| submitButton.className = 'submit-customization-button'; | |
| submitButton.textContent = 'Submit Customization'; | |
| submitButton.onclick = submitCustomizationIngredients; | |
| selectedArea.appendChild(submitButton); | |
| } | |
| } | |
| function submitCustomizationIngredients() { | |
| if (!selectedMenuItem) { | |
| addMessage('bot', 'No dish selected. Please choose a dish first.'); | |
| return; | |
| } | |
| const textarea = document.querySelector('.selected-customization-ingredients textarea'); | |
| const instructions = textarea ? textarea.value.trim() : ''; | |
| fetch('/submit_customization_ingredients', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ | |
| menu_item: selectedMenuItem, | |
| ingredients: selectedIngredients, | |
| instructions: instructions | |
| }) | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.success) { | |
| addToCart({ ...selectedMenuItem, instructions, ingredients: selectedIngredients }); | |
| currentStep = 'post_cart'; | |
| addMessage('bot', 'Customization submitted successfully! Item added to cart. Would you like to order more?'); | |
| const options = [ | |
| { text: 'Yes', class: 'green' }, | |
| { text: 'No', class: 'red' } | |
| ]; | |
| displayOptions(options); | |
| selectedMenuItem = null; | |
| selectedIngredients = []; | |
| displayCart(); | |
| } else { | |
| addMessage('bot', `Error: ${data.error}`); | |
| } | |
| }) | |
| .catch(error => { | |
| addMessage('bot', `Error submitting customization: ${error.message}`); | |
| }); | |
| } | |
| function fetchIngredients(foodPreference) { | |
| fetch('/get_ingredients', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ dietary_preference: foodPreference }) | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.error) { | |
| addMessage('bot', `Sorry, there was an error fetching ingredients: ${data.error}`); | |
| } else { | |
| const ingredients = data.ingredients || []; | |
| addMessage('bot', 'Please select ingredients:'); | |
| displayIngredientsList(ingredients); | |
| displaySelectedIngredients(); | |
| } | |
| }) | |
| .catch(error => { | |
| addMessage('bot', `Error: Unable to connect to the ingredient database. ${error.message}`); | |
| }); | |
| } | |
| function fetchMenuItems(params) { | |
| fetch('/get_menu_items', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify(params) | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.error) { | |
| addMessage('bot', `Sorry, there was an error fetching menu items: ${data.error}`); | |
| } else { | |
| const menuItems = data.menu_items || []; | |
| addMessage('bot', 'Here are some dishes based on your selection:'); | |
| currentStep = 'menu_display'; | |
| displayMenuItems(menuItems); | |
| } | |
| }) | |
| .catch(error => { | |
| addMessage('bot', `Error: Unable to connect to the menu database. ${error.message}`); | |
| }); | |
| } | |
| function displayIngredientsList(ingredients) { | |
| const chatMessages = document.getElementById('chatMessages'); | |
| if (!chatMessages) { | |
| console.error('Chat messages container not found for ingredients!'); | |
| return; | |
| } | |
| let ingredientsList = document.querySelector('.ingredients-list'); | |
| if (!ingredientsList) { | |
| ingredientsList = document.createElement('div'); | |
| ingredientsList.className = 'ingredients-list'; | |
| chatMessages.appendChild(ingredientsList); | |
| } else { | |
| ingredientsList.innerHTML = ''; | |
| } | |
| ingredients.forEach(ingredient => { | |
| const item = document.createElement('div'); | |
| item.className = 'ingredient-item'; | |
| const img = document.createElement('img'); | |
| img.src = ingredient.image_url || 'https://via.placeholder.com/120'; | |
| img.alt = ingredient.name; | |
| const name = document.createElement('div'); | |
| name.textContent = ingredient.name; | |
| const button = document.createElement('button'); | |
| button.textContent = 'Add'; | |
| button.onclick = () => { | |
| if (!selectedIngredients.some(item => item.name === ingredient.name)) { | |
| selectedIngredients.push(ingredient); | |
| displaySelectedIngredients(); | |
| } | |
| }; | |
| item.appendChild(img); | |
| item.appendChild(name); | |
| item.appendChild(button); | |
| ingredientsList.appendChild(item); | |
| }); | |
| } | |
| function displayMenuItems(menuItems) { | |
| const chatMessages = document.getElementById('chatMessages'); | |
| if (!chatMessages) { | |
| console.error('Chat messages container not found for menu items!'); | |
| return; | |
| } | |
| let menuItemsList = document.querySelector('.menu-items-list'); | |
| if (!menuItemsList) { | |
| menuItemsList = document.createElement('div'); | |
| menuItemsList.className = 'menu-items-list'; | |
| chatMessages.appendChild(menuItemsList); | |
| } else { | |
| menuItemsList.innerHTML = ''; | |
| } | |
| menuItems.forEach(item => { | |
| const menuItem = document.createElement('div'); | |
| menuItem.className = 'menu-item'; | |
| const img = document.createElement('img'); | |
| img.src = item.image_url || 'https://via.placeholder.com/120'; | |
| img.alt = item.name; | |
| const name = document.createElement('div'); | |
| name.textContent = item.name; | |
| const button = document.createElement('button'); | |
| button.textContent = 'Add to Cart'; | |
| button.onclick = () => { | |
| selectedMenuItem = item; | |
| addMessage('bot', `World-class selection! Would you like to customize your dish further?`); | |
| const options = [ | |
| { text: 'Yes', class: 'green' }, | |
| { text: 'No', class: 'red' } | |
| ]; | |
| currentStep = 'customization'; | |
| displayOptions(options); | |
| }; | |
| menuItem.appendChild(img); | |
| menuItem.appendChild(name); | |
| menuItem.appendChild(button); | |
| menuItemsList.appendChild(menuItem); | |
| }); | |
| } | |
| function displaySelectedIngredients() { | |
| const chatMessages = document.getElementById('chatMessages'); | |
| if (!chatMessages) { | |
| console.error('Chat messages container not found for selected ingredients!'); | |
| return; | |
| } | |
| let selectedArea = document.querySelector('.selected-ingredients'); | |
| if (!selectedArea) { | |
| selectedArea = document.createElement('div'); | |
| selectedArea.className = 'selected-ingredients'; | |
| chatMessages.appendChild(selectedArea); | |
| } else { | |
| selectedArea.innerHTML = ''; | |
| } | |
| selectedIngredients.forEach(ingredient => { | |
| const div = document.createElement('div'); | |
| div.textContent = ingredient.name; | |
| const removeButton = document.createElement('button'); | |
| removeButton.textContent = 'X'; | |
| removeButton.style.marginLeft = '5px'; | |
| removeButton.style.padding = '2px 5px'; | |
| removeButton.style.backgroundColor = '#dc3545'; | |
| removeButton.style.color = '#ffffff'; | |
| removeButton.style.border = 'none'; | |
| removeButton.style.borderRadius = '4px'; | |
| removeButton.style.cursor = 'pointer'; | |
| removeButton.onclick = () => { | |
| selectedIngredients = selectedIngredients.filter(item => item.name !== ingredient.name); | |
| displaySelectedIngredients(); | |
| }; | |
| div.appendChild(removeButton); | |
| selectedArea.appendChild(div); | |
| }); | |
| if (selectedIngredients.length > 0) { | |
| let submitButton = document.querySelector('.submit-button'); | |
| if (!submitButton) { | |
| submitButton = document.createElement('button'); | |
| submitButton.className = 'submit-button'; | |
| submitButton.textContent = 'Submit Ingredients'; | |
| submitButton.onclick = submitIngredients; | |
| chatMessages.appendChild(submitButton); | |
| } | |
| } | |
| } | |
| function submitIngredients() { | |
| if (selectedIngredients.length === 0) { | |
| addMessage('bot', 'No ingredients selected. Please choose some ingredients.'); | |
| return; | |
| } | |
| const ingredientNames = selectedIngredients.map(ingredient => ingredient.name.toLowerCase()).join(' '); | |
| fetchMenuItems({ ingredient_names: ingredientNames }); | |
| } | |
| function addToCart(item) { | |
| cart.push(item); | |
| console.log('Cart:', cart); | |
| displayCart(); | |
| } | |
| function displayCart() { | |
| const chatMessages = document.getElementById('chatMessages'); | |
| if (!chatMessages) { | |
| console.error('Chat messages container not found for cart!'); | |
| return; | |
| } | |
| let cartArea = document.querySelector('.cart-items'); | |
| if (!cartArea) { | |
| cartArea = document.createElement('div'); | |
| cartArea.className = 'cart-items'; | |
| chatMessages.appendChild(cartArea); | |
| } else { | |
| cartArea.innerHTML = ''; | |
| } | |
| if (cart.length > 0) { | |
| const label = document.createElement('div'); | |
| label.textContent = 'Cart:'; | |
| cartArea.appendChild(label); | |
| cart.forEach((item, index) => { | |
| const itemDiv = document.createElement('div'); | |
| itemDiv.className = 'cart-item'; | |
| const img = document.createElement('img'); | |
| img.src = item.image_url || 'https://via.placeholder.com/30'; | |
| img.alt = item.name; | |
| const name = document.createElement('div'); | |
| const text = item.instructions | |
| ? `${item.name} (${item.instructions})` | |
| : item.name; | |
| name.textContent = item.ingredients.length > 0 | |
| ? `${text} with ${item.ingredients.map(i => i.name).join(', ')}` | |
| : text; | |
| const removeButton = document.createElement('button'); | |
| removeButton.className = 'remove-button'; | |
| removeButton.textContent = 'X'; | |
| removeButton.onclick = () => { | |
| cart.splice(index, 1); | |
| displayCart(); | |
| }; | |
| itemDiv.appendChild(img); | |
| itemDiv.appendChild(name); | |
| itemDiv.appendChild(removeButton); | |
| cartArea.appendChild(itemDiv); | |
| }); | |
| let submitCartButton = document.querySelector('.submit-cart-button'); | |
| if (!submitCartButton) { | |
| submitCartButton = document.createElement('button'); | |
| submitCartButton.className = 'submit-cart-button'; | |
| submitCartButton.textContent = 'Submit Cart'; | |
| submitCartButton.onclick = submitCart; | |
| cartArea.appendChild(submitCartButton); | |
| } | |
| } | |
| } | |
| function submitCart() { | |
| if (cart.length === 0) { | |
| addMessage('bot', 'Your cart is empty!'); | |
| return; | |
| } | |
| fetch('/submit_customization_ingredients', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ items: cart }) | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.success) { | |
| addMessage('bot', 'Cart submitted successfully!'); | |
| cart = []; | |
| displayCart(); | |
| } else { | |
| addMessage('bot', `Error submitting cart: ${data.error}`); | |
| } | |
| }) | |
| .catch(error => { | |
| addMessage('bot', `Error submitting cart: ${error.message}`); | |
| }); | |
| } | |
| function displayOptions(options) { | |
| const chatMessages = document.getElementById('chatMessages'); | |
| if (!chatMessages) { | |
| console.error('Chat messages container not found for options!'); | |
| return; | |
| } | |
| console.log('Displaying options:', options); | |
| options.forEach(opt => { | |
| const button = document.createElement('button'); | |
| button.textContent = opt.text; | |
| button.className = `option-button ${opt.class}`; | |
| button.onclick = () => { | |
| addMessage('user', opt.text); | |
| conversation.push({ role: 'user', message: opt.text }); | |
| console.log(`User selected option: ${opt.text}`); | |
| setTimeout(() => handleResponse(opt.text), 500); | |
| }; | |
| chatMessages.appendChild(button); | |
| }); | |
| chatMessages.appendChild(document.createElement('br')); | |
| // Back Button Logic | |
| const backButton = document.createElement('button'); | |
| backButton.textContent = 'Go Back'; | |
| backButton.className = 'option-button'; | |
| backButton.onclick = () => { | |
| console.log('Back button clicked'); | |
| // Remove last user message and reset currentStep | |
| conversation.pop(); | |
| console.log('Removed last user message, conversation length:', conversation.length); | |
| resetToPreviousStep(); | |
| }; | |
| chatMessages.appendChild(backButton); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| console.log('Back button added'); | |
| } | |
| document.getElementById('userInput').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| sendMessage(); | |
| } | |
| }); | |
| console.log('Script loaded successfully'); | |
| </script> | |
| <script src="{{ url_for('static', filename='script.js') }}"></script> | |
| </body> | |
| </html> |