Update app.py

app.py

@@ -1,1377 +1,328 @@
-#fifteenth
-
-
 import gradio as gr
-import numpy as np
-import random
-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 Loading ---
-dtype = torch.bfloat16
-device = "cuda" if torch.cuda.is_available() else "cpu"
-
-# Initialize pipe as None - will be loaded when needed
-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
-        ).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"
-        )
-
-        # 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
+import torch
+from diffusers import StableDiffusionXLPipeline
 
-# --- Mappings ---
+# Initialize the model (placeholder - replace with your actual model)
+def init_model():
+    """Initialize the Qwen model with camera control LoRAs"""
+    # This is a placeholder - replace with actual model initialization
+    try:
+        # pipe = StableDiffusionXLPipeline.from_pretrained(
+        #     "Qwen/Qwen2-VL-7B-Instruct", 
+        #     torch_dtype=torch.float16,
+        #     device_map="auto"
+        # )
+        # return pipe
+        return None  # Placeholder
+    except:
+        return None
+
+# 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",
-    225: "back-left quarter view",
-    270: "left side view",
-    315: "front-left quarter view"
+    0: "front 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"
 }
-
 ELEVATION_MAP = {
-    -30: "low-angle shot",
-    0: "eye-level shot", 
-    30: "elevated shot",
-    60: "high-angle shot"
+    -30: "low-angle shot", 0: "eye-level shot", 30: "elevated shot", 60: "high-angle shot"
 }
-
 DISTANCE_MAP = {
-    0.6: "close-up",
-    1.0: "medium shot",
-    1.8: "wide shot"
+    0.6: "close-up", 1.0: "medium shot", 1.8: "wide shot"
 }
 
-def snap_to_nearest(value, options):
-    return min(options, key=lambda x: abs(x - value))
+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: float, elevation: float, distance: float) -> str:
-    azimuth_snapped = snap_to_nearest(azimuth, list(AZIMUTH_MAP.keys()))
-    elevation_snapped = snap_to_nearest(elevation, list(ELEVATION_MAP.keys()))
-    distance_snapped = snap_to_nearest(distance, list(DISTANCE_MAP.keys()))
+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]
     
-    azimuth_name = AZIMUTH_MAP[azimuth_snapped]
-    elevation_name = ELEVATION_MAP[elevation_snapped]
-    distance_name = DISTANCE_MAP[distance_snapped]
+    az_snap = snap_to_nearest(azimuth, azimuth_steps)
+    el_snap = snap_to_nearest(elevation, elevation_steps)
+    dist_snap = snap_to_nearest(distance, distance_steps)
     
-    return f"<sks> {azimuth_name} {elevation_name} {distance_name}"
-
-def gpu_decorator(func):
-    """Decorator that applies @spaces.GPU if available, otherwise returns function unchanged."""
-    try:
-        import spaces
-        return spaces.GPU(func)
-    except ImportError:
-        return func
-
-@gpu_decorator
-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,
-):
-    prompt = build_camera_prompt(azimuth, elevation, distance)
-    print(f"Generated Prompt: {prompt}")
-
-    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],
-        prompt=prompt,
-        height=height if height != 0 else None,
-        width=width if width != 0 else None,
-        num_inference_steps=num_inference_steps,
-        generator=generator,
-        guidance_scale=guidance_scale,
-        num_images_per_prompt=1,
-    ).images[0]
-
-    return result, seed, prompt
-
-# --- Arrow Camera Control Function ---
-def create_arrow_camera_control(value=None, imageUrl=None, **kwargs):
-    """
-    Creates an HTML component with directional arrows overlaid on image for camera control.
-    """
-    if value is None:
-        value = {"azimuth": 0, "elevation": 0, "distance": 1.0}
+    az_name = AZIMUTH_MAP[az_snap]
+    el_name = ELEVATION_MAP[el_snap]
+    dist_name = DISTANCE_MAP[dist_snap]
     
-    # Simple HTML template that should definitely render
-    html_template = f"""
-    <div style="position: relative; width: 100%; height: 400px; background: #f0f0f0; border-radius: 12px; overflow: hidden; border: 2px solid #ddd; min-height: 400px;">
-        <!-- Image display area -->
-        <div id="image-display" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #1a1a1a;">
-            <img id="preview-image" src="" alt="Upload an image" style="max-width: 100%; max-height: 100%; object-fit: contain; display: none;">
-            <div id="placeholder-text" style="color: #888; font-size: 16px; text-align: center;">
-                <div style="font-size: 48px; margin-bottom: 10px;">📸</div>
-                Upload an image to begin
-            </div>
-        </div>
-        
-        <!-- Camera controls overlay -->
-        <div style="position: absolute; inset: 0; pointer-events: none;">
-            <!-- Left arrow (azimuth -45°) -->
-            <button class="arrow-btn" data-action="azimuth" data-value="-45" 
-                    style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); 
-                           width: 50px; height: 50px; background: rgba(0,255,136,0.8); border: none; 
-                           border-radius: 50%; color: white; font-size: 20px; cursor: pointer; 
-                           pointer-events: auto; transition: all 0.2s; z-index: 10;">
-                ←
-            </button>
-            
-            <!-- Right arrow (azimuth +45°) -->
-            <button class="arrow-btn" data-action="azimuth" data-value="+45"
-                    style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); 
-                           width: 50px; height: 50px; background: rgba(0,255,136,0.8); border: none; 
-                           border-radius: 50%; color: white; font-size: 20px; cursor: pointer; 
-                           pointer-events: auto; transition: all 0.2s; z-index: 10;">
-                →
-            </button>
-            
-            <!-- Up arrow (elevation +30°) -->
-            <button class="arrow-btn" data-action="elevation" data-value="+30"
-                    style="position: absolute; top: 20px; left: 50%; transform: translateX(-50%); 
-                           width: 50px; height: 50px; background: rgba(255,105,180,0.8); border: none; 
-                           border-radius: 50%; color: white; font-size: 20px; cursor: pointer; 
-                           pointer-events: auto; transition: all 0.2s; z-index: 10;">
-                ↑
-            </button>
-            
-            <!-- Down arrow (elevation -30°) -->
-            <button class="arrow-btn" data-action="elevation" data-value="-30"
-                    style="position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); 
-                           width: 50px; height: 50px; background: rgba(255,105,180,0.8); border: none; 
-                           border-radius: 50%; color: white; font-size: 20px; cursor: pointer; 
-                           pointer-events: auto; transition: all 0.2s; z-index: 10;">
-                ↓
-            </button>
-            
-            <!-- Zoom controls at bottom -->
-            <div style="position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); 
-                        display: flex; gap: 10px; pointer-events: auto; z-index: 10;">
-                <!-- Zoom out (-) -->
-                <button class="arrow-btn" data-action="distance" data-value="+0.4"
-                        style="width: 45px; height: 45px; background: rgba(255,165,0,0.8); border: none; 
-                               border-radius: 50%; color: white; font-size: 24px; cursor: pointer; 
-                               transition: all 0.2s;">
-                    −
-                </button>
-                
-                <!-- Zoom in (+) -->
-                <button class="arrow-btn" data-action="distance" data-value="-0.4"
-                        style="width: 45px; height: 45px; background: rgba(255,165,0,0.8); border: none; 
-                               border-radius: 50%; color: white; font-size: 20px; cursor: pointer; 
-                               transition: all 0.2s;">
-                    +
-                </button>
-            </div>
-        </div>
-        
-        <!-- Status display -->
-        <div style="position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.8); 
-                   color: white; padding: 8px 12px; border-radius: 6px; font-family: monospace; 
-                   font-size: 12px; pointer-events: none; z-index: 10;">
-            <div id="camera-values">Az: {value['azimuth']}° | El: {value['elevation']}° | Dist: {value['distance']}</div>
-            <div id="prompt-preview" style="color: #00ff88; margin-top: 4px;"><sks> front view eye-level shot medium shot</div>
-        </div>
-    </div>
-    """
+    return f"<sks> {az_name} {el_name} {dist_name}"
+
+def generate_new_view(input_image, azimuth, elevation, distance, seed, randomize_seed, guidance_scale, num_inference_steps, height, width):
+    """Generate new camera view (placeholder - replace with actual model inference)."""
+    if input_image is None:
+        return None, seed, build_camera_prompt(azimuth, elevation, distance)
     
