feat: 3D viewer — image source affichée sur le panneau sujet + lerp caméra

app.py

@@ -7,57 +7,59 @@ from PIL import Image
 
 # ── Constantes poses ──────────────────────────────────────────────────────────
 
-AZIMUTHS = [0, 45, 90, 135, 180, 225, 270, 315]
+AZIMUTHS   = [0, 45, 90, 135, 180, 225, 270, 315]
 ELEVATIONS = [-30, 0, 30, 60]
-DISTANCES = [0.6, 1.0, 1.8]
+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"
+    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"
+    -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"}
+DISTANCE_NAMES = {0.6:"close-up", 1.0:"medium shot", 1.8:"wide shot"}
 
 
-def snap_to_nearest(value, options):
+def snap(value, options):
     return min(options, key=lambda x: abs(x - value))
 
 
-def build_camera_prompt(azimuth: float, elevation: float, distance: float) -> str:
-    az = snap_to_nearest(azimuth, AZIMUTHS)
-    el = snap_to_nearest(elevation, ELEVATIONS)
-    di = snap_to_nearest(distance, DISTANCES)
+def build_prompt(azimuth, elevation, distance):
+    az = snap(azimuth, AZIMUTHS)
+    el = snap(elevation, ELEVATIONS)
+    di = snap(distance, DISTANCES)
     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:
+def image_to_uri(img):
+    if img is None:
+        return ""
     buf = io.BytesIO()
     img.save(buf, format="PNG")
     b64 = base64.b64encode(buf.getvalue()).decode()
     return f"data:image/png;base64,{b64}"
 
+
+def update_prompt(az, el, di):
+    return build_prompt(az, el, di)
+
 # ── Inférence fal.ai ──────────────────────────────────────────────────────────
 
 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")
+        raise gr.Error("Upload a source image first")
     if randomize_seed:
         seed = random.randint(0, 2**31 - 1)
 
-    prompt = build_camera_prompt(azimuth, elevation, distance)
-    image_url = pil_to_data_uri(image)
+    prompt = build_prompt(azimuth, elevation, distance)
 
+    import urllib.request
     result = fal_client.run(
         "fal-ai/qwen-image-edit",
         arguments={
-            "image_url": image_url,
+            "image_url": image_to_uri(image),
             "prompt": prompt,
             "seed": seed,
             "image_size": {"width": 1024, "height": 1024},
@@ -66,23 +68,22 @@ def infer(image, azimuth, elevation, distance, seed, randomize_seed):
             "loras": [{"path": "fal/Qwen-Image-Edit-2511-Multiple-Angles-LoRA", "scale": 1.0}],
         },
     )
-
-    import urllib.request
     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 3D ─────────────────────────────────────────────────────────────────
 
-VIEWER_HTML = """
-<div style="position:relative;width:100%;border-radius:10px;overflow:hidden;background:#080810;">
+VIEWER_HTML = r"""
+<div style="position:relative;width:100%;border-radius:10px;overflow:hidden;background:#07070f;user-select:none;">
   <canvas id="as-canvas" style="width:100%;display:block;"></canvas>
+
+  <!-- prompt overlay -->
   <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;">
+    position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
+    background:rgba(7,7,15,0.88);border:1px solid #00ff88;border-radius:5px;
+    padding:6px 14px;font-family:'Courier New',monospace;font-size:11px;
+    color:#00ff88;white-space:nowrap;pointer-events:none;">
     &lt;sks&gt; front view, eye-level shot, medium shot
   </div>
 </div>
