Update app.py

app.py

@@ -13,7 +13,6 @@ from qwenimage.qwen_fa3_processor import QwenDoubleStreamAttnProcessorFA3
 from gradio.themes import Soft
 from gradio.themes.utils import colors, fonts, sizes
 
-# --- Theme Configuration ---
 colors.orange_red = colors.Color(
     name="orange_red",
     c50="#FFF0E5",
@@ -82,7 +81,6 @@ class OrangeRedTheme(Soft):
 
 orange_red_theme = OrangeRedTheme()
 
-# --- Global Constants & Model Setup ---
 MAX_SEED = np.iinfo(np.int32).max
 
 dtype = torch.bfloat16
@@ -128,8 +126,6 @@ ELEVATION_MAP = {
     90: "Above"
 }
 
-# --- Helper Functions ---
-
 def snap_to_nearest(value, options):
     """Snap a value to the nearest option in a list."""
     return min(options, key=lambda x: abs(x - value))
@@ -137,6 +133,13 @@ def snap_to_nearest(value, options):
 def build_lighting_prompt(azimuth: float, elevation: float) -> str:
     """
     Build a lighting prompt from azimuth and elevation values.
+    
+    Args:
+        azimuth: Horizontal rotation in degrees (0-360)
+        elevation: Vertical angle in degrees (-90 to 90)
+    
+    Returns:
+        Formatted prompt string for the LoRA
     """
     azimuth_snapped = snap_to_nearest(azimuth, list(AZIMUTH_MAP.keys()))
     elevation_snapped = snap_to_nearest(elevation, list(ELEVATION_MAP.keys()))
@@ -158,6 +161,9 @@ def infer_lighting_edit(
     height: int = 1024,
     width: int = 1024,
 ):
+    """
+    Edit the lighting of an image using Qwen Image Edit 2511 with multi-angle lighting LoRA.
+    """
     global loaded
     progress = gr.Progress(track_tqdm=True)
     
@@ -191,6 +197,7 @@ def infer_lighting_edit(
     return result, seed, prompt
 
 def update_dimensions_on_upload(image):
+    """Compute recommended dimensions preserving aspect ratio."""
     if image is None:
         return 1024, 1024
     original_width, original_height = image.size
@@ -206,19 +213,29 @@ def update_dimensions_on_upload(image):
     new_height = (new_height // 8) * 8
     return new_width, new_height
 
-# --- Custom 3D Component ---
-
 class LightingControl3D(gr.HTML):
     """
     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.
     """
     def __init__(self, value=None, imageUrl=None, **kwargs):
         if value is None:
             value = {"azimuth": 0, "elevation": 0}
         
         html_template = """
-        <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 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: 12px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.85); padding: 10px 20px; border-radius: 20px; font-family: 'Segoe UI', system-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="legend-overlay" style="position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,0.75); padding: 10px 14px; border-radius: 10px; font-family: 'Segoe UI', system-ui, sans-serif; font-size: 11px; color: #c9d1d9; z-index: 10; border: 1px solid #30363d;">
+                <div style="display: flex; align-items: center; margin-bottom: 6px;">
+                    <div style="width: 12px; height: 12px; background: #ffd700; border-radius: 50%; margin-right: 8px; box-shadow: 0 0 6px #ffd700;"></div>
+                    <span>Azimuth (Direction)</span>
+                </div>
+                <div style="display: flex; align-items: center;">
+                    <div style="width: 12px; height: 12px; background: #0088ff; border-radius: 50%; margin-right: 8px; box-shadow: 0 0 6px #0088ff;"></div>
+                    <span>Elevation (Height)</span>
+                </div>
+            </div>
         </div>
         """
         
@@ -227,7 +244,6 @@ class LightingControl3D(gr.HTML):
             const wrapper = element.querySelector('#lighting-control-wrapper');
             const promptOverlay = element.querySelector('#prompt-overlay');
             
-            // Wait for THREE to load
             const initScene = () => {
                 if (typeof THREE === 'undefined') {
                     setTimeout(initScene, 100);
@@ -236,7 +252,10 @@ class LightingControl3D(gr.HTML):
                 
                 // Scene setup
                 const scene = new THREE.Scene();
-                scene.background = new THREE.Color(0x1a1a1a);
+                scene.background = new THREE.Color(0x0d1117);
+                
+                // Add fog for depth
+                scene.fog = new THREE.Fog(0x0d1117, 8, 20);
                 
                 const camera = new THREE.PerspectiveCamera(50, wrapper.clientWidth / wrapper.clientHeight, 0.1, 1000);
                 camera.position.set(4.5, 3, 4.5);
@@ -247,23 +266,53 @@ 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, promptOverlay);
                 
-                // Lighting (Ambient)
-                scene.add(new THREE.AmbientLight(0xffffff, 0.1));
+                // Ambient lighting
+                scene.add(new THREE.AmbientLight(0x404050, 0.3));
                 
                 // Ground plane for shadows
                 const ground = new THREE.Mesh(
-                    new THREE.PlaneGeometry(10, 10),
-                    new THREE.ShadowMaterial({ opacity: 0.3 })
+                    new THREE.PlaneGeometry(12, 12),
+                    new THREE.MeshStandardMaterial({ 
+                        color: 0x1a1f25,
+                        roughness: 0.9,
+                        metalness: 0.1
+                    })
                 );
                 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));
+                // Create circular grid pattern
+                const gridGroup = new THREE.Group();
+                
+                // Radial lines
+                for (let i = 0; i < 16; i++) {
+                    const angle = (i / 16) * Math.PI * 2;
+                    const lineGeo = new THREE.BufferGeometry().setFromPoints([
+                        new THREE.Vector3(0, 0.01, 0),
+                        new THREE.Vector3(Math.sin(angle) * 4, 0.01, Math.cos(angle) * 4)
+                    ]);
+                    const lineMat = new THREE.LineBasicMaterial({ color: 0x2d333b, transparent: true, opacity: 0.5 });
+                    gridGroup.add(new THREE.Line(lineGeo, lineMat));
+                }
+                
+                // Concentric circles
+                for (let r = 1; r <= 4; r++) {
+                    const circlePoints = [];
+                    for (let i = 0; i <= 64; i++) {
+                        const angle = (i / 64) * Math.PI * 2;
+                        circlePoints.push(new THREE.Vector3(Math.sin(angle) * r, 0.01, Math.cos(angle) * r));
+                    }
+                    const circleGeo = new THREE.BufferGeometry().setFromPoints(circlePoints);
+                    const circleMat = new THREE.LineBasicMaterial({ color: 0x2d333b, transparent: true, opacity: 0.4 });
+                    gridGroup.add(new THREE.Line(circleGeo, circleMat));
+                }
+                scene.add(gridGroup);
                 
                 // Constants
                 const CENTER = new THREE.Vector3(0, 0.75, 0);
@@ -289,49 +338,87 @@ class LightingControl3D(gr.HTML):
                     return steps.reduce((prev, curr) => Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);
                 }
                 
-                // Create placeholder texture (smiley face)
+                // Create placeholder texture
                 function createPlaceholderTexture() {
                     const canvas = document.createElement('canvas');
                     canvas.width = 256;
                     canvas.height = 256;
                     const ctx = canvas.getContext('2d');
-                    ctx.fillStyle = '#3a3a4a';
+                    
+                    // Gradient background
+                    const gradient = ctx.createLinearGradient(0, 0, 256, 256);
+                    gradient.addColorStop(0, '#2d333b');
+                    gradient.addColorStop(1, '#22272e');
+                    ctx.fillStyle = gradient;
                     ctx.fillRect(0, 0, 256, 256);
-                    ctx.fillStyle = '#ffcc99';
+                    
+                    // Image icon
+                    ctx.strokeStyle = '#484f58';
+                    ctx.lineWidth = 3;
                     ctx.beginPath();
-                    ctx.arc(128, 128, 80, 0, Math.PI * 2);
-                    ctx.fill();
-                    ctx.fillStyle = '#333';
+                    ctx.roundRect(60, 70, 136, 116, 8);
+                    ctx.stroke();
+                    
+                    // Mountain
+                    ctx.fillStyle = '#484f58';
                     ctx.beginPath();
-                    ctx.arc(100, 110, 10, 0, Math.PI * 2);
-                    ctx.arc(156, 110, 10, 0, Math.PI * 2);
+                    ctx.moveTo(80, 160);
+                    ctx.lineTo(128, 110);
+                    ctx.lineTo(176, 160);
+                    ctx.closePath();
                     ctx.fill();
-                    ctx.strokeStyle = '#333';
-                    ctx.lineWidth = 3;
+                    
+                    // Sun
                     ctx.beginPath();
-                    ctx.arc(128, 130, 35, 0.2, Math.PI - 0.2);
-                    ctx.stroke();
+                    ctx.arc(155, 100, 15, 0, Math.PI * 2);
+                    ctx.fill();
+                    
+                    // Text
+                    ctx.fillStyle = '#6e7681';
+                    ctx.font = '14px system-ui';
+                    ctx.textAlign = 'center';
+                    ctx.fillText('Upload Image', 128, 210);
+                    
                     return new THREE.CanvasTexture(canvas);
                 }
                 
                 // Target image plane
                 let currentTexture = createPlaceholderTexture();
-                const planeMaterial = new THREE.MeshStandardMaterial({ map: currentTexture, side: THREE.DoubleSide, roughness: 0.5, metalness: 0 });
+                const planeMaterial = new THREE.MeshStandardMaterial({ 
+                    map: currentTexture, 
+                    side: THREE.DoubleSide, 
+                    roughness: 0.3, 
+                    metalness: 0.1 
+                });
                 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 subtle frame around image
+                const frameGeo = new THREE.BoxGeometry(1.3, 1.3, 0.05);
+                const frameMat = new THREE.MeshStandardMaterial({ color: 0x30363d, roughness: 0.5, metalness: 0.3 });
+                const frame = new THREE.Mesh(frameGeo, frameMat);
+                frame.position.set(CENTER.x, CENTER.y, CENTER.z - 0.03);
+                scene.add(frame);
+                
                 // Function to update texture from image URL
                 function updateTextureFromUrl(url) {
                     if (!url) {
                         planeMaterial.map = createPlaceholderTexture();
                         planeMaterial.needsUpdate = true;
                         scene.remove(targetPlane);
+                        scene.remove(frame);
                         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);
+                        
+                        const newFrame = new THREE.Mesh(new THREE.BoxGeometry(1.3, 1.3, 0.05), frameMat);
+                        newFrame.position.set(CENTER.x, CENTER.y, CENTER.z - 0.03);
+                        scene.add(newFrame);
                         return;
                     }
                     
@@ -356,13 +443,22 @@ class LightingControl3D(gr.HTML):
                                 planeWidth = maxSize * aspect;
                             }
                             scene.remove(targetPlane);
