Update app.py

app.py

@@ -1,106 +1,141 @@
+# third
+
+"""
+3D Camera View Generator
+- Qwen Image Edit + Lightning LoRA + Multi-Angle LoRA
+- gr.HTML custom component (Gradio 6)
+- ZeroGPU (HuggingFace Spaces)
+
+Fixes vs previous version
+──────────────────────────
+1. Removed CameraViewComponent subclass entirely.
+   Gradio calls inspect.getfile() on subclasses during registration; when the
+   code runs in a Jupyter / IPython cell there is no source file, so it raises
+   OSError: source code not available.  Plain gr.HTML with a dict value avoids
+   this path completely — Gradio 6 accepts Any as value.
+
+2. Moved `theme` and `css` from gr.Blocks() to demo.launch() as required by
+   Gradio 6.0 (the Blocks constructor no longer accepts those kwargs).
+
+3. Removed `from gradio.data_classes import GradioModel` — no longer needed.
+"""
+
 import gradio as gr
 import numpy as np
 import random
 import torch
 import base64
+import spaces
 from io import BytesIO
 from PIL import Image
-from diffusers import FlowMatchEulerDiscreteScheduler, QwenImageEditPlusPipeline
+from diffusers import QwenImageEditPlusPipeline
 
 MAX_SEED = np.iinfo(np.int32).max
+dtype   = torch.bfloat16
+device  = "cuda" if torch.cuda.is_available() else "cpu"
 
-# --- Model Loading ---
-dtype = torch.bfloat16
-device = "cuda" if torch.cuda.is_available() else "cpu"
-
-# Initialize pipe as None - will be loaded when needed
+# ── Model (lazy-loaded inside @spaces.GPU) ─────────────────────────────────────
+#
+# HOW MODEL LOADING WORKS ON ZEROGPU
+# ────────────────────────────────────
+# • Weights are downloaded to the HF cache on disk the first time
+#   from_pretrained() is called (happens inside the @spaces.GPU window).
+# • They are NOT loaded into GPU VRAM at app startup — only when the first
+#   @spaces.GPU-decorated function actually runs.
+# • After the first call `pipe` stays alive in CPU process memory, so
+#   subsequent requests skip the download and just run inference.
+# • ZeroGPU allocates an H200 for the duration of the decorated function
+#   then releases it, so nothing holds the GPU between user requests.
+#
 pipe = None
 
 def load_model():
-    """Load the model only when needed to avoid initialization errors."""
     global pipe
     if pipe is None:
         pipe = QwenImageEditPlusPipeline.from_pretrained(
             "Qwen/Qwen-Image-Edit-2511",
-            torch_dtype=dtype
+            torch_dtype=dtype,
         ).to(device)
 
-        # Load the lightning LoRA for fast inference
         pipe.load_lora_weights(
             "lightx2v/Qwen-Image-Edit-2511-Lightning",
             weight_name="Qwen-Image-Edit-2511-Lightning-4steps-V1.0-bf16.safetensors",
-            adapter_name="lightning"
+            adapter_name="lightning",
         )
-
-        # Load the multi-angles LoRA
         pipe.load_lora_weights(
             "fal/Qwen-Image-Edit-2511-Multiple-Angles-LoRA",
             weight_name="qwen-image-edit-2511-multiple-angles-lora.safetensors",
-            adapter_name="angles"
+            adapter_name="angles",
         )
-
         pipe.set_adapters(["lightning", "angles"], adapter_weights=[1.0, 1.0])
     return pipe
 
-# --- Camera Parameter Mappings ---
+
+# ── Camera parameter tables ────────────────────────────────────────────────────
 AZIMUTH_MAP = {
     0: "front view",
-    45: "front-right quarter view", 
+    45: "front-right quarter view",
     90: "right side view",
     135: "back-right quarter view",
     180: "back view",
     225: "back-left quarter view",
-    270: "left side view", 
-    315: "front-left quarter view"
+    270: "left side view",
+    315: "front-left quarter view",
 }
-
 ELEVATION_MAP = {
     -30: "low-angle shot",
-    0: "eye-level shot", 
+    0: "eye-level shot",
     30: "elevated shot",
-    60: "high-angle shot"
+    60: "high-angle shot",
 }
-
 DISTANCE_MAP = {
     0.6: "close-up",
     1.0: "medium shot",
-    1.8: "wide shot"
+    1.8: "wide shot",
 }
 
+# Default viewer state — plain dict, no custom class needed
+DEFAULT_CAM_VALUE = {"img": "", "az": 0.0, "el": 0.0, "dist": 1.0}
+
+
 def snap_to_nearest(value, steps):
-    """Snap value to nearest step."""
     return min(steps, key=lambda x: abs(x - value))
 
+
 def build_camera_prompt(azimuth, elevation, distance):