@@ -90,123 +91,128 @@ VIEWER_HTML = """
 <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 ── */
+  var canvas = document.getElementById('as-canvas');
+  var promptEl = document.getElementById('as-prompt');
+  var renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
   renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-  renderer.setClearColor(0x080810, 1);
+  renderer.setClearColor(0x07070f, 1);
+
+  var scene = new THREE.Scene();
 
-  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);
+  /* ── viewer camera (fixed 3/4 angle) ── */
+  var vcam = new THREE.PerspectiveCamera(38, 1, 0.01, 50);
+  vcam.position.set(2.8, 2.0, 2.8);
+  vcam.lookAt(0, 0.1, 0);
 
   function resize() {
-    const w = canvas.clientWidth || 480;
-    const h = Math.round(w * 0.72);
+    var w = canvas.parentElement.clientWidth || 500;
+    var h = Math.round(w * 0.72);
     renderer.setSize(w, h, false);
-    viewCam.aspect = w / h;
-    viewCam.updateProjectionMatrix();
+    vcam.aspect = w / h;
+    vcam.updateProjectionMatrix();
   }
   resize();
   new ResizeObserver(resize).observe(canvas.parentElement);
 
-  // ── Floor grid ──
-  const grid = new THREE.GridHelper(5, 20, 0x151528, 0x151528);
+  /* ── grid floor ── */
+  var grid = new THREE.GridHelper(6, 24, 0x111128, 0x111128);
   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);
+  /* ── azimuth ring (green torus on XZ plane) ── */
+  var torusMat = new THREE.MeshBasicMaterial({ color: 0x00ff88 });
+  [0.60, 1.00, 1.80].forEach(function(di) {
+    var t = new THREE.Mesh(
+      new THREE.TorusGeometry(di, 0.013, 8, 80),
+      new THREE.MeshBasicMaterial({ color: di === 1.00 ? 0x00ff88 : 0x00884a, transparent: true, opacity: di === 1.00 ? 1 : 0.4 })
+    );
+    t.rotation.x = Math.PI / 2;
+    scene.add(t);
+  });
+
+  /* snap dots on main ring */
+  var dotGeo = new THREE.SphereGeometry(0.025, 8, 8);
+  var dotMat = new THREE.MeshBasicMaterial({ color: 0x00ff88 });
+  [0,45,90,135,180,225,270,315].forEach(function(a) {
+    var ar = a * Math.PI / 180;
+    var d = new THREE.Mesh(dotGeo, dotMat);
+    d.position.set(Math.sin(ar), 0, Math.cos(ar));
+    scene.add(d);
   });
 
-  // ── Elevation arc (left side) ──
+  /* ── elevation arc (pink, left side XY plane) ── */
   var arcPts = [];
-  for (var e = -30; e <= 60; e += 3) {
+  for (var e = -35; e <= 65; e += 3) {
     var er = e * Math.PI / 180;
-    arcPts.push(new THREE.Vector3(-1.0 * Math.cos(er), Math.sin(er), 0));
+    arcPts.push(new THREE.Vector3(-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) {
+  scene.add(new THREE.Line(
+    new THREE.BufferGeometry().setFromPoints(arcPts),
+    new THREE.LineBasicMaterial({ color: 0xff6ec7, linewidth: 2 })
+  ));
+  /* snap dots on arc */
+  [-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),
+    var d = new THREE.Mesh(
+      new THREE.SphereGeometry(0.022, 8, 8),
       new THREE.MeshBasicMaterial({ color: 0xff6ec7 })
     );
-    m.position.set(-1.0 * Math.cos(er), Math.sin(er), 0);
-    scene.add(m);
+    d.position.set(-Math.cos(er), Math.sin(er), 0);
+    scene.add(d);
   });
 
-  // ── 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;
+  /* ── subject panel (shows uploaded image) ── */
+  var subW = 0.28, subH = 0.36;
+  var subGeo = new THREE.PlaneGeometry(subW, subH);
+  var subMat = new THREE.MeshBasicMaterial({ color: 0x223355, side: THREE.DoubleSide });
+  var subMesh = new THREE.Mesh(subGeo, subMat);
+  subMesh.position.y = subH / 2 + 0.01;
   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);
+  /* border */
+  var borderGeo = new THREE.EdgesGeometry(new THREE.BoxGeometry(subW, subH, 0.01));
+  var borderLine = new THREE.LineSegments(borderGeo, new THREE.LineBasicMaterial({ color: 0x4466aa }));
+  borderLine.position.copy(subMesh.position);
+  scene.add(borderLine);
+
+  /* ── camera marker: sphere + barrel ── */
   var camSphMat = new THREE.MeshBasicMaterial({ color: 0xffcc00 });
-  var camSph = new THREE.Mesh(camSphGeo, camSphMat);
+  var camSph = new THREE.Mesh(new THREE.SphereGeometry(0.060, 16, 16), 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);
+  var barrelMat = new THREE.MeshBasicMaterial({ color: 0x1e2d3a });
+  var barrel = new THREE.Mesh(new THREE.CylinderGeometry(0.020, 0.030, 0.10, 8), 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; });
-  }
+  /* ── beam ── */
+  var beamGeo = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(), new THREE.Vector3()]);
+  var beamMat = new THREE.LineBasicMaterial({ color: 0xffcc00, transparent: true, opacity: 0.45 });
+  scene.add(new THREE.Line(beamGeo, beamMat));
+
+  /* ── lights ── */
+  scene.add(new THREE.AmbientLight(0xffffff, 1));
+
+  /* ── state ── */
+  var cAz = 0, cEl = 0, cDi = 1.0;
+  var tAz = 0, tEl = 0, tDi = 1.0;
+  var lastUri = '';
+
+  var AZ = {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 EL = {'-30':'low-angle shot','0':'eye-level shot','30':'elevated shot','60':'high-angle shot'};
+  var DI = {'0.6':'close-up','1':'medium shot','1.8':'wide shot'};
+
+  function snapV(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 saz = snapV(az,[0,45,90,135,180,225,270,315]);
+    var sel = snapV(el,[-30,0,30,60]);
+    var sdi = snapV(di,[0.6,1.0,1.8]);
+    var dk = sdi===1.0?'1':sdi.toFixed(1);
+    return '<sks> ' + AZ[saz] + ', ' + EL[sel+''] + ', ' + DI[dk];
   }
 
-  var EL_COLORS = { '-30':0x4fc3f7, '0':0x69f0ae, '30':0xffb74d, '60':0xef5350 };
+  var ELC = {'-30':0x4fc3f7,'0':0x69f0ae,'30':0xffb74d,'60':0xef5350};
 
   function getSlider(id, def) {
     var el = document.getElementById(id);
@@ -215,7 +221,16 @@ VIEWER_HTML = """
     return inp ? parseFloat(inp.value) : def;
   }
 
