Spaces:
Sleeping
Sleeping
| 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() | |