BiryaniHubflaskhema6

Sleeping

App Files Files Community

nagasurendra commited on Apr 21

Commit

ab9d22a

verified ·

1 Parent(s): a755aa6

Create customdish.html

Browse files

Files changed (1) hide show

templates/customdish.html +1031 -0

templates/customdish.html ADDED Viewed

	@@ -0,0 +1,1031 @@

+<!DOCTYPE html>
+<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">
+        <!-- Bot messages will appear here -->
+    </div>
+    <div class="chat-input">
+        <input type="text" id="userInput" placeholder="Type your message...">
+        <button onclick="sendMessage()">Send</button>
+    </div>
+</div>
+<script>
+    let currentStep = 'food_type';  // Starting directly at the food_type step
+    let userName = '';  // This will store the user's name after login
+    let conversation = [];
+    let selectedIngredients = [];
+    let selectedMenuItem = null;
+    let cart = [];
+    // Simulate the login and fetch the user's name
+    function loginUser() {
+        // Example: Fetch the user's name from session or login API (hardcoded for now)
+       userName = session['user_name']; // Replace with actual dynamic name fetching logic
+        // Start the conversation once the user is logged in
+        startConversation();
+    }
+    // Start the conversation directly
+    function startConversation() {
+        if (userName) {
+            addMessage('bot', `Nice to meet you, ${userName}! 😊 Let's create your perfect meal! What type of food would you prefer?`);
+            displayOptions([
+                { text: 'Vegetarian', class: 'green' },
+                { text: 'Non-Vegetarian', class: 'red' }
+            ]);
+        } else {
+            addMessage('bot', 'Hi! Please log in to continue.');
+        }
+    }
+    // Function to add messages to the chat container
+    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 to send user input
+    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();
+    }
+    // Handle the response based on the user input
+    function handleResponse(userInput) {
+        const lastMessage = userInput.toLowerCase();
+        let botResponse = '';
+        let options = [];
+        if (lastMessage.includes('non-vegetarian')) {
+            conversation.push({ role: 'user', message: 'Non-Vegetarian' });
+            console.log("Food preference selected: Non-Vegetarian");
+            botResponse = `Great choice, ${userName}! 🍽️ Please select a non-vegetarian option:`;
+            fetchIngredients('non-vegetarian');
+            return;
+        } else if (lastMessage.includes('vegetarian')) {
+            conversation.push({ role: 'user', message: 'Vegetarian' });
+            console.log("Food preference selected: Vegetarian");
+            botResponse = `Great choice, ${userName}! 🍽️ Here are some vegetarian ingredients:`;
+            fetchIngredients('vegetarian');
+            return;
+        } else if (lastMessage.includes('chicken') || lastMessage.includes('beef') || lastMessage.includes('lamb')) {
+            conversation.push({ role: 'user', message: lastMessage });
+            console.log(`Non-veg option selected: ${lastMessage}`);
+            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('non-vegetarian') && currentStep === 'food_type') {
+            // Handle non-vegetarian selection
+            conversation.push({ role: 'user', message: 'Non-Vegetarian' });
+            console.log("Food preference selected: Non-Vegetarian");
+            botResponse = `Great choice, ${userName}! 🍽️ Please select a non-vegetarian option:`;
+            fetchIngredients('non-vegetarian');
+            return;
+        } else if (lastMessage.includes('vegetarian') && currentStep === 'food_type') {
+            // Handle vegetarian selection
+            conversation.push({ role: 'user', message: 'Vegetarian' });
+            console.log("Food preference selected: Vegetarian");
+            botResponse = `Great choice, ${userName}! 🍽️ Here are some vegetarian ingredients:`;
+            fetchIngredients('vegetarian');
+            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';
+            return;
+        }
+        addMessage('bot', botResponse);
+        if (options.length > 0) {
+            displayOptions(options);
+        }
+        displayCart();
+    }
+        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:');
+                        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' }
+                    ];
+                    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;
+            }
+            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 });
+                    setTimeout(() => handleResponse(opt.text), 500);
+                };
+                chatMessages.appendChild(button);
+            });
+            chatMessages.appendChild(document.createElement('br'));
+            const backButton = document.createElement('button');
+            backButton.textContent = 'Go Back';
+            backButton.className = 'option-button';
+            backButton.onclick = () => {
+                conversation.pop();
+                selectedIngredients = [];
+                selectedMenuItem = null;
+                setTimeout(() => handleResponse(conversation[conversation.length - 1].message), 500);
+            };
+            chatMessages.appendChild(backButton);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+        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>