Update app.py

app.py

@@ -316,19 +316,19 @@ class LightingControl3D(gr.HTML):
                     updateTextureFromUrl(props.imageUrl);
                 }
                 
-                // Create LED grid texture
+                // Create LED texture
                 function createLEDTexture() {
                     const canvas = document.createElement('canvas');
-                    canvas.width = 128;
-                    canvas.height = 128;
+                    canvas.width = 64;
+                    canvas.height = 64;
                     const ctx = canvas.getContext('2d');
                     ctx.fillStyle = '#000000';
-                    ctx.fillRect(0, 0, 128, 128);
-                    for (let i = 0; i < 12; i++) {
-                        for (let j = 0; j < 12; j++) {
+                    ctx.fillRect(0, 0, 64, 64);
+                    for (let i = 0; i < 8; i++) {
+                        for (let j = 0; j < 8; j++) {
                             ctx.fillStyle = '#ffffff';
                             ctx.beginPath();
-                            ctx.arc(6 + 10 * i, 6 + 10 * j, 4, 0, Math.PI * 2);
+                            ctx.arc(4 + 8 * i, 4 + 8 * j, 3, 0, Math.PI * 2);
                             ctx.fill();
                         }
                     }
@@ -337,29 +337,26 @@ class LightingControl3D(gr.HTML):
                 
                 // Studio LED light model
                 const lightGroup = new THREE.Group();
-                
-                // LED panel
                 const ledTexture = createLEDTexture();
                 const ledMat = new THREE.MeshStandardMaterial({
                     color: 0x111111,
                     emissive: 0xffffff,
-                    emissiveIntensity: 4,
+                    emissiveIntensity: 2,
                     emissiveMap: ledTexture,
-                    roughness: 0.8,
-                    metalness: 0.2
+                    roughness: 0.5,
+                    metalness: 0
                 });
                 const ledPanel = new THREE.Mesh(new THREE.BoxGeometry(0.6, 0.6, 0.1), ledMat);
                 lightGroup.add(ledPanel);
                 
-                // Spotlight
-                const spotLight = new THREE.SpotLight(0xffeecc, 15, 10, Math.PI / 3, 0.3, 1);
+                const spotLight = new THREE.SpotLight(0xffffff, 10, 10, Math.PI / 3, 1, 1);
                 spotLight.position.set(0, 0, -0.05);
                 spotLight.castShadow = true;
                 spotLight.shadow.mapSize.width = 1024;
                 spotLight.shadow.mapSize.height = 1024;
                 spotLight.shadow.camera.near = 0.5;
-                spotLight.shadow.camera.far = 10;
-                spotLight.shadow.bias = -0.0001;
+                spotLight.shadow.camera.far = 500;
+                spotLight.shadow.bias = -0.005;
                 lightGroup.add(spotLight);
                 
                 const lightTarget = new THREE.Object3D();
@@ -367,37 +364,6 @@ class LightingControl3D(gr.HTML):
                 scene.add(lightTarget);
                 spotLight.target = lightTarget;
                 
-                // Visible light beam (outer cone - wide, faint)
-                const outerBeam = new THREE.Mesh(
-                    new THREE.ConeGeometry(2.2, 6, 64),
-                    new THREE.MeshBasicMaterial({
-                        color: 0xffeecc,
-                        transparent: true,
-                        opacity: 0.08,
-                        blending: THREE.AdditiveBlending,
-                        depthWrite: false,
-                        side: THREE.DoubleSide
-                    })
-                );
-                outerBeam.rotation.x = -Math.PI / 2;
-                outerBeam.position.z = -0.05;
-                lightGroup.add(outerBeam);
-                
-                // Visible light beam (inner cone - brighter core)
-                const innerBeam = new THREE.Mesh(
-                    new THREE.ConeGeometry(0.9, 5, 32),
-                    new THREE.MeshBasicMaterial({
-                        color: 0xffffff,
-                        transparent: true,
-                        opacity: 0.25,
-                        blending: THREE.AdditiveBlending,
-                        depthWrite: false
-                    })
-                );
-                innerBeam.rotation.x = -Math.PI / 2;
-                innerBeam.position.z = -0.05;
-                lightGroup.add(innerBeam);
-                
                 scene.add(lightGroup);
                 
                 // BLUE: Azimuth ring
@@ -598,8 +564,7 @@ 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];
@@ -685,14 +650,16 @@ class LightingControl3D(gr.HTML):
                 
                 wrapper._updateTexture = updateTextureFromUrl;
                 
-                // Watch for prop changes
+                // Watch for prop changes (imageUrl and value)
                 let lastImageUrl = props.imageUrl;
                 let lastValue = JSON.stringify(props.value);
                 setInterval(() => {
+                    // Check imageUrl changes
                     if (props.imageUrl !== lastImageUrl) {
                         lastImageUrl = props.imageUrl;
                         updateTextureFromUrl(props.imageUrl);
                     }
+                    // Check value changes (from sliders)
                     const currentValue = JSON.stringify(props.value);
                     if (currentValue !== lastValue) {
                         lastValue = currentValue;