Update app.py

app.py

@@ -131,6 +131,17 @@ def snap_to_nearest(value, options):
     return min(options, key=lambda x: abs(x - value))
 
 def build_lighting_prompt(azimuth: float, elevation: float) -> str:
+    """
+    Build a lighting prompt from azimuth and elevation values.
+    
+    Args:
+        azimuth: Horizontal rotation in degrees (0-360)
+        elevation: Vertical angle in degrees (-90 to 90)
+    
+    Returns:
+        Formatted prompt string for the LoRA
+    """
+    # Snap to nearest valid values
     azimuth_snapped = snap_to_nearest(azimuth, list(AZIMUTH_MAP.keys()))
     elevation_snapped = snap_to_nearest(elevation, list(ELEVATION_MAP.keys()))
     
@@ -151,6 +162,9 @@ def infer_lighting_edit(
     height: int = 1024,
     width: int = 1024,
 ):
+    """
+    Edit the lighting of an image using Qwen Image Edit 2511 with multi-angle lighting LoRA.
+    """
     global loaded
     progress = gr.Progress(track_tqdm=True)
     
@@ -184,6 +198,7 @@ def infer_lighting_edit(
     return result, seed, prompt
 
 def update_dimensions_on_upload(image):
+    """Compute recommended dimensions preserving aspect ratio."""
     if image is None:
         return 1024, 1024
     original_width, original_height = image.size
@@ -202,30 +217,26 @@ def update_dimensions_on_upload(image):
 class LightingControl3D(gr.HTML):
     """
     A 3D lighting control component using Three.js.
-    Features a Fresnel Spotlight with Barn Doors design.
+    Outputs: { azimuth: number, elevation: number }
+    Accepts imageUrl prop to display user's uploaded image on the plane.
     """
     def __init__(self, value=None, imageUrl=None, **kwargs):
         if value is None:
             value = {"azimuth": 0, "elevation": 0}
         
         html_template = """
-        <div id="lighting-control-wrapper" style="width: 100%; height: 500px; position: relative; background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); border-radius: 16px; overflow: hidden; border: 2px solid #e94560;">
-            <div id="info-panel" style="position: absolute; top: 12px; left: 12px; background: rgba(15, 52, 96, 0.9); padding: 12px 16px; border-radius: 10px; font-family: 'Segoe UI', sans-serif; font-size: 12px; color: #eee; z-index: 10; border: 1px solid #e94560; backdrop-filter: blur(10px);">
-                <div style="font-weight: bold; margin-bottom: 8px; color: #e94560; font-size: 13px;">🎬 Studio Controls</div>
-                <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px;">
-                    <span style="width: 14px; height: 14px; background: linear-gradient(135deg, #feca57, #ff9f43); border-radius: 3px; display: inline-block; box-shadow: 0 0 8px #feca57;"></span>
-                    <span>Azimuth Ring</span>
+        <div id="lighting-control-wrapper" style="width: 100%; height: 500px; position: relative; background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%); border-radius: 12px; overflow: hidden; border: 2px solid #333;">
+            <div id="prompt-overlay" style="position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.85); padding: 10px 20px; border-radius: 10px; font-family: 'Segoe UI', sans-serif; font-size: 14px; color: #00ff88; white-space: nowrap; z-index: 10; border: 1px solid #00ff88; box-shadow: 0 0 15px rgba(0,255,136,0.3);"></div>
+            <div id="legend-overlay" style="position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.8); padding: 10px 15px; border-radius: 8px; font-family: 'Segoe UI', sans-serif; font-size: 12px; color: #fff; z-index: 10; border: 1px solid #444;">
+                <div style="display: flex; align-items: center; margin-bottom: 6px;">
+                    <span style="display: inline-block; width: 14px; height: 14px; background: #FFD700; border-radius: 50%; margin-right: 8px; box-shadow: 0 0 8px #FFD700;"></span>
+                    <span>Azimuth (Direction)</span>
                 </div>
-                <div style="display: flex; align-items: center; gap: 8px;">
-                    <span style="width: 14px; height: 14px; background: linear-gradient(135deg, #54a0ff, #2e86de); border-radius: 3px; display: inline-block; box-shadow: 0 0 8px #54a0ff;"></span>
-                    <span>Elevation Arc</span>
+                <div style="display: flex; align-items: center;">
+                    <span style="display: inline-block; width: 14px; height: 14px; background: #4169E1; border-radius: 50%; margin-right: 8px; box-shadow: 0 0 8px #4169E1;"></span>
+                    <span>Elevation (Height)</span>
                 </div>
             </div>
-            <div id="angle-display" style="position: absolute; top: 12px; right: 70px; background: rgba(15, 52, 96, 0.9); padding: 10px 14px; border-radius: 10px; font-family: 'Courier New', monospace; font-size: 12px; color: #54a0ff; z-index: 10; border: 1px solid #54a0ff; backdrop-filter: blur(10px);">
-                <div>Az: <span id="az-value">0°</span></div>
-                <div>El: <span id="el-value">0°</span></div>
-            </div>
-            <div id="prompt-overlay" style="position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, rgba(233, 69, 96, 0.9), rgba(15, 52, 96, 0.9)); padding: 12px 24px; border-radius: 25px; font-family: 'Segoe UI', sans-serif; font-size: 14px; font-weight: 500; color: #fff; white-space: nowrap; z-index: 10; box-shadow: 0 4px 20px rgba(233, 69, 96, 0.4); backdrop-filter: blur(10px);"></div>
         </div>
         """
         
@@ -233,89 +244,75 @@ class LightingControl3D(gr.HTML):
         (() => {
             const wrapper = element.querySelector('#lighting-control-wrapper');
             const promptOverlay = element.querySelector('#prompt-overlay');
-            const azDisplay = element.querySelector('#az-value');
-            const elDisplay = element.querySelector('#el-value');
             
+            // Wait for THREE to load
             const initScene = () => {
                 if (typeof THREE === 'undefined') {
                     setTimeout(initScene, 100);
                     return;
                 }
                 
-                // Scene setup with studio environment
+                // Scene setup
                 const scene = new THREE.Scene();
                 
-                // Gradient background using canvas
-                const canvas = document.createElement('canvas');
-                canvas.width = 512;
-                canvas.height = 512;
-                const ctx = canvas.getContext('2d');
-                const gradient = ctx.createRadialGradient(256, 256, 0, 256, 256, 400);
+                // Create gradient background
+                const canvas2 = document.createElement('canvas');
+                canvas2.width = 512;
+                canvas2.height = 512;
+                const ctx2 = canvas2.getContext('2d');
+                const gradient = ctx2.createLinearGradient(0, 0, 0, 512);
                 gradient.addColorStop(0, '#1a1a2e');
                 gradient.addColorStop(0.5, '#16213e');
-                gradient.addColorStop(1, '#0f3460');
-                ctx.fillStyle = gradient;
-                ctx.fillRect(0, 0, 512, 512);
-                const bgTexture = new THREE.CanvasTexture(canvas);
+                gradient.addColorStop(1, '#0f0f23');
+                ctx2.fillStyle = gradient;
+                ctx2.fillRect(0, 0, 512, 512);
+                const bgTexture = new THREE.CanvasTexture(canvas2);
                 scene.background = bgTexture;
                 
-                scene.fog = new THREE.FogExp2(0x0f3460, 0.08);
-                
-                const camera = new THREE.PerspectiveCamera(55, wrapper.clientWidth / wrapper.clientHeight, 0.1, 1000);
-                camera.position.set(5, 3.5, 5);
-                camera.lookAt(0, 0.8, 0);
+                const camera = new THREE.PerspectiveCamera(45, wrapper.clientWidth / wrapper.clientHeight, 0.1, 1000);
+                camera.position.set(5, 4, 5);
+                camera.lookAt(0, 0.5, 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;
                 renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-                renderer.toneMapping = THREE.ACESFilmicToneMapping;
-                renderer.toneMappingExposure = 1.0;
-                wrapper.insertBefore(renderer.domElement, wrapper.firstChild);
-                
-                // Ambient and fill lights
-                scene.add(new THREE.AmbientLight(0x404060, 0.4));
-                const fillLight = new THREE.DirectionalLight(0x6060ff, 0.2);
-                fillLight.position.set(-5, 3, -5);
-                scene.add(fillLight);
-                
-                // Studio floor with reflective material
-                const floorGeometry = new THREE.CircleGeometry(6, 64);
-                const floorMaterial = new THREE.MeshStandardMaterial({ 
-                    color: 0x1a1a2e,
-                    roughness: 0.3,
-                    metalness: 0.7,
-                    envMapIntensity: 0.5
-                });
-                const floor = new THREE.Mesh(floorGeometry, floorMaterial);
-                floor.rotation.x = -Math.PI / 2;
-                floor.receiveShadow = true;
-                scene.add(floor);
-                
-                // Decorative floor rings
-                for (let i = 1; i <= 4; i++) {
-                    const ring = new THREE.Mesh(
-                        new THREE.RingGeometry(i * 1.2 - 0.02, i * 1.2 + 0.02, 64),
-                        new THREE.MeshBasicMaterial({ color: 0xe94560, transparent: true, opacity: 0.3 })
-                    );
-                    ring.rotation.x = -Math.PI / 2;
-                    ring.position.y = 0.005;
-                    scene.add(ring);
+                wrapper.insertBefore(renderer.domElement, promptOverlay);
+                
+                // Ambient light
+                scene.add(new THREE.AmbientLight(0xffffff, 0.15));
+                
+                // Ground plane with checkerboard pattern
+                function createCheckerTexture() {
+                    const size = 512;
+                    const canvas = document.createElement('canvas');
+                    canvas.width = size;
+                    canvas.height = size;
+                    const ctx = canvas.getContext('2d');
+                    const tileSize = 32;
+                    for (let i = 0; i < size / tileSize; i++) {
+                        for (let j = 0; j < size / tileSize; j++) {
+                            ctx.fillStyle = (i + j) % 2 === 0 ? '#2a2a3a' : '#1a1a2a';
+                            ctx.fillRect(i * tileSize, j * tileSize, tileSize, tileSize);
+                        }
+                    }
+                    return new THREE.CanvasTexture(canvas);
                 }
                 
-                // Shadow plane
-                const shadowPlane = new THREE.Mesh(
-                    new THREE.CircleGeometry(6, 64),
-                    new THREE.ShadowMaterial({ opacity: 0.5 })
-                );
-                shadowPlane.rotation.x = -Math.PI / 2;
-                shadowPlane.position.y = 0.002;
-                shadowPlane.receiveShadow = true;
-                scene.add(shadowPlane);
+                const groundMat = new THREE.MeshStandardMaterial({
+                    map: createCheckerTexture(),
+                    roughness: 0.8,
+                    metalness: 0.2
+                });
+                const ground = new THREE.Mesh(new THREE.PlaneGeometry(12, 12), groundMat);
+                ground.rotation.x = -Math.PI / 2;
+                ground.position.y = 0;
+                ground.receiveShadow = true;
+                scene.add(ground);
                 
                 // Constants
-                const CENTER = new THREE.Vector3(0, 0.8, 0);
+                const CENTER = new THREE.Vector3(0, 0.75, 0);
                 const BASE_DISTANCE = 2.8;
                 const AZIMUTH_RADIUS = 2.6;
                 const ELEVATION_RADIUS = 2.0;
@@ -324,6 +321,7 @@ class LightingControl3D(gr.HTML):
                 let azimuthAngle = props.value?.azimuth || 0;
                 let elevationAngle = props.value?.elevation || 0;
                 
+                // Mappings
                 const azimuthSteps = [0, 45, 90, 135, 180, 225, 270, 315];
                 const elevationSteps = [-90, 0, 90];
                 const azimuthNames = {
@@ -337,38 +335,45 @@ class LightingControl3D(gr.HTML):
                     return steps.reduce((prev, curr) => Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);
                 }
                 
-                // Placeholder texture
+                // Create placeholder texture
                 function createPlaceholderTexture() {
-                    const c = document.createElement('canvas');
-                    c.width = 256;
-                    c.height = 256;
-                    const ctx = c.getContext('2d');
+                    const canvas = document.createElement('canvas');
+                    canvas.width = 256;
+                    canvas.height = 256;
+                    const ctx = canvas.getContext('2d');
                     
-                    const grad = ctx.createLinearGradient(0, 0, 256, 256);
-                    grad.addColorStop(0, '#16213e');
-                    grad.addColorStop(1, '#0f3460');
-                    ctx.fillStyle = grad;
+                    // Background
+                    ctx.fillStyle = '#2a2a3a';
                     ctx.fillRect(0, 0, 256, 256);
                     
-                    // Border
-                    ctx.strokeStyle = '#e94560';
-                    ctx.lineWidth = 6;
-                    ctx.strokeRect(8, 8, 240, 240);
+                    // Grid pattern
+                    ctx.strokeStyle = '#3a3a4a';
+                    ctx.lineWidth = 1;
+                    for (let i = 0; i < 256; i += 32) {
+                        ctx.beginPath();
+                        ctx.moveTo(i, 0);
+                        ctx.lineTo(i, 256);
+                        ctx.stroke();
+                        ctx.beginPath();
+                        ctx.moveTo(0, i);
+                        ctx.lineTo(256, i);
+                        ctx.stroke();
+                    }
                     
-                    // Icon
-                    ctx.fillStyle = '#e94560';
-                    ctx.font = 'bold 60px Arial';
+                    // Upload icon
+                    ctx.fillStyle = '#666';
+                    ctx.font = '48px Arial';
                     ctx.textAlign = 'center';
-                    ctx.fillText('📷', 128, 130);
+                    ctx.fillText('📷', 128, 120);
                     
-                    ctx.fillStyle = '#aaa';
-                    ctx.font = '14px Arial';
-                    ctx.fillText('Drop Image Here', 128, 180);
+                    ctx.fillStyle = '#888';
+                    ctx.font = '16px Arial';
+                    ctx.fillText('Upload Image', 128, 160);
                     
-                    return new THREE.CanvasTexture(c);
+                    return new THREE.CanvasTexture(canvas);
                 }
                 
-                // Target image with frame
+                // Target image plane with frame
                 let currentTexture = createPlaceholderTexture();
                 const planeMaterial = new THREE.MeshStandardMaterial({ 
                     map: currentTexture, 
@@ -377,65 +382,42 @@ class LightingControl3D(gr.HTML):
                     metalness: 0.1 
                 });
                 
-                // Image stand/easel
-                const standGroup = new THREE.Group();
+                // Create frame group
+                const targetGroup = new THREE.Group();
                 
                 let targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(1.4, 1.4), planeMaterial);
-                targetPlane.position.set(0, 0, 0.02);
                 targetPlane.receiveShadow = true;
-                targetPlane.castShadow = true;
-                standGroup.add(targetPlane);
-                
-                // Ornate frame
-                const frameShape = new THREE.Shape();
-                const fw = 0.78, fh = 0.78, ft = 0.08;
-                frameShape.moveTo(-fw, -fh);
-                frameShape.lineTo(fw, -fh);
-                frameShape.lineTo(fw, fh);
-                frameShape.lineTo(-fw, fh);
-                frameShape.lineTo(-fw, -fh);
-                
-                const hole = new THREE.Path();
-                hole.moveTo(-fw + ft, -fh + ft);
-                hole.lineTo(fw - ft, -fh + ft);
-                hole.lineTo(fw - ft, fh - ft);
-                hole.lineTo(-fw + ft, fh - ft);
-                hole.lineTo(-fw + ft, -fh + ft);
-                frameShape.holes.push(hole);
-                
-                const frameGeometry = new THREE.ExtrudeGeometry(frameShape, { depth: 0.06, bevelEnabled: true, bevelThickness: 0.01, bevelSize: 0.01 });
-                const frameMaterial = new THREE.MeshStandardMaterial({ 
-                    color: 0xc9a227, 
-                    roughness: 0.3, 
-                    metalness: 0.8 
-                });
-                const frame = new THREE.Mesh(frameGeometry, frameMaterial);
-                frame.rotation.x = 0;
-                frame.position.z = -0.03;
-                standGroup.add(frame);
+                targetGroup.add(targetPlane);
+                
+                // Frame around the image
+                const frameMat = new THREE.MeshStandardMaterial({ color: 0x333333, roughness: 0.5, metalness: 0.8 });
+                const frameThickness = 0.05;
+                const frameDepth = 0.08;
                 
-                // Easel legs
-                const legMat = new THREE.MeshStandardMaterial({ color: 0x4a3728, roughness: 0.7 });
-                const legGeo = new THREE.CylinderGeometry(0.03, 0.04, 1.6, 8);
+                // Top frame
+                const frameTop = new THREE.Mesh(new THREE.BoxGeometry(1.5, frameThickness, frameDepth), frameMat);
+                frameTop.position.set(0, 0.725, 0);
+                targetGroup.add(frameTop);
                 
-                const leg1 = new THREE.Mesh(legGeo, legMat);
-                leg1.position.set(-0.4, -0.8, -0.15);
-                leg1.rotation.x = 0.15;
-                standGroup.add(leg1);
+                // Bottom frame
+                const frameBottom = new THREE.Mesh(new THREE.BoxGeometry(1.5, frameThickness, frameDepth), frameMat);
+                frameBottom.position.set(0, -0.725, 0);
+                targetGroup.add(frameBottom);
                 
-                const leg2 = new THREE.Mesh(legGeo, legMat);
-                leg2.position.set(0.4, -0.8, -0.15);
-                leg2.rotation.x = 0.15;
-                standGroup.add(leg2);
+                // Left frame
+                const frameLeft = new THREE.Mesh(new THREE.BoxGeometry(frameThickness, 1.5, frameDepth), frameMat);
+                frameLeft.position.set(-0.725, 0, 0);
+                targetGroup.add(frameLeft);
                 
-                const leg3 = new THREE.Mesh(legGeo, legMat);
-                leg3.position.set(0, -0.8, 0.25);
-                leg3.rotation.x = -0.2;
-                standGroup.add(leg3);
+                // Right frame
+                const frameRight = new THREE.Mesh(new THREE.BoxGeometry(frameThickness, 1.5, frameDepth), frameMat);
+                frameRight.position.set(0.725, 0, 0);
+                targetGroup.add(frameRight);
                 
-                standGroup.position.copy(CENTER);
-                scene.add(standGroup);
+                targetGroup.position.copy(CENTER);
+                scene.add(targetGroup);
                 
+                // Function to update texture from image URL
                 function updateTextureFromUrl(url) {
                     if (!url) {
                         planeMaterial.map = createPlaceholderTexture();
@@ -451,159 +433,183 @@ class LightingControl3D(gr.HTML):
                         planeMaterial.map = texture;
                         planeMaterial.needsUpdate = true;
                         
+                        // Adjust plane aspect ratio
                         const img = texture.image;
                         if (img && img.width && img.height) {
                             const aspect = img.width / img.height;
                             const maxSize = 1.4;
-                            let pw, ph;
-                            if (aspect > 1) { pw = maxSize; ph = maxSize / aspect; }
-                            else { ph = maxSize; pw = maxSize * aspect; }
+                            let planeWidth, planeHeight;
+                            if (aspect > 1) {
+                                planeWidth = maxSize;
+                                planeHeight = maxSize / aspect;
+                            } else {
+                                planeHeight = maxSize;
+                                planeWidth = maxSize * aspect;
+                            }
                             
-                            standGroup.remove(targetPlane);
-                            targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(pw, ph), planeMaterial);
-                            targetPlane.position.set(0, 0, 0.02);
+                            targetGroup.remove(targetPlane);
+                            targetPlane = new THREE.Mesh(
+                                new THREE.PlaneGeometry(planeWidth, planeHeight),
+                                planeMaterial
+                            );
                             targetPlane.receiveShadow = true;
-                            targetPlane.castShadow = true;
-                            standGroup.add(targetPlane);
+                            targetGroup.add(targetPlane);
                         }
+                    }, undefined, (err) => {
+                        console.error('Failed to load texture:', err);
                     });
                 }
                 
-                if (props.imageUrl) updateTextureFromUrl(props.imageUrl);
+                if (props.imageUrl) {
+                    updateTextureFromUrl(props.imageUrl);
+                }
                 
-                // =============================================
-                // FRESNEL SPOTLIGHT WITH BARN DOORS
-                // =============================================
+                // ========== SOFTBOX LIGHT ==========
                 const lightGroup = new THREE.Group();
                 
-                // Main housing (cylindrical body)
-                const housingMat = new THREE.MeshStandardMaterial({ 
-                    color: 0x2d2d2d, 
-                    roughness: 0.4, 
-                    metalness: 0.8 
-                });
-                
-                // Body
-                const body = new THREE.Mesh(
-                    new THREE.CylinderGeometry(0.25, 0.3, 0.5, 32),
-                    housingMat
-                );
-                body.rotation.x = Math.PI / 2;
-                lightGroup.add(body);
-                
-                // Front ring (chrome)
-                const ringMat = new THREE.MeshStandardMaterial({ 
-                    color: 0xcccccc, 
-                    roughness: 0.2, 
-                    metalness: 0.9 
-                });
-                const frontRing = new THREE.Mesh(
-                    new THREE.TorusGeometry(0.28, 0.025, 16, 32),
-                    ringMat
-                );
-                frontRing.position.z = -0.25;
-                lightGroup.add(frontRing);
+                // Softbox outer frame (RED)
+                const softboxDepth = 0.4;
+                const softboxWidth = 0.7;
+                const softboxHeight = 0.9;
                 
-                // Fresnel lens (glass-like)
-                const lensMat = new THREE.MeshStandardMaterial({
-                    color: 0xffffff,
-                    emissive: 0xffffee,
-                    emissiveIntensity: 3.0,
-                    roughness: 0.1,
-                    metalness: 0,
-                    transparent: true,
-                    opacity: 0.9
+                // Back panel (red)
+                const backPanelMat = new THREE.MeshStandardMaterial({ 
+                    color: 0xcc2222, 
+                    roughness: 0.3, 
+                    metalness: 0.6 
                 });
-                const lens = new THREE.Mesh(
-                    new THREE.CircleGeometry(0.22, 32),
-                    lensMat
+                const backPanel = new THREE.Mesh(
+                    new THREE.BoxGeometry(softboxWidth, softboxHeight, 0.05),
+                    backPanelMat
                 );
-                lens.position.z = -0.26;
-                lightGroup.add(lens);
-                
-                // Fresnel rings on lens
-                for (let i = 1; i <= 4; i++) {
-                    const fresnelRing = new THREE.Mesh(
-                        new THREE.RingGeometry(i * 0.045, i * 0.045 + 0.008, 32),
-                        new THREE.MeshBasicMaterial({ color: 0xffffcc, transparent: true, opacity: 0.5 })
-                    );
-                    fresnelRing.position.z = -0.261;
-                    lightGroup.add(fresnelRing);
-                }
+                backPanel.position.z = -softboxDepth / 2;
+                lightGroup.add(backPanel);
                 
-                // Barn doors (4 flaps)
-                const barnDoorMat = new THREE.MeshStandardMaterial({ 
-                    color: 0x1a1a1a, 
-                    roughness: 0.6, 
+                // Side panels (red with slight taper effect)
+                const sideMat = new THREE.MeshStandardMaterial({ 
+                    color: 0xaa1111, 
+                    roughness: 0.4, 
                     metalness: 0.5,
                     side: THREE.DoubleSide
                 });
                 
-                const doorWidth = 0.35, doorHeight = 0.25;
-                const doorPositions = [
-                    { pos: [0, 0.32, -0.15], rot: [-0.4, 0, 0] },  // Top
-                    { pos: [0, -0.32, -0.15], rot: [0.4, 0, 0] },  // Bottom
-                    { pos: [0.32, 0, -0.15], rot: [0, 0, 0.4] },   // Right
-                    { pos: [-0.32, 0, -0.15], rot: [0, 0, -0.4] }  // Left
-                ];
-                
-                doorPositions.forEach((d, i) => {
-                    const isVertical = i < 2;
-                    const door = new THREE.Mesh(
-                        new THREE.BoxGeometry(isVertical ? doorWidth : 0.02, isVertical ? 0.02 : doorHeight, 0.2),
-                        barnDoorMat
-                    );
-                    door.position.set(...d.pos);
-                    door.rotation.set(...d.rot);
-                    door.castShadow = true;
-                    lightGroup.add(door);
-                });
-                
-                // Yoke mount
-                const yokeMat = new THREE.MeshStandardMaterial({ 
-                    color: 0x444444, 
-                    roughness: 0.5, 
-                    metalness: 0.7 
+                // Left side
+                const leftSideGeo = new THREE.BufferGeometry();
+                const leftVerts = new Float32Array([
+                    -softboxWidth/2, -softboxHeight/2, -softboxDepth/2,
+                    -softboxWidth/2, softboxHeight/2, -softboxDepth/2,
+                    -softboxWidth/2 - 0.1, softboxHeight/2 + 0.1, softboxDepth/2,
+                    -softboxWidth/2 - 0.1, -softboxHeight/2 - 0.1, softboxDepth/2,
+                ]);
+                const leftIndices = [0, 1, 2, 0, 2, 3];
+                leftSideGeo.setAttribute('position', new THREE.BufferAttribute(leftVerts, 3));
+                leftSideGeo.setIndex(leftIndices);
+                leftSideGeo.computeVertexNormals();
+                const leftSide = new THREE.Mesh(leftSideGeo, sideMat);
+                lightGroup.add(leftSide);
+                
+                // Right side
+                const rightSideGeo = new THREE.BufferGeometry();
+                const rightVerts = new Float32Array([
+                    softboxWidth/2, -softboxHeight/2, -softboxDepth/2,
+                    softboxWidth/2, softboxHeight/2, -softboxDepth/2,
+                    softboxWidth/2 + 0.1, softboxHeight/2 + 0.1, softboxDepth/2,
+                    softboxWidth/2 + 0.1, -softboxHeight/2 - 0.1, softboxDepth/2,
+                ]);
+                const rightIndices = [0, 2, 1, 0, 3, 2];
+                rightSideGeo.setAttribute('position', new THREE.BufferAttribute(rightVerts, 3));
+                rightSideGeo.setIndex(rightIndices);
+                rightSideGeo.computeVertexNormals();
+                const rightSide = new THREE.Mesh(rightSideGeo, sideMat);
+                lightGroup.add(rightSide);
+                
+                // Top side
+                const topSideGeo = new THREE.BufferGeometry();
+                const topVerts = new Float32Array([
+                    -softboxWidth/2, softboxHeight/2, -softboxDepth/2,
+                    softboxWidth/2, softboxHeight/2, -softboxDepth/2,
+                    softboxWidth/2 + 0.1, softboxHeight/2 + 0.1, softboxDepth/2,
+                    -softboxWidth/2 - 0.1, softboxHeight/2 + 0.1, softboxDepth/2,
+                ]);
+                const topIndices = [0, 1, 2, 0, 2, 3];
+                topSideGeo.setAttribute('position', new THREE.BufferAttribute(topVerts, 3));
+                topSideGeo.setIndex(topIndices);
+                topSideGeo.computeVertexNormals();
+                const topSide = new THREE.Mesh(topSideGeo, sideMat);
+                lightGroup.add(topSide);
+                
+                // Bottom side
+                const bottomSideGeo = new THREE.BufferGeometry();
+                const bottomVerts = new Float32Array([
+                    -softboxWidth/2, -softboxHeight/2, -softboxDepth/2,
+                    softboxWidth/2, -softboxHeight/2, -softboxDepth/2,
+                    softboxWidth/2 + 0.1, -softboxHeight/2 - 0.1, softboxDepth/2,
+                    -softboxWidth/2 - 0.1, -softboxHeight/2 - 0.1, softboxDepth/2,
+                ]);
+                const bottomIndices = [0, 2, 1, 0, 3, 2];
+                bottomSideGeo.setAttribute('position', new THREE.BufferAttribute(bottomVerts, 3));
+                bottomSideGeo.setIndex(bottomIndices);
+                bottomSideGeo.computeVertexNormals();
+                const bottomSide = new THREE.Mesh(bottomSideGeo, sideMat);
+                lightGroup.add(bottomSide);
+                
+                // Front diffuser panel (WHITE, glowing)
+                const diffuserMat = new THREE.MeshStandardMaterial({
+                    color: 0xffffff,
+                    emissive: 0xffffff,
+                    emissiveIntensity: 1.5,
+                    roughness: 0.9,
+                    metalness: 0,
+                    transparent: true,
+                    opacity: 0.95
                 });
-                
-                const yokeArm1 = new THREE.Mesh(
-                    new THREE.BoxGeometry(0.04, 0.5, 0.04),
-                    yokeMat
+                const diffuserPanel = new THREE.Mesh(
+                    new THREE.PlaneGeometry(softboxWidth + 0.2, softboxHeight + 0.2),
+                    diffuserMat
                 );
-                yokeArm1.position.set(-0.35, 0, 0.1);
-                lightGroup.add(yokeArm1);
-                
-                const yokeArm2 = new THREE.Mesh(
-                    new THREE.BoxGeometry(0.04, 0.5, 0.04),
-                    yokeMat
-                );
-                yokeArm2.position.set(0.35, 0, 0.1);
-                lightGroup.add(yokeArm2);
-                
-                const yokeTop = new THREE.Mesh(
-                    new THREE.BoxGeometry(0.74, 0.04, 0.04),
-                    yokeMat
-                );
-                yokeTop.position.set(0, 0.25, 0.1);
-                lightGroup.add(yokeTop);
-                
-                // Hanging mount
-                const mountPole = new THREE.Mesh(
-                    new THREE.CylinderGeometry(0.02, 0.02, 0.3, 8),
-                    yokeMat
-                );
-                mountPole.position.set(0, 0.4, 0.1);
-                lightGroup.add(mountPole);
-                
-                // SpotLight
-                const spotLight = new THREE.SpotLight(0xffffee, 20, 15, Math.PI / 5, 0.3, 1);
-                spotLight.position.set(0, 0, -0.3);
+                diffuserPanel.position.z = softboxDepth / 2;
+                lightGroup.add(diffuserPanel);
+                
+                // Frame around diffuser (red trim)
+                const trimMat = new THREE.MeshStandardMaterial({ color: 0xdd3333, roughness: 0.3, metalness: 0.7 });
+                const trimThickness = 0.04;
+                
+                const trimTop = new THREE.Mesh(new THREE.BoxGeometry(softboxWidth + 0.28, trimThickness, 0.06), trimMat);
+                trimTop.position.set(0, (softboxHeight + 0.2) / 2 + trimThickness/2, softboxDepth/2);
+                lightGroup.add(trimTop);
+                
+                const trimBottom = new THREE.Mesh(new THREE.BoxGeometry(softboxWidth + 0.28, trimThickness, 0.06), trimMat);
+                trimBottom.position.set(0, -(softboxHeight + 0.2) / 2 - trimThickness/2, softboxDepth/2);
+                lightGroup.add(trimBottom);
+                
+                const trimLeft = new THREE.Mesh(new THREE.BoxGeometry(trimThickness, softboxHeight + 0.28, 0.06), trimMat);
+                trimLeft.position.set(-(softboxWidth + 0.2) / 2 - trimThickness/2, 0, softboxDepth/2);
+                lightGroup.add(trimLeft);
+                
+                const trimRight = new THREE.Mesh(new THREE.BoxGeometry(trimThickness, softboxHeight + 0.28, 0.06), trimMat);
+                trimRight.position.set((softboxWidth + 0.2) / 2 + trimThickness/2, 0, softboxDepth/2);
+                lightGroup.add(trimRight);
+                
+                // Stand/mount pole
+                const poleMat = new THREE.MeshStandardMaterial({ color: 0x222222, roughness: 0.4, metalness: 0.8 });
+                const pole = new THREE.Mesh(new THREE.CylinderGeometry(0.03, 0.03, 0.5, 8), poleMat);
+                pole.position.set(0, -softboxHeight/2 - 0.25, 0);
+                lightGroup.add(pole);
+                
+                // Mount bracket
+                const bracket = new THREE.Mesh(new THREE.BoxGeometry(0.15, 0.08, 0.15), poleMat);
+                bracket.position.set(0, -softboxHeight/2 - 0.04, 0);
+                lightGroup.add(bracket);
+                
+                // Spotlight (WHITE light)
+                const spotLight = new THREE.SpotLight(0xffffff, 15, 12, Math.PI / 4, 0.8, 1);
+                spotLight.position.set(0, 0, softboxDepth / 2 + 0.1);
                 spotLight.castShadow = true;
-                spotLight.shadow.mapSize.width = 2048;
-                spotLight.shadow.mapSize.height = 2048;
+                spotLight.shadow.mapSize.width = 1024;
+                spotLight.shadow.mapSize.height = 1024;
                 spotLight.shadow.camera.near = 0.5;
-                spotLight.shadow.camera.far = 20;
-                spotLight.shadow.bias = -0.001;
+                spotLight.shadow.camera.far = 500;
+                spotLight.shadow.bias = -0.005;
                 lightGroup.add(spotLight);
                 
                 const lightTarget = new THREE.Object3D();
@@ -613,262 +619,131 @@ class LightingControl3D(gr.HTML):
                 
                 scene.add(lightGroup);
                 
-                // =============================================
-                // AZIMUTH CONTROL - Golden compass ring
-                // =============================================
-                const azimuthGroup = new THREE.Group();
-                
-                // Main ring with glow
-                const azRingMat = new THREE.MeshStandardMaterial({ 
-                    color: 0xfeca57, 
-                    emissive: 0xff9f43, 
-                    emissiveIntensity: 0.5,
-                    roughness: 0.2,
-                    metalness: 0.8
+                // ========== YELLOW: Azimuth ring ==========
+                const azimuthRingMat = new THREE.MeshStandardMaterial({ 
+                    color: 0xFFD700, 
+                    emissive: 0xFFD700, 
+                    emissiveIntensity: 0.4,
+                    roughness: 0.3,
+                    metalness: 0.7
                 });
-                
                 const azimuthRing = new THREE.Mesh(
-                    new THREE.TorusGeometry(AZIMUTH_RADIUS, 0.045, 24, 128),
-                    azRingMat
+                    new THREE.TorusGeometry(AZIMUTH_RADIUS, 0.05, 16, 64),
+                    azimuthRingMat
                 );
-                azimuthGroup.add(azimuthRing);
+                azimuthRing.rotation.x = Math.PI / 2;
+                azimuthRing.position.y = 0.02;
+                scene.add(azimuthRing);
                 
-                // Direction markers with labels
-                azimuthSteps.forEach((angle, idx) => {
+                // Direction markers on azimuth ring
+                const markerMat = new THREE.MeshStandardMaterial({ color: 0xFFD700, emissive: 0xFFD700, emissiveIntensity: 0.3 });
+                azimuthSteps.forEach(angle => {
                     const rad = THREE.MathUtils.degToRad(angle);
-                    const x = AZIMUTH_RADIUS * Math.sin(rad);
-                    const z = AZIMUTH_RADIUS * Math.cos(rad);
-                    
-                    // Diamond marker
-                    const marker = new THREE.Mesh(
-                        new THREE.OctahedronGeometry(0.08, 0),
-                        new THREE.MeshStandardMaterial({ 
-                            color: 0xfeca57, 
-                            emissive: 0xff9f43, 
-                            emissiveIntensity: 0.3,
-                            roughness: 0.2,
-                            metalness: 0.8
-                        })
-                    );
-                    marker.position.set(x, 0, z);
+                    const marker = new THREE.Mesh(new THREE.BoxGeometry(0.08, 0.02, 0.15), markerMat);
+                    marker.position.set(AZIMUTH_RADIUS * Math.sin(rad), 0.02, AZIMUTH_RADIUS * Math.cos(rad));
                     marker.rotation.y = -rad;
-                    azimuthGroup.add(marker);
-                    
-                    // Tick lines pointing to center
-                    const tickGeo = new THREE.BufferGeometry().setFromPoints([
-                        new THREE.Vector3(x * 0.92, 0, z * 0.92),
-                        new THREE.Vector3(x * 0.85, 0, z * 0.85)
-                    ]);
-                    const tick = new THREE.Line(tickGeo, new THREE.LineBasicMaterial({ color: 0xfeca57, transparent: true, opacity: 0.6 }));
-                    azimuthGroup.add(tick);
+                    scene.add(marker);
                 });
                 
-                azimuthGroup.rotation.x = Math.PI / 2;
-                azimuthGroup.position.y = 0.08;
-                scene.add(azimuthGroup);
-                
-                // Azimuth handle - Arrow/pointer shape
-                const azHandleGroup = new THREE.Group();
-                
-                const azPointer = new THREE.Mesh(
-                    new THREE.ConeGeometry(0.12, 0.25, 4),
+                const azimuthHandle = new THREE.Mesh(
+                    new THREE.SphereGeometry(0.2, 24, 24),
                     new THREE.MeshStandardMaterial({ 
-                        color: 0xfeca57, 
-                        emissive: 0xff9f43, 
-                        emissiveIntensity: 0.7,
-                        roughness: 0.15,
-                        metalness: 0.9
-                    })
-                );
-                azPointer.rotation.x = Math.PI / 2;
-                azPointer.rotation.z = Math.PI / 4;
-                azHandleGroup.add(azPointer);
-                
-                const azSphere = new THREE.Mesh(
-                    new THREE.SphereGeometry(0.1, 16, 16),
-                    new THREE.MeshStandardMaterial({ 
-                        color: 0xffffff, 
-                        emissive: 0xfeca57, 
-                        emissiveIntensity: 0.5,
-                        roughness: 0.1,
-                        metalness: 0.9
+                        color: 0xFFD700, 
+                        emissive: 0xFFD700, 
+                        emissiveIntensity: 0.6,
+                        roughness: 0.2,
+                        metalness: 0.8
                     })
                 );
-                azSphere.position.z = 0.15;
-                azHandleGroup.add(azSphere);
-                
-                azHandleGroup.userData.type = 'azimuth';
-                scene.add(azHandleGroup);
+                azimuthHandle.userData.type = 'azimuth';
+                scene.add(azimuthHandle);
                 
-                // =============================================
-                // ELEVATION CONTROL - Blue arc with slider
-                // =============================================
-                const elevationGroup = new THREE.Group();
-                
-                // Main arc
+                // ========== BLUE: Elevation arc ==========
                 const arcPoints = [];
-                for (let i = 0; i <= 64; i++) {
-                    const angle = THREE.MathUtils.degToRad(-90 + (180 * i / 64));
+                for (let i = 0; i <= 48; i++) {
+                    const angle = THREE.MathUtils.degToRad(-90 + (180 * i / 48));
                     arcPoints.push(new THREE.Vector3(
-                        0, 
-                        ELEVATION_RADIUS * Math.sin(angle), 
+                        -AZIMUTH_RADIUS - 0.3, 
+                        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, 64, 0.04, 16, false),
+                    new THREE.TubeGeometry(arcCurve, 48, 0.05, 12, false),
                     new THREE.MeshStandardMaterial({ 
-                        color: 0x54a0ff, 
-                        emissive: 0x2e86de, 
-                        emissiveIntensity: 0.5,
-                        roughness: 0.2,
-                        metalness: 0.8
+                        color: 0x4169E1, 
+                        emissive: 0x4169E1, 
+                        emissiveIntensity: 0.4,
+                        roughness: 0.3,
+                        metalness: 0.7
                     })
                 );
-                elevationGroup.add(elevationArc);
+                scene.add(elevationArc);
                 
-                // Tick marks and labels
+                // Elevation markers
+                const elevMarkerMat = new THREE.MeshStandardMaterial({ color: 0x4169E1, emissive: 0x4169E1, emissiveIntensity: 0.3 });
                 elevationSteps.forEach(angle => {
                     const rad = THREE.MathUtils.degToRad(angle);
-                    const y = ELEVATION_RADIUS * Math.sin(rad);
-                    const z = ELEVATION_RADIUS * Math.cos(rad);
-                    
-                    // Cube marker
-                    const marker = new THREE.Mesh(
-                        new THREE.BoxGeometry(0.12, 0.12, 0.12),
-                        new THREE.MeshStandardMaterial({ 
-                            color: 0x54a0ff, 
-                            emissive: 0x2e86de, 
-                            emissiveIntensity: 0.4,
-                            roughness: 0.2,
-                            metalness: 0.8
-                        })
+                    const marker = new THREE.Mesh(new THREE.BoxGeometry(0.12, 0.08, 0.08), elevMarkerMat);
+                    marker.position.set(
+                        -AZIMUTH_RADIUS - 0.3,
+                        ELEVATION_RADIUS * Math.sin(rad) + CENTER.y,
+                        ELEVATION_RADIUS * Math.cos(rad)
                     );
-                    marker.position.set(0, y, z);
-                    marker.rotation.x = rad;
-                    marker.rotation.y = Math.PI / 4;
-                    elevationGroup.add(marker);
+                    scene.add(marker);
                 });
                 
-                // Support pole
-                const supportPole = new THREE.Mesh(
-                    new THREE.CylinderGeometry(0.025, 0.025, ELEVATION_RADIUS * 2.2, 8),
-                    new THREE.MeshStandardMaterial({ color: 0x333344, roughness: 0.5, metalness: 0.6 })
-                );
-                supportPole.position.set(0, CENTER.y, 0);
-                elevationGroup.add(supportPole);
-                
-                elevationGroup.position.set(-1.0, CENTER.y, 0);
-                scene.add(elevationGroup);
-                
-                // Elevation handle - Spherical slider
-                const elHandleGroup = new THREE.Group();
-                
-                const elSphere = new THREE.Mesh(
-                    new THREE.SphereGeometry(0.14, 24, 24),
+                const elevationHandle = new THREE.Mesh(
+                    new THREE.SphereGeometry(0.2, 24, 24),
                     new THREE.MeshStandardMaterial({ 
-                        color: 0x54a0ff, 
-                        emissive: 0x2e86de, 
-                        emissiveIntensity: 0.7,
-                        roughness: 0.15,
-                        metalness: 0.9
+                        color: 0x4169E1, 
+                        emissive: 0x4169E1, 
+                        emissiveIntensity: 0.6,
+                        roughness: 0.2,
+                        metalness: 0.8
                     })
                 );
-                elHandleGroup.add(elSphere);
+                elevationHandle.userData.type = 'elevation';
+                scene.add(elevationHandle);
                 
-                const elRing = new THREE.Mesh(
-                    new THREE.TorusGeometry(0.18, 0.025, 16, 32),
-                    new THREE.MeshStandardMaterial({ 
-                        color: 0xffffff, 
-                        emissive: 0x54a0ff, 
-                        emissiveIntensity: 0.4,
-                        roughness: 0.1,
-                        metalness: 0.9
-                    })
-                );
-                elRing.rotation.x = Math.PI / 2;
-                elHandleGroup.add(elRing);
-                
-                elHandleGroup.userData.type = 'elevation';
-                scene.add(elHandleGroup);
-                
-                // =============================================
-                // RESET BUTTON - Styled button
-                // =============================================
-                const resetBtn = document.createElement('button');
-                resetBtn.innerHTML = `
-                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-                        <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
-                        <path d="M21 3v5h-5"/>
-                        <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
-                        <path d="M3 21v-5h5"/>
-                    </svg>
-                    <span>Reset Position</span>
-                `;
-                resetBtn.style.cssText = `
+                // ========== REFRESH BUTTON ==========
+                const refreshBtn = document.createElement('button');
+                refreshBtn.innerHTML = '🔄 Reset';
+                refreshBtn.style.cssText = `
                     position: absolute;
-                    top: 12px;
-                    right: 12px;
-                    background: linear-gradient(135deg, #e94560 0%, #c62a47 100%);
+                    top: 10px;
+                    right: 10px;
+                    background: linear-gradient(135deg, #ff4500, #cc3700);
                     color: white;
                     border: none;
-                    padding: 10px 16px;
+                    padding: 10px 18px;
                     border-radius: 8px;
                     cursor: pointer;
                     z-index: 10;
-                    font-size: 13px;
+                    font-size: 14px;
                     font-weight: 600;
                     font-family: 'Segoe UI', sans-serif;
-                    display: flex;
-                    align-items: center;
-                    gap: 8px;
-                    box-shadow: 0 4px 15px rgba(233, 69, 96, 0.4);
-                    transition: all 0.25s ease;
-                    border: 1px solid rgba(255,255,255,0.1);
+                    box-shadow: 0 4px 15px rgba(255, 69, 0, 0.4);
+                    transition: all 0.3s ease;
                 `;
-                resetBtn.onmouseenter = () => {
-                    resetBtn.style.background = 'linear-gradient(135deg, #ff6b6b 0%, #e94560 100%)';
-                    resetBtn.style.transform = 'translateY(-2px) scale(1.02)';
-                    resetBtn.style.boxShadow = '0 6px 20px rgba(233, 69, 96, 0.5)';
+                refreshBtn.onmouseover = () => {
+                    refreshBtn.style.background = 'linear-gradient(135deg, #ff6633, #dd4400)';
+                    refreshBtn.style.transform = 'scale(1.05)';
+                    refreshBtn.style.boxShadow = '0 6px 20px rgba(255, 69, 0, 0.5)';
                 };
-                resetBtn.onmouseleave = () => {
-                    resetBtn.style.background = 'linear-gradient(135deg, #e94560 0%, #c62a47 100%)';
-                    resetBtn.style.transform = 'translateY(0) scale(1)';
-                    resetBtn.style.boxShadow = '0 4px 15px rgba(233, 69, 96, 0.4)';
+                refreshBtn.onmouseout = () => {
+                    refreshBtn.style.background = 'linear-gradient(135deg, #ff4500, #cc3700)';
+                    refreshBtn.style.transform = 'scale(1)';
+                    refreshBtn.style.boxShadow = '0 4px 15px rgba(255, 69, 0, 0.4)';
                 };
-                wrapper.appendChild(resetBtn);
+                wrapper.appendChild(refreshBtn);
                 
-                resetBtn.addEventListener('click', () => {
-                    const startAz = azimuthAngle;
-                    const startEl = elevationAngle;
-                    const startTime = Date.now();
-                    
-                    function animateReset() {
-                        const t = Math.min((Date.now() - startTime) / 500, 1);
-                        const ease = 1 - Math.pow(1 - t, 4);
-                        
-                        let azDiff = 0 - 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 + (0 - startEl) * ease;
-                        
-                        updatePositions();
-                        
-                        if (t < 1) {
-                            requestAnimationFrame(animateReset);
-                        } else {
-                            azimuthAngle = 0;
-                            elevationAngle = 0;
-                            updatePositions();
-                            updatePropsAndTrigger();
-                        }
-                    }
-                    animateReset();
+                refreshBtn.addEventListener('click', () => {
+                    azimuthAngle = 0;
+                    elevationAngle = 0;
+                    updatePositions();
+                    updatePropsAndTrigger();
                 });
                 
                 function updatePositions() {
@@ -883,29 +758,17 @@ class LightingControl3D(gr.HTML):
                     lightGroup.position.set(lightX, lightY, lightZ);
                     lightGroup.lookAt(CENTER);
                     
-                    // Update azimuth handle
-                    azHandleGroup.position.set(
-                        AZIMUTH_RADIUS * Math.sin(azRad), 
-                        0.08, 
-                        AZIMUTH_RADIUS * Math.cos(azRad)
-                    );
-                    azHandleGroup.rotation.y = -azRad;
-                    
-                    // Update elevation handle
-                    elHandleGroup.position.set(
-                        -1.0, 
+                    azimuthHandle.position.set(AZIMUTH_RADIUS * Math.sin(azRad), 0.02, AZIMUTH_RADIUS * Math.cos(azRad));
+                    elevationHandle.position.set(
+                        -AZIMUTH_RADIUS - 0.3, 
                         ELEVATION_RADIUS * Math.sin(elRad) + CENTER.y, 
                         ELEVATION_RADIUS * Math.cos(elRad)
                     );
                     
-                    // Update displays
+                    // Update prompt
                     const azSnap = snapToNearest(azimuthAngle, azimuthSteps);
                     const elSnap = snapToNearest(elevationAngle, elevationSteps);
-                    
-                    azDisplay.textContent = Math.round(azimuthAngle) + '°';
-                    elDisplay.textContent = Math.round(elevationAngle) + '°';
-                    
-                    let prompt = '🎬 Light from';
+                    let prompt = '💡 Light source from';
                     if (elSnap !== 0) {
                         prompt += ' ' + elevationNames[String(elSnap)];
                     } else {
@@ -927,39 +790,25 @@ class LightingControl3D(gr.HTML):
                 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;
                 
-                function getIntersectedHandle(e) {
+                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([azHandleGroup, elHandleGroup], true);
+                    const intersects = raycaster.intersectObjects([azimuthHandle, elevationHandle]);
                     
                     if (intersects.length > 0) {
-                        let obj = intersects[0].object;
-                        while (obj.parent && !obj.userData.type) obj = obj.parent;
-                        return obj;
-                    }
-                    return null;
-                }
-                
-                canvas.addEventListener('mousedown', (e) => {
-                    const handle = getIntersectedHandle(e);
-                    if (handle && handle.userData.type) {
                         isDragging = true;
-                        dragTarget = handle;
-                        
-                        // Highlight effect
-                        dragTarget.children.forEach(child => {
-                            if (child.material) {
-                                child.material.emissiveIntensity = 1.5;
-                            }
-                        });
-                        dragTarget.scale.setScalar(1.25);
+                        dragTarget = intersects[0].object;
+                        dragTarget.material.emissiveIntensity = 1.2;
+                        dragTarget.scale.setScalar(1.4);
+                        dragStartMouse.copy(mouse);
                         canvas.style.cursor = 'grabbing';
                     }
                 });
@@ -973,39 +822,30 @@ class LightingControl3D(gr.HTML):
                         raycaster.setFromCamera(mouse, camera);
                         
                         if (dragTarget.userData.type === 'azimuth') {
-                            const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), -0.08);
+                            const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), -0.02);
                             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), 1.0);
+                            const plane = new THREE.Plane(new THREE.Vector3(1, 0, 0), AZIMUTH_RADIUS + 0.3);
                             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
-                                );
+                                elevationAngle = THREE.MathUtils.clamp(THREE.MathUtils.radToDeg(Math.atan2(relY, relZ)), -90, 90);
                             }
                         }
                         updatePositions();
                     } else {
-                        // Hover effects
-                        const handle = getIntersectedHandle(e);
-                        [azHandleGroup, elHandleGroup].forEach(h => {
-                            h.children.forEach(child => {
-                                if (child.material) child.material.emissiveIntensity = 0.5;
-                            });
+                        raycaster.setFromCamera(mouse, camera);
+                        const intersects = raycaster.intersectObjects([azimuthHandle, elevationHandle]);
+                        [azimuthHandle, elevationHandle].forEach(h => {
+                            h.material.emissiveIntensity = 0.6;
                             h.scale.setScalar(1);
                         });
-                        
-                        if (handle && handle.userData.type) {
-                            handle.children.forEach(child => {
-                                if (child.material) child.material.emissiveIntensity = 0.9;
-                            });
-                            handle.scale.setScalar(1.1);
+                        if (intersects.length > 0) {
+                            intersects[0].object.material.emissiveIntensity = 0.9;
+                            intersects[0].object.scale.setScalar(1.15);
                             canvas.style.cursor = 'grab';
                         } else {
                             canvas.style.cursor = 'default';
@@ -1015,12 +855,10 @@ class LightingControl3D(gr.HTML):
                 
                 const onMouseUp = () => {
                     if (dragTarget) {
-                        dragTarget.children.forEach(child => {
-                            if (child.material) child.material.emissiveIntensity = 0.5;
-                        });
+                        dragTarget.material.emissiveIntensity = 0.6;
                         dragTarget.scale.setScalar(1);
                         
-                        // Snap animation
+                        // Snap and animate
                         const targetAz = snapToNearest(azimuthAngle, azimuthSteps);
                         const targetEl = snapToNearest(elevationAngle, elevationSteps);
                         
@@ -1028,7 +866,7 @@ class LightingControl3D(gr.HTML):
                         const startTime = Date.now();
                         
                         function animateSnap() {
-                            const t = Math.min((Date.now() - startTime) / 250, 1);
+                            const t = Math.min((Date.now() - startTime) / 200, 1);
                             const ease = 1 - Math.pow(1 - t, 3);
                             
                             let azDiff = targetAz - startAz;
@@ -1054,73 +892,70 @@ class LightingControl3D(gr.HTML):
                 canvas.addEventListener('mouseup', onMouseUp);
                 canvas.addEventListener('mouseleave', onMouseUp);
                 
-                // Touch support
+                // Touch support for mobile
                 canvas.addEventListener('touchstart', (e) => {
                     e.preventDefault();
                     const touch = e.touches[0];
-                    const fakeEvent = { clientX: touch.clientX, clientY: touch.clientY };
-                    const handle = getIntersectedHandle(fakeEvent);
-                    if (handle && handle.userData.type) {
+                    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 = handle;
-                        dragTarget.children.forEach(child => {
-                            if (child.material) child.material.emissiveIntensity = 1.5;
-                        });
-                        dragTarget.scale.setScalar(1.25);
+                        dragTarget = intersects[0].object;
+                        dragTarget.material.emissiveIntensity = 1.2;
+                        dragTarget.scale.setScalar(1.4);
+                        dragStartMouse.copy(mouse);
                     }
                 }, { passive: false });
                 
                 canvas.addEventListener('touchmove', (e) => {
                     e.preventDefault();
-                    if (!isDragging || !dragTarget) 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;
                     
-                    raycaster.setFromCamera(mouse, camera);
-                    
-                    if (dragTarget.userData.type === 'azimuth') {
-                        const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), -0.08);
-                        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), 1.0);
-                        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
-                            );
+                    if (isDragging && dragTarget) {
+                        raycaster.setFromCamera(mouse, camera);
+                        
+                        if (dragTarget.userData.type === 'azimuth') {
+                            const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), -0.02);
+                            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), AZIMUTH_RADIUS + 0.3);
+                            if (raycaster.ray.intersectPlane(plane, intersection)) {
+                                const relY = intersection.y - CENTER.y;
+                                const relZ = intersection.z;
+                                elevationAngle = THREE.MathUtils.clamp(THREE.MathUtils.radToDeg(Math.atan2(relY, relZ)), -90, 90);
+                            }
                         }
+                        updatePositions();
                     }
-                    updatePositions();
                 }, { passive: false });
                 
-                canvas.addEventListener('touchend', (e) => { e.preventDefault(); onMouseUp(); }, { passive: false });
-                canvas.addEventListener('touchcancel', (e) => { e.preventDefault(); onMouseUp(); }, { passive: false });
+                canvas.addEventListener('touchend', (e) => {
+                    e.preventDefault();
+                    onMouseUp();
+                }, { passive: false });
+                
+                canvas.addEventListener('touchcancel', (e) => {
+                    e.preventDefault();
+                    onMouseUp();
+                }, { passive: false });
                 
                 // Initial update
                 updatePositions();
                 
-                // Animation variables
-                let time = 0;
-                
-                // Render loop with subtle animations
+                // Render loop
                 function render() {
                     requestAnimationFrame(render);
-                    time += 0.01;
-                    
-                    // Subtle lens pulse
-                    if (lens) {
-                        lens.material.emissiveIntensity = 2.5 + Math.sin(time * 2) * 0.5;
-                    }
-                    
                     renderer.render(scene, camera);
                 }
                 render();
@@ -1132,6 +967,17 @@ class LightingControl3D(gr.HTML):
                     renderer.setSize(wrapper.clientWidth, wrapper.clientHeight);
                 }).observe(wrapper);
                 
+                // Store update functions for external calls
+                wrapper._updateFromProps = (newVal) => {
+                    if (newVal && typeof newVal === 'object') {
+                        azimuthAngle = newVal.azimuth ?? azimuthAngle;
+                        elevationAngle = newVal.elevation ?? elevationAngle;
+                        updatePositions();
+                    }
+                };
+                
+                wrapper._updateTexture = updateTextureFromUrl;
+                
                 // Watch for prop changes
                 let lastImageUrl = props.imageUrl;
                 let lastValue = JSON.stringify(props.value);
@@ -1180,14 +1026,14 @@ with gr.Blocks(css=css) as demo:
         with gr.Column(scale=1):
             image = gr.Image(label="Input Image", type="pil", height=300)
             
-            gr.Markdown("### 🎬 Studio Lighting Control")
-            gr.Markdown("*Drag handles: 🟡 **Azimuth** (compass ring) • 🔵 **Elevation** (vertical arc)*")
+            gr.Markdown("### 3D Lighting Control")
+            gr.Markdown("*Drag the colored handles: 🟡 Azimuth (Direction), 🔵 Elevation (Height)*")
             
             lighting_3d = LightingControl3D(
                 value={"azimuth": 0, "elevation": 0},
                 elem_id="lighting-3d-control"
             )
-            run_btn = gr.Button("🎬 Generate Image", variant="primary", size="lg")
+            run_btn = gr.Button("Generate Image", variant="primary", size="lg")
             
             gr.Markdown("### Slider Controls")
             
@@ -1229,10 +1075,12 @@ with gr.Blocks(css=css) as demo:
                 width = gr.Slider(label="Width", minimum=256, maximum=2048, step=8, value=1024)
     
     def update_prompt_from_sliders(azimuth, elevation):
+        """Update prompt preview when sliders change."""
         prompt = build_lighting_prompt(azimuth, elevation)
         return prompt
     
     def sync_3d_to_sliders(lighting_value):
+        """Sync 3D control changes to sliders."""
         if lighting_value and isinstance(lighting_value, dict):
             az = lighting_value.get('azimuth', 0)
             el = lighting_value.get('elevation', 0)
@@ -1241,9 +1089,11 @@ with gr.Blocks(css=css) as demo:
         return gr.update(), gr.update(), gr.update()
     
     def sync_sliders_to_3d(azimuth, elevation):
+        """Sync slider changes to 3D control."""
         return {"azimuth": azimuth, "elevation": elevation}
     
     def update_3d_image(image):
+        """Update the 3D component with the uploaded image."""
         if image is None:
             return gr.update(imageUrl=None)