|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Fifine Fairfield - Your AI Fashionista</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"> |
|
|
|
|
|
<video id="avatar-video" class="video-avatar" autoplay loop muted playsinline> |
|
|
<source src="FifineFairfield.mp4" type="video/mp4"> |
|
|
Your browser does not support the video tag. |
|
|
</video> |
|
|
|
|
|
|
|
|
<div class="neon-text"> |
|
|
Fifine Fairfield |
|
|
</div> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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 Miyo</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/miyo-mirai-ai-agent/resolve/main/Miyo%20Mirai.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">Konnichiwa 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/miyo-mirai-ai-agent/resolve/main/Miyo%20Mirai.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 Miyo about 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> |
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
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(); |
|
|
|
|
|
|
|
|
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"; |
|
|
} |
|
|
|
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
let chatVisible = false; |
|
|
let tipsVisible = false; |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
chatContainer.classList.add('hidden'); |
|
|
|
|
|
|
|
|
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 = ''; |
|
|
|
|
|
|
|
|
typingIndicator.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
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/miyo-mirai-ai-agent/resolve/main/Miyo%20Mirai.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/miyo-mirai-ai-agent/resolve/main/Miyo%20Mirai.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) { |
|
|
|
|
|
typingIndicator.classList.add('hidden'); |
|
|
|
|
|
|
|
|
const response = generateFashionResponse(query.toLowerCase()); |
|
|
|
|
|
|
|
|
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/miyo-mirai-ai-agent/resolve/main/Miyo%20Mirai.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) { |
|
|
|
|
|
speakResponse(response); |
|
|
} |
|
|
|
|
|
|
|
|
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!", |
|
|
"Statement jewelry can 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." |
|
|
]; |
|
|
|
|
|
|
|
|
const shuffledTips = fashionTips.sort(() => 0.5 - Math.random()).slice(0, 3); |
|
|
|
|
|
|
|
|
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": "Fashionistas! ✨ Ready to explore the world of fashion together? What would you like to chat about today?", |
|
|
"hi": "fashion lover! 💖 Fifine is 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!" |
|
|
}; |
|
|
|
|
|
|
|
|
if (responses[query]) { |
|
|
return responses[query]; |
|
|
} |
|
|
|
|
|
|
|
|
for (const [key, value] of Object.entries(responses)) { |
|
|
if (query.includes(key)) { |
|
|
return value; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
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)]; |
|
|
} |
|
|
|
|
|
|
|
|
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> |