-    """Build camera prompt from parameters."""
-    azimuth_steps = [0, 45, 90, 135, 180, 225, 270, 315]
-    elevation_steps = [-30, 0, 30, 60]
-    distance_steps = [0.6, 1.0, 1.8]
-    
-    az_snap = snap_to_nearest(azimuth, azimuth_steps)
-    el_snap = snap_to_nearest(elevation, elevation_steps)
-    dist_snap = snap_to_nearest(distance, distance_steps)
-    
-    az_name = AZIMUTH_MAP[az_snap]
-    el_name = ELEVATION_MAP[el_snap]
-    dist_name = DISTANCE_MAP[dist_snap]
-    
-    return f"<sks> {az_name} {el_name} {dist_name}"
-
-def infer_camera_edit(image, azimuth, elevation, distance, seed, randomize_seed, guidance_scale, num_inference_steps, height, width):
-    """Generate new camera view using the Qwen model."""
+    az   = snap_to_nearest(azimuth,   list(AZIMUTH_MAP.keys()))
+    el   = snap_to_nearest(elevation, list(ELEVATION_MAP.keys()))
+    dist = snap_to_nearest(distance,  list(DISTANCE_MAP.keys()))
+    return f"<sks> {AZIMUTH_MAP[az]} {ELEVATION_MAP[el]} {DISTANCE_MAP[dist]}"
+
+
+def pil_to_data_url(img: Image.Image) -> str:
+    buf  = BytesIO()
+    fmt  = getattr(img, "format", None)
+    if fmt and fmt.upper() == "WEBP":
+        img.save(buf, format="WEBP")
+        mime = "image/webp"
+    else:
+        img.save(buf, format="PNG")
+        mime = "image/png"
+    b64 = base64.b64encode(buf.getvalue()).decode()
+    return f"data:{mime};base64,{b64}"
+
+
+# ── Inference ──────────────────────────────────────────────────────────────────
+@spaces.GPU(duration=120)
+def infer_camera_edit(
+    image, azimuth, elevation, distance,
+    seed, randomize_seed, guidance_scale,
+    num_inference_steps, height, width,
+):
     if randomize_seed:
         seed = random.randint(0, MAX_SEED)
-    
+
     generator = torch.Generator(device=device).manual_seed(seed)
