Update app.py

app.py

@@ -141,6 +141,7 @@ def build_lighting_prompt(azimuth: float, elevation: float) -> str:
     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()))
     
@@ -224,17 +225,11 @@ class LightingControl3D(gr.HTML):
             value = {"azimuth": 0, "elevation": 0}
         
         html_template = """
-        <div id="lighting-control-wrapper" style="width: 100%; height: 450px; position: relative; background: linear-gradient(180deg, #0d1117 0%, #161b22 50%, #21262d 100%); border-radius: 12px; overflow: hidden; border: 1px solid #30363d;">
-            <div id="prompt-overlay" style="position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.85); padding: 10px 20px; border-radius: 20px; font-family: 'Segoe UI', system-ui, sans-serif; font-size: 13px; color: #58a6ff; white-space: nowrap; z-index: 10; border: 1px solid #30363d; box-shadow: 0 4px 12px rgba(0,0,0,0.4);"></div>
-            <div id="legend-overlay" style="position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,0.75); padding: 10px 14px; border-radius: 10px; font-family: 'Segoe UI', system-ui, sans-serif; font-size: 11px; color: #c9d1d9; z-index: 10; border: 1px solid #30363d;">
-                <div style="display: flex; align-items: center; margin-bottom: 6px;">
-                    <div style="width: 12px; height: 12px; background: #ffd700; border-radius: 50%; margin-right: 8px; box-shadow: 0 0 6px #ffd700;"></div>
-                    <span>Azimuth (Direction)</span>
-                </div>
-                <div style="display: flex; align-items: center;">
-                    <div style="width: 12px; height: 12px; background: #0088ff; border-radius: 50%; margin-right: 8px; box-shadow: 0 0 6px #0088ff;"></div>
-                    <span>Elevation (Height)</span>
-                </div>
+        <div id="lighting-control-wrapper" style="width: 100%; height: 450px; position: relative; background: linear-gradient(180deg, #0d1117 0%, #161b22 50%, #21262d 100%); border-radius: 12px; overflow: hidden; border: 2px solid #30363d;">
+            <div id="prompt-overlay" style="position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, rgba(255,69,0,0.9), rgba(220,53,69,0.9)); padding: 10px 20px; border-radius: 20px; font-family: 'Segoe UI', sans-serif; font-size: 13px; font-weight: 600; color: white; white-space: nowrap; z-index: 10; box-shadow: 0 4px 15px rgba(255,69,0,0.4); border: 1px solid rgba(255,255,255,0.2);"></div>
+            <div id="info-panel" style="position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.7); padding: 8px 12px; border-radius: 8px; font-family: 'Segoe UI', sans-serif; font-size: 11px; color: #8b949e; z-index: 10; border: 1px solid #30363d;">
+                <div style="margin-bottom: 4px;"><span style="color: #ffd700;">●</span> Azimuth: <span id="az-value" style="color: #ffd700;">0°</span></div>
+                <div><span style="color: #4a9eff;">●</span> Elevation: <span id="el-value" style="color: #4a9eff;">0°</span></div>
             </div>
         </div>
         """