+                            scene.remove(frame);
                             targetPlane = new THREE.Mesh(
                                 new THREE.PlaneGeometry(planeWidth, planeHeight),
                                 planeMaterial
                             );
                             targetPlane.position.copy(CENTER);
                             targetPlane.receiveShadow = true;
+                            targetPlane.castShadow = true;
                             scene.add(targetPlane);
+                            
+                            const newFrame = new THREE.Mesh(
+                                new THREE.BoxGeometry(planeWidth + 0.1, planeHeight + 0.1, 0.05), 
+                                frameMat
+                            );
+                            newFrame.position.set(CENTER.x, CENTER.y, CENTER.z - 0.03);
+                            scene.add(newFrame);
                         }
                     }, undefined, (err) => {
                         console.error('Failed to load texture:', err);
@@ -373,41 +469,130 @@ class LightingControl3D(gr.HTML):
                     updateTextureFromUrl(props.imageUrl);
                 }
                 
-                // --- LIGHT MODEL REDESIGN (Softbox) ---
+                // ============================================
+                // REDESIGNED SOFTBOX LIGHT
+                // ============================================
                 const lightGroup = new THREE.Group();
                 
-                // Box Geometry for Softbox
-                const sbGeometry = new THREE.BoxGeometry(0.6, 0.6, 0.3);
-                
-                // Materials: Red body, White light face
-                const sbMatRed = new THREE.MeshStandardMaterial({ color: 0xff0000, roughness: 0.5 });
-                const sbMatWhite = new THREE.MeshStandardMaterial({ color: 0xffffff, emissive: 0xffffff, emissiveIntensity: 2 });
-                
-                // In Three.js, Face 4 is +Z. When we lookAt(), +Z points to target.
-                // 0:+x, 1:-x, 2:+y, 3:-y, 4:+z, 5:-z
-                const sbMaterials = [
-                    sbMatRed, // Right
-                    sbMatRed, // Left
-                    sbMatRed, // Top
-                    sbMatRed, // Bottom
-                    sbMatWhite, // Front (Light Face)
-                    sbMatRed  // Back
-                ];
-                
-                const softbox = new THREE.Mesh(sbGeometry, sbMaterials);
-                lightGroup.add(softbox);
-                
-                // Actual SpotLight source
-                const spotLight = new THREE.SpotLight(0xffffff, 10, 10, Math.PI / 3, 1, 1);
-                spotLight.position.set(0, 0, 0.1); // Slightly in front of the box center
+                // Softbox outer frame (red)
+                const softboxFrameMat = new THREE.MeshStandardMaterial({
+                    color: 0xcc2222,
+                    roughness: 0.4,
+                    metalness: 0.6,
+                    emissive: 0x441111,
+                    emissiveIntensity: 0.3
+                });
+                
+                // Main body - octagonal shape approximated with cylinder
+                const softboxBody = new THREE.Mesh(
+                    new THREE.CylinderGeometry(0.35, 0.45, 0.15, 8),
+                    softboxFrameMat
+                );
+                softboxBody.rotation.x = Math.PI / 2;
+                softboxBody.position.z = 0.1;
+                lightGroup.add(softboxBody);
+                
+                // Back panel (red)
+                const backPanel = new THREE.Mesh(
+                    new THREE.CylinderGeometry(0.35, 0.35, 0.05, 8),
+                    softboxFrameMat
+                );
+                backPanel.rotation.x = Math.PI / 2;
+                backPanel.position.z = 0.2;
+                lightGroup.add(backPanel);
+                
+                // Inner diffuser ring
+                const diffuserRing = new THREE.Mesh(
+                    new THREE.TorusGeometry(0.38, 0.03, 8, 8),
+                    new THREE.MeshStandardMaterial({
+                        color: 0x992222,
+                        roughness: 0.3,
+                        metalness: 0.7
+                    })
+                );
+                diffuserRing.rotation.x = Math.PI / 2;
+                diffuserRing.position.z = 0.02;
+                lightGroup.add(diffuserRing);
+                
+                // White diffuser panel (the light emitting surface)
+                const diffuserMat = new THREE.MeshStandardMaterial({
+                    color: 0xffffff,
+                    emissive: 0xffffff,
+                    emissiveIntensity: 1.5,
+                    roughness: 0.1,
+                    metalness: 0,
+                    transparent: true,
+                    opacity: 0.95
+                });
+                
+                const diffuserPanel = new THREE.Mesh(
+                    new THREE.CircleGeometry(0.36, 8),
+                    diffuserMat
+                );
+                diffuserPanel.position.z = 0.01;
+                lightGroup.add(diffuserPanel);
+                
+                // Inner glow effect
+                const glowMat = new THREE.MeshBasicMaterial({
+                    color: 0xffffff,
+                    transparent: true,
+                    opacity: 0.3,
+                    side: THREE.DoubleSide
+                });
+                const glowPanel = new THREE.Mesh(
+                    new THREE.CircleGeometry(0.42, 8),
+                    glowMat
+                );
+                glowPanel.position.z = -0.01;
+                lightGroup.add(glowPanel);
+                
+                // Mounting bracket
+                const bracketMat = new THREE.MeshStandardMaterial({
+                    color: 0x1a1a1a,
+                    roughness: 0.3,
+                    metalness: 0.8
+                });
+                
+                const bracket = new THREE.Mesh(
+                    new THREE.BoxGeometry(0.08, 0.08, 0.15),
+                    bracketMat
+                );
+                bracket.position.set(0, 0, 0.28);
+                lightGroup.add(bracket);
+                
+                // Stand connection
+                const standPole = new THREE.Mesh(
+                    new THREE.CylinderGeometry(0.02, 0.02, 0.3, 8),
+                    bracketMat
+                );
+                standPole.rotation.x = Math.PI / 2;
+                standPole.position.set(0, 0, 0.42);
+                lightGroup.add(standPole);
+                
+                // Small indicator light on bracket
+                const indicatorLight = new THREE.Mesh(
+                    new THREE.SphereGeometry(0.02, 8, 8),
+                    new THREE.MeshBasicMaterial({ color: 0x00ff00 })
+                );
+                indicatorLight.position.set(0.05, 0, 0.25);
+                lightGroup.add(indicatorLight);
+                
+                // Spotlight for actual lighting
+                const spotLight = new THREE.SpotLight(0xffffff, 15, 12, Math.PI / 3, 0.8, 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 = 500;
-                spotLight.shadow.bias = -0.005;
+                spotLight.shadow.camera.far = 15;
+                spotLight.shadow.bias = -0.002;
                 lightGroup.add(spotLight);
                 
+                // Point light for additional glow
+                const pointLight = new THREE.PointLight(0xffffff, 3, 8);
+                pointLight.position.set(0, 0, -0.1);
+                lightGroup.add(pointLight);
+                
                 const lightTarget = new THREE.Object3D();
                 lightTarget.position.copy(CENTER);
                 scene.add(lightTarget);
@@ -415,66 +600,168 @@ class LightingControl3D(gr.HTML):
                 
                 scene.add(lightGroup);
                 
-                // --- HANDLES REDESIGN ---
+                // ============================================
+                // YELLOW: Azimuth ring and handle
+                // ============================================
+                const azimuthColor = 0xffd700;  // Gold/Yellow
                 
-                // YELLOW: Azimuth ring
                 const azimuthRing = new THREE.Mesh(
-                    new THREE.TorusGeometry(AZIMUTH_RADIUS, 0.04, 16, 64),
-                    new THREE.MeshStandardMaterial({ color: 0xffff00, emissive: 0xffff00, emissiveIntensity: 0.3 })
+                    new THREE.TorusGeometry(AZIMUTH_RADIUS, 0.035, 16, 64),
+                    new THREE.MeshStandardMaterial({ 
+                        color: azimuthColor, 
+                        emissive: azimuthColor, 
+                        emissiveIntensity: 0.4,
+                        roughness: 0.3,
+                        metalness: 0.7
+                    })
                 );
                 azimuthRing.rotation.x = Math.PI / 2;
                 azimuthRing.position.y = 0.05;
                 scene.add(azimuthRing);
                 
+                // Direction markers on azimuth ring
+                const directions = ['N', 'E', 'S', 'W'];
+                const dirAngles = [0, 90, 180, 270];
+                dirAngles.forEach((angle, i) => {
+                    const rad = THREE.MathUtils.degToRad(angle);
+                    const marker = new THREE.Mesh(
+                        new THREE.SphereGeometry(0.06, 8, 8),
+                        new THREE.MeshStandardMaterial({ 
+                            color: 0x888888, 
+                            emissive: 0x444444,
+                            emissiveIntensity: 0.3
+                        })
+                    );
+                    marker.position.set(
+                        AZIMUTH_RADIUS * Math.sin(rad),
+                        0.05,
+                        AZIMUTH_RADIUS * Math.cos(rad)
+                    );
+                    scene.add(marker);
+                });
+                
                 const azimuthHandle = new THREE.Mesh(
-                    new THREE.SphereGeometry(0.18, 16, 16),
-                    new THREE.MeshStandardMaterial({ color: 0xffff00, emissive: 0xffff00, emissiveIntensity: 0.5 })
+                    new THREE.SphereGeometry(0.18, 32, 32),
+                    new THREE.MeshStandardMaterial({ 
+                        color: azimuthColor, 
+                        emissive: azimuthColor, 
+                        emissiveIntensity: 0.6,
+                        roughness: 0.2,
+                        metalness: 0.8
+                    })
                 );
                 azimuthHandle.userData.type = 'azimuth';
+                azimuthHandle.castShadow = true;
                 scene.add(azimuthHandle);
                 
-                // BLUE: Elevation arc
+                // ============================================
+                // BLUE: Elevation arc and handle
+                // ============================================
+                const elevationColor = 0x0088ff;  // Blue
+                
                 const arcPoints = [];
-                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)));
+                for (let i = 0; i <= 48; i++) {
+                    const angle = THREE.MathUtils.degToRad(-90 + (180 * i / 48));
+                    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, 32, 0.04, 8, false),
-                    new THREE.MeshStandardMaterial({ color: 0x0000ff, emissive: 0x0000ff, emissiveIntensity: 0.3 })
+                    new THREE.TubeGeometry(arcCurve, 48, 0.035, 8, false),
+                    new THREE.MeshStandardMaterial({ 
+                        color: elevationColor, 
+                        emissive: elevationColor, 
+                        emissiveIntensity: 0.4,
+                        roughness: 0.3,
+                        metalness: 0.7
+                    })
                 );
                 scene.add(elevationArc);
                 