-    js_on_load = """
-    (() => {
-        const container = element.querySelector('#arrow-camera-container');
-        const previewImage = element.querySelector('#preview-image');
-        const placeholderText = element.querySelector('#placeholder-text');
-        const cameraValues = element.querySelector('#camera-values');
-        const promptPreview = element.querySelector('#prompt-preview');
-        const arrowBtns = element.querySelectorAll('.arrow-btn');
-        
-        // Camera state
-        let currentAzimuth = props.value?.azimuth || 0;
-        let currentElevation = props.value?.elevation || 0;
-        let currentDistance = props.value?.distance || 1.0;
-        
-        // Mappings for prompt building
-        const azimuthMap = {
-            0: "front 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"
-        };
-        const elevationMap = {
-            "-30": "low-angle shot", "0": "eye-level shot", "30": "elevated shot", "60": "high-angle shot"
-        };
-        const distanceMap = {
-            "0.6": "close-up", "1": "medium shot", "1.8": "wide shot"
-        };
-        
-        function snapToNearest(value, options) {
-            return options.reduce((prev, curr) => Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);
-        }
-        
-        function buildCameraPrompt(azimuth, elevation, distance) {
-            const azimuthSteps = [0, 45, 90, 135, 180, 225, 270, 315];
-            const elevationSteps = [-30, 0, 30, 60];
-            const distanceSteps = [0.6, 1.0, 1.8];
-            
-            const azSnap = snapToNearest(azimuth, azimuthSteps);
-            const elSnap = snapToNearest(elevation, elevationSteps);
-            const distSnap = snapToNearest(distance, distanceSteps);
-            
-            const azName = azimuthMap[azSnap];
-            const elName = elevationMap[String(elSnap)];
-            const distName = distanceMap[distSnap === 1 ? "1" : String(distSnap)];
-            
-            return `<sks> ${azName} ${elName} ${distName}`;
-        }
-        
-        function updateDisplay() {
-            // Update status display
-            cameraValues.textContent = `Az: ${currentAzimuth}° | El: ${currentElevation}° | Dist: ${currentDistance}`;
-            promptPreview.textContent = buildCameraPrompt(currentAzimuth, currentElevation, currentDistance);
-            
-            // Update props and trigger change event
-            props.value = {
-                azimuth: currentAzimuth,
-                elevation: currentElevation, 
-                distance: currentDistance
-            };
-            trigger('change', props.value);
-        }
-        
-        // Update image from props
-        function updateImage() {
-            if (props.imageUrl && props.imageUrl !== '') {
-                previewImage.src = props.imageUrl;
-                previewImage.style.display = 'block';
-                placeholderText.style.display = 'none';
-            } else {
-                previewImage.style.display = 'none';
-                placeholderText.style.display = 'block';
-            }
-        }
-        
-        // Arrow button click handlers
-        arrowBtns.forEach(btn => {
-            btn.addEventListener('mouseenter', () => {
-                btn.style.transform = btn.style.transform.replace('scale(1)', 'scale(1.1)');
-                if (!btn.style.transform.includes('scale')) {
-                    btn.style.transform += ' scale(1.1)';
-                }
-            });
-            
-            btn.addEventListener('mouseleave', () => {
-                btn.style.transform = btn.style.transform.replace('scale(1.1)', 'scale(1)');
-            });
-            
-            btn.addEventListener('click', (e) => {
-                const action = btn.dataset.action;
-                const value = parseFloat(btn.dataset.value);
-                
-                // Add click animation
-                btn.style.transform += ' scale(0.95)';
-                setTimeout(() => {
-                    btn.style.transform = btn.style.transform.replace('scale(0.95)', '');
-                }, 150);
-                
-                if (action === 'azimuth') {
-                    currentAzimuth = (currentAzimuth + value + 360) % 360;
-                } else if (action === 'elevation') {
-                    currentElevation = Math.max(-30, Math.min(60, currentElevation + value));
-                } else if (action === 'distance') {
-                    currentDistance = Math.max(0.6, Math.min(1.8, currentDistance + value));
-                }
-                
-                updateDisplay();
-            });
-        });
-        
-        // Watch for external prop changes
-        let lastImageUrl = props.imageUrl;
-        let lastValue = JSON.stringify(props.value);
+    try:
+        # Placeholder implementation - replace with actual model inference
+        prompt = build_camera_prompt(azimuth, elevation, distance)
         
-        setInterval(() => {
-            // Check for image URL changes
-            if (props.imageUrl !== lastImageUrl) {
-                lastImageUrl = props.imageUrl;
-                updateImage();
-            }
-            
-            // Check for value changes from external controls
-            const currentValueStr = JSON.stringify(props.value);
-            if (currentValueStr !== lastValue) {
-                lastValue = currentValueStr;
-                if (props.value && typeof props.value === 'object') {
-                    currentAzimuth = props.value.azimuth || currentAzimuth;
-                    currentElevation = props.value.elevation || currentElevation;
-                    currentDistance = props.value.distance || currentDistance;
-                    updateDisplay();
-                }
-            }
-        }, 100);
+        # For now, just return the original image as a placeholder
+        # In real implementation, this would call your Qwen model with camera parameters
+        return input_image, seed, prompt
         
-        // Initial setup
-        updateImage();
-        updateDisplay();
-    })();
-    """
-    
-    return gr.HTML(
-        value=html_template,
-        js_on_load=js_on_load,
-        **kwargs
-    )
-
-# --- UI ---
-css = '''
-#col-container { max-width: 1200px; margin: 0 auto; }
-.dark .progress-text { color: white !important; }
-#arrow-camera-control { min-height: 400px; }
-.arrow-btn:hover { opacity: 0.9; }
-.arrow-btn:active { transform: scale(0.95) !important; }
-'''
+    except Exception as e:
+        print(f"Generation error: {e}")
+        return None, seed, build_camera_prompt(azimuth, elevation, distance)
 
-def update_camera_with_image(image):
-    """Convert uploaded image to data URL for the camera control component."""
-    if image is None:
-        return gr.update(imageUrl=None)
+def create_camera_control_app():
+    """Create the working camera control app."""
     
