wiw-prototype

Sleeping

App Files Files Community

annaaaddddd commited on Sep 13

Commit

caa0df2

verified ·

1 Parent(s): 3c03810

Update interactive demo

Browse files

Waiting on update in dataset but this layout should be finalized.

Files changed (1) hide show

src/display/demo_new.html +232 -128

src/display/demo_new.html CHANGED Viewed

@@ -7,11 +7,17 @@
 <style>
   *{margin:0;padding:0;box-sizing:border-box}
   body{
-    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
-    background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
     min-height:100vh; overflow-x:hidden;
   }
-  .container{max-width:1200px;margin:0 auto;padding:20px}
   .header{
     text-align:center;color:#fff;margin-bottom:18px;padding:22px;
@@ -31,7 +37,7 @@
   }
   .thumb-card:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(66,133,244,.12);border-color:#82a9ff}
   .thumb-card.selected{border-color:#34a853;background:linear-gradient(135deg,#f6fff6 0%,#eaf7ea 100%)}
-  .thumb-img{width:100%;height:140px;border-radius:6px;object-fit:contain;background:#eef2f7;display:block}
   .thumb-caption{margin-top:8px;font-size:.95em;color:#37474f;font-weight:600}
   .thumb-small{font-size:.82em;color:#78909c}
@@ -41,10 +47,21 @@
     background:linear-gradient(135deg,#fff3e0 0%,#ffe0b2 100%);color:#7b4a00;font-size:.95em
   }
   .start-btn{
-    background:linear-gradient(135deg,#4285f4,#34a853);color:#fff;border:none;border-radius:24px;
-    padding:12px 22px;font-weight:800;cursor:pointer;box-shadow:0 6px 18px rgba(66,133,244,.3);min-width:180px
   }
-  .start-btn:disabled{background:#c9cdd7;box-shadow:none;cursor:not-allowed}
   .demo-shell{
     display:none;margin-top:18px;background:#fff;border-radius:14px;padding:16px;
@@ -72,9 +89,9 @@
   .iteration-display{background:#fff;border:2px solid #e8eaed;border-radius:12px;padding:14px}
   .iteration-header{
     display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#4285f4,#34a853);
-    color:#fff;border-radius:10px;padding:12px;margin-bottom:12px
   }
-  .nav-btn{background:#4285f4;color:#fff;border:none;border-radius:12px;padding:6px 10px;margin-left:6px;cursor:pointer}
   .sequence-indicator{text-align:center;margin-bottom:12px;padding:8px;background:linear-gradient(135deg,#ff6b6b,#4ecdc4);border-radius:10px;color:#fff}
   .sequence-flow{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
@@ -103,7 +120,6 @@
   .topline{color:#3b3f47;font-size:.9em}
-  /* 绿色提示框整体居中 */
   .step-card{ text-align:center }
   .success-explain{
     display:inline-block;margin:12px auto;padding:12px 16px;
@@ -120,10 +136,10 @@
 </head>
 <body>
 <div class="container">
-  <div class="header">
     <h1>🤖 World Model Closed Loop Framework</h1>
     <p>Select by first-frame observation, review the description, then start.</p>
-  </div>
   <!-- ========= Selection area ========= -->
   <div class="selector-shell" id="selectorShell">
@@ -193,21 +209,13 @@ const scenarios = [
     frames:2, environment:"Living Room",
     base:"https://huggingface.co/datasets/zonszer/demo_source_data/resolve/main/AR/FTwan21_lora/X7HyMhZNoso/E145",
     previewImg:"https://huggingface.co/datasets/zonszer/demo_source_data/resolve/main/AR/FTwan21_lora/X7HyMhZNoso/E145/A000/real_obs_bbox.png"
-  },
-  // { id:"office", name:"Office Navigation", target:"Green Door (Exit)", prompt:"Navigate to the green emergency exit door", frames:15, environment:"Office",
-  //   base:"https://huggingface.co/datasets/zonszer/demo_source_data/resolve/main/AR/FTwan21_lora/5ZKStnWn8Zo/E014",
-  //   previewImg:"https://huggingface.co/datasets/zonszer/demo_source_data/resolve/main/AR/FTwan21_lora/5ZKStnWn8Zo/E014/A000/real_obs_bbox.png"
-  // },
-  // { id:"bedroom", name:"Bedroom Navigation", target:"Yellow Lamp (Bedside)", prompt:"Approach the yellow bedside lamp without disturbing items", frames:10, environment:"Bedroom",
-  //   base:"https://huggingface.co/datasets/zonszer/demo_source_data/resolve/main/AR/FTwan21_lora/5ZKStnWn8Zo/E014",
-  //   previewImg:"https://huggingface.co/datasets/zonszer/demo_source_data/resolve/main/AR/FTwan21_lora/5ZKStnWn8Zo/E014/A000/real_obs_bbox.png"
-  // }
 ];
 let selectedIdx=-1,currentScenario=null;
 let frames=[],currentFrameIndex=0,isRunning=false,missionEnded=false,isPlaying=false,playInterval=null;
 let realActionData={};
-let availableKeys=[];                 // ★ 当前场景可用的 A00x 列表
 const PLACEHOLDER_CONF={1:50,2:30,3:20};
 /* render selection */
@@ -215,11 +223,11 @@ function renderThumbs(){
   const grid=document.getElementById('thumbGrid');
   grid.innerHTML=scenarios.map((s,idx)=>`
     <div class="thumb-card ${idx===selectedIdx?'selected':''}" data-idx="${idx}">
-      <img class="thumb-img" src="${s.previewImg}"
-           onerror="this.src=''; this.style.background='#eef2f7'; this.closest('.thumb-card').querySelector('.thumb-small').textContent='(preview unavailable)';" />
       <div class="thumb-caption">${s.name}</div>
       <div class="thumb-small">Target: ${s.target}</div>
     </div>`).join('');
 }
 function applySelection(idx){
   selectedIdx=idx; currentScenario=scenarios[idx];
@@ -235,7 +243,6 @@ document.addEventListener('click',e=>{
 /* data helpers */
 async function loadActionData(){
-  // ★ 根据 frames 动态生成 A001..An
   availableKeys = Array.from({length: currentScenario.frames},
     (_,i)=>`A${String(i+1).padStart(3,'0')}`);
@@ -296,23 +303,19 @@ function pct(x){return (Math.round(x*1000)/10).toFixed(1)+'%';}
 async function startDemo(){
   if (selectedIdx < 0) return;
-  // 让 Demo 区一直可见，不回到仅选择页
   document.getElementById('demoShell').classList.add('visible');
-  // 热切场景：清理上一轮状态（需配合你已有的 resetForNewScenario()）
   resetForNewScenario();
-  // 更新当前场景信息
   document.getElementById('currentScenarioBox').innerHTML =
     `<div style="font-weight:600;margin-bottom:4px">${currentScenario.name}</div>
      <div>🎯 <b>${currentScenario.target}</b></div>
      <div>📝 "${currentScenario.prompt}"</div>`;
   document.getElementById('bevHeaderTitle').textContent = "🗺️ Bird's Eye View";
-  // 加载动作/计划数据（会生成 availableKeys: A001..An）
   await loadActionData();
-  // 构建帧数据
   frames = availableKeys.map((k, i) => {
     const d = realActionData[k];
     return {
@@ -330,7 +333,6 @@ async function startDemo(){
   currentFrameIndex = 0;
   isRunning = true;
-  // Final Video：取最后一帧，存在才显示
   const finalVid = document.getElementById('finalVideo');
   const lastKey = availableKeys[availableKeys.length - 1] || 'A001';
   const finalUrl = `${currentScenario.base}/${lastKey}/world_model_gen/gen_video.mp4`;
@@ -339,119 +341,161 @@ async function startDemo(){
     else { finalVid.removeAttribute('src'); finalVid.style.display = 'none'; }
   });
-  // 渲染首帧并开始流程
   displayFrame(0);
   setTimeout(processCurrentFrame, 900);
-  // 自动滚动到 overview 顶部对齐
   document.querySelector('.overview-panel')
           .scrollIntoView({ behavior: 'smooth', block: 'start' });
 }
 /* iteration flow */
 function processCurrentFrame(){
-  const f=frames[currentFrameIndex]; if(!f||f.completed||missionEnded) return;
-  f.status='current'; f.currentStep=1; displayFrame(currentFrameIndex);
-  setTimeout(()=>{ f.currentStep=2; displayFrame(currentFrameIndex);
-    setTimeout(()=>{ f.currentStep=3; displayFrame(currentFrameIndex);
       setTimeout(()=>{
         const {score}=getTopAnswerer(f.actionData);
         if(score>=0.95){
           document.getElementById('finalVideo').style.display='block';
           missionEnded=true;
           if(isPlaying) togglePlayback();
-        }else if(f.actions3?.length){ f.selectedAction=f.actions3[0]; }
-        f.completed=true; f.status='completed'; f.currentStep=0; displayFrame(currentFrameIndex);
       },800);
     },1100);
   },700);
 }
-function displayFrame(i){
   if(i<0||i>=frames.length) return;
   currentFrameIndex=i; const f=frames[i];
   const {label,score}=getTopAnswerer(f.actionData); const high=score>=0.95;
-  const seq=`
-    <div class="sequence-indicator">
-      <div><b>🔄 Processing Sequence</b></div>
-      <div class="sequence-flow">
-        <div class="sequence-step ${f.currentStep===1?'active':''}"><span class="flow-num">1</span>Observe</div>
-        <div class="sequence-step ${f.currentStep===2?'active':''}"><span class="flow-num">2</span>Plan & Simulate</div>
-        <div class="sequence-step ${f.currentStep===3?'active':''}"><span class="flow-num">3</span>Select</div>
-      </div>
-    </div>`;
-  const obs=`
-    <div class="step-card ${f.currentStep===1?'active':''}">
-      <div class="step-h"><span class="step-num">1</span><span class="step-title">Current Observation</span></div>
-      <div class="obs-box">
-        <img src="${currentScenario.base}/${f.frameKey}/real_obs_bbox.png"
-             class="obs-img" alt="Current Observation"
-             onerror="this.replaceWith(Object.assign(document.createElement('div'),{innerText:'Image unavailable',style:'color:#999;padding:10px'}))">
-      </div>
-    </div>`;
-  const planBox=p=>`
-    <div class="plan-box">
-      <div style="font-weight:700;font-size:.8em;margin-bottom:4px">${p?.title||'Plan'}</div>
-      <ul style="padding-left:18px">${(p?.steps||[]).slice(0,4).map(s=>`<li>${s}</li>`).join('')||'<li>—</li>'}</ul>
-    </div>`;
-  const sim=`
-    <div class="step-card ${f.currentStep===2?'active':''}">
-      <div class="step-h"><span class="step-num">2</span><span class="step-title">Planning & World Model Simulation</span></div>
-      <div class="plan-pairs">${planBox(f.plans[0])}${planBox(f.plans[1])}</div>
-      <div class="sim-grid">
-        <div><video id="pred1_${f.frameKey}" autoplay loop muted></video></div>
-        <div><video id="pred2_${f.frameKey}" autoplay loop muted></video></div>
-      </div>
-    </div>`;
-  const actionCard=(a,idx)=>{
-    const p=a?.conf ?? (idx===0?50:idx===1?30:20);
-    const selected=f.selectedAction===a?'style="border:2px solid #34a853;background:rgba(52,168,83,.08);border-radius:8px;padding:8px"':'style="border:2px solid #e8eaed;border-radius:8px;padding:8px"';
-    const click=high?'':`onclick="frames[${i}].selectedAction = frames[${i}].actions3[${idx}] || null; displayFrame(${i});"`;
-    return `<div ${selected} ${click}>
-      <div style="font-weight:700">${['🥇','🥈','🥉'][idx]||''} ${a?.title||''}</div>
-      <div class="conf-bar"><div class="conf-fill" style="width:${p}%"></div></div>
-      <div style="display:flex;justify-content:space-between;font-size:.8em;color:#666;margin-top:4px">
-        <span>${idx===0?'Top choice':''}</span><span>${p}%</span>
-      </div>
-    </div>`;
-  };
-  const decide=high
-    ? `<div class="success-explain">High confidence (≥95%) on <b>${label}</b> → stop selecting actions and declare success.</div>`
-    : `<div style="padding:8px;border-radius:6px;background:#fff3cd;border:1px solid #ffe08a;font-size:.9em">Confidence is <b>${pct(score)}</b> &lt; 95% → choose the highest-ranked action.</div>`;
-  const action=`
-    <div class="step-card ${f.currentStep===3?'active':''}">
-      <div class="step-h"><span class="step-num">3</span><span class="step-title">Action Selection & Confidence</span></div>
-      <div class="topline"><b>Top object:</b> ${label} &nbsp; <b>Confidence:</b> ${pct(score)}</div>
-      ${decide}
-      ${high ? '' : `<div style="display:grid;gap:8px;margin-top:8px">${actionCard(f.actions3?.[0],0)}${actionCard(f.actions3?.[1],1)}${actionCard(f.actions3?.[2],2)}</div>`}
-    </div>`;
-  document.getElementById('iterationDisplay').innerHTML=`
-    <div class="iteration-header">
-      <div><b>Frame ${f.frameNumber}</b> — Closed Loop Iteration</div>
-      <div>
-        <button class="nav-btn" id="prevBtn" ${currentFrameIndex===0?'disabled':''} onclick="previousFrame()">◀ Previous</button>
-        <button class="nav-btn" id="nextBtn" ${currentFrameIndex>=frames.length-1?'disabled':''} onclick="nextFrame()">Next ▶</button>
       </div>
-    </div>
-    ${f.status==='current'?seq:''}
-    <div class="step-grid">${obs}${sim}${action}</div>`; //<button class="nav-btn" id="playBtn" onclick="togglePlayback()">▶️ Play</button>
-  // 加载两个预测视频（存在才显示）
-  (async()=>{
-    try{
-      const urls=await findUpToTwoVideos(f.frameKey);
-      setVideoSrcOrPlaceholder(document.getElementById(`pred1_${f.frameKey}`), urls[0]||null);
-      setVideoSrcOrPlaceholder(document.getElementById(`pred2_${f.frameKey}`), urls[1]||null);
-    }catch(e){ console.warn('video init failed',e); }
-  })();
 }
 /* videos helper */
@@ -510,7 +554,6 @@ function togglePlayback(){
   },2600);
 }
-// 事件委托，避免重渲染后失效
 document.addEventListener('click', (e)=>{
   const id = e.target.closest('button')?.id;
   if (id === 'prevBtn'){ e.preventDefault(); previousFrame(); }
@@ -518,39 +561,100 @@ document.addEventListener('click', (e)=>{
   if (id === 'playBtn'){ e.preventDefault(); togglePlayback(); }
 });
-// 暴露给内联 onclick
 window.previousFrame = previousFrame;
 window.nextFrame = nextFrame;
 window.togglePlayback = togglePlayback;
 /* boot */
-(function init(){ renderThumbs(); })();
 function resetForNewScenario(){
-  // 停止播放计时器
   if (isPlaying) { clearInterval(playInterval); isPlaying=false; }
   playInterval = null;
-  // 清理运行态
   isRunning = false;
   missionEnded = false;
-  // 清空帧与索引
   frames = [];
   currentFrameIndex = 0;
-  // 预测视频探测缓存要清空（不同场景也有 A001 等同名）
   __videoProbeCache.clear();
-  // 隐藏/清空预测视频占位（避免上一场景的视频残留）
   const preds = document.querySelectorAll('video[id^="pred1_"], video[id^="pred2_"]');
   preds.forEach(v => { v.removeAttribute('src'); v.hidden = true; });
-  // Final Video 先隐藏，稍后按新场景探测再显示
   const finalVid = document.getElementById('finalVideo');
   finalVid.removeAttribute('src');
   finalVid.style.display = 'none';
 }
 </script>
 </body>

 <style>
   *{margin:0;padding:0;box-sizing:border-box}
   body{
+    font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+    bbackground: transparent;
+    /* background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); */
     min-height:100vh; overflow-x:hidden;
   }
+  .container{
+    max-width: 95vw;
+    margin: 0 auto;
+    padding: 10px;
+    width: 100%;
+  }
   .header{
     text-align:center;color:#fff;margin-bottom:18px;padding:22px;
   }
   .thumb-card:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(66,133,244,.12);border-color:#82a9ff}
   .thumb-card.selected{border-color:#34a853;background:linear-gradient(135deg,#f6fff6 0%,#eaf7ea 100%)}
+  .thumb-img{width:100%;height:140px;border-radius:6px;object-fit:contain;background:#eef2f7;display:block; max-height: 210px}
   .thumb-caption{margin-top:8px;font-size:.95em;color:#37474f;font-weight:600}
   .thumb-small{font-size:.82em;color:#78909c}
     background:linear-gradient(135deg,#fff3e0 0%,#ffe0b2 100%);color:#7b4a00;font-size:.95em
   }
   .start-btn{
+    background:linear-gradient(135deg,#4285f4,#34a853) !important;
+    color:#fff !important;
+    border:none !important;
+    border-radius:24px !important;
+    padding:12px 22px !important;
+    font-weight:800 !important;
+    cursor:pointer !important;
+    box-shadow:0 6px 18px rgba(66,133,244,.3) !important;
+    min-width:180px !important;
+  }
+  .start-btn:disabled{
+      background:#c9cdd7 !important;
+      box-shadow:none !important;
+      cursor:not-allowed !important;
   }
   .demo-shell{
     display:none;margin-top:18px;background:#fff;border-radius:14px;padding:16px;
   .iteration-display{background:#fff;border:2px solid #e8eaed;border-radius:12px;padding:14px}
   .iteration-header{
     display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#4285f4,#34a853);
+    color:#fff !important;border-radius:10px;padding:12px;margin-bottom:12px
   }
+  .nav-btn{background:#4285f4;color:#fff !important;border:none;border-radius:12px;padding:6px 10px;margin-left:6px;cursor:pointer}
   .sequence-indicator{text-align:center;margin-bottom:12px;padding:8px;background:linear-gradient(135deg,#ff6b6b,#4ecdc4);border-radius:10px;color:#fff}
   .sequence-flow{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
   .topline{color:#3b3f47;font-size:.9em}
   .step-card{ text-align:center }
   .success-explain{
     display:inline-block;margin:12px auto;padding:12px 16px;
 </head>
 <body>
 <div class="container">
+  <!-- <div class="header">
     <h1>🤖 World Model Closed Loop Framework</h1>
     <p>Select by first-frame observation, review the description, then start.</p>
+  </div> -->
   <!-- ========= Selection area ========= -->
   <div class="selector-shell" id="selectorShell">
     frames:2, environment:"Living Room",
     base:"https://huggingface.co/datasets/zonszer/demo_source_data/resolve/main/AR/FTwan21_lora/X7HyMhZNoso/E145",
     previewImg:"https://huggingface.co/datasets/zonszer/demo_source_data/resolve/main/AR/FTwan21_lora/X7HyMhZNoso/E145/A000/real_obs_bbox.png"
+  }
 ];
 let selectedIdx=-1,currentScenario=null;
 let frames=[],currentFrameIndex=0,isRunning=false,missionEnded=false,isPlaying=false,playInterval=null;
 let realActionData={};
+let availableKeys=[];
 const PLACEHOLDER_CONF={1:50,2:30,3:20};
 /* render selection */
   const grid=document.getElementById('thumbGrid');
   grid.innerHTML=scenarios.map((s,idx)=>`
     <div class="thumb-card ${idx===selectedIdx?'selected':''}" data-idx="${idx}">
+      <img class="thumb-img" src="" data-img-src="${s.previewImg}" />
       <div class="thumb-caption">${s.name}</div>
       <div class="thumb-small">Target: ${s.target}</div>
     </div>`).join('');
+  fetchAndReplaceThumbImages();
 }
 function applySelection(idx){
   selectedIdx=idx; currentScenario=scenarios[idx];
 /* data helpers */
 async function loadActionData(){
   availableKeys = Array.from({length: currentScenario.frames},
     (_,i)=>`A${String(i+1).padStart(3,'0')}`);
 async function startDemo(){
   if (selectedIdx < 0) return;
+  // demo is always visible
   document.getElementById('demoShell').classList.add('visible');
   resetForNewScenario();
+  // Update current scenario's info
   document.getElementById('currentScenarioBox').innerHTML =
     `<div style="font-weight:600;margin-bottom:4px">${currentScenario.name}</div>
      <div>🎯 <b>${currentScenario.target}</b></div>
      <div>📝 "${currentScenario.prompt}"</div>`;
   document.getElementById('bevHeaderTitle').textContent = "🗺️ Bird's Eye View";
   await loadActionData();
   frames = availableKeys.map((k, i) => {
     const d = realActionData[k];
     return {
   currentFrameIndex = 0;
   isRunning = true;
   const finalVid = document.getElementById('finalVideo');
   const lastKey = availableKeys[availableKeys.length - 1] || 'A001';
   const finalUrl = `${currentScenario.base}/${lastKey}/world_model_gen/gen_video.mp4`;
     else { finalVid.removeAttribute('src'); finalVid.style.display = 'none'; }
   });
   displayFrame(0);
   setTimeout(processCurrentFrame, 900);
   document.querySelector('.overview-panel')
           .scrollIntoView({ behavior: 'smooth', block: 'start' });
 }
 /* iteration flow */
 function processCurrentFrame(){
+  const f=frames[currentFrameIndex];
+  if(!f||f.completed||missionEnded) return;
+  // 第1步：设置状态并显示（包含视频初始化）
+  f.status='current';
+  f.currentStep=1;
+  displayFrame(currentFrameIndex); // 第一次调用，会加载视频
+  setTimeout(()=>{
+    // 第2步：更新步骤状态（跳过视频初始化）
+    f.currentStep=2;
+    displayFrame(currentFrameIndex, true); // skipVideoInit=true
+    setTimeout(()=>{
+      // 第3步：更新步骤状态（跳过视频初始化）
+      f.currentStep=3;
+      displayFrame(currentFrameIndex, true); // skipVideoInit=true
       setTimeout(()=>{
+        // 完成步骤：检查分数并决定是否结束
         const {score}=getTopAnswerer(f.actionData);
         if(score>=0.95){
           document.getElementById('finalVideo').style.display='block';
           missionEnded=true;
           if(isPlaying) togglePlayback();
+        }else if(f.actions3?.length){
+          f.selectedAction=f.actions3[0];
+        }
+        // 标记完成并最后一次更新显示（跳过视频初始化）
+        f.completed=true;
+        f.status='completed';
+        f.currentStep=0;
+        displayFrame(currentFrameIndex, true); // skipVideoInit=true
       },800);
     },1100);
   },700);
 }
+function displayFrame(i, skipVideoInit = false){
   if(i<0||i>=frames.length) return;
   currentFrameIndex=i; const f=frames[i];
   const {label,score}=getTopAnswerer(f.actionData); const high=score>=0.95;
+  if (!skipVideoInit) {
+    // 第一次调用：生成完整HTML并加载视频
+    const seq=`
+      <div class="sequence-indicator">
+        <div><b>🔄 Processing Sequence</b></div>
+        <div class="sequence-flow">
+          <div class="sequence-step ${f.currentStep===1?'active':''}"><span class="flow-num">1</span>Observe</div>
+          <div class="sequence-step ${f.currentStep===2?'active':''}"><span class="flow-num">2</span>Plan & Simulate</div>
+          <div class="sequence-step ${f.currentStep===3?'active':''}"><span class="flow-num">3</span>Select</div>
+        </div>
+      </div>`;
+    const obs=`
+      <div class="step-card ${f.currentStep===1?'active':''}">
+        <div class="step-h"><span class="step-num">1</span><span class="step-title">Current Observation</span></div>
+        <div class="obs-box">
+          <img src="${currentScenario.base}/${f.frameKey}/real_obs_bbox.png"
+               class="obs-img" alt="Current Observation"
+               onerror="this.replaceWith(Object.assign(document.createElement('div'),{innerText:'Image unavailable',style:'color:#999;padding:10px'}))">
+        </div>
+      </div>`;
+    const planBox=p=>`
+      <div class="plan-box">
+        <div style="font-weight:700;font-size:.8em;margin-bottom:4px">${p?.title||'Plan'}</div>
+        <ul style="padding-left:18px">${(p?.steps||[]).slice(0,4).map(s=>`<li>${s}</li>`).join('')||'<li>—</li>'}</ul>
+      </div>`;
+    const sim=`
+      <div class="step-card ${f.currentStep===2?'active':''}">
+        <div class="step-h"><span class="step-num">2</span><span class="step-title">Planning & World Model Simulation</span></div>
+        <div class="plan-pairs">${planBox(f.plans[0])}${planBox(f.plans[1])}</div>
+        <div class="sim-grid">
+          <div><video id="pred1_${f.frameKey}" autoplay loop muted></video></div>
+          <div><video id="pred2_${f.frameKey}" autoplay loop muted></video></div>
+        </div>
+      </div>`;
+    const actionCard=(a,idx)=>{
+      const p=a?.conf ?? (idx===0?50:idx===1?30:20);
+      const selected=f.selectedAction===a?'style="border:2px solid #34a853;background:rgba(52,168,83,.08);border-radius:8px;padding:8px"':'style="border:2px solid #e8eaed;border-radius:8px;padding:8px"';
+      const click=high?'':`onclick="frames[${i}].selectedAction = frames[${i}].actions3[${idx}] || null; displayFrame(${i});"`;
+      return `<div ${selected} ${click}>
+        <div style="font-weight:700">${['🥇','🥈','🥉'][idx]||''} ${a?.title||''}</div>
+        <div class="conf-bar"><div class="conf-fill" style="width:${p}%"></div></div>
+        <div style="display:flex;justify-content:space-between;font-size:.8em;color:#666;margin-top:4px">
+          <span>${idx===0?'Top choice':''}</span><span>${p}%</span>
+        </div>
+      </div>`;
+    };
+    const decide=high
+      ? `<div class="success-explain">High confidence (≥95%) on <b>${label}</b> → stop selecting actions and declare success.</div>`
+      : `<div style="padding:8px;border-radius:6px;background:#fff3cd;border:1px solid #ffe08a;font-size:.9em">Confidence is <b>${pct(score)}</b> &lt; 95% → choose the highest-ranked action.</div>`;
+    const action=`
+      <div class="step-card ${f.currentStep===3?'active':''}">
+        <div class="step-h"><span class="step-num">3</span><span class="step-title">Action Selection & Confidence</span></div>
+        <div class="topline"><b>Top object:</b> ${label} &nbsp; <b>Confidence:</b> ${pct(score)}</div>
+        ${decide}
+        ${high ? '' : `<div style="display:grid;gap:8px;margin-top:8px">${actionCard(f.actions3?.[0],0)}${actionCard(f.actions3?.[1],1)}${actionCard(f.actions3?.[2],2)}</div>`}
+      </div>`;
+    document.getElementById('iterationDisplay').innerHTML=`
+      <div class="iteration-header">
+        <div><b>Frame ${f.frameNumber}</b> — Closed Loop Iteration</div>
+        <div>
+          <button class="nav-btn" id="prevBtn" ${currentFrameIndex===0?'disabled':''} onclick="previousFrame()">◀ Previous</button>
+          <button class="nav-btn" id="nextBtn" ${currentFrameIndex>=frames.length-1?'disabled':''} onclick="nextFrame()">Next ▶</button>
+        </div>
       </div>
+      ${f.status==='current'?seq:''}
+      <div class="step-grid">${obs}${sim}${action}</div>`;
+    // 加载视频
+    (async()=>{
+      try{
+        const urls=await findUpToTwoVideos(f.frameKey);
+        setVideoSrcOrPlaceholder(document.getElementById(`pred1_${f.frameKey}`), urls[0]||null);
+        setVideoSrcOrPlaceholder(document.getElementById(`pred2_${f.frameKey}`), urls[1]||null);
+      }catch(e){ console.warn('video init failed',e); }
+    })();
+  } else {
+    // 后续调用：只更新step状态，保持视频不变
+    // 1. 更新sequence steps
+    const sequenceSteps = document.querySelectorAll('.sequence-step');
+    sequenceSteps.forEach((step, idx) => {
+      step.classList.toggle('active', idx + 1 === f.currentStep);
+    });
+    // 2. 更新step cards
+    const stepCards = document.querySelectorAll('.step-card');
+    stepCards.forEach((card, idx) => {
+      card.classList.toggle('active', idx + 1 === f.currentStep);
+    });
+    // 3. 显示/隐藏sequence indicator
+    const sequenceIndicator = document.querySelector('.sequence-indicator');
+    if (sequenceIndicator) {
+      sequenceIndicator.style.display = f.status === 'current' ? 'block' : 'none';
+    }
+  }
 }
 /* videos helper */
   },2600);
 }
 document.addEventListener('click', (e)=>{
   const id = e.target.closest('button')?.id;
   if (id === 'prevBtn'){ e.preventDefault(); previousFrame(); }
   if (id === 'playBtn'){ e.preventDefault(); togglePlayback(); }
 });
 window.previousFrame = previousFrame;
 window.nextFrame = nextFrame;
 window.togglePlayback = togglePlayback;
 /* boot */
+// (function init(){ renderThumbs(); })();
 function resetForNewScenario(){
+  // Cleaning cache and reset fo new scenario
   if (isPlaying) { clearInterval(playInterval); isPlaying=false; }
   playInterval = null;
   isRunning = false;
   missionEnded = false;
   frames = [];
   currentFrameIndex = 0;
   __videoProbeCache.clear();
   const preds = document.querySelectorAll('video[id^="pred1_"], video[id^="pred2_"]');
   preds.forEach(v => { v.removeAttribute('src'); v.hidden = true; });
   const finalVid = document.getElementById('finalVideo');
   finalVid.removeAttribute('src');
   finalVid.style.display = 'none';
 }
+  async function fetchImageAsBlobURL(url) {
+  try {
+    const res = await fetch(url, { mode: 'cors' });
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const blob = await res.blob();
+    return URL.createObjectURL(blob);
+  } catch (err) {
+    console.warn('Image blob fetch failed:', url, err);
+    return null;
+  }
+}
+async function fetchAndReplaceThumbImages() {
+  const cards = document.querySelectorAll('.thumb-card');
+  for (const card of cards) {
+    const imgEl = card.querySelector('img.thumb-img');
+    const dataIdx = card.dataset.idx;
+    const scenario = scenarios[dataIdx];
+    const blobUrl = await fetchImageAsBlobURL(scenario.previewImg);
+    if (blobUrl) {
+      imgEl.src = blobUrl;
+    } else {
+      imgEl.replaceWith(Object.assign(document.createElement('div'), {
+        innerText: 'Image unavailable',
+        style: 'color:#999;padding:10px;text-align:center;font-size:.8em;background:#eef2f7;border-radius:6px;height:140px;display:flex;align-items:center;justify-content:center'
+      }));
+    }
+  }
+}
+function waitForElement(selector, callback, timeout = 5000) {
+  const start = Date.now();
+  const check = () => {
+    const el = document.querySelector(selector);
+    if (el) {
+      callback(el);
+    } else if (Date.now() - start < timeout) {
+      requestAnimationFrame(check);
+    } else {
+      console.warn(`Element ${selector} not found after timeout`);
+    }
+  };
+  check();
+}
+// Multiple initialization strategies to handle the initialization of thumbnail images
+function initApp() {
+  const thumbGrid = document.getElementById('thumbGrid');
+  if (thumbGrid && thumbGrid.children.length === 0) {
+    console.log('Initializing thumbnails...');
+    renderThumbs();
+  }
+}
+// Try multiple times with different triggers
+document.addEventListener('DOMContentLoaded', initApp);
+window.addEventListener('load', initApp);
+setTimeout(initApp, 500);
+setTimeout(initApp, 1500);
+setTimeout(initApp, 3000);
+// Also keep your existing code as fallback
+waitForElement('#thumbGrid', () => {
+  renderThumbs();
+  fetchAndReplaceThumbImages();
+});
 </script>
 </body>