added functionality for janus models

app.py

@@ -6,9 +6,10 @@ from pathlib import Path
 
 import gradio as gr
 from huggingface_hub import HfApi, hf_hub_download
-from vidshow import vidshow_from_png_bytes
+from vidshow import vidshow_dual_from_png_bytes, vidshow_from_png_bytes
 
 ACTION_PROBS_FILES = ("action_probs.tar.gz", "action_probs.zip")
+ACTION_PROBS_SUFFIXES = (".tar.gz", ".zip")
 
 JAXGMG_COLLECTION_SLUG = "davidquarel/jaxgmg-69528c4f23d35d7de3eecfa1"
 DEFAULT_REPO = "davidquarel/jaxgmg_3phase_seed"
@@ -51,8 +52,11 @@ def get_checkpoint_list(repo_id: str) -> tuple[str, ...]:
     local_path = get_local_path(repo_id)
     if USE_LOCAL and local_path.exists():
         checkpoints = set()
-        for ap_file in ACTION_PROBS_FILES:
-            for found in local_path.rglob(ap_file):
+        for found in local_path.rglob("*"):
+            if not found.is_file():
+                continue
+            name = found.name
+            if "action_probs" in name and name.endswith(ACTION_PROBS_SUFFIXES):
                 if found.stat().st_size > 1000:
                     rel_path = found.parent.relative_to(local_path)
                     checkpoints.add(str(rel_path))
@@ -61,13 +65,37 @@ def get_checkpoint_list(repo_id: str) -> tuple[str, ...]:
         files = get_repo_files(repo_id)
         checkpoints = set()
         for f in files:
-            if any(f.endswith(ap) for ap in ACTION_PROBS_FILES):
+            name = f.rsplit("/", 1)[-1]
+            if "action_probs" in name and name.endswith(ACTION_PROBS_SUFFIXES):
                 dir_path = f.rsplit("/", 1)[0] if "/" in f else ""
                 if dir_path:
                     checkpoints.add(dir_path)
         return tuple(sorted(checkpoints))
 
 
+def get_checkpoint_files(repo_id: str, checkpoint: str) -> tuple[str, ...]:
+    """List files within a checkpoint directory (local or remote)."""
+    local_path = get_local_path(repo_id)
+    if USE_LOCAL and local_path.exists():
+        checkpoint_dir = local_path / checkpoint
+        if not checkpoint_dir.exists():
+            return ()
+        return tuple(str(p.name) for p in checkpoint_dir.iterdir() if p.is_file())
+    files = get_repo_files(repo_id)
+    prefix = f"{checkpoint}/"
+    return tuple(f[len(prefix):] for f in files if f.startswith(prefix) and "/" not in f[len(prefix):])
+
+
+def has_janus_eval(repo_id: str, checkpoint: str) -> bool:
+    files = set(get_checkpoint_files(repo_id, checkpoint))
+    if "janus_eval.json" in files or "janus_eval.jsonl" in files:
+        return True
+    return (
+        "action_probs_model1.tar.gz" in files
+        and "action_probs_model2.tar.gz" in files
+    )
+
+
 def update_checkpoints(repo_id: str):
     checkpoints = list(get_checkpoint_list(repo_id))
     return gr.Dropdown(
@@ -76,6 +104,58 @@ def update_checkpoints(repo_id: str):
     )
 
 