-    # Convert PIL image to base64 data URL
-    buffered = BytesIO()
-    image.save(buffered, format="PNG")
-    img_str = base64.b64encode(buffered.getvalue()).decode()
-    data_url = f"data:image/png;base64,{img_str}"
-    return gr.update(imageUrl=data_url)
-
-def update_dimensions_on_upload(image):
-    """Compute recommended dimensions preserving aspect ratio."""
-    if image is None:
-        return 1024, 1024
-
-    original_width, original_height = image.size
-
-    if original_width > original_height:
-        new_width = 1024
-        aspect_ratio = original_height / original_width
-        new_height = int(new_width * aspect_ratio)
-    else:
-        new_height = 1024
-        aspect_ratio = original_width / original_height
-        new_width = int(new_height * aspect_ratio)
-
-    new_width = (new_width // 8) * 8
-    new_height = (new_height // 8) * 8
-
-    return new_width, new_height
-
-with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
-    gr.Markdown("""
-    # 🎯 Camera Control with Directional Arrows
-    
-    Upload an image and use the **directional arrows** to control camera angles:
-    - **🟢 Left/Right arrows**: Control azimuth (horizontal rotation)
-    - **🩷 Up/Down arrows**: Control elevation (vertical angle) 
-    - **🟠 +/- buttons**: Control distance (zoom in/out)
-    
-    The arrows give you the feeling of moving the camera around your subject!
-    """)
-    
-    with gr.Row():
-        # Left column: Input image and settings
-        with gr.Column(scale=1):
-            image = gr.Image(label="Upload Image", type="pil", height=400)
-            
-            # Hidden textboxes for JavaScript communication
-            js_azimuth = gr.Textbox("0", visible=False, elem_id="js-azimuth")
-            js_elevation = gr.Textbox("0", visible=False, elem_id="js-elevation") 
-            js_distance = gr.Textbox("1.0", visible=False, elem_id="js-distance")
-            
-            # Hidden button for triggering generation from JavaScript
-            hidden_generate_btn = gr.Button("Generate", visible=False, elem_id="hidden-generate-btn")
-            
-            prompt_display = gr.Textbox(
-                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)
-                guidance_scale = gr.Slider(label="Guidance Scale", minimum=1.0, maximum=10.0, step=0.1, value=1.0)
-                num_inference_steps = gr.Slider(label="Inference Steps", minimum=1, maximum=20, step=1, value=4)
-                height = gr.Slider(label="Height", minimum=256, maximum=2048, step=8, value=1024)
-                width = gr.Slider(label="Width", minimum=256, maximum=2048, step=8, value=1024)
+    with gr.Blocks(title="Camera Control with Directional Arrows - WORKING VERSION") 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")
         
-        # Right column: Interactive image viewer with hover controls
-        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*")
-            
-            # HTML component for interactive image display
-            result_display = gr.HTML(
-                value="""
-                <div id="result-container" 
-                     style="width: 100%; height: 500px; background: #f8f8f8; border: 2px solid #e0e0e0; border-radius: 12px; 
-                            position: relative; display: flex; align-items: center; justify-content: center; cursor: default;">
-                    
-                    <!-- Placeholder for no image -->
-                    <div id="no-result-placeholder" 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>
-                    
-                    <!-- Image display -->
-                    <img id="result-image" style="max-width: 100%; max-height: 100%; object-fit: contain; display: none;">
-                    
-                    <!-- Hover-activated arrow controls -->
-                    <div id="hover-controls" 
-                         style="position: absolute; inset: 0; pointer-events: none; opacity: 0; 
-                                transition: opacity 0.3s ease-in-out; z-index: 100;">
-                        
-                        <!-- Left arrow -->
-                        <button class="hover-arrow-btn" data-action="left" 
-                                style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); 
-                                       width: 60px; height: 60px; background: rgba(0,255,136,0.95); border: none; 
-                                       border-radius: 50%; color: white; font-size: 24px; font-weight: bold; cursor: pointer; 
-                                       pointer-events: auto; transition: all 0.2s ease; z-index: 101;
-                                       box-shadow: 0 6px 20px rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;">
-                            ←
-                        </button>
-                        
-                        <!-- Right arrow -->
-                        <button class="hover-arrow-btn" data-action="right"
-                                style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); 
-                                       width: 60px; height: 60px; background: rgba(0,255,136,0.95); border: none; 
-                                       border-radius: 50%; color: white; font-size: 24px; font-weight: bold; cursor: pointer; 
-                                       pointer-events: auto; transition: all 0.2s ease; z-index: 101;
-                                       box-shadow: 0 6px 20px rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;">
-                            →
-                        </button>
-                        
-                        <!-- Up arrow -->
-                        <button class="hover-arrow-btn" data-action="up"
-                                style="position: absolute; top: 20px; left: 50%; transform: translateX(-50%); 
-                                       width: 60px; height: 60px; background: rgba(255,105,180,0.95); border: none; 
-                                       border-radius: 50%; color: white; font-size: 24px; font-weight: bold; cursor: pointer; 
-                                       pointer-events: auto; transition: all 0.2s ease; z-index: 101;
-                                       box-shadow: 0 6px 20px rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;">
-                            ↑
-                        </button>
-                        
-                        <!-- Down arrow -->
-                        <button class="hover-arrow-btn" data-action="down"
-                                style="position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); 
-                                       width: 60px; height: 60px; background: rgba(255,105,180,0.95); border: none; 
-                                       border-radius: 50%; color: white; font-size: 24px; font-weight: bold; cursor: pointer; 
-                                       pointer-events: auto; transition: all 0.2s ease; z-index: 101;
-                                       box-shadow: 0 6px 20px rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;">
-                            ↓
-                        </button>
-                        
-                        <!-- Zoom controls -->
-                        <div style="position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); 
-                                    display: flex; gap: 15px; pointer-events: auto; z-index: 101;">
-                            <button class="hover-arrow-btn" data-action="zoom-out"
-                                    style="width: 55px; height: 55px; background: rgba(255,165,0,0.95); border: none; 
-                                           border-radius: 50%; color: white; font-size: 28px; font-weight: bold; cursor: pointer; 
-                                           transition: all 0.2s ease; box-shadow: 0 6px 20px rgba(0,0,0,0.4);
-                                           display: flex; align-items: center; justify-content: center;">
-                                −
-                            </button>
-                            
-                            <button class="hover-arrow-btn" data-action="zoom-in"
-                                    style="width: 55px; height: 55px; background: rgba(255,165,0,0.95); border: none; 
-                                           border-radius: 50%; color: white; font-size: 24px; font-weight: bold; cursor: pointer; 
-                                           transition: all 0.2s ease; box-shadow: 0 6px 20px rgba(0,0,0,0.4);
-                                           display: flex; align-items: center; justify-content: center;">
-                                +
-                            </button>
-                        </div>
-                        
-                        <!-- Status display -->
-                        <div id="hover-status" 
-                             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; z-index: 101; box-shadow: 0 6px 20px rgba(0,0,0,0.4);
-                                    min-width: 200px;">
-                            <div id="hover-camera-values" style="margin-bottom: 4px;">Az: 0° | El: 0° | Dist: 1.0</div>
-                            <div id="hover-prompt-preview" style="color: #00ff88; font-size: 12px; line-height: 1.3;"><sks> front view eye-level shot medium shot</div>
-                        </div>
-                    </div>
-                </div>
-                """,
-                js_on_load="""
-                (() => {
-                    const container = element.querySelector('#result-container');
-                    if (!container) return;
-                    
-                    const resultImage = container.querySelector('#result-image');
-                    const noResultPlaceholder = container.querySelector('#no-result-placeholder');
-                    const hoverControls = container.querySelector('#hover-controls');
-                    const hoverCameraValues = container.querySelector('#hover-camera-values');
-                    const hoverPromptPreview = container.querySelector('#hover-prompt-preview');
-                    
-                    let currentAzimuth = 0;
-                    let currentElevation = 0;
-                    let currentDistance = 1.0;
-                    let isGenerating = false;
-                    
-                    // Camera mappings
-                    const azimuthMap = {
-                        0: "front 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"
-                    };
-                    const elevationMap = {
-                        "-30": "low-angle shot", "0": "eye-level shot", "30": "elevated shot", "60": "high-angle shot"
-                    };
-                    const distanceMap = {
-                        "0.6": "close-up", "1": "medium shot", "1.8": "wide shot"
-                    };
-                    
-                    function snapToNearest(value, steps) {
-                        return steps.reduce((prev, curr) => Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);
-                    }
-                    
-                    function buildCameraPrompt(azimuth, elevation, distance) {
-                        const azimuthSteps = [0, 45, 90, 135, 180, 225, 270, 315];
-                        const elevationSteps = [-30, 0, 30, 60];
-                        const distanceSteps = [0.6, 1.0, 1.8];
-                        
-                        const azSnap = snapToNearest(azimuth, azimuthSteps);
-                        const elSnap = snapToNearest(elevation, elevationSteps);
-                        const distSnap = snapToNearest(distance, distanceSteps);
-                        
-                        const azName = azimuthMap[azSnap];
-                        const elName = elevationMap[String(elSnap)];
-                        const distName = distanceMap[distSnap === 1 ? "1" : String(distSnap)];
-                        
-                        return `<sks> ` + azName + ` ` + elName + ` ` + distName;
-                    }
-                    
-                    function updateDisplay() {
-                        hoverCameraValues.textContent = `Az: ` + currentAzimuth + `° | El: ` + currentElevation + `° | Dist: ` + currentDistance;
-                        hoverPromptPreview.textContent = buildCameraPrompt(currentAzimuth, currentElevation, currentDistance);
-                        updateGradioInputs();
-                    }
-                    
-                    function updateGradioInputs() {
-                        setTimeout(() => {
-                            const azInput = document.getElementById('js-azimuth')?.querySelector('input, textarea');
-                            const elInput = document.getElementById('js-elevation')?.querySelector('input, textarea');
-                            const distInput = document.getElementById('js-distance')?.querySelector('input, textarea');
-                            
-                            if (azInput) {
-                                azInput.value = currentAzimuth;
-                                azInput.dispatchEvent(new Event('input', { bubbles: true }));
-                            }
-                            if (elInput) {
-                                elInput.value = currentElevation;
-                                elInput.dispatchEvent(new Event('input', { bubbles: true }));
-                            }
-                            if (distInput) {
-                                distInput.value = currentDistance;
-                                distInput.dispatchEvent(new Event('input', { bubbles: true }));
-                            }
-                        }, 50);
-                    }
-                    
-                    function showImage(imageUrl) {
-                        if (imageUrl) {
-                            resultImage.src = imageUrl;
-                            resultImage.style.display = 'block';
-                            noResultPlaceholder.style.display = 'none';
-                        } else {
-                            resultImage.style.display = 'none';
-                            noResultPlaceholder.style.display = 'block';
-                            hoverControls.style.opacity = '0';
-                        }
-                    }
-                    
-                    // Global function for external updates
-                    window.updateResultImage = showImage;
-                    
-                    // Hover effects for the container
-                    container.addEventListener('mouseenter', function(e) {
-                        if (resultImage.style.display !== 'none' && resultImage.src && !isGenerating) {
-                            hoverControls.style.opacity = '1';
-                        }
-                    });
-                    
-                    container.addEventListener('mouseleave', function(e) {
-                        hoverControls.style.opacity = '0';
-                    });
-                    
-                    // Arrow button handlers with auto-generation
-                    container.addEventListener('click', function(e) {
-                        if (e.target.classList.contains('hover-arrow-btn') && !isGenerating) {
-                            e.stopPropagation();
-                            const action = e.target.dataset.action;
-                            
-                            // Add click animation
-                            e.target.style.transform += ' scale(0.9)';
-                            setTimeout(() => {
-                                e.target.style.transform = e.target.style.transform.replace(' scale(0.9)', '');
-                            }, 150);
-                            
-                            switch(action) {
-                                case 'left':
-                                    currentAzimuth = (currentAzimuth - 45 + 360) % 360;
-                                    break;
-                                case 'right':
-                                    currentAzimuth = (currentAzimuth + 45) % 360;
-                                    break;
-                                case 'up':
-                                    currentElevation = Math.max(-30, Math.min(60, currentElevation + 30));
-                                    break;
-                                case 'down':
-                                    currentElevation = Math.max(-30, Math.min(60, currentElevation - 30));
-                                    break;
-                                case 'zoom-out':
-                                    currentDistance = Math.max(0.6, Math.min(1.8, currentDistance + 0.4));
-                                    break;
-                                case 'zoom-in':
-                                    currentDistance = Math.max(0.6, Math.min(1.8, currentDistance - 0.4));
-                                    break;
-                            }
-                            
-                            updateDisplay();
-                            
-                            // Auto-trigger generation by updating inputs and calling generation function
-                            isGenerating = true;
-                            hoverControls.style.opacity = '0.3'; // Dim controls during generation
-                            
-                            // Update the hidden inputs to trigger generation
-                            setTimeout(() => {
-                                const azInput = document.getElementById('js-azimuth')?.querySelector('input, textarea');
-                                const elInput = document.getElementById('js-elevation')?.querySelector('input, textarea');
-                                const distInput = document.getElementById('js-distance')?.querySelector('input, textarea');
-                                
-                                if (azInput && elInput && distInput) {
-                                    // Update all inputs
-                                    azInput.value = currentAzimuth;
-                                    elInput.value = currentElevation;
-                                    distInput.value = currentDistance;
-                                    
-                                    // Trigger input events to notify Gradio
-                                    azInput.dispatchEvent(new Event('input', { bubbles: true }));
-                                    elInput.dispatchEvent(new Event('input', { bubbles: true }));
-                                    distInput.dispatchEvent(new Event('input', { bubbles: true }));
-                                    
-                                    // Trigger a custom event that our Python handler can listen to
-                                    const autoGenerateEvent = new CustomEvent('autoGenerate', {
-                                        detail: { azimuth: currentAzimuth, elevation: currentElevation, distance: currentDistance }
-                                    });
-                                    window.dispatchEvent(autoGenerateEvent);
-                                }
-                                
-                                // Reset generating state after delay
-                                setTimeout(() => {
-                                    isGenerating = false;
-                                    hoverControls.style.opacity = '1';
-                                }, 3000);
-                            }, 100);
-                        }
-                    });
-                    
-                    // Hover effects for individual buttons
-                    container.addEventListener('mouseover', function(e) {
-                        if (e.target.classList.contains('hover-arrow-btn') && !isGenerating) {
-                            e.target.style.transform += ' scale(1.1)';
-                        }
-                    });
-                    
-                    container.addEventListener('mouseout', function(e) {
-                        if (e.target.classList.contains('hover-arrow-btn')) {
-                            e.target.style.transform = e.target.style.transform.replace(' scale(1.1)', '');
-                        }
-                    });
-                    
-                    // Initial display update
-                    updateDisplay();
-                })();
-                """,
-                elem_id="result-display"
-            )
-    
-    # Function to update dimensions based on uploaded image aspect ratio
-    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
-
-        if original_width > original_height:
-            new_width = 1024
-            aspect_ratio = original_height / original_width
-            new_height = int(new_width * aspect_ratio)
-        else:
-            new_height = 1024
-            aspect_ratio = original_width / original_height
-            new_width = int(new_height * aspect_ratio)
-
-        new_width = (new_width // 8) * 8
-        new_height = (new_height // 8) * 8
-
-        return new_width, new_height
-    
-    # Function to process the generate request with regular image input
-    def generate_new_view(input_image, js_az, js_el, js_dist, seed_val, randomize_seed_val, guidance_val, steps_val, h_val, w_val):
-        try:
-            if input_image is None:
-                raise gr.Error("Please upload an image first.")
+        with gr.Row():
+            # Left column: Image upload and controls
+            with gr.Column(scale=1):
+                image = gr.Image(label="Upload Image", type="pil", height=400)
                 
-            azimuth = float(js_az) if js_az else 0.0
-            elevation = float(js_el) if js_el else 0.0  
-            distance = float(js_dist) if js_dist else 1.0
-            
-            # Generate the result
-            result_image, final_seed, final_prompt = infer_camera_edit(
-                input_image, azimuth, elevation, distance, seed_val, randomize_seed_val, 
-                guidance_val, steps_val, h_val, w_val
-            )
-            
-            # Convert PIL image to base64 data URL for the HTML component
-            import base64
-            from io import BytesIO
-            buffered = BytesIO()
-            result_image.save(buffered, format="PNG")
-            img_str = base64.b64encode(buffered.getvalue()).decode()
-            data_url = f"data:image/png;base64,{img_str}"
-            
-            # Update the HTML component with the new image
-            updated_html = f"""
-            <div id="result-container" style="width: 100%; height: 500px; background: #f8f8f8; border: 2px solid #e0e0e0; border-radius: 12px; position: relative; display: flex; align-items: center; justify-content: center;">
-                <!-- Generated image display -->
-                <img id="result-image" src="{data_url}" style="max-width: 100%; max-height: 100%; object-fit: contain; display: block;">
+                # 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")
                 
-                <!-- Hover-activated arrow controls -->
-                <div id="hover-controls" style="position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s ease;">
-                    <!-- Left arrow (azimuth -45°) -->
-                    <button class="hover-arrow-btn" data-action="left" 
-                            style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); 
-                                   width: 55px; height: 55px; background: rgba(0,255,136,0.9); border: none; 
-                                   border-radius: 50%; color: white; font-size: 22px; cursor: pointer; 
-                                   pointer-events: auto; transition: all 0.2s; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
-                        ←
-                    </button>
-                    
-                    <!-- Right arrow (azimuth +45°) -->
-                    <button class="hover-arrow-btn" data-action="right"
-                            style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); 
-                                   width: 55px; height: 55px; background: rgba(0,255,136,0.9); border: none; 
-                                   border-radius: 50%; color: white; font-size: 22px; cursor: pointer; 
-                                   pointer-events: auto; transition: all 0.2s; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
-                        →
-                    </button>
-                    
-                    <!-- Up arrow (elevation +30°) -->
-                    <button class="hover-arrow-btn" data-action="up"
-                            style="position: absolute; top: 20px; left: 50%; transform: translateX(-50%); 
-                                   width: 55px; height: 55px; background: rgba(255,105,180,0.9); border: none; 
-                                   border-radius: 50%; color: white; font-size: 22px; cursor: pointer; 
-                                   pointer-events: auto; transition: all 0.2s; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
-                        ↑
-                    </button>
-                    
-                    <!-- Down arrow (elevation -30°) -->
-                    <button class="hover-arrow-btn" data-action="down"
-                            style="position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); 
-                                   width: 55px; height: 55px; background: rgba(255,105,180,0.9); border: none; 
-                                   border-radius: 50%; color: white; font-size: 22px; cursor: pointer; 
-                                   pointer-events: auto; transition: all 0.2s; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
-                        ↓
-                    </button>
-                    
-                    <!-- Zoom controls -->
-                    <div style="position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); 
-                                display: flex; gap: 12px; pointer-events: auto; z-index: 10;">
-                        <button class="hover-arrow-btn" data-action="zoom-out"
-                                style="width: 50px; height: 50px; background: rgba(255,165,0,0.9); border: none; 
-                                       border-radius: 50%; color: white; font-size: 26px; cursor: pointer; 
-                                       transition: all 0.2s; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
-                            −
-                        </button>
-                        
-                        <button class="hover-arrow-btn" data-action="zoom-in"
-                                style="width: 50px; height: 50px; background: rgba(255,165,0,0.9); border: none; 
-                                       border-radius: 50%; color: white; font-size: 22px; cursor: pointer; 
-                                       transition: all 0.2s; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
-                            +
-                        </button>
-                    </div>
-                    
-                    <!-- Status display -->
-                    <div id="hover-status" style="position: absolute; top: 15px; right: 15px; background: rgba(0,0,0,0.85); 
-                                                 color: white; padding: 10px 15px; border-radius: 8px; font-family: monospace; 
-                                                 font-size: 13px; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
-                        <div id="hover-camera-values">Az: {azimuth}° | El: {elevation}° | Dist: {distance}</div>
-                        <div id="hover-prompt-preview" style="color: #00ff88; margin-top: 5px; font-size: 11px;">{final_prompt}</div>
-                    </div>
-                </div>
-            </div>
-            <script>
-            // Re-initialize event handlers after HTML update
-            setTimeout(() => {{
-                const container = document.getElementById('result-container');
-                if (!container) return;
-                
-                const hoverControls = container.querySelector('#hover-controls');
-                const hoverCameraValues = container.querySelector('#hover-camera-values');
-                const hoverPromptPreview = container.querySelector('#hover-prompt-preview');
-                
-                let currentAzimuth = {azimuth};
-                let currentElevation = {elevation};
-                let currentDistance = {distance};
+                # Generation settings
+                with gr.Accordion("⚙️ Generation Settings", open=False):
+                    seed = gr.Slider(minimum=0, maximum=2147483647, 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=25, label="Number of inference steps")
+                    height = gr.Slider(minimum=256, maximum=1024, step=64, value=1024, label="Height")
+                    width = gr.Slider(minimum=256, maximum=1024, step=64, value=1024, label="Width")
+                    
+                prompt_display = gr.Textbox(
+                    label="Current Camera Prompt", 
+                    value="<sks> front view eye-level shot medium shot",
+                    interactive=False
+                )
                 
-                const azimuthMap = {{
-                    0: "front 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"
-                }};
-                const elevationMap = {{
-                    "-30": "low-angle shot", "0": "eye-level shot", "30": "elevated shot", "60": "high-angle shot"
-                }};
-                const distanceMap = {{
-                    "0.6": "close-up", "1": "medium shot", "1.8": "wide shot"
-                }};
+            # 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*")
                 
-                function snapToNearest(value, steps) {{
-                    return steps.reduce((prev, curr) => Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);
-                }}
-                
-                function buildCameraPrompt(azimuth, elevation, distance) {{
-                    const azimuthSteps = [0, 45, 90, 135, 180, 225, 270, 315];
-                    const elevationSteps = [-30, 0, 30, 60];
-                    const distanceSteps = [0.6, 1.0, 1.8];
-                    
-                    const azSnap = snapToNearest(azimuth, azimuthSteps);
-                    const elSnap = snapToNearest(elevation, elevationSteps);
-                    const distSnap = snapToNearest(distance, distanceSteps);
-                    
-                    const azName = azimuthMap[azSnap];
-                    const elName = elevationMap[String(elSnap)];
-                    const distName = distanceMap[distSnap === 1 ? "1" : String(distSnap)];
-                    
-                    return `<sks> ` + azName + ` ` + elName + ` ` + distName;
-                }}
-                
-                function updateDisplay() {{
-                    hoverCameraValues.textContent = `Az: ` + currentAzimuth + `° | El: ` + currentElevation + `° | Dist: ` + currentDistance;
-                    hoverPromptPreview.textContent = buildCameraPrompt(currentAzimuth, currentElevation, currentDistance);
-                    
-                    // Update hidden inputs
-                    setTimeout(() => {{
-                        const azInput = document.getElementById('js-azimuth')?.querySelector('input, textarea');
-                        const elInput = document.getElementById('js-elevation')?.querySelector('input, textarea');
-                        const distInput = document.getElementById('js-distance')?.querySelector('input, textarea');
-                        
-                        if (azInput) {{
-                            azInput.value = currentAzimuth;
-                            azInput.dispatchEvent(new Event('input', {{ bubbles: true }}));
-                        }}
-                        if (elInput) {{
-                            elInput.value = currentElevation;
-                            elInput.dispatchEvent(new Event('input', {{ bubbles: true }}));
-                        }}
-                        if (distInput) {{
-                            distInput.value = currentDistance;
-                            distInput.dispatchEvent(new Event('input', {{ bubbles: true }}));
-                        }}
-                    }}, 50);
-                }}
-                
-                // Hover effects
-                container.addEventListener('mouseenter', function(e) {{
-                    hoverControls.style.opacity = '1';
-                }});
-                
-                container.addEventListener('mouseleave', function(e) {{
-                    hoverControls.style.opacity = '0';
-                }});
-                
-                // Arrow button handlers
-                container.addEventListener('click', function(e) {{
-                    if (e.target.classList.contains('hover-arrow-btn')) {{
-                        e.stopPropagation();
-                        const action = e.target.dataset.action;
-                        
-                        switch(action) {{
-                            case 'left':
-                                currentAzimuth = (currentAzimuth - 45 + 360) % 360;
-                                break;
-                            case 'right':
-                                currentAzimuth = (currentAzimuth + 45) % 360;
-                                break;
-                            case 'up':
-                                currentElevation = Math.max(-30, Math.min(60, currentElevation + 30));
-                                break;
-                            case 'down':
-                                currentElevation = Math.max(-30, Math.min(60, currentElevation - 30));
-                                break;
-                            case 'zoom-out':
-                                currentDistance = Math.max(0.6, Math.min(1.8, currentDistance + 0.4));
-                                break;
-                            case 'zoom-in':
-                                currentDistance = Math.max(0.6, Math.min(1.8, currentDistance - 0.4));
-                                break;
-                        }}
-                        
-                        updateDisplay();
-                        
-                        // Auto-trigger generation by updating inputs
-                        setTimeout(() => {{
-                            const azInput = document.getElementById('js-azimuth')?.querySelector('input, textarea');
-                            const elInput = document.getElementById('js-elevation')?.querySelector('input, textarea');
-                            const distInput = document.getElementById('js-distance')?.querySelector('input, textarea');
-                            
-                            if (azInput && elInput && distInput) {{
-                                // Update all inputs to trigger generation
-                                azInput.value = currentAzimuth;
-                                elInput.value = currentElevation;
-                                distInput.value = currentDistance;
-                                
-                                // Trigger input events to notify Gradio of changes
-                                azInput.dispatchEvent(new Event('input', {{ bubbles: true }}));
-                                elInput.dispatchEvent(new Event('input', {{ bubbles: true }}));
-                                distInput.dispatchEvent(new Event('input', {{ bubbles: true }}));
-                            }}
-                        }}, 200);
-                    }}
-                }});
-                
-                // Button hover effects
-                container.addEventListener('mouseover', function(e) {{
-                    if (e.target.classList.contains('hover-arrow-btn')) {{
-                        e.target.style.transform += ' scale(1.1)';
-                    }}
-                }});
+                # 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 to see camera controls</p>
+                        </div>
+                    </div>
+                    """,
+                    elem_id="result-display"
+                )
                 
-                container.addEventListener('mouseout', function(e) {{
-                    if (e.target.classList.contains('hover-arrow-btn')) {{
-                        e.target.style.transform = e.target.style.transform.replace(' scale(1.1)', '');
-                    }}
-                }});
-            }}, 100);
-            </script>
-            """
-            
-            return updated_html, final_seed, final_prompt
-            
-        except Exception as e:
-            import traceback
-            traceback.print_exc()
-            raise gr.Error(f"Generation failed: {str(e)}")
+                # Debug output
+                debug_output = gr.Textbox(label="Debug Output", visible=True)
     
-    # Function to show uploaded image immediately in HTML component
-    def show_uploaded_image_immediately(uploaded_image):
-        """When user uploads an image, immediately show it in the HTML component."""
+    # Functions for handling interactions
+    def show_uploaded_image_with_arrows(uploaded_image):
+        """Show uploaded image with working arrow controls."""
         if uploaded_image is None:
-            # Return to placeholder state
             return gr.update(value="""