@@ -243,7 +238,10 @@ class LightingControl3D(gr.HTML):
         (() => {
             const wrapper = element.querySelector('#lighting-control-wrapper');
             const promptOverlay = element.querySelector('#prompt-overlay');
+            const azValueDisplay = element.querySelector('#az-value');
+            const elValueDisplay = element.querySelector('#el-value');
             
+            // Wait for THREE to load
             const initScene = () => {
                 if (typeof THREE === 'undefined') {
                     setTimeout(initScene, 100);
@@ -254,7 +252,7 @@ class LightingControl3D(gr.HTML):
                 const scene = new THREE.Scene();
                 scene.background = new THREE.Color(0x0d1117);
                 
-                // Add fog for depth
+                // Add fog for depth effect
                 scene.fog = new THREE.Fog(0x0d1117, 8, 20);
                 
                 const camera = new THREE.PerspectiveCamera(50, wrapper.clientWidth / wrapper.clientHeight, 0.1, 1000);
@@ -273,52 +271,39 @@ class LightingControl3D(gr.HTML):
                 // Ambient lighting
                 scene.add(new THREE.AmbientLight(0x404050, 0.3));
                 
-                // Ground plane for shadows
-                const ground = new THREE.Mesh(
-                    new THREE.PlaneGeometry(12, 12),
-                    new THREE.MeshStandardMaterial({ 
-                        color: 0x1a1f25,
-                        roughness: 0.9,
-                        metalness: 0.1
-                    })
-                );
+                // Ground plane with better material
+                const groundGeometry = new THREE.PlaneGeometry(12, 12);
+                const groundMaterial = new THREE.MeshStandardMaterial({ 
+                    color: 0x1a1f26,
+                    roughness: 0.9,
+                    metalness: 0.1
+                });
+                const ground = new THREE.Mesh(groundGeometry, groundMaterial);
                 ground.rotation.x = -Math.PI / 2;
                 ground.position.y = 0;
                 ground.receiveShadow = true;
                 scene.add(ground);
                 
-                // Create circular grid pattern
-                const gridGroup = new THREE.Group();
-                
-                // Radial lines
-                for (let i = 0; i < 16; i++) {
-                    const angle = (i / 16) * Math.PI * 2;
-                    const lineGeo = new THREE.BufferGeometry().setFromPoints([
-                        new THREE.Vector3(0, 0.01, 0),
-                        new THREE.Vector3(Math.sin(angle) * 4, 0.01, Math.cos(angle) * 4)
-                    ]);
-                    const lineMat = new THREE.LineBasicMaterial({ color: 0x2d333b, transparent: true, opacity: 0.5 });
-                    gridGroup.add(new THREE.Line(lineGeo, lineMat));
-                }
+                // Shadow receiving plane (invisible)
+                const shadowPlane = new THREE.Mesh(
+                    new THREE.PlaneGeometry(12, 12),
+                    new THREE.ShadowMaterial({ opacity: 0.5 })
+                );
+                shadowPlane.rotation.x = -Math.PI / 2;
+                shadowPlane.position.y = 0.001;
+                shadowPlane.receiveShadow = true;
+                scene.add(shadowPlane);
                 
-                // Concentric circles
-                for (let r = 1; r <= 4; r++) {
-                    const circlePoints = [];
-                    for (let i = 0; i <= 64; i++) {
-                        const angle = (i / 64) * Math.PI * 2;
-                        circlePoints.push(new THREE.Vector3(Math.sin(angle) * r, 0.01, Math.cos(angle) * r));
-                    }
-                    const circleGeo = new THREE.BufferGeometry().setFromPoints(circlePoints);
-                    const circleMat = new THREE.LineBasicMaterial({ color: 0x2d333b, transparent: true, opacity: 0.4 });
-                    gridGroup.add(new THREE.Line(circleGeo, circleMat));
-                }
-                scene.add(gridGroup);
+                // Enhanced grid
+                const gridHelper = new THREE.GridHelper(10, 20, 0x30363d, 0x21262d);
+                gridHelper.position.y = 0.002;
+                scene.add(gridHelper);
                 
                 // Constants
                 const CENTER = new THREE.Vector3(0, 0.75, 0);
-                const BASE_DISTANCE = 2.5;
-                const AZIMUTH_RADIUS = 2.4;
-                const ELEVATION_RADIUS = 1.8;
+                const BASE_DISTANCE = 2.8;
+                const AZIMUTH_RADIUS = 2.6;
+                const ELEVATION_RADIUS = 2.0;
                 
                 // State
                 let azimuthAngle = props.value?.azimuth || 0;
@@ -345,7 +330,7 @@ class LightingControl3D(gr.HTML):
                     canvas.height = 256;
                     const ctx = canvas.getContext('2d');
                     
-                    // Gradient background
+                    // Background gradient
                     const gradient = ctx.createLinearGradient(0, 0, 256, 256);
                     gradient.addColorStop(0, '#2d333b');
                     gradient.addColorStop(1, '#22272e');
@@ -355,27 +340,27 @@ class LightingControl3D(gr.HTML):
                     // Image icon
                     ctx.strokeStyle = '#484f58';
                     ctx.lineWidth = 3;
-                    ctx.beginPath();
-                    ctx.roundRect(60, 70, 136, 116, 8);
-                    ctx.stroke();
+                    ctx.strokeRect(60, 70, 136, 116);
                     
-                    // Mountain
+                    // Mountain shapes
                     ctx.fillStyle = '#484f58';
                     ctx.beginPath();
-                    ctx.moveTo(80, 160);
-                    ctx.lineTo(128, 110);
-                    ctx.lineTo(176, 160);
+                    ctx.moveTo(70, 170);
+                    ctx.lineTo(110, 120);
+                    ctx.lineTo(150, 160);
+                    ctx.lineTo(180, 130);
+                    ctx.lineTo(186, 170);
                     ctx.closePath();
                     ctx.fill();
                     
-                    // Sun
+                    // Sun circle
                     ctx.beginPath();
-                    ctx.arc(155, 100, 15, 0, Math.PI * 2);
+                    ctx.arc(160, 100, 15, 0, Math.PI * 2);
                     ctx.fill();
                     
                     // Text
                     ctx.fillStyle = '#6e7681';
-                    ctx.font = '14px system-ui';
+                    ctx.font = '14px Arial';
                     ctx.textAlign = 'center';
                     ctx.fillText('Upload Image', 128, 210);
                     
@@ -390,17 +375,22 @@ class LightingControl3D(gr.HTML):
                     roughness: 0.3, 
                     metalness: 0.1 
                 });
-                let targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(1.2, 1.2), planeMaterial);
+                let targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(1.4, 1.4), planeMaterial);
                 targetPlane.position.copy(CENTER);
                 targetPlane.receiveShadow = true;
                 targetPlane.castShadow = true;
                 scene.add(targetPlane);
                 
-                // Add subtle frame around image
-                const frameGeo = new THREE.BoxGeometry(1.3, 1.3, 0.05);
-                const frameMat = new THREE.MeshStandardMaterial({ color: 0x30363d, roughness: 0.5, metalness: 0.3 });
-                const frame = new THREE.Mesh(frameGeo, frameMat);
-                frame.position.set(CENTER.x, CENTER.y, CENTER.z - 0.03);
+                // Add frame around image
+                const frameGeometry = new THREE.BoxGeometry(1.5, 1.5, 0.05);
+                const frameMaterial = new THREE.MeshStandardMaterial({ 
+                    color: 0x30363d, 
+                    roughness: 0.5, 
+                    metalness: 0.3 
+                });
+                const frame = new THREE.Mesh(frameGeometry, frameMaterial);
+                frame.position.copy(CENTER);
+                frame.position.z -= 0.03;
                 scene.add(frame);
                 
                 // Function to update texture from image URL
@@ -409,16 +399,16 @@ class LightingControl3D(gr.HTML):
                         planeMaterial.map = createPlaceholderTexture();
                         planeMaterial.needsUpdate = true;
                         scene.remove(targetPlane);
