Update app.py

app.py

@@ -1,395 +1,350 @@
-"""
-Camera Control App with Working Arrow Interface
-Complete version with Qwen model integration
-"""
-
 import gradio as gr
-import torch
 import numpy as np
 import random
-from PIL import Image
-import spaces
-from diffusers import DiffusionPipeline
+import torch
 import base64
 from io import BytesIO
+from PIL import Image
+from diffusers import FlowMatchEulerDiscreteScheduler, QwenImageEditPlusPipeline
+
+MAX_SEED = np.iinfo(np.int32).max
 
-# Model configuration
+# --- Model Loading ---
+dtype = torch.bfloat16
 device = "cuda" if torch.cuda.is_available() else "cpu"
-dtype = torch.bfloat16 if torch.cuda.is_available() and torch.cuda.is_bf16_supported() else torch.float16
 
-MAX_SEED = np.iinfo(np.int32).max
+# Initialize pipe as None - will be loaded when needed
 pipe = None
 
 def load_model():
-    """Load the Qwen diffusion model with camera control LoRAs."""
+    """Load the model only when needed to avoid initialization errors."""
     global pipe
     if pipe is None:
-        pipe = DiffusionPipeline.from_pretrained(
-            "multimodalart/qwen-image-multiple-angles-3d-camera",
-            torch_dtype=dtype,
+        pipe = QwenImageEditPlusPipeline.from_pretrained(
+            "Qwen/Qwen-Image-Edit-2511",
+            torch_dtype=dtype
         ).to(device)
-        pipe.load_lora_weights("multimodalart/qwen-image-multiple-angles-3d-camera", weight_name="lightning.safetensors")
-        pipe.fuse_lora(lora_scale=1.0)
-        pipe.load_lora_weights("multimodalart/qwen-image-multiple-angles-3d-camera", weight_name="multi_angles.safetensors", adapter_name="multi_angles")
-        pipe.set_adapters(["default", "multi_angles"], adapter_weights=[1.0, 1.0])
+
+        # 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"
+        )
+
+        # 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"
+        )
+
+        pipe.set_adapters(["lightning", "angles"], adapter_weights=[1.0, 1.0])
     return pipe
 
