Update app.py

app.py

@@ -141,7 +141,6 @@ 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()))
     
@@ -246,9 +245,6 @@ class LightingControl3D(gr.HTML):
                 const scene = new THREE.Scene();
                 scene.background = new THREE.Color(0x1a1a1a);
                 
-                // Fog for light ray effect
-                scene.fog = new THREE.FogExp2(0x1a1a1a, 0.05);
-                
                 const camera = new THREE.PerspectiveCamera(50, wrapper.clientWidth / wrapper.clientHeight, 0.1, 1000);
                 camera.position.set(4.5, 3, 4.5);
                 camera.lookAt(0, 0.75, 0);
@@ -388,57 +384,58 @@ class LightingControl3D(gr.HTML):
                     updateTextureFromUrl(props.imageUrl);
                 }
                 
-                // --- NEW LIGHT MODEL: TORCH WITH RAYS ---
+                // --- NEW LIGHT MODEL: STUDIO SQUARE WITH RAYS ---
                 const lightGroup = new THREE.Group();
 
-                // 1. Torch Handle (Dark Metal Cylinder)
-                const handleGeo = new THREE.CylinderGeometry(0.06, 0.06, 0.5, 16);
-                const torchMat = new THREE.MeshStandardMaterial({ 
+                // 1. Studio Housing (Black/Dark Grey)
+                const housingGeo = new THREE.BoxGeometry(0.7, 0.7, 0.2);
+                const housingMat = new THREE.MeshStandardMaterial({ 
                     color: 0x222222, 
-                    roughness: 0.4, 
-                    metalness: 0.8 
+                    roughness: 0.3,
+                    metalness: 0.7
                 });
-                const handle = new THREE.Mesh(handleGeo, torchMat);
-                handle.rotation.x = Math.PI / 2;
-                handle.position.z = 0.25;
-                lightGroup.add(handle);
-
-                // 2. Torch Head (Flared Bezel)
-                const headGeo = new THREE.CylinderGeometry(0.12, 0.07, 0.2, 32);
-                const head = new THREE.Mesh(headGeo, torchMat);
-                head.rotation.x = Math.PI / 2;
-                head.position.z = -0.1;
-                lightGroup.add(head);
-
-                // 3. Bulb/Lens (Bright Emissive Circle)
-                const lensGeo = new THREE.CircleGeometry(0.1, 32);
-                const lensMat = new THREE.MeshStandardMaterial({ 
+                const housing = new THREE.Mesh(housingGeo, housingMat);
+                
+                // 2. Light Surface (Bright White Square)
+                const faceGeo = new THREE.PlaneGeometry(0.65, 0.65);
+                const faceMat = new THREE.MeshStandardMaterial({ 
                     color: 0xffffff, 
-                    emissive: 0xffffff, 
-                    emissiveIntensity: 3.0 
+                    emissive: 0xffffff,
+                    emissiveIntensity: 3.0, 
+                    roughness: 0.0
                 });
-                const lens = new THREE.Mesh(lensGeo, lensMat);
-                lens.position.z = -0.201; // Slightly in front of head
-                lightGroup.add(lens);
-
-                // 4. Light Rays (Volumetric Cone)
-                const beamGeo = new THREE.ConeGeometry(0.5, 3.0, 32, 1, true); // Open ended cone
+                const face = new THREE.Mesh(faceGeo, faceMat);
+                face.position.z = 0.105; // Slightly in front of housing
+                housing.add(face);
+                
+                // 3. Light Rays (Volumetric Beam Effect)
+                // Using a transparent cylinder to simulate a beam
+                const beamHeight = 4.0;
+                // Cylinder top (0.5) is light size, bottom (1.2) is spread
+                const beamGeo = new THREE.CylinderGeometry(0.5, 1.2, beamHeight, 32, 1, true);
+                
+                // Shift geometry so narrow end starts at 0 and extends positive
+                beamGeo.translate(0, -beamHeight / 2, 0);
+                beamGeo.rotateX(-Math.PI / 2); // Rotate to point along +Z axis
+                
                 const beamMat = new THREE.MeshBasicMaterial({
-                    color: 0xffffee,
+                    color: 0xffffff,
                     transparent: true,
-                    opacity: 0.12,
+                    opacity: 0.06,
                     side: THREE.DoubleSide,
-                    depthWrite: false, // Prevents z-fighting transparency issues
-                    blending: THREE.AdditiveBlending // Glow effect
+                    depthWrite: false,
+                    blending: THREE.AdditiveBlending
                 });
+                
                 const beam = new THREE.Mesh(beamGeo, beamMat);
-                beam.rotation.x = -Math.PI / 2; // Point forward
-                beam.position.z = -1.7; // Offset by half height + lens pos
-                lightGroup.add(beam);
+                beam.position.z = 0.12; // Start just in front of the face
+                housing.add(beam);
+                
+                lightGroup.add(housing);
                 
-                // Actual Light Source (Invisible logic)
-                const spotLight = new THREE.SpotLight(0xffffff, 10, 10, Math.PI / 6, 0.5, 1);
-                spotLight.position.set(0, 0, -0.05);
+                // Actual Light Source
+                const spotLight = new THREE.SpotLight(0xffffff, 15, 20, Math.PI / 3, 0.5, 1);
+                spotLight.position.set(0, 0, 0.1);
                 spotLight.castShadow = true;
                 spotLight.shadow.mapSize.width = 1024;
                 spotLight.shadow.mapSize.height = 1024;
@@ -494,7 +491,7 @@ class LightingControl3D(gr.HTML):
                 elevationHandle.userData.type = 'elevation';
                 scene.add(elevationHandle);
                 
-                // --- REFRESH BUTTON (Redesigned) ---
+                // --- REFRESH BUTTON ---
                 const refreshBtn = document.createElement('button');
                 refreshBtn.innerHTML = 'Reset View';
                 refreshBtn.style.position = 'absolute';
@@ -794,7 +791,7 @@ css = '''
 #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("Qwen-Image-Edit-2511-3D-Lighting-Control", elem_id="main-title")
     gr.Markdown("Control lighting directions using the **3D viewport** or **sliders**. Use [Multi-Angle-Lighting](https://huggingface.co/dx8152/Qwen-Edit-2509-Multi-Angle-Lighting) LoRA for precise lighting control, paired with [Rapid-AIO-V19](https://huggingface.co/prithivMLmods/Qwen-Image-Edit-Rapid-AIO-V19).")
     
     with gr.Row():