Update app.py

app.py

@@ -13,6 +13,7 @@ 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",
@@ -81,6 +82,7 @@ class OrangeRedTheme(Soft):
 
 orange_red_theme = OrangeRedTheme()
 
+# --- MODEL SETUP ---
 MAX_SEED = np.iinfo(np.int32).max
 
 dtype = torch.bfloat16
@@ -94,6 +96,7 @@ pipe = QwenImageEditPlusPipeline.from_pretrained(
     ),
     torch_dtype=dtype
 ).to(device)
+
 try:
     pipe.transformer.set_attn_processor(QwenDoubleStreamAttnProcessorFA3())
     print("Flash Attention 3 Processor set successfully.")
@@ -109,39 +112,17 @@ ADAPTER_SPECS = {
 }
 loaded = False
 
+# --- CONSTANTS ---
 AZIMUTH_MAP = {
-    0: "Front",
-    45: "Right Front",
-    90: "Right",
-    135: "Right Rear",
-    180: "Rear",
-    225: "Left Rear",
-    270: "Left",
-    315: "Left Front"
-}
-
-ELEVATION_MAP = {
-    -90: "Below",
-    0: "",
-    90: "Above"
+    0: "Front", 45: "Right Front", 90: "Right", 135: "Right Rear",
+    180: "Rear", 225: "Left Rear", 270: "Left", 315: "Left Front"
 }
+ELEVATION_MAP = {-90: "Below", 0: "", 90: "Above"}
 
 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))
 
 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
-    """
-    # Snap to nearest valid values
     azimuth_snapped = snap_to_nearest(azimuth, list(AZIMUTH_MAP.keys()))
     elevation_snapped = snap_to_nearest(elevation, list(ELEVATION_MAP.keys()))
     
@@ -162,12 +143,7 @@ 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)
-    
     if not loaded:
         pipe.load_lora_weights(
             ADAPTER_SPECS["Multi-Angle-Lighting"]["repo"],
@@ -179,12 +155,16 @@ def infer_lighting_edit(
     
     prompt = build_lighting_prompt(azimuth, elevation)
     print(f"Generated Prompt: {prompt}")
+    
     if randomize_seed:
         seed = random.randint(0, MAX_SEED)
     generator = torch.Generator(device=device).manual_seed(seed)
+    
     if image is None:
         raise gr.Error("Please upload an image first.")
+        
     pil_image = image.convert("RGB") if isinstance(image, Image.Image) else Image.open(image).convert("RGB")
+    
     result = pipe(
         image=[pil_image],
         prompt=prompt,
@@ -195,12 +175,11 @@ def infer_lighting_edit(
         guidance_scale=guidance_scale,
         num_images_per_prompt=1,
     ).images[0]
+    
     return result, seed, prompt
 
 def update_dimensions_on_upload(image):
-    """Compute recommended dimensions preserving aspect ratio."""
-    if image is None:
-        return 1024, 1024
+    if image is None: return 1024, 1024
     original_width, original_height = image.size
     if original_width > original_height:
         new_width = 1024
@@ -214,29 +193,18 @@ def update_dimensions_on_upload(image):
     new_height = (new_height // 8) * 8
     return new_width, new_height
 
+# --- 3D COMPONENT CLASS ---
 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.
+    A 3D lighting control component using Three.js with updated Softbox design and controls.
     """
     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: 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: 8px; font-family: 'Courier New', monospace; 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="controls-legend" style="position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.75); padding: 8px 12px; border-radius: 6px; font-family: sans-serif; font-size: 11px; color: #c9d1d9; z-index: 10; border: 1px solid #30363d;">