-            <div id="result-container" 
-                 style="width: 100%; height: 500px; background: #f8f8f8; border: 2px solid #e0e0e0; border-radius: 12px; 
-                        position: relative; display: flex; align-items: center; justify-content: center; cursor: default;">
-                
-                <!-- Placeholder for no image -->
-                <div id="no-result-placeholder" style="text-align: center; color: #999;">
+            <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>
+                    <p>Then hover to see camera controls</p>
                 </div>
             </div>
             """)
         
-        # Convert PIL image to base64 data URL
+        # 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}"
         
-        # Return HTML with uploaded image and hover controls plus JavaScript
+        # Return HTML with image and working arrow controls
         return gr.update(value=f"""
-        <div id="result-container" 
-             style="width: 100%; height: 500px; background: #f8f8f8; border: 2px solid #e0e0e0; border-radius: 12px; 
-                    position: relative; display: flex; align-items: center; justify-content: center; cursor: default;">
+        <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;">
             
-            <!-- Uploaded image display -->
-            <img id="result-image" src="{data_url}" style="max-width: 100%; max-height: 100%; object-fit: contain; display: block;">
+            <!-- Uploaded image -->
+            <img src="{data_url}" style="max-width: 100%; max-height: 100%; object-fit: contain;">
             
-            <!-- Hover-activated arrow controls -->
-            <div id="hover-controls" 
-                 style="position: absolute; inset: 0; pointer-events: none; opacity: 0.7; 
-                        transition: opacity 0.3s ease-in-out; z-index: 100;">
+            <!-- Arrow controls with CSS hover effects and inline JavaScript -->
+            <div style="position: absolute; inset: 0; z-index: 10; opacity: 0; transition: opacity 0.3s ease;"
+                 onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0'">
                 
