app.py

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 """
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap" rel="stylesheet">
    """
    
with gr.Blocks(css=css) as demo:
    gr.HTML("""
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap" rel="stylesheet">
    <h1 style="font-family: 'Pinyon Script', cursive; font-size: 2.5em; margin-bottom: 0;">Fashioneer - Your Fashion Pioneer</h1>
    """)
    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()