Update app.py

app.py

@@ -4,22 +4,15 @@ import random
 import torch
 import spaces
 from PIL import Image
-
-# --- Imports ---
 from diffusers import FlowMatchEulerDiscreteScheduler
-try:
-    from qwenimage.pipeline_qwenimage_edit_plus import QwenImageEditPlusPipeline
-    from qwenimage.transformer_qwenimage import QwenImageTransformer2DModel
-    from qwenimage.qwen_fa3_processor import QwenDoubleStreamAttnProcessorFA3
-except ImportError:
-    raise ImportError("Please ensure the 'qwenimage' package is installed.")
+from qwenimage.pipeline_qwenimage_edit_plus import QwenImageEditPlusPipeline
+from qwenimage.transformer_qwenimage import QwenImageTransformer2DModel
+from qwenimage.qwen_fa3_processor import QwenDoubleStreamAttnProcessorFA3
 
 MAX_SEED = np.iinfo(np.int32).max
-
-# --- Configuration & Model Loading ---
+# --- Model Loading ---
 dtype = torch.bfloat16
 device = "cuda" if torch.cuda.is_available() else "cpu"
-
 pipe = QwenImageEditPlusPipeline.from_pretrained(
     "Qwen/Qwen-Image-Edit-2511",
     transformer=QwenImageTransformer2DModel.from_pretrained(
@@ -29,7 +22,6 @@ pipe = QwenImageEditPlusPipeline.from_pretrained(
     ),
     torch_dtype=dtype
 ).to(device)
-
 try:
     pipe.transformer.set_attn_processor(QwenDoubleStreamAttnProcessorFA3())
     print("Flash Attention 3 Processor set successfully.")
@@ -41,404 +33,567 @@ ADAPTER_SPECS = {
         "repo": "dx8152/Qwen-Edit-2509-Multi-Angle-Lighting",
         "weights": "多角度灯光-251116.safetensors",
         "adapter_name": "multi-angle-lighting"
-    }
+    },
 }