-                <!-- Left arrow -->
-                <button class="hover-arrow-btn" data-action="left" 
-                        style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); 
-                               width: 60px; height: 60px; background: rgba(0,255,136,0.95); border: none; 
-                               border-radius: 50%; color: white; font-size: 24px; font-weight: bold; cursor: pointer; 
-                               pointer-events: auto; transition: all 0.2s ease; z-index: 101;
-                               box-shadow: 0 6px 20px rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;">
+                <!-- Left arrow (Azimuth -45°) -->
+                <button onclick="
+                    var az = parseInt(document.getElementById('js-azimuth').querySelector('input').value) - 45;
+                    if (az < 0) az += 360;
+                    document.getElementById('js-azimuth').querySelector('input').value = az;
+                    document.getElementById('js-azimuth').querySelector('input').dispatchEvent(new Event('input', {{bubbles: true}}));
+                    document.getElementById('status-az').textContent = az;
+                " 
+                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; z-index: 11;
+                       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 (Azimuth -45°)">
                     ←
                 </button>
                 
-                <!-- Right arrow -->
-                <button class="hover-arrow-btn" data-action="right"
-                        style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); 
-                               width: 60px; height: 60px; background: rgba(0,255,136,0.95); border: none; 
-                               border-radius: 50%; color: white; font-size: 24px; font-weight: bold; cursor: pointer; 
-                               pointer-events: auto; transition: all 0.2s ease; z-index: 101;
-                               box-shadow: 0 6px 20px rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;">
+                <!-- Right arrow (Azimuth +45°) -->
+                <button onclick="
+                    var az = (parseInt(document.getElementById('js-azimuth').querySelector('input').value) + 45) % 360;
+                    document.getElementById('js-azimuth').querySelector('input').value = az;
+                    document.getElementById('js-azimuth').querySelector('input').dispatchEvent(new Event('input', {{bubbles: true}}));
+                    document.getElementById('status-az').textContent = az;
+                "
+                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; z-index: 11;
+                       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 (Azimuth +45°)">
                     →
                 </button>
                 