-# Camera parameter mappings
-azimuth_mapping = {
-    0: "front view", 
+# --- Camera Parameter Mappings ---
+AZIMUTH_MAP = {
+    0: "front view",
     45: "front-right quarter view", 
     90: "right side view",
-    135: "back-right quarter view", 
-    180: "back view", 
+    135: "back-right quarter view",
+    180: "back view",
     225: "back-left quarter view",
     270: "left side view", 
     315: "front-left quarter view"
 }
 
-elevation_mapping = {
-    -30: "low-angle shot", 
+ELEVATION_MAP = {
+    -30: "low-angle shot",
     0: "eye-level shot", 
-    30: "elevated shot", 
+    30: "elevated shot",
     60: "high-angle shot"
 }
 
-distance_mapping = {
-    0.6: "close-up", 
-    1.0: "medium shot", 
+DISTANCE_MAP = {
+    0.6: "close-up",
+    1.0: "medium shot",
     1.8: "wide shot"
 }
 
 def snap_to_nearest(value, steps):
-    """Snap a value to the nearest step in a list."""
+    """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 numerical parameters."""
+    """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]
     
-    azimuth_snapped = snap_to_nearest(azimuth, azimuth_steps)
-    elevation_snapped = snap_to_nearest(elevation, elevation_steps)
-    distance_snapped = snap_to_nearest(distance, distance_steps)
+    az_snap = snap_to_nearest(azimuth, azimuth_steps)
+    el_snap = snap_to_nearest(elevation, elevation_steps)
+    dist_snap = snap_to_nearest(distance, distance_steps)
     
-    azimuth_name = azimuth_mapping[azimuth_snapped]
-    elevation_name = elevation_mapping[elevation_snapped]
-    distance_name = distance_mapping[distance_snapped]
+    az_name = AZIMUTH_MAP[az_snap]
+    el_name = ELEVATION_MAP[el_snap]
+    dist_name = DISTANCE_MAP[dist_snap]
     
-    return f"<sks> {azimuth_name} {elevation_name} {distance_name}"
-
-@spaces.GPU(duration=5)
-def infer_camera_edit(
-    image: Image.Image,
-    azimuth: float = 0.0,
-    elevation: float = 0.0,
-    distance: float = 1.0,
-    seed: int = 0,
-    randomize_seed: bool = True,
-    guidance_scale: float = 1.0,
-    num_inference_steps: int = 4,
-    height: int = 1024,
-    width: int = 1024,
-):
-    """Generate new camera view using Qwen model."""
-    prompt = build_camera_prompt(azimuth, elevation, distance)
-    print(f"Generated Prompt: {prompt}")
+    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."""
     if randomize_seed:
         seed = random.randint(0, MAX_SEED)
+    
     generator = torch.Generator(device=device).manual_seed(seed)
-
-    if image is None:
-        raise gr.Error("Please upload an image first.")
-
-    pil_image = image.convert("RGB") if isinstance(image, Image.Image) else Image.open(image).convert("RGB")
-
-    # Load model only when needed
-    current_pipe = load_model()
-
-    result = current_pipe(
-        image=[pil_image],
+    
+    # Build the camera prompt
+    prompt = build_camera_prompt(azimuth, elevation, distance)
+    
+    # Load model if not already loaded
+    model = load_model()
+    
+    # Generate the new view
+    result = model(
+        image=image,
         prompt=prompt,
-        height=height if height != 0 else None,
-        width=width if width != 0 else None,
-        num_inference_steps=num_inference_steps,
-        generator=generator,
+        height=height,
+        width=width,
         guidance_scale=guidance_scale,
-        num_images_per_prompt=1,
+        num_inference_steps=num_inference_steps,
+        generator=generator
     ).images[0]
-
+    
     return result, seed, prompt
 
 def create_camera_control_app():
-    """Create the complete working camera control app."""
+    """Create the complete camera control app."""
     
-    with gr.Blocks(title="Camera Control with Directional Arrows", theme=gr.themes.Soft()) as demo:
+    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 the directional arrows to control camera angles")
+        gr.Markdown("Upload an image and use arrows to control camera angles for 3D view generation")
         
         with gr.Row():
-            # Left column: Input image and settings
+            # 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, can be hidden later)
+                # 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=10, 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",
+                    label="Current Camera Prompt", 
                     value="<sks> front view eye-level shot medium shot",
                     interactive=False
                 )
                 
-                # Advanced settings
-                with gr.Accordion("⚙️ Advanced Settings", open=False):
-                    seed = gr.Slider(
-                        label="Seed",
-                        minimum=0,
-                        maximum=MAX_SEED,
-                        step=1,
-                        value=0,
-                    )
-                    randomize_seed = gr.Checkbox(label="Randomize seed", value=True)
-                    
-                    with gr.Row():
-                        guidance_scale = gr.Slider(
-                            label="Guidance scale",
-                            minimum=0.1,
-                            maximum=2.0,
-                            step=0.1,
-                            value=1.0,
-                        )
-                        num_inference_steps = gr.Slider(
-                            label="Number of inference steps",
-                            minimum=1,
-                            maximum=8,
-                            step=1,
-                            value=4,
-                        )
-                    
-                    with gr.Row():
-                        height = gr.Slider(
-                            label="Height",
-                            minimum=256,
-                            maximum=1024,
-                            step=32,
-                            value=1024,
-                        )
-                        width = gr.Slider(
-                            label="Width", 
-                            minimum=256,
-                            maximum=1024,
-                            step=32,
-                            value=1024,
-                        )
-                        
-            # Right column: Interactive image view 
+            # Right column: Interactive image view
             with gr.Column(scale=1):
                 gr.Markdown("### 🎯 Interactive Image View")
-                gr.Markdown("*Upload an image, then hover to see camera controls and click arrows to generate new views*")
+                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>
+                    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"
                 )
                 
-        # ===== FUNCTIONS INSIDE BLOCKS CONTEXT =====
-        
-        def update_dimensions_on_upload(input_image):
-            \"\"\"Compute recommended dimensions preserving aspect ratio.\"\"\"
-            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
+                # 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.\"\"\"
+            """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>
+                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\")
+            uploaded_image.save(buffered, format="PNG")
             img_str = base64.b64encode(buffered.getvalue()).decode()
-            data_url = f\"data:image/png;base64,{img_str}\"
+            data_url = f"data:image/png;base64,{img_str}"
             
-            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'\">
+            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 -->
-                <img src=\"{data_url}\" style=\"max-width: 100%; max-height: 100%; object-fit: contain;\">
+                <img src="{data_url}" style="max-width: 100%; max-height: 100%; object-fit: contain;">
                 
                 <!-- Arrow controls -->
-                <div id=\"arrow-controls\" style=\"position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s ease; z-index: 10;\">
+                <div id="arrow-controls" style="position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s ease; z-index: 10;">
                     
-                    <!-- Left Arrow (Azimuth -45°) -->
-                    <button onclick=\"
+                    <!-- Left Arrow -->
+                    <button onclick="
                         var azInput = document.getElementById('js-azimuth').querySelector('input');
                         var newAz = (parseInt(azInput.value) - 45 + 360) % 360;
                         azInput.value = newAz;
                         azInput.dispatchEvent(new Event('input', {{bubbles: true}}));
                         document.getElementById('status-az').textContent = newAz;
-                    \"
-                    style=\"position: absolute; left: 20px; top: 50%; transform: translateY(-50%); 
-                           width: 60px; height: 60px; background: rgba(0,255,136,0.95); border: none; 
+                    "
+                    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 6px 20px rgba(0,0,0,0.4); 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 (Azimuth -45°)\">
+                           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 (Azimuth +45°) -->
-                    <button onclick=\"
+                    <!-- Right Arrow -->
+                    <button onclick="
                         var azInput = document.getElementById('js-azimuth').querySelector('input');
                         var newAz = (parseInt(azInput.value) + 45) % 360;
                         azInput.value = newAz;
                         azInput.dispatchEvent(new Event('input', {{bubbles: true}}));
                         document.getElementById('status-az').textContent = newAz;
-                    \"
-                    style=\"position: absolute; right: 20px; top: 50%; transform: translateY(-50%); 
-                           width: 60px; height: 60px; background: rgba(0,255,136,0.95); border: none; 
+                    "
+                    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 6px 20px rgba(0,0,0,0.4); 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 (Azimuth +45°)\">
+                           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 (Elevation +30°) -->
-                    <button onclick=\"
+                    <!-- Up Arrow -->
+                    <button onclick="
                         var elInput = document.getElementById('js-elevation').querySelector('input');
                         var newEl = Math.min(60, parseInt(elInput.value) + 30);
                         elInput.value = newEl;
                         elInput.dispatchEvent(new Event('input', {{bubbles: true}}));
                         document.getElementById('status-el').textContent = newEl;
-                    \"
-                    style=\"position: absolute; top: 20px; left: 50%; transform: translateX(-50%); 
-                           width: 60px; height: 60px; background: rgba(255,105,180,0.95); border: none; 
+                    "
+                    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 6px 20px rgba(0,0,0,0.4); 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 (Elevation +30°)\">
+                           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 (Elevation -30°) -->
-                    <button onclick=\"
+                    <!-- Down Arrow -->
+                    <button onclick="
                         var elInput = document.getElementById('js-elevation').querySelector('input');
                         var newEl = Math.max(-30, parseInt(elInput.value) - 30);
                         elInput.value = newEl;
                         elInput.dispatchEvent(new Event('input', {{bubbles: true}}));
                         document.getElementById('status-el').textContent = newEl;
-                    \"
-                    style=\"position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); 
-                           width: 60px; height: 60px; background: rgba(255,105,180,0.95); border: none; 
+                    "
+                    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 6px 20px rgba(0,0,0,0.4); 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 (Elevation -30°)\">
+                           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;\">
+                    <div style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); 
+                                display: flex; gap: 15px;">
                         
-                        <!-- Zoom Out -->
-                        <button onclick=\"
+                        <button onclick="
                             var distInput = document.getElementById('js-distance').querySelector('input');
                             var newDist = Math.min(1.8, parseFloat(distInput.value) + 0.4);
                             distInput.value = newDist.toFixed(1);
                             distInput.dispatchEvent(new Event('input', {{bubbles: true}}));
                             document.getElementById('status-dist').textContent = newDist.toFixed(1);
-                        \"
-                        style=\"width: 55px; height: 55px; background: rgba(255,165,0,0.95); border: none; 
-                               border-radius: 50%; color: white; font-size: 28px; cursor: pointer;
-                               box-shadow: 0 6px 20px rgba(0,0,0,0.4); transition: transform 0.2s;\"
-                        onmouseover=\"this.style.transform = 'scale(1.1)'\" 
-                        onmouseout=\"this.style.transform = ''\"
-                        title=\"Zoom Out (Distance +0.4)\">
+                        "
+                        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>
                         
-                        <!-- Zoom In -->
-                        <button onclick=\"
+                        <button onclick="
                             var distInput = document.getElementById('js-distance').querySelector('input');
                             var newDist = Math.max(0.6, parseFloat(distInput.value) - 0.4);
                             distInput.value = newDist.toFixed(1);
                             distInput.dispatchEvent(new Event('input', {{bubbles: true}}));
                             document.getElementById('status-dist').textContent = newDist.toFixed(1);
-                        \"
-                        style=\"width: 55px; height: 55px; background: rgba(255,165,0,0.95); border: none; 
+                        "
+                        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 6px 20px rgba(0,0,0,0.4); transition: transform 0.2s;\"
-                        onmouseover=\"this.style.transform = 'scale(1.1)'\" 
-                        onmouseout=\"this.style.transform = ''\"
-                        title=\"Zoom In (Distance -0.4)\">
+                               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.9); 
-                                color: white; padding: 12px 16px; border-radius: 10px; font-family: monospace; 
-                                font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,0.4); min-width: 200px;\">
-                        <div style=\"margin-bottom: 4px;\">Az: <span id=\"status-az\">0</span>° | El: <span id=\"status-el\">0</span>° | Dist: <span id=\"status-dist\">1.0</span></div>
-                        <div id=\"status-prompt\" style=\"color: #00ff88; font-size: 12px; line-height: 1.3;\">
-                            <sks> front view eye-level shot medium shot
-                        </div>
+                    <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.\"\"\"
+            """Handle camera parameter changes and generate new view."""
             try:
                 azimuth = float(az)
                 elevation = float(el) 
@@ -403,62 +358,48 @@ def create_camera_control_app():
                     generated_image, final_seed, final_prompt = infer_camera_edit(
                         image=input_image,
                         azimuth=azimuth,
-                        elevation=elevation, 
+                        elevation=elevation,
                         distance=distance,
                         seed=seed_val,
                         randomize_seed=randomize_seed_val,
                         guidance_scale=guidance_val,
                         num_inference_steps=steps_val,
-                        height=h_val,
-                        width=w_val
+                        height=int(h_val),
+                        width=int(w_val)
                     )
                     
-                    # Show generated image with arrows
-                    html_result = show_uploaded_image_with_arrows(generated_image)
-                    return html_result.value, final_seed, final_prompt
+                    # Update the HTML display with the generated image
+                    return show_uploaded_image_with_arrows(generated_image).value, prompt, f"Generated view: Az={azimuth}°, El={elevation}°, Dist={distance}, Seed={final_seed}"
                 
-                return gr.update(), seed_val, prompt
+                return gr.update(), prompt, f"Parameters updated: Az={azimuth}°, El={elevation}°, Dist={distance}"
                 
             except Exception as e:
-                print(f\"Generation error: {e}\")
-                import traceback
-                traceback.print_exc()
-                raise gr.Error(f\"Generation failed: {str(e)}\")
+                return gr.update(), f"Error: {str(e)}", f"Error processing parameters: {str(e)}"
         
-        # ===== EVENT HANDLERS INSIDE BLOCKS CONTEXT =====
-        
-        # Auto-update dimensions when image is uploaded
+        # Update dimensions when image is uploaded
         image.upload(
             fn=update_dimensions_on_upload,
             inputs=[image],
             outputs=[width, height]
         )
         
-        # Show uploaded image immediately
+        # Image upload handler
         image.upload(
             fn=show_uploaded_image_with_arrows,
             inputs=[image],
             outputs=[result_display]
         )
         
-        # Auto-generation handler triggered by input changes
-        def auto_generate_on_change(js_az, js_el, js_dist, input_image, seed_val, randomize_seed_val, guidance_val, steps_val, h_val, w_val):
-            \"\"\"Auto-generate when camera parameters change from arrow clicks.\"\"\"
-            if input_image is None:
-                return gr.update(), seed_val, \"<sks> front view eye-level shot medium shot\"
-            
-            return handle_parameter_change(js_az, js_el, js_dist, input_image, seed_val, randomize_seed_val, guidance_val, steps_val, h_val, w_val)
-        
-        # Set up auto-generation on parameter changes
-        for input_component in [js_azimuth, js_elevation, js_distance]:
-            input_component.change(
-                fn=auto_generate_on_change,
+        # Parameter change handlers (triggered by arrow clicks)
+        for param_input in [js_azimuth, js_elevation, js_distance]:
+            param_input.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, seed, prompt_display]
+                outputs=[result_display, prompt_display, debug_output]
             )
     
     return demo
 
-if __name__ == \"__main__\":
+if __name__ == "__main__":
     demo = create_camera_control_app()
     demo.launch()