Update app.py

app.py

@@ -132,23 +132,6 @@ def respond(message, chat_history):
     # Return the updated chat history and the image paths
     return chat_history, image_paths
 
-
-# Gradio UI ---
-with gr.Blocks(theme=custom_theme, css=css) as demo:
-    gr.Markdown("## Fashioneer - your fashion pioneer!")
-    gr.Markdown("Ask me what to wear and I'll suggest clothing with images from the database.")
-
-    # This is the search bar at the top
-    user_input = gr.Textbox(label="Type your outfit requirements here", placeholder="e.g., What should I wear on a rainy day?")
-    
-    # This row will place the chatbot and gallery side-by-side
-    with gr.Row():
-        chatbot = gr.Chatbot(label="Chatbot Conversation")
-        gallery = gr.Gallery(label="Recommended Clothing", columns=2, height='auto')
-
-    # This is the original line that connects the input and output
-    user_input.submit(fn=respond, inputs=[user_input, chatbot], outputs=[chatbot, gallery])
-
 # Define custom colors from your palette
 pink_bg = "#EBBAB9"
 dark_blue_output = "#407076"
@@ -192,4 +175,21 @@ custom_theme = gr.themes.Soft(
     value="#D3AF37"
 )
 
+# Gradio UI ---
+with gr.Blocks(theme=custom_theme, css=css) as demo:
+    gr.Markdown("## Fashioneer - your fashion pioneer!")
+    gr.Markdown("Ask me what to wear and I'll suggest clothing with images from the database.")
+
+    # This is the search bar at the top
+    user_input = gr.Textbox(label="Type your outfit requirements here", placeholder="e.g., What should I wear on a rainy day?")
+    
+    # This row will place the chatbot and gallery side-by-side
+    with gr.Row():
+        chatbot = gr.Chatbot(label="Chatbot Conversation")
+        gallery = gr.Gallery(label="Recommended Clothing", columns=2, height='auto')
+
+    # This is the original line that connects the input and output
+    user_input.submit(fn=respond, inputs=[user_input, chatbot], outputs=[chatbot, gallery])
+
+
 demo.launch()