-                <!-- Up arrow -->
-                <button class="hover-arrow-btn" data-action="up"
-                        style="position: absolute; top: 20px; left: 50%; transform: translateX(-50%); 
-                               width: 60px; height: 60px; background: rgba(255,105,180,0.95); border: none; 
-                               border-radius: 50%; color: white; font-size: 24px; font-weight: bold; cursor: pointer; 
-                               pointer-events: auto; transition: all 0.2s ease; z-index: 101;
-                               box-shadow: 0 6px 20px rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;">
+                <!-- Up arrow (Elevation +30°) -->
+                <button onclick="
+                    var el = Math.min(60, parseInt(document.getElementById('js-elevation').querySelector('input').value) + 30);
+                    document.getElementById('js-elevation').querySelector('input').value = el;
+                    document.getElementById('js-elevation').querySelector('input').dispatchEvent(new Event('input', {{bubbles: true}}));
+                    document.getElementById('status-el').textContent = el;
+                "
+                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; z-index: 11;
+                       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 (Elevation +30°)">
                     ↑
                 </button>
                 
-                <!-- Down arrow -->
-                <button class="hover-arrow-btn" data-action="down"
-                        style="position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); 
-                               width: 60px; height: 60px; background: rgba(255,105,180,0.95); border: none; 
-                               border-radius: 50%; color: white; font-size: 24px; font-weight: bold; cursor: pointer; 
-                               pointer-events: auto; transition: all 0.2s ease; z-index: 101;
-                               box-shadow: 0 6px 20px rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;">
+                <!-- Down arrow (Elevation -30°) -->
+                <button onclick="
+                    var el = Math.max(-30, parseInt(document.getElementById('js-elevation').querySelector('input').value) - 30);
+                    document.getElementById('js-elevation').querySelector('input').value = el;
+                    document.getElementById('js-elevation').querySelector('input').dispatchEvent(new Event('input', {{bubbles: true}}));
+                    document.getElementById('status-el').textContent = el;
+                "
+                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; z-index: 11;
+                       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 (Elevation -30°)">
                     ↓
                 </button>
                 
                 <!-- Zoom controls -->