+                // Elevation level markers
+                [-90, 0, 90].forEach(elev => {
+                    const rad = THREE.MathUtils.degToRad(elev);
+                    const marker = new THREE.Mesh(
+                        new THREE.SphereGeometry(0.05, 8, 8),
+                        new THREE.MeshStandardMaterial({ 
+                            color: 0x666666,
+                            emissive: 0x333333,
+                            emissiveIntensity: 0.3
+                        })
+                    );
+                    marker.position.set(
+                        -0.8,
+                        ELEVATION_RADIUS * Math.sin(rad) + CENTER.y,
+                        ELEVATION_RADIUS * Math.cos(rad)
+                    );
+                    scene.add(marker);
+                });
+                
                 const elevationHandle = new THREE.Mesh(
-                    new THREE.SphereGeometry(0.18, 16, 16),
-                    new THREE.MeshStandardMaterial({ color: 0x0000ff, emissive: 0x0000ff, emissiveIntensity: 0.5 })
+                    new THREE.SphereGeometry(0.18, 32, 32),
+                    new THREE.MeshStandardMaterial({ 
+                        color: elevationColor, 
+                        emissive: elevationColor, 
+                        emissiveIntensity: 0.6,
+                        roughness: 0.2,
+                        metalness: 0.8
+                    })
                 );
                 elevationHandle.userData.type = 'elevation';