-                        scene.remove(frame);
-                        targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(1.2, 1.2), planeMaterial);
+                        targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(1.4, 1.4), planeMaterial);
                         targetPlane.position.copy(CENTER);
                         targetPlane.receiveShadow = true;
                         targetPlane.castShadow = true;
                         scene.add(targetPlane);
                         
-                        const newFrame = new THREE.Mesh(new THREE.BoxGeometry(1.3, 1.3, 0.05), frameMat);
-                        newFrame.position.set(CENTER.x, CENTER.y, CENTER.z - 0.03);
-                        scene.add(newFrame);
+                        frame.geometry.dispose();
+                        frame.geometry = new THREE.BoxGeometry(1.5, 1.5, 0.05);
+                        frame.position.copy(CENTER);
+                        frame.position.z -= 0.03;
                         return;
                     }
                     
@@ -433,7 +423,7 @@ class LightingControl3D(gr.HTML):
                         const img = texture.image;
                         if (img && img.width && img.height) {
                             const aspect = img.width / img.height;
-                            const maxSize = 1.5;
+                            const maxSize = 1.6;
                             let planeWidth, planeHeight;
                             if (aspect > 1) {
                                 planeWidth = maxSize;
@@ -443,7 +433,6 @@ class LightingControl3D(gr.HTML):
                                 planeWidth = maxSize * aspect;
                             }
                             scene.remove(targetPlane);
-                            scene.remove(frame);
                             targetPlane = new THREE.Mesh(
                                 new THREE.PlaneGeometry(planeWidth, planeHeight),
                                 planeMaterial
@@ -453,12 +442,10 @@ class LightingControl3D(gr.HTML):
                             targetPlane.castShadow = true;
                             scene.add(targetPlane);
                             
-                            const newFrame = new THREE.Mesh(
-                                new THREE.BoxGeometry(planeWidth + 0.1, planeHeight + 0.1, 0.05), 
-                                frameMat
-                            );
-                            newFrame.position.set(CENTER.x, CENTER.y, CENTER.z - 0.03);
-                            scene.add(newFrame);
+                            frame.geometry.dispose();
+                            frame.geometry = new THREE.BoxGeometry(planeWidth + 0.1, planeHeight + 0.1, 0.05);
+                            frame.position.copy(CENTER);
+                            frame.position.z -= 0.03;
                         }
                     }, undefined, (err) => {
                         console.error('Failed to load texture:', err);
@@ -469,53 +456,112 @@ class LightingControl3D(gr.HTML):
                     updateTextureFromUrl(props.imageUrl);
                 }
                 
-                // ============================================
-                // REDESIGNED SOFTBOX LIGHT
-                // ============================================
+                // ========== SOFTBOX LIGHT DESIGN ==========
                 const lightGroup = new THREE.Group();
                 
-                // Softbox outer frame (red)
-                const softboxFrameMat = new THREE.MeshStandardMaterial({
-                    color: 0xcc2222,
-                    roughness: 0.4,
-                    metalness: 0.6,
-                    emissive: 0x441111,
-                    emissiveIntensity: 0.3
-                });
-                
-                // Main body - octagonal shape approximated with cylinder
-                const softboxBody = new THREE.Mesh(
-                    new THREE.CylinderGeometry(0.35, 0.45, 0.15, 8),
-                    softboxFrameMat
-                );
-                softboxBody.rotation.x = Math.PI / 2;
-                softboxBody.position.z = 0.1;
-                lightGroup.add(softboxBody);
+                // Softbox housing - Red color
+                const softboxDepth = 0.4;
+                const softboxWidth = 0.8;
+                const softboxHeight = 0.8;
                 
                 // Back panel (red)
                 const backPanel = new THREE.Mesh(
-                    new THREE.CylinderGeometry(0.35, 0.35, 0.05, 8),
-                    softboxFrameMat
+                    new THREE.BoxGeometry(softboxWidth, softboxHeight, 0.05),
+                    new THREE.MeshStandardMaterial({ 
+                        color: 0xcc0000,
+                        roughness: 0.3,
+                        metalness: 0.6
+                    })
                 );
-                backPanel.rotation.x = Math.PI / 2;
-                backPanel.position.z = 0.2;
+                backPanel.position.z = -softboxDepth / 2;
                 lightGroup.add(backPanel);
                 
