feat: 3D Three.js orbit viewer — camera marker moves live on sliders

app.py

@@ -1,11 +1,6 @@
 import random
 import base64
 import io
-import numpy as np
-import matplotlib
-matplotlib.use("Agg")
-import matplotlib.pyplot as plt
-import matplotlib.patches as mpatches
 import fal_client
 import gradio as gr
 from PIL import Image
@@ -26,11 +21,6 @@ ELEVATION_NAMES = {
 }
 DISTANCE_NAMES = {0.6: "close-up", 1.0: "medium shot", 1.8: "wide shot"}
 
-# Couleur par élévation
-ELEVATION_COLORS = {-30: "#4fc3f7", 0: "#69f0ae", 30: "#ffb74d", 60: "#ef5350"}
-ELEVATION_LABELS = {-30: "⬇ low", 0: "➡ eye", 30: "↗ high", 60: "⬆ top"}
-
-# ── Helpers ───────────────────────────────────────────────────────────────────
 
 def snap_to_nearest(value, options):
     return min(options, key=lambda x: abs(x - value))
@@ -43,116 +33,21 @@ def build_camera_prompt(azimuth: float, elevation: float, distance: float) -> st
     return f"<sks> {AZIMUTH_NAMES[az]}, {ELEVATION_NAMES[el]}, {DISTANCE_NAMES[di]}"
 
 
+def update_prompt_preview(azimuth, elevation, distance):
+    return build_camera_prompt(azimuth, elevation, distance)
+
+
 def pil_to_data_uri(img: Image.Image) -> str:
     buf = io.BytesIO()
     img.save(buf, format="PNG")
     b64 = base64.b64encode(buf.getvalue()).decode()
     return f"data:image/png;base64,{b64}"
 
-# ── Diagramme caméra ──────────────────────────────────────────────────────────
-
-def draw_camera_diagram(azimuth: float, elevation: float, distance: float):
-    az = snap_to_nearest(azimuth, AZIMUTHS)
-    el = snap_to_nearest(elevation, ELEVATIONS)
-    di = snap_to_nearest(distance, DISTANCES)
-
-    # Azimut en coordonnées polaires : 0° = haut (front), sens horaire
-    # matplotlib polar : 0 = droite, sens anti-horaire → convertir
-    az_rad = np.radians(90 - az)
-
-    # Rayon normalisé selon distance (3 orbites)
-    r_map = {0.6: 0.35, 1.0: 0.60, 1.8: 0.88}
-    r = r_map[di]
-
-    cam_color = ELEVATION_COLORS[el]
-    prompt = build_camera_prompt(azimuth, elevation, distance)
-
-    BG = "#111118"
-    GRID = "#1e1e30"
-    ORBIT = "#2a2a45"
-    LABEL = "#6666aa"
-    SUBJECT = "#ffffff"
-    BEAM = cam_color
-
-    fig = plt.figure(figsize=(5.2, 5.8), facecolor=BG)
-    ax = fig.add_axes([0.08, 0.12, 0.84, 0.84], projection="polar", facecolor=BG)
-
-    theta = np.linspace(0, 2 * np.pi, 360)
-
-    # Orbites des 3 distances
-    orbit_styles = {0.35: ("--", 0.4, "close-up"), 0.60: ("-", 0.6, "medium"), 0.88: ("--", 0.4, "wide")}
-    for rv, (ls, alpha, dlabel) in orbit_styles.items():
-        ax.plot(theta, [rv] * 360, ls, color=ORBIT, linewidth=1, alpha=alpha, zorder=1)
-        ax.text(np.radians(15), rv + 0.03, dlabel, color=LABEL, fontsize=6.5,
-                ha="left", va="bottom", fontfamily="monospace")
-
-    # Etiquettes azimut (8 directions)
-    az_short = {0: "FRONT", 45: "FR", 90: "RIGHT", 135: "BR",
-                180: "BACK", 225: "BL", 270: "LEFT", 315: "FL"}
-    for a, short in az_short.items():
-        a_rad = np.radians(90 - a)
-        ax.text(a_rad, 1.04, short, color=LABEL, fontsize=6, ha="center", va="center",
-                fontfamily="monospace", fontweight="bold")
-
-    # Rayon guide vers caméra
-    ax.plot([az_rad, az_rad], [0, r], color=BEAM, linewidth=1, alpha=0.4, zorder=2)
-
-    # Sujet au centre
-    ax.plot(0, 0, "s", color=SUBJECT, markersize=11, zorder=5)
-    ax.text(np.radians(45), 0.08, "SUBJECT", color=SUBJECT, fontsize=6,
-            ha="center", va="center", fontfamily="monospace", alpha=0.7)
-
-    # Position caméra — cercle fond + cercle coloré (élévation)
-    ax.plot(az_rad, r, "o", color=BG, markersize=18, zorder=6)
-    ax.plot(az_rad, r, "o", color=BEAM, markersize=14, zorder=7, alpha=0.9)
-    ax.text(az_rad, r, "📷", fontsize=9, ha="center", va="center", zorder=8)
-
-    # Configuration axes
-    ax.set_ylim(0, 1.15)
-    ax.set_theta_zero_location("N")
-    ax.set_theta_direction(-1)
-    ax.set_xticks([])
-    ax.set_yticks([])
-    ax.spines["polar"].set_visible(False)
-
-    # Légende élévation
-    legend_handles = [
-        mpatches.Patch(color=ELEVATION_COLORS[e], label=f"{ELEVATION_LABELS[e]}  ({e}°)")
-        for e in ELEVATIONS
-    ]
-    ax.legend(handles=legend_handles, loc="lower center", bbox_to_anchor=(0.5, -0.18),
-              ncol=4, frameon=False, fontsize=7,
-              labelcolor="white", handlelength=1.0)
-
-    # Prompt en bas
-    fig.text(0.5, 0.02, prompt, ha="center", fontsize=8, color="#00e676",
-             fontfamily="monospace", style="italic",
-             bbox=dict(boxstyle="round,pad=0.3", facecolor="#0d1117", edgecolor="#00e676", alpha=0.8))
-
-    fig.patch.set_facecolor(BG)
-    return fig
-
-
-def update_diagram(azimuth, elevation, distance):
-    return draw_camera_diagram(azimuth, elevation, distance)
-
-
-def update_prompt_preview(azimuth, elevation, distance):
-    return build_camera_prompt(azimuth, elevation, distance)
-
 # ── Inférence fal.ai ──────────────────────────────────────────────────────────
 
