Update app.py

app.py

@@ -7,60 +7,94 @@ import json
 import base64
 from io import BytesIO
 from PIL import Image
+import os
 
-# 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.
+# --- Imports (Custom Structure) ---
 try:
-    from diffusers import FlowMatchEulerDiscreteScheduler, QwenImageEditPlusPipeline
+    from diffusers import FlowMatchEulerDiscreteScheduler
+    # Assuming these modules exist in your environment as requested
+    from qwenimage.pipeline_qwenimage_edit_plus import QwenImageEditPlusPipeline
+    from qwenimage.transformer_qwenimage import QwenImageTransformer2DModel
+    from qwenimage.qwen_fa3_processor import QwenDoubleStreamAttnProcessorFA3
 except ImportError:
-    # 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 to(self, device): return self
-        def load_lora_weights(self, *args, **kwargs): pass
-        def set_adapters(self, *args, **kwargs): pass
-        def __call__(self, *args, **kwargs):
-            class Result: images = [Image.new("RGB", (512, 512), color="gray")]
-            return Result()
+    print("⚠️ Custom modules (qwenimage) not found. Using standard Diffusers classes for UI testing.")
+    from diffusers import Qwen2VLForConditionalGeneration as QwenImageEditPlusPipeline # Fallback
+    from diffusers import Transformer2DModel as QwenImageTransformer2DModel # Fallback
+    # Dummy class for processor if missing
+    class QwenDoubleStreamAttnProcessorFA3: pass
 
+# --- Configuration ---
 MAX_SEED = np.iinfo(np.int32).max
-
-# --- Model Loading ---
 dtype = torch.bfloat16
 device = "cuda" if torch.cuda.is_available() else "cpu"
 
-try:
-    pipe = QwenImageEditPlusPipeline.from_pretrained(
-        "Qwen/Qwen-Image-Edit-2511",
-        torch_dtype=dtype
-    ).to(device)
-
-    # Load the lightning LoRA for fast inference
-    pipe.load_lora_weights(
-        "lightx2v/Qwen-Image-Edit-2511-Lightning",
-        weight_name="Qwen-Image-Edit-2511-Lightning-4steps-V1.0-bf16.safetensors",
-        adapter_name="lightning"
-    )
+ADAPTER_SPECS = {
+    "Multi-Angle-Lighting": {
+        "repo": "dx8152/Qwen-Edit-2509-Multi-Angle-Lighting",
+        "weights": "多角度灯光-251116.safetensors",
+        "adapter_name": "multi-angle-lighting"
+    }
+}
 
-    # 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"
-    )
+# --- Model Loading ---
+# Global variable for the pipe
+pipe = None
 
-    pipe.set_adapters(["lightning", "lighting"], adapter_weights=[1.0, 1.0])
-except Exception as e:
-    print(f"Model loading failed (ignorable if just testing UI): {e}")
-    pipe = None
+def initialize_model():
+    global pipe
+    print("⏳ Initializing Base Model...")
+    
+    try:
+        # Load Transformer first
+        transformer = QwenImageTransformer2DModel.from_pretrained(
+            "prithivMLmods/Qwen-Image-Edit-Rapid-AIO-V19",
+            torch_dtype=dtype,
+            device_map='cuda'
+        )
+        
+        # Load Pipeline with injected transformer
+        pipe = QwenImageEditPlusPipeline.from_pretrained(
+            "Qwen/Qwen-Image-Edit-2511",
+            transformer=transformer,
+            torch_dtype=dtype
+        ).to(device)
+        
+        # Set Processor
+        try:
+            pipe.transformer.set_attn_processor(QwenDoubleStreamAttnProcessorFA3())
+            print("✅ Flash Attention 3 Processor set successfully.")
+        except Exception as e:
+            print(f"⚠️ Warning: Could not set FA3 processor: {e}")
+            
+    except Exception as e:
+        print(f"❌ Model Loading Failed: {e}")
+        # Create dummy pipe for UI testing if GPU/Weights missing
+        class DummyPipe:
+            def __call__(self, *args, **kwargs):
+                class Res: images = [Image.new("RGB", (1024, 1024), "gray")]
+                return Res()
+            def load_lora_weights(self, *args, **kwargs): pass
+            def set_adapters(self, *args, **kwargs): pass
+            def get_active_adapters(self): return []
+        pipe = DummyPipe()
+
+# Initialize base model immediately (or lazy load this too if preferred, but usually base model loads on startup)
+if torch.cuda.is_available():
+    initialize_model()
+else:
+    print("⚠️ CUDA not available. Skipping model load for UI rendering.")
+    class DummyPipe:
+        def __call__(self, *args, **kwargs): return type('obj', (object,), {'images': [Image.new("RGB", (512, 512), "black")]})
+        def load_lora_weights(self, *args, **kwargs): pass
+        def set_adapters(self, *args, **kwargs): pass
+        def get_active_adapters(self): return []
+    pipe = DummyPipe()
 
