Update app.py

app.py

@@ -87,390 +87,359 @@ def build_camera_prompt(azimuth, elevation, distance):
     
     return f"<sks> {az_name} {el_name} {dist_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}")
-
+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 data_url_to_pil(data_url):
-    """Convert data URL to PIL Image."""
-    if data_url and data_url.startswith('data:image'):
-        header, encoded = data_url.split(',', 1)
-        data = base64.b64decode(encoded)
-        return Image.open(BytesIO(data))
-    return None
-
-def generate_from_inputs(js_az, js_el, js_dist, js_img_data, seed_val, randomize_seed_val, guidance_val, steps_val, h_val, w_val):
-    """Generate new camera view from JavaScript inputs."""
-    try:
-        print(f"Received inputs:")
-        print(f"  Azimuth: {js_az}")
-        print(f"  Elevation: {js_el}")  
-        print(f"  Distance: {js_dist}")
-        print(f"  Image data length: {len(js_img_data) if js_img_data else 0}")
-        
-        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
-        
-        # Check if we have valid image data
-        if not js_img_data or not js_img_data.startswith('data:image'):
-            raise gr.Error("No image data received. Please upload an image and try again.")
-        
-        # Convert data URL to PIL image
-        image_pil = data_url_to_pil(js_img_data)
-        
-        if image_pil is None:
-            raise gr.Error("Failed to process image data. Please try uploading the image again.")
-        
-        print(f"Successfully converted image. Size: {image_pil.size}")
-        return infer_camera_edit(image_pil, azimuth, elevation, distance, seed_val, randomize_seed_val, guidance_val, steps_val, h_val, w_val)
-    except Exception as e:
-        import traceback
-        traceback.print_exc()
-        raise gr.Error(f"Generation failed: {str(e)}")
-
 def create_camera_control_app():
-    """Create the complete camera control app using the working pattern."""
+    """Create the complete camera control app."""
     
     with gr.Blocks(title="Camera Control with Directional Arrows") as demo:
         gr.Markdown("# 📸 Camera Control with Directional Arrows")
         gr.Markdown("Upload an image and use arrows to control camera angles for 3D view generation")
         
         with gr.Row():
-            # Left column: Image upload and camera controls
+            # Left column: Image upload and controls
             with gr.Column(scale=1):
-                gr.Markdown("### 🎮 Interactive Camera Control")
-                gr.Markdown("*Upload an image, then hover and click arrows to control the camera*")
+                image = gr.Image(label="Upload Image", type="pil", height=400)
                 
