Update app.py

app.py

@@ -9,14 +9,16 @@ from io import BytesIO
 from PIL import Image
 
 # NOTE: Ensure QwenImageEditPlusPipeline is available in your environment.
+# If using a local file, uncomment the local import. If using a custom Diffusers build, keep as is.
 try:
     from diffusers import FlowMatchEulerDiscreteScheduler, QwenImageEditPlusPipeline
 except ImportError:
-    # Fallback for UI testing if diffusers/custom pipeline not installed
+    # Fallback/Placeholder if specific pipeline isn't installed, purely to allow UI testing
     print("Warning: QwenImageEditPlusPipeline not found. UI will load, but generation will fail.")
     class QwenImageEditPlusPipeline:
         @classmethod
-        def from_pretrained(cls, *args, **kwargs): return cls()
+        def from_pretrained(cls, *args, **kwargs):
+            return cls()
         def to(self, device): return self
         def load_lora_weights(self, *args, **kwargs): pass
         def set_adapters(self, *args, **kwargs): pass
@@ -43,10 +45,10 @@ try:
         adapter_name="lightning"
     )
 
-    # Load the NEW Multi-Angle-Lighting LoRA
-    # We allow the library to find the default safetensors file in the repo
+    # Load the Lighting LoRA
     pipe.load_lora_weights(
         "dx8152/Qwen-Edit-2509-Multi-Angle-Lighting",
+        weight_name="qwen-edit-2509-multi-angle-lighting.safetensors",
         adapter_name="lighting"
     )
 
@@ -55,28 +57,10 @@ except Exception as e:
     print(f"Model loading failed (ignorable if just testing UI): {e}")
     pipe = None
 
-# --- Prompt Mappings ---
+# --- Prompt Building ---
 
