feat: viewer 3D Plotly natif — fini Three.js dans Gradio, plus d'écran noir

app.py

@@ -1,25 +1,28 @@
 import random
 import base64
 import io
+import math
+import urllib.request
+
 import fal_client
 import gradio as gr
+import numpy as np
+import plotly.graph_objects as go
 from PIL import Image
 
-# ── Constantes poses ──────────────────────────────────────────────────────────
+# ── Constantes poses (LoRA fal Multiple-Angles) ───────────────────────────────
 
 AZIMUTHS   = [0, 45, 90, 135, 180, 225, 270, 315]
 ELEVATIONS = [-30, 0, 30, 60]
 DISTANCES  = [0.6, 1.0, 1.8]
 
 AZIMUTH_NAMES = {
-    0:"front view", 45:"front-right quarter view", 90:"right side view",
-    135:"back-right quarter view", 180:"back view", 225:"back-left quarter view",
-    270:"left side view", 315:"front-left quarter view"
-}
-ELEVATION_NAMES = {
-    -30:"low-angle shot", 0:"eye-level shot", 30:"elevated shot", 60:"high-angle shot"
+    0: "front view", 45: "front-right quarter view", 90: "right side view",
+    135: "back-right quarter view", 180: "back view", 225: "back-left quarter view",
+    270: "left side view", 315: "front-left quarter view",
 }
-DISTANCE_NAMES = {0.6:"close-up", 1.0:"medium shot", 1.8:"wide shot"}
+ELEVATION_NAMES = {-30: "low-angle shot", 0: "eye-level shot", 30: "elevated shot", 60: "high-angle shot"}
+DISTANCE_NAMES = {0.6: "close-up", 1.0: "medium shot", 1.8: "wide shot"}
 
 
 def snap(value, options):
@@ -33,6 +36,10 @@ def build_prompt(azimuth, elevation, distance):
     return f"<sks> {AZIMUTH_NAMES[az]}, {ELEVATION_NAMES[el]}, {DISTANCE_NAMES[di]}"
 
 
+def update_prompt(az, el, di):
+    return build_prompt(az, el, di)
+
+
 def image_to_uri(img):
     if img is None:
         return ""
@@ -42,8 +49,197 @@ def image_to_uri(img):
     return f"data:image/png;base64,{b64}"
 
 