-def infer(
-    image: Image.Image,
-    azimuth: float,
-    elevation: float,
-    distance: float,
-    seed: int,
-    randomize_seed: bool,
-):
+def infer(image, azimuth, elevation, distance, seed, randomize_seed):
     if image is None:
         raise gr.Error("Veuillez uploader une image source / Please upload a source image")
-
     if randomize_seed:
         seed = random.randint(0, 2**31 - 1)
 
@@ -168,22 +63,223 @@ def infer(
             "image_size": {"width": 1024, "height": 1024},
             "num_inference_steps": 4,
             "guidance_scale": 1.0,
-            "loras": [
-                {
-                    "path": "fal/Qwen-Image-Edit-2511-Multiple-Angles-LoRA",
-                    "scale": 1.0,
-                }
-            ],
+            "loras": [{"path": "fal/Qwen-Image-Edit-2511-Multiple-Angles-LoRA", "scale": 1.0}],
         },
     )
 
-    image_url_out = result["images"][0]["url"]
     import urllib.request
-    with urllib.request.urlopen(image_url_out) as resp:
+    with urllib.request.urlopen(result["images"][0]["url"]) as resp:
         out_img = Image.open(io.BytesIO(resp.read())).convert("RGB")
 
     return out_img, seed, prompt
 
