Update app.py

app.py

@@ -15,17 +15,17 @@ from gradio.themes.utils import colors, fonts, sizes
 
 colors.orange_red = colors.Color(
     name="orange_red",
-    c50="rgb(255, 240, 229)",
-    c100="rgb(255, 224, 204)",
-    c200="rgb(255, 194, 153)",
-    c300="rgb(255, 163, 102)",
-    c400="rgb(255, 133, 51)",
-    c500="rgb(255, 69, 0)",
-    c600="rgb(230, 62, 0)",
-    c700="rgb(204, 55, 0)",
-    c800="rgb(179, 48, 0)",
-    c900="rgb(153, 41, 0)",
-    c950="rgb(128, 34, 0)",
+    c50="#FFF0E5",
+    c100="#FFE0CC",
+    c200="#FFC299",
+    c300="#FFA366",
+    c400="#FF8533",
+    c500="#FF4500",
+    c600="#E63E00",
+    c700="#CC3700",
+    c800="#B33000",
+    c900="#992900",
+    c950="#802200",
 )
 
 class OrangeRedTheme(Soft):
@@ -127,9 +127,21 @@ ELEVATION_MAP = {
 }
 
 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()))
     
@@ -150,6 +162,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)
     
@@ -183,6 +198,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
@@ -199,30 +215,40 @@ def update_dimensions_on_upload(image):
     return new_width, new_height
 
 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: rgb(26, 26, 26); 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: rgb(0, 255, 136); white-space: nowrap; z-index: 10;"></div>
+        <div id="lighting-control-wrapper" style="width: 100%; height: 450px; position: relative; background: #1a1a1a; border-radius: 12px; overflow: hidden;">
+            <div id="prompt-overlay" style="position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.8); padding: 8px 16px; border-radius: 8px; font-family: monospace; font-size: 12px; color: #00ff88; white-space: nowrap; z-index: 10;"></div>
         </div>
         """
         
         js_on_load = """
         (() => {
-            const wrapper = element.querySelector('[id="lighting-control-wrapper"]');
-            const promptOverlay = element.querySelector('[id="prompt-overlay"]');
+            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);
                     return;
                 }
                 
+                // Scene setup
                 const scene = new THREE.Scene();
                 scene.background = new THREE.Color(0x1a1a1a);
                 
+                // Fog for light ray effect
+                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);
@@ -234,8 +260,10 @@ class LightingControl3D(gr.HTML):
                 renderer.shadowMap.type = THREE.PCFSoftShadowMap;
                 wrapper.insertBefore(renderer.domElement, promptOverlay);
                 
+                // Lighting for the scene
                 scene.add(new THREE.AmbientLight(0xffffff, 0.1));
                 
+                // Ground plane for shadows
                 const ground = new THREE.Mesh(
                     new THREE.PlaneGeometry(10, 10),
                     new THREE.ShadowMaterial({ opacity: 0.3 })
@@ -245,16 +273,20 @@ class LightingControl3D(gr.HTML):
                 ground.receiveShadow = true;
                 scene.add(ground);
                 
+                // Grid
                 scene.add(new THREE.GridHelper(8, 16, 0x333333, 0x222222));
                 
+                // Constants
                 const CENTER = new THREE.Vector3(0, 0.75, 0);
                 const BASE_DISTANCE = 2.5;
                 const AZIMUTH_RADIUS = 2.4;
                 const ELEVATION_RADIUS = 1.8;
                 
+                // State
                 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 = {
@@ -268,23 +300,24 @@ class LightingControl3D(gr.HTML):
                     return steps.reduce((prev, curr) => Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);
                 }
                 
+                // Create placeholder texture (smiley face)
                 function createPlaceholderTexture() {
                     const canvas = document.createElement('canvas');
                     canvas.width = 256;
                     canvas.height = 256;
                     const ctx = canvas.getContext('2d');
-                    ctx.fillStyle = 'rgb(58, 58, 74)';
+                    ctx.fillStyle = '#3a3a4a';
                     ctx.fillRect(0, 0, 256, 256);
-                    ctx.fillStyle = 'rgb(255, 204, 153)';
+                    ctx.fillStyle = '#ffcc99';
                     ctx.beginPath();
                     ctx.arc(128, 128, 80, 0, Math.PI * 2);
                     ctx.fill();
-                    ctx.fillStyle = 'rgb(51, 51, 51)';
+                    ctx.fillStyle = '#333';
                     ctx.beginPath();
                     ctx.arc(100, 110, 10, 0, Math.PI * 2);
                     ctx.arc(156, 110, 10, 0, Math.PI * 2);
                     ctx.fill();
-                    ctx.strokeStyle = 'rgb(51, 51, 51)';
+                    ctx.strokeStyle = '#333';
                     ctx.lineWidth = 3;
                     ctx.beginPath();
                     ctx.arc(128, 130, 35, 0.2, Math.PI - 0.2);
@@ -292,6 +325,7 @@ class LightingControl3D(gr.HTML):
                     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 });
                 let targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(1.2, 1.2), planeMaterial);
