Update app.py

app.py

@@ -147,7 +147,7 @@ def update_dimensions_on_upload(image):
 # --- 3D Lighting Control Component ---
 class LightingControl3D(gr.HTML):
     """
-    An enhanced 3D lighting control component using Three.js with orbit controls and shadows.
+    A 3D lighting control component using Three.js.
     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' || typeof THREE.OrbitControls === 'undefined') {
+                if (typeof THREE === 'undefined') {
                     setTimeout(initScene, 100);
                     return;
                 }
@@ -188,29 +188,20 @@ class LightingControl3D(gr.HTML):
                 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.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
-                const grid = new THREE.GridHelper(10, 20, 0x888888, 0x444444);
-                grid.position.y = 0.01;
-                scene.add(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);
@@ -332,12 +323,12 @@ 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, 5, 0);
+                const pointLight = new THREE.PointLight(0xffffff, 10, 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;
+                pointLight.shadow.camera.far = 50;
                 lightGroup.add(pointLight);
                 scene.add(lightGroup);
                 
@@ -436,7 +427,6 @@ class LightingControl3D(gr.HTML):
                         dragTarget.scale.setScalar(1.3);
                         dragStartMouse.copy(mouse);
                         canvas.style.cursor = 'grabbing';
-                        controls.enabled = false; // Disable orbit while dragging handles
                     }
                 });
                 
@@ -514,7 +504,6 @@ class LightingControl3D(gr.HTML):
                     isDragging = false;
                     dragTarget = null;
                     canvas.style.cursor = 'default';
-                    controls.enabled = true; // Re-enable orbit
                 };
                 
                 canvas.addEventListener('mouseup', onMouseUp);
@@ -536,7 +525,6 @@ class LightingControl3D(gr.HTML):
                         dragTarget.material.emissiveIntensity = 1.0;
                         dragTarget.scale.setScalar(1.3);
                         dragStartMouse.copy(mouse);
-                        controls.enabled = false;
                     }
                 }, { passive: false });
                 
@@ -584,7 +572,6 @@ class LightingControl3D(gr.HTML):
                 // Render loop
                 function render() {
                     requestAnimationFrame(render);
-                    controls.update();
                     renderer.render(scene, camera);
                 }
                 render();
@@ -650,9 +637,9 @@ css = '''
 '''
 with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
     gr.Markdown("""
-    # 🎬 Qwen Image Edit 2511 — Enhanced 3D Lighting Control
+    # 🎬 Qwen Image Edit 2511 — 3D Lighting Control
     
-    Control lighting directions using the **3D viewport** or **sliders**. Now with orbit controls (drag to rotate view) and shadows for better visualization.
+    Control lighting directions using the **3D viewport** or **sliders**.
     Using [dx8152/Qwen-Edit-2509-Multi-Angle-Lighting] for precise lighting control.
     """)
     
@@ -661,8 +648,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("### 🎮 Enhanced 3D Lighting Control")
-            gr.Markdown("*Drag the colored handles: 🟢 Azimuth (Direction), 🩷 Elevation (Height). Orbit the view by dragging the background.*")
+            gr.Markdown("### 🎮 3D Lighting Control")
+            gr.Markdown("*Drag the colored handles: 🟢 Azimuth (Direction), 🩷 Elevation (Height)*")
             
             lighting_3d = LightingControl3D(
                 value={"azimuth": 0, "elevation": 0},
@@ -789,6 +776,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><script src="https://cdn.jsdelivr.net/npm/three@0.128/examples/js/controls/OrbitControls.js"></script>'
+    head = '<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>'
     css = '.fillable{max-width: 1200px !important}'
     demo.launch(head=head, css=css)