+# ── Viewer 3D Three.js ────────────────────────────────────────────────────────
+
+VIEWER_HTML = """
+<div style="position:relative;width:100%;border-radius:10px;overflow:hidden;background:#080810;">
+  <canvas id="as-canvas" style="width:100%;display:block;"></canvas>
+  <div id="as-prompt" style="
+    position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
+    background:rgba(8,8,16,0.88);border:1px solid #00ff88;border-radius:5px;
+    padding:7px 14px;font-family:monospace;font-size:12px;color:#00ff88;
+    white-space:nowrap;pointer-events:none;letter-spacing:0.03em;">
+    &lt;sks&gt; front view, eye-level shot, medium shot
+  </div>
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+<script>
+(function () {
+  const canvas = document.getElementById('as-canvas');
+  const promptEl = document.getElementById('as-prompt');
+
+  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+  renderer.setClearColor(0x080810, 1);
+
+  const scene = new THREE.Scene();
+  const viewCam = new THREE.PerspectiveCamera(42, 1, 0.01, 50);
+  viewCam.position.set(2.6, 1.9, 2.6);
+  viewCam.lookAt(0, 0.15, 0);
+
+  function resize() {
+    const w = canvas.clientWidth || 480;
+    const h = Math.round(w * 0.72);
+    renderer.setSize(w, h, false);
+    viewCam.aspect = w / h;
+    viewCam.updateProjectionMatrix();
+  }
+  resize();
+  new ResizeObserver(resize).observe(canvas.parentElement);
+
+  // ── Floor grid ──
+  const grid = new THREE.GridHelper(5, 20, 0x151528, 0x151528);
+  scene.add(grid);
+
+  // ── Azimuth ring ──
+  const ringGeo = new THREE.TorusGeometry(1.0, 0.014, 8, 96);
+  const ringMat = new THREE.MeshBasicMaterial({ color: 0x00ff88 });
+  const ring = new THREE.Mesh(ringGeo, ringMat);
+  ring.rotation.x = Math.PI / 2;
+  scene.add(ring);
+
+  // 8 orbit snap dots
+  const dotGeo = new THREE.SphereGeometry(0.028, 8, 8);
+  [0, 45, 90, 135, 180, 225, 270, 315].forEach(function(az) {
+    const dot = new THREE.Mesh(dotGeo, new THREE.MeshBasicMaterial({ color: 0x00ff88 }));
+    const r = az * Math.PI / 180;
+    dot.position.set(Math.sin(r), 0, Math.cos(r));
+    scene.add(dot);
+  });
+
+  // ── Elevation arc (left side) ──
+  var arcPts = [];
+  for (var e = -30; e <= 60; e += 3) {
+    var er = e * Math.PI / 180;
+    arcPts.push(new THREE.Vector3(-1.0 * Math.cos(er), Math.sin(er), 0));
+  }
+  var arcGeo = new THREE.BufferGeometry().setFromPoints(arcPts);
+  scene.add(new THREE.Line(arcGeo, new THREE.LineBasicMaterial({ color: 0xff6ec7 })));
+
+  // Elevation arc dot markers
+  [-30, 0, 30, 60].forEach(function(e) {
+    var er = e * Math.PI / 180;
+    var m = new THREE.Mesh(
+      new THREE.SphereGeometry(0.025, 8, 8),
+      new THREE.MeshBasicMaterial({ color: 0xff6ec7 })
+    );
+    m.position.set(-1.0 * Math.cos(er), Math.sin(er), 0);
+    scene.add(m);
+  });
+
+  // ── Subject at center ──
+  var subGeo = new THREE.BoxGeometry(0.17, 0.22, 0.025);
+  var subMesh = new THREE.Mesh(subGeo, new THREE.MeshBasicMaterial({ color: 0x223355 }));
+  subMesh.position.y = 0.11;
+  scene.add(subMesh);
+  var subEdges = new THREE.LineSegments(
+    new THREE.EdgesGeometry(subGeo),
+    new THREE.LineBasicMaterial({ color: 0x6688bb })
+  );
+  subEdges.position.copy(subMesh.position);
+  scene.add(subEdges);
+
+  // ── Camera marker (sphere + barrel) ──
+  var camSphGeo = new THREE.SphereGeometry(0.065, 16, 16);
+  var camSphMat = new THREE.MeshBasicMaterial({ color: 0xffcc00 });
+  var camSph = new THREE.Mesh(camSphGeo, camSphMat);
+  scene.add(camSph);
+
+  var barrelGeo = new THREE.CylinderGeometry(0.022, 0.032, 0.11, 8);
+  var barrelMat = new THREE.MeshBasicMaterial({ color: 0x2a3a4a });
+  var barrel = new THREE.Mesh(barrelGeo, barrelMat);
+  scene.add(barrel);
+
+  // ── Beam line ──
+  var beamPts = [new THREE.Vector3(0,0,0), new THREE.Vector3(0,0,0)];
+  var beamGeo = new THREE.BufferGeometry().setFromPoints(beamPts);
+  var beamMat = new THREE.LineBasicMaterial({ color: 0xffcc00, transparent: true, opacity: 0.4 });
+  var beam = new THREE.Line(beamGeo, beamMat);
+  scene.add(beam);
+
+  // ── State ──
+  var curAz = 0, curEl = 0, curDi = 1.0;
+  var tgtAz = 0, tgtEl = 0, tgtDi = 1.0;
+
+  var AZNAMES = {
+    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'
+  };
+  var ELNAMES = { '-30':'low-angle shot', '0':'eye-level shot', '30':'elevated shot', '60':'high-angle shot' };
+  var DINAMES = { '0.6':'close-up', '1':'medium shot', '1.8':'wide shot' };
+
+  function snap(v, opts) {
+    return opts.reduce(function(a,b){ return Math.abs(b-v)<Math.abs(a-v)?b:a; });
+  }
+
+  function buildPrompt(az, el, di) {
+    var saz = snap(az, [0,45,90,135,180,225,270,315]);
+    var sel = snap(el, [-30,0,30,60]);
+    var sdi = snap(di, [0.6,1.0,1.8]);
+    var diKey = sdi === 1.0 ? '1' : sdi.toString();
+    return '<sks> ' + AZNAMES[saz] + ', ' + ELNAMES[sel.toString()] + ', ' + DINAMES[diKey];
+  }
+
+  var EL_COLORS = { '-30':0x4fc3f7, '0':0x69f0ae, '30':0xffb74d, '60':0xef5350 };
+
+  function getSlider(id, def) {
+    var el = document.getElementById(id);
+    if (!el) return def;
+    var inp = el.querySelector('input[type="range"]');
+    return inp ? parseFloat(inp.value) : def;
+  }
+
+  function updateCam(az, el, di) {
+    var azR = az * Math.PI / 180;
+    var elR = el * Math.PI / 180;
+    var x = di * Math.sin(azR) * Math.cos(elR);
+    var y = di * Math.sin(elR);
+    var z = di * Math.cos(azR) * Math.cos(elR);
+
+    camSph.position.set(x, y, z);
+
+    // Barrel orientation (points toward subject)
+    barrel.position.set(x, y, z);
+    var dir = new THREE.Vector3(-x, -y, -z).normalize();
+    var up = new THREE.Vector3(0, 1, 0);
+    barrel.quaternion.setFromUnitVectors(up, dir);
+    barrel.translateY(0.045);
+
+    // Beam
+    var pos = beamGeo.attributes.position;
+    pos.setXYZ(0, x, y, z);
+    pos.setXYZ(1, 0, 0.11, 0);
+    pos.needsUpdate = true;
+
+    // Color by elevation
+    var sel = snap(el, [-30, 0, 30, 60]);
+    var col = EL_COLORS[sel.toString()] || 0x69f0ae;
+    camSphMat.color.setHex(col);
+    beamMat.color.setHex(col);
+
+    promptEl.textContent = buildPrompt(az, el, di);
+  }
+
+  // ── Viewer orbit (slow auto-rotate for dynamism) ──
+  var viewT = 0;
+
+  function animate() {
+    requestAnimationFrame(animate);
+
+    // Read Gradio sliders
+    tgtAz = getSlider('az_slider', 0);
+    tgtEl = getSlider('el_slider', 0);
+    tgtDi = getSlider('di_slider', 1.0);
+
+    // Smooth interpolation
+    var k = 0.10;
+    curAz += (tgtAz - curAz) * k;
+    curEl += (tgtEl - curEl) * k;
+    curDi += (tgtDi - curDi) * k;
+
+    updateCam(curAz, curEl, curDi);
+
+    // Slowly orbit the viewer camera around the scene
+    viewT += 0.004;
+    var vr = 3.4;
+    viewCam.position.x = Math.sin(viewT) * vr * 0.65 + 0.6;
+    viewCam.position.z = Math.cos(viewT) * vr * 0.65 + 0.6;
+    viewCam.position.y = 1.7 + Math.sin(viewT * 0.3) * 0.3;
+    viewCam.lookAt(0, 0.12, 0);
+
+    renderer.render(scene, viewCam);
+  }
+  animate();
+})();
+</script>
+"""
+
 # ── UI Gradio ─────────────────────────────────────────────────────────────────
 
 with gr.Blocks(title="Angle Studio", theme=gr.themes.Base()) as demo:
