Update app.py

app.py

@@ -189,20 +189,11 @@ class LightingControl3D(gr.HTML):
                 wrapper.insertBefore(renderer.domElement, promptOverlay);
                 
                 // Lighting
-                scene.add(new THREE.AmbientLight(0xffffff, 0.3));
+                scene.add(new THREE.AmbientLight(0xffffff, 0.1));
                 
                 // Grid
                 scene.add(new THREE.GridHelper(8, 16, 0x333333, 0x222222));
                 
-                // Floor for shadows
-                const floorGeo = new THREE.PlaneGeometry(10, 10);
-                const floorMat = new THREE.ShadowMaterial({ opacity: 0.3 });
-                const floor = new THREE.Mesh(floorGeo, floorMat);
-                floor.rotation.x = -Math.PI / 2;
-                floor.position.y = 0;
-                floor.receiveShadow = true;
-                scene.add(floor);
-                
                 // Constants
                 const CENTER = new THREE.Vector3(0, 0.75, 0);
                 const BASE_DISTANCE = 2.5;
@@ -257,7 +248,6 @@ class LightingControl3D(gr.HTML):
                 const planeMaterial = new THREE.MeshStandardMaterial({ map: currentTexture, side: THREE.DoubleSide, roughness: 0.5, metalness: 0 });
                 let targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(1.2, 1.2), planeMaterial);
                 targetPlane.position.copy(CENTER);
-                targetPlane.castShadow = true;
                 targetPlane.receiveShadow = true;
                 scene.add(targetPlane);
                 
@@ -271,7 +261,6 @@ class LightingControl3D(gr.HTML):
                         scene.remove(targetPlane);
                         targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(1.2, 1.2), planeMaterial);
                         targetPlane.position.copy(CENTER);
-                        targetPlane.castShadow = true;
                         targetPlane.receiveShadow = true;
                         scene.add(targetPlane);
                         return;
@@ -304,7 +293,6 @@ class LightingControl3D(gr.HTML):
                                 planeMaterial
                             );
                             targetPlane.position.copy(CENTER);
-                            targetPlane.castShadow = true;
                             targetPlane.receiveShadow = true;
                             scene.add(targetPlane);
                         }
@@ -323,19 +311,19 @@ class LightingControl3D(gr.HTML):
                 const bulbMat = new THREE.MeshStandardMaterial({ color: 0xffff00, emissive: 0xffff00, emissiveIntensity: 1 });
                 const bulb = new THREE.Mesh(new THREE.SphereGeometry(0.15, 16, 16), bulbMat);
                 lightGroup.add(bulb);
-                const pointLight = new THREE.PointLight(0xffffff, 10, 0);
+                const pointLight = new THREE.PointLight(0xffffff, 5, 0, 2);
                 pointLight.castShadow = true;
-                pointLight.shadow.mapSize.width = 1024;
-                pointLight.shadow.mapSize.height = 1024;
-                pointLight.shadow.camera.near = 0.1;
-                pointLight.shadow.camera.far = 50;
+                pointLight.shadow.mapSize.width = 512;
+                pointLight.shadow.mapSize.height = 512;
+                pointLight.shadow.camera.near = 0.5;
+                pointLight.shadow.camera.far = 500;
                 lightGroup.add(pointLight);
                 scene.add(lightGroup);
                 
-                // GREEN: Azimuth ring
+                // BLUE: Azimuth ring
                 const azimuthRing = new THREE.Mesh(
                     new THREE.TorusGeometry(AZIMUTH_RADIUS, 0.04, 16, 64),
-                    new THREE.MeshStandardMaterial({ color: 0x00ff88, emissive: 0x00ff88, emissiveIntensity: 0.3 })
+                    new THREE.MeshStandardMaterial({ color: 0x007bff, emissive: 0x007bff, emissiveIntensity: 0.3 })
                 );
                 azimuthRing.rotation.x = Math.PI / 2;
                 azimuthRing.position.y = 0.05;
@@ -343,12 +331,12 @@ class LightingControl3D(gr.HTML):
                 
                 const azimuthHandle = new THREE.Mesh(
                     new THREE.SphereGeometry(0.18, 16, 16),
-                    new THREE.MeshStandardMaterial({ color: 0x00ff88, emissive: 0x00ff88, emissiveIntensity: 0.5 })
+                    new THREE.MeshStandardMaterial({ color: 0x007bff, emissive: 0x007bff, emissiveIntensity: 0.5 })
                 );
                 azimuthHandle.userData.type = 'azimuth';
                 scene.add(azimuthHandle);
                 
-                // PINK: Elevation arc
+                // RED: Elevation arc
                 const arcPoints = [];
                 for (let i = 0; i <= 32; i++) {
                     const angle = THREE.MathUtils.degToRad(-90 + (180 * i / 32));
@@ -357,17 +345,38 @@ class LightingControl3D(gr.HTML):
                 const arcCurve = new THREE.CatmullRomCurve3(arcPoints);
                 const elevationArc = new THREE.Mesh(
                     new THREE.TubeGeometry(arcCurve, 32, 0.04, 8, false),
-                    new THREE.MeshStandardMaterial({ color: 0xff69b4, emissive: 0xff69b4, emissiveIntensity: 0.3 })
+                    new THREE.MeshStandardMaterial({ color: 0xdc3545, emissive: 0xdc3545, emissiveIntensity: 0.3 })
                 );
                 scene.add(elevationArc);
                 
                 const elevationHandle = new THREE.Mesh(
                     new THREE.SphereGeometry(0.18, 16, 16),
-                    new THREE.MeshStandardMaterial({ color: 0xff69b4, emissive: 0xff69b4, emissiveIntensity: 0.5 })
+                    new THREE.MeshStandardMaterial({ color: 0xdc3545, emissive: 0xdc3545, emissiveIntensity: 0.5 })
                 );
                 elevationHandle.userData.type = 'elevation';
                 scene.add(elevationHandle);
                 
+                // Refresh button
+                const refreshBtn = document.createElement('div');
+                refreshBtn.innerHTML = '🔄';
+                refreshBtn.style.position = 'absolute';
+                refreshBtn.style.top = '10px';
+                refreshBtn.style.right = '10px';
+                refreshBtn.style.background = 'rgba(255,255,255,0.5)';
+                refreshBtn.style.padding = '5px';
+                refreshBtn.style.borderRadius = '50%';
+                refreshBtn.style.cursor = 'pointer';
+                refreshBtn.style.zIndex = '10';
+                refreshBtn.style.fontSize = '20px';
+                wrapper.appendChild(refreshBtn);
+                
+                refreshBtn.addEventListener('click', () => {
+                    azimuthAngle = 0;
+                    elevationAngle = 0;
+                    updatePositions();
+                    updatePropsAndTrigger();
+                });
+                
                 function updatePositions() {
                     const distance = BASE_DISTANCE;
                     const azRad = THREE.MathUtils.degToRad(azimuthAngle);
@@ -649,7 +658,7 @@ with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
             image = gr.Image(label="Input Image", type="pil", height=300)
             
             gr.Markdown("### 🎮 3D Lighting Control")
-            gr.Markdown("*Drag the colored handles: 🟢 Azimuth (Direction), 🩷 Elevation (Height)*")
+            gr.Markdown("*Drag the colored handles: 🔵 Azimuth (Direction), 🔴 Elevation (Height)*")
             
             lighting_3d = LightingControl3D(
                 value={"azimuth": 0, "elevation": 0},