+                elevationHandle.castShadow = true;
                 scene.add(elevationHandle);
                 
-                // --- RESET BUTTON REDESIGN ---
+                // ============================================
+                // 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 = 'rgba(255, 255, 255, 0.9)';
-                refreshBtn.style.border = 'none';
-                refreshBtn.style.borderRadius = '20px'; // Pill shape
-                refreshBtn.style.padding = '8px 16px';
-                refreshBtn.style.fontFamily = 'sans-serif';
-                refreshBtn.style.fontWeight = 'bold';
-                refreshBtn.style.fontSize = '12px';
-                refreshBtn.style.color = '#333';
-                refreshBtn.style.cursor = 'pointer';
-                refreshBtn.style.zIndex = '20';
-                refreshBtn.style.boxShadow = '0 2px 5px rgba(0,0,0,0.3)';
-                refreshBtn.style.transition = 'background 0.2s';
-                
-                refreshBtn.onmouseover = () => { refreshBtn.style.background = '#ffffff'; };
-                refreshBtn.onmouseout = () => { refreshBtn.style.background = 'rgba(255, 255, 255, 0.9)'; };
-                
+                refreshBtn.innerHTML = `
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
+                        <path d="M21 3v5h-5"/>
+                        <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
+                        <path d="M8 16H3v5"/>
+                    </svg>
+                    <span style="margin-left: 6px;">Reset</span>
+                `;
+                refreshBtn.style.cssText = `
+                    position: absolute;
+                    top: 12px;
+                    right: 12px;
+                    background: linear-gradient(135deg, #238636 0%, #2ea043 100%);
+                    color: white;
+                    border: none;
+                    padding: 8px 14px;
+                    border-radius: 8px;
+                    cursor: pointer;
+                    z-index: 10;
+                    font-size: 13px;
+                    font-family: 'Segoe UI', system-ui, sans-serif;
+                    font-weight: 500;
+                    display: flex;
+                    align-items: center;
+                    box-shadow: 0 4px 12px rgba(35, 134, 54, 0.4);
+                    transition: all 0.2s ease;
+                `;
+                refreshBtn.onmouseover = () => {
+                    refreshBtn.style.background = 'linear-gradient(135deg, #2ea043 0%, #3fb950 100%)';
+                    refreshBtn.style.transform = 'translateY(-1px)';
+                    refreshBtn.style.boxShadow = '0 6px 16px rgba(35, 134, 54, 0.5)';
+                };
+                refreshBtn.onmouseout = () => {
+                    refreshBtn.style.background = 'linear-gradient(135deg, #238636 0%, #2ea043 100%)';
+                    refreshBtn.style.transform = 'translateY(0)';
+                    refreshBtn.style.boxShadow = '0 4px 12px rgba(35, 134, 54, 0.4)';
+                };
+                refreshBtn.onmousedown = () => {
+                    refreshBtn.style.transform = 'scale(0.95)';
+                };
+                refreshBtn.onmouseup = () => {
+                    refreshBtn.style.transform = 'scale(1)';
+                };
                 wrapper.appendChild(refreshBtn);
                 
                 refreshBtn.addEventListener('click', () => {
@@ -496,19 +783,31 @@ class LightingControl3D(gr.HTML):
                     lightGroup.position.set(lightX, lightY, lightZ);
                     lightGroup.lookAt(CENTER);
                     
-                    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));
+                    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);
                     const elSnap = snapToNearest(elevationAngle, elevationSteps);