-                # Combined image upload + camera control interface  
-                camera_display = gr.HTML(
-                    value="""
-                    <div id="camera-interface" style="width: 100%; height: 400px; background: #f0f0f0; border: 2px dashed #999; border-radius: 12px; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer;">
-                        <!-- Hidden file input -->
-                        <input type="file" id="file-input" accept="image/*" style="display: none;">
+                # 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
                         
-                        <!-- Image display area -->
-                        <img id="uploaded-image" style="max-width: 100%; max-height: 100%; object-fit: contain; display: none;">
+                        original_width, original_height = input_image.size
+                        aspect_ratio = original_width / original_height
                         
-                        <!-- Upload prompt -->
-                        <div id="upload-prompt" style="text-align: center; color: #666;">
-                            <div style="font-size: 48px; margin-bottom: 10px;">📸</div>
-                            <p><strong>Click here to upload an image</strong></p>
-                            <p>Then use the arrows to control camera angles</p>
-                            <small style="color: #999;">Supports JPG, PNG, WebP</small>
-                        </div>
+                        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
                         
-                        <!-- Directional arrow controls (initially hidden) -->
-                        <div id="arrow-controls" style="position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; display: none;">
-                            <!-- Left arrow -->
-                            <button class="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.9); border: none; 
-                                           border-radius: 50%; color: white; font-size: 24px; 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 -->
-                            <button class="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.9); border: none; 
-                                           border-radius: 50%; color: white; font-size: 24px; 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 -->
-                            <button class="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.9); border: none; 
-                                           border-radius: 50%; color: white; font-size: 24px; 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 -->
-                            <button class="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.9); border: none; 
-                                           border-radius: 50%; color: white; font-size: 24px; 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: 20px; left: 50%; transform: translateX(-50%); 
-                                        display: flex; gap: 15px; pointer-events: auto; z-index: 10;">
-                                <button class="arrow-btn" data-action="zoom-out"
-                                        style="width: 55px; height: 55px; background: rgba(255,165,0,0.9); border: none; 
-                                               border-radius: 50%; color: white; font-size: 24px; cursor: pointer; 
-                                               transition: all 0.2s; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
-                                    −
-                                </button>
-                                
-                                <button class="arrow-btn" data-action="zoom-in"
-                                        style="width: 55px; height: 55px; background: rgba(255,165,0,0.9); border: none; 
-                                               border-radius: 50%; color: white; font-size: 20px; cursor: pointer; 
-                                               transition: all 0.2s; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
-                                    +
-                                </button>
-                            </div>
-                        </div>
+                        # Ensure minimum size
+                        new_width = max(256, min(1024, new_width))
+                        new_height = max(256, min(1024, new_height))
                         
-                        <!-- Status display -->
-                        <div id="status-display" 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: 10; display: none;
-                                                       box-shadow: 0 4px 12px rgba(0,0,0,0.4);">
-                            <div id="camera-values">Az: 0° | El: 0° | Dist: 1.0</div>
+                        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", 
+                    value="<sks> front view eye-level shot medium shot",
+                    interactive=False
+                )
+                
+            # Right column: Interactive image view
+            with gr.Column(scale=1):
+                gr.Markdown("### 🎯 Interactive Image View")
+                gr.Markdown("*Upload an image, then hover to see controls and click arrows to generate new views*")
+                
+                # Interactive HTML component using working pattern
+                result_display = gr.HTML(
+                    value="""
+                    <div style="width: 100%; height: 500px; background: #f8f8f8; border: 2px solid #e0e0e0; border-radius: 12px; 
+                                position: relative; display: flex; align-items: center; justify-content: center;">
+                        <div style="text-align: center; color: #999;">
+                            <div style="font-size: 48px; margin-bottom: 10px;">📸</div>
+                            <p>Upload an image on the left to begin</p>
+                            <p>Then hover here to see camera controls</p>
                         </div>
                     </div>
                     """,
-                    js_on_load="""
-                    (() => {
-                        const container = element.querySelector('#camera-interface');
-                        if (!container) return;
-                        
-                        const fileInput = container.querySelector('#file-input');
-                        const uploadedImage = container.querySelector('#uploaded-image');
-                        const uploadPrompt = container.querySelector('#upload-prompt');
-                        const arrowControls = container.querySelector('#arrow-controls');
-                        const statusDisplay = container.querySelector('#status-display');
-                        const cameraValues = container.querySelector('#camera-values');
-                        
-                        let currentAzimuth = 0;
-                        let currentElevation = 0;
-                        let currentDistance = 1.0;
-                        
-                        function updateDisplay() {
-                            cameraValues.textContent = `Az: ${currentAzimuth}° | El: ${currentElevation}° | Dist: ${currentDistance}`;
-                        }
-                        
-                        function updateGradioInputs() {
-                            setTimeout(() => {
-                                console.log('Updating Gradio inputs...');
-                                
-                                // Find the input elements
-                                let azInput = document.getElementById('js-azimuth');
-                                let elInput = document.getElementById('js-elevation');
-                                let distInput = document.getElementById('js-distance');
-                                let imgInput = document.getElementById('js-image-data');
-                                
-                                // Look for actual input/textarea elements inside
-                                if (azInput) {
-                                    const inputInside = azInput.querySelector('input, textarea');
-                                    if (inputInside) {
-                                        azInput = inputInside;
-                                        console.log('Updating azimuth to:', currentAzimuth);
-                                        azInput.value = currentAzimuth;
-                                        azInput.dispatchEvent(new Event('input', { bubbles: true }));
-                                        azInput.dispatchEvent(new Event('change', { bubbles: true }));
-                                    }
-                                }
-                                if (elInput) {
-                                    const inputInside = elInput.querySelector('input, textarea');
-                                    if (inputInside) {
-                                        elInput = inputInside;
-                                        console.log('Updating elevation to:', currentElevation);
-                                        elInput.value = currentElevation;
-                                        elInput.dispatchEvent(new Event('input', { bubbles: true }));
-                                        elInput.dispatchEvent(new Event('change', { bubbles: true }));
-                                    }
-                                }
-                                if (distInput) {
-                                    const inputInside = distInput.querySelector('input, textarea');
-                                    if (inputInside) {
-                                        distInput = inputInside;
-                                        console.log('Updating distance to:', currentDistance);
-                                        distInput.value = currentDistance;
-                                        distInput.dispatchEvent(new Event('input', { bubbles: true }));
-                                        distInput.dispatchEvent(new Event('change', { bubbles: true }));
-                                    }
-                                }
-                                if (imgInput && uploadedImage.src) {
-                                    const inputInside = imgInput.querySelector('input, textarea');
-                                    if (inputInside) {
-                                        imgInput = inputInside;
-                                        console.log('Updating image data, length:', uploadedImage.src.length);
-                                        imgInput.value = uploadedImage.src;
-                                        imgInput.dispatchEvent(new Event('input', { bubbles: true }));
-                                        imgInput.dispatchEvent(new Event('change', { bubbles: true }));
-                                    }
-                                }
-                            }, 200);
-                        }
+                    elem_id="result-display"
+                )
+                
+                # Debug output
+                debug_output = gr.Textbox(label="Debug Output", visible=True)
+        
+        # Functions for handling interactions (inside Blocks context)
+        def show_uploaded_image_with_arrows(uploaded_image):
+            """Show uploaded image with working arrow controls."""
+            if uploaded_image is None:
+                return gr.update(value="""
+                <div style="width: 100%; height: 500px; background: #f8f8f8; border: 2px solid #e0e0e0; border-radius: 12px; 
+                            position: relative; display: flex; align-items: center; justify-content: center;">
+                    <div style="text-align: center; color: #999;">
+                        <div style="font-size: 48px; margin-bottom: 10px;">📸</div>
+                        <p>Upload an image on the left to begin</p>
+                        <p>Then hover here to see camera controls</p>
+                    </div>
+                </div>
+                """)
+            
+            # Convert to data URL
+            buffered = BytesIO()
+            uploaded_image.save(buffered, format="PNG")
+            img_str = base64.b64encode(buffered.getvalue()).decode()
+            data_url = f"data:image/png;base64,{img_str}"
+            
+            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;">
+                
+                <!-- Arrow controls -->
+                <div id="arrow-controls" style="position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s ease; z-index: 10;">
+                    
+                    <!-- Left Arrow -->
+                    <button onclick="
+                        console.log('Left arrow clicked');
+                        var azInputElement = document.getElementById('js-azimuth');
+                        console.log('azInputElement:', azInputElement);
+                        if (!azInputElement) {{ console.error('js-azimuth element not found'); return; }}
                         
-                        // Click to upload
-                        container.addEventListener('click', function(e) {
-                            if (!e.target.classList.contains('arrow-btn') && uploadedImage.style.display !== 'block') {
-                                fileInput.click();
-                            }
-                        });
+                        // Try multiple selectors for Gradio textbox input
+                        var azInput = azInputElement.querySelector('input') || 
+                                     azInputElement.querySelector('textarea') ||
+                                     azInputElement.querySelector('[contenteditable]') ||
+                                     azInputElement.querySelector('.gr-textbox input') ||
+                                     azInputElement.querySelector('input[type=text]');
                         
-                        // File upload handler
-                        fileInput.addEventListener('change', function(e) {
-                            const file = e.target.files[0];
-                            if (file) {
-                                const reader = new FileReader();
-                                reader.onload = function(e) {
-                                    uploadedImage.src = e.target.result;
-                                    uploadedImage.style.display = 'block';
-                                    uploadPrompt.style.display = 'none';
-                                    arrowControls.style.display = 'block';
-                                    statusDisplay.style.display = 'block';
-                                    container.style.cursor = 'default';
-                                    container.style.border = '2px solid #ddd';
-                                    updateDisplay();
-                                    updateGradioInputs();
-                                };
-                                reader.readAsDataURL(file);
-                            }
-                        });
+                        console.log('azInput:', azInput);
+                        console.log('All inputs in element:', azInputElement.querySelectorAll('input, textarea'));
                         
-                        // Hover effects for arrows
-                        container.addEventListener('mouseenter', function(e) {
-                            if (arrowControls.style.display === 'block') {
-                                arrowControls.style.opacity = '1';
-                            }
-                        });
+                        if (!azInput) {{ 
+                            console.error('No input found. Element HTML:', azInputElement.innerHTML);
+                            console.error('Trying to find any input in the container...');
+                            var allInputs = document.querySelectorAll('#js-azimuth input, #js-azimuth textarea');
+                            console.log('All matching inputs:', allInputs);
+                            if (allInputs.length > 0) azInput = allInputs[0];
+                        }}
                         
-                        container.addEventListener('mouseleave', function(e) {
-                            if (arrowControls.style.display === 'block') {
-                                arrowControls.style.opacity = '0.3';
-                            }
-                        });
+                        if (!azInput) {{ console.error('Still no input found'); return; }}
                         
-                        // Arrow button handlers
-                        container.addEventListener('click', function(e) {
-                            if (e.target.classList.contains('arrow-btn')) {
-                                e.stopPropagation();
-                                const action = e.target.dataset.action;
-                                
-                                console.log('Arrow clicked:', 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();
-                                updateGradioInputs();
-                            }
-                        });
+                        var currentAz = parseInt(azInput.value) || 0;
+                        var newAz = (currentAz - 45 + 360) % 360;
+                        console.log('Setting azimuth from', currentAz, 'to', newAz);
+                        azInput.value = newAz;
+                        azInput.dispatchEvent(new Event('input', {{bubbles: true}}));
+                        azInput.dispatchEvent(new Event('change', {{bubbles: true}}));
+                        var statusAz = document.getElementById('status-az');
+                        if (statusAz) statusAz.textContent = newAz;
+                    "
+                    style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); 
+                           width: 60px; height: 60px; background: rgba(0,255,136,0.9); border: none; 
+                           border-radius: 50%; color: white; font-size: 24px; cursor: pointer;
+                           box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: transform 0.2s;"
+                    onmouseover="this.style.transform += ' scale(1.1)'" 
+                    onmouseout="this.style.transform = this.style.transform.replace(' scale(1.1)', '')"
+                    title="Rotate Left">
+                        ←
+                    </button>
+                    
+                    <!-- Right Arrow -->
+                    <button onclick="
+                        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}}));
+                        var statusAz = document.getElementById('status-az');
+                        if (statusAz) statusAz.textContent = newAz;
+                    "
+                    style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); 
+                           width: 60px; height: 60px; background: rgba(0,255,136,0.9); border: none; 
+                           border-radius: 50%; color: white; font-size: 24px; cursor: pointer;
+                           box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: transform 0.2s;"
+                    onmouseover="this.style.transform += ' scale(1.1)'" 
+                    onmouseout="this.style.transform = this.style.transform.replace(' scale(1.1)', '')"
+                    title="Rotate Right">
+                        →
+                    </button>
+                    
+                    <!-- Up Arrow -->
+                    <button onclick="
+                        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}}));
+                        var statusEl = document.getElementById('status-el');
+                        if (statusEl) statusEl.textContent = newEl;
+                    "
+                    style="position: absolute; top: 20px; left: 50%; transform: translateX(-50%); 
+                           width: 60px; height: 60px; background: rgba(255,105,180,0.9); border: none; 
+                           border-radius: 50%; color: white; font-size: 24px; cursor: pointer;
+                           box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: transform 0.2s;"
+                    onmouseover="this.style.transform += ' scale(1.1)'" 
+                    onmouseout="this.style.transform = this.style.transform.replace(' scale(1.1)', '')"
+                    title="Look Up">
+                        ↑
+                    </button>
+                    
+                    <!-- Down Arrow -->
+                    <button onclick="
+                        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}}));
+                        var statusEl = document.getElementById('status-el');
+                        if (statusEl) statusEl.textContent = newEl;
+                    "
+                    style="position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); 
+                           width: 60px; height: 60px; background: rgba(255,105,180,0.9); border: none; 
+                           border-radius: 50%; color: white; font-size: 24px; cursor: pointer;
+                           box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: transform 0.2s;"
+                    onmouseover="this.style.transform += ' scale(1.1)'" 
+                    onmouseout="this.style.transform = this.style.transform.replace(' scale(1.1)', '')"
+                    title="Look Down">
+                        ↓
+                    </button>
+                    
+                    <!-- Zoom Controls -->
+                    <div style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); 
+                                display: flex; gap: 15px;">
                         