@@ -191,33 +287,31 @@ with gr.Blocks(title="Angle Studio", theme=gr.themes.Base()) as demo:
         """
 # 🎥 Angle Studio
 **Changez l'angle de vue de n'importe quelle image — 96 poses caméra**
-
 *Change the camera angle of any image — 96 precise poses*
         """
     )
 
     with gr.Row():
-        # Colonne gauche — contrôles
         with gr.Column(scale=1):
             input_image = gr.Image(label="Image source / Source image", type="pil")
 
             gr.Markdown("### 📷 Contrôle caméra / Camera Control")
 
             azimuth_slider = gr.Slider(
-                minimum=0, maximum=315, step=45, value=0,
-                label="Azimut / Azimuth — rotation horizontale (0°=front · 180°=back)"
+                minimum=0, maximum=315, step=45, value=0, elem_id="az_slider",
+                label="Azimut — rotation horizontale (0°=front · 90°=right · 180°=back)"
             )
             elevation_slider = gr.Slider(
-                minimum=-30, maximum=60, step=30, value=0,
-                label="Élévation / Elevation — angle vertical (-30°=bas · 60°=haut)"
+                minimum=-30, maximum=60, step=30, value=0, elem_id="el_slider",
+                label="Élévation — angle vertical (-30°=bas · 0°=eye-level · 60°=haut)"
             )
             distance_slider = gr.Slider(
-                minimum=0.6, maximum=1.8, step=0.6, value=1.0,
+                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)"
             )
 
             prompt_preview = gr.Textbox(
-                label="Prompt envoyé / Sent prompt",
+                label="Prompt / Generated prompt",
                 value="<sks> front view, eye-level shot, medium shot",
                 interactive=False,
             )