-# --- Prompt Building ---
+# --- Prompt Logic ---
 
-# Horizontal mappings (Azimuth)
-AZIMUTH_MAP = {
+# Mappings based on the requested list
+# Azimuth: 0=Front, 90=Right, 180=Rear, 270=Left
+HORIZONTAL_MAP = {
     0: "Light source from the Front",
     45: "Light source from the Right Front",
     90: "Light source from the Right",
@@ -71,27 +105,44 @@ AZIMUTH_MAP = {
     315: "Light source from the Left Front"
 }
 
-def snap_to_nearest(value, options):
-    return min(options, key=lambda x: abs(x - value))
-
-def build_lighting_prompt(azimuth: float, elevation: float) -> str:
+def get_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.
+    Determines the prompt based on azimuth (0-360) and elevation (-90 to 90).
+    Prioritizes Above/Below if elevation is significant.
     """
-    # 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()))
+    # 1. Check Vertical Extremes (Elevation)
+    # If elevation is > 45 degrees, treat as "Above"
+    if elevation > 45:
+        return "Light source from Above"
+    # If elevation is < -45 degrees, treat as "Below"
+    if elevation < -45:
+        return "Light source from Below"
+    
+    # 2. Check Horizontal (Azimuth)
+    # Snap to nearest 45 degree increment
+    az_options = list(HORIZONTAL_MAP.keys())
+    closest_az = min(az_options, key=lambda x: abs(x - azimuth))
     
-    return f"<sks> {AZIMUTH_MAP[az_snap]}"
+    return HORIZONTAL_MAP[closest_az]
+
+# --- Inference ---
+
+def load_lora_lazy():
+    """Checks if LoRA is loaded, if not, loads it."""
+    spec = ADAPTER_SPECS["Multi-Angle-Lighting"]
+    try:
+        active = pipe.get_active_adapters()
+        if spec["adapter_name"] not in active:
+            print(f"♻️ Lazy Loading LoRA: {spec['repo']}...")
+            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])
+            print("✅ LoRA Loaded.")
+    except Exception as e:
+        print(f"⚠️ LoRA Load Error: {e}")
 
 @spaces.GPU
 def infer_lighting_edit(
@@ -100,26 +151,29 @@ def infer_lighting_edit(
     elevation: float = 0.0,
     seed: int = 0,
     randomize_seed: bool = True,
-    guidance_scale: float = 1.0,
-    num_inference_steps: int = 4,
+    guidance_scale: float = 3.5, # Slightly higher for lighting typically
+    num_inference_steps: int = 20,
     height: int = 1024,
     width: int = 1024,
 ):
-    if pipe is None:
-        raise gr.Error("Model not initialized.")
-        
-    prompt = build_lighting_prompt(azimuth, elevation)
-    print(f"Generated Prompt: {prompt}")
+    if image is None:
+        raise gr.Error("Please upload an image first.")
+
+    # 1. Lazy Load LoRA
+    load_lora_lazy()
+    
+    # 2. Build Prompt
+    prompt = get_lighting_prompt(azimuth, elevation)
+    print(f"💡 Generated Prompt: {prompt}")
 
+    # 3. Prepare Inputs
     if randomize_seed:
         seed = random.randint(0, MAX_SEED)
     generator = torch.Generator(device=device).manual_seed(seed)
-
-    if image is None:
-        raise gr.Error("Please upload an image first.")
-
+    
     pil_image = image.convert("RGB")
 
+    # 4. Generate
     result = pipe(
         image=[pil_image],
         prompt=prompt,
@@ -133,10 +187,11 @@ def infer_lighting_edit(
 
     return result, seed, prompt
 
+# --- Helpers ---
+
 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:
@@ -150,402 +205,297 @@ def get_image_base64(image):
     img_str = base64.b64encode(buffered.getvalue()).decode()
     return f"data:image/png;base64,{img_str}"
 
-# --- 3D Lighting Control HTML Logic ---
+# --- 3D Lighting Controller (Three.js) ---
 THREE_JS_LOGIC = """
-<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 id="light-control-wrapper" style="width: 100%; height: 450px; position: relative; background: #0f0f0f; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 20px #000;">
+    <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: sans-serif; font-size: 14px; color: #fbff00; white-space: nowrap; z-index: 10; border: 1px solid #fbff00;">Initializing...</div>
 </div>
 <script>
 (function() {
     const wrapper = document.getElementById('light-control-wrapper');
     const promptOverlay = document.getElementById('prompt-overlay');
     
-    // Global Access for Python Bridge
-    window.light3D = {
-        updateState: null,
-        updateTexture: null
-    };
+    window.light3D = { updateState: null, updateTexture: null };
 
     const initScene = () => {
-        if (typeof THREE === 'undefined') {
-            setTimeout(initScene, 100);
-            return;
-        }
+        if (typeof THREE === 'undefined') { setTimeout(initScene, 100); return; }
 
-        // --- Setup ---
+        // Setup
         const scene = new THREE.Scene();
-        scene.background = new THREE.Color(0x111111);
+        scene.background = new THREE.Color(0x0f0f0f);
         
-        // 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
+        const camera = new THREE.PerspectiveCamera(50, wrapper.clientWidth / wrapper.clientHeight, 0.1, 1000);
+        camera.position.set(4.0, 2.5, 4.0);
         camera.lookAt(0, 0, 0);
         
         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);
         
-        // --- Helpers ---
-        scene.add(new THREE.GridHelper(8, 16, 0x333333, 0x222222));
-
-        // --- Objects ---
-        const CENTER = new THREE.Vector3(0, 0, 0);
-        const ORBIT_RADIUS = 2.5;
+        // --- Environment ---
+        const grid = new THREE.GridHelper(6, 12, 0x333333, 0x111111);
+        scene.add(grid);
 
-        // 1. The Subject (Central Image Plane + Sphere for shading ref)
-        const group = new THREE.Group();
-        scene.add(group);
-
-        // Placeholder Texture
+        // --- Image Plane (The Subject) ---
         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.fillStyle = '#444'; 
-            ctx.font = '30px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
-            ctx.fillText("Upload Image", 128, 128);
-            return new THREE.CanvasTexture(canvas);
+            const cvs = document.createElement('canvas');
+            cvs.width = 256; cvs.height = 256;
+            const ctx = cvs.getContext('2d');
+            ctx.fillStyle = '#222'; ctx.fillRect(0,0,256,256);
+            ctx.strokeStyle = '#444'; ctx.lineWidth=5; ctx.strokeRect(20,20,216,216);
+            ctx.font = '30px Arial'; ctx.fillStyle='#555'; ctx.textAlign='center';
+            ctx.fillText('SUBJECT', 128, 138);
+            return new THREE.CanvasTexture(cvs);
         }
 
-        let planeMaterial = new THREE.MeshStandardMaterial({ 
+        const planeMat = new THREE.MeshStandardMaterial({ 
             map: createPlaceholderTexture(), 
             side: THREE.DoubleSide,
-            roughness: 0.8,
+            roughness: 0.5,
             metalness: 0.1
         });
+        const targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(1.5, 1.5), planeMat);
+        targetPlane.position.y = 0.75;
+        scene.add(targetPlane);
         
-        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();
-        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
+        // Base Ambient Light (Dim)
         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];
+        // --- The Controlled Light Source ---
+        const RADIUS = 2.2;
+        let azimuth = 0;   // 0 - 360
+        let elevation = 0; // -90 - 90
 
-        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);
-        }
+        const lightGroup = new THREE.Group();
+        scene.add(lightGroup);
 
-        function updatePositions() {
-            // 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.
+        // The Physical Bulb Representation
+        const bulbGeo = new THREE.SphereGeometry(0.15, 32, 32);
+        const bulbMat = new THREE.MeshBasicMaterial({ color: 0xffaa00 });
+        const bulb = new THREE.Mesh(bulbGeo, bulbMat);
+        lightGroup.add(bulb);
+        
+        // The Glow Halo
+        const glowGeo = new THREE.SphereGeometry(0.25, 32, 32);
+        const glowMat = new THREE.MeshBasicMaterial({ color: 0xffaa00, transparent: true, opacity: 0.3 });
+        const glow = new THREE.Mesh(glowGeo, glowMat);
+        lightGroup.add(glow);
+
+        // The Actual Light Caster
+        const spotLight = new THREE.PointLight(0xffaa00, 2, 10);
+        lightGroup.add(spotLight);
+
+        // Visual Guides (Orbit Rings)
+        const azRing = new THREE.Mesh(new THREE.TorusGeometry(RADIUS, 0.02, 16, 64), new THREE.MeshBasicMaterial({ color: 0x444444, transparent:true, opacity:0.5 }));
+        azRing.rotation.x = Math.PI/2;
+        azRing.position.y = 0.75; // Center of image
+        scene.add(azRing);
+
+        const elRing = new THREE.Mesh(new THREE.TorusGeometry(RADIUS, 0.02, 16, 64), new THREE.MeshBasicMaterial({ color: 0x444444, transparent:true, opacity:0.5 }));
+        elRing.rotation.y = Math.PI/2;
+        elRing.position.y = 0.75;
+        scene.add(elRing);
+
+        // --- Logic ---
+        function updatePosition() {
+            const rAz = THREE.MathUtils.degToRad(azimuth);
+            const rEl = THREE.MathUtils.degToRad(elevation);
             
-            const rAz = THREE.MathUtils.degToRad(azimuthAngle); 
-            const rEl = THREE.MathUtils.degToRad(elevationAngle);
-
-            // Calculate position on sphere
-            // x = r * sin(az) * cos(el)
+            // Standard Spherical: Y is up.
+            // x = r * cos(el) * sin(az)
             // y = r * sin(el)
-            // z = r * cos(az) * cos(el)
+            // z = r * cos(el) * cos(az)
+            // Offset Y by center height (0.75)
             
-            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);
+            const x = RADIUS * Math.cos(rEl) * Math.sin(rAz);
+            const y = (RADIUS * Math.sin(rEl)) + 0.75;
+            const z = RADIUS * Math.cos(rEl) * Math.cos(rAz);
 
             lightGroup.position.set(x, y, z);
-            lightGroup.lookAt(CENTER); // Light points to center
-
-            // Update UI Text
+            
+            // Text Update
             let text = "";
-            if (elevationAngle >= 45) text = "Light source from Above";
-            else if (elevationAngle <= -45) text = "Light source from Below";
+            if (elevation > 45) text = "Above";
+            else if (elevation < -45) text = "Below";
             else {
-                const snap = snapToNearest(azimuthAngle, azSteps);
-                text = "Light source from the " + azMap[snap];
+                // Snap Azimuth
+                const snaps = {0:'Front', 45:'Right Front', 90:'Right', 135:'Right Rear', 180:'Rear', 225:'Left Rear', 270:'Left', 315:'Left Front'};
+                const snapKeys = Object.keys(snaps).map(Number);
+                const closest = snapKeys.reduce((p, c) => Math.abs(c - azimuth) < Math.abs(p - azimuth) ? c : p);
+                text = snaps[closest];
             }
-            promptOverlay.innerText = text;
+            promptOverlay.innerText = `Light Source: ${text}`;
         }
 
         // --- Interaction ---
-        const raycaster = new THREE.Raycaster();
-        const mouse = new THREE.Vector2();
         let isDragging = false;
-        
         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
-            };
-        }
-
-        canvas.addEventListener('mousedown', (e) => {
-            const m = getMouse(e);
-            mouse.set(m.x, m.y);
-            raycaster.setFromCamera(mouse, camera);
-            
-            // 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) => {
-            if (isDragging) {
-                const deltaX = e.clientX - previousMouse.x;
-                const deltaY = e.clientY - previousMouse.y;
-                previousMouse = { x: e.clientX, y: e.clientY };
-
-                // Adjust sensitivity
-                azimuthAngle -= deltaX * 0.5; 
-                elevationAngle += deltaY * 0.5;
-
-                // Clamp Elevation
-                elevationAngle = Math.max(-89, Math.min(89, elevationAngle));
-                
-                updatePositions();
-            } else {
-                 // Hover effect
-                const m = getMouse(e);
-                mouse.set(m.x, m.y);
-                raycaster.setFromCamera(mouse, camera);
-                const intersects = raycaster.intersectObject(lightMesh);
-                canvas.style.cursor = intersects.length > 0 ? 'grab' : 'default';
-            }
-        });
-
-        window.addEventListener('mouseup', () => {
-            if (isDragging) {
-                isDragging = false;
-                lightMesh.scale.setScalar(1.0);
+        // Simple Orbit Control Logic for the Light
+        canvas.addEventListener('mousedown', () => { isDragging = true; canvas.style.cursor = 'grabbing'; });
+        window.addEventListener('mouseup', () => { 
+            if(isDragging) {
+                isDragging = false; 
                 canvas.style.cursor = 'default';
+                // Snap on Release
+                const snapAz = Math.round(azimuth / 45) * 45;
+                let snapEl = 0;
+                if(elevation > 45) snapEl = 60; // Bias to high
+                else if (elevation < -45) snapEl = -60;
+                else snapEl = 0;
                 
-                // Snap for the bridge output, but keep visual smooth? 
-                // No, let's output exact values, python snaps them.
+                // Animate snap (simplified)
+                azimuth = (snapAz % 360 + 360) % 360;
+                elevation = snapEl;
+                updatePosition();
                 
                 // Send to Python
-                // Normalize Azimuth for output
-                let outAz = azimuthAngle % 360;
-                if(outAz < 0) outAz += 360;
-                
-                const data = { azimuth: outAz, elevation: elevationAngle };
-                
                 const bridge = document.querySelector("#bridge-output textarea");
-                if (bridge) {
-                    bridge.value = JSON.stringify(data);
+                if(bridge) {
+                    bridge.value = JSON.stringify({ azimuth: azimuth, elevation: elevation });
                     bridge.dispatchEvent(new Event("input", { bubbles: true }));
                 }
             }
         });
+        
+        canvas.addEventListener('mousemove', (e) => {
+            if(isDragging) {
+                const rect = canvas.getBoundingClientRect();
+                const deltaX = e.movementX;
+                const deltaY = e.movementY;
+                
+                azimuth -= deltaX * 0.5;
+                if(azimuth < 0) azimuth += 360;
+                if(azimuth >= 360) azimuth -= 360;
+                
+                elevation += deltaY * 0.5;
+                elevation = Math.max(-80, Math.min(80, elevation));
+                
+                updatePosition();
+            }
+        });
 
-        // --- Render Loop ---
+        // Loop
         function animate() {
             requestAnimationFrame(animate);
+            // Pulse the bulb
+            const time = Date.now() * 0.002;
+            glow.scale.setScalar(1.0 + Math.sin(time)*0.1);
             renderer.render(scene, camera);
         }
         animate();
-        updatePositions();
+        updatePosition();
 
-        // --- Exposed Methods for Python ---
+        // --- External Interface ---
         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();
+            if(typeof data === 'string') data = JSON.parse(data);
+            if(data) {
+                azimuth = data.azimuth ?? azimuth;
+                elevation = data.elevation ?? elevation;
+                updatePosition();
+            }
         };
 
         window.light3D.updateTexture = (url) => {
-            if (!url) {
-                planeMaterial.map = createPlaceholderTexture();
-                planeMaterial.needsUpdate = true;
-                return;
-            }
+            if(!url) return;
             new THREE.TextureLoader().load(url, (tex) => {
                 tex.colorSpace = THREE.SRGBColorSpace;
-                tex.minFilter = THREE.LinearFilter;
-                planeMaterial.map = tex;
+                planeMat.map = tex;
                 
                 const img = tex.image;
                 const aspect = img.width / img.height;
-                const scale = 1.5; 
+                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;
+                planeMat.needsUpdate = true;
             });
         };
     };
-
     initScene();
 })();
 </script>
 """
 
-# --- UI Setup ---
+# --- UI Layout ---
 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; }
+#light-control-wrapper { cursor: grab; }
 """
 
 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 Edit 2509 — Multi-Angle Lighting Control")
