Update app.py

app.py

@@ -197,4 +197,66 @@ print(response.json())
 # See this Space's app.py for a full polling example.
 """
 
-with gr.Blocks(
+with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
+    # --- Banner and Main Title ---
+    gr.HTML(
+        """
+        <div style="text-align: center; padding: 20px; background-color: #f0f8ff; border-radius: 10px; margin-bottom: 20px;">
+            <h2 style="color: #333;">Powered by the Astria.ai API</h2>
+            <p style="color: #555; font-size: 1.1em;">This Virtual Try-On demo uses a powerful, single-call API endpoint.
+            <br>
+            You can integrate this functionality directly into your own applications.
+            </p>
+            <a href="https://docs.astria.ai/docs/use-cases/virtual-try-on/" target="_blank" style="text-decoration: none;">
+                <button style="padding: 10px 20px; font-size: 1em; color: white; background-color: #007bff; border: none; border-radius: 5px; cursor: pointer;">
+                    Read the Full API Documentation
+                </button>
+            </a>
+        </div>
+        """
+    )
+    gr.Markdown("# Virtual Fashion Try-On")
+    gr.Markdown(
+        """
+        **Instructions:** Upload a photo of a person and a photo of a piece of clothing to see them wear it.
+        
+        This space is made available through the Astria API, which allows you to create virtual try-on experiences with just a few lines of code. 
+        Astria fine-tuning API allows you to create custom AI models from your own images, and then use Virtual Try-On to make those models wear different clothing items.
+        This can be used for fashion e-commerce, virtual fitting rooms, music festivals and concerts and sport events activation campaigns. See more in [Astria Virtual Try-On documentation](https://docs.astria.ai/docs/use-cases/virtual-try-on/).
+        """
+    )
+
+    # --- Main Application UI ---
+    with gr.Row():
+        with gr.Column(scale=1):
+            human_image = gr.Image(type="filepath", label="Human Image", height=300)
+            garment_image = gr.Image(type="filepath", label="Garment Image", height=300)
+            garment_type = gr.Dropdown(
+                ["shirt", "pants", "dress"],
+                label="Garment Type",
+                info="Select the type of clothing item you uploaded.",
+                value="shirt"
+            )
+            submit_btn = gr.Button("Generate", variant="primary")
+        with gr.Column(scale=1):
+            status_text = gr.Textbox(label="Status", interactive=False, lines=2, placeholder="Upload images and click Generate...")
+            result_image = gr.Image(label="Result", height=615, interactive=False)
+
+    # --- API Usage Code Snippet ---
+    with gr.Accordion("Show API Usage Code (Python)", open=False):
+        gr.Code(
+            value=code_snippet,
+            language="python",
+            label="Python Request Example",
+            interactive=False
+        )
+
+    # --- Event Listener ---
+    submit_btn.click(
+        fn=virtual_tryon,
+        inputs=[human_image, garment_image, garment_type],
+        outputs=[result_image, status_text]
+    )
+
+if __name__ == "__main__":
+    demo.launch()