@@ -228,34 +322,18 @@ with gr.Blocks(title="Angle Studio", theme=gr.themes.Base()) as demo:
 
             generate_btn = gr.Button("▶ Générer / Generate", variant="primary", size="lg")
 
-        # Colonne droite — diagramme + résultat
         with gr.Column(scale=1):
-            camera_diagram = gr.Plot(label="Position caméra / Camera position", show_label=True)
+            gr.HTML(VIEWER_HTML)
             output_image = gr.Image(label="Résultat / Result", type="pil")
             output_seed = gr.Number(label="Seed utilisé / Used seed", interactive=False)
 
     gr.Markdown("### 🖼️ Galerie de session / Session Gallery")
     gallery = gr.Gallery(label="Générations / Generations", columns=4, height=280)
-
     session_images = gr.State([])
 
-    # Mise à jour diagramme + prompt en temps réel
     slider_inputs = [azimuth_slider, elevation_slider, distance_slider]
-
     for slider in slider_inputs:
-        slider.change(
-            fn=update_diagram,
-            inputs=slider_inputs,
-            outputs=camera_diagram,
-        )
-        slider.change(
-            fn=update_prompt_preview,
-            inputs=slider_inputs,
-            outputs=prompt_preview,
-        )
-
-    # Diagramme initial
-    demo.load(fn=update_diagram, inputs=slider_inputs, outputs=camera_diagram)
+        slider.change(fn=update_prompt_preview, inputs=slider_inputs, outputs=prompt_preview)
 
     def run_and_append(image, az, el, di, seed, rand, history):
         result, used_seed, prompt = infer(image, az, el, di, seed, rand)
@@ -264,8 +342,7 @@ with gr.Blocks(title="Angle Studio", theme=gr.themes.Base()) as demo:
 
     generate_btn.click(
         fn=run_and_append,
-        inputs=[input_image, azimuth_slider, elevation_slider, distance_slider,
-                seed_input, randomize, session_images],
+        inputs=[input_image, *slider_inputs, seed_input, randomize, session_images],
         outputs=[output_image, output_seed, session_images, gallery],
     )