update app

app.py

@@ -4,7 +4,7 @@ import random
 import torch
 import spaces
 from typing import Iterable
-from PIL import Image, ImageDraw
+from PIL import Image
 from diffusers import FlowMatchEulerDiscreteScheduler
 from qwenimage.pipeline_qwenimage_edit_plus import QwenImageEditPlusPipeline
 from qwenimage.transformer_qwenimage import QwenImageTransformer2DModel
@@ -28,7 +28,6 @@ colors.purple = colors.Color(
     c950="#3B0764",
 )
 
-
 class PurpleTheme(Soft):
     def __init__(
         self,
@@ -80,7 +79,6 @@ class PurpleTheme(Soft):
             block_label_background_fill="*primary_200",
         )
 
-
 purple_theme = PurpleTheme()
 
 MAX_SEED = np.iinfo(np.int32).max
@@ -92,9 +90,9 @@ pipe = QwenImageEditPlusPipeline.from_pretrained(
     transformer=QwenImageTransformer2DModel.from_pretrained(
         "prithivMLmods/Qwen-Image-Edit-Rapid-AIO-V4",
         torch_dtype=dtype,
-        device_map="cuda",
+        device_map='cuda'
     ),
-    torch_dtype=dtype,
+    torch_dtype=dtype
 ).to(device)
 try:
     pipe.transformer.set_attn_processor(QwenDoubleStreamAttnProcessorFA3())