-                        // Button hover effects
-                        container.addEventListener('mouseover', function(e) {
-                            if (e.target.classList.contains('arrow-btn')) {
-                                e.target.style.transform += ' scale(1.1)';
-                            }
-                        });
+                        <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}}));
+                            var statusDist = document.getElementById('status-dist');
+                            if (statusDist) statusDist.textContent = newDist.toFixed(1);
+                        "
+                        style="width: 55px; height: 55px; background: rgba(255,165,0,0.9); border: none; 
+                               border-radius: 50%; color: white; font-size: 24px; cursor: pointer;
+                               box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: transform 0.2s;"
+                        onmouseover="this.style.transform = 'scale(1.1)'" 
+                        onmouseout="this.style.transform = ''"
+                        title="Zoom Out">
+                            −
+                        </button>
                         
-                        container.addEventListener('mouseout', function(e) {
-                            if (e.target.classList.contains('arrow-btn')) {
-                                e.target.style.transform = e.target.style.transform.replace(' scale(1.1)', '');
-                            }
-                        });
-                    })();
-                    """,
-                    elem_id="camera-display"
-                )
+                        <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}}));
+                            var statusDist = document.getElementById('status-dist');
+                            if (statusDist) statusDist.textContent = newDist.toFixed(1);
+                        "
+                        style="width: 55px; height: 55px; background: rgba(255,165,0,0.9); border: none; 
+                               border-radius: 50%; color: white; font-size: 24px; cursor: pointer;
+                               box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: transform 0.2s;"
+                        onmouseover="this.style.transform = 'scale(1.1)'" 
+                        onmouseout="this.style.transform = ''"
+                        title="Zoom In">
+                            +
+                        </button>
+                    </div>
+                    
+                    <!-- Status Display -->
+                    <div style="position: absolute; top: 15px; right: 15px; background: rgba(0,0,0,0.85); 
+                                color: white; padding: 10px 14px; border-radius: 8px; font-family: monospace; 
+                                font-size: 13px; box-shadow: 0 4px 12px rgba(0,0,0,0.4);">
+                        <div>Az: <span id="status-az">0</span>° | El: <span id="status-el">0</span>° | Dist: <span id="status-dist">1.0</span></div>
+                    </div>
+                </div>
+            </div>
+            """)
+        
+        def handle_parameter_change(az, el, dist, input_image, seed_val, randomize_seed_val, guidance_val, steps_val, h_val, w_val):
+            """Handle camera parameter changes and generate new view."""
+            try:
+                azimuth = float(az)
+                elevation = float(el) 
+                distance = float(dist)
                 