-                // Inner diffuser ring
-                const diffuserRing = new THREE.Mesh(
-                    new THREE.TorusGeometry(0.38, 0.03, 8, 8),
-                    new THREE.MeshStandardMaterial({
-                        color: 0x992222,
-                        roughness: 0.3,
-                        metalness: 0.7
+                // Side panels (red, tapered)
+                const createSidePanel = (width, height, rotY, posX, posZ) => {
+                    const shape = new THREE.Shape();
+                    shape.moveTo(-width/2, -height/2);
+                    shape.lineTo(width/2, -height/2 * 0.7);
+                    shape.lineTo(width/2, height/2 * 0.7);
+                    shape.lineTo(-width/2, height/2);
+                    shape.closePath();
+                    
+                    const geometry = new THREE.ExtrudeGeometry(shape, { depth: 0.02, bevelEnabled: false });
+                    const panel = new THREE.Mesh(geometry, new THREE.MeshStandardMaterial({ 
+                        color: 0xaa0000, 
+                        roughness: 0.4, 
+                        metalness: 0.5,
+                        side: THREE.DoubleSide
+                    }));
+                    panel.rotation.y = rotY;
+                    panel.position.set(posX, 0, posZ);
+                    return panel;
+                };
+                
+                // Left side
+                const leftSide = new THREE.Mesh(
+                    new THREE.PlaneGeometry(softboxDepth, softboxHeight),
+                    new THREE.MeshStandardMaterial({ 
+                        color: 0xaa0000, 
+                        roughness: 0.4, 
+                        metalness: 0.5,
+                        side: THREE.DoubleSide
+                    })
+                );
+                leftSide.rotation.y = Math.PI / 2;
+                leftSide.position.x = -softboxWidth / 2;
+                leftSide.position.z = -softboxDepth / 4;
+                lightGroup.add(leftSide);
+                
+                // Right side
+                const rightSide = leftSide.clone();
+                rightSide.position.x = softboxWidth / 2;
+                lightGroup.add(rightSide);
+                
+                // Top side
+                const topSide = new THREE.Mesh(
+                    new THREE.PlaneGeometry(softboxWidth, softboxDepth),
+                    new THREE.MeshStandardMaterial({ 
+                        color: 0xaa0000, 
+                        roughness: 0.4, 
+                        metalness: 0.5,
+                        side: THREE.DoubleSide
                     })
                 );
-                diffuserRing.rotation.x = Math.PI / 2;
-                diffuserRing.position.z = 0.02;
-                lightGroup.add(diffuserRing);
+                topSide.rotation.x = Math.PI / 2;
+                topSide.position.y = softboxHeight / 2;
+                topSide.position.z = -softboxDepth / 4;
+                lightGroup.add(topSide);
+                
+                // Bottom side
+                const bottomSide = topSide.clone();
+                bottomSide.position.y = -softboxHeight / 2;
+                lightGroup.add(bottomSide);
+                
+                // Corner edges (red tubes)
+                const edgeMaterial = new THREE.MeshStandardMaterial({ 
+                    color: 0xdd0000, 
+                    roughness: 0.3, 
+                    metalness: 0.7 
+                });
+                const edgeRadius = 0.02;
                 
-                // White diffuser panel (the light emitting surface)
-                const diffuserMat = new THREE.MeshStandardMaterial({
+                // Vertical edges
+                const verticalEdgeGeom = new THREE.CylinderGeometry(edgeRadius, edgeRadius, softboxHeight, 8);
+                const corners = [
+                    [-softboxWidth/2, 0, 0],
+                    [softboxWidth/2, 0, 0],
+                    [-softboxWidth/2, 0, -softboxDepth/2],
+                    [softboxWidth/2, 0, -softboxDepth/2]
+                ];
+                corners.forEach(pos => {
+                    const edge = new THREE.Mesh(verticalEdgeGeom, edgeMaterial);
+                    edge.position.set(pos[0], pos[1], pos[2]);
+                    lightGroup.add(edge);
+                });
+                
+                // Diffusion panel (WHITE - the light source)
+                const diffuserGeometry = new THREE.PlaneGeometry(softboxWidth - 0.05, softboxHeight - 0.05);
+                const diffuserMaterial = new THREE.MeshStandardMaterial({
                     color: 0xffffff,
                     emissive: 0xffffff,
                     emissiveIntensity: 1.5,
@@ -524,62 +570,45 @@ class LightingControl3D(gr.HTML):
                     transparent: true,
                     opacity: 0.95
                 });
+                const diffuser = new THREE.Mesh(diffuserGeometry, diffuserMaterial);
+                diffuser.position.z = 0.01;
+                lightGroup.add(diffuser);
                 
-                const diffuserPanel = new THREE.Mesh(
-                    new THREE.CircleGeometry(0.36, 8),
-                    diffuserMat
+                // Inner glow ring
+                const glowRing = new THREE.Mesh(
+                    new THREE.RingGeometry(0.3, 0.35, 32),
+                    new THREE.MeshBasicMaterial({ 
+                        color: 0xffffee, 
+                        transparent: true, 
+                        opacity: 0.8 
+                    })
                 );
-                diffuserPanel.position.z = 0.01;
-                lightGroup.add(diffuserPanel);
+                glowRing.position.z = 0.02;
+                lightGroup.add(glowRing);
                 
-                // Inner glow effect
-                const glowMat = new THREE.MeshBasicMaterial({
-                    color: 0xffffff,
-                    transparent: true,
-                    opacity: 0.3,
-                    side: THREE.DoubleSide
-                });
-                const glowPanel = new THREE.Mesh(
-                    new THREE.CircleGeometry(0.42, 8),
-                    glowMat
-                );
-                glowPanel.position.z = -0.01;
-                lightGroup.add(glowPanel);
-                
-                // Mounting bracket
-                const bracketMat = new THREE.MeshStandardMaterial({
-                    color: 0x1a1a1a,
-                    roughness: 0.3,
-                    metalness: 0.8
+                // Mounting bracket (on back)
+                const bracketGeom = new THREE.BoxGeometry(0.15, 0.15, 0.2);
+                const bracketMat = new THREE.MeshStandardMaterial({ 
+                    color: 0x222222, 
+                    roughness: 0.5, 
+                    metalness: 0.8 
                 });
-                
-                const bracket = new THREE.Mesh(
-                    new THREE.BoxGeometry(0.08, 0.08, 0.15),
-                    bracketMat
-                );
-                bracket.position.set(0, 0, 0.28);
+                const bracket = new THREE.Mesh(bracketGeom, bracketMat);
+                bracket.position.z = -softboxDepth / 2 - 0.1;
                 lightGroup.add(bracket);
                 
                 // Stand connection
                 const standPole = new THREE.Mesh(
-                    new THREE.CylinderGeometry(0.02, 0.02, 0.3, 8),
+                    new THREE.CylinderGeometry(0.03, 0.03, 0.3, 8),
                     bracketMat
                 );
                 standPole.rotation.x = Math.PI / 2;
-                standPole.position.set(0, 0, 0.42);
+                standPole.position.z = -softboxDepth / 2 - 0.25;
                 lightGroup.add(standPole);
                 
-                // Small indicator light on bracket
-                const indicatorLight = new THREE.Mesh(
-                    new THREE.SphereGeometry(0.02, 8, 8),
-                    new THREE.MeshBasicMaterial({ color: 0x00ff00 })
-                );
-                indicatorLight.position.set(0.05, 0, 0.25);
-                lightGroup.add(indicatorLight);
-                
-                // Spotlight for actual lighting
-                const spotLight = new THREE.SpotLight(0xffffff, 15, 12, Math.PI / 3, 0.8, 1);
-                spotLight.position.set(0, 0, -0.05);
+                // The actual spotlight
+                const spotLight = new THREE.SpotLight(0xffffff, 15, 12, Math.PI / 4, 0.8, 1);
+                spotLight.position.set(0, 0, 0.1);
                 spotLight.castShadow = true;
                 spotLight.shadow.mapSize.width = 1024;
                 spotLight.shadow.mapSize.height = 1024;
@@ -588,10 +617,10 @@ class LightingControl3D(gr.HTML):
                 spotLight.shadow.bias = -0.002;
                 lightGroup.add(spotLight);
                 
-                // Point light for additional glow
-                const pointLight = new THREE.PointLight(0xffffff, 3, 8);
-                pointLight.position.set(0, 0, -0.1);
-                lightGroup.add(pointLight);
+                // Point light for soft fill
+                const fillLight = new THREE.PointLight(0xfff5ee, 2, 8);
+                fillLight.position.set(0, 0, 0.2);
+                lightGroup.add(fillLight);
                 
                 const lightTarget = new THREE.Object3D();
                 lightTarget.position.copy(CENTER);
@@ -600,70 +629,73 @@ class LightingControl3D(gr.HTML):
                 
                 scene.add(lightGroup);
                 
-                // ============================================
-                // YELLOW: Azimuth ring and handle
-                // ============================================
-                const azimuthColor = 0xffd700;  // Gold/Yellow
-                
+                // ========== AZIMUTH RING (YELLOW) ==========
                 const azimuthRing = new THREE.Mesh(
                     new THREE.TorusGeometry(AZIMUTH_RADIUS, 0.035, 16, 64),
                     new THREE.MeshStandardMaterial({ 
-                        color: azimuthColor, 
-                        emissive: azimuthColor, 
-                        emissiveIntensity: 0.4,
+                        color: 0xffd700, 
+                        emissive: 0xffd700, 
+                        emissiveIntensity: 0.2,
                         roughness: 0.3,
-                        metalness: 0.7
+                        metalness: 0.6
                     })
                 );
                 azimuthRing.rotation.x = Math.PI / 2;
                 azimuthRing.position.y = 0.05;
                 scene.add(azimuthRing);
                 
-                // Direction markers on azimuth ring
-                const directions = ['N', 'E', 'S', 'W'];
-                const dirAngles = [0, 90, 180, 270];
-                dirAngles.forEach((angle, i) => {
-                    const rad = THREE.MathUtils.degToRad(angle);
-                    const marker = new THREE.Mesh(
-                        new THREE.SphereGeometry(0.06, 8, 8),
-                        new THREE.MeshStandardMaterial({ 
-                            color: 0x888888, 
-                            emissive: 0x444444,
-                            emissiveIntensity: 0.3
-                        })
-                    );
-                    marker.position.set(
-                        AZIMUTH_RADIUS * Math.sin(rad),
+                // Azimuth tick marks
+                for (let i = 0; i < 8; i++) {
+                    const angle = (i * 45) * Math.PI / 180;
+                    const tickGeom = new THREE.BoxGeometry(0.08, 0.02, 0.02);
+                    const tickMat = new THREE.MeshStandardMaterial({ 
+                        color: 0xffd700, 
+                        emissive: 0xffd700, 
+                        emissiveIntensity: 0.3 
+                    });
+                    const tick = new THREE.Mesh(tickGeom, tickMat);
+                    tick.position.set(
+                        (AZIMUTH_RADIUS + 0.1) * Math.sin(angle),
                         0.05,
-                        AZIMUTH_RADIUS * Math.cos(rad)
+                        (AZIMUTH_RADIUS + 0.1) * Math.cos(angle)
                     );
-                    scene.add(marker);
-                });
+                    tick.rotation.y = -angle;
+                    scene.add(tick);
+                }
                 
+                // Azimuth handle (YELLOW)
+                const azimuthHandleGroup = new THREE.Group();
                 const azimuthHandle = new THREE.Mesh(
-                    new THREE.SphereGeometry(0.18, 32, 32),
+                    new THREE.SphereGeometry(0.15, 24, 24),
                     new THREE.MeshStandardMaterial({ 
-                        color: azimuthColor, 
-                        emissive: azimuthColor, 
-                        emissiveIntensity: 0.6,
+                        color: 0xffd700, 
+                        emissive: 0xffd700, 
+                        emissiveIntensity: 0.4,
                         roughness: 0.2,
-                        metalness: 0.8
+                        metalness: 0.7
                     })
                 );
-                azimuthHandle.userData.type = 'azimuth';
-                azimuthHandle.castShadow = true;
-                scene.add(azimuthHandle);
+                azimuthHandleGroup.add(azimuthHandle);
                 
-                // ============================================
-                // BLUE: Elevation arc and handle
-                // ============================================
-                const elevationColor = 0x0088ff;  // Blue
+                // Handle ring decoration
+                const azHandleRing = new THREE.Mesh(
+                    new THREE.TorusGeometry(0.18, 0.02, 8, 24),
+                    new THREE.MeshStandardMaterial({ 
+                        color: 0xffee00, 
+                        emissive: 0xffee00, 
+                        emissiveIntensity: 0.3 
+                    })
+                );
+                azimuthHandleGroup.add(azHandleRing);
+                azimuthHandleGroup.userData.type = 'azimuth';
+                scene.add(azimuthHandleGroup);
                 
+                // ========== ELEVATION ARC (BLUE) ==========
                 const arcPoints = [];
-                for (let i = 0; i <= 48; i++) {
-                    const angle = THREE.MathUtils.degToRad(-90 + (180 * i / 48));
+                for (let i = 0; i <= 32; i++) {
+                    const angle = THREE.MathUtils.degToRad(-90 + (180 * i / 32));
                     arcPoints.push(new THREE.Vector3(
-                        -0.8, 
+                        -1.0, 
                         ELEVATION_RADIUS * Math.sin(angle) + CENTER.y, 
                         ELEVATION_RADIUS * Math.cos(angle)
                     ));
@@ -672,95 +704,98 @@ class LightingControl3D(gr.HTML):
                 const elevationArc = new THREE.Mesh(
                     new THREE.TubeGeometry(arcCurve, 48, 0.035, 8, false),
                     new THREE.MeshStandardMaterial({ 
-                        color: elevationColor, 
-                        emissive: elevationColor, 
-                        emissiveIntensity: 0.4,
+                        color: 0x4a9eff, 
+                        emissive: 0x4a9eff, 
+                        emissiveIntensity: 0.2,
                         roughness: 0.3,
-                        metalness: 0.7
+                        metalness: 0.6
                     })
                 );
                 scene.add(elevationArc);
                 
-                // Elevation level markers
-                [-90, 0, 90].forEach(elev => {
-                    const rad = THREE.MathUtils.degToRad(elev);
-                    const marker = new THREE.Mesh(
-                        new THREE.SphereGeometry(0.05, 8, 8),
-                        new THREE.MeshStandardMaterial({ 
-                            color: 0x666666,
-                            emissive: 0x333333,
-                            emissiveIntensity: 0.3
-                        })
-                    );
-                    marker.position.set(
-                        -0.8,
-                        ELEVATION_RADIUS * Math.sin(rad) + CENTER.y,
-                        ELEVATION_RADIUS * Math.cos(rad)
+                // Elevation tick marks
+                [-90, 0, 90].forEach(deg => {
+                    const angle = deg * Math.PI / 180;
+                    const tickGeom = new THREE.BoxGeometry(0.02, 0.08, 0.02);
+                    const tickMat = new THREE.MeshStandardMaterial({ 
+                        color: 0x4a9eff, 
+                        emissive: 0x4a9eff, 
+                        emissiveIntensity: 0.3 
+                    });
+                    const tick = new THREE.Mesh(tickGeom, tickMat);
+                    tick.position.set(
+                        -1.0,
+                        (ELEVATION_RADIUS + 0.1) * Math.sin(angle) + CENTER.y,
+                        (ELEVATION_RADIUS + 0.1) * Math.cos(angle)
                     );
-                    scene.add(marker);
+                    tick.rotation.x = -angle;
+                    scene.add(tick);
                 });
                 
+                // Elevation handle (BLUE)
+                const elevationHandleGroup = new THREE.Group();
                 const elevationHandle = new THREE.Mesh(
-                    new THREE.SphereGeometry(0.18, 32, 32),
+                    new THREE.SphereGeometry(0.15, 24, 24),
                     new THREE.MeshStandardMaterial({ 
-                        color: elevationColor, 
-                        emissive: elevationColor, 
-                        emissiveIntensity: 0.6,
+                        color: 0x4a9eff, 
+                        emissive: 0x4a9eff, 
+                        emissiveIntensity: 0.4,
                         roughness: 0.2,
-                        metalness: 0.8
+                        metalness: 0.7
                     })
                 );
-                elevationHandle.userData.type = 'elevation';
-                elevationHandle.castShadow = true;
-                scene.add(elevationHandle);
+                elevationHandleGroup.add(elevationHandle);
                 
-                // ============================================
-                // REFRESH BUTTON (Redesigned)
-                // ============================================
+                // Handle ring decoration
+                const elHandleRing = new THREE.Mesh(
+                    new THREE.TorusGeometry(0.18, 0.02, 8, 24),
+                    new THREE.MeshStandardMaterial({ 
+                        color: 0x66b3ff, 
+                        emissive: 0x66b3ff, 
+                        emissiveIntensity: 0.3 
+                    })
+                );
+                elevationHandleGroup.add(elHandleRing);
+                elevationHandleGroup.userData.type = 'elevation';
+                scene.add(elevationHandleGroup);
+                
+                // ========== REFRESH BUTTON ==========
                 const refreshBtn = document.createElement('button');
                 refreshBtn.innerHTML = `
-                    <svg width="16" height="16" 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="M8 16H3v5"/>
+                    <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="M23 4v6h-6"></path>
+                        <path d="M1 20v-6h6"></path>
+                        <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
                     </svg>
                     <span style="margin-left: 6px;">Reset</span>
                 `;
                 refreshBtn.style.cssText = `
                     position: absolute;
-                    top: 12px;
-                    right: 12px;
-                    background: linear-gradient(135deg, #238636 0%, #2ea043 100%);
+                    top: 10px;
+                    right: 10px;
+                    background: linear-gradient(135deg, #ff4500, #dc3545);
                     color: white;
                     border: none;
                     padding: 8px 14px;
                     border-radius: 8px;
                     cursor: pointer;
                     z-index: 10;
-                    font-size: 13px;
-                    font-family: 'Segoe UI', system-ui, sans-serif;
-                    font-weight: 500;
+                    font-size: 12px;
+                    font-weight: 600;
+                    font-family: 'Segoe UI', sans-serif;
                     display: flex;
                     align-items: center;
-                    box-shadow: 0 4px 12px rgba(35, 134, 54, 0.4);
+                    box-shadow: 0 4px 12px rgba(255, 69, 0, 0.4);
                     transition: all 0.2s ease;
+                    border: 1px solid rgba(255,255,255,0.2);
                 `;
-                refreshBtn.onmouseover = () => {
-                    refreshBtn.style.background = 'linear-gradient(135deg, #2ea043 0%, #3fb950 100%)';
-                    refreshBtn.style.transform = 'translateY(-1px)';
-                    refreshBtn.style.boxShadow = '0 6px 16px rgba(35, 134, 54, 0.5)';
-                };
-                refreshBtn.onmouseout = () => {
-                    refreshBtn.style.background = 'linear-gradient(135deg, #238636 0%, #2ea043 100%)';
-                    refreshBtn.style.transform = 'translateY(0)';
-                    refreshBtn.style.boxShadow = '0 4px 12px rgba(35, 134, 54, 0.4)';
+                refreshBtn.onmouseenter = () => {
+                    refreshBtn.style.transform = 'scale(1.05)';
+                    refreshBtn.style.boxShadow = '0 6px 16px rgba(255, 69, 0, 0.5)';
                 };
-                refreshBtn.onmousedown = () => {
-                    refreshBtn.style.transform = 'scale(0.95)';
-                };
-                refreshBtn.onmouseup = () => {
+                refreshBtn.onmouseleave = () => {
                     refreshBtn.style.transform = 'scale(1)';
+                    refreshBtn.style.boxShadow = '0 4px 12px rgba(255, 69, 0, 0.4)';
                 };
                 wrapper.appendChild(refreshBtn);
                 
@@ -769,6 +804,12 @@ class LightingControl3D(gr.HTML):
                     elevationAngle = 0;
                     updatePositions();
                     updatePropsAndTrigger();
+                    
+                    // Button click animation
+                    refreshBtn.style.transform = 'scale(0.95)';
+                    setTimeout(() => {
+                        refreshBtn.style.transform = 'scale(1)';
+                    }, 100);
                 });
                 
                 function updatePositions() {
@@ -783,31 +824,33 @@ class LightingControl3D(gr.HTML):
                     lightGroup.position.set(lightX, lightY, lightZ);
                     lightGroup.lookAt(CENTER);
                     
-                    azimuthHandle.position.set(
+                    azimuthHandleGroup.position.set(
                         AZIMUTH_RADIUS * Math.sin(azRad), 
                         0.05, 
                         AZIMUTH_RADIUS * Math.cos(azRad)
                     );
-                    elevationHandle.position.set(
-                        -0.8, 
+                    
+                    elevationHandleGroup.position.set(
+                        -1.0, 
                         ELEVATION_RADIUS * Math.sin(elRad) + CENTER.y, 
                         ELEVATION_RADIUS * Math.cos(elRad)
                     );
                     
-                    // Update prompt
+                    // Update info panel
                     const azSnap = snapToNearest(azimuthAngle, azimuthSteps);
                     const elSnap = snapToNearest(elevationAngle, elevationSteps);
-                    let prompt = '💡 Light source from';
+                    
+                    azValueDisplay.textContent = azSnap + '° (' + azimuthNames[azSnap] + ')';
+                    elValueDisplay.textContent = elSnap + '°' + (elSnap !== 0 ? ' (' + elevationNames[String(elSnap)] + ')' : '');
+                    
+                    // Update prompt
+                    let prompt = 'Light source from';
                     if (elSnap !== 0) {
                         prompt += ' ' + elevationNames[String(elSnap)];
                     } else {
                         prompt += ' the ' + azimuthNames[azSnap];
                     }
                     promptOverlay.textContent = prompt;
-                    
-                    // Pulse effect on diffuser based on position
-                    const pulseIntensity = 1.2 + Math.sin(Date.now() * 0.003) * 0.3;
-                    diffuserMat.emissiveIntensity = pulseIntensity;
                 }
                 
                 function updatePropsAndTrigger() {
@@ -818,7 +861,7 @@ class LightingControl3D(gr.HTML):
                     trigger('change', props.value);
                 }
                 
-                // Raycasting
+                // Raycasting for handle interaction
                 const raycaster = new THREE.Raycaster();
                 const mouse = new THREE.Vector2();
                 let isDragging = false;
@@ -827,19 +870,33 @@ class LightingControl3D(gr.HTML):
                 
                 const canvas = renderer.domElement;
                 
+                function getHandleFromGroup(group) {
+                    return group.children[0]; // The sphere is the first child
+                }
+                
                 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]);
+                    const intersects = raycaster.intersectObjects([
+                        getHandleFromGroup(azimuthHandleGroup), 
+                        getHandleFromGroup(elevationHandleGroup)
+                    ], true);
                     
                     if (intersects.length > 0) {
                         isDragging = true;
-                        dragTarget = intersects[0].object;
-                        dragTarget.material.emissiveIntensity = 1.2;
-                        dragTarget.scale.setScalar(1.4);
+                        // Find parent group
+                        let obj = intersects[0].object;
+                        while (obj.parent && !obj.userData.type) {
+                            obj = obj.parent;
+                        }
+                        dragTarget = obj;
+                        
+                        const handle = getHandleFromGroup(dragTarget);
+                        handle.material.emissiveIntensity = 0.8;
+                        dragTarget.scale.setScalar(1.3);
                         canvas.style.cursor = 'grabbing';
                     }
                 });
@@ -859,7 +916,7 @@ class LightingControl3D(gr.HTML):
                                 if (azimuthAngle < 0) azimuthAngle += 360;
                             }
                         } else if (dragTarget.userData.type === 'elevation') {
-                            const plane = new THREE.Plane(new THREE.Vector3(1, 0, 0), 0.8);
+                            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;
@@ -873,14 +930,26 @@ class LightingControl3D(gr.HTML):
                         updatePositions();
                     } else {
                         raycaster.setFromCamera(mouse, camera);
-                        const intersects = raycaster.intersectObjects([azimuthHandle, elevationHandle]);
-                        [azimuthHandle, elevationHandle].forEach(h => {
-                            h.material.emissiveIntensity = 0.6;
-                            h.scale.setScalar(1);
+                        const intersects = raycaster.intersectObjects([
+                            getHandleFromGroup(azimuthHandleGroup), 
+                            getHandleFromGroup(elevationHandleGroup)
+                        ], true);
+                        
+                        // Reset all handles
+                        [azimuthHandleGroup, elevationHandleGroup].forEach(group => {
+                            const handle = getHandleFromGroup(group);
+                            handle.material.emissiveIntensity = 0.4;
+                            group.scale.setScalar(1);
                         });
+                        
                         if (intersects.length > 0) {
-                            intersects[0].object.material.emissiveIntensity = 0.9;
-                            intersects[0].object.scale.setScalar(1.15);
+                            let obj = intersects[0].object;
+                            while (obj.parent && !obj.userData.type) {
+                                obj = obj.parent;
+                            }
+                            const handle = getHandleFromGroup(obj);
+                            handle.material.emissiveIntensity = 0.6;
+                            obj.scale.setScalar(1.15);
                             canvas.style.cursor = 'grab';
                         } else {
                             canvas.style.cursor = 'default';
@@ -890,10 +959,11 @@ class LightingControl3D(gr.HTML):
                 
                 const onMouseUp = () => {
                     if (dragTarget) {
-                        dragTarget.material.emissiveIntensity = 0.6;
+                        const handle = getHandleFromGroup(dragTarget);
+                        handle.material.emissiveIntensity = 0.4;
                         dragTarget.scale.setScalar(1);
                         
-                        // Snap and animate
+                        // Snap animation
                         const targetAz = snapToNearest(azimuthAngle, azimuthSteps);
                         const targetEl = snapToNearest(elevationAngle, elevationSteps);
                         
@@ -936,13 +1006,21 @@ class LightingControl3D(gr.HTML):
                     mouse.y = -((touch.clientY - rect.top) / rect.height) * 2 + 1;
                     
                     raycaster.setFromCamera(mouse, camera);
-                    const intersects = raycaster.intersectObjects([azimuthHandle, elevationHandle]);
+                    const intersects = raycaster.intersectObjects([
+                        getHandleFromGroup(azimuthHandleGroup), 
+                        getHandleFromGroup(elevationHandleGroup)
+                    ], true);
                     
                     if (intersects.length > 0) {
                         isDragging = true;
-                        dragTarget = intersects[0].object;
-                        dragTarget.material.emissiveIntensity = 1.2;
-                        dragTarget.scale.setScalar(1.4);
+                        let obj = intersects[0].object;
+                        while (obj.parent && !obj.userData.type) {
+                            obj = obj.parent;
+                        }
+                        dragTarget = obj;
+                        const handle = getHandleFromGroup(dragTarget);
+                        handle.material.emissiveIntensity = 0.8;
+                        dragTarget.scale.setScalar(1.3);
                     }
                 }, { passive: false });
                 
@@ -963,7 +1041,7 @@ class LightingControl3D(gr.HTML):
                                 if (azimuthAngle < 0) azimuthAngle += 360;
                             }
                         } else if (dragTarget.userData.type === 'elevation') {
-                            const plane = new THREE.Plane(new THREE.Vector3(1, 0, 0), 0.8);
+                            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;
@@ -991,23 +1069,14 @@ class LightingControl3D(gr.HTML):
                 // Initial update
                 updatePositions();
                 
-                // Render loop with animation
+                // Render loop with subtle animation
                 let time = 0;
                 function render() {
                     requestAnimationFrame(render);
-                    time += 0.016;
+                    time += 0.01;
                     
-                    // Subtle glow animation
-                    if (glowMat) {
-                        glowMat.opacity = 0.2 + Math.sin(time * 2) * 0.1;
-                    }
-                    
-                    // Indicator light blink
-                    if (indicatorLight) {
-                        indicatorLight.material.color.setHex(
-                            Math.sin(time * 3) > 0 ? 0x00ff00 : 0x004400
-                        );
-                    }
+                    // Subtle glow animation on diffuser
+                    diffuserMaterial.emissiveIntensity = 1.3 + Math.sin(time * 2) * 0.2;
                     
                     renderer.render(scene, camera);
                 }
@@ -1070,7 +1139,6 @@ 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).")