-                <div style="position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); 
-                            display: flex; gap: 15px; pointer-events: auto; z-index: 101;">
-                    <button class="hover-arrow-btn" data-action="zoom-out"
-                            style="width: 55px; height: 55px; background: rgba(255,165,0,0.95); border: none; 
-                                   border-radius: 50%; color: white; font-size: 28px; font-weight: bold; cursor: pointer; 
-                                   transition: all 0.2s ease; box-shadow: 0 6px 20px rgba(0,0,0,0.4);
-                                   display: flex; align-items: center; justify-content: center;">
+                <div style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); 
+                            display: flex; gap: 15px; z-index: 11;">
+                    
+                    <!-- Zoom out (Distance +0.4) -->
+                    <button onclick="
+                        var dist = Math.min(1.8, parseFloat(document.getElementById('js-distance').querySelector('input').value) + 0.4);
+                        document.getElementById('js-distance').querySelector('input').value = dist.toFixed(1);
+                        document.getElementById('js-distance').querySelector('input').dispatchEvent(new Event('input', {{bubbles: true}}));
+                        document.getElementById('status-dist').textContent = dist.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 (Distance +0.4)">
                         −
                     </button>
                     
-                    <button class="hover-arrow-btn" data-action="zoom-in"
-                            style="width: 55px; height: 55px; background: rgba(255,165,0,0.95); border: none; 
-                                   border-radius: 50%; color: white; font-size: 24px; font-weight: bold; cursor: pointer; 
-                                   transition: all 0.2s ease; box-shadow: 0 6px 20px rgba(0,0,0,0.4);
-                                   display: flex; align-items: center; justify-content: center;">
+                    <!-- Zoom in (Distance -0.4) -->
+                    <button onclick="
+                        var dist = Math.max(0.6, parseFloat(document.getElementById('js-distance').querySelector('input').value) - 0.4);
+                        document.getElementById('js-distance').querySelector('input').value = dist.toFixed(1);
+                        document.getElementById('js-distance').querySelector('input').dispatchEvent(new Event('input', {{bubbles: true}}));
+                        document.getElementById('status-dist').textContent = dist.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 (Distance -0.4)">
                         +
                     </button>
                 </div>
                 
                 <!-- Status display -->
