Update app.py

app.py

@@ -11,6 +11,7 @@ from qwenimage.transformer_qwenimage import QwenImageTransformer2DModel
 from qwenimage.qwen_fa3_processor import QwenDoubleStreamAttnProcessorFA3
 from gradio.themes import Soft
 from gradio.themes.utils import colors, fonts, sizes
+
 colors.orange_red = colors.Color(
     name="orange_red",
     c50="#FFF0E5",
@@ -25,6 +26,7 @@ colors.orange_red = colors.Color(
     c900="#992900",
     c950="#802200",
 )
+
 class OrangeRedTheme(Soft):
     def __init__(
         self,
@@ -75,10 +77,13 @@ class OrangeRedTheme(Soft):
             color_accent_soft="*primary_100",
             block_label_background_fill="*primary_200",
         )
+
 orange_red_theme = OrangeRedTheme()
+
 MAX_SEED = np.iinfo(np.int32).max
 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(
@@ -88,11 +93,13 @@ pipe = QwenImageEditPlusPipeline.from_pretrained(
     ),
     torch_dtype=dtype
 ).to(device)
+
 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}")
+
 ADAPTER_SPECS = {
     "Multi-Angle-Lighting": {
         "repo": "dx8152/Qwen-Edit-2509-Multi-Angle-Lighting",
@@ -100,7 +107,9 @@ ADAPTER_SPECS = {
         "adapter_name": "multi-angle-lighting"
     },
 }
+
 loaded = False
+
 AZIMUTH_MAP = {
     0: "Front",
     45: "Right Front",
@@ -111,21 +120,24 @@ AZIMUTH_MAP = {
     270: "Left",
     315: "Left Front"
 }
+
 ELEVATION_MAP = {
     -90: "Below",
     0: "",
     90: "Above"
 }
+
 def snap_to_nearest(value, options):
     return min(options, key=lambda x: abs(x - value))
+
 def build_lighting_prompt(azimuth: float, elevation: float) -> str:
     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]}"