+def update_checkpoints_filtered(repo_id: str, janus_only: bool):
+    checkpoints = list(get_checkpoint_list(repo_id))
+    if janus_only:
+        checkpoints = [ckpt for ckpt in checkpoints if has_janus_eval(repo_id, ckpt)]
+    return gr.Dropdown(
+        choices=checkpoints,
+        value=checkpoints[0] if checkpoints else None,
+    )
+
+
+def list_action_prob_archives(repo_id: str, checkpoint: str) -> list[tuple[str, str]]:
+    """Return list of (archive_path, filename) for action_probs archives."""
+    candidates: list[tuple[str, str]] = []
+    local_path = get_local_path(repo_id)
+
+    if USE_LOCAL and local_path.exists():
+        checkpoint_dir = local_path / checkpoint
+        if checkpoint_dir.exists():
+            for path in sorted(checkpoint_dir.iterdir()):
+                if not path.is_file():
+                    continue
+                name = path.name
+                if "action_probs" in name and (name.endswith(".tar.gz") or name.endswith(".zip")):
+                    if path.stat().st_size > 1000:
+                        candidates.append((str(path), name))
+        return candidates
+
+    files = get_repo_files(repo_id)
+    prefix = f"{checkpoint}/"
+    for f in files:
+        if not f.startswith(prefix):
+            continue
+        name = f[len(prefix):]
+        if "/" in name:
+            continue
+        if "action_probs" in name and (name.endswith(".tar.gz") or name.endswith(".zip")):
+            candidates.append((f, name))
+    return sorted(candidates, key=lambda item: item[1])
+
+
+def select_janus_archives(archives: list[tuple[str, str]]) -> list[tuple[str, str]]:
+    """Pick model1/model2 archives by naming convention, else first two."""
+    by_name = {name: (path, name) for path, name in archives}
+    preferred = []
+    for name in ("action_probs_model1.tar.gz", "action_probs_model2.tar.gz"):
+        if name in by_name:
+            preferred.append(by_name[name])
+    if len(preferred) == 2:
+        return preferred
+    return archives[:2]
+
+
 def load_action_probs(repo_id: str, checkpoint: str, progress=gr.Progress()) -> str:
     if not checkpoint:
         return "<div style='padding:40px;text-align:center;color:#f88;'>Please select a checkpoint</div>"
@@ -111,8 +191,35 @@ def load_action_probs(repo_id: str, checkpoint: str, progress=gr.Progress()) ->
     if archive_path is None or archive_filename is None:
         return "<div style='padding:40px;text-align:center;color:#f88;'>No action_probs archive found</div>"
 
-    progress(0.2, desc="Reading archive...")
+    png_bytes_list, frame_names = read_action_probs_archive(
+        archive_path,
+        archive_filename,
+        progress=progress,
+        progress_start=0.2,
+        progress_span=0.6,
+    )
+
+    progress(0.85, desc="Building player...")
+
+    title = f"{repo_id.split('/')[-1]} / {checkpoint}"
+    html = vidshow_from_png_bytes(
+        png_bytes_list, frame_names=frame_names, fps=12, loop=True, title=title
+    )
+
+    progress(1.0, desc="Done!")
+    return html
 
+
+def read_action_probs_archive(
+    archive_path: str,
+    archive_filename: str,
+    *,
+    progress: gr.Progress | None = None,
+    progress_start: float = 0.2,
+    progress_span: float = 0.6,
+) -> tuple[list[bytes], list[str]]:
+    if progress is not None:
+        progress(progress_start, desc="Reading archive...")
     png_bytes_list: list[bytes] = []
     frame_names: list[str] = []
 
@@ -122,7 +229,7 @@ def load_action_probs(repo_id: str, checkpoint: str, progress=gr.Progress()) ->
                 (m for m in tar.getmembers() if m.name.endswith(".png")),
                 key=lambda m: m.name
             )
-            total = len(members)
+            total = len(members) or 1
             last_update = 0
             for i, member in enumerate(members):
                 f = tar.extractfile(member)
@@ -130,33 +237,102 @@ def load_action_probs(repo_id: str, checkpoint: str, progress=gr.Progress()) ->
                     png_bytes_list.append(f.read())
                     name = member.name.rsplit("/", 1)[-1].replace(".png", "")
                     frame_names.append(name)
-                if i - last_update >= 100:
-                    progress(0.2 + 0.6 * (i / total), desc=f"Reading ({i}/{total})...")
+                if progress is not None and i - last_update >= 100:
+                    progress(progress_start + progress_span * (i / total), desc=f"Reading ({i}/{total})...")
                     last_update = i
     else:
         with zipfile.ZipFile(archive_path, "r") as zf:
             members = sorted(n for n in zf.namelist() if n.endswith(".png"))
-            total = len(members)
+            total = len(members) or 1
             last_update = 0
             for i, name in enumerate(members):
                 png_bytes_list.append(zf.read(name))
                 frame_name = name.rsplit("/", 1)[-1].replace(".png", "")
                 frame_names.append(frame_name)
-                if i - last_update >= 100:
-                    progress(0.2 + 0.6 * (i / total), desc=f"Reading ({i}/{total})...")
+                if progress is not None and i - last_update >= 100:
+                    progress(progress_start + progress_span * (i / total), desc=f"Reading ({i}/{total})...")
                     last_update = i
 
-    progress(0.85, desc="Building player...")
+    return png_bytes_list, frame_names
+
 