-    gr.Markdown("Control the **direction of the light source** using the 3D visualizer or sliders.")
-    
+    gr.Markdown("# 🎮 3D Light Camera Control (Qwen-Edit-2509-Multi-Angle-Lighting)")
+    gr.Markdown("Control the **Light Source** direction by dragging the 3D scene or using 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)
+            image = gr.Image(label="Input Image", type="pil", height=300)
             
-            # The 3D Viewport
+            # 3D Viewport
             gr.HTML(THREE_JS_LOGIC)
             
-            # 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")
+            # Communication Bridges
+            bridge_output = gr.Textbox(elem_id="bridge-output", visible=False)
+            bridge_input = gr.JSON(value={}, visible=False)
 
             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")
+                azimuth_slider = gr.Slider(0, 315, step=45, label="Light Azimuth (Horizontal)", value=0, 
+                                         info="0=Front, 90=Right, 180=Rear, 270=Left")
+                elevation_slider = gr.Slider(-60, 60, step=30, label="Light Elevation (Vertical)", value=0,
+                                           info=">45 = Above, < -45 = 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")
+            run_btn = gr.Button("🚀 Generate Lighting", variant="primary", size="lg")
+            prompt_preview = gr.Textbox(label="Active Prompt", interactive=False)
 
-        # Right: Result
         with gr.Column(scale=1):
-            result = gr.Image(label="Output Image")
+            result = gr.Image(label="Output Result")
             
-            with gr.Accordion("Advanced", open=False):
-                seed = gr.Slider(0, MAX_SEED, value=0, label="Seed")
+            with gr.Accordion("⚙️ Advanced Settings", open=False):
+                seed = gr.Slider(0, MAX_SEED, value=0, step=1, 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")
+                guidance = gr.Slider(1, 10, 3.5, step=0.1, label="Guidance Scale")
+                steps = gr.Slider(1, 50, 20, step=1, label="Inference 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):
+    # --- Events ---
+    
+    # 1. Prompt Preview Helper
+    def update_prompt(az, el): return get_lighting_prompt(az, el)
+    
+    # 2. Image Upload -> Size & 3D Texture
+    def handle_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); }")
+        return w, h, get_image_base64(img)
     
-    # 3. Sliders -> Update Bridge -> Update 3D
-    def sync_sliders_to_bridge(az, el):
-        return {"azimuth": az, "elevation": el}
+    image.upload(handle_upload, inputs=image, outputs=[width, height, bridge_input]) \
+         .then(None, [image], None, js="(img) => { if(img) window.light3D.updateTexture(img); }")
 
+    # 3. Sliders -> Bridge (Input) -> 3D View
+    def slider_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) \
+        s.change(slider_to_bridge, [azimuth_slider, elevation_slider], bridge_input) \
          .then(update_prompt, [azimuth_slider, elevation_slider], prompt_preview)
+         
+    bridge_input.change(None, [bridge_input], None, js="(v) => window.light3D.updateState(v)")
 
-    # 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):
+    # 4. 3D View (Bridge Output) -> Sliders
+    def bridge_to_slider(data_str):
         try:
-            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])
+            d = json.loads(data_str)
+            return d.get('azimuth', 0), d.get('elevation', 0)
+        except: return 0, 0
+        
+    bridge_output.change(bridge_to_slider, bridge_output, [azimuth_slider, elevation_slider])
 
-    # 5. Generation
+    # 5. Generate
     run_btn.click(
         infer_lighting_edit,
-        inputs=[image, azimuth_slider, elevation_slider, seed, randomize_seed, guidance_scale, steps, height, width],
+        inputs=[image, azimuth_slider, elevation_slider, seed, randomize_seed, guidance, steps, height, width],
         outputs=[result, seed, prompt_preview]
     )