+
 @spaces.GPU
 def infer_lighting_edit(
     image: Image.Image,
@@ -139,7 +151,6 @@ def infer_lighting_edit(
     width: int = 1024,
 ):
     global loaded
-   
     if not loaded:
         pipe.load_lora_weights(
             ADAPTER_SPECS["Multi-Angle-Lighting"]["repo"],
@@ -148,15 +159,20 @@ def infer_lighting_edit(
         )
         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)
+
     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,
@@ -167,7 +183,9 @@ def infer_lighting_edit(
         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
@@ -183,63 +201,62 @@ def update_dimensions_on_upload(image):
     new_width = (new_width // 8) * 8
     new_height = (new_height // 8) * 8
     return new_width, new_height
+
 class LightingControl3D(gr.HTML):
     def __init__(self, value=None, imageUrl=None, **kwargs):
         if value is None:
             value = {"azimuth": 0, "elevation": 0}
-       
+
         html_template = """
-        <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 id="lighting-control-wrapper" style="width: 100%; height: 450px; position: relative; background: #111111; border-radius: 12px; overflow: hidden;">
+            <div id="prompt-overlay" style="position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.75); padding: 8px 18px; border-radius: 12px; font-family: monospace; font-size: 13px; color: #a5d6ff; white-space: nowrap; z-index: 10; border: 1px solid #333;"></div>
         </div>
         """
-       
+
         js_on_load = """
         (() => {
             const wrapper = element.querySelector('#lighting-control-wrapper');
             const promptOverlay = element.querySelector('#prompt-overlay');
-           
+
             const initScene = () => {
                 if (typeof THREE === 'undefined') {
                     setTimeout(initScene, 100);
                     return;
                 }
-               
+
                 const scene = new THREE.Scene();
-                scene.background = new THREE.Color(0x1a1a1a);
-               
+                scene.background = new THREE.Color(0x111111);
+
                 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);
-               
+                camera.position.set(5, 3.5, 5);
+                camera.lookAt(0, 0.8, 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;
                 renderer.shadowMap.type = THREE.PCFSoftShadowMap;
                 wrapper.insertBefore(renderer.domElement, promptOverlay);
-               
-                scene.add(new THREE.AmbientLight(0xffffff, 0.1));
-               
+
+                scene.add(new THREE.AmbientLight(0xffffff, 0.15));
+
                 const ground = new THREE.Mesh(
-                    new THREE.PlaneGeometry(10, 10),
-                    new THREE.ShadowMaterial({ opacity: 0.3 })
+                    new THREE.PlaneGeometry(12, 12),
+                    new THREE.ShadowMaterial({ opacity: 0.35 })
                 );
                 ground.rotation.x = -Math.PI / 2;
-                ground.position.y = 0;
+                ground.position.y = -0.01;
                 ground.receiveShadow = true;
                 scene.add(ground);
-               
-                scene.add(new THREE.GridHelper(8, 16, 0x333333, 0x222222));
-               
-                const CENTER = new THREE.Vector3(0, 0.75, 0);
-                const BASE_DISTANCE = 2.5;
-                const AZIMUTH_RADIUS = 2.4;
-                const ELEVATION_RADIUS = 1.8;
-               
+
+                scene.add(new THREE.GridHelper(10, 20, 0x2a2a2a, 0x1a1a1a));
+
+                const CENTER = new THREE.Vector3(0, 0.8, 0);
+                const BASE_DISTANCE = 3.2;
+
                 let azimuthAngle = props.value?.azimuth || 0;
                 let elevationAngle = props.value?.elevation || 0;
-               
+
                 const azimuthSteps = [0, 45, 90, 135, 180, 225, 270, 315];
                 const elevationSteps = [-90, 0, 90];
                 const azimuthNames = {
@@ -248,54 +265,40 @@ class LightingControl3D(gr.HTML):
                     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);
                 }
-               
+
                 function createPlaceholderTexture() {
                     const canvas = document.createElement('canvas');
-                    canvas.width = 256;
-                    canvas.height = 256;
+                    canvas.width = 256; canvas.height = 256;
                     const ctx = canvas.getContext('2d');
-                    ctx.fillStyle = '#3a3a4a';
+                    ctx.fillStyle = '#222';
                     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();
+                    ctx.fillStyle = '#444';
+                    ctx.fillRect(20, 20, 216, 216);
                     return new THREE.CanvasTexture(canvas);
                 }
-               
+
                 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);
+                const planeMaterial = new THREE.MeshStandardMaterial({
+                    map: currentTexture,
+                    side: THREE.DoubleSide,
+                    roughness: 0.7,
+                    metalness: 0.1
+                });
+                let targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(1.4, 1.4), planeMaterial);
                 targetPlane.position.copy(CENTER);
                 targetPlane.receiveShadow = true;
                 scene.add(targetPlane);
-               
+
                 function updateTextureFromUrl(url) {
                     if (!url) {
                         planeMaterial.map = createPlaceholderTexture();
                         planeMaterial.needsUpdate = true;
-                        scene.remove(targetPlane);
-                        targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(1.2, 1.2), planeMaterial);
-                        targetPlane.position.copy(CENTER);
-                        targetPlane.receiveShadow = true;
-                        scene.add(targetPlane);
                         return;
                     }
-                   
                     const loader = new THREE.TextureLoader();
                     loader.crossOrigin = 'anonymous';
                     loader.load(url, (texture) => {
@@ -303,294 +306,220 @@ class LightingControl3D(gr.HTML):
                         texture.magFilter = THREE.LinearFilter;
                         planeMaterial.map = texture;
                         planeMaterial.needsUpdate = true;
-                       
+
                         const img = texture.image;
                         if (img && img.width && img.height) {
                             const aspect = img.width / img.height;
-                            const maxSize = 1.5;
-                            let planeWidth, planeHeight;
-                            if (aspect > 1) {
-                                planeWidth = maxSize;
-                                planeHeight = maxSize / aspect;
-                            } else {
-                                planeHeight = maxSize;
-                                planeWidth = maxSize * aspect;
-                            }
+                            const maxSize = 1.8;
+                            let w = maxSize, h = maxSize;
+                            if (aspect > 1) h = maxSize / aspect;
+                            else w = maxSize * aspect;
                             scene.remove(targetPlane);
-                            targetPlane = new THREE.Mesh(
-                                new THREE.PlaneGeometry(planeWidth, planeHeight),
-                                planeMaterial
-                            );
+                            targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(w, h), planeMaterial);
                             targetPlane.position.copy(CENTER);
                             targetPlane.receiveShadow = true;
                             scene.add(targetPlane);
                         }
-                    }, undefined, (err) => {
-                        console.error('Failed to load texture:', err);
                     });
                 }
-               
-                if (props.imageUrl) {
-                    updateTextureFromUrl(props.imageUrl);
-                }
-               
-                function createLEDTexture() {
-                    const canvas = document.createElement('canvas');
-                    canvas.width = 256;
-                    canvas.height = 128;
-                    const ctx = canvas.getContext('2d');
-                   
-                    ctx.fillStyle = '#000000';
-                    ctx.fillRect(0, 0, 256, 128);
-                   
-                    const rows = 6;
-                    const cols = 12;
-                    const paddingX = 10;
-                    const paddingY = 10;
-                    const cellW = (256 - paddingX * 2) / cols;
-                    const cellH = (128 - paddingY * 2) / rows;
-                   
-                    for(let i=0; i<cols; i++) {
-                        for(let j=0; j<rows; j++) {
-                            const cx = paddingX + i * cellW + cellW/2;
-                            const cy = paddingY + j * cellH + cellH/2;
-                           
-                            const grad = ctx.createRadialGradient(cx, cy, 1, cx, cy, cellH * 0.45);
-                            grad.addColorStop(0, 'rgba(255, 255, 255, 1.0)');
-                            grad.addColorStop(0.4, 'rgba(255, 255, 255, 0.95)');
-                            grad.addColorStop(1, 'rgba(255, 255, 255, 0.0)');
-                           
-                            ctx.fillStyle = grad;
-                            ctx.beginPath();
-                            ctx.arc(cx, cy, cellH * 0.45, 0, Math.PI * 2);
-                            ctx.fill();
-                        }
-                    }
-                    return new THREE.CanvasTexture(canvas);
-                }
-               
+
+                if (props.imageUrl) updateTextureFromUrl(props.imageUrl);
+
+                // ── Modern Softbox Light Fixture ──
                 const lightGroup = new THREE.Group();
-                const ledTexture = createLEDTexture();
-               
-                const housingMat = new THREE.MeshStandardMaterial({
-                    color: 0x808080,
-                    roughness: 0.4,
-                    metalness: 0.6
-                });
-               
-                const barnDoorMat = new THREE.MeshStandardMaterial({
-                    color: 0x111111,
-                    roughness: 0.8,
-                    metalness: 0.1
-                });
-               
-                const housingGeo = new THREE.BoxGeometry(0.8, 0.5, 0.15);
-                const housing = new THREE.Mesh(housingGeo, housingMat);
-                lightGroup.add(housing);
-               
-                const panelGeo = new THREE.PlaneGeometry(0.72, 0.42);
-                const panelMat = new THREE.MeshStandardMaterial({
-                    map: ledTexture,
-                    emissiveMap: ledTexture,
-                    emissive: 0xffffff,
-                    emissiveIntensity: 5.0,
-                    color: 0x000000,
-                    roughness: 0.3,
-                    metalness: 0.1
+
+                // Softbox housing (slightly beveled rectangle)
+                const boxGeo = new THREE.BoxGeometry(1.2, 0.9, 0.18);
+                const boxMat = new THREE.MeshStandardMaterial({
+                    color: 0xe0e0ff,
+                    roughness: 0.5,
+                    metalness: 0.3,
+                    emissive: 0x404060,
+                    emissiveIntensity: 0.15
                 });
-                const panel = new THREE.Mesh(panelGeo, panelMat);
-                panel.position.z = 0.076;
-                lightGroup.add(panel);
-               
-                function createBarnDoor(w, h) {
-                    const geo = new THREE.BoxGeometry(w, h, 0.02);
-                    const mesh = new THREE.Mesh(geo, barnDoorMat);
-                    const pivot = new THREE.Group();
-                    mesh.position.y = h/2;
-                    pivot.add(mesh);
-                    return pivot;
-                }
-               
-                const topFlap = createBarnDoor(0.8, 0.25);
-                topFlap.position.set(0, 0.25, 0.075);
-                topFlap.rotation.x = THREE.MathUtils.degToRad(120);
-                lightGroup.add(topFlap);
-                const bottomFlap = createBarnDoor(0.8, 0.25);
-                bottomFlap.position.set(0, -0.25, 0.075);
-                bottomFlap.rotation.x = THREE.MathUtils.degToRad(-120);
-                bottomFlap.rotation.z = Math.PI;
-                lightGroup.add(bottomFlap);
-               
-                const yokeMat = new THREE.MeshStandardMaterial({
-                    color: 0x808080,
-                    roughness: 0.4,
-                    metalness: 0.6
+                const box = new THREE.Mesh(boxGeo, boxMat);
+                lightGroup.add(box);
+
+                // Diffusion panel (front glowing surface)
+                const diffusionGeo = new THREE.PlaneGeometry(1.08, 0.78);
+                const diffusionMat = new THREE.MeshStandardMaterial({
+                    color: 0xffffff,
+                    emissive: 0x88aaff,
+                    emissiveIntensity: 1.8,
+                    roughness: 0.9,
+                    transparent: true,
+                    opacity: 0.85
                 });
-                const yokeGeo = new THREE.TorusGeometry(0.5, 0.02, 8, 32, Math.PI);
-                const yoke = new THREE.Mesh(yokeGeo, yokeMat);
-                yoke.rotation.z = Math.PI / 2;
-                yoke.position.x = -0.55;
-               
-                const fullFixture = new THREE.Group();
-                fullFixture.add(lightGroup);
-               
-                const standGeo = new THREE.CylinderGeometry(0.03, 0.03, 0.4);
-                const stand = new THREE.Mesh(standGeo, yokeMat);
-                stand.rotation.z = Math.PI / 2;
-                stand.position.x = -0.6;
-                fullFixture.add(stand);
-                const spotLight = new THREE.SpotLight(0xffffff, 8, 10, Math.PI / 4, 0.5, 1);
-                spotLight.position.set(0, 0, 0.1);
+                const diffusion = new THREE.Mesh(diffusionGeo, diffusionMat);
+                diffusion.position.z = 0.095;
+                lightGroup.add(diffusion);
+
+                // Subtle rim light
+                const rimLight = new THREE.PointLight(0xaaccff, 2, 3);
+                rimLight.position.set(0, 0, 0.12);
+                lightGroup.add(rimLight);
+
+                // Main spot light
+                const spotLight = new THREE.SpotLight(0xffffff, 12, 12, Math.PI / 3.5, 0.4, 1.2);
+                spotLight.position.set(0, 0, 0.15);
                 spotLight.castShadow = true;
                 spotLight.shadow.mapSize.width = 1024;
                 spotLight.shadow.mapSize.height = 1024;
-                spotLight.shadow.camera.near = 0.5;
-                spotLight.shadow.camera.far = 500;
-                spotLight.shadow.bias = -0.005;
+                spotLight.shadow.bias = -0.004;
                 lightGroup.add(spotLight);
-               
+
                 const lightTarget = new THREE.Object3D();
                 lightTarget.position.copy(CENTER);
                 scene.add(lightTarget);
                 spotLight.target = lightTarget;
-               
-                scene.add(fullFixture);
-               
+
+                scene.add(lightGroup);
+
+                // ── Controls ──
                 const azimuthRing = new THREE.Mesh(
-                    new THREE.TorusGeometry(AZIMUTH_RADIUS, 0.04, 16, 64),
-                    new THREE.MeshStandardMaterial({ color: 0x007bff, emissive: 0x007bff, emissiveIntensity: 0.3 })
+                    new THREE.TorusGeometry(2.6, 0.05, 16, 64),
+                    new THREE.MeshStandardMaterial({ color: 0x00d4ff, emissive: 0x00d4ff, emissiveIntensity: 0.6 })
                 );
                 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: 0x007bff, emissive: 0x007bff, emissiveIntensity: 0.5 })
+                    new THREE.SphereGeometry(0.20, 24, 24),
+                    new THREE.MeshStandardMaterial({ color: 0x00d4ff, emissive: 0x00d4ff, emissiveIntensity: 0.8 })
                 );
                 azimuthHandle.userData.type = 'azimuth';
                 scene.add(azimuthHandle);
-               
-                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)));
-                }
-                const arcCurve = new THREE.CatmullRomCurve3(arcPoints);
+
                 const elevationArc = new THREE.Mesh(
-                    new THREE.TubeGeometry(arcCurve, 32, 0.04, 8, false),
-                    new THREE.MeshStandardMaterial({ color: 0xdc3545, emissive: 0xdc3545, emissiveIntensity: 0.3 })
+                    new THREE.TorusGeometry(2.0, 0.05, 16, 64, Math.PI),
+                    new THREE.MeshStandardMaterial({ color: 0xff2e63, emissive: 0xff2e63, emissiveIntensity: 0.6 })
                 );
+                elevationArc.rotation.z = Math.PI / 2;
+                elevationArc.position.set(-0.9, CENTER.y, 0);
                 scene.add(elevationArc);
-               
+
                 const elevationHandle = new THREE.Mesh(
-                    new THREE.SphereGeometry(0.18, 16, 16),
-                    new THREE.MeshStandardMaterial({ color: 0xdc3545, emissive: 0xdc3545, emissiveIntensity: 0.5 })
+                    new THREE.SphereGeometry(0.20, 24, 24),
+                    new THREE.MeshStandardMaterial({ color: 0xff2e63, emissive: 0xff2e63, emissiveIntensity: 0.8 })
                 );
                 elevationHandle.userData.type = 'elevation';
                 scene.add(elevationHandle);
-               
+
+                // ── Refresh Button ──
                 const refreshBtn = document.createElement('div');
                 refreshBtn.innerHTML = '⟳';
                 refreshBtn.style.position = 'absolute';
-                refreshBtn.style.top = '10px';
-                refreshBtn.style.right = '10px';
-                refreshBtn.style.background = 'rgba(255,255,255,0.5)';
-                refreshBtn.style.padding = '5px';
+                refreshBtn.style.top = '12px';
+                refreshBtn.style.right = '12px';
+                refreshBtn.style.width = '36px';
+                refreshBtn.style.height = '36px';
+                refreshBtn.style.background = 'rgba(40,40,60,0.7)';
                 refreshBtn.style.borderRadius = '50%';
+                refreshBtn.style.color = '#a0d0ff';
+                refreshBtn.style.fontSize = '24px';
+                refreshBtn.style.display = 'flex';
+                refreshBtn.style.alignItems = 'center';
+                refreshBtn.style.justifyContent = 'center';
                 refreshBtn.style.cursor = 'pointer';
-                refreshBtn.style.zIndex = '10';
-                refreshBtn.style.fontSize = '20px';
+                refreshBtn.style.zIndex = '20';
+                refreshBtn.style.border = '1px solid #444';
+                refreshBtn.style.transition = 'all 0.2s';
+                refreshBtn.title = 'Reset lighting';
                 wrapper.appendChild(refreshBtn);
-               
+
+                refreshBtn.addEventListener('mouseover', () => {
+                    refreshBtn.style.background = 'rgba(60,80,120,0.9)';
+                    refreshBtn.style.transform = 'rotate(90deg)';
+                });
+                refreshBtn.addEventListener('mouseout', () => {
+                    refreshBtn.style.background = 'rgba(40,40,60,0.7)';
+                    refreshBtn.style.transform = 'rotate(0deg)';
+                });
                 refreshBtn.addEventListener('click', () => {
                     azimuthAngle = 0;
                     elevationAngle = 0;
                     updatePositions();
                     updatePropsAndTrigger();
                 });
-               
+
                 function updatePositions() {
-                    const distance = BASE_DISTANCE;
                     const azRad = THREE.MathUtils.degToRad(azimuthAngle);
                     const elRad = THREE.MathUtils.degToRad(elevationAngle);
-                   
-                    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);
-                   
-                    fullFixture.position.set(lightX, lightY, lightZ);
-                    fullFixture.lookAt(CENTER);
-                   
-                    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));
-                   
+
+                    const x = BASE_DISTANCE * Math.sin(azRad) * Math.cos(elRad);
+                    const y = BASE_DISTANCE * Math.sin(elRad) + CENTER.y;
+                    const z = BASE_DISTANCE * Math.cos(azRad) * Math.cos(elRad);
+
+                    lightGroup.position.set(x, y, z);
+                    lightGroup.lookAt(CENTER);
+
+                    azimuthHandle.position.set(2.6 * Math.sin(azRad), 0.05, 2.6 * Math.cos(azRad));
+                    elevationHandle.position.set(-0.9, 2.0 * Math.sin(elRad) + CENTER.y, 2.0 * Math.cos(elRad));
+
                     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];
-                    }
+                    if (elSnap !== 0) prompt += ' ' + elevationNames[String(elSnap)];
+                    else prompt += ' the ' + azimuthNames[azSnap];
                     promptOverlay.textContent = prompt;
                 }
-               
+
                 function updatePropsAndTrigger() {
                     const azSnap = snapToNearest(azimuthAngle, azimuthSteps);
                     const elSnap = snapToNearest(elevationAngle, elevationSteps);
-                   
                     props.value = { azimuth: azSnap, elevation: elSnap };
                     trigger('change', props.value);
                 }
-               
+
                 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;
-                   
+
                     raycaster.setFromCamera(mouse, camera);
                     const intersects = raycaster.intersectObjects([azimuthHandle, elevationHandle]);
-                   
+
                     if (intersects.length > 0) {
                         isDragging = true;
                         dragTarget = intersects[0].object;
-                        dragTarget.material.emissiveIntensity = 1.0;
-                        dragTarget.scale.setScalar(1.3);
-                        dragStartMouse.copy(mouse);
+                        dragTarget.material.emissiveIntensity = 1.2;
+                        dragTarget.scale.setScalar(1.4);
                         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;
-                   
+
                     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));
+                            const intersect = new THREE.Vector3();
+                            if (raycaster.ray.intersectPlane(plane, intersect)) {
+                                azimuthAngle = THREE.MathUtils.radToDeg(Math.atan2(intersect.x, intersect.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);
+                            const plane = new THREE.Plane(new THREE.Vector3(1, 0, 0), -0.9);
+                            const intersect = new THREE.Vector3();
+                            if (raycaster.ray.intersectPlane(plane, intersect)) {
+                                const relY = intersect.y - CENTER.y;
+                                const relZ = intersect.z;
+                                elevationAngle = THREE.MathUtils.clamp(
+                                    THREE.MathUtils.radToDeg(Math.atan2(relY, relZ)), -90, 90
+                                );
                             }
                         }
                         updatePositions();
@@ -598,43 +527,43 @@ class LightingControl3D(gr.HTML):
                         raycaster.setFromCamera(mouse, camera);
                         const intersects = raycaster.intersectObjects([azimuthHandle, elevationHandle]);
                         [azimuthHandle, elevationHandle].forEach(h => {
-                            h.material.emissiveIntensity = 0.5;
+                            h.material.emissiveIntensity = 0.8;
                             h.scale.setScalar(1);
                         });
                         if (intersects.length > 0) {
-                            intersects[0].object.material.emissiveIntensity = 0.8;
-                            intersects[0].object.scale.setScalar(1.1);
+                            intersects[0].object.material.emissiveIntensity = 1.1;
+                            intersects[0].object.scale.setScalar(1.2);
                             canvas.style.cursor = 'grab';
                         } else {
                             canvas.style.cursor = 'default';
                         }
                     }
                 });
-               
+
                 const onMouseUp = () => {
                     if (dragTarget) {
-                        dragTarget.material.emissiveIntensity = 0.5;
+                        dragTarget.material.emissiveIntensity = 0.8;
                         dragTarget.scale.setScalar(1);
-                       
+
                         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 t = Math.min((Date.now() - startTime) / 240, 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();
@@ -645,80 +574,76 @@ class LightingControl3D(gr.HTML):
                     dragTarget = null;
                     canvas.style.cursor = 'default';
                 };
-               
+
                 canvas.addEventListener('mouseup', onMouseUp);
                 canvas.addEventListener('mouseleave', onMouseUp);
+
+                // Touch support (simplified)
                 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;
-                   
+
                     raycaster.setFromCamera(mouse, camera);
                     const intersects = raycaster.intersectObjects([azimuthHandle, elevationHandle]);
-                   
+
                     if (intersects.length > 0) {
                         isDragging = true;
                         dragTarget = intersects[0].object;
-                        dragTarget.material.emissiveIntensity = 1.0;
-                        dragTarget.scale.setScalar(1.3);
-                        dragStartMouse.copy(mouse);
+                        dragTarget.material.emissiveIntensity = 1.2;
+                        dragTarget.scale.setScalar(1.4);
                     }
                 }, { passive: false });
-               
+
                 canvas.addEventListener('touchmove', (e) => {
                     e.preventDefault();
+                    if (!isDragging) return;
                     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;
-                   
-                    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);
-                            }
+
+                    raycaster.setFromCamera(mouse, camera);
+
+                    if (dragTarget.userData.type === 'azimuth') {
+                        const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), -0.05);
+                        const intersect = new THREE.Vector3();
+                        if (raycaster.ray.intersectPlane(plane, intersect)) {
+                            azimuthAngle = THREE.MathUtils.radToDeg(Math.atan2(intersect.x, intersect.z));
+                            if (azimuthAngle < 0) azimuthAngle += 360;
+                        }
+                    } else if (dragTarget.userData.type === 'elevation') {
+                        const plane = new THREE.Plane(new THREE.Vector3(1, 0, 0), -0.9);
+                        const intersect = new THREE.Vector3();
+                        if (raycaster.ray.intersectPlane(plane, intersect)) {
+                            const relY = intersect.y - CENTER.y;
+                            const relZ = intersect.z;
+                            elevationAngle = THREE.MathUtils.clamp(
+                                THREE.MathUtils.radToDeg(Math.atan2(relY, relZ)), -90, 90
+                            );
                         }
-                        updatePositions();
                     }
+                    updatePositions();
                 }, { passive: false });
-               
-                canvas.addEventListener('touchend', (e) => {
-                    e.preventDefault();
-                    onMouseUp();
-                }, { passive: false });
-               
-                canvas.addEventListener('touchcancel', (e) => {
-                    e.preventDefault();
-                    onMouseUp();
-                }, { passive: false });
-               
+
+                canvas.addEventListener('touchend', onMouseUp, { passive: false });
+
                 updatePositions();
-               
+
                 function render() {
                     requestAnimationFrame(render);
                     renderer.render(scene, camera);
                 }
                 render();
-               
+
                 new ResizeObserver(() => {
                     camera.aspect = wrapper.clientWidth / wrapper.clientHeight;
                     camera.updateProjectionMatrix();
                     renderer.setSize(wrapper.clientWidth, wrapper.clientHeight);
                 }).observe(wrapper);
-               
+
                 wrapper._updateFromProps = (newVal) => {
                     if (newVal && typeof newVal === 'object') {
                         azimuthAngle = newVal.azimuth ?? azimuthAngle;
@@ -726,9 +651,9 @@ class LightingControl3D(gr.HTML):
                         updatePositions();
                     }
                 };
-               
+
                 wrapper._updateTexture = updateTextureFromUrl;
-               
+
                 let lastImageUrl = props.imageUrl;
                 let lastValue = JSON.stringify(props.value);
                 setInterval(() => {
@@ -745,13 +670,13 @@ class LightingControl3D(gr.HTML):
                             updatePositions();
                         }
                     }
-                }, 100);
+                }, 80);
             };
-           
+
             initScene();
         })();
         """
-       
+
         super().__init__(
             value=value,
             html_template=html_template,
@@ -759,6 +684,7 @@ class LightingControl3D(gr.HTML):
             imageUrl=imageUrl,
             **kwargs
         )
+
 css = '''
 #col-container { max-width: 1200px; margin: 0 auto; }
 .dark .progress-text { color: white !important; }
@@ -766,25 +692,26 @@ css = '''
 .slider-row { display: flex; gap: 10px; align-items: center; }
 #main-title h1 {font-size: 2.4em !important;}
 '''
+
 with gr.Blocks(css=css) as demo:
     gr.Markdown("# **Qwen-Image-Edit-2511-3D-Lighting-Control**", elem_id="main-title")
     gr.Markdown("Control lighting directions using the **3D viewport** or **sliders**. Use [Multi-Angle-Lighting](https://huggingface.co/dx8152/Qwen-Edit-2509-Multi-Angle-Lighting) LoRA for precise lighting control, paired with [Rapid-AIO-V19](https://huggingface.co/prithivMLmods/Qwen-Image-Edit-Rapid-AIO-V19).")
-   
+
     with gr.Row():
         with gr.Column(scale=1):
             image = gr.Image(label="Input Image", type="pil", height=300)
-           
+
             gr.Markdown("### 3D Lighting Control")
-            gr.Markdown("*Drag the colored handles: 🔵 Azimuth (Direction), 🔴 Elevation (Height)*")
-           
+            gr.Markdown("*Drag the colored handles: 🔵 Azimuth (cyan), 🔴 Elevation (magenta)*")
+
             lighting_3d = LightingControl3D(
                 value={"azimuth": 0, "elevation": 0},
                 elem_id="lighting-3d-control"
             )
             run_btn = gr.Button("Generate Image", variant="primary", size="lg")
-           
+
             gr.Markdown("### Slider Controls")
-           
+
             azimuth_slider = gr.Slider(
                 label="Azimuth (Horizontal Rotation)",
                 minimum=0,
@@ -793,7 +720,7 @@ with gr.Blocks(css=css) as demo:
                 value=0,
                 info="0°=front, 90°=right, 180°=rear, 270°=left"
             )
-           
+
             elevation_slider = gr.Slider(
                 label="Elevation (Vertical Angle)",
                 minimum=-90,
@@ -809,10 +736,10 @@ with gr.Blocks(css=css) as demo:
                     interactive=True,
                     lines=1,
                 )
-       
+
         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)
@@ -820,11 +747,11 @@ with gr.Blocks(css=css) as demo:
                 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)
-   
+
     def update_prompt_from_sliders(azimuth, elevation):
         prompt = build_lighting_prompt(azimuth, elevation)
         return prompt
-   
+
     def sync_3d_to_sliders(lighting_value):
         if lighting_value and isinstance(lighting_value, dict):
             az = lighting_value.get('azimuth', 0)
@@ -832,10 +759,10 @@ with gr.Blocks(css=css) as demo:
             prompt = build_lighting_prompt(az, el)
             return az, el, prompt
         return gr.update(), gr.update(), gr.update()
-   
+
     def sync_sliders_to_3d(azimuth, elevation):
         return {"azimuth": azimuth, "elevation": elevation}
-   
+
     def update_3d_image(image):
         if image is None:
             return gr.update(imageUrl=None)
@@ -846,33 +773,33 @@ with gr.Blocks(css=css) as demo:
         img_str = base64.b64encode(buffered.getvalue()).decode()
         data_url = f"data:image/png;base64,{img_str}"
         return gr.update(imageUrl=data_url)
-   
+
     for slider in [azimuth_slider, elevation_slider]:
         slider.change(
             fn=update_prompt_from_sliders,
             inputs=[azimuth_slider, elevation_slider],
             outputs=[prompt_preview]
         )
-   
+
     lighting_3d.change(
         fn=sync_3d_to_sliders,
         inputs=[lighting_3d],
         outputs=[azimuth_slider, elevation_slider, prompt_preview]
     )
-   
+
     for slider in [azimuth_slider, elevation_slider]:
         slider.release(
             fn=sync_sliders_to_3d,
             inputs=[azimuth_slider, elevation_slider],
             outputs=[lighting_3d]
         )
-   
+
     run_btn.click(
         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(
         fn=update_dimensions_on_upload,
         inputs=[image],
@@ -882,12 +809,12 @@ with gr.Blocks(css=css) as demo:
         inputs=[image],
         outputs=[lighting_3d]
     )
-   
+
     image.clear(
         fn=lambda: gr.update(imageUrl=None),
         outputs=[lighting_3d]
     )
-   
+
 if __name__ == "__main__":
     head = '<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>'
     css = '.fillable{max-width: 1200px !important}'