-  function updateCam(az, el, di) {
+  function getImageUri() {
+    var el = document.getElementById('img_uri_store');
+    if (!el) return '';
+    var ta = el.querySelector('textarea');
+    return ta ? ta.value : '';
+  }
+
+  var loader = new THREE.TextureLoader();
+
+  function updateScene(az, el, di) {
     var azR = az * Math.PI / 180;
     var elR = el * Math.PI / 180;
     var x = di * Math.sin(azR) * Math.cos(elR);
@@ -224,56 +239,52 @@ VIEWER_HTML = """
 
     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;
+    barrel.quaternion.setFromUnitVectors(new THREE.Vector3(0,1,0), dir);
+    barrel.translateY(0.04);
+
+    var bpos = beamGeo.attributes.position;
+    bpos.setXYZ(0, x, y, z);
+    bpos.setXYZ(1, 0, subMesh.position.y, 0);
+    bpos.needsUpdate = true;
+
+    var sel = snapV(el,[-30,0,30,60]);
+    var col = ELC[sel+''] || 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;
-
+  /* ── animate ── */
   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);
+    tAz = getSlider('az_slider', 0);
+    tEl = getSlider('el_slider', 0);
+    tDi = getSlider('di_slider', 1.0);
+
+    var k = 0.09;
+    cAz += (tAz - cAz) * k;
+    cEl += (tEl - cEl) * k;
+    cDi += (tDi - cDi) * k;
+
+    updateScene(cAz, cEl, cDi);
+
+    /* update subject texture when image changes */
+    var uri = getImageUri();
+    if (uri && uri !== lastUri) {
+      lastUri = uri;
+      loader.load(uri, function(tex) {
+        tex.encoding = THREE.sRGBEncoding;
+        subMat.map = tex;
+        subMat.color.setHex(0xffffff);
+        subMat.needsUpdate = true;
+      });
+    }
+
+    renderer.render(scene, vcam);
   }
   animate();
 })();
@@ -283,57 +294,63 @@ VIEWER_HTML = """
 # ── UI Gradio ─────────────────────────────────────────────────────────────────
 
 with gr.Blocks(title="Angle Studio", theme=gr.themes.Base()) as demo:
-    gr.Markdown(
-        """
+    gr.Markdown("""
 # 🎥 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")
+            # Textbox caché → passe l'image au viewer Three.js
+            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 — rotation horizontale (0°=front · 90°=right · 180°=back)"
+                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 — angle vertical (-30°=bas · 0°=eye-level · 60°=haut)"
+                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)"
+                label="Distance  (0.6=close-up · 1.0=medium · 1.8=wide)"
             )
 
             prompt_preview = gr.Textbox(
-                label="Prompt / Generated prompt",
-                value="<sks> front view, eye-level shot, medium shot",
-                interactive=False,
+                label="Prompt", interactive=False,
+                value="<sks> front view, eye-level shot, medium shot"
             )
 
             with gr.Row():
                 seed_input = gr.Number(label="Seed", value=0, precision=0)
-                randomize = gr.Checkbox(label="Seed aléatoire / Random seed", value=True)
+                randomize  = gr.Checkbox(label="Random seed", value=True)
 
             generate_btn = gr.Button("▶ Générer / Generate", variant="primary", size="lg")
 
+        # ── Colonne droite : viewer + résultat ──
         with gr.Column(scale=1):
             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)
+            output_seed  = gr.Number(label="Seed utilisé", interactive=False)
 
     gr.Markdown("### 🖼️ Galerie de session / Session Gallery")
-    gallery = gr.Gallery(label="Générations / Generations", columns=4, height=280)
+    gallery        = gr.Gallery(columns=4, height=260)
     session_images = gr.State([])
 
-    slider_inputs = [azimuth_slider, elevation_slider, distance_slider]
-    for slider in slider_inputs:
-        slider.change(fn=update_prompt_preview, inputs=slider_inputs, outputs=prompt_preview)
+    sliders = [azimuth_slider, elevation_slider, distance_slider]
+
+    # Image uploadée → data URI dans le store caché
+    input_image.change(fn=image_to_uri, inputs=input_image, outputs=img_uri_store)
+
+    # Sliders → prompt preview
+    for s in sliders:
+        s.change(fn=update_prompt, inputs=sliders, 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)
@@ -342,7 +359,7 @@ with gr.Blocks(title="Angle Studio", theme=gr.themes.Base()) as demo:
 
     generate_btn.click(
         fn=run_and_append,
-        inputs=[input_image, *slider_inputs, seed_input, randomize, session_images],
+        inputs=[input_image, *sliders, seed_input, randomize, session_images],
         outputs=[output_image, output_seed, session_images, gallery],
     )