+def load_action_probs_janus(repo_id: str, checkpoint: str, progress=gr.Progress()) -> str:
+    if not checkpoint:
+        return "<div style='padding:40px;text-align:center;color:#f88;'>Please select a checkpoint</div>"
+
+    progress(0.05, desc="Locating files...")
+    archives = list_action_prob_archives(repo_id, checkpoint)
+
+    local_pairs = []
+    selected_archives = select_janus_archives(archives)
+    progress(0.1, desc="Resolving archives...")
+    for archive_path, name in selected_archives:
+        resolved_path = archive_path
+        if USE_LOCAL:
+            # If local path is missing, fall back to HF download.
+            if not os.path.exists(resolved_path):
+                resolved_path = hf_hub_download(
+                    repo_id=repo_id,
+                    filename=f"{checkpoint}/{name}",
+                    repo_type="model",
+                )
+        else:
+            resolved_path = hf_hub_download(
+                repo_id=repo_id,
+                filename=archive_path,
+                repo_type="model",
+            )
+        local_pairs.append((resolved_path, name))
+
+    if len(local_pairs) < 2:
+        return "<div style='padding:40px;text-align:center;color:#f88;'>Need two action_probs archives for Janus</div>"
+
+    left_path, left_name = local_pairs[0]
+    right_path, right_name = local_pairs[1]
+
+    left_frames, left_names = read_action_probs_archive(
+        left_path,
+        left_name,
+        progress=progress,
+        progress_start=0.2,
+        progress_span=0.35,
+    )
+    right_frames, right_names = read_action_probs_archive(
+        right_path,
+        right_name,
+        progress=progress,
+        progress_start=0.55,
+        progress_span=0.35,
+    )
+
+    progress(0.9, desc="Building player...")
     title = f"{repo_id.split('/')[-1]} / {checkpoint}"
-    html = vidshow_from_png_bytes(
-        png_bytes_list, frame_names=frame_names, fps=12, loop=True, title=title
+    left_title = left_name.replace(".tar.gz", "").replace(".zip", "")
+    right_title = right_name.replace(".tar.gz", "").replace(".zip", "")
+    html = vidshow_dual_from_png_bytes(
+        left_frames,
+        right_frames,
+        left_frame_names=left_names,
+        right_frame_names=right_names,
+        fps=12,
+        loop=True,
+        title=title,
+        left_title=left_title,
+        right_title=right_title,
+        gap_px=28,
+        counter_label=checkpoint,
     )
 
     progress(1.0, desc="Done!")
     return html
 
 
+def load_action_probs_any(repo_id: str, checkpoint: str, janus_only: bool, progress=gr.Progress()) -> str:
+    if janus_only:
+        return load_action_probs_janus(repo_id, checkpoint, progress=progress)
+    return load_action_probs(repo_id, checkpoint, progress=progress)
+
+
 def create_demo():
     repos = list(get_collection_repos())
     initial_checkpoints = list(get_checkpoint_list(DEFAULT_REPO))
@@ -177,6 +353,11 @@ def create_demo():
                 filterable=True,
                 scale=2,
             )
+            janus_checkbox = gr.Checkbox(
+                value=False,
+                label="Janus model?",
+                scale=1,
+            )
             load_btn = gr.Button("Load", variant="primary", scale=1)
 
         output_html = gr.HTML(
@@ -189,14 +370,19 @@ def create_demo():
         )
 
         repo_dropdown.change(
-            fn=update_checkpoints,
-            inputs=[repo_dropdown],
+            fn=update_checkpoints_filtered,
+            inputs=[repo_dropdown, janus_checkbox],
+            outputs=[checkpoint_dropdown],
+        )
+        janus_checkbox.change(
+            fn=update_checkpoints_filtered,
+            inputs=[repo_dropdown, janus_checkbox],
             outputs=[checkpoint_dropdown],
         )
 
         load_btn.click(
-            fn=load_action_probs,
-            inputs=[repo_dropdown, checkpoint_dropdown],
+            fn=load_action_probs_any,
+            inputs=[repo_dropdown, checkpoint_dropdown, janus_checkbox],
             outputs=[output_html],
         )
 

run_local.sh

@@ -0,0 +1,2 @@
+#!/bin/bash
+JAXGMG_USE_LOCAL=1 python app.py

vidshow.py

@@ -280,3 +280,339 @@ show(0);
     
     # Wrap in iframe - srcdoc allows scripts to run
     return f'<iframe srcdoc="{srcdoc_escaped}" style="width:100%;height:{iframe_height}px;border:none;border-radius:12px;"></iframe>'