-def update_prompt(az, el, di):
-    return build_prompt(az, el, di)
+# ── Viewer 3D Plotly ──────────────────────────────────────────────────────────
+
+CENTER = np.array([0.0, 0.75, 0.0])     # centre du sujet
+BASE_DISTANCE = 1.6                      # rayon de base de la caméra
+AZIMUTH_RADIUS = 2.4                     # rayon anneau vert
+ELEVATION_RADIUS = 1.8                   # rayon arc rose
+
+PLANE_W, PLANE_H = 1.5, 1.5              # taille du panneau-sujet
+
+
+def _camera_position(azimuth, elevation, distance):
+    """Coords caméra en convention LoRA fal :
+       azimut 0°=front (+Z), 90°=right (+X), 180°=back (-Z), 270°=left (-X)."""
+    d = BASE_DISTANCE * distance
+    az = math.radians(azimuth)
+    el = math.radians(elevation)
+    x = d * math.sin(az) * math.cos(el)
+    y = d * math.sin(el) + CENTER[1]
+    z = d * math.cos(az) * math.cos(el)
+    return np.array([x, y, z])
+
+
+def build_viewer_figure(azimuth, elevation, distance):
+    cam = _camera_position(azimuth, elevation, distance)
+
+    fig = go.Figure()
+
+    # ── Plan sujet (rectangle face à +Z) ─────────────────────────────────────
+    px = [-PLANE_W / 2, PLANE_W / 2, PLANE_W / 2, -PLANE_W / 2]
+    py = [CENTER[1] - PLANE_H / 2, CENTER[1] - PLANE_H / 2,
+          CENTER[1] + PLANE_H / 2, CENTER[1] + PLANE_H / 2]
+    pz = [0, 0, 0, 0]
+    fig.add_trace(go.Mesh3d(
+        x=px, y=py, z=pz,
+        i=[0, 0], j=[1, 2], k=[2, 3],
+        color="#3a4a8a", opacity=0.85,
+        flatshading=True, hoverinfo="skip", name="Sujet",
+    ))
+    # bordure du plan
+    bx = px + [px[0]]
+    by = py + [py[0]]
+    bz = pz + [pz[0]]
+    fig.add_trace(go.Scatter3d(
+        x=bx, y=by, z=bz, mode="lines",
+        line=dict(color="#8aa8ff", width=4),
+        hoverinfo="skip", showlegend=False,
+    ))
+
+    # ── Anneau azimut (vert) au sol ──────────────────────────────────────────
+    th = np.linspace(0, 2 * np.pi, 80)
+    fig.add_trace(go.Scatter3d(
+        x=AZIMUTH_RADIUS * np.sin(th),
+        y=np.zeros_like(th),
+        z=AZIMUTH_RADIUS * np.cos(th),
+        mode="lines",
+        line=dict(color="#00ff88", width=8),
+        name="Azimut", hoverinfo="skip",
+    ))
+    # marqueurs cardinaux (Front / Right / Back / Left)
+    fig.add_trace(go.Scatter3d(
+        x=[0, AZIMUTH_RADIUS, 0, -AZIMUTH_RADIUS],
+        y=[0, 0, 0, 0],
+        z=[AZIMUTH_RADIUS, 0, -AZIMUTH_RADIUS, 0],
+        mode="text",
+        text=["FRONT 0°", "RIGHT 90°", "BACK 180°", "LEFT 270°"],
+        textfont=dict(color="#00ff88", size=11),
+        hoverinfo="skip", showlegend=False,
+    ))
+    # handle azimut courant
+    az_r = math.radians(azimuth)
+    fig.add_trace(go.Scatter3d(
+        x=[AZIMUTH_RADIUS * math.sin(az_r)],
+        y=[0],
+        z=[AZIMUTH_RADIUS * math.cos(az_r)],
+        mode="markers",
+        marker=dict(size=12, color="#00ff88", symbol="circle",
+                    line=dict(color="white", width=2)),
+        name="Azimut courant", hoverinfo="skip", showlegend=False,
+    ))
+
+    # ── Arc élévation (rose) côté gauche ─────────────────────────────────────
+    el_range = np.linspace(math.radians(-30), math.radians(60), 40)
+    fig.add_trace(go.Scatter3d(
+        x=np.full_like(el_range, -0.8),
+        y=ELEVATION_RADIUS * np.sin(el_range) + CENTER[1],
+        z=ELEVATION_RADIUS * np.cos(el_range),
+        mode="lines",
+        line=dict(color="#ff69b4", width=8),
+        name="Élévation", hoverinfo="skip",
+    ))
+    el_r = math.radians(elevation)
+    fig.add_trace(go.Scatter3d(
+        x=[-0.8],
+        y=[ELEVATION_RADIUS * math.sin(el_r) + CENTER[1]],
+        z=[ELEVATION_RADIUS * math.cos(el_r)],
+        mode="markers",
+        marker=dict(size=12, color="#ff69b4", symbol="circle",
+                    line=dict(color="white", width=2)),
+        name="Élévation courante", hoverinfo="skip", showlegend=False,
+    ))
+
+    # ── Ligne caméra → sujet (orange = distance) ─────────────────────────────
+    fig.add_trace(go.Scatter3d(
+        x=[cam[0], CENTER[0]],
+        y=[cam[1], CENTER[1]],
+        z=[cam[2], CENTER[2]],
+        mode="lines",
+        line=dict(color="#ffa500", width=5, dash="dot"),
+        name="Distance", hoverinfo="skip",
+    ))
+
+    # ── Caméra (gros marqueur bleu) ──────────────────────────────────────────
+    fig.add_trace(go.Scatter3d(
+        x=[cam[0]], y=[cam[1]], z=[cam[2]],
+        mode="markers+text",
+        marker=dict(size=18, color="#6699ff", symbol="diamond",
+                    line=dict(color="#ffcc44", width=3)),
+        text=["📷"],
+        textposition="top center",
+        textfont=dict(size=18),
+        name="Caméra", hoverinfo="skip", showlegend=False,
+    ))
+
+    # ── Cône de vue (frustum simplifié) ──────────────────────────────────────
+    # 4 rayons depuis la caméra vers les coins du panneau
+    corners = np.array([
+        [-PLANE_W / 2, CENTER[1] - PLANE_H / 2, 0],
+        [ PLANE_W / 2, CENTER[1] - PLANE_H / 2, 0],
+        [ PLANE_W / 2, CENTER[1] + PLANE_H / 2, 0],
+        [-PLANE_W / 2, CENTER[1] + PLANE_H / 2, 0],
+    ])
+    fx, fy, fz = [], [], []
+    for c in corners:
+        fx += [cam[0], c[0], None]
+        fy += [cam[1], c[1], None]
+        fz += [cam[2], c[2], None]
+    fig.add_trace(go.Scatter3d(
+        x=fx, y=fy, z=fz, mode="lines",
+        line=dict(color="#ffcc44", width=2),
+        opacity=0.45, hoverinfo="skip", showlegend=False, name="FOV",
+    ))
+
+    # ── Sol (grid plan) ──────────────────────────────────────────────────────
+    grid_n = 9
+    g = np.linspace(-3, 3, grid_n)
+    gx, gz = [], []
+    for v in g:
+        gx += [-3, 3, None, v, v, None]
+        gz += [v, v, None, -3, 3, None]
+    fig.add_trace(go.Scatter3d(
+        x=gx, y=[0] * len(gx), z=gz, mode="lines",
+        line=dict(color="#333333", width=1),
+        hoverinfo="skip", showlegend=False,
+    ))
+
+    # ── Layout : vue isométrique fixe, fond sombre ────────────────────────────
+    prompt = build_prompt(azimuth, elevation, distance)
+    fig.update_layout(
+        paper_bgcolor="#1a1a1a",
+        plot_bgcolor="#1a1a1a",
+        margin=dict(l=0, r=0, t=10, b=40),
+        showlegend=False,
+        scene=dict(
+            xaxis=dict(visible=False, range=[-3.2, 3.2]),
+            yaxis=dict(visible=False, range=[-0.2, 3]),
+            zaxis=dict(visible=False, range=[-3.2, 3.2]),
+            bgcolor="#1a1a1a",
+            aspectmode="manual",
+            aspectratio=dict(x=1, y=0.7, z=1),
+            camera=dict(
+                eye=dict(x=1.7, y=1.2, z=1.7),
+                center=dict(x=0, y=0.2, z=0),
+                up=dict(x=0, y=1, z=0),
+            ),
+        ),
+        annotations=[dict(
+            text=f"<b>{prompt}</b>",
+            showarrow=False,
+            xref="paper", yref="paper",
+            x=0.5, y=0.0,
+            font=dict(family="monospace", size=13, color="#00ff88"),
+            bgcolor="rgba(0,0,0,0.85)",
+            borderpad=6,
+        )],
+    )
+    return fig
+
+
+def update_viewer(az, el, di):
+    return build_viewer_figure(az, el, di)
+
 
 # ── Inférence fal.ai ──────────────────────────────────────────────────────────
 