-
-CURRENT_LOADED_ADAPTER = None
-
-# --- Logic: Mappings ---
-LIGHTING_AZIMUTH_MAP = {
-    0: "Light source from the Front",
-    45: "Light source from the Right Front",
-    90: "Light source from the Right",
-    135: "Light source from the Right Rear",
-    180: "Light source from the Rear",
-    225: "Light source from the Left Rear",
-    270: "Light source from the Left",
-    315: "Light source from the Left Front"
+loaded = False
+
+# --- Prompt Building ---
+# Azimuth mappings (8 positions)
+AZIMUTH_MAP = {
+    0: "Front",
+    45: "Right Front",
+    90: "Right",
+    135: "Right Rear",
+    180: "Rear",
+    225: "Left Rear",
+    270: "Left",
+    315: "Left Front"
+}
+# Elevation mappings (3 positions)
+ELEVATION_MAP = {
+    -90: "Below",
+    0: "",
+    90: "Above"
 }
 
-def snap_to_nearest_key(value, keys):
-    return min(keys, key=lambda x: abs(x - value))
+def snap_to_nearest(value, options):
+    """Snap a value to the nearest option in a list."""
+    return min(options, key=lambda x: abs(x - value))
 
 def build_lighting_prompt(azimuth: float, elevation: float) -> str:
-    if elevation >= 60: return "Light source from Above"
-    if elevation <= -60: return "Light source from Below"
-    keys = list(LIGHTING_AZIMUTH_MAP.keys())
-    if azimuth > 337.5: azimuth = 0
-    azimuth_snapped = snap_to_nearest_key(azimuth, keys)
-    return LIGHTING_AZIMUTH_MAP[azimuth_snapped]
+    """
+    Build a lighting prompt from azimuth and elevation values.
+    
+    Args:
+        azimuth: Horizontal rotation in degrees (0-360)
+        elevation: Vertical angle in degrees (-90 to 90)
+    
+    Returns:
+        Formatted prompt string for the LoRA
+    """
+    # Snap to nearest valid values
+    azimuth_snapped = snap_to_nearest(azimuth, list(AZIMUTH_MAP.keys()))
+    elevation_snapped = snap_to_nearest(elevation, list(ELEVATION_MAP.keys()))
+    
+    if elevation_snapped == 0:
+        return f"Light source from the {AZIMUTH_MAP[azimuth_snapped]}"
+    else:
+        return f"Light source from {ELEVATION_MAP[elevation_snapped]}"
 
-# --- Inference ---
 @spaces.GPU
-def infer_lighting_edit(image, azimuth, elevation, seed, randomize_seed, guidance_scale, num_inference_steps, height, width):
-    global CURRENT_LOADED_ADAPTER
-    spec = ADAPTER_SPECS["Multi-Angle-Lighting"]
-    if CURRENT_LOADED_ADAPTER != spec["adapter_name"]:
-        pipe.load_lora_weights(spec["repo"], weight_name=spec["weights"], adapter_name=spec["adapter_name"])
-        pipe.set_adapters([spec["adapter_name"]], adapter_weights=[1.0])
-        CURRENT_LOADED_ADAPTER = spec["adapter_name"]
+def infer_lighting_edit(
+    image: Image.Image,
+    azimuth: float = 0.0,
+    elevation: float = 0.0,
+    seed: int = 0,
+    randomize_seed: bool = True,
+    guidance_scale: float = 1.0,
+    num_inference_steps: int = 4,
+    height: int = 1024,
+    width: int = 1024,
+):
+    """
+    Edit the lighting of an image using Qwen Image Edit 2511 with multi-angle lighting LoRA.
+    """
+    global loaded
+    progress = gr.Progress(track_tqdm=True)
     
-    prompt = build_lighting_prompt(azimuth, elevation)
-    print(f"💡 Generated Prompt: {prompt}")
-
-    if image is None: raise gr.Error("Please upload an image.")
-    if randomize_seed: seed = random.randint(0, MAX_SEED)
+    if not loaded:
+        pipe.load_lora_weights(
+            ADAPTER_SPECS["Multi-Angle-Lighting"]["repo"],
+            weight_name=ADAPTER_SPECS["Multi-Angle-Lighting"]["weights"],
+            adapter_name=ADAPTER_SPECS["Multi-Angle-Lighting"]["adapter_name"]
+        )
+        pipe.set_adapters([ADAPTER_SPECS["Multi-Angle-Lighting"]["adapter_name"]], adapter_weights=[1.0])
+        loaded = True
     
+    prompt = build_lighting_prompt(azimuth, elevation)
+    print(f"Generated Prompt: {prompt}")
+    if randomize_seed:
+        seed = random.randint(0, MAX_SEED)
     generator = torch.Generator(device=device).manual_seed(seed)
-    pil_image = image.convert("RGB")
-
+    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")
     result = pipe(
-        image=[pil_image], prompt=prompt, height=height, width=width,
-        num_inference_steps=num_inference_steps, generator=generator,
-        guidance_scale=guidance_scale, num_images_per_prompt=1
+        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
 
 def update_dimensions_on_upload(image):
-    if image is None: return 1024, 1024
-    w, h = image.size
-    if w > h: new_w, new_h = 1024, int(1024 * (h / w))
-    else: new_h, new_w = 1024, int(1024 * (w / h))
-    return (new_w // 8) * 8, (new_h // 8) * 8
-
-# --- 🌟 OPTIMIZED 3D CONTROLLER 🌟 ---
-class LightControl3D(gr.HTML):
+    """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
+
+# --- 3D Lighting Control Component ---
+class LightingControl3D(gr.HTML):
     """
-    High-Fidelity 3D Studio Light Controller
+    A 3D lighting control component using Three.js.
+    Outputs: { azimuth: number, elevation: number }
+    Accepts imageUrl prop to display user's uploaded image on the plane.
     """
     def __init__(self, value=None, imageUrl=None, **kwargs):
-        if value is None: value = {"azimuth": 0, "elevation": 0}
+        if value is None:
+            value = {"azimuth": 0, "elevation": 0}
         
         html_template = """
-        <div id="light-control-wrapper" style="width: 100%; height: 500px; position: relative; background: #0f0f0f; border-radius: 12px; overflow: hidden; border: 1px solid #333; box-shadow: 0 4px 20px rgba(0,0,0,0.5);">
-            <div id="prompt-badge" style="position: absolute; top: 20px; left: 50%; transform: translateX(-50%); 
-                 background: rgba(10,10,10,0.85); border: 1px solid #FFD700; color: #FFD700; 
-                 padding: 10px 30px; border-radius: 8px; font-family: 'Segoe UI', monospace; font-weight: 600; font-size: 14px; 
-                 z-index: 10; pointer-events: none; backdrop-filter: blur(4px); box-shadow: 0 4px 12px rgba(0,0,0,0.5);
-                 transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);">
-                 Light Source: Front
-            </div>
-            
-            <div style="position: absolute; bottom: 20px; left: 20px; color: #666; font-size: 11px; font-family: sans-serif; pointer-events: none; line-height: 1.5;">
-                <span style="color: #FFD700">●</span> Light Position<br>
-                <span style="color: #444">■</span> Shadow Caster
-            </div>
+        <div id="lighting-control-wrapper" style="width: 100%; height: 450px; position: relative; background: #1a1a1a; border-radius: 12px; overflow: hidden;">
+            <div id="prompt-overlay" style="position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.8); padding: 8px 16px; border-radius: 8px; font-family: monospace; font-size: 12px; color: #00ff88; white-space: nowrap; z-index: 10;"></div>
         </div>
         """
         
         js_on_load = """
         (() => {
-            const wrapper = element.querySelector('#light-control-wrapper');
-            const badge = element.querySelector('#prompt-badge');
+            const wrapper = element.querySelector('#lighting-control-wrapper');
+            const promptOverlay = element.querySelector('#prompt-overlay');
             
+            // Wait for THREE to load
             const initScene = () => {
-                if (typeof THREE === 'undefined') { setTimeout(initScene, 100); return; }
+                if (typeof THREE === 'undefined') {
+                    setTimeout(initScene, 100);
+                    return;
+                }
                 
-                // --- 1. Scene & Renderer (Enable Shadows) ---
+                // Scene setup
                 const scene = new THREE.Scene();
-                scene.background = new THREE.Color(0x0f0f0f);
-                scene.fog = new THREE.Fog(0x0f0f0f, 4, 12);
+                scene.background = new THREE.Color(0x1a1a1a);
                 
-                const camera = new THREE.PerspectiveCamera(45, wrapper.clientWidth / wrapper.clientHeight, 0.1, 100);
-                camera.position.set(5, 4, 5); 
-                camera.lookAt(0, 0.5, 0);
+                const camera = new THREE.PerspectiveCamera(50, wrapper.clientWidth / wrapper.clientHeight, 0.1, 1000);
+                camera.position.set(4.5, 3, 4.5);
+                camera.lookAt(0, 0.75, 0);
                 
                 const renderer = new THREE.WebGLRenderer({ antialias: true });
-                renderer.setSize(wrapper.clientWidth, wrapper.clientHeight);
+                renderer.setSize(wrapper.clientWidth / wrapper.clientHeight);
                 renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-                renderer.shadowMap.enabled = true; // CRITICAL: Enable Shadows
-                renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-                wrapper.appendChild(renderer.domElement);
+                wrapper.insertBefore(renderer.domElement, promptOverlay);
+                
+                // Lighting
+                scene.add(new THREE.AmbientLight(0xffffff, 0.2));
+                
+                // Grid
+                scene.add(new THREE.GridHelper(8, 16, 0x333333, 0x222222));
                 
-                // --- 2. Environment (Studio Floor) ---
+                // Constants
                 const CENTER = new THREE.Vector3(0, 0.75, 0);
-                const RADIUS = 2.8;
-
-                // Floor (Shadow Catcher)
-                const planeGeo = new THREE.PlaneGeometry(20, 20);
-                const planeMat = new THREE.ShadowMaterial({ opacity: 0.5, color: 0x000000 });
-                const floor = new THREE.Mesh(planeGeo, planeMat);
-                floor.rotation.x = -Math.PI / 2;
-                floor.position.y = 0;
-                floor.receiveShadow = true;
-                scene.add(floor);
-                
-                // Grid (Visual Reference)
-                const grid = new THREE.GridHelper(10, 20, 0x333333, 0x111111);
-                scene.add(grid);
-
-                // --- 3. The Subject (Thick Slab) ---
-                let subjectGroup = new THREE.Group();
-                scene.add(subjectGroup);
-                
-                // Base Stand
-                const standGeo = new THREE.CylinderGeometry(0.8, 0.8, 0.05, 32);
-                const standMat = new THREE.MeshStandardMaterial({ color: 0x222222, roughness: 0.2, metalness: 0.8 });
-                const stand = new THREE.Mesh(standGeo, standMat);
-                stand.position.y = 0.025;
-                stand.receiveShadow = true;
-                subjectGroup.add(stand);
-
-                // The Image Box
-                let imageMesh;
-                const imageMat = new THREE.MeshStandardMaterial({ 
-                    color: 0xaaaaaa, roughness: 0.4, side: THREE.DoubleSide 
-                });
+                const BASE_DISTANCE = 2.5;
+                const AZIMUTH_RADIUS = 2.4;
+                const ELEVATION_RADIUS = 1.8;
                 
-                function createSubject(width=1.5, height=1.5) {
-                    if(imageMesh) {
-                        subjectGroup.remove(imageMesh);
-                        imageMesh.geometry.dispose();
-                    }
-                    // A box with slight thickness to cast better shadows
-                    imageMesh = new THREE.Mesh(new THREE.BoxGeometry(width, height, 0.05), imageMat);
-                    imageMesh.position.set(0, height/2 + 0.1, 0);
-                    imageMesh.castShadow = true; // CAST SHADOW
-                    imageMesh.receiveShadow = true;
-                    subjectGroup.add(imageMesh);
+                // State
+                let azimuthAngle = props.value?.azimuth || 0;
+                let elevationAngle = props.value?.elevation || 0;
+                
+                // Mappings
+                const azimuthSteps = [0, 45, 90, 135, 180, 225, 270, 315];
+                const elevationSteps = [-90, 0, 90];
+                const azimuthNames = {
+                    0: 'Front', 45: 'Right Front', 90: 'Right',
+                    135: 'Right Rear', 180: 'Rear', 225: 'Left Rear',
+                    270: 'Left', 315: 'Left Front'
+                };
+                const elevationNames = { '-90': 'Below', '0': '', '90': 'Above' };
+                
+                function snapToNearest(value, steps) {
+                    return steps.reduce((prev, curr) => Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);
                 }
-                createSubject();
-
-                // Texture Loader
-                function updateTexture(url) {
-                    if (!url) { imageMat.map = null; imageMat.needsUpdate = true; return; }
-                    new THREE.TextureLoader().load(url, (tex) => {
-                        tex.encoding = THREE.sRGBEncoding;
-                        imageMat.map = tex;
-                        imageMat.color.setHex(0xffffff); // Reset tint
-                        imageMat.needsUpdate = true;
+                
+                // Create placeholder texture (smiley face)
+                function createPlaceholderTexture() {
+                    const canvas = document.createElement('canvas');
+                    canvas.width = 256;
+                    canvas.height = 256;
+                    const ctx = canvas.getContext('2d');
+                    ctx.fillStyle = '#3a3a4a';
+                    ctx.fillRect(0, 0, 256, 256);
+                    ctx.fillStyle = '#ffcc99';
+                    ctx.beginPath();
+                    ctx.arc(128, 128, 80, 0, Math.PI * 2);
+                    ctx.fill();
+                    ctx.fillStyle = '#333';
+                    ctx.beginPath();
+                    ctx.arc(100, 110, 10, 0, Math.PI * 2);
+                    ctx.arc(156, 110, 10, 0, Math.PI * 2);
+                    ctx.fill();
+                    ctx.strokeStyle = '#333';
+                    ctx.lineWidth = 3;
+                    ctx.beginPath();
+                    ctx.arc(128, 130, 35, 0.2, Math.PI - 0.2);
+                    ctx.stroke();
+                    return new THREE.CanvasTexture(canvas);
+                }
+                
+                // Target image plane
+                let currentTexture = createPlaceholderTexture();
+                const planeMaterial = new THREE.MeshStandardMaterial({ map: currentTexture, side: THREE.DoubleSide, roughness: 0.5, metalness: 0 });
+                let targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(1.2, 1.2), planeMaterial);
+                targetPlane.position.copy(CENTER);
+                scene.add(targetPlane);
+                
+                // Function to update texture from image URL
+                function updateTextureFromUrl(url) {
+                    if (!url) {
+                        // Reset to placeholder
+                        planeMaterial.map = createPlaceholderTexture();
+                        planeMaterial.needsUpdate = true;
+                        // Reset plane to square
+                        scene.remove(targetPlane);
+                        targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(1.2, 1.2), planeMaterial);
+                        targetPlane.position.copy(CENTER);
+                        scene.add(targetPlane);
+                        return;
+                    }
+                    
+                    const loader = new THREE.TextureLoader();
+                    loader.crossOrigin = 'anonymous';
+                    loader.load(url, (texture) => {
+                        texture.minFilter = THREE.LinearFilter;
+                        texture.magFilter = THREE.LinearFilter;
+                        planeMaterial.map = texture;
+                        planeMaterial.needsUpdate = true;
                         
-                        const img = tex.image;
-                        if(img && img.width && img.height) {
+                        // Adjust plane aspect ratio to match image
+                        const img = texture.image;
+                        if (img && img.width && img.height) {
                             const aspect = img.width / img.height;
-                            const maxDim = 1.8;
-                            if (aspect > 1) createSubject(maxDim, maxDim/aspect);
-                            else createSubject(maxDim*aspect, maxDim);
+                            const maxSize = 1.5;
+                            let planeWidth, planeHeight;
+                            if (aspect > 1) {
+                                planeWidth = maxSize;
+                                planeHeight = maxSize / aspect;
+                            } else {
+                                planeHeight = maxSize;
+                                planeWidth = maxSize * aspect;
+                            }
+                            scene.remove(targetPlane);
+                            targetPlane = new THREE.Mesh(
+                                new THREE.PlaneGeometry(planeWidth, planeHeight),
+                                planeMaterial
+                            );
+                            targetPlane.position.copy(CENTER);
+                            scene.add(targetPlane);
                         }
+                    }, undefined, (err) => {
+                        console.error('Failed to load texture:', err);
                     });
                 }
-                if (props.imageUrl) updateTexture(props.imageUrl);
-
-                // --- 4. The Light System (Visual + Actual Light) ---
-                const lightPivot = new THREE.Group();
-                scene.add(lightPivot);
-
-                // Actual Light Source (for Shadows)
-                const dirLight = new THREE.DirectionalLight(0xffffff, 1.5);
-                dirLight.castShadow = true;
-                dirLight.shadow.mapSize.width = 1024;
-                dirLight.shadow.mapSize.height = 1024;
-                dirLight.shadow.camera.near = 0.5;
-                dirLight.shadow.camera.far = 10;
-                lightPivot.add(dirLight);
-
-                // Visual Representation (The Gizmo)
-                const gizmoGroup = new THREE.Group();
-                lightPivot.add(gizmoGroup);
-
-                // The "Sun" Mesh
-                const sunGeo = new THREE.SphereGeometry(0.15, 32, 32);
-                const sunMat = new THREE.MeshBasicMaterial({ color: 0xFFD700 });
-                const sun = new THREE.Mesh(sunGeo, sunMat);
-                gizmoGroup.add(sun);
-                
-                // The "Glow" Sprite
-                const canvas = document.createElement('canvas');
-                canvas.width = 128; canvas.height = 128;
-                const context = canvas.getContext('2d');
-                const gradient = context.createRadialGradient(64, 64, 0, 64, 64, 64);
-                gradient.addColorStop(0, 'rgba(255, 215, 0, 1)');
-                gradient.addColorStop(0.4, 'rgba(255, 215, 0, 0.2)');
-                gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
-                context.fillStyle = gradient;
-                context.fillRect(0, 0, 128, 128);
-                const glowTex = new THREE.CanvasTexture(canvas);
-                const glowMat = new THREE.SpriteMaterial({ map: glowTex, transparent: true, blending: THREE.AdditiveBlending });
-                const glow = new THREE.Sprite(glowMat);
-                glow.scale.set(1.5, 1.5, 1);
-                gizmoGroup.add(glow);
-
-                // The Volumetric Cone (Beam)
-                const beamGeo = new THREE.ConeGeometry(0.35, RADIUS, 32, 1, true);
-                beamGeo.translate(0, -RADIUS/2, 0);
-                beamGeo.rotateX(-Math.PI / 2);
-                const beamMat = new THREE.MeshBasicMaterial({ 
-                    color: 0xFFD700, transparent: true, opacity: 0.08, 
-                    side: THREE.DoubleSide, depthWrite: false, blending: THREE.AdditiveBlending 
-                });
-                const beam = new THREE.Mesh(beamGeo, beamMat);
-                beam.lookAt(new THREE.Vector3(0,0,0)); // Initialize pointing center
-                gizmoGroup.add(beam);
-
-                // Dome Visual Guide (Subtle)
-                const domeGeo = new THREE.IcosahedronGeometry(RADIUS, 1);
-                const domeWire = new THREE.WireframeGeometry(domeGeo);
-                const domeLine = new THREE.LineSegments(domeWire, new THREE.LineBasicMaterial({ color: 0x333333, transparent: true, opacity: 0.1 }));
-                scene.add(domeLine);
-
-                // --- 5. State & Logic ---
-                // We keep two sets of angles: Target (where mouse is) and Current (where light is, for animation)
-                let targetAz = props.value?.azimuth || 0;
-                let targetEl = props.value?.elevation || 0;
-                let currentAz = targetAz;
-                let currentEl = targetEl;
-                
-                const AZ_MAP = {
-                    0: 'Front', 45: 'Right Front', 90: 'Right', 135: 'Right Rear',
-                    180: 'Rear', 225: 'Left Rear', 270: 'Left', 315: 'Left Front'
-                };
                 
-                function getPrompt(a, e) {
-                    if (e >= 60) return "Light source from Above";
-                    if (e <= -60) return "Light source from Below";
-                    let n = a % 360; if(n < 0) n += 360;
-                    const steps = [0,45,90,135,180,225,270,315];
-                    const snapped = steps.reduce((p, c) => Math.abs(c-n) < Math.abs(p-n) ? c : p);
-                    return `Light source from the ${AZ_MAP[snapped]}`;
+                // Check for initial imageUrl
+                if (props.imageUrl) {
+                    updateTextureFromUrl(props.imageUrl);
                 }
-
-                // --- 6. Input & Raycasting ---
-                const raycaster = new THREE.Raycaster();
-                const mouse = new THREE.Vector2();
-                let isDragging = false;
                 
-                // Invisible interaction sphere
-                const dragMesh = new THREE.Mesh(
-                    new THREE.SphereGeometry(RADIUS, 32, 32),
-                    new THREE.MeshBasicMaterial({ visible: false, side: THREE.BackSide })
+                // Light model
+                const lightGroup = new THREE.Group();
+                const bulbMat = new THREE.MeshStandardMaterial({ color: 0xffff00, emissive: 0xffff00, emissiveIntensity: 1 });
+                const bulb = new THREE.Mesh(new THREE.SphereGeometry(0.15, 16, 16), bulbMat);
+                lightGroup.add(bulb);
+                const pointLight = new THREE.PointLight(0xffffff, 5, 0);
+                lightGroup.add(pointLight);
+                scene.add(lightGroup);
+                
+                // GREEN: Azimuth ring
+                const azimuthRing = new THREE.Mesh(
+                    new THREE.TorusGeometry(AZIMUTH_RADIUS, 0.04, 16, 64),
+                    new THREE.MeshStandardMaterial({ color: 0x00ff88, emissive: 0x00ff88, emissiveIntensity: 0.3 })
                 );
-                scene.add(dragMesh);
-
-                function updateFromIntersect(point) {
-                    const rel = new THREE.Vector3().subVectors(point, CENTER);
-                    let az = Math.atan2(rel.x, rel.z) * (180 / Math.PI);
-                    if (az < 0) az += 360;
-                    const distXZ = Math.sqrt(rel.x*rel.x + rel.z*rel.z);
-                    let el = Math.atan2(rel.y, distXZ) * (180 / Math.PI);
-                    el = Math.max(-89, Math.min(89, el)); // Clamp
-                    
-                    targetAz = az;
-                    targetEl = el;
+                azimuthRing.rotation.x = Math.PI / 2;
+                azimuthRing.position.y = 0.05;
+                scene.add(azimuthRing);
+                
+                const azimuthHandle = new THREE.Mesh(
+                    new THREE.SphereGeometry(0.18, 16, 16),
+                    new THREE.MeshStandardMaterial({ color: 0x00ff88, emissive: 0x00ff88, emissiveIntensity: 0.5 })
+                );
+                azimuthHandle.userData.type = 'azimuth';
+                scene.add(azimuthHandle);
+                
+                // PINK: Elevation arc
+                const arcPoints = [];
+                for (let i = 0; i <= 32; i++) {
+                    const angle = THREE.MathUtils.degToRad(-90 + (180 * i / 32));
+                    arcPoints.push(new THREE.Vector3(-0.8, ELEVATION_RADIUS * Math.sin(angle) + CENTER.y, ELEVATION_RADIUS * Math.cos(angle)));
                 }
-
-                function onDown(e) {
-                    const rect = wrapper.getBoundingClientRect();
-                    const cx = e.clientX || (e.touches ? e.touches[0].clientX : 0);
-                    const cy = e.clientY || (e.touches ? e.touches[0].clientY : 0);
-                    mouse.x = ((cx - rect.left) / rect.width) * 2 - 1;
-                    mouse.y = -((cy - rect.top) / rect.height) * 2 + 1;
+                const arcCurve = new THREE.CatmullRomCurve3(arcPoints);
+                const elevationArc = new THREE.Mesh(
+                    new THREE.TubeGeometry(arcCurve, 32, 0.04, 8, false),
+                    new THREE.MeshStandardMaterial({ color: 0xff69b4, emissive: 0xff69b4, emissiveIntensity: 0.3 })
+                );
+                scene.add(elevationArc);
+                
+                const elevationHandle = new THREE.Mesh(
+                    new THREE.SphereGeometry(0.18, 16, 16),
+                    new THREE.MeshStandardMaterial({ color: 0xff69b4, emissive: 0xff69b4, emissiveIntensity: 0.5 })
+                );
+                elevationHandle.userData.type = 'elevation';
+                scene.add(elevationHandle);
+                
+                function updatePositions() {
+                    const distance = BASE_DISTANCE;
+                    const azRad = THREE.MathUtils.degToRad(azimuthAngle);
+                    const elRad = THREE.MathUtils.degToRad(elevationAngle);
                     
-                    raycaster.setFromCamera(mouse, camera);
-                    const intersects = raycaster.intersectObject(dragMesh);
-                    if(intersects.length > 0) {
-                        isDragging = true;
-                        wrapper.style.cursor = 'none'; // Immersion
-                        updateFromIntersect(intersects[0].point);
-                    }
-                }
-
-                function onMove(e) {
-                    if (!isDragging) {
-                        // Hover cursor logic
-                        const rect = wrapper.getBoundingClientRect();
-                        mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
-                        mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
-                        raycaster.setFromCamera(mouse, camera);
-                        const hits = raycaster.intersectObject(dragMesh);
-                        wrapper.style.cursor = (hits.length > 0) ? 'grab' : 'default';
-                        return;
-                    }
+                    const lightX = distance * Math.sin(azRad) * Math.cos(elRad);
+                    const lightY = distance * Math.sin(elRad) + CENTER.y;
+                    const lightZ = distance * Math.cos(azRad) * Math.cos(elRad);
                     
-                    const rect = wrapper.getBoundingClientRect();
-                    const cx = e.clientX || (e.touches ? e.touches[0].clientX : 0);
-                    const cy = e.clientY || (e.touches ? e.touches[0].clientY : 0);
-                    mouse.x = ((cx - rect.left) / rect.width) * 2 - 1;
-                    mouse.y = -((cy - rect.top) / rect.height) * 2 + 1;
+                    lightGroup.position.set(lightX, lightY, lightZ);
                     
-                    raycaster.setFromCamera(mouse, camera);
-                    const intersects = raycaster.intersectObject(dragMesh);
-                    if (intersects.length > 0) {
-                        updateFromIntersect(intersects[0].point);
-                    }
-                }
-
-                function onUp() {
-                    if(isDragging) {
-                        isDragging = false;
-                        wrapper.style.cursor = 'default';
-                        props.value = { azimuth: targetAz, elevation: targetEl };
-                        trigger('change', props.value);
+                    azimuthHandle.position.set(AZIMUTH_RADIUS * Math.sin(azRad), 0.05, AZIMUTH_RADIUS * Math.cos(azRad));
+                    elevationHandle.position.set(-0.8, ELEVATION_RADIUS * Math.sin(elRad) + CENTER.y, ELEVATION_RADIUS * Math.cos(elRad));
+                    
+                    // Update prompt
+                    const azSnap = snapToNearest(azimuthAngle, azimuthSteps);
+                    const elSnap = snapToNearest(elevationAngle, elevationSteps);
+                    let prompt = 'Light source from';
+                    if (elSnap !== 0) {
+                        prompt += ' ' + elevationNames[String(elSnap)];
+                    } else {
+                        prompt += ' the ' + azimuthNames[azSnap];
                     }
+                    promptOverlay.textContent = prompt;
                 }
-
-                wrapper.addEventListener('mousedown', onDown);
-                window.addEventListener('mousemove', onMove);
-                window.addEventListener('mouseup', onUp);
-                wrapper.addEventListener('touchstart', onDown, {passive: false});
-                window.addEventListener('touchmove', onMove, {passive: false});
-                window.addEventListener('touchend', onUp);
-
-                // --- 7. Animation Loop (Visuals) ---
-                function animate() {
-                    requestAnimationFrame(animate);
+                
+                function updatePropsAndTrigger() {
+                    const azSnap = snapToNearest(azimuthAngle, azimuthSteps);
+                    const elSnap = snapToNearest(elevationAngle, elevationSteps);
                     
-                    // LERPING: Smoothly move current light pos to target
-                    // This creates the "swish" feeling
-                    const lerpSpeed = 0.15;
+                    props.value = { azimuth: azSnap, elevation: elSnap };
+                    trigger('change', props.value);
+                }
+                
+                // Raycasting
+                const raycaster = new THREE.Raycaster();
+                const mouse = new THREE.Vector2();
+                let isDragging = false;
+                let dragTarget = null;
+                let dragStartMouse = new THREE.Vector2();
+                const intersection = new THREE.Vector3();
+                
+                const canvas = renderer.domElement;
+                
+                canvas.addEventListener('mousedown', (e) => {
+                    const rect = canvas.getBoundingClientRect();
+                    mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
+                    mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
                     
-                    // Handle Azimuth wraparound (359 -> 0)
-                    let dAz = targetAz - currentAz;
-                    if (dAz > 180) dAz -= 360;
-                    if (dAz < -180) dAz += 360;
-                    currentAz += dAz * lerpSpeed;
+                    raycaster.setFromCamera(mouse, camera);
+                    const intersects = raycaster.intersectObjects([azimuthHandle, elevationHandle]);
                     
-                    currentEl += (targetEl - currentEl) * lerpSpeed;
-
-                    // Calculate Cartesian
-                    const r_az = THREE.MathUtils.degToRad(currentAz);
-                    const r_el = THREE.MathUtils.degToRad(currentEl);
-                    const x = RADIUS * Math.sin(r_az) * Math.cos(r_el);
-                    const y = RADIUS * Math.sin(r_el) + CENTER.y;
-                    const z = RADIUS * Math.cos(r_az) * Math.cos(r_el);
-
-                    // Update Light Position
-                    gizmoGroup.position.set(x, y, z);
-                    gizmoGroup.lookAt(CENTER);
+                    if (intersects.length > 0) {
+                        isDragging = true;
+                        dragTarget = intersects[0].object;
+                        dragTarget.material.emissiveIntensity = 1.0;
+                        dragTarget.scale.setScalar(1.3);
+                        dragStartMouse.copy(mouse);
+                        canvas.style.cursor = 'grabbing';
+                    }
+                });
+                
+                canvas.addEventListener('mousemove', (e) => {
+                    const rect = canvas.getBoundingClientRect();
+                    mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
+                    mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
                     
-                    dirLight.position.set(x, y, z); // Update actual shadow-casting light
+                    if (isDragging && dragTarget) {
+                        raycaster.setFromCamera(mouse, camera);
+                        
+                        if (dragTarget.userData.type === 'azimuth') {
+                            const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), -0.05);
+                            if (raycaster.ray.intersectPlane(plane, intersection)) {
+                                azimuthAngle = THREE.MathUtils.radToDeg(Math.atan2(intersection.x, intersection.z));
+                                if (azimuthAngle < 0) azimuthAngle += 360;
+                            }
+                        } else if (dragTarget.userData.type === 'elevation') {
+                            const plane = new THREE.Plane(new THREE.Vector3(1, 0, 0), -0.8);
+                            if (raycaster.ray.intersectPlane(plane, intersection)) {
+                                const relY = intersection.y - CENTER.y;
+                                const relZ = intersection.z;
+                                elevationAngle = THREE.MathUtils.clamp(THREE.MathUtils.radToDeg(Math.atan2(relY, relZ)), -90, 90);
+                            }
+                        }
+                        updatePositions();
+                    } else {
+                        raycaster.setFromCamera(mouse, camera);
+                        const intersects = raycaster.intersectObjects([azimuthHandle, elevationHandle]);
+                        [azimuthHandle, elevationHandle].forEach(h => {
+                            h.material.emissiveIntensity = 0.5;
+                            h.scale.setScalar(1);
+                        });
+                        if (intersects.length > 0) {
+                            intersects[0].object.material.emissiveIntensity = 0.8;
+                            intersects[0].object.scale.setScalar(1.1);
+                            canvas.style.cursor = 'grab';
+                        } else {
+                            canvas.style.cursor = 'default';
+                        }
+                    }
+                });
+                
+                const onMouseUp = () => {
+                    if (dragTarget) {
+                        dragTarget.material.emissiveIntensity = 0.5;
+                        dragTarget.scale.setScalar(1);
+                        
+                        // Snap and animate
+                        const targetAz = snapToNearest(azimuthAngle, azimuthSteps);
+                        const targetEl = snapToNearest(elevationAngle, elevationSteps);
+                        
+                        const startAz = azimuthAngle, startEl = elevationAngle;
+                        const startTime = Date.now();
+                        
+                        function animateSnap() {
+                            const t = Math.min((Date.now() - startTime) / 200, 1);
+                            const ease = 1 - Math.pow(1 - t, 3);
+                            
+                            let azDiff = targetAz - startAz;
+                            if (azDiff > 180) azDiff -= 360;
+                            if (azDiff < -180) azDiff += 360;
+                            azimuthAngle = startAz + azDiff * ease;
+                            if (azimuthAngle < 0) azimuthAngle += 360;
+                            if (azimuthAngle >= 360) azimuthAngle -= 360;
+                            
+                            elevationAngle = startEl + (targetEl - startEl) * ease;
+                            
+                            updatePositions();
+                            if (t < 1) requestAnimationFrame(animateSnap);
+                            else updatePropsAndTrigger();
+                        }
+                        animateSnap();
+                    }
+                    isDragging = false;
+                    dragTarget = null;
+                    canvas.style.cursor = 'default';
+                };
+                
+                canvas.addEventListener('mouseup', onMouseUp);
+                canvas.addEventListener('mouseleave', onMouseUp);
+                // Touch support for mobile
+                canvas.addEventListener('touchstart', (e) => {
+                    e.preventDefault();
+                    const touch = e.touches[0];
+                    const rect = canvas.getBoundingClientRect();
+                    mouse.x = ((touch.clientX - rect.left) / rect.width) * 2 - 1;
+                    mouse.y = -((touch.clientY - rect.top) / rect.height) * 2 + 1;
                     
-                    // Update Text
-                    badge.textContent = getPrompt(currentAz, currentEl);
+                    raycaster.setFromCamera(mouse, camera);
+                    const intersects = raycaster.intersectObjects([azimuthHandle, elevationHandle]);
                     
-                    // Dynamic Coloring
-                    let colorHex = 0xFFD700; // Gold
-                    if (currentEl > 55 || currentEl < -55) colorHex = 0xFF4500; // Warning Orange
+                    if (intersects.length > 0) {
+                        isDragging = true;
+                        dragTarget = intersects[0].object;
+                        dragTarget.material.emissiveIntensity = 1.0;
+                        dragTarget.scale.setScalar(1.3);
+                        dragStartMouse.copy(mouse);
+                    }
+                }, { passive: false });
+                
+                canvas.addEventListener('touchmove', (e) => {
+                    e.preventDefault();
+                    const touch = e.touches[0];
+                    const rect = canvas.getBoundingClientRect();
+                    mouse.x = ((touch.clientX - rect.left) / rect.width) * 2 - 1;
+                    mouse.y = -((touch.clientY - rect.top) / rect.height) * 2 + 1;
                     
-                    const col = new THREE.Color(colorHex);
-                    sunMat.color.lerp(col, 0.1);
-                    beamMat.color.lerp(col, 0.1);
-                    glowMat.color.lerp(col, 0.1);
-                    badge.style.borderColor = '#' + col.getHexString();
-                    badge.style.color = '#' + col.getHexString();
-
+                    if (isDragging && dragTarget) {
+                        raycaster.setFromCamera(mouse, camera);
+                        
+                        if (dragTarget.userData.type === 'azimuth') {
+                            const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), -0.05);
+                            if (raycaster.ray.intersectPlane(plane, intersection)) {
+                                azimuthAngle = THREE.MathUtils.radToDeg(Math.atan2(intersection.x, intersection.z));
+                                if (azimuthAngle < 0) azimuthAngle += 360;
+                            }
+                        } else if (dragTarget.userData.type === 'elevation') {
+                            const plane = new THREE.Plane(new THREE.Vector3(1, 0, 0), -0.8);
+                            if (raycaster.ray.intersectPlane(plane, intersection)) {
+                                const relY = intersection.y - CENTER.y;
+                                const relZ = intersection.z;
+                                elevationAngle = THREE.MathUtils.clamp(THREE.MathUtils.radToDeg(Math.atan2(relY, relZ)), -90, 90);
+                            }
+                        }
+                        updatePositions();
+                    }
+                }, { passive: false });
+                
+                canvas.addEventListener('touchend', (e) => {
+                    e.preventDefault();
+                    onMouseUp();
+                }, { passive: false });
+                
+                canvas.addEventListener('touchcancel', (e) => {
+                    e.preventDefault();
+                    onMouseUp();
+                }, { passive: false });
+                
+                // Initial update
+                updatePositions();
+                
+                // Render loop
+                function render() {
+                    requestAnimationFrame(render);
                     renderer.render(scene, camera);
                 }
-                animate();
-
-                // External Updates
+                render();
+                
+                // Handle resize
+                new ResizeObserver(() => {
+                    camera.aspect = wrapper.clientWidth / wrapper.clientHeight;
+                    camera.updateProjectionMatrix();
+                    renderer.setSize(wrapper.clientWidth, wrapper.clientHeight);
+                }).observe(wrapper);
+                
+                // Store update functions for external calls
+                wrapper._updateFromProps = (newVal) => {
+                    if (newVal && typeof newVal === 'object') {
+                        azimuthAngle = newVal.azimuth ?? azimuthAngle;
+                        elevationAngle = newVal.elevation ?? elevationAngle;
+                        updatePositions();
+                    }
+                };
+                
+                wrapper._updateTexture = updateTextureFromUrl;
+                
+                // Watch for prop changes (imageUrl and value)
+                let lastImageUrl = props.imageUrl;
+                let lastValue = JSON.stringify(props.value);
                 setInterval(() => {
-                    if (props.value && !isDragging) {
-                        // If controls updated externally (sliders), snap target
-                        if (Math.abs(props.value.azimuth - targetAz) > 0.5 || Math.abs(props.value.elevation - targetEl) > 0.5) {
-                            targetAz = props.value.azimuth;
-                            targetEl = props.value.elevation;
+                    // Check imageUrl changes
+                    if (props.imageUrl !== lastImageUrl) {
+                        lastImageUrl = props.imageUrl;
+                        updateTextureFromUrl(props.imageUrl);
+                    }
+                    // Check value changes (from sliders)
+                    const currentValue = JSON.stringify(props.value);
+                    if (currentValue !== lastValue) {
+                        lastValue = currentValue;
+                        if (props.value && typeof props.value === 'object') {
+                            azimuthAngle = props.value.azimuth ?? azimuthAngle;
+                            elevationAngle = props.value.elevation ?? elevationAngle;
+                            updatePositions();
                         }
                     }
                 }, 100);
-                
-                wrapper._updateTexture = updateTexture;
             };
+            
             initScene();
         })();
         """
@@ -451,88 +606,154 @@ class LightControl3D(gr.HTML):
             **kwargs
         )
 
-# --- UI Layout ---
-css = """
-#col-container { max-width: 1400px; margin: 0 auto; }
-#3d-container { border-radius: 12px; overflow: hidden; }
-.range-slider { accent-color: #FFD700 !important; }
-"""
-
-with gr.Blocks(css=css, theme=gr.themes.Soft(primary_hue="yellow")) as demo:
+# --- UI ---
+css = '''
+#col-container { max-width: 1200px; margin: 0 auto; }
+.dark .progress-text { color: white !important; }
+#lighting-3d-control { min-height: 450px; }
+.slider-row { display: flex; gap: 10px; align-items: center; }
+'''
+with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
     gr.Markdown("""
-    # 💡 Qwen Edit 2509 — Studio Light Controller
-    **Interactive Relighting:** Drag the light in the 3D studio to cast realistic shadows and generate lighting prompts.
+    # 🎬 Qwen Image Edit 2511 — 3D Lighting Control
+    
+    Control lighting directions using the **3D viewport** or **sliders**.
+    Using [dx8152/Qwen-Edit-2509-Multi-Angle-Lighting] for precise lighting control.
     """)
     
     with gr.Row():
-        # --- Left Column: Controls ---
-        with gr.Column(scale=5):
-            gr.Markdown("### 📸 Input & Control")
-            with gr.Row():
-                image_input = gr.Image(label="Input", type="pil", height=280)
-                result_output = gr.Image(label="Result", height=280)
+        # Left column: Input image and controls
+        with gr.Column(scale=1):
+            image = gr.Image(label="Input Image", type="pil", height=300)
             
-            gr.Markdown("### 🎮 Studio Controller")
-            light_controller = LightControl3D(
+            gr.Markdown("### 🎮 3D Lighting Control")
+            gr.Markdown("*Drag the colored handles: 🟢 Azimuth (Direction), 🩷 Elevation (Height)*")
+            
+            lighting_3d = LightingControl3D(
                 value={"azimuth": 0, "elevation": 0},
-                elem_id="3d-container"
+                elem_id="lighting-3d-control"
             )
+            run_btn = gr.Button("🚀 Generate", variant="primary", size="lg")
             
-            run_btn = gr.Button("✨ Relight Image", variant="primary", size="lg")
+            gr.Markdown("### 🎚️ Slider Controls")
             
-            with gr.Accordion("🎚️ Fine-Tune Parameters", open=False):
-                with gr.Row():
-                    az_slider = gr.Slider(0, 359, value=0, label="Azimuth", step=1)
-                    el_slider = gr.Slider(-90, 90, value=0, label="Elevation", step=1)
-                with gr.Row():
-                    seed = gr.Slider(0, MAX_SEED, value=42, label="Seed", step=1)
-                    randomize_seed = gr.Checkbox(True, label="Randomize")
-                with gr.Row():
-                    cfg = gr.Slider(1.0, 10.0, value=5.0, label="Guidance (CFG)")
-                    steps = gr.Slider(1, 20, value=4, step=1, label="Steps")
-                prompt_display = gr.Textbox(label="Active Prompt", interactive=False)
-
-    # --- Event Wiring ---
+            azimuth_slider = gr.Slider(
+                label="Azimuth (Horizontal Rotation)",
+                minimum=0,
+                maximum=315,
+                step=45,
+                value=0,
+                info="0°=front, 90°=right, 180°=rear, 270°=left"
+            )
+            
+            elevation_slider = gr.Slider(
+                label="Elevation (Vertical Angle)",
+                minimum=-90,
+                maximum=90,
+                step=90,
+                value=0,
+                info="-90°=from below, 0°=horizontal, 90°=from above"
+            )
+            
+            prompt_preview = gr.Textbox(
+                label="Generated Prompt",
+                value="Light source from the Front",
+                interactive=False
+            )
+        
+        # Right column: Output
+        with gr.Column(scale=1):
+            result = gr.Image(label="Output Image", height=500)
+            
+            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)
     
-    # 3D -> Sliders
-    def on_3d_change(val):
-        az, el = val.get('azimuth', 0), val.get('elevation', 0)
-        return az, el, build_lighting_prompt(az, el)
-
-    light_controller.change(on_3d_change, inputs=[light_controller], outputs=[az_slider, el_slider, prompt_display])
+    # --- Event Handlers ---
     
-    # Sliders -> 3D
-    def on_slider_change(az, el):
-        return {"azimuth": az, "elevation": el}, build_lighting_prompt(az, el)
-        
-    az_slider.change(on_slider_change, inputs=[az_slider, el_slider], outputs=[light_controller, prompt_display])
-    el_slider.change(on_slider_change, inputs=[az_slider, el_slider], outputs=[light_controller, prompt_display])
-
-    # Upload
-    def on_upload(img):
-        w, h = update_dimensions_on_upload(img)
-        if img is None: return w, h, gr.update(imageUrl=None)
+    def update_prompt_from_sliders(azimuth, elevation):
+        """Update prompt preview when sliders change."""
+        prompt = build_lighting_prompt(azimuth, elevation)
+        return prompt
+    
+    def sync_3d_to_sliders(lighting_value):
+        """Sync 3D control changes to sliders."""
+        if lighting_value and isinstance(lighting_value, dict):
+            az = lighting_value.get('azimuth', 0)
+            el = lighting_value.get('elevation', 0)
+            prompt = build_lighting_prompt(az, el)
+            return az, el, prompt
+        return gr.update(), gr.update(), gr.update()
+    
+    def sync_sliders_to_3d(azimuth, elevation):
+        """Sync slider changes to 3D control."""
+        return {"azimuth": azimuth, "elevation": elevation}
+    
+    def update_3d_image(image):
+        """Update the 3D component with the uploaded image."""
+        if image is None:
+            return gr.update(imageUrl=None)
+        # Convert PIL image to base64 data URL
         import base64
         from io import BytesIO
         buffered = BytesIO()
-        img.save(buffered, format="PNG")
+        image.save(buffered, format="PNG")
         img_str = base64.b64encode(buffered.getvalue()).decode()
-        return w, h, gr.update(imageUrl=f"data:image/png;base64,{img_str}")
-
-    image_input.upload(on_upload, inputs=[image_input], outputs=[gr.State(), gr.State(), light_controller])
-
-    # Run
-    def run_inference_wrapper(img, az, el, seed, rand, cfg, steps):
-        w, h = update_dimensions_on_upload(img)
-        res, _, _ = infer_lighting_edit(img, az, el, seed, rand, cfg, steps, h, w)
-        return res
-
+        data_url = f"data:image/png;base64,{img_str}"
+        return gr.update(imageUrl=data_url)
+    
+    # Slider -> Prompt preview
+    for slider in [azimuth_slider, elevation_slider]:
+        slider.change(
+            fn=update_prompt_from_sliders,
+            inputs=[azimuth_slider, elevation_slider],
+            outputs=[prompt_preview]
+        )
+    
+    # 3D control -> Sliders + Prompt
+    lighting_3d.change(
+        fn=sync_3d_to_sliders,
+        inputs=[lighting_3d],
+        outputs=[azimuth_slider, elevation_slider, prompt_preview]
+    )
+    
+    # Sliders -> 3D control
+    for slider in [azimuth_slider, elevation_slider]:
+        slider.release(
+            fn=sync_sliders_to_3d,
+            inputs=[azimuth_slider, elevation_slider],
+            outputs=[lighting_3d]
+        )
+    
+    # Generate button
     run_btn.click(
-        run_inference_wrapper,
-        inputs=[image_input, az_slider, el_slider, seed, randomize_seed, cfg, steps],
-        outputs=[result_output]
+        fn=infer_lighting_edit,
+        inputs=[image, azimuth_slider, elevation_slider, seed, randomize_seed, guidance_scale, num_inference_steps, height, width],
+        outputs=[result, seed, prompt_preview]
     )
-
+    
+    # Image upload -> update dimensions AND update 3D preview
+    image.upload(
+        fn=update_dimensions_on_upload,
+        inputs=[image],
+        outputs=[width, height]
+    ).then(
+        fn=update_3d_image,
+        inputs=[image],
+        outputs=[lighting_3d]
+    )
+    
+    # Also handle image clear
+    image.clear(
+        fn=lambda: gr.update(imageUrl=None),
+        outputs=[lighting_3d]
+    )
+    
 if __name__ == "__main__":
-    head_js = '<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>'
-    demo.launch(head=head_js)
+    head = '<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>'
+    css = '.fillable{max-width: 1200px !important}'
+    demo.launch(head=head, css=css)