-                    let prompt = 'Light source from';
+                    let prompt = '💡 Light source from';
                     if (elSnap !== 0) {
                         prompt += ' ' + elevationNames[String(elSnap)];
                     } else {
                         prompt += ' the ' + azimuthNames[azSnap];
                     }
                     promptOverlay.textContent = prompt;
+                    
+                    // Pulse effect on diffuser based on position
+                    const pulseIntensity = 1.2 + Math.sin(Date.now() * 0.003) * 0.3;
+                    diffuserMat.emissiveIntensity = pulseIntensity;
                 }
                 
                 function updatePropsAndTrigger() {
@@ -524,7 +823,6 @@ 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;
@@ -540,9 +838,8 @@ class LightingControl3D(gr.HTML):
                     if (intersects.length > 0) {
                         isDragging = true;
                         dragTarget = intersects[0].object;
-                        dragTarget.material.emissiveIntensity = 1.0;
-                        dragTarget.scale.setScalar(1.3);
-                        dragStartMouse.copy(mouse);
+                        dragTarget.material.emissiveIntensity = 1.2;
+                        dragTarget.scale.setScalar(1.4);
                         canvas.style.cursor = 'grabbing';
                     }
                 });
@@ -562,11 +859,15 @@ 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), -0.8);
+                            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();
@@ -574,12 +875,12 @@ class LightingControl3D(gr.HTML):
                         raycaster.setFromCamera(mouse, camera);
                         const intersects = raycaster.intersectObjects([azimuthHandle, elevationHandle]);
                         [azimuthHandle, elevationHandle].forEach(h => {
-                            h.material.emissiveIntensity = 0.5;
+                            h.material.emissiveIntensity = 0.6;
                             h.scale.setScalar(1);
                         });
                         if (intersects.length > 0) {
-                            intersects[0].object.material.emissiveIntensity = 0.8;
-                            intersects[0].object.scale.setScalar(1.1);
+                            intersects[0].object.material.emissiveIntensity = 0.9;
+                            intersects[0].object.scale.setScalar(1.15);
                             canvas.style.cursor = 'grab';
                         } else {
                             canvas.style.cursor = 'default';
@@ -589,7 +890,7 @@ class LightingControl3D(gr.HTML):
                 
                 const onMouseUp = () => {
                     if (dragTarget) {
-                        dragTarget.material.emissiveIntensity = 0.5;
+                        dragTarget.material.emissiveIntensity = 0.6;
                         dragTarget.scale.setScalar(1);
                         
                         // Snap and animate
@@ -625,6 +926,7 @@ class LightingControl3D(gr.HTML):
                 
                 canvas.addEventListener('mouseup', onMouseUp);
                 canvas.addEventListener('mouseleave', onMouseUp);
+                
                 // Touch support
                 canvas.addEventListener('touchstart', (e) => {
                     e.preventDefault();
@@ -639,9 +941,8 @@ class LightingControl3D(gr.HTML):
                     if (intersects.length > 0) {
                         isDragging = true;
                         dragTarget = intersects[0].object;
-                        dragTarget.material.emissiveIntensity = 1.0;
-                        dragTarget.scale.setScalar(1.3);
-                        dragStartMouse.copy(mouse);
+                        dragTarget.material.emissiveIntensity = 1.2;
+                        dragTarget.scale.setScalar(1.4);
                     }
                 }, { passive: false });
                 
@@ -654,6 +955,7 @@ class LightingControl3D(gr.HTML):
                     
                     if (isDragging && dragTarget) {
                         raycaster.setFromCamera(mouse, camera);
+                        
                         if (dragTarget.userData.type === 'azimuth') {
                             const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), -0.05);
                             if (raycaster.ray.intersectPlane(plane, intersection)) {
@@ -661,11 +963,15 @@ 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), -0.8);
+                            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();
@@ -676,6 +982,7 @@ class LightingControl3D(gr.HTML):
                     e.preventDefault();
                     onMouseUp();
                 }, { passive: false });
