Spaces:
Running
Running
File size: 28,794 Bytes
190a8f3 2371a47 190a8f3 2371a47 190a8f3 6ce6c3b 190a8f3 369b858 190a8f3 369b858 190a8f3 369b858 190a8f3 369b858 190a8f3 369b858 190a8f3 369b858 190a8f3 369b858 190a8f3 369b858 190a8f3 369b858 190a8f3 2371a47 f542f1e 190a8f3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ginger Xiana - 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="GingerXiana.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<!-- Title -->
<div class="neon-text">
Ginger Xiana
</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 Ginger</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/ginger-xiana-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">Hey fashion lover! I'm Miyo Mirai, your personal AI style consultant. How can I help you look fabulous 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/ginger-xiana-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 Ginger about On trend fashion, 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/ginger-xiana-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/ginger-xiana-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/ginger-xiana-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 should be the key for transitional weather - try a lightweight moc turtleneck under your summer dresses!",
"Make a statement with jewelry and elevate even the simplest outfit. Try chunky necklaces this season!",
"Mix textures like silk and denim for an interesting contrast in your outfits.",
"Sustainable fashion alert: Look for OEKO-TEX certified fabrics for eco-friendly choices.",
"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 Ginger! ✨ Ready to explore the world of fashion together? What would you like to chat about today?",
"hi": "Fashion lover! 💖 Ginger 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> |