-    
-    # Build the camera prompt
-    prompt = build_camera_prompt(azimuth, elevation, distance)
-    
-    # Load model if not already loaded
-    model = load_model()
-    
-    # Generate the new view
+    prompt    = build_camera_prompt(azimuth, elevation, distance)
+    model     = load_model()
+
     result = model(
         image=image,
         prompt=prompt,
@@ -108,386 +143,506 @@ def infer_camera_edit(image, azimuth, elevation, distance, seed, randomize_seed,
         width=width,
         guidance_scale=guidance_scale,
         num_inference_steps=num_inference_steps,
-        generator=generator
+        generator=generator,
     ).images[0]
-    
+
     return result, seed, prompt
 
-def create_camera_control_app():
-    """Create the complete camera control app."""
-    
-    with gr.Blocks(title="Camera Control with Directional Arrows") as demo:
-        gr.Markdown("# 📸 Camera Control with Directional Arrows")
-        gr.Markdown("Upload an image and use arrows to control camera angles for 3D view generation")
-        
-        with gr.Row():
-            # Left column: Image upload and controls
-            with gr.Column(scale=1):
-                image = gr.Image(label="Upload Image", type="pil", height=400)
-                
-                # Camera parameter inputs (visible for debugging)
-                js_azimuth = gr.Textbox("0", visible=True, elem_id="js-azimuth", label="Azimuth")
-                js_elevation = gr.Textbox("0", visible=True, elem_id="js-elevation", label="Elevation")
-                js_distance = gr.Textbox("1.0", visible=True, elem_id="js-distance", label="Distance")
-                
-                # Generation settings
-                with gr.Accordion("⚙️ Generation Settings", open=False):
-                    seed = gr.Slider(minimum=0, maximum=MAX_SEED, step=1, value=42, label="Seed")
-                    randomize_seed = gr.Checkbox(True, label="Randomize seed")
-                    guidance_scale = gr.Slider(minimum=1, maximum=20, step=0.1, value=7.5, label="Guidance scale")
-                    num_inference_steps = gr.Slider(minimum=1, maximum=50, step=1, value=4, label="Number of inference steps")
-                    
-                    def update_dimensions_on_upload(input_image):
-                        if input_image is None:
-                            return 1024, 1024
-                        
-                        original_width, original_height = input_image.size
-                        aspect_ratio = original_width / original_height
-                        
-                        if aspect_ratio > 1:
-                            # Landscape
-                            new_width = 1024
-                            new_height = round(1024 / aspect_ratio / 32) * 32
-                        else:
-                            # Portrait or square
-                            new_height = 1024  
-                            new_width = round(1024 * aspect_ratio / 32) * 32
-                        
-                        # Ensure minimum size
-                        new_width = max(256, min(1024, new_width))
-                        new_height = max(256, min(1024, new_height))
-                        
-                        return new_width, new_height
-                    
-                    height = gr.Slider(minimum=256, maximum=1024, step=32, value=1024, label="Height")
-                    width = gr.Slider(minimum=256, maximum=1024, step=32, value=1024, label="Width")
-                    
-                prompt_display = gr.Textbox(
-                    label="Current Camera Prompt", 
+
+# ── 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.
+#
+# BUG FIX: multi-line ${} → Handlebars {{#if}} for the img/empty conditional.
+# BUG FIX: onmouseenter/onmouseleave removed from markup; hover via CSS :hover.
+
+HTML_TEMPLATE = """
+<div class="cv-wrap">
+  {{#if value.img}}
+    <img class="cv-img" src="{{value.img}}">
+    <div class="cv-scanline"></div>
+  {{else}}
+    <div class="cv-empty">
+      <div class="cv-reticle"><div class="cv-reticle-inner"></div></div>
+      <p class="cv-empty-title">No image loaded</p>
+      <p class="cv-empty-sub">Upload an image on the left, then hover here to orbit</p>
+    </div>
+  {{/if}}
+
+  <div class="cv-hud">
+    <div class="cv-readout">
+      <span class="cv-lbl">AZ</span><span class="cv-val">${value.az}&deg;</span>
+      <span class="cv-sep">&middot;</span>
+      <span class="cv-lbl">EL</span><span class="cv-val">${value.el}&deg;</span>
+      <span class="cv-sep">&middot;</span>
+      <span class="cv-lbl">DIST</span><span class="cv-val">${value.dist}&times;</span>
+    </div>
+    <div class="cv-controls">
+      <div class="cv-dpad">
+        <button class="cv-btn cv-up"    data-action="el-plus"  title="Elevate">&#9650;</button>
+        <button class="cv-btn cv-left"  data-action="az-minus" title="Rotate Left">&#9664;</button>
+        <div class="cv-dot"></div>
+        <button class="cv-btn cv-right" data-action="az-plus"  title="Rotate Right">&#9654;</button>
+        <button class="cv-btn cv-down"  data-action="el-minus" title="Lower">&#9660;</button>
+      </div>
+      <div class="cv-zoom">
+        <button class="cv-zbtn" data-action="dist-minus" title="Zoom In">&#xFF0B;</button>
+        <button class="cv-zbtn" data-action="dist-plus"  title="Zoom Out">&#xFF0D;</button>
+      </div>
+    </div>
+  </div>
+</div>
+"""
+
+CSS_TEMPLATE = """
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+.cv-wrap {
+  position: relative;
+  width: 100%; height: 540px;
+  background: #08080f;
+  border: 1px solid rgba(34,211,238,0.15);
+  border-radius: 18px;
+  overflow: hidden;
+  display: flex; align-items: center; justify-content: center;
+  font-family: 'IBM Plex Mono', 'Courier New', monospace;
+}
+
+.cv-img {
+  max-width: 100%; max-height: 100%;
+  object-fit: contain; border-radius: 4px; display: block;
+}
+
+.cv-scanline {
+  position: absolute; inset: 0;
+  background: repeating-linear-gradient(
+    to bottom,
+    transparent 0px, transparent 3px,
+    rgba(0,0,0,0.05) 3px, rgba(0,0,0,0.05) 4px
+  );
+  pointer-events: none; border-radius: inherit;
+}
+
+.cv-empty {
+  text-align: center; user-select: none;
+  display: flex; flex-direction: column; align-items: center; gap: 10px;
+}
+.cv-reticle {
+  width: 72px; height: 72px;
+  border: 2px solid rgba(34,211,238,0.3); border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  position: relative; margin-bottom: 4px;
+}
+.cv-reticle::before, .cv-reticle::after {
+  content: ''; position: absolute; background: rgba(34,211,238,0.25);
+}
+.cv-reticle::before { width: 1px; height: 100%; }
+.cv-reticle::after  { width: 100%; height: 1px; }
+.cv-reticle-inner {
+  width: 12px; height: 12px; border-radius: 50%;
+  background: rgba(34,211,238,0.6); z-index: 1;
+}
+.cv-empty-title {
+  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
+  color: rgba(255,255,255,0.45);
+}
+.cv-empty-sub {
+  font-size: 11px; color: rgba(255,255,255,0.2);
+  max-width: 240px; line-height: 1.6;
+}
+
+/* HUD: hidden by default, shown on CSS :hover — survives template re-renders */
+.cv-hud {
+  position: absolute; bottom: 16px; right: 16px;
+  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
+  opacity: 0; transition: opacity 0.2s ease; pointer-events: auto;
+}
+.cv-wrap:hover .cv-hud { opacity: 1; }
+
+.cv-readout {
+  display: flex; align-items: center; gap: 6px;
+  background: rgba(5,5,15,0.88); border: 1px solid rgba(34,211,238,0.3);
+  border-radius: 8px; padding: 5px 14px;
+  font-size: 11px; letter-spacing: 0.08em; white-space: nowrap;
+  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
+}
+.cv-lbl { color: rgba(34,211,238,0.5); font-size: 9px; text-transform: uppercase; }
+.cv-val { color: #22d3ee; font-weight: 600; }
+.cv-sep { color: rgba(255,255,255,0.15); }
+
+.cv-controls {
+  display: flex; align-items: center; gap: 10px;
+  background: rgba(5,5,15,0.82); border: 1px solid rgba(255,255,255,0.07);
+  border-radius: 14px; padding: 10px 12px;
+  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
+}
+
+.cv-dpad {
+  display: grid;
+  grid-template-columns: repeat(3, 36px);
+  grid-template-rows: repeat(3, 36px);
+  gap: 3px;
+}
+.cv-btn {
+  width: 36px; height: 36px;
+  border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
+  background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.65);
+  font-size: 11px; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  transition: background .12s, border-color .12s, transform .1s, color .12s;
+  padding: 0; line-height: 1;
+}
+.cv-btn:hover {
+  background: rgba(34,211,238,0.2); border-color: rgba(34,211,238,0.5);
+  color: #22d3ee; transform: scale(1.12);
+}
+.cv-btn:active { transform: scale(0.9); }
+
+.cv-up    { grid-column:2; grid-row:1; }
+.cv-left  { grid-column:1; grid-row:2; }
+.cv-dot   {
+  grid-column:2; grid-row:2; width:36px; height:36px; border-radius:50%;
+  background: rgba(34,211,238,0.07); border: 1px solid rgba(34,211,238,0.12);
+}
+.cv-right { grid-column:3; grid-row:2; }
+.cv-down  { grid-column:2; grid-row:3; }
+
+.cv-zoom { display: flex; flex-direction: column; gap: 4px; }
+.cv-zbtn {
+  width: 36px; height: 42px;
+  border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
+  background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.65);
+  font-size: 16px; font-weight: 500; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  transition: background .12s, border-color .12s, transform .1s, color .12s;
+  padding: 0; line-height: 1;
+}
+.cv-zbtn:hover {
+  background: rgba(251,191,36,0.2); border-color: rgba(251,191,36,0.5);
+  color: #fbbf24; transform: scale(1.12);
+}
+.cv-zbtn:active { transform: scale(0.9); }
+"""
+
+# BUG FIX: distance uses shiftDist() to jump between the exact snap points
+#          [0.6, 1.0, 1.8] instead of a fixed ±0.4 offset.
+JS_ON_LOAD = """
+const DIST_STEPS = [0.6, 1.0, 1.8];
+
+function snapDist(d) {
+  return DIST_STEPS.reduce((p, c) => Math.abs(c - d) < Math.abs(p - d) ? c : p);
+}
+function shiftDist(d, dir) {
+  const idx = DIST_STEPS.indexOf(snapDist(Number(d)));
+  return DIST_STEPS[Math.max(0, Math.min(DIST_STEPS.length - 1, idx + dir))];
+}
+
+// Delegated click listener — attached once, survives template re-renders.
+element.addEventListener('click', function(e) {
+  const btn = e.target.closest('[data-action]');
+  if (!btn) return;
+
+  const v    = Object.assign({}, props.value);
+  let az   = Number(v.az)   || 0;
+  let el   = Number(v.el)   || 0;
+  let dist = Number(v.dist) || 1.0;
+
+  switch (btn.dataset.action) {
+    case 'az-minus':   az   = (az - 45 + 360) % 360;  break;
+    case 'az-plus':    az   = (az + 45) % 360;         break;
+    case 'el-plus':    el   = Math.min(60,  el + 30);  break;
+    case 'el-minus':   el   = Math.max(-30, el - 30);  break;
+    case 'dist-minus': dist = shiftDist(dist, -1);     break;
+    case 'dist-plus':  dist = shiftDist(dist, +1);     break;
+  }
+
+  props.value = { ...v, az, el, dist };
+  trigger('submit');
+});
+"""
+
+
+# ── Global Gradio CSS ──────────────────────────────────────────────────────────
+GLOBAL_CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
+
+body,
+.gradio-container,
+.gradio-container > .main,
+footer { background: #06060d !important; }
+
+.gradio-container {
+  font-family: 'Oxanium', sans-serif !important;
+  max-width: 1120px !important;
+  margin: 0 auto !important;
+  padding: 0 20px 40px !important;
+}
+
+.app-heading {
+  text-align: center;
+  padding: 36px 0 16px;
+}
+.app-heading h1 {
+  font-family: 'Oxanium', sans-serif;
+  font-size: clamp(28px, 4vw, 44px);
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  background: linear-gradient(125deg, #22d3ee 0%, #818cf8 55%, #c084fc 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  line-height: 1.1;
+  margin: 0 0 10px;
+}
+.app-heading p {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 11px;
+  color: rgba(255,255,255,0.28);
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.gradio-container .block,
+.gradio-container .form {
+  background: rgba(255,255,255,0.025) !important;
+  border: 1px solid rgba(255,255,255,0.06) !important;
+  border-radius: 14px !important;
+  box-shadow: none !important;
+}
+
+label > span,
+.label-wrap span {
+  font-family: 'IBM Plex Mono', monospace !important;
+  font-size: 10px !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.1em !important;
+  color: rgba(255,255,255,0.32) !important;
+}
+
+textarea,
+input[type=text],
+input[type=number] {
+  background: rgba(255,255,255,0.04) !important;
+  border: 1px solid rgba(255,255,255,0.08) !important;
+  color: rgba(255,255,255,0.8) !important;
+  border-radius: 8px !important;
+  font-family: 'IBM Plex Mono', monospace !important;
+  font-size: 11px !important;
+}
+textarea:focus, input:focus {
+  border-color: rgba(34,211,238,0.4) !important;
+  box-shadow: 0 0 0 2px rgba(34,211,238,0.06) !important;
+}
+
+input[type=range] { accent-color: #22d3ee !important; }
+
+.accordion > button,
+details > summary {
+  background: rgba(255,255,255,0.03) !important;
+  border-radius: 8px !important;
+  color: rgba(255,255,255,0.5) !important;
+  font-family: 'IBM Plex Mono', monospace !important;
+  font-size: 11px !important;
+  letter-spacing: 0.06em !important;
+}
+
+input[type=checkbox] { accent-color: #22d3ee; }
+
+.gradio-container h3 {
+  font-family: 'Oxanium', sans-serif;
+  font-size: 12px; font-weight: 600;
+  letter-spacing: 0.1em; text-transform: uppercase;
+  color: rgba(255,255,255,0.35);
+  margin-bottom: 6px;
+}
+
+.status-box textarea {
+  color: rgba(34,211,238,0.8) !important;
+  font-size: 11px !important;
+}
+
+.section-divider {
+  border: none;
+  border-top: 1px solid rgba(255,255,255,0.05);
+  margin: 8px 0;
+}
+
+.gallery-item { border-radius: 8px !important; overflow: hidden; }
+"""
+
+GRADIO_THEME = gr.themes.Base(
+    primary_hue="cyan",
+    neutral_hue="slate",
+    font=["Oxanium", "sans-serif"],
+)
+
+
+# ── App ────────────────────────────────────────────────────────────────────────
+def create_app():
+
+    # FIX: theme and css are now passed to launch(), not gr.Blocks()
+    with gr.Blocks(title="3D Camera View Generator") as demo:
+
+        gr.HTML("""
+        <div class="app-heading">
+          <h1>3D Camera View Generator</h1>
+          <p>Qwen Image Edit &nbsp;&middot;&nbsp; Lightning LoRA &nbsp;&middot;&nbsp; Multi-Angle LoRA</p>
+        </div>
+        """)
+
+        with gr.Row(equal_height=False):
+
+            # ── Left column ──────────────────────────────────────────────────
+            with gr.Column(scale=4, min_width=300):
+                image_input = gr.Image(
+                    label="Source Image",
+                    type="pil",
+                    height=340,
+                )
+
+                prompt_box = gr.Textbox(
+                    label="Active Camera Prompt",
                     value="<sks> front view eye-level shot medium shot",
-                    interactive=False
+                    interactive=False,
+                    lines=1,
+                    elem_classes=["status-box"],
                 )
-                
-            # Right column: Interactive image view
-            with gr.Column(scale=1):
-                gr.Markdown("### 🎯 Interactive Image View")
-                gr.Markdown("*Upload an image, then hover to see controls and click arrows to generate new views*")
-                
-                # Interactive HTML component using working pattern
-                result_display = gr.HTML(
-                    value="""
-                    <div style="width: 100%; height: 500px; background: #f8f8f8; border: 2px solid #e0e0e0; border-radius: 12px; 
-                                position: relative; display: flex; align-items: center; justify-content: center;">
-                        <div style="text-align: center; color: #999;">
-                            <div style="font-size: 48px; margin-bottom: 10px;">📸</div>
-                            <p>Upload an image on the left to begin</p>
-                            <p>Then hover here to see camera controls</p>
-                        </div>
-                    </div>
-                    """,
-                    elem_id="result-display"
+
+                with gr.Accordion("⚙  Generation Settings", open=False):
+                    seed_slider  = gr.Slider(0, MAX_SEED, value=42,  step=1,   label="Seed")
+                    rand_seed_cb = gr.Checkbox(True, label="Randomise seed each generation")
+                    guidance_sl  = gr.Slider(1.0, 20.0, value=7.5,  step=0.1, label="Guidance Scale")
+                    steps_sl     = gr.Slider(1,   50,   value=4,    step=1,   label="Inference Steps")
+                    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=5, min_width=400):
+                gr.Markdown("### Camera View — hover to reveal orbit controls")
+
+                # FIX: plain gr.HTML with dict value — no subclass, no inspect error
+                cam_view = gr.HTML(
+                    value=DEFAULT_CAM_VALUE,
+                    html_template=HTML_TEMPLATE,
+                    css_template=CSS_TEMPLATE,
+                    js_on_load=JS_ON_LOAD,
+                    apply_default_css=False,
                 )
-                
-                # Debug output
-                debug_output = gr.Textbox(label="Debug Output", visible=True)
-        
-        # Functions for handling interactions (inside Blocks context)
-        def show_uploaded_image_with_arrows(uploaded_image):
-            """Show uploaded image with working arrow controls."""
-            if uploaded_image is None:
-                return gr.update(value="""
-                <div style="width: 100%; height: 500px; background: #f8f8f8; border: 2px solid #e0e0e0; border-radius: 12px; 
-                            position: relative; display: flex; align-items: center; justify-content: center;">
-                    <div style="text-align: center; color: #999;">
-                        <div style="font-size: 48px; margin-bottom: 10px;">📸</div>
-                        <p>Upload an image on the left to begin</p>
-                        <p>Then hover here to see camera controls</p>
-                    </div>
-                </div>
-                """)
-            
-            # Convert to data URL
-            buffered = BytesIO()
-            uploaded_image.save(buffered, format="PNG")
-            img_str = base64.b64encode(buffered.getvalue()).decode()
-            data_url = f"data:image/png;base64,{img_str}"
-            
-            print(f"DEBUG: Converting image to data URL. Image size: {uploaded_image.size}, Data URL length: {len(data_url)}")
-            print(f"DEBUG: Data URL starts with: {data_url[:100]}...")
-            
-            # Add timestamp to prevent caching
-            import time
-            timestamp = int(time.time() * 1000)  # milliseconds
-            print(f"DEBUG: Updating HTML with timestamp {timestamp}")
-            
-            return gr.update(value=f"""
-            <div style="width: 100%; height: 500px; background: #f8f8f8; border: 2px solid #e0e0e0; border-radius: 12px; 
-                        position: relative; display: flex; align-items: center; justify-content: center;"
-                 onmouseenter="this.querySelector('#arrow-controls').style.opacity='1'"
-                 onmouseleave="this.querySelector('#arrow-controls').style.opacity='0'">
-                
-                <!-- Image with timestamp to prevent caching -->
-                <img src="{data_url}" style="max-width: 100%; max-height: 100%; object-fit: contain;" data-timestamp="{timestamp}">
-                
-                <!-- Arrow controls -->
-                <div id="arrow-controls" style="position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s ease; z-index: 10;">
-                    
-                    <!-- Left Arrow -->
-                    <button onclick="
-                        console.log('Left arrow clicked');
-                        var azInputElement = document.getElementById('js-azimuth');
-                        console.log('azInputElement:', azInputElement);
-                        if (!azInputElement) {{ console.error('js-azimuth element not found'); return; }}
-                        
-                        // Try multiple selectors for Gradio textbox input
-                        var azInput = azInputElement.querySelector('input') || 
-                                     azInputElement.querySelector('textarea') ||
-                                     azInputElement.querySelector('[contenteditable]') ||
-                                     azInputElement.querySelector('.gr-textbox input') ||
-                                     azInputElement.querySelector('input[type=text]');
-                        
-                        console.log('azInput:', azInput);
-                        console.log('All inputs in element:', azInputElement.querySelectorAll('input, textarea'));
-                        
-                        if (!azInput) {{ 
-                            console.error('No input found. Element HTML:', azInputElement.innerHTML);
-                            console.error('Trying to find any input in the container...');
-                            var allInputs = document.querySelectorAll('#js-azimuth input, #js-azimuth textarea');
-                            console.log('All matching inputs:', allInputs);
-                            if (allInputs.length > 0) azInput = allInputs[0];
-                        }}
-                        
-                        if (!azInput) {{ console.error('Still no input found'); return; }}
-                        
-                        var currentAz = parseInt(azInput.value) || 0;
-                        var newAz = (currentAz - 45 + 360) % 360;
-                        console.log('Setting azimuth from', currentAz, 'to', newAz);
-                        azInput.value = newAz;
-                        azInput.dispatchEvent(new Event('input', {{bubbles: true}}));
-                        azInput.dispatchEvent(new Event('change', {{bubbles: true}}));
-                        var statusAz = document.getElementById('status-az');
-                        if (statusAz) statusAz.textContent = newAz;
-                    "
-                    style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); 
-                           width: 60px; height: 60px; background: rgba(0,255,136,0.9); border: none; 
-                           border-radius: 50%; color: white; font-size: 24px; cursor: pointer;
-                           box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: transform 0.2s;"
-                    onmouseover="this.style.transform += ' scale(1.1)'" 
-                    onmouseout="this.style.transform = this.style.transform.replace(' scale(1.1)', '')"
-                    title="Rotate Left">
-                        ←
-                    </button>
-                    
-                    <!-- Right Arrow -->
-                    <button onclick="
-                        console.log('Right arrow clicked');
-                        var azInputElement = document.getElementById('js-azimuth');
-                        if (!azInputElement) {{ console.error('js-azimuth element not found'); return; }}
-                        var azInput = azInputElement.querySelector('input') || azInputElement.querySelector('textarea');
-                        if (!azInput) {{ console.error('input within js-azimuth not found'); return; }}
-                        var currentAz = parseInt(azInput.value) || 0;
-                        var newAz = (currentAz + 45) % 360;
-                        console.log('Setting azimuth from', currentAz, 'to', newAz);
-                        azInput.value = newAz;
-                        azInput.dispatchEvent(new Event('input', {{bubbles: true}}));
-                        azInput.dispatchEvent(new Event('change', {{bubbles: true}}));
-                        var statusAz = document.getElementById('status-az');
-                        if (statusAz) statusAz.textContent = newAz;
-                    "
-                    style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); 
-                           width: 60px; height: 60px; background: rgba(0,255,136,0.9); border: none; 
-                           border-radius: 50%; color: white; font-size: 24px; cursor: pointer;
-                           box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: transform 0.2s;"
-                    onmouseover="this.style.transform += ' scale(1.1)'" 
-                    onmouseout="this.style.transform = this.style.transform.replace(' scale(1.1)', '')"
-                    title="Rotate Right">
-                        →
-                    </button>
-                    
-                    <!-- Up Arrow -->
-                    <button onclick="
-                        console.log('Up arrow clicked');
-                        var elInputElement = document.getElementById('js-elevation');
-                        if (!elInputElement) {{ console.error('js-elevation element not found'); return; }}
-                        var elInput = elInputElement.querySelector('input') || elInputElement.querySelector('textarea');
-                        if (!elInput) {{ console.error('input within js-elevation not found'); return; }}
-                        var currentEl = parseInt(elInput.value) || 0;
-                        var newEl = Math.min(60, currentEl + 30);
-                        console.log('Setting elevation from', currentEl, 'to', newEl);
-                        elInput.value = newEl;
-                        elInput.dispatchEvent(new Event('input', {{bubbles: true}}));
-                        elInput.dispatchEvent(new Event('change', {{bubbles: true}}));
-                        var statusEl = document.getElementById('status-el');
-                        if (statusEl) statusEl.textContent = newEl;
-                    "
-                    style="position: absolute; top: 20px; left: 50%; transform: translateX(-50%); 
-                           width: 60px; height: 60px; background: rgba(255,105,180,0.9); border: none; 
-                           border-radius: 50%; color: white; font-size: 24px; cursor: pointer;
-                           box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: transform 0.2s;"
-                    onmouseover="this.style.transform += ' scale(1.1)'" 
-                    onmouseout="this.style.transform = this.style.transform.replace(' scale(1.1)', '')"
-                    title="Look Up">
-                        ↑
-                    </button>
-                    
-                    <!-- Down Arrow -->
-                    <button onclick="
-                        console.log('Down arrow clicked');
-                        var elInputElement = document.getElementById('js-elevation');
-                        if (!elInputElement) {{ console.error('js-elevation element not found'); return; }}
-                        var elInput = elInputElement.querySelector('input') || elInputElement.querySelector('textarea');
-                        if (!elInput) {{ console.error('input within js-elevation not found'); return; }}
-                        var currentEl = parseInt(elInput.value) || 0;
-                        var newEl = Math.max(-30, currentEl - 30);
-                        console.log('Setting elevation from', currentEl, 'to', newEl);
-                        elInput.value = newEl;
-                        elInput.dispatchEvent(new Event('input', {{bubbles: true}}));
-                        elInput.dispatchEvent(new Event('change', {{bubbles: true}}));
-                        var statusEl = document.getElementById('status-el');
-                        if (statusEl) statusEl.textContent = newEl;
-                    "
-                    style="position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); 
-                           width: 60px; height: 60px; background: rgba(255,105,180,0.9); border: none; 
-                           border-radius: 50%; color: white; font-size: 24px; cursor: pointer;
-                           box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: transform 0.2s;"
-                    onmouseover="this.style.transform += ' scale(1.1)'" 
-                    onmouseout="this.style.transform = this.style.transform.replace(' scale(1.1)', '')"
-                    title="Look Down">
-                        ↓
-                    </button>
-                    
-                    <!-- Zoom Controls -->
-                    <div style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); 
-                                display: flex; gap: 15px;">
-                        
-                        <button onclick="
-                            console.log('Zoom out clicked');
-                            var distInputElement = document.getElementById('js-distance');
-                            if (!distInputElement) {{ console.error('js-distance element not found'); return; }}
-                            var distInput = distInputElement.querySelector('input') || distInputElement.querySelector('textarea');
-                            if (!distInput) {{ console.error('input within js-distance not found'); return; }}
-                            var currentDist = parseFloat(distInput.value) || 1.0;
-                            var newDist = Math.min(1.8, currentDist + 0.4);
-                            console.log('Setting distance from', currentDist, 'to', newDist);
-                            distInput.value = newDist.toFixed(1);
-                            distInput.dispatchEvent(new Event('input', {{bubbles: true}}));
-                            distInput.dispatchEvent(new Event('change', {{bubbles: true}}));
-                            var statusDist = document.getElementById('status-dist');
-                            if (statusDist) statusDist.textContent = newDist.toFixed(1);
-                        "
-                        style="width: 55px; height: 55px; background: rgba(255,165,0,0.9); border: none; 
-                               border-radius: 50%; color: white; font-size: 24px; cursor: pointer;
-                               box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: transform 0.2s;"
-                        onmouseover="this.style.transform = 'scale(1.1)'" 
-                        onmouseout="this.style.transform = ''"
-                        title="Zoom Out">
-                            −
-                        </button>
-                        
-                        <button onclick="
-                            console.log('Zoom in clicked');
-                            var distInputElement = document.getElementById('js-distance');
-                            if (!distInputElement) {{ console.error('js-distance element not found'); return; }}
-                            var distInput = distInputElement.querySelector('input') || distInputElement.querySelector('textarea');
-                            if (!distInput) {{ console.error('input within js-distance not found'); return; }}
-                            var currentDist = parseFloat(distInput.value) || 1.0;
-                            var newDist = Math.max(0.6, currentDist - 0.4);
-                            console.log('Setting distance from', currentDist, 'to', newDist);
-                            distInput.value = newDist.toFixed(1);
-                            distInput.dispatchEvent(new Event('input', {{bubbles: true}}));
-                            distInput.dispatchEvent(new Event('change', {{bubbles: true}}));
-                            var statusDist = document.getElementById('status-dist');
-                            if (statusDist) statusDist.textContent = newDist.toFixed(1);
-                        "
-                        style="width: 55px; height: 55px; background: rgba(255,165,0,0.9); border: none; 
-                               border-radius: 50%; color: white; font-size: 24px; cursor: pointer;
-                               box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: transform 0.2s;"
-                        onmouseover="this.style.transform = 'scale(1.1)'" 
-                        onmouseout="this.style.transform = ''"
-                        title="Zoom In">
-                            +
-                        </button>
-                    </div>
-                    
-                    <!-- Status Display -->
-                    <div style="position: absolute; top: 15px; right: 15px; background: rgba(0,0,0,0.85); 
-                                color: white; padding: 10px 14px; border-radius: 8px; font-family: monospace; 
-                                font-size: 13px; box-shadow: 0 4px 12px rgba(0,0,0,0.4);">
-                        <div>Az: <span id="status-az">0</span>° | El: <span id="status-el">0</span>° | Dist: <span id="status-dist">1.0</span></div>
-                    </div>
-                </div>
-            </div>
-            """)
-        
-        def handle_parameter_change(az, el, dist, input_image, seed_val, randomize_seed_val, guidance_val, steps_val, h_val, w_val):
-            """Handle camera parameter changes and generate new view."""
-            try:
-                azimuth = float(az)
-                elevation = float(el) 
-                distance = float(dist)
-                
-                # Build prompt
-                prompt = build_camera_prompt(azimuth, elevation, distance)
-                
-                if input_image is not None:
-                    # Generate new image using the actual Qwen model
-                    generated_image, final_seed, final_prompt = infer_camera_edit(
-                        image=input_image,
-                        azimuth=azimuth,
-                        elevation=elevation,
-                        distance=distance,
-                        seed=seed_val,
-                        randomize_seed=randomize_seed_val,
-                        guidance_scale=guidance_val,
-                        num_inference_steps=steps_val,
-                        height=int(h_val),
-                        width=int(w_val)
-                    )
-                    
-                    # Update the HTML display with the generated image
-                    updated_html = show_uploaded_image_with_arrows(generated_image)
-                    return updated_html, prompt, f"Generated view: Az={azimuth}°, El={elevation}°, Dist={distance}, Seed={final_seed}"
-                
-                return gr.update(), prompt, f"Parameters updated: Az={azimuth}°, El={elevation}°, Dist={distance}"
-                
-            except Exception as e:
-                return gr.update(), f"Error: {str(e)}", f"Error processing parameters: {str(e)}"
-        
-        # Update dimensions when image is uploaded
-        image.upload(
-            fn=update_dimensions_on_upload,
-            inputs=[image],
-            outputs=[width, height]
-        )
-        
-        # Image upload handler
-        image.upload(
-            fn=show_uploaded_image_with_arrows,
-            inputs=[image],
-            outputs=[result_display]
-        )
-        
-        # Parameter change handlers (triggered by arrow clicks)
-        js_azimuth.change(
-            fn=handle_parameter_change,
-            inputs=[js_azimuth, js_elevation, js_distance, image, seed, randomize_seed, guidance_scale, num_inference_steps, height, width],
-            outputs=[result_display, prompt_display, debug_output]
+
+                status_box = gr.Textbox(
+                    label="Status",
+                    value="Ready — upload an image to begin",
+                    interactive=False,
+                    lines=1,
+                    elem_classes=["status-box"],
+                )
+
+        gr.HTML('<hr class="section-divider">')
+        gr.Markdown("### Generated Views")
+
+        gallery_state = gr.State([])
+        gallery = gr.Gallery(
+            label="",
+            show_label=False,
+            columns=6,
+            height=190,
+            object_fit="cover",
+            allow_preview=True,
         )
-        
-        js_elevation.change(
-            fn=handle_parameter_change,
-            inputs=[js_azimuth, js_elevation, js_distance, image, seed, randomize_seed, guidance_scale, num_inference_steps, height, width],
-            outputs=[result_display, prompt_display, debug_output]
+
+        # ── Helpers ──────────────────────────────────────────────────────────
+
+        def _coerce_view(v):
+            """Extract (az, el, dist) safely from a dict or default."""
+            if isinstance(v, dict):
+                return float(v.get("az", 0)), float(v.get("el", 0)), float(v.get("dist", 1.0))
+            return 0.0, 0.0, 1.0
+
+        def _auto_dimensions(img):
+            if img is None:
+                return 1024, 1024
+            w, h = img.size
+            ar = w / h
+            if ar > 1:
+                nw = 1024
+                nh = round(1024 / ar / 32) * 32
+            else:
+                nh = 1024
+                nw = round(1024 * ar / 32) * 32
+            return max(256, min(1024, nw)), max(256, min(1024, nh))
+
+        # ── Event handlers ────────────────────────────────────────────────────
+
+        # BUG FIX: single upload handler (was two concurrent handlers → race condition)
+        def on_image_upload(img, current_view):
+            nw, nh = _auto_dimensions(img)
+            if img is None:
+                return DEFAULT_CAM_VALUE.copy(), nw, nh, "No image"
+            az, el, dist = _coerce_view(current_view)
+            return (
+                {"img": pil_to_data_url(img), "az": az, "el": el, "dist": dist},
+                nw,
+                nh,
+                "Image loaded — hover the viewer and click an arrow to generate",
+            )
+
+        def on_camera_submit(
+            current_view, src_img,
+            seed_val, rand_seed, guidance, steps, h, w,
+            gallery_imgs,
+        ):
+            try:
+                az, el, dist = _coerce_view(current_view)
+                prompt = build_camera_prompt(az, el, dist)
+
+                if src_img is None:
+                    return current_view, prompt, "⚠  Upload an image first", gallery_imgs, gallery_imgs
+
+                gen_img, final_seed, final_prompt = infer_camera_edit(
+                    image=src_img,
+                    azimuth=az, elevation=el, distance=dist,
+                    seed=seed_val, randomize_seed=rand_seed,
+                    guidance_scale=guidance,
+                    num_inference_steps=int(steps),
+                    height=int(h), width=int(w),
+                )
+
+                new_view     = {"img": pil_to_data_url(gen_img), "az": az, "el": el, "dist": dist}
+                gallery_imgs = list(gallery_imgs) + [gen_img]
+                status       = f"✓  {final_prompt}  |  seed {final_seed}"
+
+                return new_view, final_prompt, status, gallery_imgs, gallery_imgs
+
+            except Exception as exc:
+                return current_view, "", f"✗  {str(exc)}", gallery_imgs, gallery_imgs
+
+        image_input.upload(
+            fn=on_image_upload,
+            inputs=[image_input, cam_view],
+            outputs=[cam_view, width_sl, height_sl, status_box],
         )
-        
-        js_distance.change(
-            fn=handle_parameter_change,
-            inputs=[js_azimuth, js_elevation, js_distance, image, seed, randomize_seed, guidance_scale, num_inference_steps, height, width],
-            outputs=[result_display, prompt_display, debug_output]
+
+        cam_view.submit(
+            fn=on_camera_submit,
+            inputs=[
+                cam_view, image_input,
+                seed_slider, rand_seed_cb, guidance_sl, steps_sl,
+                height_sl, width_sl,
+                gallery_state,
+            ],
+            outputs=[cam_view, prompt_box, status_box, gallery_state, gallery],
         )
-    
+
     return demo
 
+
 if __name__ == "__main__":
-    demo = create_camera_control_app()
-    demo.launch()
+    demo = create_app()
+    # FIX: theme and css passed to launch() as required by Gradio 6.0
+    demo.launch(
+        debug=True,
+        theme=GRADIO_THEME,
+        css=GLOBAL_CSS,
+    )