-                # Debug textboxes (visible for now, can be hidden later)
-                js_azimuth = gr.Textbox("0", label="Azimuth", elem_id="js-azimuth")
-                js_elevation = gr.Textbox("0", label="Elevation", elem_id="js-elevation") 
-                js_distance = gr.Textbox("1.0", label="Distance", elem_id="js-distance")
-                js_image_data = gr.Textbox("", label="Image Data", elem_id="js-image-data", max_lines=2)
+                # Build prompt
+                prompt = build_camera_prompt(azimuth, elevation, distance)
                 
-                run_btn = gr.Button("🚀 Generate New View", variant="primary", size="lg")
+                if input_image is not None:
+                    # Generate new image using the actual Qwen model
+                    generated_image, final_seed, final_prompt = infer_camera_edit(
+                        image=input_image,
+                        azimuth=azimuth,
+                        elevation=elevation,
+                        distance=distance,
+                        seed=seed_val,
+                        randomize_seed=randomize_seed_val,
+                        guidance_scale=guidance_val,
+                        num_inference_steps=steps_val,
+                        height=int(h_val),
+                        width=int(w_val)
+                    )
+                    
+                    # Update the HTML display with the generated image
+                    return show_uploaded_image_with_arrows(generated_image).value, prompt, f"Generated view: Az={azimuth}°, El={elevation}°, Dist={distance}, Seed={final_seed}"
                 
