import gradio as gr
import pandas as pd
from huggingface_hub import InferenceClient
client = InferenceClient("microsoft/phi-4")
# Load CSV
try:
clothing_df = pd.read_csv("clothing.csv")
except FileNotFoundError:
print("Error: 'clothing.csv' not found.")
clothing_df = pd.DataFrame(columns=['name', 'image_path', 'category', 'formality', 'weather', 'notes'])
def get_suggestions(query):
results = clothing_df.copy()
q = query.lower()
if 'rain' in q:
results = results[results['weather'].str.contains('rain', case=False, na=False)]
elif 'cold' in q:
results = results[results['weather'].str.contains('cold', case=False, na=False)]
elif 'hot' in q:
results = results[results['weather'].str.contains('hot', case=False, na=False)]
elif 'snow' in q:
results = results[results['weather'].str.contains('snow', case=False, na=False)]
if 'formal' in q or 'office' in q:
results = results[results['formality'].str.contains('formal', case=False, na=False)]
elif 'casual' in q:
results = results[results['formality'].str.contains('casual', case=False, na=False)]
outfit_categories = ['top', 'bottom', 'outerwear', 'shoes', 'jewellery']
final_outfit_list = []
for category in outfit_categories:
filtered_items = results[results['category'] == category]
if not filtered_items.empty:
final_outfit_list.append(filtered_items.sample(1))
else:
all_items_in_category = clothing_df[clothing_df['category'] == category]
if not all_items_in_category.empty:
final_outfit_list.append(all_items_in_category.sample(1))
if not final_outfit_list:
return pd.DataFrame(columns=clothing_df.columns)
return pd.concat(final_outfit_list)
def respond(message, chat_history):
messages = [{"role": "system", "content": "You are a clothing assistant. Suggest suitable clothing items from the database based on the user's input."}]
for user_msg, bot_msg in chat_history:
messages.append({"role": "user", "content": user_msg})
messages.append({"role": "assistant", "content": bot_msg})
messages.append({"role": "user", "content": message})
ai_response = client.chat_completion(messages=messages, max_tokens=1000)
reasoning = "I'm having trouble generating a response. Please try again."
if ai_response.choices and ai_response.choices[0].message:
reasoning = ai_response.choices[0].message.content.strip()
matches = get_suggestions(message)
image_paths = matches['image_path'].tolist()
chat_history.append((message, reasoning))
return chat_history, image_paths
#hopefully fixed CSS code
css = """
.gradio-container {
background: linear-gradient(135deg, #F4D2D0 0%, #E8B5B3 100%) !important;
font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
}
/* Professional container styling - much larger chatbot */
#chatbot-box {
background-color: #2F4F4F !important;
color: white !important;
border-radius: 12px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
min-height: 600px !important;
height: 600px !important;
}
#gallery-box {
background-color: #2F4F4F !important;
border-radius: 12px !important;
padding: 20px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
#gallery-box img {
border: 2px solid #DAA520 !important;
border-radius: 8px !important;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
#gallery-box img:hover {
transform: translateY(-2px) !important;
box-shadow: 0 12px 24px rgba(218, 165, 32, 0.3) !important;
}
#input-box textarea {
background-color: #4A6B70 !important;
color: white !important;
border: 2px solid #2F4F4F !important;
border-radius: 10px !important;
padding: 15px !important;
font-size: 14px !important;
transition: border-color 0.3s ease !important;
}
#input-box textarea:focus {
border-color: #DAA520 !important;
box-shadow: 0 0 0 3px rgba(218, 165, 32, 0.1) !important;
}
#input-box textarea::placeholder {
color: rgba(255, 255, 255, 0.6) !important;
font-style: italic !important;
}
/* Refined chatbot messages */
.message-wrap .message {
background-color: #2F4F4F !important;
color: white !important;
padding: 16px 20px !important;
border-radius: 10px !important;
margin: 8px 0 !important;
line-height: 1.6 !important;
}
.chatbot .message.bot, .chatbot .message.assistant {
background-color: #2F4F4F !important;
color: white !important;
}
/* Sophisticated title styling */
h1 {
font-family: 'Pinyon Script', 'Brush Script MT', cursive !important;
font-size: 3.2em !important;
background: linear-gradient(45deg, #2F4F4F, #4A6B70) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
text-align: center !important;
margin: 20px 0 30px 0 !important;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1) !important;
}
/* Professional subtitle - larger and more visible */
.gradio-markdown p {
color: #1A3333 !important;
font-size: 1.6em !important;
text-align: center !important;
margin-bottom: 30px !important;
font-weight: 500 !important;
font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
letter-spacing: 0.5px !important;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8) !important;
line-height: 1.4 !important;
}
/* Refined input styling */
.textbox input, .textbox textarea {
background-color: #4A6B70 !important;
color: white !important;
border: 2px solid #2F4F4F !important;
border-radius: 10px !important;
transition: all 0.3s ease !important;
}
/* Professional labels */
.form label {
color: #2F4F4F !important;
font-weight: 600 !important;
font-size: 0.95em !important;
margin-bottom: 8px !important;
}
/* Elegant scrollbar for chat */
#chatbot-box .overflow-y-auto::-webkit-scrollbar {
width: 6px !important;
}
#chatbot-box .overflow-y-auto::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1) !important;
border-radius: 3px !important;
}
#chatbot-box .overflow-y-auto::-webkit-scrollbar-thumb {
background: rgba(218, 165, 32, 0.6) !important;
border-radius: 3px !important;
}
#chatbot-box .overflow-y-auto::-webkit-scrollbar-thumb:hover {
background: rgba(218, 165, 32, 0.8) !important;
}
/* Refined gallery grid */
#gallery-box .grid {
gap: 16px !important;
}
/* Professional button styling if any */
.btn {
background: linear-gradient(135deg, #4A6B70, #2F4F4F) !important;
border: none !important;
color: white !important;
padding: 12px 24px !important;
border-radius: 8px !important;
font-weight: 500 !important;
transition: all 0.3s ease !important;
}
.btn:hover {
transform: translateY(-1px) !important;
box-shadow: 0 6px 20px rgba(47, 79, 79, 0.4) !important;
}
"""
# Add this function to load the Google Font
def load_google_font():
return """
Fashioneer - Your Fashion Pioneer
""")
gr.Markdown("Ask me what to wear and I'll suggest clothing with images from the database.")
user_input = gr.Textbox(label="Your outfit requirements",
placeholder="e.g., What should I wear on a rainy day?",
elem_id="input-box")
with gr.Row():
chatbot = gr.Chatbot(label="Chatbot Conversation", elem_id="chatbot-box")
gallery = gr.Gallery(label="Recommended Clothing", columns=2, height='auto', elem_id="gallery-box")
user_input.submit(fn=respond, inputs=[user_input, chatbot], outputs=[chatbot, gallery])
demo.launch()