@@ -299,10 +333,13 @@ class LightingControl3D(gr.HTML):
                 targetPlane.receiveShadow = true;
                 scene.add(targetPlane);
                 
+                // Function to update texture from image URL
                 function updateTextureFromUrl(url) {
                     if (!url) {
+                        // Reset to placeholder
                         planeMaterial.map = createPlaceholderTexture();
                         planeMaterial.needsUpdate = true;
+                        // Reset plane to square
                         scene.remove(targetPlane);
                         targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(1.2, 1.2), planeMaterial);
                         targetPlane.position.copy(CENTER);
@@ -319,6 +356,7 @@ class LightingControl3D(gr.HTML):
                         planeMaterial.map = texture;
                         planeMaterial.needsUpdate = true;
                         
+                        // Adjust plane aspect ratio to match image
                         const img = texture.image;
                         if (img && img.width && img.height) {
                             const aspect = img.width / img.height;
@@ -345,189 +383,62 @@ class LightingControl3D(gr.HTML):
                     });
                 }
                 
+                // Check for initial imageUrl
                 if (props.imageUrl) {
                     updateTextureFromUrl(props.imageUrl);
                 }
                 
+                // --- NEW LIGHT MODEL: TORCH WITH RAYS ---
                 const lightGroup = new THREE.Group();
