Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>E. Emogen Borgz - Your AI Fashion Assist</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script> | |
| <style> | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .avatar-float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .message-animation { | |
| animation: fadeIn 0.3s ease-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .typing-indicator span { | |
| display: inline-block; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background-color: #888; | |
| margin: 0 2px; | |
| animation: bounce 1.4s infinite ease-in-out; | |
| } | |
| .typing-indicator span:nth-child(1) { animation-delay: 0s; } | |
| .typing-indicator span:nth-child(2) { animation-delay: 0.2s; } | |
| .typing-indicator span:nth-child(3) { animation-delay: 0.4s; } | |
| @keyframes bounce { | |
| 0%, 100% { transform: translateY(0); opacity: 0.5; } | |
| 50% { transform: translateY(-5px); opacity: 1; } | |
| } | |
| .video-avatar { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100vh; | |
| object-fit: cover; | |
| z-index: -1; | |
| filter: brightness(0.9); | |
| } | |
| .floating-btn-container { | |
| position: fixed; | |
| bottom: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| display: flex; | |
| gap: 15px; | |
| background: rgba(255,255,255,0.8); | |
| padding: 10px 20px; | |
| border-radius: 50px; | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| z-index: 20; | |
| } | |
| .floating-btn { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-size: 18px; | |
| } | |
| .floating-btn:hover { | |
| transform: scale(1.1); | |
| } | |
| .main-btn { | |
| width: 60px; | |
| height: 60px; | |
| font-size: 22px; | |
| } | |
| .chat-container { | |
| position: fixed; | |
| right: 20px; | |
| bottom: 100px; | |
| width: 350px; | |
| max-height: 60vh; | |
| z-index: 10; | |
| transition: all 0.3s ease; | |
| opacity: 1; | |
| visibility: visible; | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); | |
| } | |
| .chat-container.hidden { | |
| opacity: 0; | |
| visibility: hidden; | |
| transform: translateY(20px); | |
| } | |
| .fashion-tips-panel { | |
| position: fixed; | |
| right: 20px; | |
| bottom: 100px; | |
| width: 350px; | |
| max-height: 50vh; | |
| z-index: 10; | |
| transition: all 0.3s ease; | |
| display: none; | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); | |
| } | |
| .chat-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 15px; | |
| } | |
| @media (max-width: 768px) { | |
| .chat-container, .fashion-tips-panel { | |
| width: 90%; | |
| right: 50%; | |
| transform: translateX(50%); | |
| max-height: 50vh; | |
| } | |
| .floating-btn-container { | |
| width: 90%; | |
| justify-content: space-around; | |
| } | |
| } | |
| .neon-text { | |
| position: fixed; | |
| top: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| font-weight: 700; | |
| color: white; | |
| text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #ff00de, 0 0 20px #ff00de; | |
| text-align: center; | |
| z-index: 10; | |
| font-size: 2rem; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen overflow-hidden"> | |
| <!-- Full-screen video avatar --> | |
| <video id="avatar-video" class="video-avatar" autoplay loop muted playsinline> | |
| <source src="E.EmogenBorgz.mp4" type="video/mp4"> | |
| Your browser does not support the video tag. | |
| </video> | |
| <!-- Title --> | |
| <div class="neon-text"> | |
| E. Emogen Borgz | |
| </div> | |
| <!-- Floating action buttons --> | |
| <div class="floating-btn-container"> | |
| <div class="floating-btn bg-pink-600 text-white main-btn" id="chat-toggle-btn" title="Chat"> | |
| <i class="fas fa-comment-dots"></i> | |
| </div> | |
| <div class="floating-btn bg-pink-500 text-white" id="mic-btn" title="Voice input"> | |
| <i class="fas fa-microphone"></i> | |
| </div> | |
| <div class="floating-btn bg-pink-500 text-white" id="mute-btn" title="Toggle voice"> | |
| <i class="fas fa-volume-up"></i> | |
| </div> | |
| <div class="floating-btn bg-pink-500 text-white" id="fashion-tips-btn" title="Fashion tips"> | |
| <i class="fas fa-lightbulb"></i> | |
| </div> | |
| </div> | |
| <!-- Fashion tips panel --> | |
| <div class="fashion-tips-panel bg-white rounded-xl p-4 backdrop-blur-sm bg-opacity-80" id="fashion-tips-panel"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h2 class="text-lg font-semibold text-pink-600">Today's Fashion Tips</h2> | |
| <button id="close-tips-btn" class="text-pink-600 hover:text-pink-800"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="overflow-y-auto max-h-40"> | |
| <div id="fashion-tips-list"> | |
| <div class="bg-pink-50 rounded-lg p-3 mb-2"> | |
| <p class="text-sm">Monochromatic looks are trending! Try pairing different shades of the same color for a chic ensemble.</p> | |
| </div> | |
| <div class="bg-pink-50 rounded-lg p-3 mb-2"> | |
| <p class="text-sm">Layering is key for transitional weather - try a lightweight turtleneck under your summer dresses!</p> | |
| </div> | |
| <div class="bg-pink-50 rounded-lg p-3"> | |
| <p class="text-sm">Statement jewelry can elevate even the simplest outfit. Try chunky necklaces this season!</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat container --> | |
| <div class="chat-container bg-white rounded-xl p-4 backdrop-blur-sm bg-opacity-80" id="chat-container"> | |
| <div class="chat-header"> | |
| <h2 class="text-lg font-semibold text-pink-600">Chat with Lizzie</h2> | |
| <button id="close-chat-btn" class="text-pink-600 hover:text-pink-800"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="overflow-y-auto mb-4 h-64" id="chat-messages"> | |
| <div class="message message-animation flex mb-4"> | |
| <div class="mr-3"> | |
| <img src="https://huggingface.co/spaces/privateuserh/E-Emogen-Borgz-ai.jpg" class="w-8 h-8 rounded-full object-cover"> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="inline-block bg-pink-100 rounded-xl px-4 py-2"> | |
| <p class="text-sm">Hi fashionista! I'm E. Emogen Borgz, your personal AI style consultant. How can I help you look fab today? 💖</p> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Just now</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="typing-indicator" class="typing-indicator flex mb-4 hidden"> | |
| <div class="mr-3"> | |
| <img src="https://huggingface.co/spaces/privateuserh/E-Emogen-Borgz-ai.jpg" class="w-8 h-8 rounded-full object-cover"> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="inline-block bg-gray-100 rounded-xl px-4 py-2"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center border-t border-gray-200 pt-3"> | |
| <div class="flex-1 relative"> | |
| <input type="text" id="user-input" placeholder="Ask Engrid about new fashion trends, styling advice..." | |
| class="w-full border border-gray-300 rounded-full py-3 px-4 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent bg-white"> | |
| <button id="send-btn" class="absolute right-3 top-1/2 transform -translate-y-1/2 bg-pink-600 text-white p-2 rounded-full hover:bg-pink-700 transition-colors"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Speech recognition setup | |
| const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; | |
| let recognition; | |
| let isListening = false; | |
| let muteOutput = false; | |
| if (SpeechRecognition) { | |
| recognition = new SpeechRecognition(); | |
| recognition.continuous = false; | |
| recognition.interimResults = false; | |
| recognition.lang = 'en-US'; | |
| recognition.onstart = function() { | |
| isListening = true; | |
| document.getElementById('mic-btn').innerHTML = '<i class="fas fa-microphone-slash"></i>'; | |
| document.getElementById('mic-btn').classList.add('bg-red-400'); | |
| document.getElementById('mic-btn').classList.remove('bg-pink-500'); | |
| // Show listening indicator | |
| addMessage("", "listening", "Listening..."); | |
| }; | |
| recognition.onend = function() { | |
| isListening = false; | |
| document.getElementById('mic-btn').innerHTML = '<i class="fas fa-microphone"></i>'; | |
| document.getElementById('mic-btn').classList.remove('bg-red-400'); | |
| document.getElementById('mic-btn').classList.add('bg-pink-500'); | |
| }; | |
| recognition.onerror = function(event) { | |
| console.log('Speech recognition error', event.error); | |
| isListening = false; | |
| }; | |
| recognition.onresult = function(event) { | |
| const transcript = event.results[0][0].transcript; | |
| document.getElementById('user-input').value = transcript; | |
| sendMessage(); | |
| // Remove listening indicator | |
| const messages = document.querySelectorAll('.message'); | |
| if (messages.length > 0 && messages[messages.length - 1].querySelector('.bg-yellow-100')) { | |
| messages[messages.length - 1].remove(); | |
| } | |
| }; | |
| } else { | |
| document.getElementById('mic-btn').innerHTML = '<i class="fas fa-microphone-slash"></i>'; | |
| document.getElementById('mic-btn').classList.add('opacity-50', 'cursor-not-allowed'); | |
| document.getElementById('mic-btn').title = "Speech recognition not supported in your browser"; | |
| } | |
| // DOM elements | |
| const micBtn = document.getElementById('mic-btn'); | |
| const muteBtn = document.getElementById('mute-btn'); | |
| const fashionTipsBtn = document.getElementById('fashion-tips-btn'); | |
| const fashionTipsPanel = document.getElementById('fashion-tips-panel'); | |
| const closeTipsBtn = document.getElementById('close-tips-btn'); | |
| const sendBtn = document.getElementById('send-btn'); | |
| const userInput = document.getElementById('user-input'); | |
| const chatMessages = document.getElementById('chat-messages'); | |
| const typingIndicator = document.getElementById('typing-indicator'); | |
| const fashionTipsList = document.getElementById('fashion-tips-list'); | |
| const chatContainer = document.getElementById('chat-container'); | |
| const closeChatBtn = document.getElementById('close-chat-btn'); | |
| const chatToggleBtn = document.getElementById('chat-toggle-btn'); | |
| // Chat window state | |
| let chatVisible = false; | |
| let tipsVisible = false; | |
| // Event listeners | |
| micBtn.addEventListener('click', toggleSpeechRecognition); | |
| muteBtn.addEventListener('click', toggleSpeechOutput); | |
| fashionTipsBtn.addEventListener('click', toggleFashionTips); | |
| closeTipsBtn.addEventListener('click', toggleFashionTips); | |
| sendBtn.addEventListener('click', sendMessage); | |
| userInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') sendMessage(); | |
| }); | |
| closeChatBtn.addEventListener('click', toggleChat); | |
| chatToggleBtn.addEventListener('click', toggleChat); | |
| // Initialize with chat closed | |
| chatContainer.classList.add('hidden'); | |
| // Functions | |
| function toggleChat() { | |
| chatVisible = !chatVisible; | |
| if (tipsVisible) { | |
| toggleFashionTips(); | |
| } | |
| if (chatVisible) { | |
| chatContainer.classList.remove('hidden'); | |
| chatToggleBtn.classList.add('bg-pink-700'); | |
| } else { | |
| chatContainer.classList.add('hidden'); | |
| chatToggleBtn.classList.remove('bg-pink-700'); | |
| } | |
| } | |
| function toggleSpeechRecognition() { | |
| if (!SpeechRecognition) return; | |
| if (isListening) { | |
| recognition.stop(); | |
| } else { | |
| try { | |
| recognition.start(); | |
| } catch (e) { | |
| console.error('Speech recognition error:', e); | |
| } | |
| } | |
| } | |
| function toggleSpeechOutput() { | |
| muteOutput = !muteOutput; | |
| if (muteOutput) { | |
| muteBtn.innerHTML = '<i class="fas fa-volume-mute"></i>'; | |
| muteBtn.classList.add('bg-gray-400'); | |
| muteBtn.classList.remove('bg-pink-500'); | |
| } else { | |
| muteBtn.innerHTML = '<i class="fas fa-volume-up"></i>'; | |
| muteBtn.classList.remove('bg-gray-400'); | |
| muteBtn.classList.add('bg-pink-500'); | |
| } | |
| } | |
| function toggleFashionTips() { | |
| tipsVisible = !tipsVisible; | |
| if (chatVisible) { | |
| toggleChat(); | |
| } | |
| if (tipsVisible) { | |
| fashionTipsPanel.style.display = 'block'; | |
| updateFashionTips(); | |
| fashionTipsBtn.classList.add('bg-pink-700'); | |
| } else { | |
| fashionTipsPanel.style.display = 'none'; | |
| fashionTipsBtn.classList.remove('bg-pink-700'); | |
| } | |
| } | |
| function sendMessage() { | |
| const message = userInput.value.trim(); | |
| if (message === '') return; | |
| addMessage(message, "user"); | |
| userInput.value = ''; | |
| // Show typing indicator | |
| typingIndicator.classList.remove('hidden'); | |
| // Process the message after a small delay | |
| setTimeout(() => { | |
| processQuery(message); | |
| }, 1000); | |
| } | |
| function addMessage(text, sender, specialType = null) { | |
| const now = new Date(); | |
| const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `message message-animation flex mb-4`; | |
| if (sender === "user") { | |
| messageDiv.innerHTML = ` | |
| <div class="ml-auto max-w-xs"> | |
| <div class="inline-block bg-pink-500 text-white rounded-xl px-4 py-2"> | |
| <p class="text-sm">${text}</p> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1 text-right">${timeString}</p> | |
| </div> | |
| `; | |
| } else if (specialType === "listening") { | |
| messageDiv.innerHTML = ` | |
| <div class="mr-3"> | |
| <img src="https://huggingface.co/spaces/privateuserh/Lizzie-Lauren-ai.jpg" class="w-8 h-8 rounded-full object-cover"> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="inline-block bg-yellow-100 rounded-xl px-4 py-2"> | |
| <p class="text-sm">${text}</p> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">${timeString}</p> | |
| </div> | |
| `; | |
| } else { | |
| messageDiv.innerHTML = ` | |
| <div class="mr-3"> | |
| <img src="https://huggingface.co/spaces/privateuserh/Lizzie-Lauren-ai.jpg" class="w-8 h-8 rounded-full object-cover"> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="inline-block bg-pink-100 rounded-xl px-4 py-2"> | |
| <p class="text-sm" id="ai-message">${text}</p> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">${timeString}</p> | |
| </div> | |
| `; | |
| } | |
| chatMessages.appendChild(messageDiv); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| function processQuery(query) { | |
| // Hide typing indicator | |
| typingIndicator.classList.add('hidden'); | |
| // Generate fashion-focused response | |
| const response = generateFashionResponse(query.toLowerCase()); | |
| // Typewriter effect for the response | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `message message-animation flex mb-4`; | |
| messageDiv.innerHTML = ` | |
| <div class="mr-3"> | |
| <img src="https://huggingface.co/spaces/privateuserh/Lizzie-Lauren-ai.jpg" class="w-8 h-8 rounded-full object-cover"> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="inline-block bg-pink-100 rounded-xl px-4 py-2"> | |
| <p class="text-sm" id="ai-message"></p> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">${new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</p> | |
| </div> | |
| `; | |
| chatMessages.appendChild(messageDiv); | |
| const typewriter = new Typewriter(messageDiv.querySelector('#ai-message'), { | |
| loop: false, | |
| delay: 20, | |
| cursor: '' | |
| }); | |
| typewriter.typeString(response) | |
| .start() | |
| .callFunction(() => { | |
| if (!muteOutput) { | |
| // Trigger speech synthesis | |
| speakResponse(response); | |
| } | |
| // Update fashion tips | |
| updateFashionTips(); | |
| }); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| function speakResponse(text) { | |
| if ('speechSynthesis' in window) { | |
| const utterance = new SpeechSynthesisUtterance(text); | |
| utterance.voice = speechSynthesis.getVoices().find(voice => voice.name.includes('Fiona') || voice.lang.includes('US')); | |
| utterance.pitch = 1.2; | |
| utterance.rate = 1.1; | |
| speechSynthesis.speak(utterance); | |
| } | |
| } | |
| function updateFashionTips() { | |
| const fashionTips = [ | |
| "Layering is key for transitional weather - try a lightweight turtleneck under your summer dresses!", | |
| "Make statement jewelry elevate even the simplest outfit. Try chunky necklaces this season!", | |
| "Mixing textures like silk and denim for an interesting contrast in your outfits is a good look.", | |
| "Sustainable fashion alert: Look for OEKO-TEX certified fabrics for eco-friendly choices.", | |
| "You can Belt your oversized blazers at the waist for a more defined silhouette this season.", | |
| "Pastel colors are having a major moment this year - incorporate them through accessories first.", | |
| "Invest in quality basics that you can style multiple ways - they're the foundation of a great wardrobe.", | |
| "Monochrome looks are trending! Try pairing different shades of the same color for a chic ensemble.", | |
| "Accessorize with waist belts to define your silhouette when wearing loose or flowy outfits.", | |
| "Try the 3-piece rule: tops, bottoms and an extra layer (jacket, cardigan or blazer) for polished looks." | |
| ]; | |
| // Get 3 random tips | |
| const shuffledTips = fashionTips.sort(() => 0.5 - Math.random()).slice(0, 3); | |
| // Update the fashion tips panel | |
| let tipsHTML = ''; | |
| shuffledTips.forEach(tip => { | |
| tipsHTML += ` | |
| <div class="bg-pink-50 rounded-lg p-3 mb-2"> | |
| <p class="text-sm">${tip}</p> | |
| </div> | |
| `; | |
| }); | |
| fashionTipsList.innerHTML = tipsHTML; | |
| } | |
| function generateFashionResponse(query) { | |
| const responses = { | |
| "hello": "It's Engrid! ✨ Ready to explore the world of fashion together? What would you like to review today?", | |
| "hi": "Fashion lover! 💖 Engrid is really excited to help you with your style questions. What's on your mind?", | |
| "help": "Of course darling! I can help with: \n- Outfit suggestions for any occasion\n- Seasonal trend reports\n- Sustainable fashion choices\n- Wardrobe organization tips\n- Personal style analysis\nWhat would you like to know?", | |
| "summer outfits": "For summer, I'm loving breezy linen sets in pastel hues! 😍 Try pairing a baby blue linen shirt with matching shorts and espadrilles. Accessorize with raffia bags and oversized sunglasses for that chic beach-to-brunch look! Would you like some specific recommendations for your body type?", | |
| "mix & match": "Mixing patterns is such a fun way to express your personal style! 💫 Try combining stripes with florals - make sure one pattern is larger scale than the other. Or for a subtler approach, pair polka dots with animal print. The key is to keep the color palette cohesive - maybe choose one accent color present in both patterns?", | |
| "ethical brands": "I'm so happy you're asking about ethical fashion! 🌿 Some incredible brands changing the game:\n\n1. Reformation (sustainable fabrics and production)\n2. Patagonia (eco-conscious outdoor wear)\n3. Eileen Fisher (timeless sustainable pieces)\n4. Veja (ethical sneakers)\n5. ABLE (focuses on empowering women)\n\nWould you like recommendations for more specific categories?", | |
| "accessorize": "Accessories can make or break an outfit, darling! ✨ Here's what's trending now:\n- Chunky gold chains (layer 2-3 different lengths)\n- Oversized sunglasses (cat-eye shapes are especially hot)\n- Mini bags as statement pieces\n- Pearl details on everything\n- Leather hair accessories\n\nRemember, when in doubt, less is more - choose 1-2 statement pieces per outfit!", | |
| "trends": "The hottest trends this season are all about self-expression! 💃 Here's what's in:\n1. Y2K revival - think low-rise jeans and futuristic metallics\n2. Quiet luxury - minimalist, high-quality pieces\n3. Balletcore - soft pinks, wrap tops, and satin bows\n4. Boho remix - updated 70s vibes with modern silhouettes\n5. Utility wear - cargo pants and vests with a feminine twist\nWhich trend speaks to your personal style?", | |
| "color": "Color theory is my absolute passion! 🎨 Let me share some insights:\n\n1. Neutrals: Always chic, try mixing warm (camel, cream) and cool (gray, white) tones\n2. Bold colors: Red is making a huge comeback - try it in unexpected items like trousers\n3. Pastels: Perfect for soft summer looks, especially lavender and mint\n4. Earth tones: Always flattering and easy to mix\n\nWould you like help finding your perfect color palette?", | |
| "formal": "For formal events, the key is all in the details! 👗 Depending on the dress code:\n\nBlack Tie:\n- Floor-length gown in luxe fabrics (satin, velvet)\n- Statement jewelry\n- Sleek updo and bold lip\n\nCocktail:\n- Midi dress with interesting neckline\n- Strappy heels\n- Clutch bag\n\nBusiness Formal:\n- Tailored pantsuit or pencil skirt\n- Silk blouse\n- Pointed-toe pumps\n\nNeed help choosing for a specific event?", | |
| "casual": "Casual doesn't have to mean boring, darling! 🕶 Here are some effortless yet stylish ideas:\n\n1. Wide-leg jeans + fitted tee + statement blazer + sneakers\n2. Midi skirt + cropped sweater + ankle boots\n3. Jumpsuit + denim jacket + slides\n4. Athleisure look with matching set and luxury sneakers\n\nThe key is balancing relaxed pieces with structured elements and always accessorizing!" | |
| }; | |
| // Check for exact matches | |
| if (responses[query]) { | |
| return responses[query]; | |
| } | |
| // Check for keyword matches | |
| for (const [key, value] of Object.entries(responses)) { | |
| if (query.includes(key)) { | |
| return value; | |
| } | |
| } | |
| // If no match, generate a default fashion response | |
| const defaultResponses = [ | |
| `${query}? What an interesting fashion question! Let me think... I'd recommend considering your personal style first. Maybe try experimenting with different textures and silhouettes to see what feels right for you. Would you like more specific suggestions?`, | |
| `Fashion is so personal, darling! Regarding ${query}, I'd suggest looking at current runway trends for inspiration, but always adapt them to suit your unique beauty. Maybe we could explore some options together?`, | |
| `Oh, ${query} is such a nuanced topic in fashion! The answer really depends on your body type, coloring, and personal style. I'd be happy to walk you through some possibilities if you'd like.`, | |
| `${query}? Marvelous question! The fashion world is divided on this, but my professional opinion is to trust your instincts and choose pieces that make you feel confident and powerful. Would you like me to show you some examples?` | |
| ]; | |
| return defaultResponses[Math.floor(Math.random() * defaultResponses.length)]; | |
| } | |
| // Initialize with some data | |
| window.onload = function() { | |
| updateFashionTips(); | |
| }; | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=privateuserh/miyo-mirai-ai" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |