Update app.py

app.py

@@ -88,7 +88,7 @@ device = "cuda" if torch.cuda.is_available() else "cpu"
 pipe = QwenImageEditPlusPipeline.from_pretrained(
     "Qwen/Qwen-Image-Edit-2511",
     transformer=QwenImageTransformer2DModel.from_pretrained(
-        "prithivMLmods/Qwen-Image-Edit-Rapid-AIO-V4",
+        "prithivMLmods/Qwen-Image-Edit-Rapid-AIO-V19",
         torch_dtype=dtype,
         device_map='cuda'
     ),
@@ -225,26 +225,8 @@ class LightingControl3D(gr.HTML):
             value = {"azimuth": 0, "elevation": 0}
         
         html_template = """
-        <div id="lighting-control-wrapper" style="width: 100%; height: 450px; position: relative; background: linear-gradient(180deg, #0d1117 0%, #161b22 50%, #21262d 100%); border-radius: 12px; overflow: hidden; border: 1px solid #30363d;">
-            <div id="prompt-overlay" style="position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.85); padding: 10px 20px; border-radius: 20px; font-family: 'Segoe UI', sans-serif; font-size: 13px; color: #58a6ff; white-space: nowrap; z-index: 10; border: 1px solid #30363d; box-shadow: 0 4px 12px rgba(0,0,0,0.4);"></div>
-            <div id="refresh-btn" style="position: absolute; top: 12px; right: 12px; background: linear-gradient(135deg, #238636 0%, #2ea043 100%); padding: 8px 16px; border-radius: 8px; cursor: pointer; z-index: 10; font-family: 'Segoe UI', sans-serif; font-size: 12px; font-weight: 600; color: white; display: flex; align-items: center; gap: 6px; box-shadow: 0 2px 8px rgba(46,160,67,0.3); transition: all 0.2s ease;">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M23 4v6h-6"></path>
-                    <path d="M1 20v-6h6"></path>
-                    <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
-                </svg>
-                Reset
-            </div>
-            <div id="info-panel" style="position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,0.75); padding: 8px 12px; border-radius: 8px; font-family: 'Segoe UI', sans-serif; font-size: 11px; color: #8b949e; z-index: 10; border: 1px solid #30363d;">
-                <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 4px;">
-                    <span style="width: 10px; height: 10px; background: #ffd700; border-radius: 50%; display: inline-block;"></span>
-                    <span>Azimuth (Direction)</span>
-                </div>
-                <div style="display: flex; align-items: center; gap: 8px;">
-                    <span style="width: 10px; height: 10px; background: #0088ff; border-radius: 50%; display: inline-block;"></span>
-                    <span>Elevation (Height)</span>
-                </div>
-            </div>
+        <div id="lighting-control-wrapper" style="width: 100%; height: 450px; position: relative; background: #1a1a1a; border-radius: 12px; overflow: hidden;">
+            <div id="prompt-overlay" style="position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.8); padding: 8px 16px; border-radius: 8px; font-family: monospace; font-size: 12px; color: #00ff88; white-space: nowrap; z-index: 10;"></div>
         </div>
         """
         
@@ -252,17 +234,6 @@ class LightingControl3D(gr.HTML):
         (() => {
             const wrapper = element.querySelector('#lighting-control-wrapper');
             const promptOverlay = element.querySelector('#prompt-overlay');
-            const refreshBtn = element.querySelector('#refresh-btn');
-            
-            // Hover effects for refresh button
-            refreshBtn.addEventListener('mouseenter', () => {
-                refreshBtn.style.transform = 'scale(1.05)';
-                refreshBtn.style.boxShadow = '0 4px 16px rgba(46,160,67,0.5)';
-            });
-            refreshBtn.addEventListener('mouseleave', () => {
-                refreshBtn.style.transform = 'scale(1)';
-                refreshBtn.style.boxShadow = '0 2px 8px rgba(46,160,67,0.3)';
-            });
             
             // Wait for THREE to load
             const initScene = () => {
@@ -273,10 +244,7 @@ class LightingControl3D(gr.HTML):
                 
                 // Scene setup
                 const scene = new THREE.Scene();
-                scene.background = new THREE.Color(0x0d1117);
-                
-                // Add fog for depth
-                scene.fog = new THREE.Fog(0x0d1117, 8, 20);
+                scene.background = new THREE.Color(0x1a1a1a);
                 
                 const camera = new THREE.PerspectiveCamera(50, wrapper.clientWidth / wrapper.clientHeight, 0.1, 1000);
                 camera.position.set(4.5, 3, 4.5);
@@ -287,46 +255,29 @@ class LightingControl3D(gr.HTML):
                 renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
                 renderer.shadowMap.enabled = true;
                 renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-                renderer.toneMapping = THREE.ACESFilmicToneMapping;
-                renderer.toneMappingExposure = 1.2;
-                wrapper.insertBefore(renderer.domElement, wrapper.firstChild);
+                wrapper.insertBefore(renderer.domElement, promptOverlay);
                 
-                // Ambient lighting
-                scene.add(new THREE.AmbientLight(0x404050, 0.3));
+                // Lighting for the scene
+                scene.add(new THREE.AmbientLight(0xffffff, 0.1));
                 
-                // Ground plane with reflective material
-                const groundGeometry = new THREE.PlaneGeometry(12, 12);
-                const groundMaterial = new THREE.MeshStandardMaterial({ 
-                    color: 0x1a1a2e,
-                    roughness: 0.8,
-                    metalness: 0.2
-                });
-                const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+                // Ground plane for shadows
+                const ground = new THREE.Mesh(
+                    new THREE.PlaneGeometry(10, 10),
+                    new THREE.ShadowMaterial({ opacity: 0.3 })
+                );
                 ground.rotation.x = -Math.PI / 2;
                 ground.position.y = 0;
                 ground.receiveShadow = true;
                 scene.add(ground);
                 
-                // Shadow plane
-                const shadowPlane = new THREE.Mesh(
-                    new THREE.PlaneGeometry(10, 10),
-                    new THREE.ShadowMaterial({ opacity: 0.5 })
-                );
-                shadowPlane.rotation.x = -Math.PI / 2;
-                shadowPlane.position.y = 0.01;
-                shadowPlane.receiveShadow = true;
-                scene.add(shadowPlane);
-                
-                // Custom grid
-                const gridHelper = new THREE.GridHelper(10, 20, 0x30363d, 0x21262d);
-                gridHelper.position.y = 0.02;
-                scene.add(gridHelper);
+                // Grid
+                scene.add(new THREE.GridHelper(8, 16, 0x333333, 0x222222));
                 
                 // Constants
                 const CENTER = new THREE.Vector3(0, 0.75, 0);
-                const BASE_DISTANCE = 2.8;
-                const AZIMUTH_RADIUS = 2.6;
-                const ELEVATION_RADIUS = 2.0;
+                const BASE_DISTANCE = 2.5;
+                const AZIMUTH_RADIUS = 2.4;
+                const ELEVATION_RADIUS = 1.8;
                 
                 // State
                 let azimuthAngle = props.value?.azimuth || 0;
@@ -346,98 +297,51 @@ class LightingControl3D(gr.HTML):
                     return steps.reduce((prev, curr) => Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);
                 }
                 
-                // Create placeholder texture
+                // Create placeholder texture (smiley face)
                 function createPlaceholderTexture() {
                     const canvas = document.createElement('canvas');
                     canvas.width = 256;
                     canvas.height = 256;
                     const ctx = canvas.getContext('2d');
-                    
-                    // Dark gradient background
-                    const gradient = ctx.createLinearGradient(0, 0, 256, 256);
-                    gradient.addColorStop(0, '#2d333b');
-                    gradient.addColorStop(1, '#22272e');
-                    ctx.fillStyle = gradient;
+                    ctx.fillStyle = '#3a3a4a';
                     ctx.fillRect(0, 0, 256, 256);
-                    
-                    // Border
-                    ctx.strokeStyle = '#444c56';
-                    ctx.lineWidth = 4;
-                    ctx.strokeRect(8, 8, 240, 240);
-                    
-                    // Icon - image placeholder
-                    ctx.strokeStyle = '#6e7681';
-                    ctx.lineWidth = 3;
+                    ctx.fillStyle = '#ffcc99';
                     ctx.beginPath();
-                    ctx.roundRect(80, 90, 96, 76, 8);
-                    ctx.stroke();
-                    
-                    // Mountain icon
-                    ctx.fillStyle = '#6e7681';
-                    ctx.beginPath();
-                    ctx.moveTo(90, 150);
-                    ctx.lineTo(115, 115);
-                    ctx.lineTo(140, 145);
-                    ctx.lineTo(155, 125);
-                    ctx.lineTo(166, 150);
-                    ctx.closePath();
+                    ctx.arc(128, 128, 80, 0, Math.PI * 2);
                     ctx.fill();
-                    
-                    // Sun
+                    ctx.fillStyle = '#333';
                     ctx.beginPath();
-                    ctx.arc(150, 110, 12, 0, Math.PI * 2);
+                    ctx.arc(100, 110, 10, 0, Math.PI * 2);
+                    ctx.arc(156, 110, 10, 0, Math.PI * 2);
                     ctx.fill();
-                    
-                    // Text
-                    ctx.fillStyle = '#8b949e';
-                    ctx.font = '14px sans-serif';
-                    ctx.textAlign = 'center';
-                    ctx.fillText('Upload Image', 128, 195);
-                    
+                    ctx.strokeStyle = '#333';
+                    ctx.lineWidth = 3;
+                    ctx.beginPath();
+                    ctx.arc(128, 130, 35, 0.2, Math.PI - 0.2);
+                    ctx.stroke();
                     return new THREE.CanvasTexture(canvas);
                 }
                 
                 // Target image plane
                 let currentTexture = createPlaceholderTexture();
-                const planeMaterial = new THREE.MeshStandardMaterial({ 
-                    map: currentTexture, 
-                    side: THREE.DoubleSide, 
-                    roughness: 0.4, 
-                    metalness: 0.1
-                });
-                let targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(1.4, 1.4), planeMaterial);
+                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.receiveShadow = true;
-                targetPlane.castShadow = true;
                 scene.add(targetPlane);
                 
-                // Add frame around the image
-                const frameGeometry = new THREE.BoxGeometry(1.5, 1.5, 0.05);
-                const frameMaterial = new THREE.MeshStandardMaterial({ 
-                    color: 0x30363d,
-                    roughness: 0.3,
-                    metalness: 0.7
-                });
-                const frame = new THREE.Mesh(frameGeometry, frameMaterial);
-                frame.position.set(CENTER.x, CENTER.y, -0.03);
-                scene.add(frame);
-                
                 // Function to update texture from image URL
                 function updateTextureFromUrl(url) {
                     if (!url) {
+                        // Reset to placeholder
                         planeMaterial.map = createPlaceholderTexture();
                         planeMaterial.needsUpdate = true;
+                        // Reset plane to square
                         scene.remove(targetPlane);
-                        targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(1.4, 1.4), planeMaterial);
+                        targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(1.2, 1.2), planeMaterial);
                         targetPlane.position.copy(CENTER);
                         targetPlane.receiveShadow = true;
-                        targetPlane.castShadow = true;
                         scene.add(targetPlane);
-                        
-                        // Reset frame
-                        frame.geometry.dispose();
-                        frame.geometry = new THREE.BoxGeometry(1.5, 1.5, 0.05);
-                        frame.position.set(CENTER.x, CENTER.y, -0.03);
                         return;
                     }
                     
@@ -449,10 +353,11 @@ class LightingControl3D(gr.HTML):
                         planeMaterial.map = texture;
                         planeMaterial.needsUpdate = true;
                         
+                        // Adjust plane aspect ratio to match image
                         const img = texture.image;
                         if (img && img.width && img.height) {
                             const aspect = img.width / img.height;
-                            const maxSize = 1.6;
+                            const maxSize = 1.5;
                             let planeWidth, planeHeight;
                             if (aspect > 1) {
                                 planeWidth = maxSize;
@@ -468,102 +373,54 @@ class LightingControl3D(gr.HTML):
                             );
                             targetPlane.position.copy(CENTER);
                             targetPlane.receiveShadow = true;
-                            targetPlane.castShadow = true;
                             scene.add(targetPlane);
-                            
-                            // Update frame
-                            frame.geometry.dispose();
-                            frame.geometry = new THREE.BoxGeometry(planeWidth + 0.1, planeHeight + 0.1, 0.05);
-                            frame.position.set(CENTER.x, CENTER.y, -0.03);
                         }
                     }, undefined, (err) => {
                         console.error('Failed to load texture:', err);
                     });
                 }
                 