-                
-                const handleGeo = new THREE.CylinderGeometry(0.06, 0.07, 0.45, 16);
-                const handleMat = new THREE.MeshStandardMaterial({ 
-                    color: 0x2a2a2a,
-                    roughness: 0.4,
-                    metalness: 0.7
+
+                // 1. Torch Handle (Dark Metal Cylinder)
+                const handleGeo = new THREE.CylinderGeometry(0.06, 0.06, 0.5, 16);
+                const torchMat = new THREE.MeshStandardMaterial({ 
+                    color: 0x222222, 
+                    roughness: 0.4, 
+                    metalness: 0.8 
                 });
-                const handle = new THREE.Mesh(handleGeo, handleMat);
+                const handle = new THREE.Mesh(handleGeo, torchMat);
                 handle.rotation.x = Math.PI / 2;
-                handle.position.z = -0.35;
+                handle.position.z = 0.25;
                 lightGroup.add(handle);
-                
-                const gripGeo = new THREE.CylinderGeometry(0.065, 0.065, 0.3, 16);
-                const gripMat = new THREE.MeshStandardMaterial({ 
-                    color: 0x1a1a1a,
-                    roughness: 0.8,
-                    metalness: 0.2
-                });
-                const grip = new THREE.Mesh(gripGeo, gripMat);
-                grip.rotation.x = Math.PI / 2;
-                grip.position.z = -0.35;
-                lightGroup.add(grip);
-                
-                for (let i = 0; i < 8; i++) {
-                    const ringGeo = new THREE.TorusGeometry(0.068, 0.008, 8, 16);
-                    const ringMat = new THREE.MeshStandardMaterial({ color: 0x333333, roughness: 0.6, metalness: 0.3 });
-                    const ring = new THREE.Mesh(ringGeo, ringMat);
-                    ring.position.z = -0.5 + i * 0.035;
-                    lightGroup.add(ring);
-                }
-                
-                const headGeo = new THREE.CylinderGeometry(0.18, 0.08, 0.25, 24);
-                const headMat = new THREE.MeshStandardMaterial({ 
-                    color: 0x444444,
-                    roughness: 0.3,
-                    metalness: 0.8
-                });
-                const head = new THREE.Mesh(headGeo, headMat);
+
+                // 2. Torch Head (Flared Bezel)
+                const headGeo = new THREE.CylinderGeometry(0.12, 0.07, 0.2, 32);
+                const head = new THREE.Mesh(headGeo, torchMat);
                 head.rotation.x = Math.PI / 2;
-                head.position.z = 0;
+                head.position.z = -0.1;
                 lightGroup.add(head);
-                
-                const rimGeo = new THREE.TorusGeometry(0.18, 0.02, 16, 32);
-                const rimMat = new THREE.MeshStandardMaterial({ 
-                    color: 0x666666,
-                    roughness: 0.2,
-                    metalness: 0.9
-                });
-                const rim = new THREE.Mesh(rimGeo, rimMat);
-                rim.position.z = 0.12;
-                lightGroup.add(rim);
-                
-                const reflectorGeo = new THREE.ConeGeometry(0.15, 0.18, 24, 1, true);
-                const reflectorMat = new THREE.MeshStandardMaterial({ 
-                    color: 0xcccccc,
-                    roughness: 0.1,
-                    metalness: 1.0,
-                    side: THREE.BackSide
-                });
-                const reflector = new THREE.Mesh(reflectorGeo, reflectorMat);
-                reflector.rotation.x = -Math.PI / 2;
-                reflector.position.z = 0.03;
-                lightGroup.add(reflector);
-                
-                const lensGeo = new THREE.CircleGeometry(0.12, 32);
+
+                // 3. Bulb/Lens (Bright Emissive Circle)
+                const lensGeo = new THREE.CircleGeometry(0.1, 32);
                 const lensMat = new THREE.MeshStandardMaterial({ 
-                    color: 0xffffee,
-                    emissive: 0xffffaa,
-                    emissiveIntensity: 4.0,
-                    transparent: true,
-                    opacity: 0.95
+                    color: 0xffffff, 
+                    emissive: 0xffffff, 
+                    emissiveIntensity: 3.0 
                 });
                 const lens = new THREE.Mesh(lensGeo, lensMat);
-                lens.position.z = 0.13;
+                lens.position.z = -0.201; // Slightly in front of head
                 lightGroup.add(lens);
-                
-                const glowGeo = new THREE.CircleGeometry(0.18, 32);
-                const glowMat = new THREE.MeshBasicMaterial({ 
-                    color: 0xffffcc,
-                    transparent: true,
-                    opacity: 0.3
-                });
-                const glow = new THREE.Mesh(glowGeo, glowMat);
-                glow.position.z = 0.14;
-                lightGroup.add(glow);
-                
-                const rayGroup = new THREE.Group();
-                
-                const coreRayGeo = new THREE.ConeGeometry(0.08, 2.0, 32, 1, true);
-                const coreRayMat = new THREE.MeshBasicMaterial({ 
+
+                // 4. Light Rays (Volumetric Cone)
+                const beamGeo = new THREE.ConeGeometry(0.5, 3.0, 32, 1, true); // Open ended cone
+                const beamMat = new THREE.MeshBasicMaterial({
                     color: 0xffffee,
                     transparent: true,
-                    opacity: 0.25,
-                    side: THREE.DoubleSide
-                });
-                const coreRay = new THREE.Mesh(coreRayGeo, coreRayMat);
-                coreRay.rotation.x = -Math.PI / 2;
-                coreRay.position.z = 1.15;
-                rayGroup.add(coreRay);
-                
-                const midRayGeo = new THREE.ConeGeometry(0.25, 2.2, 32, 1, true);
-                const midRayMat = new THREE.MeshBasicMaterial({ 
-                    color: 0xffffaa,
-                    transparent: true,
                     opacity: 0.12,
-                    side: THREE.DoubleSide
-                });
-                const midRay = new THREE.Mesh(midRayGeo, midRayMat);
-                midRay.rotation.x = -Math.PI / 2;
-                midRay.position.z = 1.25;
-                rayGroup.add(midRay);
-                
-                const outerRayGeo = new THREE.ConeGeometry(0.5, 2.5, 32, 1, true);
-                const outerRayMat = new THREE.MeshBasicMaterial({ 
-                    color: 0xffff88,
-                    transparent: true,
-                    opacity: 0.06,
-                    side: THREE.DoubleSide
-                });
-                const outerRay = new THREE.Mesh(outerRayGeo, outerRayMat);
-                outerRay.rotation.x = -Math.PI / 2;
-                outerRay.position.z = 1.4;
-                rayGroup.add(outerRay);
-                
-                const numBeams = 12;
-                for (let i = 0; i < numBeams; i++) {
-                    const angle = (i / numBeams) * Math.PI * 2;
-                    const beamLength = 1.8 + Math.random() * 0.4;
-                    const beamGeo = new THREE.CylinderGeometry(0.008, 0.002, beamLength, 8);
-                    const beamMat = new THREE.MeshBasicMaterial({ 
-                        color: 0xffffcc,
-                        transparent: true,
-                        opacity: 0.15 + Math.random() * 0.1
-                    });
-                    const beam = new THREE.Mesh(beamGeo, beamMat);
-                    beam.rotation.x = -Math.PI / 2;
-                    const spread = 0.15;
-                    beam.position.set(
-                        Math.cos(angle) * spread,
-                        Math.sin(angle) * spread,
-                        0.15 + beamLength / 2
-                    );
-                    beam.rotation.y = Math.cos(angle) * 0.1;
-                    beam.rotation.x += Math.sin(angle) * 0.1;
-                    rayGroup.add(beam);
-                }
-                
-                const particleCount = 30;
-                const particlePositions = [];
-                const particleSizes = [];
-                for (let i = 0; i < particleCount; i++) {
-                    const t = Math.random();
-                    const angle = Math.random() * Math.PI * 2;
-                    const radius = Math.random() * 0.3 * t;
-                    particlePositions.push(
-                        Math.cos(angle) * radius,
-                        Math.sin(angle) * radius,
-                        0.3 + t * 1.8
-                    );
-                    particleSizes.push(0.02 + Math.random() * 0.02);
-                }
-                
-                const particleGeo = new THREE.BufferGeometry();
-                particleGeo.setAttribute('position', new THREE.Float32BufferAttribute(particlePositions, 3));
-                const particleMat = new THREE.PointsMaterial({
-                    color: 0xffffee,
-                    size: 0.03,
-                    transparent: true,
-                    opacity: 0.4,
-                    sizeAttenuation: true
+                    side: THREE.DoubleSide,
+                    depthWrite: false, // Prevents z-fighting transparency issues
+                    blending: THREE.AdditiveBlending // Glow effect
                 });
-                const particles = new THREE.Points(particleGeo, particleMat);
-                rayGroup.add(particles);
-                
-                lightGroup.add(rayGroup);
-                
-                const spotLight = new THREE.SpotLight(0xffffee, 12, 10, Math.PI / 4, 0.5, 1);
-                spotLight.position.set(0, 0, 0.1);
+                const beam = new THREE.Mesh(beamGeo, beamMat);
+                beam.rotation.x = -Math.PI / 2; // Point forward
+                beam.position.z = -1.7; // Offset by half height + lens pos
+                lightGroup.add(beam);
+                
+                // Actual Light Source (Invisible logic)
+                const spotLight = new THREE.SpotLight(0xffffff, 10, 10, Math.PI / 6, 0.5, 1);
+                spotLight.position.set(0, 0, -0.05);
                 spotLight.castShadow = true;
                 spotLight.shadow.mapSize.width = 1024;
                 spotLight.shadow.mapSize.height = 1024;
@@ -543,6 +454,9 @@ class LightingControl3D(gr.HTML):
                 
                 scene.add(lightGroup);
                 
+                // --- CONTROLS: COLORS UPDATED ---
+                
+                // Azimuth ring (YELLOW)
                 const azimuthRing = new THREE.Mesh(
                     new THREE.TorusGeometry(AZIMUTH_RADIUS, 0.04, 16, 64),
                     new THREE.MeshStandardMaterial({ color: 0xffff00, emissive: 0xffff00, emissiveIntensity: 0.3 })
@@ -551,6 +465,7 @@ class LightingControl3D(gr.HTML):
                 azimuthRing.position.y = 0.05;
                 scene.add(azimuthRing);
                 
+                // Azimuth Handle (YELLOW)
                 const azimuthHandle = new THREE.Mesh(
                     new THREE.SphereGeometry(0.18, 16, 16),
                     new THREE.MeshStandardMaterial({ color: 0xffff00, emissive: 0xffff00, emissiveIntensity: 0.5 })
@@ -558,6 +473,7 @@ class LightingControl3D(gr.HTML):
                 azimuthHandle.userData.type = 'azimuth';
                 scene.add(azimuthHandle);
                 
+                // Elevation arc (BLUE)
                 const arcPoints = [];
                 for (let i = 0; i <= 32; i++) {
                     const angle = THREE.MathUtils.degToRad(-90 + (180 * i / 32));
@@ -570,6 +486,7 @@ class LightingControl3D(gr.HTML):
                 );
                 scene.add(elevationArc);
                 
+                // Elevation Handle (BLUE)
                 const elevationHandle = new THREE.Mesh(
                     new THREE.SphereGeometry(0.18, 16, 16),
                     new THREE.MeshStandardMaterial({ color: 0x0000ff, emissive: 0x0000ff, emissiveIntensity: 0.5 })
@@ -577,13 +494,14 @@ class LightingControl3D(gr.HTML):
                 elevationHandle.userData.type = 'elevation';
                 scene.add(elevationHandle);
                 
+                // --- REFRESH BUTTON (Redesigned) ---
                 const refreshBtn = document.createElement('button');
                 refreshBtn.innerHTML = 'Reset View';
                 refreshBtn.style.position = 'absolute';
                 refreshBtn.style.top = '15px';
                 refreshBtn.style.right = '15px';
-                refreshBtn.style.background = 'rgb(230, 62, 0)';
-                refreshBtn.style.color = 'rgb(255, 255, 255)';
+                refreshBtn.style.background = '#e63e00'; // Theme primary color
+                refreshBtn.style.color = '#fff';
                 refreshBtn.style.border = 'none';
                 refreshBtn.style.padding = '8px 16px';
                 refreshBtn.style.borderRadius = '6px';
@@ -595,8 +513,8 @@ class LightingControl3D(gr.HTML):
                 refreshBtn.style.boxShadow = '0 2px 5px rgba(0,0,0,0.3)';
                 refreshBtn.style.transition = 'background 0.2s';
                 
-                refreshBtn.onmouseover = () => refreshBtn.style.background = 'rgb(255, 87, 34)';
-                refreshBtn.onmouseout = () => refreshBtn.style.background = 'rgb(230, 62, 0)';
+                refreshBtn.onmouseover = () => refreshBtn.style.background = '#ff5722';
+                refreshBtn.onmouseout = () => refreshBtn.style.background = '#e63e00';
                 
                 wrapper.appendChild(refreshBtn);
                 
@@ -607,8 +525,6 @@ class LightingControl3D(gr.HTML):
                     updatePropsAndTrigger();
                 });
                 
-                let time = 0;
-                
                 function updatePositions() {
                     const distance = BASE_DISTANCE;
                     const azRad = THREE.MathUtils.degToRad(azimuthAngle);
@@ -624,6 +540,7 @@ class LightingControl3D(gr.HTML):
                     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';
@@ -643,6 +560,7 @@ class LightingControl3D(gr.HTML):
                     trigger('change', props.value);
                 }
                 
+                // Raycasting
                 const raycaster = new THREE.Raycaster();
                 const mouse = new THREE.Vector2();
                 let isDragging = false;
@@ -715,6 +633,7 @@ class LightingControl3D(gr.HTML):
                         dragTarget.material.emissiveIntensity = 0.5;
                         dragTarget.scale.setScalar(1);
                         
+                        // Snap and animate
                         const targetAz = snapToNearest(azimuthAngle, azimuthSteps);
                         const targetEl = snapToNearest(elevationAngle, elevationSteps);
                         
@@ -747,7 +666,7 @@ class LightingControl3D(gr.HTML):
                 
                 canvas.addEventListener('mouseup', onMouseUp);
                 canvas.addEventListener('mouseleave', onMouseUp);
-                
+                // Touch support for mobile
                 canvas.addEventListener('touchstart', (e) => {
                     e.preventDefault();
                     const touch = e.touches[0];
@@ -805,43 +724,24 @@ class LightingControl3D(gr.HTML):
                     onMouseUp();
                 }, { passive: false });
                 
+                // Initial update
                 updatePositions();
                 
+                // Render loop
                 function render() {
                     requestAnimationFrame(render);
-                    
-                    time += 0.016;
-                    
-                    lensMat.emissiveIntensity = 3.5 + Math.sin(time * 3) * 0.5;
-                    glowMat.opacity = 0.25 + Math.sin(time * 2) * 0.1;
-                    
-                    coreRayMat.opacity = 0.22 + Math.sin(time * 4) * 0.03;
-                    midRayMat.opacity = 0.10 + Math.sin(time * 3 + 1) * 0.02;
-                    outerRayMat.opacity = 0.05 + Math.sin(time * 2 + 2) * 0.015;
-                    
-                    const positions = particles.geometry.attributes.position.array;
-                    for (let i = 0; i < particleCount; i++) {
-                        positions[i * 3 + 2] += 0.01;
-                        if (positions[i * 3 + 2] > 2.2) {
-                            positions[i * 3 + 2] = 0.3;
-                            const angle = Math.random() * Math.PI * 2;
-                            const radius = Math.random() * 0.1;
-                            positions[i * 3] = Math.cos(angle) * radius;
-                            positions[i * 3 + 1] = Math.sin(angle) * radius;
-                        }
-                    }
-                    particles.geometry.attributes.position.needsUpdate = true;
-                    
                     renderer.render(scene, camera);
                 }
                 render();
                 
+                // Handle 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;
@@ -852,13 +752,16 @@ class LightingControl3D(gr.HTML):
                 
                 wrapper._updateTexture = updateTextureFromUrl;
                 
+                // Watch for prop changes (imageUrl and value)
                 let lastImageUrl = props.imageUrl;
                 let lastValue = JSON.stringify(props.value);
                 setInterval(() => {
+                    // Check imageUrl changes
                     if (props.imageUrl !== lastImageUrl) {
                         lastImageUrl = props.imageUrl;
                         updateTextureFromUrl(props.imageUrl);
                     }
+                    // Check value changes (from sliders)
                     const currentValue = JSON.stringify(props.value);
                     if (currentValue !== lastValue) {
                         lastValue = currentValue;
@@ -884,14 +787,14 @@ class LightingControl3D(gr.HTML):
         )
 
 css = '''
-.col-container { max-width: 1200px; margin: 0 auto; }
+#col-container { max-width: 1200px; margin: 0 auto; }
 .dark .progress-text { color: white !important; }
-.lighting-3d-control { min-height: 450px; }
+#lighting-3d-control { min-height: 450px; }
 .slider-row { display: flex; gap: 10px; align-items: center; }
-.main-title h1 {font-size: 2.4em !important;}
+#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_classes=["main-title"])
+    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).")
     
     with gr.Row():
@@ -903,7 +806,7 @@ with gr.Blocks(css=css) as demo:
             
             lighting_3d = LightingControl3D(
                 value={"azimuth": 0, "elevation": 0},
-                elem_classes=["lighting-3d-control"]
+                elem_id="lighting-3d-control"
             )
             run_btn = gr.Button("Generate Image", variant="primary", size="lg")
             
@@ -947,10 +850,12 @@ with gr.Blocks(css=css) as demo:
                 width = gr.Slider(label="Width", minimum=256, maximum=2048, step=8, value=1024)
     
     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)
@@ -959,9 +864,11 @@ 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)