-                <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 4px;">
-                    <span style="width: 12px; height: 12px; background: #ffd700; border-radius: 50%; display: inline-block;"></span>
-                    <span>Azimuth (Direction)</span>
-                </div>
-                <div style="display: flex; align-items: center; gap: 6px;">
-                    <span style="width: 12px; height: 12px; background: #4dabf7; 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; box-shadow: inset 0 0 20px rgba(0,0,0,0.5);">
+            <div id="prompt-overlay" style="position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.85); padding: 8px 16px; border-radius: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: #fff; border: 1px solid #333; z-index: 10;">Waiting for interaction...</div>
         </div>
         """
         
@@ -245,7 +213,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);
@@ -254,55 +221,39 @@ 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);
+                scene.fog = new THREE.FogExp2(0x1a1a1a, 0.05);
                 
                 const camera = new THREE.PerspectiveCamera(50, wrapper.clientWidth / wrapper.clientHeight, 0.1, 1000);
                 camera.position.set(4.5, 3, 4.5);
                 camera.lookAt(0, 0.75, 0);
                 
-                const renderer = new THREE.WebGLRenderer({ antialias: true });
+                const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
                 renderer.setSize(wrapper.clientWidth, wrapper.clientHeight);
                 renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
                 renderer.shadowMap.enabled = true;
                 renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+                renderer.outputEncoding = THREE.sRGBEncoding;
                 renderer.toneMapping = THREE.ACESFilmicToneMapping;
-                renderer.toneMappingExposure = 1.2;
-                wrapper.insertBefore(renderer.domElement, wrapper.firstChild);
+                wrapper.insertBefore(renderer.domElement, promptOverlay);
                 
-                // Ambient lighting
-                const ambientLight = new THREE.AmbientLight(0x404050, 0.3);
-                scene.add(ambientLight);
+                // Base Lighting
+                const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 0.1);
+                scene.add(hemiLight);
                 
-                // Ground plane with better material
-                const groundGeometry = new THREE.PlaneGeometry(12, 12);
-                const groundMaterial = new THREE.MeshStandardMaterial({ 
-                    color: 0x1a1a2e,
-                    roughness: 0.8,
+                // Ground plane
+                const groundMat = new THREE.MeshStandardMaterial({ 
+                    color: 0x111111, 
+                    roughness: 0.8, 
                     metalness: 0.2
                 });
-                const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+                const ground = new THREE.Mesh(new THREE.PlaneGeometry(20, 20), groundMat);
                 ground.rotation.x = -Math.PI / 2;
-                ground.position.y = 0;
                 ground.receiveShadow = true;
                 scene.add(ground);
                 
-                // Shadow-only plane
-                const shadowPlane = new THREE.Mesh(
-                    new THREE.PlaneGeometry(12, 12),
-                    new THREE.ShadowMaterial({ opacity: 0.4 })
-                );
-                shadowPlane.rotation.x = -Math.PI / 2;
-                shadowPlane.position.y = 0.001;
-                shadowPlane.receiveShadow = true;
-                scene.add(shadowPlane);
-                
-                // Grid with better styling
-                const gridHelper = new THREE.GridHelper(10, 20, 0x30363d, 0x21262d);
-                gridHelper.position.y = 0.002;
-                scene.add(gridHelper);
+                // Grid
+                scene.add(new THREE.GridHelper(10, 20, 0x333333, 0x222222));
                 
                 // Constants
                 const CENTER = new THREE.Vector3(0, 0.75, 0);
@@ -314,72 +265,29 @@ class LightingControl3D(gr.HTML):
                 let azimuthAngle = props.value?.azimuth || 0;
                 let elevationAngle = props.value?.elevation || 0;
                 
-                // Mappings
-                const azimuthSteps = [0, 45, 90, 135, 180, 225, 270, 315];
-                const elevationSteps = [-90, 0, 90];
-                const azimuthNames = {
-                    0: 'Front', 45: 'Right Front', 90: 'Right',
-                    135: 'Right Rear', 180: 'Rear', 225: 'Left Rear',
-                    270: 'Left', 315: 'Left Front'
-                };
-                const elevationNames = { '-90': 'Below', '0': '', '90': 'Above' };
-                
-                function snapToNearest(value, steps) {
-                    return steps.reduce((prev, curr) => Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);
-                }
-                
-                // Create placeholder texture (camera icon style)
+                // --- TARGET PLANE SETUP ---
                 function createPlaceholderTexture() {
                     const canvas = document.createElement('canvas');
-                    canvas.width = 256;
-                    canvas.height = 256;
+                    canvas.width = 512; canvas.height = 512;
                     const ctx = canvas.getContext('2d');
-                    
-                    // Background gradient
-                    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);
-                    
-                    // Border
-                    ctx.strokeStyle = '#444c56';
-                    ctx.lineWidth = 4;
-                    ctx.strokeRect(10, 10, 236, 236);
-                    
-                    // Camera icon
-                    ctx.fillStyle = '#58a6ff';
-                    ctx.beginPath();
-                    ctx.roundRect(78, 98, 100, 70, 8);
-                    ctx.fill();
-                    
-                    // Lens
-                    ctx.fillStyle = '#2d333b';
-                    ctx.beginPath();
-                    ctx.arc(128, 133, 25, 0, Math.PI * 2);
-                    ctx.fill();
-                    
-                    ctx.fillStyle = '#58a6ff';
-                    ctx.beginPath();
-                    ctx.arc(128, 133, 18, 0, Math.PI * 2);
-                    ctx.fill();
-                    
-                    // Flash
-                    ctx.fillStyle = '#58a6ff';
-                    ctx.beginPath();
-                    ctx.roundRect(138, 88, 30, 15, 3);
-                    ctx.fill();
-                    
-                    // Text
-                    ctx.fillStyle = '#8b949e';
-                    ctx.font = '16px sans-serif';
+                    // Dark background
+                    ctx.fillStyle = '#222';
+                    ctx.fillRect(0, 0, 512, 512);
+                    // Stylized grid/face
+                    ctx.strokeStyle = '#444';
+                    ctx.lineWidth = 2;
+                    for(let i=0; i<=512; i+=64) {
+                        ctx.beginPath(); ctx.moveTo(i,0); ctx.lineTo(i,512); ctx.stroke();
+                        ctx.beginPath(); ctx.moveTo(0,i); ctx.lineTo(512,i); ctx.stroke();
+                    }
+                    ctx.fillStyle = '#FF4500';
+                    ctx.font = 'bold 100px Arial';
                     ctx.textAlign = 'center';
-                    ctx.fillText('Upload Image', 128, 200);
-                    
+                    ctx.textBaseline = 'middle';
+                    ctx.fillText('IMG', 256, 256);
                     return new THREE.CanvasTexture(canvas);
                 }
                 
-                // Target image plane
                 let currentTexture = createPlaceholderTexture();
                 const planeMaterial = new THREE.MeshStandardMaterial({ 
                     map: currentTexture, 
@@ -389,444 +297,245 @@ class LightingControl3D(gr.HTML):
                 });
                 let targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(1.2, 1.2), planeMaterial);
                 targetPlane.position.copy(CENTER);
-                targetPlane.receiveShadow = true;
                 targetPlane.castShadow = true;
+                targetPlane.receiveShadow = true;
                 scene.add(targetPlane);
                 
-                // Frame around the image
-                const frameGeometry = new THREE.BoxGeometry(1.3, 1.3, 0.05);
-                const frameMaterial = new THREE.MeshStandardMaterial({ 
-                    color: 0x30363d, 
-                    roughness: 0.5, 
-                    metalness: 0.3 
-                });
-                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) {
                         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);
-                        
-                        frame.geometry = new THREE.BoxGeometry(1.3, 1.3, 0.05);
-                        frame.position.set(CENTER.x, CENTER.y, -0.03);
-                        scene.add(frame);
+                        // Reset geometry to square
+                        targetPlane.geometry.dispose();
+                        targetPlane.geometry = new THREE.PlaneGeometry(1.2, 1.2);
                         return;
                     }
-                    
                     const loader = new THREE.TextureLoader();
                     loader.crossOrigin = 'anonymous';
                     loader.load(url, (texture) => {
-                        texture.minFilter = THREE.LinearFilter;
-                        texture.magFilter = THREE.LinearFilter;
+                        texture.encoding = THREE.sRGBEncoding;
                         planeMaterial.map = texture;
                         planeMaterial.needsUpdate = true;
                         
                         const img = texture.image;
-                        if (img && img.width && img.height) {
+                        if (img.width && img.height) {
                             const aspect = img.width / img.height;
                             const maxSize = 1.5;
-                            let planeWidth, planeHeight;
-                            if (aspect > 1) {
-                                planeWidth = maxSize;
-                                planeHeight = maxSize / aspect;
-                            } else {
-                                planeHeight = maxSize;
-                                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);
-                            
-                            frame.geometry = new THREE.BoxGeometry(planeWidth + 0.1, planeHeight + 0.1, 0.05);
-                            frame.position.set(CENTER.x, CENTER.y, -0.03);
-                            scene.add(frame);
+                            let w, h;
+                            if (aspect > 1) { w = maxSize; h = maxSize / aspect; }
+                            else { h = maxSize; w = maxSize * aspect; }
+                            targetPlane.geometry.dispose();
+                            targetPlane.geometry = new THREE.PlaneGeometry(w, h);
                         }
-                    }, undefined, (err) => {
-                        console.error('Failed to load texture:', err);
                     });
                 }
+                if (props.imageUrl) updateTextureFromUrl(props.imageUrl);
                 
-                if (props.imageUrl) {
-                    updateTextureFromUrl(props.imageUrl);
-                }
-                
-                // =============================================
-                // SOFTBOX LIGHT - Red box with white diffuser
-                // =============================================
+                // --- NEW LIGHT MODEL (SOFTBOX) ---
                 const lightGroup = new THREE.Group();
                 
-                // Main softbox frame (red)
-                const softboxDepth = 0.4;
-                const softboxWidth = 0.7;
-                const softboxHeight = 0.7;
-                
-                // Back panel (red)
-                const backPanel = new THREE.Mesh(
-                    new THREE.BoxGeometry(softboxWidth, softboxHeight, 0.05),
-                    new THREE.MeshStandardMaterial({ 
-                        color: 0xcc2222, 
-                        roughness: 0.7, 
-                        metalness: 0.3 
-                    })
-                );
-                backPanel.position.z = softboxDepth / 2;
-                lightGroup.add(backPanel);
-                
-                // Side panels (red, tapered)
-                const sideGeometry = new THREE.BoxGeometry(0.04, softboxHeight, softboxDepth);
-                const sideMaterial = new THREE.MeshStandardMaterial({ 
-                    color: 0xaa1111, 
-                    roughness: 0.6, 
-                    metalness: 0.2 
+                // Materials
+                // Red Body
+                const bodyMat = new THREE.MeshStandardMaterial({ 
+                    color: 0xcc0000, // Red
+                    roughness: 0.5,
+                    metalness: 0.1
                 });
-                
-                const leftSide = new THREE.Mesh(sideGeometry, sideMaterial);
-                leftSide.position.set(-softboxWidth/2 + 0.02, 0, 0);
-                lightGroup.add(leftSide);
-                
-                const rightSide = new THREE.Mesh(sideGeometry, sideMaterial);
-                rightSide.position.set(softboxWidth/2 - 0.02, 0, 0);
-                lightGroup.add(rightSide);
-                
-                // Top and bottom panels (red)
-                const tbGeometry = new THREE.BoxGeometry(softboxWidth, 0.04, softboxDepth);
-                
-                const topPanel = new THREE.Mesh(tbGeometry, sideMaterial);
-                topPanel.position.set(0, softboxHeight/2 - 0.02, 0);
-                lightGroup.add(topPanel);
-                
-                const bottomPanel = new THREE.Mesh(tbGeometry, sideMaterial);
-                bottomPanel.position.set(0, -softboxHeight/2 + 0.02, 0);
-                lightGroup.add(bottomPanel);
-                
-                // White diffuser front (emissive white)
-                const diffuserMaterial = new THREE.MeshStandardMaterial({
+                // White Light Face
+                const lightFaceMat = new THREE.MeshStandardMaterial({ 
                     color: 0xffffff,
                     emissive: 0xffffff,
-                    emissiveIntensity: 2.0,
-                    roughness: 0.2,
-                    metalness: 0,
-                    transparent: true,
-                    opacity: 0.95
+                    emissiveIntensity: 2.0
                 });
                 
-                const diffuser = new THREE.Mesh(
-                    new THREE.PlaneGeometry(softboxWidth - 0.08, softboxHeight - 0.08),
-                    diffuserMaterial
-                );
-                diffuser.position.z = -softboxDepth / 2 + 0.02;
-                lightGroup.add(diffuser);
-                
-                // Inner glow effect
-                const innerGlow = new THREE.Mesh(
-                    new THREE.PlaneGeometry(softboxWidth - 0.15, softboxHeight - 0.15),
-                    new THREE.MeshBasicMaterial({
-                        color: 0xffffff,
-                        transparent: true,
-                        opacity: 0.8
-                    })
-                );
-                innerGlow.position.z = -softboxDepth / 2 + 0.01;
-                lightGroup.add(innerGlow);
-                
-                // Mounting bracket
-                const bracket = new THREE.Mesh(
-                    new THREE.CylinderGeometry(0.03, 0.03, 0.15, 8),
-                    new THREE.MeshStandardMaterial({ 
-                        color: 0x333333, 
-                        roughness: 0.5, 
-                        metalness: 0.8 
-                    })
-                );
-                bracket.rotation.x = Math.PI / 2;
-                bracket.position.z = softboxDepth / 2 + 0.075;
-                lightGroup.add(bracket);
-                
-                // Ball joint
-                const ballJoint = new THREE.Mesh(
-                    new THREE.SphereGeometry(0.05, 16, 16),
-                    new THREE.MeshStandardMaterial({ 
-                        color: 0x222222, 
-                        roughness: 0.4, 
-                        metalness: 0.9 
-                    })
-                );
-                ballJoint.position.z = softboxDepth / 2 + 0.15;
-                lightGroup.add(ballJoint);
-                
-                // SpotLight for actual lighting
-                const spotLight = new THREE.SpotLight(0xffffff, 15, 12, Math.PI / 4, 0.5, 1);
-                spotLight.position.set(0, 0, -softboxDepth / 2);
+                // Box Geometry with multi-material
+                // Faces: +x, -x, +y, -y, +z, -z
+                // We want the face pointing towards the target (+Z in LookAt local space) to be white.
+                // Three.js BoxGeometry indices: 0:+x, 1:-x, 2:+y, 3:-y, 4:+z, 5:-z
+                const boxMaterials = [
+                    bodyMat, bodyMat, bodyMat, bodyMat, 
+                    lightFaceMat, // +Z (Front)
+                    bodyMat 
+                ];
+                
+                const softbox = new THREE.Mesh(new THREE.BoxGeometry(0.6, 0.6, 0.4), boxMaterials);
+                // When lightGroup looks at CENTER, its +Z axis points to CENTER.
+                // We want the lightFace (+Z) to be at the front.
+                // However, by default, lookAt points +Z to target. 
+                // So the +Z face of the box is the one facing the target.
+                softbox.position.set(0, 0, 0); 
+                softbox.castShadow = true;
+                lightGroup.add(softbox);
+                
+                // Physical Spotlight (Invisible source, but casts the shadow)
+                const spotLight = new THREE.SpotLight(0xffffff, 8, 10, Math.PI / 4, 0.5, 1);
+                spotLight.position.set(0, 0, 0.1);
                 spotLight.castShadow = true;
                 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.002;
+                spotLight.shadow.bias = -0.001;
                 lightGroup.add(spotLight);
                 
-                const lightTarget = new THREE.Object3D();
-                lightTarget.position.copy(CENTER);
-                scene.add(lightTarget);
-                spotLight.target = lightTarget;
-                
-                // Point light for softer fill
-                const pointLight = new THREE.PointLight(0xffffff, 3, 8);
-                pointLight.position.set(0, 0, -softboxDepth / 2 - 0.1);
-                lightGroup.add(pointLight);
+                // Target for spotlight
+                const lightTargetObj = new THREE.Object3D();
+                lightTargetObj.position.copy(CENTER);
+                scene.add(lightTargetObj);
+                spotLight.target = lightTargetObj;
                 
                 scene.add(lightGroup);
                 
-                // =============================================
-                // YELLOW: Azimuth ring and handle
-                // =============================================
+                // --- CONTROLS (AZIMUTH & ELEVATION) ---
+                
+                // YELLOW: Azimuth Ring
                 const azimuthRing = new THREE.Mesh(
-                    new THREE.TorusGeometry(AZIMUTH_RADIUS, 0.035, 16, 64),
+                    new THREE.TorusGeometry(AZIMUTH_RADIUS, 0.03, 16, 64),
                     new THREE.MeshStandardMaterial({ 
-                        color: 0xffd700, 
-                        emissive: 0xffd700, 
-                        emissiveIntensity: 0.4,
-                        roughness: 0.3,
-                        metalness: 0.6
+                        color: 0xffcc00, 
+                        emissive: 0xffcc00, 
+                        emissiveIntensity: 0.2,
+                        transparent: true,
+                        opacity: 0.8
                     })
                 );
                 azimuthRing.rotation.x = Math.PI / 2;
                 azimuthRing.position.y = 0.05;
                 scene.add(azimuthRing);
                 
-                // Azimuth direction markers
-                azimuthSteps.forEach(angle => {
-                    const rad = THREE.MathUtils.degToRad(angle);
-                    const marker = new THREE.Mesh(
-                        new THREE.SphereGeometry(0.06, 8, 8),
-                        new THREE.MeshStandardMaterial({ 
-                            color: 0xffd700, 
-                            emissive: 0xffd700, 
-                            emissiveIntensity: 0.2 
-                        })
-                    );
-                    marker.position.set(
-                        AZIMUTH_RADIUS * Math.sin(rad),
-                        0.05,
-                        AZIMUTH_RADIUS * Math.cos(rad)
-                    );
-                    scene.add(marker);
-                });
-                
+                // YELLOW: Azimuth Handle
                 const azimuthHandle = new THREE.Mesh(
-                    new THREE.SphereGeometry(0.16, 24, 24),
+                    new THREE.SphereGeometry(0.18, 32, 32),
                     new THREE.MeshStandardMaterial({ 
-                        color: 0xffd700, 
-                        emissive: 0xffd700, 
-                        emissiveIntensity: 0.6,
-                        roughness: 0.2,
-                        metalness: 0.7
+                        color: 0xffdd00, // Bright Yellow
+                        emissive: 0xffaa00,
+                        emissiveIntensity: 0.4,
+                        metalness: 0.5,
+                        roughness: 0.2
                     })
                 );
                 azimuthHandle.userData.type = 'azimuth';
                 scene.add(azimuthHandle);
                 
-                // =============================================
-                // BLUE: Elevation arc and handle
-                // =============================================
+                // BLUE: Elevation Arc
                 const arcPoints = [];
-                for (let i = 0; i <= 48; i++) {
-                    const angle = THREE.MathUtils.degToRad(-90 + (180 * i / 48));
+                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, 12, false),
+                    new THREE.TubeGeometry(new THREE.CatmullRomCurve3(arcPoints), 32, 0.03, 8, false),
                     new THREE.MeshStandardMaterial({ 
-                        color: 0x4dabf7, 
-                        emissive: 0x4dabf7, 
-                        emissiveIntensity: 0.4,
-                        roughness: 0.3,
-                        metalness: 0.6
+                        color: 0x007bff, // Blue
+                        emissive: 0x0055ff, 
+                        emissiveIntensity: 0.3
                     })
                 );
                 scene.add(elevationArc);
                 
-                // Elevation markers
-                elevationSteps.forEach(angle => {
-                    const rad = THREE.MathUtils.degToRad(angle);
-                    const marker = new THREE.Mesh(
-                        new THREE.SphereGeometry(0.06, 8, 8),
-                        new THREE.MeshStandardMaterial({ 
-                            color: 0x4dabf7, 
-                            emissive: 0x4dabf7, 
-                            emissiveIntensity: 0.2 
-                        })
-                    );
-                    marker.position.set(
-                        -0.8,
-                        ELEVATION_RADIUS * Math.sin(rad) + CENTER.y,
-                        ELEVATION_RADIUS * Math.cos(rad)
-                    );
-                    scene.add(marker);
-                });
-                
+                // BLUE: Elevation Handle
                 const elevationHandle = new THREE.Mesh(
-                    new THREE.SphereGeometry(0.16, 24, 24),
+                    new THREE.SphereGeometry(0.18, 32, 32),
                     new THREE.MeshStandardMaterial({ 
-                        color: 0x4dabf7, 
-                        emissive: 0x4dabf7, 
-                        emissiveIntensity: 0.6,
-                        roughness: 0.2,
-                        metalness: 0.7
+                        color: 0x007bff, // Blue
+                        emissive: 0x0044cc,
+                        emissiveIntensity: 0.4,
+                        metalness: 0.5,
+                        roughness: 0.2
                     })
                 );
                 elevationHandle.userData.type = 'elevation';
                 scene.add(elevationHandle);
                 
-                // =============================================
-                // REFRESH BUTTON (styled button, not symbol)
-                // =============================================
+                // --- REFRESH BUTTON ---
                 const refreshBtn = document.createElement('button');
-                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="M3 21v-5h5"/></svg><span style="margin-left: 6px;">Reset</span>';
-                refreshBtn.style.cssText = `
-                    position: absolute;
-                    top: 10px;
-                    right: 10px;
-                    background: linear-gradient(135deg, #238636 0%, #2ea043 100%);
-                    color: white;
-                    border: none;
-                    padding: 8px 14px;
-                    border-radius: 6px;
-                    cursor: pointer;
-                    z-index: 10;
-                    font-size: 13px;
-                    font-weight: 500;
-                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-                    display: flex;
-                    align-items: center;
-                    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
-                    transition: all 0.2s ease;
-                `;
-                refreshBtn.onmouseenter = () => {
-                    refreshBtn.style.background = 'linear-gradient(135deg, #2ea043 0%, #3fb950 100%)';
-                    refreshBtn.style.transform = 'translateY(-1px)';
-                    refreshBtn.style.boxShadow = '0 4px 12px rgba(0,0,0,0.4)';
-                };
-                refreshBtn.onmouseleave = () => {
-                    refreshBtn.style.background = 'linear-gradient(135deg, #238636 0%, #2ea043 100%)';
-                    refreshBtn.style.transform = 'translateY(0)';
-                    refreshBtn.style.boxShadow = '0 2px 8px rgba(0,0,0,0.3)';
-                };
+                refreshBtn.innerHTML = 'Reset View';
+                Object.assign(refreshBtn.style, {
+                    position: 'absolute',
+                    top: '15px',
+                    right: '15px',
+                    background: '#FF4500',
+                    color: 'white',
+                    border: 'none',
+                    padding: '8px 16px',
+                    borderRadius: '6px',
+                    cursor: 'pointer',
+                    fontSize: '13px',
+                    fontWeight: '600',
+                    boxShadow: '0 2px 5px rgba(0,0,0,0.3)',
+                    zIndex: '20',
+                    transition: 'background 0.2s'
+                });
+                refreshBtn.onmouseover = () => refreshBtn.style.background = '#ff6622';
+                refreshBtn.onmouseout = () => refreshBtn.style.background = '#FF4500';
+                
                 wrapper.appendChild(refreshBtn);
                 
-                refreshBtn.addEventListener('click', () => {
-                    // Animate reset
-                    const startAz = azimuthAngle;
-                    const startEl = elevationAngle;
-                    const startTime = Date.now();
-                    
-                    function animateReset() {
-                        const t = Math.min((Date.now() - startTime) / 400, 1);
-                        const ease = 1 - Math.pow(1 - t, 4);
-                        
-                        let azDiff = 0 - startAz;
-                        if (azDiff > 180) azDiff -= 360;
-                        if (azDiff < -180) azDiff += 360;
-                        azimuthAngle = startAz + azDiff * ease;
-                        if (azimuthAngle < 0) azimuthAngle += 360;
-                        if (azimuthAngle >= 360) azimuthAngle -= 360;
-                        
-                        elevationAngle = startEl + (0 - startEl) * ease;
-                        
-                        updatePositions();
-                        
-                        if (t < 1) {
-                            requestAnimationFrame(animateReset);
-                        } else {
-                            azimuthAngle = 0;
-                            elevationAngle = 0;
-                            updatePositions();
-                            updatePropsAndTrigger();
-                        }
-                    }
-                    animateReset();
+                refreshBtn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    azimuthAngle = 0;
+                    elevationAngle = 0;
+                    updatePositions();
+                    updatePropsAndTrigger();
                 });
                 
+                // --- LOGIC ---
+                const azimuthSteps = [0, 45, 90, 135, 180, 225, 270, 315];
+                const elevationSteps = [-90, 0, 90];
+                const azimuthNames = { 0:'Front',45:'Right Front',90:'Right',135:'Right Rear',180:'Rear',225:'Left Rear',270:'Left',315:'Left Front'};
+                const elevationNames = { '-90':'Below', '0':'', '90':'Above'};
+                
+                function snapToNearest(value, steps) {
+                    return steps.reduce((prev, curr) => Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);
+                }
+                
                 function updatePositions() {
-                    const distance = BASE_DISTANCE;
                     const azRad = THREE.MathUtils.degToRad(azimuthAngle);
                     const elRad = THREE.MathUtils.degToRad(elevationAngle);
                     
-                    const lightX = distance * Math.sin(azRad) * Math.cos(elRad);
-                    const lightY = distance * Math.sin(elRad) + CENTER.y;
-                    const lightZ = distance * Math.cos(azRad) * Math.cos(elRad);
+                    // Position Light
+                    const lightX = BASE_DISTANCE * Math.sin(azRad) * Math.cos(elRad);
+                    const lightY = BASE_DISTANCE * Math.sin(elRad) + CENTER.y;
+                    const lightZ = BASE_DISTANCE * Math.cos(azRad) * Math.cos(elRad);
                     
                     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)
-                    );
+                    // Position Handles
+                    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
+                    // Update Text
                     const azSnap = snapToNearest(azimuthAngle, azimuthSteps);
                     const elSnap = snapToNearest(elevationAngle, elevationSteps);
-                    let prompt = '💡 Light source from';
-                    if (elSnap !== 0) {
-                        prompt += ' ' + elevationNames[String(elSnap)];
-                    } else {
-                        prompt += ' the ' + azimuthNames[azSnap];
-                    }
-                    promptOverlay.textContent = prompt;
+                    let txt = 'Light source from';
+                    if (elSnap !== 0) txt += ' ' + elevationNames[String(elSnap)];
+                    else txt += ' the ' + azimuthNames[azSnap];
+                    promptOverlay.textContent = txt;
                 }
                 
                 function updatePropsAndTrigger() {
                     const azSnap = snapToNearest(azimuthAngle, azimuthSteps);
                     const elSnap = snapToNearest(elevationAngle, elevationSteps);
-                    
                     props.value = { azimuth: azSnap, elevation: elSnap };
                     trigger('change', props.value);
                 }
                 
-                // Raycasting
+                // --- INTERACTION ---
                 const raycaster = new THREE.Raycaster();
                 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;
                 
-                canvas.addEventListener('mousedown', (e) => {
+                function handleStart(x, y) {
                     const rect = canvas.getBoundingClientRect();
-                    mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
-                    mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
+                    mouse.x = ((x - rect.left) / rect.width) * 2 - 1;
+                    mouse.y = -((y - rect.top) / rect.height) * 2 + 1;
                     
                     raycaster.setFromCamera(mouse, camera);
                     const intersects = raycaster.intersectObjects([azimuthHandle, elevationHandle]);
@@ -834,17 +543,17 @@ class LightingControl3D(gr.HTML):
                     if (intersects.length > 0) {
                         isDragging = true;
                         dragTarget = intersects[0].object;
-                        dragTarget.material.emissiveIntensity = 1.2;
-                        dragTarget.scale.setScalar(1.3);
-                        dragStartMouse.copy(mouse);
+                        dragTarget.scale.setScalar(1.2);
                         canvas.style.cursor = 'grabbing';
+                        return true;
                     }
-                });
+                    return false;
+                }
                 
-                canvas.addEventListener('mousemove', (e) => {
+                function handleMove(x, y) {
                     const rect = canvas.getBoundingClientRect();
-                    mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
-                    mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
+                    mouse.x = ((x - rect.left) / rect.width) * 2 - 1;
+                    mouse.y = -((y - rect.top) / rect.height) * 2 + 1;
                     
                     if (isDragging && dragTarget) {
                         raycaster.setFromCamera(mouse, camera);
@@ -855,185 +564,117 @@ class LightingControl3D(gr.HTML):
                                 azimuthAngle = THREE.MathUtils.radToDeg(Math.atan2(intersection.x, intersection.z));
                                 if (azimuthAngle < 0) azimuthAngle += 360;
                             }
-                        } else if (dragTarget.userData.type === 'elevation') {
-                            const plane = new THREE.Plane(new THREE.Vector3(1, 0, 0), 0.8);
+                        } else {
+                            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 {
+                        // Hover effect
                         raycaster.setFromCamera(mouse, camera);
                         const intersects = raycaster.intersectObjects([azimuthHandle, elevationHandle]);
-                        [azimuthHandle, elevationHandle].forEach(h => {
-                            h.material.emissiveIntensity = 0.6;
-                            h.scale.setScalar(1);
-                        });
-                        if (intersects.length > 0) {
-                            intersects[0].object.material.emissiveIntensity = 0.9;
-                            intersects[0].object.scale.setScalar(1.15);
-                            canvas.style.cursor = 'grab';
-                        } else {
-                            canvas.style.cursor = 'default';
-                        }
+                        if (intersects.length > 0) canvas.style.cursor = 'grab';
+                        else canvas.style.cursor = 'default';
                     }
-                });
+                }
                 
-                const onMouseUp = () => {
+                function handleEnd() {
                     if (dragTarget) {
-                        dragTarget.material.emissiveIntensity = 0.6;
                         dragTarget.scale.setScalar(1);
-                        
-                        // Snap and animate
+                        // Snap animation
                         const targetAz = snapToNearest(azimuthAngle, azimuthSteps);
                         const targetEl = snapToNearest(elevationAngle, elevationSteps);
-                        
                         const startAz = azimuthAngle, startEl = elevationAngle;
                         const startTime = Date.now();
                         
-                        function animateSnap() {
+                        function animate() {
                             const t = Math.min((Date.now() - startTime) / 200, 1);
                             const ease = 1 - Math.pow(1 - t, 3);
                             
                             let azDiff = targetAz - startAz;
                             if (azDiff > 180) azDiff -= 360;
                             if (azDiff < -180) azDiff += 360;
+                            
                             azimuthAngle = startAz + azDiff * ease;
                             if (azimuthAngle < 0) azimuthAngle += 360;
                             if (azimuthAngle >= 360) azimuthAngle -= 360;
                             
                             elevationAngle = startEl + (targetEl - startEl) * ease;
-                            
                             updatePositions();
-                            if (t < 1) requestAnimationFrame(animateSnap);
+                            
+                            if (t < 1) requestAnimationFrame(animate);
                             else updatePropsAndTrigger();
                         }
-                        animateSnap();
+                        animate();
                     }
                     isDragging = false;
                     dragTarget = null;
                     canvas.style.cursor = 'default';
-                };
-                
-                canvas.addEventListener('mouseup', onMouseUp);
-                canvas.addEventListener('mouseleave', onMouseUp);
+                }
                 
-                // Touch support for mobile
-                canvas.addEventListener('touchstart', (e) => {
-                    e.preventDefault();
-                    const touch = e.touches[0];
-                    const rect = canvas.getBoundingClientRect();
-                    mouse.x = ((touch.clientX - rect.left) / rect.width) * 2 - 1;
-                    mouse.y = -((touch.clientY - rect.top) / rect.height) * 2 + 1;
-                    
-                    raycaster.setFromCamera(mouse, camera);
-                    const intersects = raycaster.intersectObjects([azimuthHandle, elevationHandle]);
-                    
-                    if (intersects.length > 0) {
-                        isDragging = true;
-                        dragTarget = intersects[0].object;
-                        dragTarget.material.emissiveIntensity = 1.2;
-                        dragTarget.scale.setScalar(1.3);
-                        dragStartMouse.copy(mouse);
-                    }
-                }, { passive: false });
+                canvas.addEventListener('mousedown', e => handleStart(e.clientX, e.clientY));
+                canvas.addEventListener('mousemove', e => handleMove(e.clientX, e.clientY));
+                canvas.addEventListener('mouseup', handleEnd);
+                canvas.addEventListener('mouseleave', handleEnd);
                 
-                canvas.addEventListener('touchmove', (e) => {
+                canvas.addEventListener('touchstart', e => {
                     e.preventDefault();
-                    const touch = e.touches[0];
-                    const rect = canvas.getBoundingClientRect();
-                    mouse.x = ((touch.clientX - rect.left) / rect.width) * 2 - 1;
-                    mouse.y = -((touch.clientY - rect.top) / rect.height) * 2 + 1;
-                    
-                    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)) {
-                                azimuthAngle = THREE.MathUtils.radToDeg(Math.atan2(intersection.x, intersection.z));
-                                if (azimuthAngle < 0) azimuthAngle += 360;
-                            }
-                        } else if (dragTarget.userData.type === 'elevation') {
-                            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
-                                );
-                            }
-                        }
-                        updatePositions();
-                    }
-                }, { passive: false });
-                
-                canvas.addEventListener('touchend', (e) => {
+                    handleStart(e.touches[0].clientX, e.touches[0].clientY);
+                }, {passive: false});
+                canvas.addEventListener('touchmove', e => {
                     e.preventDefault();
-                    onMouseUp();
-                }, { passive: false });
-                
-                canvas.addEventListener('touchcancel', (e) => {
+                    handleMove(e.touches[0].clientX, e.touches[0].clientY);
+                }, {passive: false});
+                canvas.addEventListener('touchend', e => {
                     e.preventDefault();
-                    onMouseUp();
-                }, { passive: false });
+                    handleEnd();
+                }, {passive: false});
                 
-                // Initial update
+                // Initial render
                 updatePositions();
                 
-                // Render loop
                 function render() {
                     requestAnimationFrame(render);
                     renderer.render(scene, camera);
                 }
                 render();
                 
-                // Handle resize
+                // Resize
                 new ResizeObserver(() => {
                     camera.aspect = wrapper.clientWidth / wrapper.clientHeight;
                     camera.updateProjectionMatrix();
                     renderer.setSize(wrapper.clientWidth, wrapper.clientHeight);
                 }).observe(wrapper);
                 
-                // Store update functions for external calls
-                wrapper._updateFromProps = (newVal) => {
-                    if (newVal && typeof newVal === 'object') {
-                        azimuthAngle = newVal.azimuth ?? azimuthAngle;
-                        elevationAngle = newVal.elevation ?? elevationAngle;
+                // Prop watchers
+                wrapper._updateFromProps = (v) => {
+                    if (v && typeof v === 'object') {
+                        azimuthAngle = v.azimuth ?? azimuthAngle;
+                        elevationAngle = v.elevation ?? elevationAngle;
                         updatePositions();
                     }
                 };
-                
                 wrapper._updateTexture = updateTextureFromUrl;
                 
-                // Watch for prop changes
-                let lastImageUrl = props.imageUrl;
-                let lastValue = JSON.stringify(props.value);
+                // Polling for prop changes
+                let lastImg = props.imageUrl;
+                let lastVal = JSON.stringify(props.value);
                 setInterval(() => {
-                    if (props.imageUrl !== lastImageUrl) {
-                        lastImageUrl = props.imageUrl;
+                    if (props.imageUrl !== lastImg) {
+                        lastImg = props.imageUrl;
                         updateTextureFromUrl(props.imageUrl);
                     }
-                    const currentValue = JSON.stringify(props.value);
-                    if (currentValue !== lastValue) {
-                        lastValue = currentValue;
-                        if (props.value && typeof props.value === 'object') {
-                            azimuthAngle = props.value.azimuth ?? azimuthAngle;
-                            elevationAngle = props.value.elevation ?? elevationAngle;
-                            updatePositions();
-                        }
+                    const currVal = JSON.stringify(props.value);
+                    if (currVal !== lastVal) {
+                        lastVal = currVal;
+                        wrapper._updateFromProps(props.value);
                     }
                 }, 100);
             };
-            
             initScene();
         })();
         """
