Update app.py

app.py

@@ -20,7 +20,7 @@ MAX_SEED = np.iinfo(np.int32).max
 dtype   = torch.bfloat16
 device  = "cuda" if torch.cuda.is_available() else "cpu"
 
-# MODEL LOADING ON ZEROGPU
+# ── Model Loading on ZEROGPU
 pipe = QwenImageEditPlusPipeline.from_pretrained(
     "Qwen/Qwen-Image-Edit-2511",
     torch_dtype=dtype,
@@ -39,7 +39,7 @@ pipe.load_lora_weights(
 pipe.set_adapters(["lightning", "angles"], adapter_weights=[1.0, 1.0])
 
 
-# Camera parameter tables 
+# ── Camera parameter tables ────────────────────────────────────────────────────
 AZIMUTH_MAP = {
     0: "front view",
     45: "front-right quarter view",
@@ -90,7 +90,7 @@ def pil_to_data_url(img: Image.Image) -> str:
     return f"data:{mime};base64,{b64}"
 
 
-# Inference 
+# ── Inference ──────────────────────────────────────────────────────────────────
 @spaces.GPU(duration=120)
 def infer_camera_edit(
     image, azimuth, elevation, distance,
@@ -115,12 +115,11 @@ def infer_camera_edit(
     return result, seed, prompt
 
 
-# gr.HTML templates
+# ── gr.HTML templates ──────────────────────────────────────────────────────────
 # Using plain gr.HTML (no subclass) with a dict value.
 #
 # Gradio 6 passes the dict as `value` to the template; all keys (img, az, el,
 # dist) are accessible as value.img, value.az, etc. in both ${} and {{}} syntax.
-
 HTML_TEMPLATE = """
 <div class="cv-wrap">
   {{#if value.img}}
@@ -314,12 +313,11 @@ element.addEventListener('click', function(e) {
 """
 
 
-# Global Gradio CSS 
+# ── Global Gradio CSS ──────────────────────────────────────────────────────────
 GLOBAL_CSS = """
-/* ── Page ── */
-.gradio-container { max-width: 1160px !important; margin: 0 auto !important; }
-
-/* Force the main two-column row to never wrap, regardless of viewport */
+/* ── Row: never let the two columns wrap ── */
+/* Gradio 6 renders rows as flex containers with class "flex" */
+.gradio-container .flex.flex-row,
 .gradio-container .row {
   flex-wrap: nowrap !important;
 }
@@ -398,29 +396,12 @@ GLOBAL_CSS = """
   color: #6b7280 !important;
 }
 
-/* ── Gallery section ── */
-.gallery-heading {
-  display: flex; align-items: center; gap: 10px;
-  padding: 16px 0 10px;
-  border-top: 1px solid #e5e7eb;
-  margin-top: 8px;
-}
-.gallery-heading span {
-  font-size: 14px; font-weight: 600; color: #374151;
-}
-.gallery-heading .count-badge {
-  background: #f3f4f6;
-  border: 1px solid #e5e7eb;
-  border-radius: 999px;
-  padding: 1px 8px;
-  font-size: 11px; color: #9ca3af;
-}
 """
 
 GRADIO_THEME = gr.themes.Default()
 
 
-# App
+# ── App ────────────────────────────────────────────────────────────────────────
 def create_app():
 
     # FIX: theme and css are now passed to launch(), not gr.Blocks()
@@ -442,8 +423,8 @@ def create_app():
 
         with gr.Row():
 
-            # Left column 
-            with gr.Column(scale=4, min_width=260, elem_classes=["controls-col"]):
+            # ── Left column ──────────────────────────────────────────────────
+            with gr.Column(scale=4, min_width=200, elem_classes=["controls-col"]):
                 image_input = gr.Image(
                     label="Source Image",
                     type="pil",
@@ -466,8 +447,8 @@ def create_app():
                     width_sl     = gr.Slider(256, 1024, value=1024, step=32,  label="Width (px)")
                     height_sl    = gr.Slider(256, 1024, value=1024, step=32,  label="Height (px)")
 
-            # Right column 
-            with gr.Column(scale=6, min_width=320):
+            # ── Right column ─────────────────────────────────────────────────
+            with gr.Column(scale=6, min_width=280):
                 gr.HTML("""
                 <div class="viewer-label">
                   Camera View
@@ -492,24 +473,18 @@ def create_app():
                     elem_classes=["status-box"],
                 )
 
-        gr.HTML("""
-        <div class="gallery-heading">
-          <span>Generated Views</span>
-          <span class="count-badge">session</span>
-        </div>
-        """)
-
         gallery_state = gr.State([])
-        gallery = gr.Gallery(
-            label="Generated Views",
-            show_label=True,
-            columns=4,
-            height="auto",
-            object_fit="cover",
-            allow_preview=True,
-        )
+        with gr.Accordion("🖼  Generated Views", open=False):
+            gallery = gr.Gallery(
+                label="",
+                show_label=False,
+                columns=4,
+                height="auto",
+                object_fit="cover",
+                allow_preview=True,
+            )
 
-        # Helpers
+        # ── Helpers ──────────────────────────────────────────────────────────
 
         def _coerce_view(v):
             """Extract (az, el, dist) safely from a dict or default."""
@@ -530,7 +505,7 @@ def create_app():
                 nw = round(1024 * ar / 32) * 32
             return max(256, min(1024, nw)), max(256, min(1024, nh))
 
-        # Event handlers
+        # ── Event handlers ────────────────────────────────────────────────────
 
         def on_image_upload(img, current_view):
             nw, nh = _auto_dimensions(img)
@@ -601,4 +576,4 @@ if __name__ == "__main__":
         debug=True,
         theme=GRADIO_THEME,
         css=GLOBAL_CSS,
-    )
+    )