+                
                 canvas.addEventListener('touchcancel', (e) => {
                     e.preventDefault();
                     onMouseUp();
@@ -684,9 +991,24 @@ class LightingControl3D(gr.HTML):
                 // Initial update
                 updatePositions();
                 
-                // Render loop
+                // Render loop with animation
+                let time = 0;
                 function render() {
                     requestAnimationFrame(render);
+                    time += 0.016;
+                    
+                    // Subtle glow animation
+                    if (glowMat) {
+                        glowMat.opacity = 0.2 + Math.sin(time * 2) * 0.1;
+                    }
+                    
+                    // Indicator light blink
+                    if (indicatorLight) {
+                        indicatorLight.material.color.setHex(
+                            Math.sin(time * 3) > 0 ? 0x00ff00 : 0x004400
+                        );
+                    }
+                    
                     renderer.render(scene, camera);
                 }
                 render();
@@ -698,7 +1020,7 @@ class LightingControl3D(gr.HTML):
                     renderer.setSize(wrapper.clientWidth, wrapper.clientHeight);
                 }).observe(wrapper);
                 
-                // Store update functions for external calls
+                // Store update functions
                 wrapper._updateFromProps = (newVal) => {
                     if (newVal && typeof newVal === 'object') {
                         azimuthAngle = newVal.azimuth ?? azimuthAngle;
@@ -741,8 +1063,6 @@ class LightingControl3D(gr.HTML):
             **kwargs
         )
 
-# --- Gradio UI Layout ---
-
 css = '''
 #col-container { max-width: 1200px; margin: 0 auto; }
 .dark .progress-text { color: white !important; }
@@ -750,6 +1070,7 @@ 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).")
@@ -770,7 +1091,7 @@ with gr.Blocks(css=css) as demo:
             gr.Markdown("### Slider Controls")
             
             azimuth_slider = gr.Slider(
-                label="Azimuth (Horizontal Rotation)",
+                label="🟡 Azimuth (Horizontal Rotation)",
                 minimum=0,
                 maximum=315,
                 step=45,
@@ -779,7 +1100,7 @@ with gr.Blocks(css=css) as demo:
             )
             
             elevation_slider = gr.Slider(
-                label="Elevation (Vertical Angle)",
+                label="🔵 Elevation (Vertical Angle)",
                 minimum=-90,
                 maximum=90,
                 step=90,
@@ -828,6 +1149,7 @@ with gr.Blocks(css=css) as demo:
         """Update the 3D component with the uploaded image."""
         if image is None:
             return gr.update(imageUrl=None)
+
         import base64
         from io import BytesIO
         buffered = BytesIO()