Update app.py

app.py

@@ -147,7 +147,7 @@ def update_dimensions_on_upload(image):
 # --- 3D Lighting Control Component ---
 class LightingControl3D(gr.HTML):
     """
-    A 3D lighting control component using Three.js.
+    An enhanced 3D lighting control component using Three.js with orbit controls and shadows.
     Outputs: { azimuth: number, elevation: number }
     Accepts imageUrl prop to display user's uploaded image on the plane.
     """
@@ -168,7 +168,7 @@ class LightingControl3D(gr.HTML):
             
             // Wait for THREE to load
             const initScene = () => {
-                if (typeof THREE === 'undefined') {
+                if (typeof THREE === 'undefined' || typeof THREE.OrbitControls === 'undefined') {
                     setTimeout(initScene, 100);
                     return;
                 }
@@ -182,15 +182,35 @@ class LightingControl3D(gr.HTML):
                 camera.lookAt(0, 0.75, 0);
                 
                 const renderer = new THREE.WebGLRenderer({ antialias: true });
-                renderer.setSize(wrapper.clientWidth / wrapper.clientHeight);
+                renderer.setSize(wrapper.clientWidth, wrapper.clientHeight);
                 renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+                renderer.shadowMap.enabled = true;
+                renderer.shadowMap.type = THREE.PCFSoftShadowMap;
                 wrapper.insertBefore(renderer.domElement, promptOverlay);
                 
+                // Orbit controls
+                const controls = new THREE.OrbitControls(camera, renderer.domElement);
+                controls.target.set(0, 0.75, 0);
+                controls.enableDamping = true;
+                controls.dampingFactor = 0.05;
+                controls.update();
+                
                 // Lighting
-                scene.add(new THREE.AmbientLight(0xffffff, 0.2));
+                scene.add(new THREE.AmbientLight(0xffffff, 0.3));
+                
+                // Ground
+                const groundGeo = new THREE.PlaneGeometry(10, 10);
+                const groundMat = new THREE.ShadowMaterial({ opacity: 0.3 });
+                const ground = new THREE.Mesh(groundGeo, groundMat);
+                ground.rotation.x = -Math.PI / 2;
+                ground.position.y = 0;
+                ground.receiveShadow = true;
+                scene.add(ground);
                 
                 // Grid
-                scene.add(new THREE.GridHelper(8, 16, 0x333333, 0x222222));
+                const grid = new THREE.GridHelper(10, 20, 0x888888, 0x444444);
+                grid.position.y = 0.01;
+                scene.add(grid);
                 
                 // Constants
                 const CENTER = new THREE.Vector3(0, 0.75, 0);
@@ -246,6 +266,8 @@ 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);
                 
                 // Function to update texture from image URL
@@ -258,6 +280,8 @@ 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;
                     }
@@ -289,6 +313,8 @@ class LightingControl3D(gr.HTML):
                                 planeMaterial
                             );
                             targetPlane.position.copy(CENTER);
+                            targetPlane.castShadow = true;
+                            targetPlane.receiveShadow = true;
                             scene.add(targetPlane);
                         }
                     }, undefined, (err) => {
@@ -307,6 +333,11 @@ class LightingControl3D(gr.HTML):
                 const bulb = new THREE.Mesh(new THREE.SphereGeometry(0.15, 16, 16), bulbMat);
                 lightGroup.add(bulb);
                 const pointLight = new THREE.PointLight(0xffffff, 5, 0);
+                pointLight.castShadow = true;
+                pointLight.shadow.mapSize.width = 1024;
+                pointLight.shadow.mapSize.height = 1024;
+                pointLight.shadow.camera.near = 0.1;
+                pointLight.shadow.camera.far = 20;
                 lightGroup.add(pointLight);
                 scene.add(lightGroup);
                 
@@ -405,6 +436,7 @@ class LightingControl3D(gr.HTML):
                         dragTarget.scale.setScalar(1.3);
                         dragStartMouse.copy(mouse);
                         canvas.style.cursor = 'grabbing';
+                        controls.enabled = false; // Disable orbit while dragging handles
                     }
                 });
                 
@@ -482,6 +514,7 @@ class LightingControl3D(gr.HTML):
                     isDragging = false;
                     dragTarget = null;
                     canvas.style.cursor = 'default';
+                    controls.enabled = true; // Re-enable orbit
                 };
                 
                 canvas.addEventListener('mouseup', onMouseUp);
@@ -503,6 +536,7 @@ class LightingControl3D(gr.HTML):
                         dragTarget.material.emissiveIntensity = 1.0;
                         dragTarget.scale.setScalar(1.3);
                         dragStartMouse.copy(mouse);
+                        controls.enabled = false;
                     }
                 }, { passive: false });
                 
@@ -550,6 +584,7 @@ class LightingControl3D(gr.HTML):
                 // Render loop
                 function render() {
                     requestAnimationFrame(render);
+                    controls.update();
                     renderer.render(scene, camera);
                 }
                 render();
@@ -615,9 +650,9 @@ css = '''
 '''
 with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
     gr.Markdown("""
-    # 🎬 Qwen Image Edit 2511 — 3D Lighting Control
+    # 🎬 Qwen Image Edit 2511 — Enhanced 3D Lighting Control
     
-    Control lighting directions using the **3D viewport** or **sliders**.
+    Control lighting directions using the **3D viewport** or **sliders**. Now with orbit controls (drag to rotate view) and shadows for better visualization.
     Using [dx8152/Qwen-Edit-2509-Multi-Angle-Lighting] for precise lighting control.
     """)
     
@@ -626,8 +661,8 @@ with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
         with gr.Column(scale=1):
             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("### 🎮 Enhanced 3D Lighting Control")
+            gr.Markdown("*Drag the colored handles: 🟢 Azimuth (Direction), 🩷 Elevation (Height). Orbit the view by dragging the background.*")
             
             lighting_3d = LightingControl3D(
                 value={"azimuth": 0, "elevation": 0},
@@ -754,6 +789,6 @@ with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
     )
     
 if __name__ == "__main__":
-    head = '<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>'
+    head = '<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script><script src="https://cdn.jsdelivr.net/npm/three@0.128/examples/js/controls/OrbitControls.js"></script>'
     css = '.fillable{max-width: 1200px !important}'
     demo.launch(head=head, css=css)