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="#FFF0E5",
-    c100="#FFE0CC",
-    c200="#FFC299",
-    c300="#FFA366",
-    c400="#FF8533",
-    c500="#FF4500",
-    c600="#E63E00",
-    c700="#CC3700",
-    c800="#B33000",
-    c900="#992900",
-    c950="#802200",
+    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)",
 )
 
 class OrangeRedTheme(Soft):
@@ -127,21 +127,9 @@ 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()))
     
@@ -162,9 +150,6 @@ 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)
     
@@ -198,7 +183,6 @@ 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
@@ -215,34 +199,27 @@ 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: #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: 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>
         """
         
         js_on_load = """
         (() => {
-            const wrapper = element.querySelector('#lighting-control-wrapper');
-            const promptOverlay = element.querySelector('#prompt-overlay');
+            const wrapper = element.querySelector('[id="lighting-control-wrapper"]');
+            const promptOverlay = element.querySelector('[id="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);
                 
@@ -257,10 +234,8 @@ 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 })
@@ -270,20 +245,16 @@ 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 = {
@@ -297,24 +268,23 @@ 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 = '#3a3a4a';
+                    ctx.fillStyle = 'rgb(58, 58, 74)';
                     ctx.fillRect(0, 0, 256, 256);
-                    ctx.fillStyle = '#ffcc99';
+                    ctx.fillStyle = 'rgb(255, 204, 153)';
                     ctx.beginPath();
                     ctx.arc(128, 128, 80, 0, Math.PI * 2);
                     ctx.fill();
-                    ctx.fillStyle = '#333';
+                    ctx.fillStyle = 'rgb(51, 51, 51)';
                     ctx.beginPath();
                     ctx.arc(100, 110, 10, 0, Math.PI * 2);
                     ctx.arc(156, 110, 10, 0, Math.PI * 2);
                     ctx.fill();
-                    ctx.strokeStyle = '#333';
+                    ctx.strokeStyle = 'rgb(51, 51, 51)';
                     ctx.lineWidth = 3;
                     ctx.beginPath();
                     ctx.arc(128, 130, 35, 0.2, Math.PI - 0.2);
@@ -322,7 +292,6 @@ 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);
@@ -330,13 +299,10 @@ 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);
@@ -353,7 +319,6 @@ 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;
@@ -380,41 +345,189 @@ class LightingControl3D(gr.HTML):
                     });
                 }
                 
-                // Check for initial imageUrl
                 if (props.imageUrl) {
                     updateTextureFromUrl(props.imageUrl);
                 }
                 
-                // --- NEW LIGHT MODEL: SOFTBOX ---
                 const lightGroup = new THREE.Group();
-
-                // 1. Softbox Housing (Red)
-                const housingGeo = new THREE.BoxGeometry(0.6, 0.6, 0.4);
-                const housingMat = new THREE.MeshStandardMaterial({ 
-                    color: 0xff0000,   // RED HOUSING
-                    roughness: 0.5,
-                    metalness: 0.1
+                
+                const handleGeo = new THREE.CylinderGeometry(0.06, 0.07, 0.45, 16);
+                const handleMat = new THREE.MeshStandardMaterial({ 
+                    color: 0x2a2a2a,
+                    roughness: 0.4,
+                    metalness: 0.7
+                });
+                const handle = new THREE.Mesh(handleGeo, handleMat);
+                handle.rotation.x = Math.PI / 2;
+                handle.position.z = -0.35;
+                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);
+                head.rotation.x = Math.PI / 2;
+                head.position.z = 0;
+                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);
+                const lensMat = new THREE.MeshStandardMaterial({ 
+                    color: 0xffffee,
+                    emissive: 0xffffaa,
+                    emissiveIntensity: 4.0,
+                    transparent: true,
+                    opacity: 0.95
+                });
+                const lens = new THREE.Mesh(lensGeo, lensMat);
+                lens.position.z = 0.13;
+                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({ 
+                    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 housing = new THREE.Mesh(housingGeo, housingMat);
-                
-                // 2. Diffuser Panel (White, Emissive)
-                const diffuserGeo = new THREE.PlaneGeometry(0.55, 0.55);
-                const diffuserMat = new THREE.MeshStandardMaterial({ 
-                    color: 0xffffff,    // WHITE LIGHT
-                    emissive: 0xffffff,
-                    emissiveIntensity: 2.0, 
-                    roughness: 0.2
+                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
                 });
-                const diffuser = new THREE.Mesh(diffuserGeo, diffuserMat);
-                diffuser.position.z = 0.201; // Slightly in front of the housing
+                const particles = new THREE.Points(particleGeo, particleMat);
+                rayGroup.add(particles);
                 
-                // Assemble the softbox
-                housing.add(diffuser);
-                lightGroup.add(housing);
+                lightGroup.add(rayGroup);
                 
-                // Actual Light Source
-                const spotLight = new THREE.SpotLight(0xffffff, 10, 10, Math.PI / 3, 1, 1);
-                spotLight.position.set(0, 0, -0.05);
+                const spotLight = new THREE.SpotLight(0xffffee, 12, 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;
@@ -430,9 +543,6 @@ 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 })
@@ -441,7 +551,6 @@ 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 })
@@ -449,7 +558,6 @@ 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));
@@ -462,7 +570,6 @@ 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 })
@@ -470,14 +577,13 @@ 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 = '#e63e00'; // Theme primary color
-                refreshBtn.style.color = '#fff';
+                refreshBtn.style.background = 'rgb(230, 62, 0)';
+                refreshBtn.style.color = 'rgb(255, 255, 255)';
                 refreshBtn.style.border = 'none';
                 refreshBtn.style.padding = '8px 16px';
                 refreshBtn.style.borderRadius = '6px';
@@ -489,8 +595,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 = '#ff5722';
-                refreshBtn.onmouseout = () => refreshBtn.style.background = '#e63e00';
+                refreshBtn.onmouseover = () => refreshBtn.style.background = 'rgb(255, 87, 34)';
+                refreshBtn.onmouseout = () => refreshBtn.style.background = 'rgb(230, 62, 0)';
                 
                 wrapper.appendChild(refreshBtn);
                 
@@ -501,6 +607,8 @@ class LightingControl3D(gr.HTML):
                     updatePropsAndTrigger();
                 });
                 
+                let time = 0;
+                
                 function updatePositions() {
                     const distance = BASE_DISTANCE;
                     const azRad = THREE.MathUtils.degToRad(azimuthAngle);
@@ -516,7 +624,6 @@ 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';
@@ -536,7 +643,6 @@ class LightingControl3D(gr.HTML):
                     trigger('change', props.value);
                 }
                 
-                // Raycasting
                 const raycaster = new THREE.Raycaster();
                 const mouse = new THREE.Vector2();
                 let isDragging = false;
@@ -609,7 +715,6 @@ 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);
                         
@@ -642,7 +747,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];
@@ -700,24 +805,43 @@ 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;
@@ -728,16 +852,13 @@ 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;
@@ -763,14 +884,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_id="main-title")
+    gr.Markdown("**Qwen-Image-Edit-2511-3D-Lighting-Control**", elem_classes=["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():
@@ -782,7 +903,7 @@ with gr.Blocks(css=css) as demo:
             
             lighting_3d = LightingControl3D(
                 value={"azimuth": 0, "elevation": 0},
-                elem_id="lighting-3d-control"
+                elem_classes=["lighting-3d-control"]
             )
             run_btn = gr.Button("Generate Image", variant="primary", size="lg")
             
@@ -826,12 +947,10 @@ 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)
@@ -840,11 +959,9 @@ 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)