-# Camera Azimuth
+# Horizontal mappings (Azimuth)
 AZIMUTH_MAP = {
-    0: "front view", 45: "front-right quarter view", 90: "right side view",
-    135: "back-right quarter view", 180: "back view", 225: "back-left quarter view",
-    270: "left side view", 315: "front-left quarter view"
-}
-
-# Camera Elevation
-ELEVATION_MAP = {
-    -30: "low-angle shot", 0: "eye-level shot",
-    30: "elevated shot", 60: "high-angle shot"
-}
-
-# Camera Distance
-DISTANCE_MAP = {
-    0.6: "close-up", 1.0: "medium shot", 1.4: "wide shot", 1.8: "wide shot"
-}
-
-# Lighting Direction (Mapped by angle 0-360, plus special flags for Above/Below)
-LIGHTING_ANGLE_MAP = {
     0: "Light source from the Front",
     45: "Light source from the Right Front",
     90: "Light source from the Right",
@@ -90,38 +74,41 @@ LIGHTING_ANGLE_MAP = {
 def snap_to_nearest(value, options):
     return min(options, key=lambda x: abs(x - value))
 
-def build_full_prompt(cam_az, cam_el, cam_dist, light_az, light_mode):
-    # Camera
-    c_az = snap_to_nearest(cam_az, list(AZIMUTH_MAP.keys()))
-    c_el = snap_to_nearest(cam_el, list(ELEVATION_MAP.keys()))
-    c_dist = snap_to_nearest(cam_dist, list(DISTANCE_MAP.keys()))
-    cam_str = f"{AZIMUTH_MAP[c_az]} {ELEVATION_MAP[c_el]} {DISTANCE_MAP[c_dist]}"
+def build_lighting_prompt(azimuth: float, elevation: float) -> str:
+    """
+    Constructs the prompt based on Azimuth (horizontal) and Elevation (vertical).
+    Priority: If elevation is extreme (Above/Below), that takes precedence.
+    Otherwise, use horizontal direction.
+    """
+    # Vertical Thresholds
+    if elevation >= 45:
+        return "<sks> Light source from Above"
+    if elevation <= -45:
+        return "<sks> Light source from Below"
+
+    # Horizontal Logic
+    # Normalize azimuth to 0-360
+    azimuth = azimuth % 360
+    az_snap = snap_to_nearest(azimuth, list(AZIMUTH_MAP.keys()))
     
-    # Lighting
-    if light_mode == "Above":
-        light_str = "Light source from Above"
-    elif light_mode == "Below":
-        light_str = "Light source from Below"
-    else:
-        # Ring mode
-        l_az = snap_to_nearest(light_az, list(LIGHTING_ANGLE_MAP.keys()))
-        light_str = LIGHTING_ANGLE_MAP[l_az]
-        
-    return f"<sks> {cam_str} {light_str}"
+    return f"<sks> {AZIMUTH_MAP[az_snap]}"
 
 @spaces.GPU
-def infer_edit(
+def infer_lighting_edit(
     image: Image.Image,
-    cam_az: float, cam_el: float, cam_dist: float,
-    light_az: float, light_mode: str, # "Ring", "Above", "Below"
-    seed: int, randomize_seed: bool,
-    guidance_scale: float, num_inference_steps: int,
-    height: int, width: int,
+    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,
 ):
     if pipe is None:
         raise gr.Error("Model not initialized.")
         
-    prompt = build_full_prompt(cam_az, cam_el, cam_dist, light_az, light_mode)
+    prompt = build_lighting_prompt(azimuth, elevation)
     print(f"Generated Prompt: {prompt}")
 
     if randomize_seed:
@@ -149,6 +136,7 @@ def infer_edit(
 def update_dimensions_on_upload(image):
     if image is None: return 1024, 1024
     w, h = image.size
+    # Resize logic to keep aspect ratio but snap to multiples of 8 within reasonable bounds
     if w > h:
         new_w, new_h = 1024, int(1024 * (h / w))
     else:
@@ -162,402 +150,403 @@ def get_image_base64(image):
     img_str = base64.b64encode(buffered.getvalue()).decode()
     return f"data:image/png;base64,{img_str}"
 
-# --- 3D HTML Logic with Lighting Control ---
+# --- 3D Lighting Control HTML Logic ---
 THREE_JS_LOGIC = """
-<div id="camera-control-wrapper" style="width: 100%; height: 500px; position: relative; background: #151515; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 20px #000;">
-    <div id="status-overlay" style="position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.6); padding: 8px; border-radius: 4px; font-family: monospace; font-size: 11px; color: #aaa; pointer-events: none;">
-        <div>📸 Camera: <span id="cam-status" style="color:white">Front</span></div>
-        <div>💡 Light: <span id="light-status" style="color:#ffcc00">Front</span></div>
-    </div>
-    <div style="position: absolute; bottom: 10px; right: 10px; color: #555; font-size: 10px; font-family: sans-serif;">
-        Drag Yellow Sphere for Light • Drag Blue/Pink for Camera
-    </div>
+<div id="light-control-wrapper" style="width: 100%; height: 450px; position: relative; background: #111; 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: 14px; color: #ffcc00; white-space: nowrap; z-index: 10; border: 1px solid #ffcc00;">Initializing...</div>
+    <div style="position: absolute; top: 10px; left: 10px; color: #666; font-family: sans-serif; font-size: 11px;">Drag the Yellow Orb to move light</div>
 </div>
 <script>
 (function() {
-    const wrapper = document.getElementById('camera-control-wrapper');
-    const camStatus = document.getElementById('cam-status');
-    const lightStatus = document.getElementById('light-status');
+    const wrapper = document.getElementById('light-control-wrapper');
+    const promptOverlay = document.getElementById('prompt-overlay');
     
-    window.sceneState = {
-        camAz: 0, camEl: 0, camDist: 1.0,
-        lightAz: 0, lightMode: 'Ring' // 'Ring', 'Above', 'Below'
+    // Global Access for Python Bridge
+    window.light3D = {
+        updateState: null,
+        updateTexture: null
     };
 
-    // Helper: Snap
-    function snap(val, steps) {
-        return steps.reduce((prev, curr) => Math.abs(curr - val) < Math.abs(prev - val) ? curr : prev);
-    }
-    
-    // Mappings for Display
-    const camAzMap = {0:'Front',45:'Front-Right',90:'Right',135:'Back-Right',180:'Back',225:'Back-Left',270:'Left',315:'Front-Left'};
-    const lightAzMap = {0:'Front',45:'Right Front',90:'Right',135:'Right Rear',180:'Rear',225:'Left Rear',270:'Left',315:'Left Front'};
-
     const initScene = () => {
-        if (typeof THREE === 'undefined') { setTimeout(initScene, 100); return; }
+        if (typeof THREE === 'undefined') {
+            setTimeout(initScene, 100);
+            return;
+        }
 
+        // --- Setup ---
         const scene = new THREE.Scene();
-        scene.background = new THREE.Color(0x151515);
-        scene.fog = new THREE.Fog(0x151515, 5, 15);
+        scene.background = new THREE.Color(0x111111);
         
-        const camera = new THREE.PerspectiveCamera(50, wrapper.clientWidth / wrapper.clientHeight, 0.1, 1000);
-        camera.position.set(5, 4, 5);
-        camera.lookAt(0, 0.5, 0);
+        // Static Camera looking at the scene
+        const camera = new THREE.PerspectiveCamera(45, wrapper.clientWidth / wrapper.clientHeight, 0.1, 1000);
+        camera.position.set(0, 1.5, 5); // Slightly elevated front view
+        camera.lookAt(0, 0, 0);
         
-        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+        const renderer = new THREE.WebGLRenderer({ antialias: true });
         renderer.setSize(wrapper.clientWidth, wrapper.clientHeight);
         renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+        renderer.shadowMap.enabled = true; // Enable shadows for visual feedback
+        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
         wrapper.appendChild(renderer.domElement);
         
-        // Lights for the 3D scene itself
-        scene.add(new THREE.AmbientLight(0xffffff, 0.3));
-        const dl = new THREE.DirectionalLight(0xffffff, 0.8);
-        dl.position.set(2, 5, 2);
-        scene.add(dl);
+        // --- Helpers ---
         scene.add(new THREE.GridHelper(8, 16, 0x333333, 0x222222));
 
-        const CENTER = new THREE.Vector3(0, 0.75, 0);
+        // --- Objects ---
+        const CENTER = new THREE.Vector3(0, 0, 0);
+        const ORBIT_RADIUS = 2.5;
+
+        // 1. The Subject (Central Image Plane + Sphere for shading ref)
+        const group = new THREE.Group();
+        scene.add(group);
 
-        // --- 1. Target Plane (The Image) ---
+        // Placeholder Texture
         function createPlaceholderTexture() {
             const canvas = document.createElement('canvas');
             canvas.width = 256; canvas.height = 256;
             const ctx = canvas.getContext('2d');
-            ctx.fillStyle = '#222'; ctx.fillRect(0,0,256,256);
-            ctx.strokeStyle = '#444'; ctx.lineWidth = 5; ctx.strokeRect(0,0,256,256);
-            ctx.fillStyle = '#666'; ctx.font = "20px monospace"; ctx.fillText("IMAGE", 90, 130);
+            ctx.fillStyle = '#222'; ctx.fillRect(0, 0, 256, 256);
+            ctx.fillStyle = '#444'; 
+            ctx.font = '30px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+            ctx.fillText("Upload Image", 128, 128);
             return new THREE.CanvasTexture(canvas);
         }
-        let planeMat = new THREE.MeshBasicMaterial({ map: createPlaceholderTexture(), side: THREE.DoubleSide });
-        let targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(1.2, 1.2), planeMat);
-        targetPlane.position.copy(CENTER);
-        scene.add(targetPlane);
-
-        // --- 2. Camera Rig ---
-        const camGroup = new THREE.Group();
-        // Camera Body
-        const camBody = new THREE.Mesh(new THREE.BoxGeometry(0.3, 0.2, 0.4), new THREE.MeshStandardMaterial({ color: 0x4488ff, roughness: 0.4 }));
-        camBody.add(new THREE.Mesh(new THREE.CylinderGeometry(0.1, 0.12, 0.2, 16).rotateX(Math.PI/2).translate(0,0,0.3), new THREE.MeshStandardMaterial({color:0x222})));
-        camGroup.add(camBody);
-        scene.add(camGroup);
-
-        // Camera Handles
-        const createHandle = (color, type) => {
-            const g = new THREE.SphereGeometry(0.15, 16, 16);
-            const m = new THREE.MeshStandardMaterial({ color: color, emissive: color, emissiveIntensity: 0.4 });
-            const mesh = new THREE.Mesh(g, m);
-            mesh.userData.type = type;
-            return mesh;
-        };
-        const hCamAz = createHandle(0x00ff88, 'camAz');
-        const hCamEl = createHandle(0xff0088, 'camEl');
-        const hCamDist = createHandle(0xffaa00, 'camDist');
-        scene.add(hCamAz); scene.add(hCamEl); scene.add(hCamDist);
+
+        let planeMaterial = new THREE.MeshStandardMaterial({ 
+            map: createPlaceholderTexture(), 
+            side: THREE.DoubleSide,
+            roughness: 0.8,
+            metalness: 0.1
+        });
         
-        // Camera Guidelines
-        const azRing = new THREE.Mesh(new THREE.TorusGeometry(2.4, 0.02, 16, 64), new THREE.MeshBasicMaterial({ color: 0x00ff88, opacity: 0.2, transparent: true }));
-        azRing.rotation.x = Math.PI/2; azRing.position.y = 0.05;
-        scene.add(azRing);
-        const distLine = new THREE.Line(new THREE.BufferGeometry(), new THREE.LineBasicMaterial({ color: 0xffaa00, opacity: 0.5, transparent: true }));
-        scene.add(distLine);
-
-        // --- 3. Light Rig ---
-        const LIGHT_RADIUS = 3.2; // Further out than camera azimuth
+        let targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(1.5, 1.5), planeMaterial);
+        targetPlane.castShadow = true;
+        targetPlane.receiveShadow = true;
+        group.add(targetPlane);
+
+        // Reference Sphere (Hidden behind plane usually, or useful for seeing pure shading)
+        const refSphere = new THREE.Mesh(
+            new THREE.SphereGeometry(0.5, 32, 32),
+            new THREE.MeshStandardMaterial({ color: 0xffffff, roughness: 1.0 })
+        );
+        refSphere.position.z = -0.5;
+        refSphere.castShadow = true;
+        group.add(refSphere);
+
+        // 2. The Light Source (The "Sun")
         const lightGroup = new THREE.Group();
-        
-        // The "Sun" Sphere
-        const sunGeo = new THREE.SphereGeometry(0.25, 16, 16);
-        const sunMat = new THREE.MeshStandardMaterial({ color: 0xffcc00, emissive: 0xffaa00, emissiveIntensity: 1 });
-        const sunMesh = new THREE.Mesh(sunGeo, sunMat);
-        sunMesh.userData.type = 'light';
-        
-        // Light Rays (Visual decoration)
-        const rays = new THREE.Group();
-        for(let i=0; i<8; i++) {
-            const ray = new THREE.Mesh(new THREE.CylinderGeometry(0.02, 0.02, 0.8), new THREE.MeshBasicMaterial({color: 0xffcc00}));
-            ray.rotation.z = (i/8) * Math.PI * 2;
-            rays.add(ray);
-        }
-        sunMesh.add(rays);
-        scene.add(sunMesh);
+        scene.add(lightGroup);
+
+        // Actual Light
+        const dirLight = new THREE.DirectionalLight(0xffffff, 2.0);
+        dirLight.castShadow = true;
+        dirLight.shadow.mapSize.width = 1024;
+        dirLight.shadow.mapSize.height = 1024;
+        lightGroup.add(dirLight);
+
+        // Visual Representation (Yellow Orb)
+        const lightMesh = new THREE.Mesh(
+            new THREE.SphereGeometry(0.2, 16, 16),
+            new THREE.MeshBasicMaterial({ color: 0xffcc00 })
+        );
+        // Add glow
+        const glow = new THREE.Mesh(
+            new THREE.SphereGeometry(0.3, 16, 16),
+            new THREE.MeshBasicMaterial({ color: 0xffcc00, transparent: true, opacity: 0.3 })
+        );
+        lightMesh.add(glow);
+        lightMesh.userData.type = 'lightSource';
+        lightGroup.add(lightMesh);
+
+        // Ambient light to fill shadows slightly
+        scene.add(new THREE.AmbientLight(0xffffff, 0.2));
+
+        // --- State ---
+        let azimuthAngle = 0;   // 0 = Front, 90 = Right, 180 = Back
+        let elevationAngle = 0; // 90 = Top, -90 = Bottom
+
+        // --- Prompt Mapping Logic (JS Side for preview) ---
+        const azMap = {
+            0: "Front", 45: "Right Front", 90: "Right", 135: "Right Rear",
+            180: "Rear", 225: "Left Rear", 270: "Left", 315: "Left Front"
+        };
+        const azSteps = [0, 45, 90, 135, 180, 225, 270, 315];
 
-        // Light Guide Ring (Yellow)
-        const lightRing = new THREE.Mesh(new THREE.TorusGeometry(LIGHT_RADIUS, 0.03, 16, 64), new THREE.MeshBasicMaterial({ color: 0xffcc00, opacity: 0.3, transparent: true }));
-        lightRing.rotation.x = Math.PI/2; lightRing.position.y = CENTER.y;
-        scene.add(lightRing);
-        
-        // Vertical Guides for Above/Below
-        const vertLine = new THREE.Mesh(new THREE.CylinderGeometry(0.01, 0.01, 6), new THREE.MeshBasicMaterial({ color: 0xffcc00, opacity: 0.1, transparent: true }));
-        vertLine.position.copy(CENTER);
-        scene.add(vertLine);
+        function snapToNearest(value, steps) {
+            let norm = value % 360;
+            if (norm < 0) norm += 360;
+            return steps.reduce((prev, curr) => Math.abs(curr - norm) < Math.abs(prev - norm) ? curr : prev);
+        }
 
-        // --- Update Logic ---
         function updatePositions() {
-            const s = window.sceneState;
-
-            // 1. Camera Math
-            const cRadAz = THREE.MathUtils.degToRad(s.camAz);
-            const cRadEl = THREE.MathUtils.degToRad(s.camEl);
-            const dist = 1.6 * s.camDist;
-            
-            const cx = dist * Math.sin(cRadAz) * Math.cos(cRadEl);
-            const cy = dist * Math.sin(cRadEl) + CENTER.y;
-            const cz = dist * Math.cos(cRadAz) * Math.cos(cRadEl);
+            // Convert Azimuth/Elevation to spherical coordinates
+            // In ThreeJS: Y is Up. 0 Azimuth should be +Z (Front)
+            // But usually Front is +Z. Let's calculate standard spherical.
             
-            camGroup.position.set(cx, cy, cz);
-            camGroup.lookAt(CENTER);
+            const rAz = THREE.MathUtils.degToRad(azimuthAngle); 
+            const rEl = THREE.MathUtils.degToRad(elevationAngle);
+
+            // Calculate position on sphere
+            // x = r * sin(az) * cos(el)
+            // y = r * sin(el)
+            // z = r * cos(az) * cos(el)
             
-            // Camera Handle Pos
-            hCamAz.position.set(2.4 * Math.sin(cRadAz), 0.05, 2.4 * Math.cos(cRadAz));
-            hCamEl.position.set(-0.8, 1.8 * Math.sin(cRadEl) + CENTER.y, 1.8 * Math.cos(cRadEl));
-            const dH = dist - 0.4;
-            hCamDist.position.set(dH * Math.sin(cRadAz) * Math.cos(cRadEl), dH * Math.sin(cRadEl) + CENTER.y, dH * Math.cos(cRadAz) * Math.cos(cRadEl));
-            distLine.geometry.setFromPoints([camGroup.position, CENTER]);
-
-            // 2. Light Math
-            if (s.lightMode === 'Above') {
-                sunMesh.position.set(0, CENTER.y + 3, 0);
-                lightRing.visible = false;
-            } else if (s.lightMode === 'Below') {
-                sunMesh.position.set(0, CENTER.y - 2.5, 0);
-                lightRing.visible = false;
-            } else {
-                lightRing.visible = true;
-                const lRad = THREE.MathUtils.degToRad(s.lightAz);
-                sunMesh.position.set(
-                    LIGHT_RADIUS * Math.sin(lRad), 
-                    CENTER.y, 
-                    LIGHT_RADIUS * Math.cos(lRad)
-                );
+            const x = ORBIT_RADIUS * Math.sin(rAz) * Math.cos(rEl);
+            const y = ORBIT_RADIUS * Math.sin(rEl);
+            const z = ORBIT_RADIUS * Math.cos(rAz) * Math.cos(rEl);
+
+            lightGroup.position.set(x, y, z);
+            lightGroup.lookAt(CENTER); // Light points to center
+
+            // Update UI Text
+            let text = "";
+            if (elevationAngle >= 45) text = "Light source from Above";
+            else if (elevationAngle <= -45) text = "Light source from Below";
+            else {
+                const snap = snapToNearest(azimuthAngle, azSteps);
+                text = "Light source from the " + azMap[snap];
             }
-            sunMesh.lookAt(CENTER);
-
-            // 3. Status Text
-            const cAzSnap = snap(s.camAz, [0,45,90,135,180,225,270,315]);
-            const lAzSnap = snap(s.lightAz, [0,45,90,135,180,225,270,315]);
-            camStatus.innerText = `${camAzMap[cAzSnap]} | El: ${snap(s.camEl, [-30,0,30,60])}°`;
-            lightStatus.innerText = s.lightMode !== 'Ring' ? s.lightMode : lightAzMap[lAzSnap];
+            promptOverlay.innerText = text;
         }
 
         // --- Interaction ---
         const raycaster = new THREE.Raycaster();
         const mouse = new THREE.Vector2();
         let isDragging = false;
-        let dragItem = null;
-        let startY = 0;
+        
+        const canvas = renderer.domElement;
+        
+        function getMouse(e) {
+            const rect = canvas.getBoundingClientRect();
+            return {
+                x: ((e.clientX - rect.left) / rect.width) * 2 - 1,
+                y: -((e.clientY - rect.top) / rect.height) * 2 + 1
+            };
+        }
 
-        wrapper.addEventListener('mousedown', (e) => {
-            const rect = wrapper.getBoundingClientRect();
-            mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
-            mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
-            
+        canvas.addEventListener('mousedown', (e) => {
+            const m = getMouse(e);
+            mouse.set(m.x, m.y);
             raycaster.setFromCamera(mouse, camera);
-            const intersects = raycaster.intersectObjects([hCamAz, hCamEl, hCamDist, sunMesh]);
             
-            if (intersects.length > 0) {
-                isDragging = true;
-                dragItem = intersects[0].object;
-                startY = mouse.y;
-                dragItem.material.emissiveIntensity = 1.0;
+            // Allow clicking anywhere to move light, or specifically the orb
+            // To make it easy, let's just project mouse to a virtual sphere
+            isDragging = true;
+            handleDrag(e);
+        });
+
+        function handleDrag(e) {
+            if (!isDragging) return;
+            
+            const m = getMouse(e);
+            mouse.set(m.x, m.y);
+            
+            // Logic: Raycast to a virtual sphere at center
+            // Or simpler: Map mouse X to Azimuth, Mouse Y to Elevation
+            // Let's use Mouse movement to delta
+            
+            // Robust approach: Project mouse onto a virtual sphere
+            // But simpler UI: Mouse X = Rotation, Mouse Y = Elevation
+            // This feels like "OrbitControls" but for the light
+        }
+        
+        // Let's use a simpler drag logic: standard delta movement
+        let previousMouse = { x: 0, y: 0 };
+        
+        canvas.addEventListener('mousedown', (e) => {
+            isDragging = true;
+            previousMouse = { x: e.clientX, y: e.clientY };
+            
+            // Check if clicked on orb (visual feedback)
+            const m = getMouse(e);
+            mouse.set(m.x, m.y);
+            raycaster.setFromCamera(mouse, camera);
+            const intersects = raycaster.intersectObject(lightMesh);
+            if(intersects.length > 0) {
+                lightMesh.scale.setScalar(1.2);
             }
+            canvas.style.cursor = 'grabbing';
         });
 
         window.addEventListener('mousemove', (e) => {
-            const rect = wrapper.getBoundingClientRect();
-            mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
-            mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
+            if (isDragging) {
+                const deltaX = e.clientX - previousMouse.x;
+                const deltaY = e.clientY - previousMouse.y;
+                previousMouse = { x: e.clientX, y: e.clientY };
 
-            if (isDragging && dragItem) {
-                raycaster.setFromCamera(mouse, camera);
-                const pt = new THREE.Vector3();
+                // Adjust sensitivity
+                azimuthAngle -= deltaX * 0.5; 
+                elevationAngle += deltaY * 0.5;
+
+                // Clamp Elevation
+                elevationAngle = Math.max(-89, Math.min(89, elevationAngle));
                 
-                if (dragItem.userData.type === 'camAz') {
-                    const plane = new THREE.Plane(new THREE.Vector3(0,1,0), -0.05);
-                    if (raycaster.ray.intersectPlane(plane, pt)) {
-                        let ang = THREE.MathUtils.radToDeg(Math.atan2(pt.x, pt.z));
-                        if(ang < 0) ang += 360;
-                        window.sceneState.camAz = ang;
-                    }
-                }
-                else if (dragItem.userData.type === 'camEl') {
-                    const plane = new THREE.Plane(new THREE.Vector3(1,0,0), -0.8);
-                    if (raycaster.ray.intersectPlane(plane, pt)) {
-                        let ang = THREE.MathUtils.radToDeg(Math.atan2(pt.y - CENTER.y, pt.z));
-                        window.sceneState.camEl = THREE.MathUtils.clamp(ang, -30, 60);
-                    }
-                }
-                else if (dragItem.userData.type === 'camDist') {
-                    const d = 1.0 - (mouse.y - startY) * 2; 
-                    window.sceneState.camDist = THREE.MathUtils.clamp(d, 0.6, 1.4);
-                }
-                else if (dragItem.userData.type === 'light') {
-                    // Complex logic for Light: Plane intersection + Vertical Check
-                    const plane = new THREE.Plane(new THREE.Vector3(0,1,0), -CENTER.y);
-                    if (raycaster.ray.intersectPlane(plane, pt)) {
-                        // Check explicit vertical raycast for visual consistency if needed, 
-                        // but here we map mouse Y to height triggers roughly
-                        const distToCenter = pt.distanceTo(CENTER);
-                        
-                        // Simplified: Use mouse Y from screen to determine Above/Below
-                        if (mouse.y > 0.6) {
-                            window.sceneState.lightMode = 'Above';
-                        } else if (mouse.y < -0.6) {
-                            window.sceneState.lightMode = 'Below';
-                        } else {
-                            window.sceneState.lightMode = 'Ring';
-                            let ang = THREE.MathUtils.radToDeg(Math.atan2(pt.x, pt.z));
-                            if(ang < 0) ang += 360;
-                            window.sceneState.lightAz = ang;
-                        }
-                    }
-                }
                 updatePositions();
             } else {
-                // Hover cursor
+                 // Hover effect
+                const m = getMouse(e);
+                mouse.set(m.x, m.y);
                 raycaster.setFromCamera(mouse, camera);
-                const hits = raycaster.intersectObjects([hCamAz, hCamEl, hCamDist, sunMesh]);
-                wrapper.style.cursor = hits.length > 0 ? 'pointer' : 'default';
+                const intersects = raycaster.intersectObject(lightMesh);
+                canvas.style.cursor = intersects.length > 0 ? 'grab' : 'default';
             }
         });
 
         window.addEventListener('mouseup', () => {
-            if(isDragging) {
+            if (isDragging) {
                 isDragging = false;
-                if(dragItem) dragItem.material.emissiveIntensity = dragItem.userData.type==='light'?1:0.4;
-                dragItem = null;
+                lightMesh.scale.setScalar(1.0);
+                canvas.style.cursor = 'default';
                 
-                // Snap & Export
-                const s = window.sceneState;
-                s.camAz = snap(s.camAz, [0,45,90,135,180,225,270,315]);
-                s.camEl = snap(s.camEl, [-30,0,30,60]);
-                s.camDist = snap(s.camDist, [0.6, 1.0, 1.4]);
+                // Snap for the bridge output, but keep visual smooth? 
+                // No, let's output exact values, python snaps them.
                 
-                if (s.lightMode === 'Ring') {
-                    s.lightAz = snap(s.lightAz, [0,45,90,135,180,225,270,315]);
-                }
+                // Send to Python
+                // Normalize Azimuth for output
+                let outAz = azimuthAngle % 360;
+                if(outAz < 0) outAz += 360;
                 
-                updatePositions();
+                const data = { azimuth: outAz, elevation: elevationAngle };
                 
-                // Communicate to Gradio
                 const bridge = document.querySelector("#bridge-output textarea");
                 if (bridge) {
-                    bridge.value = JSON.stringify(s);
+                    bridge.value = JSON.stringify(data);
                     bridge.dispatchEvent(new Event("input", { bubbles: true }));
                 }
             }
         });
 
-        // External Hook
-        window.camera3D = {
-            updateTexture: (url) => {
-                if(!url) { planeMat.map = createPlaceholderTexture(); return; }
-                new THREE.TextureLoader().load(url, (t)=>{
-                    t.minFilter=THREE.LinearFilter; planeMat.map=t;
-                    const aspect = t.image.width/t.image.height;
-                    const s = 1.2;
-                    if(aspect>1) targetPlane.scale.set(s, s/aspect, 1);
-                    else targetPlane.scale.set(s*aspect, s, 1);
-                    planeMat.needsUpdate=true;
-                });
-            },
-            updateState: (json) => {
-                if(typeof json === 'string') json = JSON.parse(json);
-                if(!json) return;
-                Object.assign(window.sceneState, json);
-                updatePositions();
-            }
-        };
-        
-        // Loop
-        function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); }
+        // --- Render Loop ---
+        function animate() {
+            requestAnimationFrame(animate);
+            renderer.render(scene, camera);
+        }
         animate();
         updatePositions();
+
+        // --- Exposed Methods for Python ---
+        window.light3D.updateState = (data) => {
+            if (!data) return;
+            if (typeof data === 'string') data = JSON.parse(data);
+            azimuthAngle = data.azimuth !== undefined ? data.azimuth : azimuthAngle;
+            elevationAngle = data.elevation !== undefined ? data.elevation : elevationAngle;
+            updatePositions();
+        };
+
+        window.light3D.updateTexture = (url) => {
+            if (!url) {
+                planeMaterial.map = createPlaceholderTexture();
+                planeMaterial.needsUpdate = true;
+                return;
+            }
+            new THREE.TextureLoader().load(url, (tex) => {
+                tex.colorSpace = THREE.SRGBColorSpace;
+                tex.minFilter = THREE.LinearFilter;
+                planeMaterial.map = tex;
+                
+                const img = tex.image;
+                const aspect = img.width / img.height;
+                const scale = 1.5; 
+                if (aspect > 1) targetPlane.scale.set(scale, scale / aspect, 1);
+                else targetPlane.scale.set(scale * aspect, scale, 1);
+                
+                planeMaterial.needsUpdate = true;
+            });
+        };
     };
+
     initScene();
 })();
 </script>
 """
 
-# --- UI Construction ---
+# --- UI Setup ---
 css = """
 #col-container { max-width: 1200px; margin: 0 auto; }
+#light-control-wrapper { box-shadow: 0 4px 12px rgba(255, 204, 0, 0.2); border: 1px solid #333; }
 .gradio-container { overflow: visible !important; }
 """
 
 with gr.Blocks() as demo:
     gr.HTML('<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>')
     
-    gr.Markdown("# 🎬 Qwen Image Edit — 3D Lighting & Camera Control")
-    gr.Markdown("Control the camera (Blue/Green/Pink handles) and the **Lighting Source** (Yellow Sun Sphere).")
+    gr.Markdown("# 💡 Qwen Edit 2509 — Multi-Angle Lighting Control")
+    gr.Markdown("Control the **direction of the light source** using the 3D visualizer or sliders.")
     
     with gr.Row(elem_id="col-container"):
+        # Left: Controls
         with gr.Column(scale=1):
             image = gr.Image(label="Input Image", type="pil", height=250)
             
-            # The 3D Controller
+            # The 3D Viewport
             gr.HTML(THREE_JS_LOGIC)
             
-            # Bridges
-            bridge_output = gr.Textbox(elem_id="bridge-output", visible=False) # JS -> Python
-            bridge_input = gr.JSON(value={}, visible=False) # Python -> JS
-
-            # Manual Controls (Hidden or Accordion if user prefers 3D only)
-            with gr.Accordion("Manual Sliders", open=False):
-                with gr.Row():
-                    cam_az = gr.Slider(0, 315, 0, step=45, label="Camera Azimuth")
-                    cam_el = gr.Slider(-30, 60, 0, step=30, label="Camera Elevation")
-                    cam_dist = gr.Slider(0.6, 1.4, 1.0, step=0.4, label="Camera Distance")
-                with gr.Row():
-                    light_az = gr.Slider(0, 315, 0, step=45, label="Light Direction")
-                    light_mode = gr.Radio(["Ring", "Above", "Below"], value="Ring", label="Light Vertical")
-
-            run_btn = gr.Button("🚀 Generate", variant="primary", size="lg")
-            prompt_view = gr.Textbox(label="Generated Prompt", interactive=False)
+            # Hidden Bridges
+            bridge_output = gr.Textbox(elem_id="bridge-output", visible=False, label="Bridge Output")
+            bridge_input = gr.JSON(value={}, visible=False, label="Bridge Input")
 
+            with gr.Group():
+                gr.Markdown("### Light Position")
+                azimuth_slider = gr.Slider(0, 360, step=45, label="Horizontal Direction (Azimuth)", value=0, info="0=Front, 90=Right, 180=Rear, 270=Left")
+                elevation_slider = gr.Slider(-90, 90, step=15, label="Vertical Angle (Elevation)", value=0, info="+90=Above, -90=Below")
+
+            run_btn = gr.Button("🚀 Relight Image", variant="primary", size="lg")
+            
+            prompt_preview = gr.Textbox(label="Generated Prompt", interactive=False, value="<sks> Light source from the Front")
+
+        # Right: Result
         with gr.Column(scale=1):
-            result = gr.Image(label="Output")
-            with gr.Accordion("Advanced Settings", open=False):
-                seed = gr.Slider(0, MAX_SEED, 0, label="Seed")
-                rand_seed = gr.Checkbox(True, label="Randomize Seed")
-                cfg = gr.Slider(1, 10, 1.0, 0.1, label="Guidance")
-                steps = gr.Slider(1, 50, 4, 1, label="Steps")
-                w = gr.Slider(256, 2048, 1024, 8, label="Width")
-                h = gr.Slider(256, 2048, 1024, 8, label="Height")
-
-    # --- Events ---
-    
-    # 1. Update Image in 3D
-    image.upload(update_dimensions_on_upload, image, [w, h]) \
-         .then(get_image_base64, image, bridge_output) \
-         .then(None, bridge_output, None, js="(v) => window.camera3D.updateTexture(v)")
-
-    # 2. Sync Sliders -> Bridge -> 3D
-    def sliders_to_bridge(ca, ce, cd, la, lm):
-        return {"camAz": ca, "camEl": ce, "camDist": cd, "lightAz": la, "lightMode": lm}
+            result = gr.Image(label="Output Image")
+            
+            with gr.Accordion("Advanced", open=False):
+                seed = gr.Slider(0, MAX_SEED, value=0, label="Seed")
+                randomize_seed = gr.Checkbox(True, label="Randomize Seed")
+                guidance_scale = gr.Slider(1, 10, 1.0, step=0.1, label="Guidance")
+                steps = gr.Slider(1, 50, 4, step=1, label="Steps")
+                width = gr.Slider(256, 2048, 1024, step=8, label="Width")
+                height = gr.Slider(256, 2048, 1024, step=8, label="Height")
+
+    # --- Event Wiring ---
+
+    # 1. Helper to sync Textbox (Prompt)
+    def update_prompt(az, el):
+        return build_lighting_prompt(az, el)
+
+    # 2. Image Upload
+    def handle_image_upload(img):
+        w, h = update_dimensions_on_upload(img)
+        b64 = get_image_base64(img)
+        return w, h, b64
+
+    image.upload(handle_image_upload, inputs=[image], outputs=[width, height, bridge_input]) \
+         .then(None, [image], None, js="(img) => { if(img) window.light3D.updateTexture(img); }")
     
-    input_triggers = [cam_az, cam_el, cam_dist, light_az, light_mode]
-    for trig in input_triggers:
-        trig.change(sliders_to_bridge, input_triggers, bridge_input) \
-            .then(None, bridge_input, None, js="(v) => window.camera3D.updateState(v)") \
-            .then(build_full_prompt, input_triggers, prompt_view)
-
-    # 3. Sync 3D -> Bridge -> Sliders
-    def bridge_to_sliders(json_str):
+    # 3. Sliders -> Update Bridge -> Update 3D
+    def sync_sliders_to_bridge(az, el):
+        return {"azimuth": az, "elevation": el}
+
+    for s in [azimuth_slider, elevation_slider]:
+        s.change(sync_sliders_to_bridge, [azimuth_slider, elevation_slider], bridge_input) \
+         .then(update_prompt, [azimuth_slider, elevation_slider], prompt_preview)
+
+    # Trigger JS update when bridge_input changes
+    bridge_input.change(None, [bridge_input], None, js="(val) => window.light3D.updateState(val)")
+
+    # 4. 3D Interaction (Bridge Output) -> Update Sliders
+    def sync_bridge_to_sliders(data_str):
         try:
-            d = json.loads(json_str)
-            return (
-                d.get('camAz', 0), d.get('camEl', 0), d.get('camDist', 1.0),
-                d.get('lightAz', 0), d.get('lightMode', 'Ring')
-            )
-        except: return 0,0,1,0,'Ring'
-    
-    bridge_output.change(bridge_to_sliders, bridge_output, input_triggers)
+            data = json.loads(data_str)
+            return data.get('azimuth', 0), data.get('elevation', 0)
+        except:
+            return 0, 0
+
+    bridge_output.change(sync_bridge_to_sliders, bridge_output, [azimuth_slider, elevation_slider])
 
-    # 4. Generate
+    # 5. Generation
     run_btn.click(
-        infer_edit,
-        inputs=[image, cam_az, cam_el, cam_dist, light_az, light_mode, seed, rand_seed, cfg, steps, h, w],
-        outputs=[result, seed, prompt_view]
+        infer_lighting_edit,
+        inputs=[image, azimuth_slider, elevation_slider, seed, randomize_seed, guidance_scale, steps, height, width],
+        outputs=[result, seed, prompt_preview]
     )
 
 if __name__ == "__main__":