Update app.py

app.py

@@ -292,36 +292,88 @@ def send_to_backend(image_buffer, user_id):
 
 
 # Gradio interface
-with gr.Blocks(title="Style Mixing for Clothing Designs") as iface:
-    user_id_state = gr.State()
+# with gr.Blocks(title="Style Mixing for Clothing Designs") as iface:
+#     user_id_state = gr.State()
 
-    @iface.load(inputs=None, outputs=[user_id_state])
-    def on_load(request: gr.Request):
-        user_id = request.query_params.get('user_id', '')
-        return user_id
+#     @iface.load(inputs=None, outputs=[user_id_state])
+#     def on_load(request: gr.Request):
+#         user_id = request.query_params.get('user_id', '')
+#         return user_id
 
-    gr.Markdown("## Style Mixing for Clothing Design\nUpload two projected clothing images and mix their styles.")
+#     gr.Markdown("## Style Mixing for Clothing Design\nUpload two projected clothing images and mix their styles.")
 
-    with gr.Row():
-        image1_input = gr.Image(label="First Clothing Image", type="filepath")
-        image2_input = gr.Image(label="Second Clothing Image", type="filepath")
+#     with gr.Row():
+#         image1_input = gr.Image(label="First Clothing Image", type="filepath")
+#         image2_input = gr.Image(label="Second Clothing Image", type="filepath")
 
-    mix_slider = gr.Slider(label="Style Mixing Strength", minimum=0, maximum=9, step=1, value=5)
+#     mix_slider = gr.Slider(label="Style Mixing Strength", minimum=0, maximum=9, step=1, value=5)
 
-    with gr.Row():
-        output_image = gr.Image(label="Mixed Clothing Design")
-        save_button = gr.Button("Download & Save to Database")
+#     with gr.Row():
+#         output_image = gr.Image(label="Mixed Clothing Design")
+#         save_button = gr.Button("Download & Save to Database")
 
+#     image_buffer = gr.State()
+#     save_status = gr.Textbox(label="Save Status", interactive=False)
+
+#     def mix_and_store(image1, image2, mix_value):
+#         result_image, buffer = style_mixing_interface(image1, image2, mix_value)
+#         return result_image, buffer
+
+#     mix_button = gr.Button("Mix Styles")
+#     mix_button.click(mix_and_store, inputs=[image1_input, image2_input, mix_slider], outputs=[output_image, image_buffer])
+#     save_button.click(send_to_backend, inputs=[image_buffer, user_id_state], outputs=[save_status])
+
+# iface.launch()
+import gradio as gr
+
+with gr.Blocks(title="Style Mixing for Clothing Designs") as iface:
+    user_id_state = gr.State()
     image_buffer = gr.State()
-    save_status = gr.Textbox(label="Save Status", interactive=False)
 
+    # Load user ID from URL
+    @iface.load(inputs=None, outputs=[user_id_state])
+    def on_load(request: gr.Request):
+        user_id = request.query_params.get('user_id', '')
+        return user_id
+
+    # Header
+    gr.Markdown("## 🎨 Style Mixing for Clothing Designs")
+    gr.Markdown("Upload two projected clothing images and blend their styles using the slider below.")
+
+    # Upload Inputs
+    with gr.Group():
+        with gr.Row():
+            image1_input = gr.Image(label="👗 First Clothing Image", type="filepath")
+            image2_input = gr.Image(label="👗 Second Clothing Image", type="filepath")
+        mix_slider = gr.Slider(label="🧪 Style Mixing Intensity", minimum=0, maximum=9, step=1, value=5, info="0 = Mostly Left | 9 = Mostly Right")
+
+    # Output & Actions
+    with gr.Group():
+        with gr.Row():
+            output_image = gr.Image(label="🧵 Mixed Clothing Design")
+        with gr.Row():
+            mix_button = gr.Button("✨ Mix Styles")
+            save_button = gr.Button("💾 Save to Database")
+        save_status = gr.Textbox(label="Status", interactive=False)
+
+    # Functions
     def mix_and_store(image1, image2, mix_value):
         result_image, buffer = style_mixing_interface(image1, image2, mix_value)
         return result_image, buffer
 
-    mix_button = gr.Button("Mix Styles")
-    mix_button.click(mix_and_store, inputs=[image1_input, image2_input, mix_slider], outputs=[output_image, image_buffer])
-    save_button.click(send_to_backend, inputs=[image_buffer, user_id_state], outputs=[save_status])
+    # Button Logic
+    mix_button.click(
+        fn=mix_and_store,
+        inputs=[image1_input, image2_input, mix_slider],
+        outputs=[output_image, image_buffer]
+    )
+
+    save_button.click(
+        fn=send_to_backend,
+        inputs=[image_buffer, user_id_state],
+        outputs=[save_status]
+    )
 
 iface.launch()
 
+