@@ -1046,6 +687,7 @@ class LightingControl3D(gr.HTML):
             **kwargs
         )
 
+# --- GRADIO UI ---
 css = '''
 #col-container { max-width: 1200px; margin: 0 auto; }
 .dark .progress-text { color: white !important; }
@@ -1053,7 +695,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).")
@@ -1075,19 +716,13 @@ with gr.Blocks(css=css) as demo:
             
             azimuth_slider = gr.Slider(
                 label="Azimuth (Horizontal Rotation)",
-                minimum=0,
-                maximum=315,
-                step=45,
-                value=0,
+                minimum=0, maximum=315, step=45, value=0,
                 info="0°=front, 90°=right, 180°=rear, 270°=left"
             )
             
             elevation_slider = gr.Slider(
                 label="Elevation (Vertical Angle)",
-                minimum=-90,
-                maximum=90,
-                step=90,
-                value=0,
+                minimum=-90, maximum=90, step=90, value=0,
                 info="-90°=from below, 0°=horizontal, 90°=from above"
             )
 
@@ -1110,13 +745,12 @@ with gr.Blocks(css=css) as demo:
                 height = gr.Slider(label="Height", minimum=256, maximum=2048, step=8, value=1024)
                 width = gr.Slider(label="Width", minimum=256, maximum=2048, step=8, value=1024)
     
+    # Event Handlers
     def update_prompt_from_sliders(azimuth, elevation):
-        """Update prompt preview when sliders change."""
         prompt = build_lighting_prompt(azimuth, elevation)
         return prompt
     
     def sync_3d_to_sliders(lighting_value):
-        """Sync 3D control changes to sliders."""
         if lighting_value and isinstance(lighting_value, dict):
             az = lighting_value.get('azimuth', 0)
             el = lighting_value.get('elevation', 0)
@@ -1125,14 +759,10 @@ with gr.Blocks(css=css) as demo:
         return gr.update(), gr.update(), gr.update()
     
     def sync_sliders_to_3d(azimuth, elevation):
-        """Sync slider changes to 3D control."""
         return {"azimuth": azimuth, "elevation": elevation}
     
     def update_3d_image(image):
-        """Update the 3D component with the uploaded image."""
-        if image is None:
-            return gr.update(imageUrl=None)
-
+        if image is None: return gr.update(imageUrl=None)
         import base64
         from io import BytesIO
         buffered = BytesIO()
@@ -1181,7 +811,7 @@ with gr.Blocks(css=css) as demo:
         fn=lambda: gr.update(imageUrl=None),
         outputs=[lighting_3d]
     )
-    
+
 if __name__ == "__main__":
     head = '<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>'
     css = '.fillable{max-width: 1200px !important}'