@@ -53,7 +249,6 @@ def infer(image, azimuth, elevation, distance, seed, randomize_seed):
     if randomize_seed:
         seed = random.randint(0, 2**31 - 1)
     prompt = build_prompt(azimuth, elevation, distance)
-    import urllib.request
     result = fal_client.run(
         "fal-ai/qwen-image-edit",
         arguments={
@@ -70,250 +265,10 @@ def infer(image, azimuth, elevation, distance, seed, randomize_seed):
         out_img = Image.open(io.BytesIO(resp.read())).convert("RGB")
     return out_img, seed, prompt
 
-# ── JS global injecté via gr.Blocks(js=...) — s'exécute dans le vrai contexte page ──
-
-BLOCKS_JS = r"""
-() => {
-  const scr = document.createElement('script');
-  scr.src = 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js';
-  scr.onload = waitForWrapper;
-  document.head.appendChild(scr);
-
-  function waitForWrapper() {
-    const wrapper = document.getElementById('cv3d-wrapper');
-    if (!wrapper) { setTimeout(waitForWrapper, 150); return; }
-    initScene(wrapper);
-  }
-
-  function initScene(wrapper) {
-    const promptEl = document.getElementById('cv3d-prompt');
-
-    const renderer = new THREE.WebGLRenderer({ antialias: true });
-    renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
-    renderer.setSize(wrapper.clientWidth, wrapper.clientHeight || 450);
-    wrapper.insertBefore(renderer.domElement, promptEl);
-
-    const scene = new THREE.Scene();
-    scene.background = new THREE.Color(0x1a1a1a);
-    scene.add(new THREE.AmbientLight(0xffffff, 0.6));
-    const dl = new THREE.DirectionalLight(0xffffff, 0.6);
-    dl.position.set(5, 10, 5);
-    scene.add(dl);
-
-    /* Vue du viewer = caméra fixe inclinée 3/4 façon multimodalart */
-    const vcam = new THREE.PerspectiveCamera(50, wrapper.clientWidth / (wrapper.clientHeight || 450), 0.1, 1000);
-    vcam.position.set(4.5, 3, 4.5);
-    vcam.lookAt(0, 0.75, 0);
-
-    new ResizeObserver(() => {
-      renderer.setSize(wrapper.clientWidth, wrapper.clientHeight);
-      vcam.aspect = wrapper.clientWidth / wrapper.clientHeight;
-      vcam.updateProjectionMatrix();
-    }).observe(wrapper);
-
-    /* grille au sol */
-    scene.add(new THREE.GridHelper(8, 16, 0x333333, 0x222222));
-
-    /* Constantes spatiales — alignées sur la ref */
-    const CENTER = new THREE.Vector3(0, 0.75, 0);
-    const BASE_DISTANCE = 1.6;
-    const AZIMUTH_RADIUS = 2.4;
-    const ELEVATION_RADIUS = 1.8;
-
-    /* Plan sujet (image utilisateur) */
-    function makePlaceholderTex() {
-      const c = document.createElement('canvas'); c.width = c.height = 256;
-      const ctx = c.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(c);
-    }
-    const planeMat = new THREE.MeshBasicMaterial({ map: makePlaceholderTex(), side: THREE.DoubleSide });
-    let targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(1.2, 1.2), planeMat);
-    targetPlane.position.copy(CENTER);
-    scene.add(targetPlane);
-
-    function setPlaneFromUri(uri) {
-      const loader = new THREE.TextureLoader();
-      loader.crossOrigin = 'anonymous';
-      loader.load(uri, (tex) => {
-        tex.minFilter = THREE.LinearFilter; tex.magFilter = THREE.LinearFilter;
-        planeMat.map = tex; planeMat.needsUpdate = true;
-        const img = tex.image;
-        if (img && img.width && img.height) {
-          const a = img.width / img.height, M = 1.5;
-          const w = a > 1 ? M : M * a, h = a > 1 ? M / a : M;
-          scene.remove(targetPlane);
-          targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(w, h), planeMat);
-          targetPlane.position.copy(CENTER);
-          scene.add(targetPlane);
-        }
-      });
-    }
-
-    /* Caméra physique : body bleu + lens cylindrique pointant vers l'avant (+Z local) */
-    const cameraGroup = new THREE.Group();
-    const camMat = new THREE.MeshStandardMaterial({ color: 0x6699cc, metalness: 0.5, roughness: 0.3 });
-    const body = new THREE.Mesh(new THREE.BoxGeometry(0.3, 0.22, 0.38), camMat);
-    cameraGroup.add(body);
-    const lens = new THREE.Mesh(
-      new THREE.CylinderGeometry(0.09, 0.11, 0.18, 16),
-      new THREE.MeshStandardMaterial({ color: 0x6699cc, metalness: 0.5, roughness: 0.3 })
-    );
-    lens.rotation.x = Math.PI / 2;
-    lens.position.z = 0.26;
-    cameraGroup.add(lens);
-    /* lentille jaune lumineuse (pour faire le "œil" de la caméra) */
-    const lensFront = new THREE.Mesh(
-      new THREE.SphereGeometry(0.08, 16, 16),
-      new THREE.MeshStandardMaterial({ color: 0xffcc44, emissive: 0xffaa00, emissiveIntensity: 0.6 })
-    );
-    lensFront.position.z = 0.36;
-    cameraGroup.add(lensFront);
-    scene.add(cameraGroup);
-
-    /* Anneau VERT : azimut */
-    const azimuthRing = new THREE.Mesh(
-      new THREE.TorusGeometry(AZIMUTH_RADIUS, 0.04, 16, 64),
-      new THREE.MeshStandardMaterial({ color: 0x00ff88, emissive: 0x00ff88, emissiveIntensity: 0.3 })
-    );
-    azimuthRing.rotation.x = Math.PI / 2;
-    azimuthRing.position.y = 0.05;
-    scene.add(azimuthRing);
-    const azHandle = new THREE.Mesh(
-      new THREE.SphereGeometry(0.16, 16, 16),
-      new THREE.MeshStandardMaterial({ color: 0x00ff88, emissive: 0x00ff88, emissiveIntensity: 0.6 })
-    );
-    scene.add(azHandle);
-
-    /* Arc ROSE : élévation (-30° → 60°) */
-    const arcPts = [];
-    for (let i = 0; i <= 32; i++) {
-      const a = THREE.MathUtils.degToRad(-30 + (90 * i / 32));
-      arcPts.push(new THREE.Vector3(-0.8, ELEVATION_RADIUS * Math.sin(a) + CENTER.y, ELEVATION_RADIUS * Math.cos(a)));
-    }
-    const elevationArc = new THREE.Mesh(
-      new THREE.TubeGeometry(new THREE.CatmullRomCurve3(arcPts), 32, 0.04, 8, false),
-      new THREE.MeshStandardMaterial({ color: 0xff69b4, emissive: 0xff69b4, emissiveIntensity: 0.3 })
-    );
-    scene.add(elevationArc);
-    const elHandle = new THREE.Mesh(
-      new THREE.SphereGeometry(0.16, 16, 16),
-      new THREE.MeshStandardMaterial({ color: 0xff69b4, emissive: 0xff69b4, emissiveIntensity: 0.6 })
-    );
-    scene.add(elHandle);
-
-    /* Ligne ORANGE : distance caméra → sujet + handle */
-    const distLineGeo = new THREE.BufferGeometry();
-    const distLine = new THREE.Line(distLineGeo, new THREE.LineBasicMaterial({ color: 0xffa500 }));
-    scene.add(distLine);
-    const distHandle = new THREE.Mesh(
-      new THREE.SphereGeometry(0.14, 16, 16),
-      new THREE.MeshStandardMaterial({ color: 0xffa500, emissive: 0xffa500, emissiveIntensity: 0.6 })
-    );
-    scene.add(distHandle);
-
-    /* Helpers prompt */
-    function snapV(v, opts) { return opts.reduce((a,b) => Math.abs(b-v) < Math.abs(a-v) ? b : a); }
-    const AZN = {0:'front view',45:'front-right quarter view',90:'right side view',
-      135:'back-right quarter view',180:'back view',225:'back-left quarter view',
-      270:'left side view',315:'front-left quarter view'};
-    const ELN = {'-30':'low-angle shot','0':'eye-level shot','30':'elevated shot','60':'high-angle shot'};
-    const DIN = {'0.6':'close-up','1.0':'medium shot','1.8':'wide shot'};
-
-    function buildPrompt(az, el, di) {
-      return '<sks> ' + AZN[snapV(az,[0,45,90,135,180,225,270,315])]
-        + ', ' + ELN[String(snapV(el,[-30,0,30,60]))]
-        + ', ' + DIN[snapV(di,[0.6,1.0,1.8]).toFixed(1)];
-    }
-
-    function getSlider(id, def) {
-      const el = document.getElementById(id);
-      if (!el) return def;
-      const inp = el.querySelector('input[type="range"]');
-      return inp ? parseFloat(inp.value) : def;
-    }
-    function getUri() {
-      const el = document.getElementById('img_uri_store');
-      if (!el) return '';
-      const ta = el.querySelector('textarea');
-      return (ta && ta.value) ? ta.value : '';
-    }
-
-    /* État animé (lerp depuis sliders) */
-    let cAz = 0, cEl = 0, cDi = 1.0, lastUri = '';
-
-    function update(az, el, di) {
-      const distance = BASE_DISTANCE * di;
-      const azR = THREE.MathUtils.degToRad(az);
-      const elR = THREE.MathUtils.degToRad(el);
-
-      const cx = distance * Math.sin(azR) * Math.cos(elR);
-      const cy = distance * Math.sin(elR) + CENTER.y;
-      const cz = distance * Math.cos(azR) * Math.cos(elR);
-
-      cameraGroup.position.set(cx, cy, cz);
-      cameraGroup.lookAt(CENTER);
-
-      azHandle.position.set(AZIMUTH_RADIUS * Math.sin(azR), 0.05, AZIMUTH_RADIUS * Math.cos(azR));
-      elHandle.position.set(-0.8, ELEVATION_RADIUS * Math.sin(elR) + CENTER.y, ELEVATION_RADIUS * Math.cos(elR));
-
-      const orangeR = Math.max(distance - 0.5, 0.1);
-      distHandle.position.set(
-        orangeR * Math.sin(azR) * Math.cos(elR),
-        orangeR * Math.sin(elR) + CENTER.y,
-        orangeR * Math.cos(azR) * Math.cos(elR)
-      );
-      distLineGeo.setFromPoints([cameraGroup.position.clone(), CENTER.clone()]);
-
-      if (promptEl) promptEl.textContent = buildPrompt(az, el, di);
-    }
-
-    (function animate() {
-      requestAnimationFrame(animate);
-      const k = 0.12;
-      cAz += (getSlider('az_slider', 0)   - cAz) * k;
-      cEl += (getSlider('el_slider', 0)   - cEl) * k;
-      cDi += (getSlider('di_slider', 1.0) - cDi) * k;
-      update(cAz, cEl, cDi);
-
-      const uri = getUri();
-      if (uri && uri !== lastUri) { lastUri = uri; setPlaneFromUri(uri); }
-
-      renderer.render(scene, vcam);
-    })();
-  }
-}
-"""
-
-# ── HTML du viewer (juste le conteneur — le JS vient de gr.Blocks(js=...) ) ──
-
-VIEWER_HTML = """
-<div style="margin-bottom:6px; font-size:12px; color:#888;">
-  <span style="color:#00ff88;">●</span> Azimut &nbsp;
-  <span style="color:#ff69b4;">●</span> Élévation &nbsp;
-  <span style="color:#ffa500;">●</span> Distance
-</div>
-<div id="cv3d-wrapper" style="
-  width:100%; height:450px; position:relative;
-  background:#1a1a1a; border-radius:12px; overflow:hidden;">
-  <div id="cv3d-prompt" style="
-    position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
-    background:rgba(0,0,0,0.85); padding:8px 16px; border-radius:8px;
-    font-family:monospace; font-size:12px; color:#00ff88;
-    white-space:nowrap; pointer-events:none; z-index:10;">
-    &lt;sks&gt; front view, eye-level shot, medium shot
-  </div>
-</div>
-"""
 
 # ── UI Gradio ─────────────────────────────────────────────────────────────────
 
-with gr.Blocks(title="Angle Studio", theme=gr.themes.Base(), js=BLOCKS_JS) as demo:
+with gr.Blocks(title="Angle Studio", theme=gr.themes.Base()) as demo:
     gr.Markdown("""
 # 🎥 Angle Studio
 **Changez l'angle de vue de n'importe quelle image — 96 poses caméra**
@@ -323,24 +278,23 @@ with gr.Blocks(title="Angle Studio", theme=gr.themes.Base(), js=BLOCKS_JS) as de
     with gr.Row():
         with gr.Column(scale=1):
             input_image = gr.Image(label="Image source / Source image", type="pil")
-            img_uri_store = gr.Textbox(visible=False, elem_id="img_uri_store")
 
             gr.Markdown("### 📷 Contrôle caméra / Camera Control")
             azimuth_slider = gr.Slider(
-                minimum=0, maximum=315, step=45, value=0, elem_id="az_slider",
-                label="Azimut  (0°=front · 90°=right · 180°=back · 270°=left)"
+                minimum=0, maximum=315, step=45, value=0,
+                label="Azimut  (0°=front · 90°=right · 180°=back · 270°=left)",
             )
             elevation_slider = gr.Slider(
-                minimum=-30, maximum=60, step=30, value=0, elem_id="el_slider",
-                label="Élévation  (-30°=bas · 0°=eye-level · 60°=haut)"
+                minimum=-30, maximum=60, step=30, value=0,
+                label="Élévation  (-30°=bas · 0°=eye-level · 60°=haut)",
             )
             distance_slider = gr.Slider(
-                minimum=0.6, maximum=1.8, step=0.6, value=1.0, elem_id="di_slider",
-                label="Distance  (0.6=close-up · 1.0=medium · 1.8=wide)"
+                minimum=0.6, maximum=1.8, step=0.6, value=1.0,
+                label="Distance  (0.6=close-up · 1.0=medium · 1.8=wide)",
             )
             prompt_preview = gr.Textbox(
                 label="Prompt", interactive=False,
-                value="<sks> front view, eye-level shot, medium shot"
+                value="<sks> front view, eye-level shot, medium shot",
             )
             with gr.Row():
                 seed_input = gr.Number(label="Seed", value=0, precision=0)
@@ -348,7 +302,15 @@ with gr.Blocks(title="Angle Studio", theme=gr.themes.Base(), js=BLOCKS_JS) as de
             generate_btn = gr.Button("▶ Générer / Generate", variant="primary", size="lg")
 
         with gr.Column(scale=1):
-            gr.HTML(VIEWER_HTML)
+            gr.Markdown(
+                "<div style='font-size:12px;color:#888;margin-bottom:4px;'>"
+                "<span style='color:#00ff88;'>●</span> Azimut &nbsp;"
+                "<span style='color:#ff69b4;'>●</span> Élévation &nbsp;"
+                "<span style='color:#ffa500;'>●</span> Distance &nbsp;"
+                "<span style='color:#6699ff;'>◆</span> Caméra"
+                "</div>"
+            )
+            viewer_3d = gr.Plot(value=build_viewer_figure(0, 0, 1.0), label=None)
             output_image = gr.Image(label="Résultat / Result", type="pil")
             output_seed  = gr.Number(label="Seed utilisé", interactive=False)
 
@@ -357,9 +319,9 @@ with gr.Blocks(title="Angle Studio", theme=gr.themes.Base(), js=BLOCKS_JS) as de
     session_images = gr.State([])
 
     sliders = [azimuth_slider, elevation_slider, distance_slider]
-    input_image.change(fn=image_to_uri, inputs=input_image, outputs=img_uri_store)
     for s in sliders:
-        s.change(fn=update_prompt, inputs=sliders, outputs=prompt_preview)
+        s.change(fn=update_prompt,  inputs=sliders, outputs=prompt_preview)
+        s.change(fn=update_viewer,  inputs=sliders, outputs=viewer_3d)
 
     def run_and_append(image, az, el, di, seed, rand, history):
         result, used_seed, prompt = infer(image, az, el, di, seed, rand)

requirements.txt

@@ -1,2 +1,4 @@
 fal-client
 gradio
+plotly
+numpy