+
+
+def vidshow_dual_from_png_bytes(
+    left_png_bytes: list[bytes],
+    right_png_bytes: list[bytes],
+    *,
+    left_frame_names: list[str] | None = None,
+    right_frame_names: list[str] | None = None,
+    fps: int = 12,
+    loop: bool = True,
+    title: str | None = None,
+    left_title: str | None = None,
+    right_title: str | None = None,
+    gap_px: int = 24,
+    counter_label: str | None = None,
+) -> str:
+    """Dual vidshow with linked frame index across two sequences."""
+    if not left_png_bytes or not right_png_bytes:
+        raise ValueError("Both left and right frame lists must be non-empty.")
+
+    # Get image dimensions from first frames
+    with Image.open(io.BytesIO(left_png_bytes[0])) as img:
+        left_width, left_height = img.size
+    with Image.open(io.BytesIO(right_png_bytes[0])) as img:
+        right_width, right_height = img.size
+
+    def encode_one(png_bytes: bytes) -> str:
+        return "data:image/png;base64," + base64.b64encode(png_bytes).decode("ascii")
+
+    with ThreadPoolExecutor(max_workers=8) as pool:
+        left_urls = list(pool.map(encode_one, left_png_bytes))
+        right_urls = list(pool.map(encode_one, right_png_bytes))
+
+    left_n = len(left_urls)
+    right_n = len(right_urls)
+    total_n = max(left_n, right_n)
+    if left_frame_names is None:
+        left_frame_names = [str(i) for i in range(left_n)]
+    if right_frame_names is None:
+        right_frame_names = [str(i) for i in range(right_n)]
+
+    frames_left_json = json.dumps(left_urls)
+    frames_right_json = json.dumps(right_urls)
+    names_left_json = json.dumps(left_frame_names)
+    names_right_json = json.dumps(right_frame_names)
+    title_escaped = html_module.escape(title) if title else "Video"
+    left_title_escaped = html_module.escape(left_title) if left_title else "Model A"
+    right_title_escaped = html_module.escape(right_title) if right_title else "Model B"
+    counter_label_escaped = html_module.escape(counter_label) if counter_label else title_escaped
+    loop_js = "true" if loop else "false"
+    iframe_height = max(left_height, right_height) + 200
+    gap_px = max(0, int(gap_px))
+
+    inner_html = f"""<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+*{{box-sizing:border-box;}}
+html,body{{margin:0;padding:0;}}
+body{{
+  padding:12px;
+  background:#1a1a2e;
+  font-family:sans-serif;
+}}
+body.fullscreen{{
+  display:flex;
+  flex-direction:column;
+  height:100vh;
+}}
+.title{{font-weight:600;color:#e0e0e0;margin-bottom:8px;font-size:1.1em;text-align:center;}}
+.dual-row{{display:flex;gap:{gap_px}px;justify-content:center;align-items:flex-start;}}
+.panel{{display:flex;flex-direction:column;align-items:center;}}
+.panel-title{{color:#c8c8d8;font-size:0.95em;margin-bottom:6px;}}
+.img-container{{
+  overflow:hidden;
+  border-radius:8px;
+  box-shadow:0 4px 20px rgba(0,0,0,.4);
+  cursor:grab;
+  background:#0f0f1a;
+  position:relative;
+  display:inline-block;
+}}
+body.fullscreen .dual-row{{
+  flex:1;
+  align-items:stretch;
+}}
+body.fullscreen .panel{{
+  flex:1;
+  min-width:0;
+}}
+body.fullscreen .img-container{{
+  flex:1;
+  min-height:0;
+  display:block;
+  width:100%;
+  height:100%;
+}}
+.img-container.dragging{{cursor:grabbing;}}
+img{{
+  display:block;
+  image-rendering:pixelated;
+  user-select:none;
+  -webkit-user-drag:none;
+  transform-origin:0 0;
+}}
+body.fullscreen img{{
+  position:absolute;
+  top:0;left:0;
+}}
+.controls{{display:flex;gap:8px;align-items:center;margin-top:12px;}}
+button{{padding:6px 12px;border-radius:6px;border:none;background:#4a4a6a;color:#fff;cursor:pointer;font-size:1em;}}
+button:hover{{background:#5a5a7a;}}
+button.primary{{background:#6366f1;}}
+button.primary:hover{{background:#7376f2;}}
+input[type=range]{{flex:1;accent-color:#6366f1;}}
+.label{{min-width:12ch;text-align:right;font-variant-numeric:tabular-nums;color:#e0e0e0;font-size:0.9em;}}
+.fps-row{{display:flex;align-items:center;gap:8px;margin-top:10px;}}
+.fps-label{{font-size:0.9em;color:#a0a0a0;}}
+.fps-value{{min-width:3ch;text-align:right;color:#e0e0e0;}}
+.hint{{font-size:0.8em;color:#666;margin-top:8px;text-align:center;}}
+</style>
+</head>
+<body>
+<div class="title">{title_escaped}</div>
+<div class="dual-row">
+  <div class="panel">
+    <div class="panel-title">{left_title_escaped}</div>
+    <div class="img-container" id="leftContainer">
+      <img id="leftImg" src="{left_urls[0]}">
+    </div>
+  </div>
+  <div class="panel">
+    <div class="panel-title">{right_title_escaped}</div>
+    <div class="img-container" id="rightContainer">
+      <img id="rightImg" src="{right_urls[0]}">
+    </div>
+  </div>
+</div>
+<div class="controls">
+  <button id="back">◀</button>
+  <button id="toggle" class="primary">⏯️</button>
+  <button id="fwd">▶</button>
+  <button id="reset" title="Reset pan/zoom">⟲</button>
+  <button id="fullscreen" title="Fullscreen (Esc to exit)">⛶</button>
+  <input type="range" id="slider" min="0" max="{total_n - 1}" value="0" step="1">
+  <span id="label" class="label"></span>
+</div>
+<div class="fps-row">
+  <span class="fps-label">FPS:</span>
+  <input type="range" id="fps" min="1" max="60" value="{fps}" step="1">
+  <span id="fpsLabel" class="fps-value">{fps}</span>
+</div>
+<div class="hint">Drag to pan • Scroll to zoom • R=reset • Fullscreen for more space</div>
+<script>
+var framesLeft={frames_left_json};
+var framesRight={frames_right_json};
+var namesLeft={names_left_json};
+var namesRight={names_right_json};
+var loopEnabled={loop_js};
+var playing=false,timer=null,fps={fps},idx=0;
+
+var leftImg=document.getElementById("leftImg");
+var rightImg=document.getElementById("rightImg");
+var leftContainer=document.getElementById("leftContainer");
+var rightContainer=document.getElementById("rightContainer");
+var slider=document.getElementById("slider");
+var label=document.getElementById("label");
+var toggle=document.getElementById("toggle");
+var fpsSlider=document.getElementById("fps");
+var fpsLabelEl=document.getElementById("fpsLabel");
+var resetBtn=document.getElementById("reset");
+var fullscreenBtn=document.getElementById("fullscreen");
+
+// Pan/zoom state per panel
+var panState={{
+  left: {{drag:false,startX:0,startY:0,panX:0,panY:0,scale:1,imgW:0,imgH:0}},
+  right: {{drag:false,startX:0,startY:0,panX:0,panY:0,scale:1,imgW:0,imgH:0}},
+}};
+
+function updateTransform(side){{
+  var s=panState[side];
+  var img=side==="left"?leftImg:rightImg;
+  img.style.transform="translate("+s.panX+"px,"+s.panY+"px) scale("+s.scale+")";
+}}
+
+function resetView(){{
+  ["left","right"].forEach(function(side){{
+    var s=panState[side];
+    s.panX=0;s.panY=0;s.scale=1;
+    updateTransform(side);
+  }});
+}}
+
+function fitToView(side){{
+  var s=panState[side];
+  var img=side==="left"?leftImg:rightImg;
+  var container=side==="left"?leftContainer:rightContainer;
+  var cw=container.clientWidth;
+  var ch=container.clientHeight;
+  if(s.imgW===0||s.imgH===0)return;
+  var scaleX=cw/s.imgW;
+  var scaleY=ch/s.imgH;
+  s.scale=Math.min(scaleX,scaleY,1);
+  s.panX=(cw-s.imgW*s.scale)/2;
+  s.panY=(ch-s.imgH*s.scale)/2;
+  updateTransform(side);
+}}
+
+leftImg.onload=function(){{
+  panState.left.imgW=leftImg.naturalWidth;
+  panState.left.imgH=leftImg.naturalHeight;
+}};
+rightImg.onload=function(){{
+  panState.right.imgW=rightImg.naturalWidth;
+  panState.right.imgH=rightImg.naturalHeight;
+}};
+
+function attachPanZoom(container, side){{
+  container.addEventListener("mousedown",function(e){{
+    if(e.button!==0)return;
+    var s=panState[side];
+    s.drag=true;
+    s.startX=e.clientX-s.panX;
+    s.startY=e.clientY-s.panY;
+    container.classList.add("dragging");
+    e.preventDefault();
+  }});
+
+  document.addEventListener("mousemove",function(e){{
+    var s=panState[side];
+    if(!s.drag)return;
+    s.panX=e.clientX-s.startX;
+    s.panY=e.clientY-s.startY;
+    updateTransform(side);
+  }});
+
+  document.addEventListener("mouseup",function(){{
+    var s=panState[side];
+    s.drag=false;
+    container.classList.remove("dragging");
+  }});
+
+  container.addEventListener("wheel",function(e){{
+    e.preventDefault();
+    var s=panState[side];
+    var delta=e.deltaY>0?0.9:1.1;
+    var newScale=Math.max(0.1,Math.min(10,s.scale*delta));
+    var rect=container.getBoundingClientRect();
+    var mx=e.clientX-rect.left;
+    var my=e.clientY-rect.top;
+    s.panX=mx-(mx-s.panX)*(newScale/s.scale);
+    s.panY=my-(my-s.panY)*(newScale/s.scale);
+    s.scale=newScale;
+    updateTransform(side);
+  }},{{passive:false}});
+}}
+
+attachPanZoom(leftContainer,"left");
+attachPanZoom(rightContainer,"right");
+resetBtn.onclick=resetView;
+
+function toggleFullscreen(){{
+  if(!document.fullscreenElement){{
+    document.documentElement.requestFullscreen();
+  }}else{{
+    document.exitFullscreen();
+  }}
+}}
+fullscreenBtn.onclick=toggleFullscreen;
+
+document.addEventListener("fullscreenchange",function(){{
+  if(document.fullscreenElement){{
+    document.body.classList.add("fullscreen");
+    setTimeout(function(){{fitToView("left");fitToView("right");}},50);
+  }}else{{
+    document.body.classList.remove("fullscreen");
+    resetView();
+  }}
+}});
+
+function show(i){{
+  i=Math.max(0,Math.min({total_n - 1},i|0));
+  idx=i;
+  var li=Math.min(i,framesLeft.length-1);
+  var ri=Math.min(i,framesRight.length-1);
+  leftImg.src=framesLeft[li];
+  rightImg.src=framesRight[ri];
+  slider.value=i;
+  label.textContent="{counter_label_escaped}";
+}}
+
+function step(d){{
+  var i=idx+d;
+  if(i>= {total_n}) i=loopEnabled?0:{total_n - 1};
+  if(i<0) i=loopEnabled?{total_n - 1}:0;
+  show(i);
+}}
+
+function play(){{
+  if(playing)return;
+  playing=true;
+  toggle.textContent="⏸️";
+  timer=setInterval(function(){{step(1);}},1000/Math.max(1,fps));
+}}
+
+function pause(){{
+  if(!playing)return;
+  playing=false;
+  toggle.textContent="⏯️";
+  clearInterval(timer);
+  timer=null;
+}}
+
+slider.oninput=function(e){{show(parseInt(e.target.value));}};
+document.getElementById("back").onclick=function(){{pause();step(-1);}};
+document.getElementById("fwd").onclick=function(){{pause();step(1);}};
+toggle.onclick=function(){{if(playing)pause();else play();}};
+fpsSlider.oninput=function(){{
+  fps=parseInt(fpsSlider.value);
+  fpsLabelEl.textContent=fps;
+  if(playing){{pause();play();}}
+}};
+document.onkeydown=function(e){{
+  if(e.key===" "){{e.preventDefault();if(playing)pause();else play();}}
+  else if(e.key==="ArrowRight")step(1);
+  else if(e.key==="ArrowLeft")step(-1);
+  else if(e.key==="r"||e.key==="R")resetView();
+}};
+show(0);
+</script>
+</body>
+</html>"""
+
+    srcdoc_escaped = html_module.escape(inner_html)
+    return f'<iframe srcdoc="{srcdoc_escaped}" style="width:100%;height:{iframe_height}px;border:none;border-radius:12px;"></iframe>'