-                <div id="hover-status" 
-                     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; z-index: 101; box-shadow: 0 6px 20px rgba(0,0,0,0.4);
-                            min-width: 200px;">
-                    <div id="hover-camera-values" style="margin-bottom: 4px;">Az: 0° | El: 0° | Dist: 1.0</div>
-                    <div id="hover-prompt-preview" 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; z-index: 11; 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>
-        <script>
-        // Initialize event handlers for uploaded image
-        setTimeout(() => {{
-            console.log('Initializing uploaded image JavaScript...');
-            const container = document.getElementById('result-container');
-            if (!container) {{
-                console.error('Container not found!');
-                return;
-            }}
-            console.log('Container found, setting up controls...');
-            
-            const hoverControls = container.querySelector('#hover-controls');
-            const hoverCameraValues = container.querySelector('#hover-camera-values');
-            const hoverPromptPreview = container.querySelector('#hover-prompt-preview');
-            
-            console.log('Found elements:', !!hoverControls, !!hoverCameraValues, !!hoverPromptPreview);
-            
-            if (!hoverControls) {{
-                console.error('Hover controls not found!');
-                return;
-            }}
-            
-            let currentAzimuth = 0;
-            let currentElevation = 0;
-            let currentDistance = 1.0;
-            let isGenerating = false;
-            
-            // Camera mappings
-            const azimuthMap = {{
-                0: "front 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"
-            }};
-            const elevationMap = {{
-                "-30": "low-angle shot", "0": "eye-level shot", "30": "elevated shot", "60": "high-angle shot"
-            }};
-            const distanceMap = {{
-                "0.6": "close-up", "1": "medium shot", "1.8": "wide shot"
-            }};
-            
-            function snapToNearest(value, steps) {{
-                return steps.reduce((prev, curr) => Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);
-            }}
-            
-            function buildCameraPrompt(azimuth, elevation, distance) {{
-                const azimuthSteps = [0, 45, 90, 135, 180, 225, 270, 315];
-                const elevationSteps = [-30, 0, 30, 60];
-                const distanceSteps = [0.6, 1.0, 1.8];
-                
-                const azSnap = snapToNearest(azimuth, azimuthSteps);
-                const elSnap = snapToNearest(elevation, elevationSteps);
-                const distSnap = snapToNearest(distance, distanceSteps);
+        """)
+    
+    def handle_parameter_change(az, el, dist, input_image):
+        """Handle camera parameter changes and trigger generation."""
+        try:
+            azimuth = float(az)
+            elevation = float(el) 
+            distance = float(dist)
+            
+            # Build new prompt
+            prompt = build_camera_prompt(azimuth, elevation, distance)
+            
+            # Generate new image (placeholder)
+            if input_image is not None:
+                # For now, just return the original image
+                # In real implementation, call your model here
+                new_image = input_image  # Placeholder
                 
-                const azName = azimuthMap[azSnap];
-                const elName = elevationMap[String(elSnap)];
-                const distName = distanceMap[distSnap === 1 ? "1" : String(distSnap)];
+                # Convert to data URL for display
+                buffered = BytesIO()
+                new_image.save(buffered, format="PNG")
+                img_str = base64.b64encode(buffered.getvalue()).decode()
+                data_url = f"data:image/png;base64,{img_str}"
                 
-                return `<sks> ` + azName + ` ` + elName + ` ` + distName;
-            }}
-            
-            function updateDisplay() {{
-                hoverCameraValues.textContent = `Az: ` + currentAzimuth + `° | El: ` + currentElevation + `° | Dist: ` + currentDistance;
-                hoverPromptPreview.textContent = buildCameraPrompt(currentAzimuth, currentElevation, currentDistance);
-                updateGradioInputs();
-            }}
-            
-            function updateGradioInputs() {{
-                setTimeout(() => {{
-                    console.log('Updating Gradio inputs with:', currentAzimuth, currentElevation, currentDistance);
-                    
-                    // Try multiple selectors for the hidden inputs
-                    const azInput = document.getElementById('js-azimuth')?.querySelector('input, textarea') ||
-                                   document.querySelector('#js-azimuth input, #js-azimuth textarea') ||
-                                   document.querySelector('input[data-testid*="azimuth"], textarea[data-testid*="azimuth"]');
-                    const elInput = document.getElementById('js-elevation')?.querySelector('input, textarea') ||
-                                   document.querySelector('#js-elevation input, #js-elevation textarea') ||
-                                   document.querySelector('input[data-testid*="elevation"], textarea[data-testid*="elevation"]');
-                    const distInput = document.getElementById('js-distance')?.querySelector('input, textarea') ||
-                                     document.querySelector('#js-distance input, #js-distance textarea') ||
-                                     document.querySelector('input[data-testid*="distance"], textarea[data-testid*="distance"]');
-                    
-                    console.log('Found inputs:', !!azInput, !!elInput, !!distInput);
-                    
-                    if (azInput) {{
-                        azInput.value = currentAzimuth;
-                        azInput.dispatchEvent(new Event('input', {{ bubbles: true }}));
-                        azInput.dispatchEvent(new Event('change', {{ bubbles: true }}));
-                        console.log('Updated azimuth to:', currentAzimuth);
-                    }}
-                    if (elInput) {{
-                        elInput.value = currentElevation;
-                        elInput.dispatchEvent(new Event('input', {{ bubbles: true }}));
-                        elInput.dispatchEvent(new Event('change', {{ bubbles: true }}));
-                        console.log('Updated elevation to:', currentElevation);
-                    }}
-                    if (distInput) {{
-                        distInput.value = currentDistance;
-                        distInput.dispatchEvent(new Event('input', {{ bubbles: true }}));
-                        distInput.dispatchEvent(new Event('change', {{ bubbles: true }}));
-                        console.log('Updated distance to:', currentDistance);
-                    }}
-                    
-                    if (!azInput || !elInput || !distInput) {{
-                        console.warn('Some inputs not found, retrying in 500ms...');
-                        setTimeout(() => updateGradioInputs(), 500);
-                    }}
-                }}, 100);
-            }}
-            
-            // Hover effects for the container - always show arrows, make brighter on hover
-            container.addEventListener('mouseenter', function(e) {{
-                hoverControls.style.opacity = '1';
-            }});
+                # Update HTML with new image (keeping the same arrow structure)
+                return show_uploaded_image_with_arrows(new_image).value, prompt, f"Generated view: Az={azimuth}°, El={elevation}°, Dist={distance}"
             
-            container.addEventListener('mouseleave', function(e) {{
-                hoverControls.style.opacity = '0.7';
-            }});
+            return gr.update(), prompt, f"Parameters updated: Az={azimuth}°, El={elevation}°, Dist={distance}"
             
-            // Arrow button handlers with auto-generation
-            container.addEventListener('click', function(e) {{
-                if (e.target.classList.contains('hover-arrow-btn') && !isGenerating) {{
-                    e.stopPropagation();
-                    e.preventDefault();
-                    const action = e.target.dataset.action;
-                    console.log('Arrow clicked:', action, 'Current values:', currentAzimuth, currentElevation, currentDistance);
-                    
-                    // Add click animation
-                    e.target.style.transform += ' scale(0.9)';
-                    setTimeout(() => {{
-                        e.target.style.transform = e.target.style.transform.replace(' scale(0.9)', '');
-                    }}, 150);
-                    
-                    const oldValues = {{ az: currentAzimuth, el: currentElevation, dist: currentDistance }};
-                    
-                    switch(action) {{
-                        case 'left':
-                            currentAzimuth = (currentAzimuth - 45 + 360) % 360;
-                            break;
-                        case 'right':
-                            currentAzimuth = (currentAzimuth + 45) % 360;
-                            break;
-                        case 'up':
-                            currentElevation = Math.max(-30, Math.min(60, currentElevation + 30));
-                            break;
-                        case 'down':
-                            currentElevation = Math.max(-30, Math.min(60, currentElevation - 30));
-                            break;
-                        case 'zoom-out':
-                            currentDistance = Math.max(0.6, Math.min(1.8, currentDistance + 0.4));
-                            break;
-                        case 'zoom-in':
-                            currentDistance = Math.max(0.6, Math.min(1.8, currentDistance - 0.4));
-                            break;
-                    }}
-                    
-                    console.log('Values changed from:', oldValues, 'to:', {{ az: currentAzimuth, el: currentElevation, dist: currentDistance }});
-                    
-                    updateDisplay();
-                    
-                    // Auto-trigger generation
-                    isGenerating = true;
-                    hoverControls.style.opacity = '0.3';
-                    console.log('Starting generation...');
-                    
-                    // Force update of Gradio inputs multiple times to ensure it works
-                    updateGradioInputs();
-                    setTimeout(() => updateGradioInputs(), 200);
-                    setTimeout(() => updateGradioInputs(), 500);
-                    
-                    // Also try clicking the hidden generate button as fallback
-                    setTimeout(() => {{
-                        const hiddenBtn = document.getElementById('hidden-generate-btn')?.querySelector('button') ||
-                                        document.querySelector('#hidden-generate-btn button') ||
-                                        document.querySelector('button[data-testid*="hidden-generate"]');
-                        if (hiddenBtn) {{
-                            console.log('Clicking hidden generate button');
-                            hiddenBtn.click();
-                        }} else {{
-                            console.warn('Hidden generate button not found');
-                        }}
-                    }}, 300);
-                    
-                    // Reset generating state
-                    setTimeout(() => {{
-                        isGenerating = false;
-                        hoverControls.style.opacity = '1';
-                        console.log('Generation timeout ended, re-enabling controls');
-                    }}, 5000);
-                }}
-            }});
-            
-            // Hover effects for individual buttons
-            container.addEventListener('mouseover', function(e) {{
-                if (e.target.classList.contains('hover-arrow-btn') && !isGenerating) {{
-                    e.target.style.transform += ' scale(1.1)';
-                }}
-            }});
-            
-            container.addEventListener('mouseout', function(e) {{
-                if (e.target.classList.contains('hover-arrow-btn')) {{
-                    e.target.style.transform = e.target.style.transform.replace(' scale(1.1)', '');
-                }}
-            }});
-            
-            // Force arrows to be visible immediately for testing
-            hoverControls.style.opacity = '0.8';
-            console.log('Arrows should now be visible with opacity:', hoverControls.style.opacity);
-            
-            // Initial display update
-            updateDisplay();
-            
-            console.log('JavaScript initialization completed');
-        }}, 100);
-        </script>
-        """)
+        except Exception as e:
+            return gr.update(), f"Error: {str(e)}", f"Error processing parameters: {str(e)}"
     
-    # Auto-update dimensions and show image immediately when uploaded
-    image.upload(
-        fn=update_dimensions_on_upload,
-        inputs=[image],
-        outputs=[width, height]
-    )
+    # Set up event handlers
     
+    # Image upload handler
     image.upload(
-        fn=show_uploaded_image_immediately,
+        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 generate_new_view(input_image, js_az, js_el, js_dist, seed_val, randomize_seed_val, guidance_val, steps_val, h_val, w_val)
-    
-    # Set up auto-generation on parameter changes (keep this as fallback)
-    for input_component in [js_azimuth, js_elevation, js_distance]:
-        input_component.change(
-            fn=auto_generate_on_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]
+    # 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],
+            outputs=[result_display, prompt_display, debug_output]
         )
     
-    # Set up hidden button click for direct generation triggering
-    hidden_generate_btn.click(
-        fn=auto_generate_on_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]
-    )
+    return demo
 
 if __name__ == "__main__":
-    demo.launch(debug=True, show_error=True)
+    demo = create_camera_control_app()
+    demo.launch()