Premium UI: gradient title, larger gallery (scale=3), hover effects, download buttons, Inter font, orange theme

app.py

@@ -244,17 +244,116 @@ def extract_assets(input_image):
         sys.stdout.flush()
         return []
 
-with gr.Blocks(title="SAM 3 Asset Extractor") as demo:
-    gr.Markdown("# SAM 3 Concept Asset Extractor")
-    gr.Markdown("Upload a presentation slide to automatically extract all distinct elements (charts, shapes, icons, text blocks) as transparent PNGs using Meta's Segment Anything 3 Promptable Concept Segmentation.")
+custom_css = """
+/* ── Premium Dark Theme ─────────────────────────────── */
+.gradio-container {
+    max-width: 1400px !important;
+    margin: auto;
+}
+#app-title {
+    text-align: center;
+    background: linear-gradient(135deg, #667eea 0%, #f97316 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-size: 2.2rem !important;
+    font-weight: 800 !important;
+    margin-bottom: 0 !important;
+}
+#app-subtitle {
+    text-align: center;
+    color: #94a3b8 !important;
+    font-size: 0.95rem !important;
+    margin-top: 0 !important;
+}
+/* Gallery: large, prominent, with hover download */
+.gallery-container {
+    min-height: 650px !important;
+}
+.gallery-container .gallery-item {
+    position: relative;
+    border-radius: 12px;
+    overflow: hidden;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    background: #1e293b;
+}
+.gallery-container .gallery-item:hover {
+    transform: scale(1.03);
+    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
+}
+/* Download icon always visible */
+.gallery-container .gallery-item button.download {
+    opacity: 1 !important;
+}
+/* Extract button styling */
+#extract-btn {
+    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
+    border: none !important;
+    font-weight: 700 !important;
+    font-size: 1.1rem !important;
+    padding: 14px 0 !important;
+    border-radius: 12px !important;
+    transition: all 0.3s ease !important;
+}
+#extract-btn:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 24px rgba(249, 115, 22, 0.4) !important;
+}
+/* Upload area */
+#upload-area {
+    border: 2px dashed #475569 !important;
+    border-radius: 12px !important;
+    transition: border-color 0.3s ease !important;
+}
+#upload-area:hover {
+    border-color: #667eea !important;
+}
+"""
+
+with gr.Blocks(title="SAM 3 Asset Extractor", css=custom_css, theme=gr.themes.Soft(
+    primary_hue="orange",
+    secondary_hue="blue",
+    neutral_hue="slate",
+    font=gr.themes.GoogleFont("Inter"),
+)) as demo:
+    gr.Markdown("# SAM 3 Concept Asset Extractor", elem_id="app-title")
+    gr.Markdown(
+        "Upload a presentation slide to automatically extract all distinct elements "
+        "(charts, shapes, icons, text blocks) as **transparent PNGs** using "
+        "Meta's Segment Anything 3 Promptable Concept Segmentation.",
+        elem_id="app-subtitle"
+    )
     
-    with gr.Row():
-        with gr.Column(scale=1):
-            input_image = gr.Image(label="Upload Slide", type="numpy")
-            submit_btn = gr.Button("Extract Assets", variant="primary")
+    with gr.Row(equal_height=False):
+        with gr.Column(scale=1, min_width=320):
+            input_image = gr.Image(
+                label="📤 Upload Slide",
+                type="numpy",
+                elem_id="upload-area",
+                height=400,
+            )
+            submit_btn = gr.Button(
+                "🔍 Extract Assets",
+                variant="primary",
+                elem_id="extract-btn",
+                size="lg",
+            )
+            gr.Markdown(
+                "**Detected Concepts:** charts · diagrams · graphs · tables · "
+                "icons · logos · shapes · text blocks · images · illustrations",
+                elem_id="concept-list"
+            )
         
-        with gr.Column(scale=2):
-            output_gallery = gr.Gallery(label="Extracted Assets", columns=4, object_fit="contain", height="auto")
+        with gr.Column(scale=3):
+            output_gallery = gr.Gallery(
+                label="🎨 Extracted Assets — Click any image to download as PNG",
+                columns=3,
+                object_fit="contain",
+                height=650,
+                show_download_button=True,
+                show_share_button=False,
+                elem_classes=["gallery-container"],
+                preview=True,
+            )
             
     submit_btn.click(fn=extract_assets, inputs=[input_image], outputs=[output_gallery])