update app

app.py

@@ -234,12 +234,14 @@ 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);
                     return;
                 }
                 
+                // Scene setup
                 const scene = new THREE.Scene();
                 scene.background = new THREE.Color(0x1a1a1a);
                 
@@ -254,8 +256,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 })
@@ -265,16 +269,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 = {
@@ -288,6 +296,7 @@ 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;
@@ -312,6 +321,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);
@@ -319,10 +329,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);
@@ -339,6 +352,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;
@@ -365,161 +379,63 @@ class LightingControl3D(gr.HTML):
                     });
                 }
                 
+                // Check for initial imageUrl
                 if (props.imageUrl) {
                     updateTextureFromUrl(props.imageUrl);
                 }
                 
-                // Square Studio Light Design
+                // --- NEW LIGHT MODEL: STUDIO SQUARE WITH RAYS ---
                 const lightGroup = new THREE.Group();
-                
-                // Main light body - dark metallic frame
-                const frameGeo = new THREE.BoxGeometry(0.65, 0.65, 0.12);
-                const frameMat = new THREE.MeshStandardMaterial({ 
-                    color: 0x1a1a1a,
-                    roughness: 0.2,
-                    metalness: 0.9
-                });
-                const frame = new THREE.Mesh(frameGeo, frameMat);
-                lightGroup.add(frame);
-                
-                // Silver border trim
-                const borderGeo = new THREE.BoxGeometry(0.68, 0.68, 0.08);
-                const borderMat = new THREE.MeshStandardMaterial({ 
-                    color: 0x888888,
+
+                // 1. Studio Housing (Black/Dark Grey)
+                const housingGeo = new THREE.BoxGeometry(0.7, 0.7, 0.2);
+                const housingMat = new THREE.MeshStandardMaterial({ 
+                    color: 0x222222, 
                     roughness: 0.3,
-                    metalness: 0.8
-                });
-                const border = new THREE.Mesh(borderGeo, borderMat);
-                border.position.z = 0.02;
-                lightGroup.add(border);
-                
-                // LED Panel surface with grid texture
-                const panelCanvas = document.createElement('canvas');
-                panelCanvas.width = 128;
-                panelCanvas.height = 128;
-                const panelCtx = panelCanvas.getContext('2d');
-                panelCtx.fillStyle = '#ffffff';
-                panelCtx.fillRect(0, 0, 128, 128);
-                panelCtx.strokeStyle = '#f0f0f0';
-                panelCtx.lineWidth = 1;
-                for (let i = 0; i <= 8; i++) {
-                    panelCtx.beginPath();
-                    panelCtx.moveTo(i * 16, 0);
-                    panelCtx.lineTo(i * 16, 128);
-                    panelCtx.stroke();
-                    panelCtx.beginPath();
-                    panelCtx.moveTo(0, i * 16);
-                    panelCtx.lineTo(128, i * 16);
-                    panelCtx.stroke();
-                }
-                const panelTexture = new THREE.CanvasTexture(panelCanvas);
-                
-                const panelGeo = new THREE.PlaneGeometry(0.58, 0.58);
-                const panelMat = new THREE.MeshStandardMaterial({ 
-                    map: panelTexture,
-                    color: 0xffffff,
-                    emissive: 0xffffee,
-                    emissiveIntensity: 2.0,
-                    roughness: 0.1
+                    metalness: 0.7
                 });
-                const panel = new THREE.Mesh(panelGeo, panelMat);
-                panel.position.z = 0.061;
-                lightGroup.add(panel);
-                
-                // Corner accent lights
-                const accentPositions = [
-                    [-0.28, -0.28], [0.28, -0.28], [0.28, 0.28], [-0.28, 0.28]
-                ];
-                accentPositions.forEach(([x, y]) => {
-                    const accentGeo = new THREE.CircleGeometry(0.03, 16);
-                    const accentMat = new THREE.MeshBasicMaterial({ 
-                        color: 0x00ff88,
-                        transparent: true,
-                        opacity: 0.8
-                    });
-                    const accent = new THREE.Mesh(accentGeo, accentMat);
-                    accent.position.set(x, y, 0.062);
-                    lightGroup.add(accent);
+                const housing = new THREE.Mesh(housingGeo, housingMat);
+                
+                // 2. Light Surface (Bright White Square)
+                const faceGeo = new THREE.PlaneGeometry(0.65, 0.65);
+                const faceMat = new THREE.MeshStandardMaterial({ 
+                    color: 0xffffff, 
+                    emissive: 0xffffff,
+                    emissiveIntensity: 3.0, 
+                    roughness: 0.0
                 });
+                const face = new THREE.Mesh(faceGeo, faceMat);
+                face.position.z = 0.105; // Slightly in front of housing
+                housing.add(face);
                 
-                // Natural Light Rays - Lines emanating from panel
-                const rayGroup = new THREE.Group();
+                // 3. Light Rays (Volumetric Beam Effect)
+                // Using a transparent cylinder to simulate a beam
+                const beamHeight = 4.0;
+                // Cylinder top (0.5) is light size, bottom (1.2) is spread
+                const beamGeo = new THREE.CylinderGeometry(0.5, 1.2, beamHeight, 32, 1, true);
                 
-                // Create rays from grid points on the panel
-                const rayStartPoints = [];
-                const gridSize = 3;
-                for (let i = -gridSize; i <= gridSize; i++) {
-                    for (let j = -gridSize; j <= gridSize; j++) {
-                        rayStartPoints.push([i * 0.08, j * 0.08]);
-                    }
-                }
+                // Shift geometry so narrow end starts at 0 and extends positive
+                beamGeo.translate(0, -beamHeight / 2, 0);
+                beamGeo.rotateX(-Math.PI / 2); // Rotate to point along +Z axis
                 
-                // Add corner rays
-                const cornerSpread = 0.25;
-                rayStartPoints.push([-cornerSpread, -cornerSpread]);
-                rayStartPoints.push([cornerSpread, -cornerSpread]);
-                rayStartPoints.push([cornerSpread, cornerSpread]);
-                rayStartPoints.push([-cornerSpread, cornerSpread]);
-                
-                rayStartPoints.forEach(([x, y], index) => {
-                    const rayLength = 1.8 + Math.random() * 0.4;
-                    const spreadFactor = 0.15;
-                    
-                    // Calculate end point with natural spread
-                    const endX = x * (1 + rayLength * spreadFactor);
-                    const endY = y * (1 + rayLength * spreadFactor);
-                    const endZ = rayLength;
-                    
-                    // Create gradient effect using multiple segments
-                    const segments = 8;
-                    for (let s = 0; s < segments; s++) {
-                        const t1 = s / segments;
-                        const t2 = (s + 1) / segments;
-                        
-                        const x1 = x + (endX - x) * t1;
-                        const y1 = y + (endY - y) * t1;
-                        const z1 = 0.07 + endZ * t1;
-                        
-                        const x2 = x + (endX - x) * t2;
-                        const y2 = y + (endY - y) * t2;
-                        const z2 = 0.07 + endZ * t2;
-                        
-                        const opacity = 0.25 * (1 - t1) * (1 - t1);
-                        
-                        const rayMat = new THREE.LineBasicMaterial({
-                            color: 0xffffee,
-                            transparent: true,
-                            opacity: opacity
-                        });
-                        
-                        const points = [
-                            new THREE.Vector3(x1, y1, z1),
-                            new THREE.Vector3(x2, y2, z2)
-                        ];
-                        const rayGeo = new THREE.BufferGeometry().setFromPoints(points);
-                        const ray = new THREE.Line(rayGeo, rayMat);
-                        rayGroup.add(ray);
-                    }
-                });
-                
-                // Add subtle cone for overall light volume hint
-                const coneGeo = new THREE.ConeGeometry(0.6, 2.0, 4, 1, true);
-                const coneMat = new THREE.MeshBasicMaterial({
-                    color: 0xffffee,
+                const beamMat = new THREE.MeshBasicMaterial({
+                    color: 0xffffff,
                     transparent: true,
-                    opacity: 0.03,
-                    side: THREE.DoubleSide
+                    opacity: 0.06,
+                    side: THREE.DoubleSide,
+                    depthWrite: false,
+                    blending: THREE.AdditiveBlending
                 });
-                const cone = new THREE.Mesh(coneGeo, coneMat);
-                cone.rotation.x = -Math.PI / 2;
-                cone.position.z = 1.0;
-                rayGroup.add(cone);
                 
-                lightGroup.add(rayGroup);
+                const beam = new THREE.Mesh(beamGeo, beamMat);
+                beam.position.z = 0.12; // Start just in front of the face
+                housing.add(beam);
+                
+                lightGroup.add(housing);
                 
                 // 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(0xffffff, 15, 20, Math.PI / 3, 0.5, 1);
+                spotLight.position.set(0, 0, 0.1);
                 spotLight.castShadow = true;
                 spotLight.shadow.mapSize.width = 1024;
                 spotLight.shadow.mapSize.height = 1024;
@@ -535,7 +451,9 @@ class LightingControl3D(gr.HTML):
                 
                 scene.add(lightGroup);
                 
-                // Azimuth ring (Yellow)
+                // --- 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 })
@@ -544,7 +462,7 @@ class LightingControl3D(gr.HTML):
                 azimuthRing.position.y = 0.05;
                 scene.add(azimuthRing);
                 
-                // Azimuth Handle (Yellow)
+                // 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 })
@@ -552,7 +470,7 @@ class LightingControl3D(gr.HTML):
                 azimuthHandle.userData.type = 'azimuth';
                 scene.add(azimuthHandle);
                 
-                // Elevation arc (Blue)
+                // Elevation arc (BLUE)
                 const arcPoints = [];
                 for (let i = 0; i <= 32; i++) {
                     const angle = THREE.MathUtils.degToRad(-90 + (180 * i / 32));
@@ -565,7 +483,7 @@ class LightingControl3D(gr.HTML):
                 );
                 scene.add(elevationArc);
                 
-                // Elevation Handle (Blue)
+                // 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 })
@@ -573,13 +491,13 @@ class LightingControl3D(gr.HTML):
                 elevationHandle.userData.type = 'elevation';
                 scene.add(elevationHandle);
                 
-                // Reset View Button
+                // --- REFRESH BUTTON ---
                 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';
+                refreshBtn.style.background = '#e63e00'; // Theme primary color
                 refreshBtn.style.color = '#fff';
                 refreshBtn.style.border = 'none';
                 refreshBtn.style.padding = '8px 16px';
@@ -619,6 +537,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';
@@ -638,6 +557,7 @@ class LightingControl3D(gr.HTML):
                     trigger('change', props.value);
                 }
                 
+                // Raycasting
                 const raycaster = new THREE.Raycaster();
                 const mouse = new THREE.Vector2();
                 let isDragging = false;
@@ -710,6 +630,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);
                         
@@ -742,7 +663,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];
@@ -800,20 +721,24 @@ class LightingControl3D(gr.HTML):
                     onMouseUp();
                 }, { passive: false });
                 
+                // Initial update
                 updatePositions();
                 
+                // Render loop
                 function render() {
                     requestAnimationFrame(render);
                     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;
@@ -824,13 +749,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;
@@ -856,11 +784,14 @@ class LightingControl3D(gr.HTML):
         )
 
 css = '''
-.progress-text { color: white !important; }
+#col-container { max-width: 1200px; margin: 0 auto; }
+.dark .progress-text { color: white !important; }
+#lighting-3d-control { min-height: 450px; }
 .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("# **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():
@@ -868,7 +799,7 @@ with gr.Blocks(css=css) as demo:
             image = gr.Image(label="Input Image", type="pil", height=300)
             
             gr.Markdown("### 3D Lighting Control")
-            gr.Markdown("*Drag the colored handles: Yellow = Azimuth (Direction), Blue = Elevation (Height)*")
+            gr.Markdown("*Drag the colored handles: 🟡 Azimuth (Direction), 🔵 Elevation (Height)*")
             
             lighting_3d = LightingControl3D(
                 value={"azimuth": 0, "elevation": 0},
@@ -884,7 +815,7 @@ with gr.Blocks(css=css) as demo:
                 maximum=315,
                 step=45,
                 value=0,
-                info="0 degrees = front, 90 degrees = right, 180 degrees = rear, 270 degrees = left"
+                info="0°=front, 90°=right, 180°=rear, 270°=left"
             )
             
             elevation_slider = gr.Slider(
@@ -893,7 +824,7 @@ with gr.Blocks(css=css) as demo:
                 maximum=90,
                 step=90,
                 value=0,
-                info="-90 degrees = from below, 0 degrees = horizontal, 90 degrees = from above"
+                info="-90°=from below, 0°=horizontal, 90°=from above"
             )
 
             with gr.Row():
@@ -907,7 +838,7 @@ with gr.Blocks(css=css) as demo:
         with gr.Column(scale=1):
             result = gr.Image(label="Output Image", height=500)
             
-            with gr.Accordion("Advanced Settings", open=False):
+            with gr.Accordion("Advanced Settings", open=True):
                 seed = gr.Slider(label="Seed", minimum=0, maximum=MAX_SEED, step=1, value=0)
                 randomize_seed = gr.Checkbox(label="Randomize Seed", value=True)
                 guidance_scale = gr.Slider(label="Guidance Scale", minimum=1.0, maximum=10.0, step=0.1, value=1.0)