+                // Check for initial imageUrl
                 if (props.imageUrl) {
                     updateTextureFromUrl(props.imageUrl);
                 }
                 
-                // ==================== SOFTBOX LIGHT ====================
+                // --- NEW LIGHT MODEL: SOFTBOX ---
                 const lightGroup = new THREE.Group();
-                
-                // Softbox frame (outer box) - RED
-                const softboxWidth = 0.8;
-                const softboxHeight = 0.8;
-                const softboxDepth = 0.3;
-                
-                // Main softbox body
-                const softboxGeometry = new THREE.BoxGeometry(softboxWidth, softboxHeight, softboxDepth);
-                const softboxMaterial = new THREE.MeshStandardMaterial({
-                    color: 0xcc2222,
-                    roughness: 0.3,
-                    metalness: 0.6
+
+                // 1. Softbox Housing (Red)
+                const housingGeo = new THREE.BoxGeometry(0.6, 0.6, 0.4);
+                const housingMat = new THREE.MeshStandardMaterial({ 
+                    color: 0xff0000,   // RED HOUSING
+                    roughness: 0.5,
+                    metalness: 0.1
                 });
-                const softboxBody = new THREE.Mesh(softboxGeometry, softboxMaterial);
-                softboxBody.castShadow = true;
-                lightGroup.add(softboxBody);
+                const housing = new THREE.Mesh(housingGeo, housingMat);
                 
-                // Softbox front diffuser (white glowing panel)
-                const diffuserGeometry = new THREE.PlaneGeometry(softboxWidth - 0.08, softboxHeight - 0.08);
-                const diffuserMaterial = new THREE.MeshStandardMaterial({
-                    color: 0xffffff,
+                // 2. Diffuser Panel (White, Emissive)
+                const diffuserGeo = new THREE.PlaneGeometry(0.55, 0.55);
+                const diffuserMat = new THREE.MeshStandardMaterial({ 
+                    color: 0xffffff,    // WHITE LIGHT
                     emissive: 0xffffff,
-                    emissiveIntensity: 2.5,
-                    roughness: 0.1,
-                    metalness: 0,
-                    transparent: true,
-                    opacity: 0.95
+                    emissiveIntensity: 2.0, 
+                    roughness: 0.2
                 });
-                const diffuser = new THREE.Mesh(diffuserGeometry, diffuserMaterial);
-                diffuser.position.z = softboxDepth / 2 + 0.01;
-                lightGroup.add(diffuser);
+                const diffuser = new THREE.Mesh(diffuserGeo, diffuserMat);
+                diffuser.position.z = 0.201; // Slightly in front of the housing
                 
-                // Softbox edge trim - darker red
-                const edgeGeometry = new THREE.BoxGeometry(softboxWidth + 0.04, softboxHeight + 0.04, 0.04);
-                const edgeMaterial = new THREE.MeshStandardMaterial({
-                    color: 0x991111,
-                    roughness: 0.4,
-                    metalness: 0.7
-                });
-                const edge = new THREE.Mesh(edgeGeometry, edgeMaterial);
-                edge.position.z = softboxDepth / 2;
-                lightGroup.add(edge);
-                
-                // Mounting bracket
-                const bracketGeometry = new THREE.CylinderGeometry(0.03, 0.03, 0.2, 8);
-                const bracketMaterial = new THREE.MeshStandardMaterial({
-                    color: 0x333333,
-                    roughness: 0.5,
-                    metalness: 0.8
-                });
-                const bracket = new THREE.Mesh(bracketGeometry, bracketMaterial);
-                bracket.rotation.x = Math.PI / 2;
-                bracket.position.z = -softboxDepth / 2 - 0.1;
-                lightGroup.add(bracket);
+                // Assemble the softbox
+                housing.add(diffuser);
+                lightGroup.add(housing);
                 
-                // Ball joint
-                const ballGeometry = new THREE.SphereGeometry(0.06, 16, 16);
-                const ball = new THREE.Mesh(ballGeometry, bracketMaterial);
-                ball.position.z = -softboxDepth / 2 - 0.2;
-                lightGroup.add(ball);
-                
-                // Stand connector
-                const standGeometry = new THREE.CylinderGeometry(0.025, 0.025, 0.15, 8);
-                const stand = new THREE.Mesh(standGeometry, bracketMaterial);
-                stand.position.z = -softboxDepth / 2 - 0.2;
-                stand.position.y = -0.1;
-                lightGroup.add(stand);
-                
-                // Actual spotlight for casting light - WHITE
-                const spotLight = new THREE.SpotLight(0xffffff, 15, 12, Math.PI / 4, 0.8, 1);
-                spotLight.position.set(0, 0, softboxDepth / 2);
+                // Actual Light Source
+                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 = 2048;
-                spotLight.shadow.mapSize.height = 2048;
+                spotLight.shadow.mapSize.width = 1024;
+                spotLight.shadow.mapSize.height = 1024;
                 spotLight.shadow.camera.near = 0.5;
-                spotLight.shadow.camera.far = 15;
-                spotLight.shadow.bias = -0.0005;
+                spotLight.shadow.camera.far = 500;
+                spotLight.shadow.bias = -0.005;
                 lightGroup.add(spotLight);
                 
                 const lightTarget = new THREE.Object3D();
@@ -571,150 +428,77 @@ class LightingControl3D(gr.HTML):
                 scene.add(lightTarget);
                 spotLight.target = lightTarget;
                 
-                // Add point light for softer fill
-                const fillLight = new THREE.PointLight(0xffffff, 3, 8);
-                fillLight.position.set(0, 0, softboxDepth / 2 + 0.2);
-                lightGroup.add(fillLight);
-                
                 scene.add(lightGroup);
                 
-                // ==================== AZIMUTH RING (YELLOW) ====================
-                const azimuthRingGeometry = new THREE.TorusGeometry(AZIMUTH_RADIUS, 0.035, 16, 64);
-                const azimuthRingMaterial = new THREE.MeshStandardMaterial({ 
-                    color: 0xffd700, 
-                    emissive: 0xffd700, 
-                    emissiveIntensity: 0.4,
-                    roughness: 0.3,
-                    metalness: 0.7
-                });
-                const azimuthRing = new THREE.Mesh(azimuthRingGeometry, azimuthRingMaterial);
+                // --- CONTROLS: COLORS UPDATED ---
+                
+                // Azimuth ring (YELLOW)
+                const azimuthRing = new THREE.Mesh(
+                    new THREE.TorusGeometry(AZIMUTH_RADIUS, 0.04, 16, 64),
+                    new THREE.MeshStandardMaterial({ color: 0xffff00, emissive: 0xffff00, emissiveIntensity: 0.3 })
+                );
                 azimuthRing.rotation.x = Math.PI / 2;
                 azimuthRing.position.y = 0.05;
                 scene.add(azimuthRing);
                 
-                // Azimuth handle - YELLOW with glow effect
-                const azimuthHandleGroup = new THREE.Group();
-                
-                const azimuthHandleCore = new THREE.Mesh(
-                    new THREE.SphereGeometry(0.16, 24, 24),
-                    new THREE.MeshStandardMaterial({ 
-                        color: 0xffd700, 
-                        emissive: 0xffd700, 
-                        emissiveIntensity: 0.6,
-                        roughness: 0.2,
-                        metalness: 0.8
-                    })
-                );
-                azimuthHandleGroup.add(azimuthHandleCore);
-                
-                // Outer glow ring
-                const azimuthGlow = new THREE.Mesh(
-                    new THREE.TorusGeometry(0.2, 0.02, 16, 32),
-                    new THREE.MeshStandardMaterial({ 
-                        color: 0xffee00, 
-                        emissive: 0xffee00, 
-                        emissiveIntensity: 1,
-                        transparent: true,
-                        opacity: 0.7
-                    })
+                // Azimuth Handle (YELLOW)
+                const azimuthHandle = new THREE.Mesh(
+                    new THREE.SphereGeometry(0.18, 16, 16),
+                    new THREE.MeshStandardMaterial({ color: 0xffff00, emissive: 0xffff00, emissiveIntensity: 0.5 })
                 );
-                azimuthGlow.rotation.x = Math.PI / 2;
-                azimuthHandleGroup.add(azimuthGlow);
+                azimuthHandle.userData.type = 'azimuth';
+                scene.add(azimuthHandle);
                 
-                azimuthHandleGroup.userData.type = 'azimuth';
-                scene.add(azimuthHandleGroup);
-                
-                // ==================== ELEVATION ARC (BLUE) ====================
+                // Elevation arc (BLUE)
                 const arcPoints = [];
-                for (let i = 0; i <= 48; i++) {
-                    const angle = THREE.MathUtils.degToRad(-90 + (180 * i / 48));
-                    arcPoints.push(new THREE.Vector3(
-                        -1.0, 
-                        ELEVATION_RADIUS * Math.sin(angle) + CENTER.y, 
-                        ELEVATION_RADIUS * Math.cos(angle)
-                    ));
+                for (let i = 0; i <= 32; i++) {
+                    const angle = THREE.MathUtils.degToRad(-90 + (180 * i / 32));
+                    arcPoints.push(new THREE.Vector3(-0.8, ELEVATION_RADIUS * Math.sin(angle) + CENTER.y, ELEVATION_RADIUS * Math.cos(angle)));
                 }
                 const arcCurve = new THREE.CatmullRomCurve3(arcPoints);
                 const elevationArc = new THREE.Mesh(
-                    new THREE.TubeGeometry(arcCurve, 48, 0.035, 8, false),
-                    new THREE.MeshStandardMaterial({ 
-                        color: 0x0088ff, 
-                        emissive: 0x0088ff, 
-                        emissiveIntensity: 0.4,
-                        roughness: 0.3,
-                        metalness: 0.7
-                    })
+                    new THREE.TubeGeometry(arcCurve, 32, 0.04, 8, false),
+                    new THREE.MeshStandardMaterial({ color: 0x0000ff, emissive: 0x0000ff, emissiveIntensity: 0.3 })
                 );
                 scene.add(elevationArc);
                 
-                // Elevation handle - BLUE with glow effect
-                const elevationHandleGroup = new THREE.Group();
-                
-                const elevationHandleCore = new THREE.Mesh(
-                    new THREE.SphereGeometry(0.16, 24, 24),
-                    new THREE.MeshStandardMaterial({ 
-                        color: 0x0088ff, 
-                        emissive: 0x0088ff, 
-                        emissiveIntensity: 0.6,
-                        roughness: 0.2,
-                        metalness: 0.8
-                    })
+                // Elevation Handle (BLUE)
+                const elevationHandle = new THREE.Mesh(
+                    new THREE.SphereGeometry(0.18, 16, 16),
+                    new THREE.MeshStandardMaterial({ color: 0x0000ff, emissive: 0x0000ff, emissiveIntensity: 0.5 })
                 );
-                elevationHandleGroup.add(elevationHandleCore);
-                
-                // Outer glow ring
-                const elevationGlow = new THREE.Mesh(
-                    new THREE.TorusGeometry(0.2, 0.02, 16, 32),
-                    new THREE.MeshStandardMaterial({ 
-                        color: 0x00aaff, 
-                        emissive: 0x00aaff, 
-                        emissiveIntensity: 1,
-                        transparent: true,
-                        opacity: 0.7
-                    })
-                );
-                elevationGlow.rotation.x = Math.PI / 2;
-                elevationHandleGroup.add(elevationGlow);
-                
-                elevationHandleGroup.userData.type = 'elevation';
-                scene.add(elevationHandleGroup);
+                elevationHandle.userData.type = 'elevation';
+                scene.add(elevationHandle);
+                
+                // --- REFRESH BUTTON (Redesigned) ---
+                const refreshBtn = document.createElement('button');
+                refreshBtn.innerHTML = 'Reset View';
+                refreshBtn.style.position = 'absolute';
+                refreshBtn.style.top = '15px';
+                refreshBtn.style.right = '15px';
+                refreshBtn.style.background = '#e63e00'; // Theme primary color
+                refreshBtn.style.color = '#fff';
+                refreshBtn.style.border = 'none';
+                refreshBtn.style.padding = '8px 16px';
+                refreshBtn.style.borderRadius = '6px';
+                refreshBtn.style.cursor = 'pointer';
+                refreshBtn.style.zIndex = '10';
+                refreshBtn.style.fontSize = '14px';
+                refreshBtn.style.fontWeight = '600';
+                refreshBtn.style.fontFamily = 'system-ui, sans-serif';
+                refreshBtn.style.boxShadow = '0 2px 5px rgba(0,0,0,0.3)';
+                refreshBtn.style.transition = 'background 0.2s';
+                
+                refreshBtn.onmouseover = () => refreshBtn.style.background = '#ff5722';
+                refreshBtn.onmouseout = () => refreshBtn.style.background = '#e63e00';
+                
+                wrapper.appendChild(refreshBtn);
                 
-                // Add direction markers on azimuth ring
-                const markerPositions = [0, 90, 180, 270];
-                const markerLabels = ['F', 'R', 'B', 'L'];
-                markerPositions.forEach((deg, idx) => {
-                    const rad = THREE.MathUtils.degToRad(deg);
-                    const marker = new THREE.Mesh(
-                        new THREE.CylinderGeometry(0.04, 0.04, 0.08, 8),
-                        new THREE.MeshStandardMaterial({ 
-                            color: 0x666666,
-                            roughness: 0.5,
-                            metalness: 0.5
-                        })
-                    );
-                    marker.position.set(
-                        AZIMUTH_RADIUS * Math.sin(rad),
-                        0.05,
-                        AZIMUTH_RADIUS * Math.cos(rad)
-                    );
-                    scene.add(marker);
-                });
-                
-                // Refresh button click handler
                 refreshBtn.addEventListener('click', () => {
                     azimuthAngle = 0;
                     elevationAngle = 0;
-                    
-                    // Animate reset
-                    const startTime = Date.now();
-                    function animateReset() {
-                        const t = Math.min((Date.now() - startTime) / 300, 1);
-                        const ease = 1 - Math.pow(1 - t, 3);
-                        updatePositions();
-                        if (t < 1) requestAnimationFrame(animateReset);
-                        else updatePropsAndTrigger();
-                    }
-                    animateReset();
+                    updatePositions();
+                    updatePropsAndTrigger();
                 });
                 
                 function updatePositions() {
@@ -729,19 +513,8 @@ class LightingControl3D(gr.HTML):
                     lightGroup.position.set(lightX, lightY, lightZ);
                     lightGroup.lookAt(CENTER);
                     
-                    // Update azimuth handle
-                    azimuthHandleGroup.position.set(
-                        AZIMUTH_RADIUS * Math.sin(azRad), 
-                        0.05, 
-                        AZIMUTH_RADIUS * Math.cos(azRad)
-                    );
-                    
-                    // Update elevation handle
-                    elevationHandleGroup.position.set(
-                        -1.0, 
-                        ELEVATION_RADIUS * Math.sin(elRad) + CENTER.y, 
-                        ELEVATION_RADIUS * Math.cos(elRad)
-                    );
+                    azimuthHandle.position.set(AZIMUTH_RADIUS * Math.sin(azRad), 0.05, AZIMUTH_RADIUS * Math.cos(azRad));
+                    elevationHandle.position.set(-0.8, ELEVATION_RADIUS * Math.sin(elRad) + CENTER.y, ELEVATION_RADIUS * Math.cos(elRad));
                     
                     // Update prompt
                     const azSnap = snapToNearest(azimuthAngle, azimuthSteps);
@@ -752,7 +525,7 @@ class LightingControl3D(gr.HTML):
                     } else {
                         prompt += ' the ' + azimuthNames[azSnap];
                     }
-                    promptOverlay.textContent = '💡 ' + prompt;
+                    promptOverlay.textContent = prompt;
                 }
                 
                 function updatePropsAndTrigger() {
@@ -768,33 +541,25 @@ class LightingControl3D(gr.HTML):
                 const mouse = new THREE.Vector2();
                 let isDragging = false;
                 let dragTarget = null;
+                let dragStartMouse = new THREE.Vector2();
                 const intersection = new THREE.Vector3();
                 
                 const canvas = renderer.domElement;
                 
-                function getHandleFromGroup(group) {
-                    return group;
-                }
-                
                 canvas.addEventListener('mousedown', (e) => {
                     const rect = canvas.getBoundingClientRect();
                     mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
                     mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
                     
                     raycaster.setFromCamera(mouse, camera);
-                    const intersects = raycaster.intersectObjects([...azimuthHandleGroup.children, ...elevationHandleGroup.children]);
+                    const intersects = raycaster.intersectObjects([azimuthHandle, elevationHandle]);
                     
                     if (intersects.length > 0) {
                         isDragging = true;
-                        dragTarget = intersects[0].object.parent;
-                        
-                        // Highlight effect
-                        dragTarget.children.forEach(child => {
-                            if (child.material && child.material.emissiveIntensity !== undefined) {
-                                child.material.emissiveIntensity = 1.2;
-                            }
-                        });
+                        dragTarget = intersects[0].object;
+                        dragTarget.material.emissiveIntensity = 1.0;
                         dragTarget.scale.setScalar(1.3);
+                        dragStartMouse.copy(mouse);
                         canvas.style.cursor = 'grabbing';
                     }
                 });
@@ -814,43 +579,24 @@ class LightingControl3D(gr.HTML):
                                 if (azimuthAngle < 0) azimuthAngle += 360;
                             }
                         } else if (dragTarget.userData.type === 'elevation') {
-                            const plane = new THREE.Plane(new THREE.Vector3(1, 0, 0), 1.0);
+                            const plane = new THREE.Plane(new THREE.Vector3(1, 0, 0), -0.8);
                             if (raycaster.ray.intersectPlane(plane, intersection)) {
                                 const relY = intersection.y - CENTER.y;
                                 const relZ = intersection.z;
-                                elevationAngle = THREE.MathUtils.clamp(
-                                    THREE.MathUtils.radToDeg(Math.atan2(relY, relZ)), 
-                                    -90, 
-                                    90
-                                );
+                                elevationAngle = THREE.MathUtils.clamp(THREE.MathUtils.radToDeg(Math.atan2(relY, relZ)), -90, 90);
                             }
                         }
                         updatePositions();
                     } else {
                         raycaster.setFromCamera(mouse, camera);
-                        const intersects = raycaster.intersectObjects([
-                            ...azimuthHandleGroup.children, 
-                            ...elevationHandleGroup.children
-                        ]);
-                        
-                        // Reset all handles
-                        [azimuthHandleGroup, elevationHandleGroup].forEach(group => {
-                            group.children.forEach(child => {
-                                if (child.material && child.material.emissiveIntensity !== undefined) {
-                                    child.material.emissiveIntensity = child.geometry.type === 'TorusGeometry' ? 1 : 0.6;
-                                }
-                            });
-                            group.scale.setScalar(1);
+                        const intersects = raycaster.intersectObjects([azimuthHandle, elevationHandle]);
+                        [azimuthHandle, elevationHandle].forEach(h => {
+                            h.material.emissiveIntensity = 0.5;
+                            h.scale.setScalar(1);
                         });
-                        
                         if (intersects.length > 0) {
-                            const hoveredGroup = intersects[0].object.parent;
-                            hoveredGroup.children.forEach(child => {
-                                if (child.material && child.material.emissiveIntensity !== undefined) {
-                                    child.material.emissiveIntensity = 1.0;
-                                }
-                            });
-                            hoveredGroup.scale.setScalar(1.15);
+                            intersects[0].object.material.emissiveIntensity = 0.8;
+                            intersects[0].object.scale.setScalar(1.1);
                             canvas.style.cursor = 'grab';
                         } else {
                             canvas.style.cursor = 'default';
@@ -860,15 +606,10 @@ class LightingControl3D(gr.HTML):
                 
                 const onMouseUp = () => {
                     if (dragTarget) {
-                        // Reset highlight
-                        dragTarget.children.forEach(child => {
-                            if (child.material && child.material.emissiveIntensity !== undefined) {
-                                child.material.emissiveIntensity = child.geometry.type === 'TorusGeometry' ? 1 : 0.6;
-                            }
-                        });
+                        dragTarget.material.emissiveIntensity = 0.5;
                         dragTarget.scale.setScalar(1);
                         
-                        // Snap animation
+                        // Snap and animate
                         const targetAz = snapToNearest(azimuthAngle, azimuthSteps);
                         const targetEl = snapToNearest(elevationAngle, elevationSteps);
                         
@@ -901,8 +642,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];
@@ -911,20 +651,14 @@ class LightingControl3D(gr.HTML):
                     mouse.y = -((touch.clientY - rect.top) / rect.height) * 2 + 1;
                     
                     raycaster.setFromCamera(mouse, camera);
-                    const intersects = raycaster.intersectObjects([
-                        ...azimuthHandleGroup.children, 
-                        ...elevationHandleGroup.children
-                    ]);
+                    const intersects = raycaster.intersectObjects([azimuthHandle, elevationHandle]);
                     
                     if (intersects.length > 0) {
                         isDragging = true;
-                        dragTarget = intersects[0].object.parent;
-                        dragTarget.children.forEach(child => {
-                            if (child.material && child.material.emissiveIntensity !== undefined) {
-                                child.material.emissiveIntensity = 1.2;
-                            }
-                        });
+                        dragTarget = intersects[0].object;
+                        dragTarget.material.emissiveIntensity = 1.0;
                         dragTarget.scale.setScalar(1.3);
+                        dragStartMouse.copy(mouse);
                     }
                 }, { passive: false });
                 
@@ -945,15 +679,11 @@ class LightingControl3D(gr.HTML):
                                 if (azimuthAngle < 0) azimuthAngle += 360;
                             }
                         } else if (dragTarget.userData.type === 'elevation') {
-                            const plane = new THREE.Plane(new THREE.Vector3(1, 0, 0), 1.0);
+                            const plane = new THREE.Plane(new THREE.Vector3(1, 0, 0), -0.8);
                             if (raycaster.ray.intersectPlane(plane, intersection)) {
                                 const relY = intersection.y - CENTER.y;
                                 const relZ = intersection.z;
-                                elevationAngle = THREE.MathUtils.clamp(
-                                    THREE.MathUtils.radToDeg(Math.atan2(relY, relZ)), 
-                                    -90, 
-                                    90
-                                );
+                                elevationAngle = THREE.MathUtils.clamp(THREE.MathUtils.radToDeg(Math.atan2(relY, relZ)), -90, 90);
                             }
                         }
                         updatePositions();
@@ -973,17 +703,9 @@ class LightingControl3D(gr.HTML):
                 // Initial update
                 updatePositions();
                 
-                // Animation for subtle effects
-                let time = 0;
+                // Render loop
                 function render() {
                     requestAnimationFrame(render);
-                    time += 0.016;
-                    
-                    // Subtle pulse on glow rings
-                    const pulse = 0.7 + Math.sin(time * 2) * 0.1;
-                    azimuthGlow.material.opacity = pulse;
-                    elevationGlow.material.opacity = pulse;
-                    
                     renderer.render(scene, camera);
                 }
                 render();
@@ -995,7 +717,7 @@ class LightingControl3D(gr.HTML):
                     renderer.setSize(wrapper.clientWidth, wrapper.clientHeight);
                 }).observe(wrapper);
                 
-                // Store update functions
+                // Store update functions for external calls
                 wrapper._updateFromProps = (newVal) => {
                     if (newVal && typeof newVal === 'object') {
                         azimuthAngle = newVal.azimuth ?? azimuthAngle;
@@ -1006,14 +728,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;
@@ -1045,7 +769,6 @@ css = '''
 .slider-row { display: flex; gap: 10px; align-items: center; }
 #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("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).")