-                # Advanced settings
-                with gr.Accordion("⚙️ Generation Settings", open=False):
-                    seed = gr.Slider(label="Seed", minimum=0, maximum=MAX_SEED, step=1, value=42)
-                    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=32, value=1024)
-                    width = gr.Slider(label="Width", minimum=256, maximum=2048, step=32, value=1024)
-            
-            # Right column: Generated result
-            with gr.Column(scale=1):
-                result = gr.Image(label="Generated View", height=500)
-                prompt_display = gr.Textbox(
-                    label="Current Camera Prompt",
-                    value="<sks> front view eye-level shot medium shot",
-                    interactive=False
-                )
+                return gr.update(), prompt, f"Parameters updated: Az={azimuth}°, El={elevation}°, Dist={distance}"
+                
+            except Exception as e:
+                return gr.update(), f"Error: {str(e)}", f"Error processing parameters: {str(e)}"
+        
+        # Update dimensions when image is uploaded
+        image.upload(
+            fn=update_dimensions_on_upload,
+            inputs=[image],
+            outputs=[width, height]
+        )
+        
+        # Image upload handler
+        image.upload(
+            fn=show_uploaded_image_with_arrows,
+            inputs=[image],
+            outputs=[result_display]
+        )
+        
+        # Parameter change handlers (triggered by arrow clicks)
+        js_azimuth.change(
+            fn=handle_parameter_change,
+            inputs=[js_azimuth, js_elevation, js_distance, image, seed, randomize_seed, guidance_scale, num_inference_steps, height, width],
+            outputs=[result_display, prompt_display, debug_output]
+        )
+        
+        js_elevation.change(
+            fn=handle_parameter_change,
+            inputs=[js_azimuth, js_elevation, js_distance, image, seed, randomize_seed, guidance_scale, num_inference_steps, height, width],
+            outputs=[result_display, prompt_display, debug_output]
+        )
         
-        # Generate button event
-        run_btn.click(
-            fn=generate_from_inputs,
-            inputs=[js_azimuth, js_elevation, js_distance, js_image_data, seed, randomize_seed, guidance_scale, num_inference_steps, height, width],
-            outputs=[result, seed, prompt_display]
+        js_distance.change(
+            fn=handle_parameter_change,
+            inputs=[js_azimuth, js_elevation, js_distance, image, seed, randomize_seed, guidance_scale, num_inference_steps, height, width],
+            outputs=[result_display, prompt_display, debug_output]
         )
     
     return demo