@@ -103,52 +101,52 @@ except Exception as e:
     print(f"Warning: Could not set FA3 processor: {e}")
 
 ADAPTER_SPECS = {
-    "Object-Remover": {
-        "repo": "prithivMLmods/QIE-2509-Object-Remover-Bbox",
-        "weights": "QIE-2509-Object-Remover-Bbox-5000.safetensors",
-        "adapter_name": "object-remover",
+    "Multi-Angle-Lighting": {
+        "repo": "dx8152/Qwen-Edit-2509-Multi-Angle-Lighting",
+        "weights": "多角度灯光-251116.safetensors",
+        "adapter_name": "multi-angle-lighting"
     },
 }
 loaded = False
 
-DEFAULT_PROMPT = "Remove the red highlighted object from the scene"
-
-
-def burn_boxes_onto_image(pil_image: Image.Image, boxes_json_str: str) -> Image.Image:
-    """Burn red outline-only rectangles onto the image (no fill)."""
-    import json
-    if not pil_image:
-        return pil_image
-    try:
-        boxes = json.loads(boxes_json_str) if boxes_json_str and boxes_json_str.strip() else []
-    except Exception:
-        boxes = []
-    if not boxes:
-        return pil_image
-
-    img = pil_image.copy().convert("RGB")
-    w, h = img.size
-    draw = ImageDraw.Draw(img)
-    bw = max(3, w // 250)
-
-    for b in boxes:
-        x1 = int(b["x1"] * w)
-        y1 = int(b["y1"] * h)
-        x2 = int(b["x2"] * w)
-        y2 = int(b["y2"] * h)
-        lx, rx = min(x1, x2), max(x1, x2)
-        ty, by_ = min(y1, y2), max(y1, y2)
-        # Red outline only — no fill
-        draw.rectangle([lx, ty, rx, by_], outline=(255, 0, 0), width=bw)
+AZIMUTH_MAP = {
+    0: "Front",
+    45: "Right Front",
+    90: "Right",
+    135: "Right Rear",
+    180: "Rear",
+    225: "Left Rear",
+    270: "Left",
+    315: "Left Front"
+}
 
-    return img
+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.
+    """
+    azimuth_snapped = snap_to_nearest(azimuth, list(AZIMUTH_MAP.keys()))
+    elevation_snapped = snap_to_nearest(elevation, list(ELEVATION_MAP.keys()))
+    
+    if elevation_snapped == 0:
+        return f"Light source from the {AZIMUTH_MAP[azimuth_snapped]}"
+    else:
+        return f"Light source from {ELEVATION_MAP[elevation_snapped]}"
 
 @spaces.GPU
-def infer_object_removal(
-    source_image: Image.Image,
-    boxes_json: str,
-    prompt: str,
+def infer_lighting_edit(
+    image: Image.Image,
+    azimuth: float = 0.0,
+    elevation: float = 0.0,
     seed: int = 0,
     randomize_seed: bool = True,
     guidance_scale: float = 1.0,
@@ -158,47 +156,29 @@ def infer_object_removal(
 ):
     global loaded
     progress = gr.Progress(track_tqdm=True)
-
+    
     if not loaded:
         pipe.load_lora_weights(
-            ADAPTER_SPECS["Object-Remover"]["repo"],
-            weight_name=ADAPTER_SPECS["Object-Remover"]["weights"],
-            adapter_name=ADAPTER_SPECS["Object-Remover"]["adapter_name"],
-        )
-        pipe.set_adapters(
-            [ADAPTER_SPECS["Object-Remover"]["adapter_name"]], adapter_weights=[1.0]
+            ADAPTER_SPECS["Multi-Angle-Lighting"]["repo"],
+            weight_name=ADAPTER_SPECS["Multi-Angle-Lighting"]["weights"],
+            adapter_name=ADAPTER_SPECS["Multi-Angle-Lighting"]["adapter_name"]
         )
+        pipe.set_adapters([ADAPTER_SPECS["Multi-Angle-Lighting"]["adapter_name"]], adapter_weights=[1.0])
         loaded = True
+    
+    prompt = build_lighting_prompt(azimuth, elevation)
+    print(f"Generated Prompt: {prompt}")
 
-    if not prompt or prompt.strip() == "":
-        prompt = DEFAULT_PROMPT
-    print(f"Prompt: {prompt}")
-    print(f"Boxes JSON received: '{boxes_json}'")
-
-    if source_image is None:
-        raise gr.Error("Please upload an image first.")
-
-    import json
-    try:
-        boxes = json.loads(boxes_json) if boxes_json and boxes_json.strip() else []
-    except Exception as e:
-        print(f"JSON parse error: {e}")
-        boxes = []
-
-    if not boxes:
-        raise gr.Error("Please draw at least one bounding box on the image.")
-
-    progress(0.3, desc="Burning red boxes onto image...")
-    marked = burn_boxes_onto_image(source_image, boxes_json)
-
-    progress(0.5, desc="Running object removal inference...")
+    progress(0.7, desc="Fast lighting enabled....")
 
     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=[marked],
+        image=[pil_image],
         prompt=prompt,
         height=height if height != 0 else None,
         width=width if width != 0 else None,
@@ -207,9 +187,7 @@ def infer_object_removal(
         guidance_scale=guidance_scale,
         num_images_per_prompt=1,
     ).images[0]
-
-    return result, seed, marked
-
+    return result, seed, prompt
 
 def update_dimensions_on_upload(image):
     if image is None:
@@ -227,703 +205,1032 @@ def update_dimensions_on_upload(image):
     new_height = (new_height // 8) * 8
     return new_width, new_height
 
-
-css = r"""
-@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
-body,.gradio-container{background-color:#FAF5FF!important;background-image:linear-gradient(#E9D5FF 1px,transparent 1px),linear-gradient(90deg,#E9D5FF 1px,transparent 1px)!important;background-size:40px 40px!important;font-family:'Outfit',sans-serif!important}
-.dark body,.dark .gradio-container{background-color:#1a1a1a!important;background-image:linear-gradient(rgba(168,85,247,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(168,85,247,.1) 1px,transparent 1px)!important;background-size:40px 40px!important}
-#col-container{margin:0 auto;max-width:1200px}
-#main-title{text-align:center!important;padding:1rem 0 .5rem 0}
-#main-title h1{font-size:2.4em!important;font-weight:700!important;background:linear-gradient(135deg,#A855F7 0%,#C084FC 50%,#9333EA 100%);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradient-shift 4s ease infinite;letter-spacing:-.02em}
-@keyframes gradient-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
-#subtitle{text-align:center!important;margin-bottom:1.5rem}
-#subtitle p{margin:0 auto;color:#666;font-size:1rem;text-align:center!important}
-#subtitle a{color:#A855F7!important;text-decoration:none;font-weight:500}
-#subtitle a:hover{text-decoration:underline}
-.gradio-group{background:rgba(255,255,255,.9)!important;border:2px solid #E9D5FF!important;border-radius:12px!important;box-shadow:0 4px 24px rgba(168,85,247,.08)!important;backdrop-filter:blur(10px);transition:all .3s ease}
-.gradio-group:hover{box-shadow:0 8px 32px rgba(168,85,247,.12)!important;border-color:#C084FC!important}
-.dark .gradio-group{background:rgba(30,30,30,.9)!important;border-color:rgba(168,85,247,.3)!important}
-.primary{border-radius:8px!important;font-weight:600!important;letter-spacing:.02em!important;transition:all .3s ease!important}
-.primary:hover{transform:translateY(-2px)!important}
-.gradio-textbox textarea{font-family:'IBM Plex Mono',monospace!important;font-size:.95rem!important;line-height:1.7!important;background:rgba(255,255,255,.95)!important;border:1px solid #E9D5FF!important;border-radius:8px!important}
-.gradio-accordion{border-radius:10px!important;border:1px solid #E9D5FF!important}
-.gradio-accordion>.label-wrap{background:rgba(168,85,247,.03)!important;border-radius:10px!important}
-footer{display:none!important}
-@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
-.gradio-row{animation:fadeIn .4s ease-out}
-label{font-weight:600!important;color:#333!important}
-.dark label{color:#eee!important}
-.gradio-slider input[type="range"]{accent-color:#A855F7!important}
-::-webkit-scrollbar{width:8px;height:8px}
-::-webkit-scrollbar-track{background:rgba(168,85,247,.05);border-radius:4px}
-::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#A855F7,#C084FC);border-radius:4px}
-::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#9333EA,#A855F7)}
-
-#bbox-draw-wrap{position:relative;border:2px solid #C084FC;border-radius:12px;overflow:hidden;background:#1a1a1a;min-height:420px}
-#bbox-draw-wrap:hover{border-color:#A855F7}
-#bbox-draw-canvas{cursor:crosshair;display:block;margin:0 auto}
-.bbox-hint{background:rgba(168,85,247,.08);border:1px solid #E9D5FF;border-radius:8px;padding:10px 16px;margin:8px 0;font-size:.9rem;color:#6B21A8}
-.dark .bbox-hint{background:rgba(168,85,247,.15);border-color:rgba(168,85,247,.3);color:#C084FC}
-
-.bbox-toolbar-section{
-    display:flex;
-    gap:8px;
-    flex-wrap:wrap;
-    justify-content:center;
-    align-items:center;
-    padding:12px 16px;
-    margin-top:10px;
-    background:rgba(255,255,255,.92);
-    border:2px solid #E9D5FF;
-    border-radius:10px;
-    box-shadow:0 2px 12px rgba(168,85,247,.08);
-}
-.dark .bbox-toolbar-section{
-    background:rgba(30,30,30,.9);
-    border-color:rgba(168,85,247,.3);
-}
-.bbox-toolbar-section .toolbar-label{
-    font-family:'Outfit',sans-serif;
-    font-weight:600;
-    font-size:13px;
-    color:#6B21A8;
-    margin-right:6px;
-    user-select:none;
-}
-.dark .bbox-toolbar-section .toolbar-label{color:#C084FC}
-.bbox-toolbar-section .toolbar-divider{
-    width:1px;
-    height:28px;
-    background:#E9D5FF;
-    margin:0 4px;
-}
-.dark .bbox-toolbar-section .toolbar-divider{background:rgba(168,85,247,.3)}
-.bbox-toolbar-section button{
-    color:#fff;
-    border:none;
-    padding:7px 15px;
-    border-radius:7px;
-    cursor:pointer;
-    font-family:'Outfit',sans-serif;
-    font-weight:600;
-    font-size:13px;
-    box-shadow:0 2px 5px rgba(0,0,0,.15);
-    transition:background .2s,transform .15s,box-shadow .2s;
-}
-.bbox-toolbar-section button:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.2)}
-.bbox-toolbar-section button:active{transform:translateY(0)}
-.bbox-tb-draw{background:#9333EA}
-.bbox-tb-draw:hover{background:#A855F7}
-.bbox-tb-draw.active{background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.5)}
-.bbox-tb-select{background:#6366f1}
-.bbox-tb-select:hover{background:#818cf8}
-.bbox-tb-select.active{background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.5)}
-.bbox-tb-del{background:#dc2626}
-.bbox-tb-del:hover{background:#ef4444}
-.bbox-tb-undo{background:#7E22CE}
-.bbox-tb-undo:hover{background:#9333EA}
-.bbox-tb-clear{background:#be123c}
-.bbox-tb-clear:hover{background:#e11d48}
-
-#bbox-status{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.75);color:#00ff88;padding:5px 10px;border-radius:6px;font-family:'IBM Plex Mono',monospace;font-size:11px;z-index:10;display:none;pointer-events:none}
-#bbox-count{position:absolute;top:10px;right:10px;background:rgba(147,51,234,.85);color:#fff;padding:4px 10px;border-radius:6px;font-family:'IBM Plex Mono',monospace;font-size:11px;z-index:10;display:none}
-
-#bbox-debug-count{
-    text-align:center;
-    padding:6px 12px;
-    margin-top:6px;
-    font-family:'IBM Plex Mono',monospace;
-    font-size:12px;
-    color:#6B21A8;
-    background:rgba(168,85,247,.06);
-    border:1px dashed #C084FC;
-    border-radius:6px;
-}
-.dark #bbox-debug-count{color:#C084FC;background:rgba(168,85,247,.12)}
-
-#boxes-json-input{
-    max-height:0!important;
-    overflow:hidden!important;
-    margin:0!important;
-    padding:0!important;
-    opacity:0!important;
-    pointer-events:none!important;
-    position:absolute!important;
-    z-index:-1!important;
-}
-"""
-
-bbox_drawer_js = r"""
-() => {
-    function initCanvasBbox() {
-        if (window.__bboxInitDone) return;
-
-        const canvas     = document.getElementById('bbox-draw-canvas');
-        const wrap       = document.getElementById('bbox-draw-wrap');
-        const status     = document.getElementById('bbox-status');
-        const badge      = document.getElementById('bbox-count');
-        const debugCount = document.getElementById('bbox-debug-count');
-
-        const btnDraw   = document.getElementById('tb-draw');
-        const btnSelect = document.getElementById('tb-select');
-        const btnDel    = document.getElementById('tb-del');
-        const btnUndo   = document.getElementById('tb-undo');
-        const btnClear  = document.getElementById('tb-clear');
-
-        if (!canvas || !wrap || !debugCount || !btnDraw) {
-            console.log('[BBox] waiting for DOM...');
-            setTimeout(initCanvasBbox, 250);
-            return;
-        }
-
-        window.__bboxInitDone = true;
-        console.log('[BBox] canvas init OK');
-        const ctx = canvas.getContext('2d');
-
-        let boxes = [];
-        window.__bboxBoxes = boxes;
-
-        let baseImg = null;
-        let dispW = 512, dispH = 400;
-        let selectedIdx = -1;
-        let mode = 'draw';
-
-        let dragging  = false;
-        let dragType  = null;
-        let dragStart = {x:0, y:0};
-        let dragOrig  = null;
-        const HANDLE  = 7;
-        const RED_STROKE = 'rgba(255,0,0,0.95)';
-        const RED_STROKE_WIDTH = 3;
-        const SEL_STROKE = 'rgba(0,120,255,0.95)';
-
-        function n2px(b) {
-            return {x1:b.x1*dispW, y1:b.y1*dispH, x2:b.x2*dispW, y2:b.y2*dispH};
-        }
-        function px2n(x1,y1,x2,y2) {
-            return {
-                x1: Math.min(x1,x2)/dispW, y1: Math.min(y1,y2)/dispH,
-                x2: Math.max(x1,x2)/dispW, y2: Math.max(y1,y2)/dispH
-            };
-        }
-        function clamp01(v){return Math.max(0,Math.min(1,v));}
-        function fitSize(nw, nh) {
-            const mw = wrap.clientWidth || 512, mh = 500;
-            const r = Math.min(mw/nw, mh/nh, 1);
-            dispW = Math.round(nw*r); dispH = Math.round(nh*r);
-            canvas.width  = dispW; canvas.height = dispH;
-            canvas.style.width  = dispW+'px';
-            canvas.style.height = dispH+'px';
-        }
-        function canvasXY(e) {
-            const r  = canvas.getBoundingClientRect();
-            const cx = e.touches ? e.touches[0].clientX : e.clientX;
-            const cy = e.touches ? e.touches[0].clientY : e.clientY;
-            return {x: Math.max(0,Math.min(dispW, cx-r.left)),
-                    y: Math.max(0,Math.min(dispH, cy-r.top))};
-        }
-
-        function syncToGradio() {
-            window.__bboxBoxes = boxes;
-            const jsonStr = JSON.stringify(boxes);
-
-            if (debugCount) {
-                debugCount.textContent = boxes.length > 0
-                    ? '\u2705 ' + boxes.length + ' box' + (boxes.length > 1 ? 'es' : '') +
-                      ' ready  |  JSON: ' + jsonStr.substring(0,80) +
-                      (jsonStr.length > 80 ? '\u2026' : '')
-                    : '\u2B1C No boxes drawn yet';
-            }
-
-            const container = document.getElementById('boxes-json-input');
-            if (!container) {
-                console.warn('[BBox] #boxes-json-input not in DOM');
-                return;
-            }
-            const targets = [
-                ...container.querySelectorAll('textarea'),
-                ...container.querySelectorAll('input[type="text"]'),
-                ...container.querySelectorAll('input:not([type])')
-            ];
-            targets.forEach(el => {
-                const proto = el.tagName === 'TEXTAREA'
-                    ? HTMLTextAreaElement.prototype
-                    : HTMLInputElement.prototype;
-                const ns = Object.getOwnPropertyDescriptor(proto, 'value');
-                if (ns && ns.set) {
-                    ns.set.call(el, jsonStr);
-                    el.dispatchEvent(new Event('input',  {bubbles:true, composed:true}));
-                    el.dispatchEvent(new Event('change', {bubbles:true, composed:true}));
-                    el.dispatchEvent(new Event('blur',   {bubbles:true, composed:true}));
+class LightingControl3D(gr.HTML):
+    """
+    A 3D lighting control component using Three.js.
+    """
+    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>
+        """
+        
+        js_on_load = """
+        (() => {
+            const wrapper = element.querySelector('#lighting-control-wrapper');
+            const promptOverlay = element.querySelector('#prompt-overlay');
+            
+            const initScene = () => {
+                if (typeof THREE === 'undefined') {
+                    setTimeout(initScene, 100);
+                    return;
+                }
+                
+                const scene = new THREE.Scene();
+                scene.background = new THREE.Color(0x1a1a1a);
+                
+                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 });
+                renderer.setSize(wrapper.clientWidth, wrapper.clientHeight);
+                renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+                renderer.shadowMap.enabled = true;
+                renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+                wrapper.insertBefore(renderer.domElement, promptOverlay);
+                
+                scene.add(new THREE.AmbientLight(0xffffff, 0.1));
+                
+                const ground = new THREE.Mesh(
+                    new THREE.PlaneGeometry(10, 10),
+                    new THREE.ShadowMaterial({ opacity: 0.3 })
+                );
+                ground.rotation.x = -Math.PI / 2;
+                ground.position.y = 0;
+                ground.receiveShadow = true;
+                scene.add(ground);
+                
+                scene.add(new THREE.GridHelper(8, 16, 0x333333, 0x222222));
+                
+                const CENTER = new THREE.Vector3(0, 0.75, 0);
+                const BASE_DISTANCE = 2.5;
+                const AZIMUTH_RADIUS = 2.4;
+                const ELEVATION_RADIUS = 1.8;
+                
+                let azimuthAngle = props.value?.azimuth || 0;
+                let elevationAngle = props.value?.elevation || 0;
+                
+                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 placeholder() {
-            ctx.fillStyle='#2a2a2a'; ctx.fillRect(0,0,dispW,dispH);
-            ctx.strokeStyle='#444'; ctx.lineWidth=2; ctx.setLineDash([8,4]);
-            ctx.strokeRect(20,20,dispW-40,dispH-40); ctx.setLineDash([]);
-            ctx.fillStyle='#888'; ctx.font='16px Outfit,sans-serif';
-            ctx.textAlign='center'; ctx.textBaseline='middle';
-            ctx.fillText('Upload an image above first',dispW/2,dispH/2-10);
-            ctx.font='13px Outfit'; ctx.fillStyle='#666';
-            ctx.fillText('Then draw red boxes on objects to remove',dispW/2,dispH/2+14);
-        }
-
-        function redraw(tempRect) {
-            ctx.clearRect(0,0,dispW,dispH);
-            if (!baseImg) { placeholder(); updateBadge(); return; }
-            ctx.drawImage(baseImg, 0, 0, dispW, dispH);
-
-            boxes.forEach((b,i) => {
-                const p = n2px(b);
-                const lx=p.x1, ty=p.y1, w=p.x2-p.x1, h=p.y2-p.y1;
-
-                /* RED OUTLINE ONLY — no fill */
-                if (i === selectedIdx) {
-                    ctx.strokeStyle = SEL_STROKE;
-                    ctx.lineWidth = RED_STROKE_WIDTH + 1;
-                    ctx.setLineDash([6,3]);
-                } else {
-                    ctx.strokeStyle = RED_STROKE;
-                    ctx.lineWidth = RED_STROKE_WIDTH;
-                    ctx.setLineDash([]);
+                
+                function createPlaceholderTexture() {
+                    const canvas = document.createElement('canvas');
+                    canvas.width = 256;
+                    canvas.height = 256;
+                    const ctx = canvas.getContext('2d');
+                    ctx.fillStyle = '#3a3a4a';
+                    ctx.fillRect(0, 0, 256, 256);
+                    ctx.fillStyle = '#ffcc99';
+                    ctx.beginPath();
+                    ctx.arc(128, 128, 80, 0, Math.PI * 2);
+                    ctx.fill();
+                    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 = '#333';
+                    ctx.lineWidth = 3;
+                    ctx.beginPath();
+                    ctx.arc(128, 130, 35, 0.2, Math.PI - 0.2);
+                    ctx.stroke();
+                    return new THREE.CanvasTexture(canvas);
                 }
-                ctx.strokeRect(lx, ty, w, h);
-                ctx.setLineDash([]);
-
-                /* label tag */
-                ctx.fillStyle = i===selectedIdx ? 'rgba(0,120,255,0.85)' : 'rgba(255,0,0,0.85)';
-                ctx.font = 'bold 11px IBM Plex Mono,monospace';
-                ctx.textAlign = 'left'; ctx.textBaseline = 'top';
-                const label = '#'+(i+1);
-                const tw = ctx.measureText(label).width;
-                ctx.fillRect(lx, ty-16, tw+6, 16);
-                ctx.fillStyle = '#fff';
-                ctx.fillText(label, lx+3, ty-14);
-
-                if (i === selectedIdx) drawHandles(p);
-            });
-
-            /* temp drawing rect — outline only */
-            if (tempRect) {
-                const rx = Math.min(tempRect.x1,tempRect.x2);
-                const ry = Math.min(tempRect.y1,tempRect.y2);
-                const rw = Math.abs(tempRect.x2-tempRect.x1);
-                const rh = Math.abs(tempRect.y2-tempRect.y1);
-                ctx.strokeStyle = RED_STROKE;
-                ctx.lineWidth = RED_STROKE_WIDTH;
-                ctx.setLineDash([6,3]);
-                ctx.strokeRect(rx, ry, rw, rh);
-                ctx.setLineDash([]);
-            }
-            updateBadge();
-        }
-
-        function drawHandles(p) {
-            const pts = handlePoints(p);
-            ctx.fillStyle = 'rgba(0,120,255,0.9)';
-            ctx.strokeStyle = '#fff'; ctx.lineWidth = 1.5;
-            for (const k in pts) {
-                const h = pts[k];
-                ctx.fillRect(h.x-HANDLE, h.y-HANDLE, HANDLE*2, HANDLE*2);
-                ctx.strokeRect(h.x-HANDLE, h.y-HANDLE, HANDLE*2, HANDLE*2);
-            }
-        }
-
-        function handlePoints(p) {
-            const mx = (p.x1+p.x2)/2, my = (p.y1+p.y2)/2;
-            return {
-                tl:{x:p.x1,y:p.y1}, tc:{x:mx,y:p.y1}, tr:{x:p.x2,y:p.y1},
-                ml:{x:p.x1,y:my},                       mr:{x:p.x2,y:my},
-                bl:{x:p.x1,y:p.y2}, bc:{x:mx,y:p.y2}, br:{x:p.x2,y:p.y2}
-            };
-        }
-
-        function hitHandle(px, py, boxIdx) {
-            if (boxIdx < 0) return null;
-            const p = n2px(boxes[boxIdx]);
-            const pts = handlePoints(p);
-            for (const k in pts) {
-                if (Math.abs(px-pts[k].x) <= HANDLE+2 && Math.abs(py-pts[k].y) <= HANDLE+2) return k;
-            }
-            return null;
-        }
-
-        function hitBox(px, py) {
-            for (let i = boxes.length-1; i >= 0; i--) {
-                const p = n2px(boxes[i]);
-                if (px >= p.x1 && px <= p.x2 && py >= p.y1 && py <= p.y2) return i;
-            }
-            return -1;
-        }
-
-        function updateBadge() {
-            if (boxes.length > 0) {
-                badge.style.display = 'block';
-                badge.textContent = boxes.length + ' box' + (boxes.length>1?'es':'');
-            } else {
-                badge.style.display = 'none';
-            }
-        }
-
-        function setMode(m) {
-            mode = m;
-            btnDraw.classList.toggle('active', m==='draw');
-            btnSelect.classList.toggle('active', m==='select');
-            canvas.style.cursor = m==='draw' ? 'crosshair' : 'default';
-            if (m==='draw') selectedIdx = -1;
-            redraw();
-        }
-
-        function showStatus(txt) {
-            status.textContent = txt; status.style.display = 'block';
-        }
-        function hideStatus() { status.style.display = 'none'; }
-
-        function onDown(e) {
-            if (!baseImg) return;
-            e.preventDefault();
-            const {x, y} = canvasXY(e);
-
-            if (mode === 'draw') {
-                dragging = true; dragType = 'new';
-                dragStart = {x, y};
-                selectedIdx = -1;
-            } else {
-                if (selectedIdx >= 0) {
-                    const h = hitHandle(x, y, selectedIdx);
-                    if (h) {
-                        dragging = true; dragType = h;
-                        dragStart = {x, y};
-                        dragOrig = {...boxes[selectedIdx]};
-                        showStatus('Resizing box #'+(selectedIdx+1));
+                
+                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);
+                targetPlane.position.copy(CENTER);
+                targetPlane.receiveShadow = true;
+                scene.add(targetPlane);
+                
+                function updateTextureFromUrl(url) {
+                    if (!url) {
+                        planeMaterial.map = createPlaceholderTexture();
+                        planeMaterial.needsUpdate = true;
+                        scene.remove(targetPlane);
+                        targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(1.2, 1.2), planeMaterial);
+                        targetPlane.position.copy(CENTER);
+                        targetPlane.receiveShadow = true;
+                        scene.add(targetPlane);
                         return;
                     }
+                    
+                    const loader = new THREE.TextureLoader();
+                    loader.crossOrigin = 'anonymous';
+                    loader.load(url, (texture) => {
+                        texture.minFilter = THREE.LinearFilter;
+                        texture.magFilter = THREE.LinearFilter;
+                        planeMaterial.map = texture;
+                        planeMaterial.needsUpdate = true;
+                        
+                        const img = texture.image;
+                        if (img && 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);
+                            targetPlane = new THREE.Mesh(
+                                new THREE.PlaneGeometry(planeWidth, planeHeight),
+                                planeMaterial
+                            );
+                            targetPlane.position.copy(CENTER);
+                            targetPlane.receiveShadow = true;
+                            scene.add(targetPlane);
+                        }
+                    }, undefined, (err) => {
+                        console.error('Failed to load texture:', err);
+                    });
                 }
-                const hi = hitBox(x, y);
-                if (hi >= 0) {
-                    selectedIdx = hi;
-                    const h2 = hitHandle(x, y, selectedIdx);
-                    if (h2) {
-                        dragging = true; dragType = h2;
-                        dragStart = {x, y};
-                        dragOrig = {...boxes[selectedIdx]};
-                        showStatus('Resizing box #'+(selectedIdx+1));
-                        redraw(); return;
-                    }
-                    dragging = true; dragType = 'move';
-                    dragStart = {x, y};
-                    dragOrig = {...boxes[selectedIdx]};
-                    showStatus('Moving box #'+(selectedIdx+1));
-                } else {
-                    selectedIdx = -1;
-                    hideStatus();
+                
+                if (props.imageUrl) {
+                    updateTextureFromUrl(props.imageUrl);
                 }
-                redraw();
-            }
-        }
-
-        function onMove(e) {
-            if (!baseImg) return;
-            e.preventDefault();
-            const {x, y} = canvasXY(e);
-
-            if (!dragging) {
-                if (mode === 'select') {
-                    if (selectedIdx >= 0 && hitHandle(x,y,selectedIdx)) {
-                        const h = hitHandle(x,y,selectedIdx);
-                        const curs = {tl:'nwse-resize',tr:'nesw-resize',bl:'nesw-resize',br:'nwse-resize',
-                                      tc:'ns-resize',bc:'ns-resize',ml:'ew-resize',mr:'ew-resize'};
-                        canvas.style.cursor = curs[h] || 'move';
-                    } else if (hitBox(x,y) >= 0) {
-                        canvas.style.cursor = 'move';
+                
+                // --- NEW LIGHT MODEL: SQUARE STUDIO LIGHT WITH RAYS ---
+                const lightGroup = new THREE.Group();
+
+                // 1. Studio Panel Housing (Black, thin, square)
+                const panelGeo = new THREE.BoxGeometry(0.8, 0.8, 0.1);
+                const panelMat = new THREE.MeshStandardMaterial({ 
+                    color: 0x111111,    // Black body
+                    roughness: 0.3,
+                    metalness: 0.8 
+                });
+                const panel = new THREE.Mesh(panelGeo, panelMat);
+                // Shift box slightly back so the front face is at z=0 relative to the group
+                panel.position.z = -0.05; 
+                lightGroup.add(panel);
+                
+                // 2. Emissive Light Face (Bright White)
+                const faceGeo = new THREE.PlaneGeometry(0.75, 0.75);
+                const faceMat = new THREE.MeshBasicMaterial({ 
+                    color: 0xffffff,     // Pure white
+                    side: THREE.DoubleSide
+                });
+                const face = new THREE.Mesh(faceGeo, faceMat);
+                face.position.z = 0.01; // Slightly in front of the black housing
+                lightGroup.add(face);
+                
+                // 3. Volumetric Light Rays (Transparent Cone)
+                // CylinderGeometry(radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded)
+                const beamHeight = 4.0;
+                const beamGeo = new THREE.CylinderGeometry(0.38, 1.2, beamHeight, 32, 1, true);
+                
+                // Rotate cylinder to point along +Z axis
+                beamGeo.rotateX(-Math.PI / 2); 
+                // Translate so the top (start) of the beam sits on the light face
+                beamGeo.translate(0, 0, beamHeight / 2); 
+                
+                const beamMat = new THREE.MeshBasicMaterial({
+                    color: 0xffffff,
+                    transparent: true,
+                    opacity: 0.12,          // Low opacity for subtleness
+                    side: THREE.DoubleSide,
+                    depthWrite: false,      // Important for transparent sorting
+                    blending: THREE.AdditiveBlending // Glow effect
+                });
+                
+                const beam = new THREE.Mesh(beamGeo, beamMat);
+                lightGroup.add(beam);
+
+                // Actual SpotLight Calculation Source
+                const spotLight = new THREE.SpotLight(0xffffff, 10, 10, Math.PI / 3, 1, 1);
+                spotLight.position.set(0, 0, 0); // Position at the center of the custom mesh
+                spotLight.castShadow = true;
+                spotLight.shadow.mapSize.width = 1024;
+                spotLight.shadow.mapSize.height = 1024;
+                spotLight.shadow.camera.near = 0.5;
+                spotLight.shadow.camera.far = 500;
+                spotLight.shadow.bias = -0.005;
+                lightGroup.add(spotLight);
+                
+                const lightTarget = new THREE.Object3D();
+                lightTarget.position.copy(CENTER);
+                scene.add(lightTarget);
+                spotLight.target = lightTarget;
+                
+                scene.add(lightGroup);
+                
+                // --- CONTROLS ---
+                
+                const azimuthRing = new THREE.Mesh(
+                    new THREE.TorusGeometry(AZIMUTH_RADIUS, 0.04, 16, 64),
+                    new THREE.MeshStandardMaterial({ color: 0xffff00, emissive: 0xffff00, emissiveIntensity: 0.3 })
+                );
+                azimuthRing.rotation.x = Math.PI / 2;
+                azimuthRing.position.y = 0.05;
+                scene.add(azimuthRing);
+                
+                const azimuthHandle = new THREE.Mesh(
+                    new THREE.SphereGeometry(0.18, 16, 16),
+                    new THREE.MeshStandardMaterial({ color: 0xffff00, emissive: 0xffff00, emissiveIntensity: 0.5 })
+                );
+                azimuthHandle.userData.type = 'azimuth';
+                scene.add(azimuthHandle);
+                
+                const arcPoints = [];
+                for (let i = 0; i <= 32; i++) {
+                    const angle = THREE.MathUtils.degToRad(-90 + (180 * i / 32));
+                    arcPoints.push(new THREE.Vector3(-0.8, ELEVATION_RADIUS * Math.sin(angle) + CENTER.y, ELEVATION_RADIUS * Math.cos(angle)));
+                }
+                const arcCurve = new THREE.CatmullRomCurve3(arcPoints);
+                const elevationArc = new THREE.Mesh(
+                    new THREE.TubeGeometry(arcCurve, 32, 0.04, 8, false),
+                    new THREE.MeshStandardMaterial({ color: 0x0000ff, emissive: 0x0000ff, emissiveIntensity: 0.3 })
+                );
+                scene.add(elevationArc);
+                
+                const elevationHandle = new THREE.Mesh(
+                    new THREE.SphereGeometry(0.18, 16, 16),
+                    new THREE.MeshStandardMaterial({ color: 0x0000ff, emissive: 0x0000ff, emissiveIntensity: 0.5 })
+                );
+                elevationHandle.userData.type = 'elevation';
+                scene.add(elevationHandle);
+                
+                const refreshBtn = document.createElement('button');
+                refreshBtn.innerHTML = 'Reset View';
+                refreshBtn.style.position = 'absolute';
+                refreshBtn.style.top = '15px';
+                refreshBtn.style.right = '15px';
+                refreshBtn.style.background = '#9333EA';
+                refreshBtn.style.color = '#fff';
+                refreshBtn.style.border = 'none';
+                refreshBtn.style.padding = '8px 16px';
+                refreshBtn.style.borderRadius = '6px';
+                refreshBtn.style.cursor = 'pointer';
+                refreshBtn.style.zIndex = '10';
+                refreshBtn.style.fontSize = '14px';
+                refreshBtn.style.fontWeight = '600';
+                refreshBtn.style.fontFamily = 'system-ui, sans-serif';
+                refreshBtn.style.boxShadow = '0 2px 5px rgba(0,0,0,0.3)';
+                refreshBtn.style.transition = 'background 0.2s';
+                
+                refreshBtn.onmouseover = () => refreshBtn.style.background = '#A855F7';
+                refreshBtn.onmouseout = () => refreshBtn.style.background = '#9333EA';
+                
+                wrapper.appendChild(refreshBtn);
+                
+                refreshBtn.addEventListener('click', () => {
+                    azimuthAngle = 0;
+                    elevationAngle = 0;
+                    updatePositions();
+                    updatePropsAndTrigger();
+                });
+                
+                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);
+                    
+                    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));
+                    
+                    const azSnap = snapToNearest(azimuthAngle, azimuthSteps);
+                    const elSnap = snapToNearest(elevationAngle, elevationSteps);
+                    let prompt = 'Light source from';
+                    if (elSnap !== 0) {
+                        prompt += ' ' + elevationNames[String(elSnap)];
                     } else {
-                        canvas.style.cursor = 'default';
+                        prompt += ' the ' + azimuthNames[azSnap];
                     }
+                    promptOverlay.textContent = prompt;
                 }
-                return;
-            }
-
-            if (dragType === 'new') {
-                redraw({x1:dragStart.x, y1:dragStart.y, x2:x, y2:y});
-                showStatus(Math.abs(x-dragStart.x).toFixed(0)+'\u00d7'+Math.abs(y-dragStart.y).toFixed(0)+' px');
-                return;
-            }
-
-            const dx = (x - dragStart.x) / dispW;
-            const dy = (y - dragStart.y) / dispH;
-            const b  = boxes[selectedIdx];
-            const o  = dragOrig;
-
-            if (dragType === 'move') {
-                const bw = o.x2-o.x1, bh = o.y2-o.y1;
-                let nx1 = o.x1+dx, ny1 = o.y1+dy;
-                nx1 = clamp01(nx1); ny1 = clamp01(ny1);
-                if (nx1+bw > 1) nx1 = 1-bw;
-                if (ny1+bh > 1) ny1 = 1-bh;
-                b.x1=nx1; b.y1=ny1; b.x2=nx1+bw; b.y2=ny1+bh;
-            } else {
-                const t = dragType;
-                if (t.includes('l')) b.x1 = clamp01(o.x1 + dx);
-                if (t.includes('r')) b.x2 = clamp01(o.x2 + dx);
-                if (t.includes('t')) b.y1 = clamp01(o.y1 + dy);
-                if (t.includes('b')) b.y2 = clamp01(o.y2 + dy);
-                if (Math.abs(b.x2-b.x1) < 0.01) { b.x1=o.x1; b.x2=o.x2; }
-                if (Math.abs(b.y2-b.y1) < 0.01) { b.y1=o.y1; b.y2=o.y2; }
-                if (b.x1 > b.x2) { const t2=b.x1; b.x1=b.x2; b.x2=t2; }
-                if (b.y1 > b.y2) { const t2=b.y1; b.y1=b.y2; b.y2=t2; }
-            }
-            redraw();
-        }
-
-        function onUp(e) {
-            if (!dragging) return;
-            if (e) e.preventDefault();
-            dragging = false;
-
-            if (dragType === 'new') {
-                const pt = e ? canvasXY(e) : {x:dragStart.x, y:dragStart.y};
-                if (Math.abs(pt.x-dragStart.x) > 4 && Math.abs(pt.y-dragStart.y) > 4) {
-                    const nb = px2n(dragStart.x, dragStart.y, pt.x, pt.y);
-                    boxes.push(nb);
-                    window.__bboxBoxes = boxes;
-                    selectedIdx = boxes.length - 1;
-                    console.log('[BBox] created box #'+boxes.length, nb);
-                    showStatus('Box #'+boxes.length+' created');
-                } else { hideStatus(); }
-            } else {
-                showStatus('Box #'+(selectedIdx+1)+' updated');
-            }
-            dragType = null; dragOrig = null;
-            syncToGradio();
-            redraw();
-        }
-
-        canvas.addEventListener('mousedown',  onDown);
-        canvas.addEventListener('mousemove',  onMove);
-        canvas.addEventListener('mouseup',    onUp);
-        canvas.addEventListener('mouseleave', (e)=>{if(dragging)onUp(e);});
-        canvas.addEventListener('touchstart', onDown, {passive:false});
-        canvas.addEventListener('touchmove',  onMove, {passive:false});
-        canvas.addEventListener('touchend',   onUp,   {passive:false});
-        canvas.addEventListener('touchcancel',(e)=>{e.preventDefault();dragging=false;redraw();},{passive:false});
-
-        btnDraw.addEventListener('click',   ()=>setMode('draw'));
-        btnSelect.addEventListener('click', ()=>setMode('select'));
-
-        btnDel.addEventListener('click', () => {
-            if (selectedIdx >= 0 && selectedIdx < boxes.length) {
-                const removed = selectedIdx + 1;
-                boxes.splice(selectedIdx, 1);
-                window.__bboxBoxes = boxes;
-                selectedIdx = -1;
-                syncToGradio(); redraw();
-                showStatus('Box #'+removed+' deleted');
-            } else {
-                showStatus('No box selected');
-            }
-        });
-
-        btnUndo.addEventListener('click', () => {
-            if (boxes.length > 0) {
-                boxes.pop();
-                window.__bboxBoxes = boxes;
-                selectedIdx = -1;
-                syncToGradio(); redraw();
-                showStatus('Last box removed');
-            }
-        });
-
-        btnClear.addEventListener('click', () => {
-            boxes.length = 0;
-            window.__bboxBoxes = boxes;
-            selectedIdx = -1;
-            syncToGradio(); redraw(); hideStatus();
-        });
-
-        let lastSrc = null;
-        setInterval(() => {
-            const imgs = document.querySelectorAll('#source-image-component img');
-            let el = null;
-            for (const img of imgs) {
-                if (img.src && img.src.length > 30 &&
-                    (img.src.startsWith('data:') ||
-                     img.src.startsWith('blob:') ||
-                     img.src.includes('/file=') ||
-                     img.src.includes('/upload') ||
-                     img.src.includes('localhost') ||
-                     img.src.includes('127.0.0.1') ||
-                     img.src.startsWith('http'))) {
-                    el = img;
-                    break;
+                
+                function updatePropsAndTrigger() {
+                    const azSnap = snapToNearest(azimuthAngle, azimuthSteps);
+                    const elSnap = snapToNearest(elevationAngle, elevationSteps);
+                    
+                    props.value = { azimuth: azSnap, elevation: elSnap };
+                    trigger('change', props.value);
                 }
-            }
-
-            if (el && el.src && el.src !== lastSrc) {
-                lastSrc = el.src;
-                const img = new window.Image();
-                img.crossOrigin = 'anonymous';
-                img.onload = () => {
-                    baseImg = img;
-                    boxes.length = 0;
-                    window.__bboxBoxes = boxes;
-                    selectedIdx = -1;
-                    fitSize(img.naturalWidth, img.naturalHeight);
-                    syncToGradio(); redraw(); hideStatus();
-                    console.log('[BBox] loaded image', img.naturalWidth, 'x', img.naturalHeight);
-                };
-                img.onerror = () => {
-                    console.warn('[BBox] image load failed for', el.src.substring(0,60));
+                
+                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) => {
+                    const rect = canvas.getBoundingClientRect();
+                    mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
+                    mouse.y = -((e.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.0;
+                        dragTarget.scale.setScalar(1.3);
+                        dragStartMouse.copy(mouse);
+                        canvas.style.cursor = 'grabbing';
+                    }
+                });
+                
+                canvas.addEventListener('mousemove', (e) => {
+                    const rect = canvas.getBoundingClientRect();
+                    mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
+                    mouse.y = -((e.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();
+                    } else {
+                        raycaster.setFromCamera(mouse, camera);
+                        const intersects = raycaster.intersectObjects([azimuthHandle, elevationHandle]);
+                        [azimuthHandle, elevationHandle].forEach(h => {
+                            h.material.emissiveIntensity = 0.5;
+                            h.scale.setScalar(1);
+                        });
+                        if (intersects.length > 0) {
+                            intersects[0].object.material.emissiveIntensity = 0.8;
+                            intersects[0].object.scale.setScalar(1.1);
+                            canvas.style.cursor = 'grab';
+                        } else {
+                            canvas.style.cursor = 'default';
+                        }
+                    }
+                });
+                
+                const onMouseUp = () => {
+                    if (dragTarget) {
+                        dragTarget.material.emissiveIntensity = 0.5;
+                        dragTarget.scale.setScalar(1);
+                        
+                        const targetAz = snapToNearest(azimuthAngle, azimuthSteps);
+                        const targetEl = snapToNearest(elevationAngle, elevationSteps);
+                        
+                        const startAz = azimuthAngle, startEl = elevationAngle;
+                        const startTime = Date.now();
+                        
+                        function animateSnap() {
+                            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);
+                            else updatePropsAndTrigger();
+                        }
+                        animateSnap();
+                    }
+                    isDragging = false;
+                    dragTarget = null;
+                    canvas.style.cursor = 'default';
                 };
-                img.src = el.src;
-            } else if (!el || !el.src) {
-                if (baseImg) {
-                    baseImg = null;
-                    boxes.length = 0;
-                    window.__bboxBoxes = boxes;
-                    selectedIdx = -1;
-                    fitSize(512,400); syncToGradio(); redraw(); hideStatus();
+                
+                canvas.addEventListener('mouseup', onMouseUp);
+                canvas.addEventListener('mouseleave', onMouseUp);
+                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.0;
+                        dragTarget.scale.setScalar(1.3);
+                        dragStartMouse.copy(mouse);
+                    }
+                }, { passive: false });
+                
+                canvas.addEventListener('touchmove', (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) => {
+                    e.preventDefault();
+                    onMouseUp();
+                }, { passive: false });
+                
+                canvas.addEventListener('touchcancel', (e) => {
+                    e.preventDefault();
+                    onMouseUp();
+                }, { passive: false });
+                
+                updatePositions();
+                
+                function render() {
+                    requestAnimationFrame(render);
+                    renderer.render(scene, camera);
                 }
-                lastSrc = null;
-            }
-        }, 300);
+                render();
+                
+                new ResizeObserver(() => {
+                    camera.aspect = wrapper.clientWidth / wrapper.clientHeight;
+                    camera.updateProjectionMatrix();
+                    renderer.setSize(wrapper.clientWidth, wrapper.clientHeight);
+                }).observe(wrapper);
+                
+                wrapper._updateFromProps = (newVal) => {
+                    if (newVal && typeof newVal === 'object') {
+                        azimuthAngle = newVal.azimuth ?? azimuthAngle;
+                        elevationAngle = newVal.elevation ?? elevationAngle;
+                        updatePositions();
+                    }
+                };
+                
+                wrapper._updateTexture = updateTextureFromUrl;
+                
+                let lastImageUrl = props.imageUrl;
+                let lastValue = JSON.stringify(props.value);
+                setInterval(() => {
+                    if (props.imageUrl !== lastImageUrl) {
+                        lastImageUrl = 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();
+                        }
+                    }
+                }, 100);
+            };
+            
+            initScene();
+        })();
+        """
+        
+        super().__init__(
+            value=value,
+            html_template=html_template,
+            js_on_load=js_on_load,
+            imageUrl=imageUrl,
+            **kwargs
+        )
 
-        setInterval(() => { syncToGradio(); }, 500);
+css = """
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
 
-        new ResizeObserver(() => {
-            if (baseImg) { fitSize(baseImg.naturalWidth, baseImg.naturalHeight); redraw(); }
-        }).observe(wrap);
+/* Background grid pattern - Purple theme */
+body, .gradio-container {
+    background-color: #FAF5FF !important;
+    background-image: 
+        linear-gradient(#E9D5FF 1px, transparent 1px), 
+        linear-gradient(90deg, #E9D5FF 1px, transparent 1px) !important;
+    background-size: 40px 40px !important;
+    font-family: 'Outfit', sans-serif !important;
+}
 
-        setMode('draw');
-        fitSize(512,400); redraw();
-        syncToGradio();
-    }
+/* Dark mode grid */
+.dark body, .dark .gradio-container {
+    background-color: #1a1a1a !important;
+    background-image: 
+        linear-gradient(rgba(168, 85, 247, 0.1) 1px, transparent 1px), 
+        linear-gradient(90deg, rgba(168, 85, 247, 0.1) 1px, transparent 1px) !important;
+    background-size: 40px 40px !important;
+}
 
-    initCanvasBbox();
+#col-container {
+    margin: 0 auto;
+    max-width: 1200px;
 }
-"""
 
+/* Main title styling */
+#main-title {
+    text-align: center !important;
+    padding: 1rem 0 0.5rem 0;
+}
 
-with gr.Blocks(css=css, theme=purple_theme) as demo:
-    gr.Markdown("# **QIE-Object-Remover-Bbox**", elem_id="main-title")
-    gr.Markdown(
-        "Perform diverse image edits using a specialized [LoRA](https://huggingface.co/prithivMLmods/QIE-2511-Object-Remover-v2). "
-        "Upload an image, draw red bounding boxes over the objects you want to remove, and click Remove Object. "
-        "Multiple boxes supported. Select, move, resize or delete individual boxes.",
-        elem_id="subtitle",
-    )
+#main-title h1 {
+    font-size: 2.4em !important;
+    font-weight: 700 !important;
+    background: linear-gradient(135deg, #A855F7 0%, #C084FC 50%, #9333EA 100%);
+    background-size: 200% 200%;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    animation: gradient-shift 4s ease infinite;
+    letter-spacing: -0.02em;
+}
 
-    with gr.Row():
-        with gr.Column(scale=1):
-            source_image = gr.Image(
-                label="Upload Image",
-                type="pil",
-                height=350,
-                elem_id="source-image-component",
-            )
+@keyframes gradient-shift {
+    0%, 100% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+}
 
-            gr.Markdown("# **Bbox Edit Controller**")
-            gr.HTML(
-                '<div class="bbox-hint">'
-                "<b>Draw mode:</b> Click & drag to create red rectangles. "
-                "<b>Select mode:</b> Click a box to select it \u2192 drag to <b>move</b>, "
-                "drag handles to <b>resize</b>. Use <b>Delete Selected</b> to remove one box."
-                "</div>"
-            )
+/* Subtitle styling */
+#subtitle {
+    text-align: center !important;
+    margin-bottom: 1.5rem;
+}
 
-            gr.HTML(
-                """
-                <div id="bbox-draw-wrap">
-                    <canvas id="bbox-draw-canvas" width="512" height="400"></canvas>
-                    <div id="bbox-status"></div>
-                    <div id="bbox-count"></div>
-                </div>
-                """
-            )
+#subtitle p {
+    margin: 0 auto;
+    color: #666666;
+    font-size: 1rem;
+    text-align: center !important;
+}
 
-            gr.HTML(
-                """
-                <div class="bbox-toolbar-section">
-                    <span class="toolbar-label">🛠 Tools:</span>
-                    <button id="tb-draw"   class="bbox-tb-draw active"  title="Draw new boxes">✏️ Draw</button>
-                    <button id="tb-select" class="bbox-tb-select"       title="Select / move / resize">🔲 Select</button>
-                    <div class="toolbar-divider"></div>
-                    <span class="toolbar-label">Actions:</span>
-                    <button id="tb-del"    class="bbox-tb-del"          title="Delete selected box">✕ Delete Selected</button>
-                    <button id="tb-undo"   class="bbox-tb-undo"         title="Remove last box">↩ Undo</button>
-                    <button id="tb-clear"  class="bbox-tb-clear"        title="Remove all boxes">🗑 Clear All</button>
-                </div>
-                """
-            )
+#subtitle a {
+    color: #A855F7 !important;
+    text-decoration: none;
+    font-weight: 500;
+}
 
-            gr.HTML('<div id="bbox-debug-count">\u2B1C No boxes drawn yet</div>')
+#subtitle a:hover {
+    text-decoration: underline;
+}
 
-            boxes_json = gr.Textbox(
-                value="[]",
-                visible=True,
-                interactive=True,
-                elem_id="boxes-json-input",
-                label="boxes-json",
-            )
+/* Center all markdown text */
+.gradio-container > .main > .wrap > .contain > .gap > div:nth-child(2) {
+    text-align: center !important;
+}
 
-            prompt = gr.Textbox(
-                label="Prompt",
-                value=DEFAULT_PROMPT,
-                lines=2,
-                info="Edit the prompt if needed",
-            )
+/* Card styling */
+.gradio-group {
+    background: rgba(255, 255, 255, 0.9) !important;
+    border: 2px solid #E9D5FF !important;
+    border-radius: 12px !important;
+    box-shadow: 0 4px 24px rgba(168, 85, 247, 0.08) !important;
+    backdrop-filter: blur(10px);
+    transition: all 0.3s ease;
+}
+
+.gradio-group:hover {
+    box-shadow: 0 8px 32px rgba(168, 85, 247, 0.12) !important;
+    border-color: #C084FC !important;
+}
+
+.dark .gradio-group {
+    background: rgba(30, 30, 30, 0.9) !important;
+    border-color: rgba(168, 85, 247, 0.3) !important;
+}
+
+/* Image upload area */
+.gradio-image {
+    border-radius: 10px !important;
+    overflow: hidden;
+    border: 2px dashed #C084FC !important;
+    transition: all 0.3s ease;
+}
+
+.gradio-image:hover {
+    border-color: #A855F7 !important;
+    background: rgba(168, 85, 247, 0.02) !important;
+}
+
+/* Radio buttons */
+.gradio-radio {
+    border-radius: 8px !important;
+}
+
+.gradio-radio label {
+    border-radius: 6px !important;
+    transition: all 0.2s ease !important;
+    border: 1px solid transparent !important;
+}
+
+.gradio-radio label:hover {
+    background: rgba(168, 85, 247, 0.05) !important;
+}
+
+.gradio-radio label.selected {
+    background: rgba(168, 85, 247, 0.1) !important;
+    border-color: #A855F7 !important;
+}
+
+/* Primary button */
+.primary {
+    border-radius: 8px !important;
+    font-weight: 600 !important;
+    letter-spacing: 0.02em !important;
+    transition: all 0.3s ease !important;
+}
+
+.primary:hover {
+    transform: translateY(-2px) !important;
+}
+
+/* Tabs styling */
+.tab-nav {
+    border-bottom: 2px solid #E9D5FF !important;
+}
 
-            run_btn = gr.Button("\U0001F5D1\uFE0F Remove Object", variant="primary", size="lg")
+.tab-nav button {
+    font-weight: 500 !important;
+    padding: 10px 18px !important;
+    border-radius: 8px 8px 0 0 !important;
+    transition: all 0.2s ease !important;
+}
+
+.tab-nav button.selected {
+    background: rgba(168, 85, 247, 0.1) !important;
+    border-bottom: 2px solid #A855F7 !important;
+}
+
+/* Output textbox */
+.gradio-textbox textarea {
+    font-family: 'IBM Plex Mono', monospace !important;
+    font-size: 0.95rem !important;
+    line-height: 1.7 !important;
+    background: rgba(255, 255, 255, 0.95) !important;
+    border: 1px solid #E9D5FF !important;
+    border-radius: 8px !important;
+}
+
+.dark .gradio-textbox textarea {
+    background: rgba(30, 30, 30, 0.95) !important;
+    border-color: rgba(168, 85, 247, 0.2) !important;
+}
+
+/* Markdown output */
+.gradio-markdown {
+    font-family: 'Outfit', sans-serif !important;
+    line-height: 1.7 !important;
+}
+
+.gradio-markdown code {
+    font-family: 'IBM Plex Mono', monospace !important;
+    background: rgba(168, 85, 247, 0.08) !important;
+    padding: 2px 6px !important;
+    border-radius: 4px !important;
+    color: #7E22CE !important;
+}
+
+.gradio-markdown pre {
+    background: rgba(168, 85, 247, 0.05) !important;
+    border: 1px solid #E9D5FF !important;
+    border-radius: 8px !important;
+    padding: 1rem !important;
+}
+
+/* Examples section */
+.gradio-examples {
+    border-radius: 10px !important;
+}
+
+.gradio-examples .gallery-item {
+    border: 2px solid #E9D5FF !important;
+    border-radius: 8px !important;
+    transition: all 0.2s ease !important;
+}
+
+.gradio-examples .gallery-item:hover {
+    border-color: #A855F7 !important;
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.15) !important;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(168, 85, 247, 0.05);
+    border-radius: 4px;
+}
 
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, #A855F7, #C084FC);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(135deg, #9333EA, #A855F7);
+}
+
+/* Accordion styling */
+.gradio-accordion {
+    border-radius: 10px !important;
+    border: 1px solid #E9D5FF !important;
+}
+
+.gradio-accordion > .label-wrap {
+    background: rgba(168, 85, 247, 0.03) !important;
+    border-radius: 10px !important;
+}
+
+/* Hide footer */
+footer {
+    display: none !important;
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.gradio-row {
+    animation: fadeIn 0.4s ease-out;
+}
+
+/* Label styling */
+label {
+    font-weight: 600 !important;
+    color: #333 !important;
+}
+
+.dark label {
+    color: #eee !important;
+}
+
+/* Dropdown styling */
+.gradio-dropdown {
+    border-radius: 8px !important;
+}
+
+.gradio-dropdown select, .gradio-dropdown input {
+    border: 1px solid #E9D5FF !important;
+    border-radius: 8px !important;
+    transition: all 0.2s ease !important;
+}
+
+.gradio-dropdown select:focus, .gradio-dropdown input:focus {
+    border-color: #A855F7 !important;
+    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.1) !important;
+}
+
+/* Slider styling */
+.gradio-slider input[type="range"] {
+    accent-color: #A855F7 !important;
+}
+
+.gradio-slider .range-slider {
+    background: #E9D5FF !important;
+}
+
+.gradio-slider .range-slider .handle {
+    background: #A855F7 !important;
+    border-color: #A855F7 !important;
+}
+
+/* 3D Control styling */
+#lighting-3d-control {
+    min-height: 450px;
+    border: 2px solid #E9D5FF !important;
+    border-radius: 12px !important;
+    overflow: hidden;
+}
+
+/* Progress bar */
+.dark .progress-text {
+    color: white !important;
+}
+
+.progress-bar {
+    background: linear-gradient(90deg, #A855F7, #C084FC) !important;
+}
+
+/* Checkbox styling */
+.gradio-checkbox input[type="checkbox"]:checked {
+    background-color: #A855F7 !important;
+    border-color: #A855F7 !important;
+}
+
+/* Number input styling */
+.gradio-number input {
+    border: 1px solid #E9D5FF !important;
+    border-radius: 8px !important;
+}
+
+.gradio-number input:focus {
+    border-color: #A855F7 !important;
+    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.1) !important;
+}
+
+/* Gallery styling */
+.gradio-gallery {
+    border-radius: 10px !important;
+}
+
+.gradio-gallery .gallery-item {
+    border: 2px solid #E9D5FF !important;
+    border-radius: 8px !important;
+    transition: all 0.2s ease !important;
+}
+
+.gradio-gallery .gallery-item:hover {
+    border-color: #A855F7 !important;
+    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.15) !important;
+}
+
+/* Fillable container */
+.fillable {
+    max-width: 1200px !important;
+}
+"""
+
+with gr.Blocks() as demo:
+    gr.Markdown("# **Qwen-Image-Edit-3D-Lighting-Control**", elem_id="main-title")
+    gr.Markdown("Control lighting directions using the 3D viewport or sliders. Using the [Multi-Angle-Lighting](https://huggingface.co/dx8152/Qwen-Edit-2509-Multi-Angle-Lighting) LoRA for precise lighting control.", elem_id="subtitle")
+    
+    with gr.Row():
         with gr.Column(scale=1):
-            result = gr.Image(label="Output Image", height=449)
-            preview = gr.Image(label="Input Sent to Model (with red boxes)", height=393)
+            image = gr.Image(label="Input Image", type="pil", height=320)
+            
+            gr.Markdown("### 3D Lighting Control")
 
+            lighting_3d = LightingControl3D(
+                value={"azimuth": 0, "elevation": 0},
+                elem_id="lighting-3d-control"
+            )
+            run_btn = gr.Button("Generate Image", variant="primary", size="lg")
+            
+            gr.Markdown("### Slider Controls")
+            
+            azimuth_slider = gr.Slider(
+                label="Azimuth (Horizontal Rotation)",
+                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,
+                info="-90°=from below, 0°=horizontal, 90°=from above"
+            )
+        
+        with gr.Column(scale=1):
+            result = gr.Image(label="Output Image", height=555)
+            
             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)
+                
                 with gr.Row():
                     guidance_scale = gr.Slider(label="Guidance Scale", minimum=1.0, maximum=10.0, step=0.1, value=1.0)
                     num_inference_steps = gr.Slider(label="Inference Steps", minimum=1, maximum=20, step=1, value=4)
+
                 with gr.Row():
-                    height_slider = gr.Slider(label="Height", minimum=256, maximum=2048, step=8, value=1024)
-                    width_slider = gr.Slider(label="Width", minimum=256, maximum=2048, step=8, value=1024)
+                    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)
 
-            with gr.Accordion("About", open=False):
+
+            with gr.Row():
+                prompt_preview = gr.Textbox(
+                    label="Generated Prompt",
+                    value="Light source from the Front",
+                    interactive=True,
+                    lines=1,
+                )
+            with gr.Accordion("About the Space", open=False):
                 gr.Markdown(
-                    "*QIE-Object-Remover-Bbox* by "
-                    "[prithivMLmods](https://huggingface.co/prithivMLmods). "
-                    "Adapter: [QIE-2511-Object-Remover-v2]"
-                    "(https://huggingface.co/prithivMLmods/QIE-2511-Object-Remover-v2). "
-                    "More adapters \u2192 [Qwen-Image-Edit-LoRAs]"
-                    "(https://huggingface.co/models?other=base_model:adapter:Qwen/Qwen-Image-Edit-2509)."
+                    "This app, *Qwen-Image-Edit-3D-Lighting-Control*, is designed by [prithivMLmods](https://huggingface.co/prithivMLmods) to accelerate fast inference with 4-step image edits and is inspired by [qwen-image-multiple-angles-3d-camera](https://huggingface.co/spaces/multimodalart/qwen-image-multiple-angles-3d-camera). For more adapters, visit: [Qwen-Image-Edit-LoRAs](https://huggingface.co/models?other=base_model:adapter:Qwen/Qwen-Image-Edit-2509)."
                 )
-
-    demo.load(fn=None, js=bbox_drawer_js)
-
+            
+    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)
+            prompt = build_lighting_prompt(az, el)
+            return az, el, prompt
+        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)
+
+        import base64
+        from io import BytesIO
+        buffered = BytesIO()
+        image.save(buffered, format="PNG")
+        img_str = base64.b64encode(buffered.getvalue()).decode()
+        data_url = f"data:image/png;base64,{img_str}"
+        return gr.update(imageUrl=data_url)
+    
+    for slider in [azimuth_slider, elevation_slider]:
+        slider.change(
+            fn=update_prompt_from_sliders,
+            inputs=[azimuth_slider, elevation_slider],
+            outputs=[prompt_preview]
+        )
+    
+    lighting_3d.change(
+        fn=sync_3d_to_sliders,
+        inputs=[lighting_3d],
+        outputs=[azimuth_slider, elevation_slider, prompt_preview]
+    )
+    
+    for slider in [azimuth_slider, elevation_slider]:
+        slider.release(
+            fn=sync_sliders_to_3d,
+            inputs=[azimuth_slider, elevation_slider],
+            outputs=[lighting_3d]
+        )
+    
     run_btn.click(
-        fn=infer_object_removal,
-        inputs=[source_image, boxes_json, prompt, seed, randomize_seed,
-                guidance_scale, num_inference_steps, height_slider, width_slider],
-        outputs=[result, seed, preview],
-        js="""(src, bj, p, s, rs, gs, nis, h, w) => {
-            const boxes = window.__bboxBoxes || [];
-            const json  = JSON.stringify(boxes);
-            console.log('[BBox] submitting', boxes.length, 'boxes:', json);
-            return [src, json, p, s, rs, gs, nis, h, w];
-        }""",
+        fn=infer_lighting_edit,
+        inputs=[image, azimuth_slider, elevation_slider, seed, randomize_seed, guidance_scale, num_inference_steps, height, width],
+        outputs=[result, seed, prompt_preview]
     )
-
-    source_image.upload(
+    
+    image.upload(
         fn=update_dimensions_on_upload,
-        inputs=[source_image],
-        outputs=[width_slider, height_slider],
+        inputs=[image],
+        outputs=[width, height]
+    ).then(
+        fn=update_3d_image,
+        inputs=[image],
+        outputs=[lighting_3d]
     )
-
-
+    
+    image.clear(
+        fn=lambda: gr.update(imageUrl=None),
+        outputs=[lighting_3d]
+    )
+    
 if __name__ == "__main__":
-    demo.launch(
-        css=css, theme=purple_theme,
-        mcp_server=True, ssr_mode=False, show_error=True
-    )
+    head = '<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>'
+    demo.launch(head=head, css=css, theme=purple_theme, mcp_server=True, ssr_mode=False, show_error=True)