wiw-prototype

Sleeping

App Files Files Community

annaaaddddd commited on Aug 27

Commit

59f94b7

verified ·

1 Parent(s): 5bbd901

Upload 2 files for new demo page

Browse files

This demo includes video bevs, better visualization for frames in closed loop setting, etc. Still need to update code for 1) success status, 2) vlm planning response, 3) best plan selection response

Files changed (3) hide show

.gitattributes +1 -0
src/display/bev_video_5ZKStnWn8Zo.mp4 +3 -0
src/display/demo_new.html +660 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 scale-hf-logo.png filter=lfs diff=lfs merge=lfs -text

 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 scale-hf-logo.png filter=lfs diff=lfs merge=lfs -text
+src/display/bev_video_5ZKStnWn8Zo.mp4 filter=lfs diff=lfs merge=lfs -text

src/display/bev_video_5ZKStnWn8Zo.mp4 ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:6dc12af4f4bb161ef094a7ce2c45fb308d7306e5d75fbddf61e6f151490d6ce1
+size 7399610

src/display/demo_new.html ADDED Viewed

	@@ -0,0 +1,660 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>World Model Closed Loop Framework</title>
+    <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: 1400px; margin: 0 auto; padding: 20px; }
+        .header { text-align: center; color: white; margin-bottom: 30px; }
+        .header h1 { font-size: 2.5em; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,.3); }
+        .header p { font-size: 1.2em; opacity: .9; }
+        .demo-container { background: white; border-radius: 20px; padding: 30px; box-shadow: 0 20px 40px rgba(0,0,0,.1); display: flex; flex-direction: column; transition: all .5s ease; margin: 30px; }
+        .demo-container.expanded { min-height: 85vh; }
+        .control-panel { background: #f8f9fa; border-radius: 15px; padding: 20px; margin-bottom: 20px; border-left: 5px solid #4285f4; flex-shrink: 0; }
+        .control-row { display: flex; gap: 20px; align-items: center; margin-bottom: 15px; }
+        .control-row:last-child { margin-bottom: 0; }
+        .control-label { font-weight: bold; min-width: 150px; color: #333; }
+        .control-input { flex: 1; }
+        select, input[type="text"] { width: 100%; padding: 10px; border: 2px solid #ddd; border-radius: 8px; font-size: 14px; transition: border-color .3s; }
+        select:focus, input[type="text"]:focus { outline: none; border-color: #4285f4; }
+        .start-btn { background: linear-gradient(135deg,#4285f4,#34a853); color: white; border: none; padding: 12px 30px; border-radius: 25px; font-size: 16px; font-weight: bold; cursor: pointer; transition: transform .3s, box-shadow .3s; }
+        .start-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(66,133,244,.3); }
+        .scenario-info { padding: 10px; background: #e8f4fd; border-radius: 8px; color: #333; }
+        /* Timeline */
+        .timeline-container { background: #f8f9fa; border-radius: 10px; padding: 15px; margin-bottom: 15px; flex-shrink: 0; display: none; }
+        .timeline-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
+        .timeline-title { font-weight: bold; color: #333; font-size: 1em; }
+        .frame-counter { background: #4285f4; color: white; padding: 3px 12px; border-radius: 15px; font-size: .8em; }
+        .timeline { position: relative; height: 40px; background: #e8eaed; border-radius: 20px; margin-bottom: 10px; overflow: hidden; }
+        .timeline-progress { height: 100%; background: linear-gradient(90deg,#4285f4,#34a853); border-radius: 20px; transition: width .5s ease; position: relative; }
+        .timeline-markers { position: absolute; top: 0; left: 0; right: 0; height: 100%; display: flex; align-items: center; padding: 0 15px; }
+        .frame-marker { width: 24px; height: 24px; border-radius: 50%; background: white; border: 2px solid #e8eaed; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; cursor: pointer; transition: all .3s; position: absolute; color: #666; }
+        .frame-marker:hover { transform: scale(1.1); box-shadow: 0 3px 8px rgba(0,0,0,.2); }
+        .frame-marker.completed { border-color: #34a853; color: #34a853; background: #e8f5e8; }
+        .frame-marker.current { border-color: #4285f4; color: white; background: #4285f4; animation: pulse 2s infinite; }
+        @keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }
+        .navigation-controls { display: flex; justify-content: center; gap: 15px; }
+        .nav-btn { background: #4285f4; color: white; border: none; padding: 10px 20px; border-radius: 20px; cursor: pointer; font-size: 14px; transition: background .3s; }
+        .nav-btn:hover { background: #3367d6; }
+        .nav-btn:disabled { background: #ccc; cursor: not-allowed; }
+        /* Overview */
+        .overview-panel { display: none; gap: 20px; margin-bottom: 20px; flex-shrink: 0; }
+        .birds-eye-section, .results-section { flex: 1; background: white; border: 3px solid #e8eaed; border-radius: 15px; padding: 20px; display: flex; flex-direction: column; }
+        .section-header { background: linear-gradient(135deg,#34a853,#4285f4); color: white; padding: 12px 20px; border-radius: 10px; text-align: center; font-weight: bold; margin-bottom: 15px; }
+        .results-section .section-header { background: linear-gradient(135deg,#ea4335,#fbbc04); }
+        .section-content { flex: 1; background: #f8f9fa; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #666; font-style: italic; height: 180px; border: 2px dashed #ddd; }
+        .results-content { background: #f8f9fa; border-radius: 10px; padding: 15px; height: 180px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; overflow: hidden; }
+        .final-status-display { padding: 8px 20px; border-radius: 20px; font-weight: bold; margin-bottom: 12px; font-size: 1em; flex-shrink: 0; }
+        .final-status-display.success { background: #34a853; color: white; }
+        .final-status-display.failure { background: #ea4335; color: white; }
+        .final-status-display.pending { background: #e8eaed; color: #666; }
+        .results-stats { font-size: .9em; color: #666; line-height: 1.5; }
+        /* Main */
+        .main-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+        .iteration-display { background: white; border: 3px solid #e8eaed; border-radius: 15px; padding: 20px; flex: 1; display: flex; flex-direction: column; transition: all .5s ease; min-height: 400px; }
+        .iteration-display.active { border-color: #4285f4; background: linear-gradient(135deg,rgba(66,133,244,.05),rgba(52,168,83,.05)); }
+        .iteration-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 15px 20px; background: linear-gradient(135deg,#4285f4,#34a853); color: white; border-radius: 10px; flex-shrink: 0; }
+        .iteration-title { font-size: 1.4em; font-weight: bold; }
+        .iteration-status { padding: 5px 15px; border-radius: 20px; background: rgba(255,255,255,.2); font-size: .9em; }
+        /* NEW: Sequential Processing Indicator */
+        .sequence-indicator {
+            text-align: center;
+            margin-bottom: 20px;
+            padding: 15px;
+            background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
+            border-radius: 15px;
+            color: white;
+        }
+        .sequence-title {
+            font-size: 1.2em;
+            font-weight: bold;
+            margin-bottom: 10px;
+        }
+        .sequence-flow {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 15px;
+            flex-wrap: wrap;
+        }
+        .sequence-step {
+            display: flex;
+            align-items: center;
+            background: rgba(255,255,255,0.15);
+            padding: 8px 15px;
+            border-radius: 20px;
+            transition: all 0.3s;
+        }
+        .sequence-step.active {
+            background: rgba(255,255,255,0.3);
+            transform: scale(1.05);
+            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+        }
+        .sequence-number {
+            width: 25px;
+            height: 25px;
+            background: white;
+            color: #333;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            font-size: 14px;
+            margin-right: 8px;
+        }
+        .sequence-arrow {
+            color: white;
+            font-size: 18px;
+            margin: 0 5px;
+        }
+        .step-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; flex: 1; margin-bottom: 20px; }
+        .step-card { background: white; border: 2px solid #e8eaed; border-radius: 12px; padding: 20px; transition: all .3s ease; display: flex; flex-direction: column; position: relative; }
+        .step-card.active { border-color: #4285f4; transform: translateY(-5px); box-shadow: 0 10px 20px rgba(66,133,244,.15); }
+        /* NEW: Processing animation for active step */
+        .step-card.processing::before {
+            content: '';
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            background: linear-gradient(45deg, #4285f4, #34a853, #fbbc04, #ea4335);
+            background-size: 300% 300%;
+            border-radius: 12px;
+            z-index: -1;
+            animation: rainbow-border 2s linear infinite;
+        }
+        @keyframes rainbow-border {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        .step-header { display: flex; align-items: center; margin-bottom: 15px; }
+        .step-number { width: 30px; height: 30px; background: #4285f4; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-right: 10px; position: relative; }
+        /* NEW: Step number pulsing animation */
+        .step-number.active-number {
+            animation: number-pulse 1.5s ease-in-out infinite;
+            background: linear-gradient(45deg, #4285f4, #34a853);
+        }
+        @keyframes number-pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+        }
+        .step-title { font-weight: bold; color: #333; }
+        .step-content { background: #f8f9fa; border-radius: 8px; padding: 12px; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #666; font-style: italic; min-height: 100px; font-size: .9em; text-align: center; }
+        /* Step 4 side column for Best Plan */
+        .step4-wrap { display: grid; grid-template-columns: 0.6fr 0.4fr; gap: 14px; }
+        .step4-card .step-content { align-items: center; justify-content: center; }
+        .plan-list { display: flex; flex-direction: column; gap: 12px; }
+        .plan-card { background: white; border: 2px solid #e8eaed; border-radius: 8px; padding: 15px; cursor: pointer; transition: all .3s; }
+        .plan-card:hover { border-color: #4285f4; }
+        .plan-card.selected { border-color: #34a853; background: rgba(52,168,83,.1); }
+        .plan-title { font-weight: bold; margin-bottom: 8px; color: #333; }
+        .confidence-bar { width: 100%; height: 8px; background: #e8eaed; border-radius: 4px; overflow: hidden; margin-top: 10px; }
+        .confidence-fill { height: 100%; background: linear-gradient(90deg,#ea4335,#fbbc04,#34a853); transition: width .5s ease; }
+        /* Responsive tweak */
+        @media (max-width: 1100px) {
+          .step4-wrap { grid-template-columns: 1fr; }
+          .sequence-flow { flex-direction: column; }
+          .sequence-arrow { transform: rotate(90deg); }
+        }
+    </style>
+</head>
+<body>
+<div class="container">
+  <div class="header">
+    <h1>🤖 World Model Closed Loop Framework</h1>
+    <p>Navigate through iterations and explore the decision-making process</p>
+  </div>
+  <div class="demo-container">
+    <div class="control-panel">
+      <div class="control-row">
+        <div class="control-label">Scenario:</div>
+        <div class="control-input">
+          <select id="scenarioSelect" onchange="loadScenario()">
+            <option value="0">Kitchen Navigation - Find Red Cup</option>
+            <option value="1">Living Room - Approach Blue Chair</option>
+            <option value="2">Office Space - Navigate to Green Door</option>
+            <option value="3">Bedroom - Find Yellow Lamp</option>
+          </select>
+        </div>
+      </div>
+      <div class="control-row">
+        <div class="control-label">Target & Prompt:</div>
+        <div class="control-input">
+          <div id="scenarioInfo" class="scenario-info">🎯 Target: <strong>Red Cup (Kitchen Counter)</strong> | 📝 Prompt: "Navigate safely to the red cup on the kitchen counter"</div>
+        </div>
+      </div>
+      <div class="control-row">
+        <div class="control-label">Start Demo:</div>
+        <div class="control-input">
+          <button class="start-btn" onclick="startDemo()">🚀 Begin Closed Loop Process</button>
+        </div>
+      </div>
+    </div>
+    <div class="overview-panel" id="overviewPanel">
+      <div class="birds-eye-section">
+        <div class="section-header">🗺️ Bird's Eye View</div>
+        <div class="section-content" id="birdEyeContent">
+          <video id="birdEyeVideo" src="demo_bev.mp4" autoplay loop muted style="width:100%;max-height:200px;object-fit:contain;border-radius:8px;" controls>
+            Your browser does not support the video tag.
+          </video>
+        </div>
+      </div>
+      <div class="results-section">
+        <div class="section-header">📊 Final Results & Video</div>
+        <div class="results-content" id="resultsContent">
+          <div style="display:flex;align-items:center;gap:15px;height:100%;width:100%;">
+            <div class="final-status-display pending" id="statusDisplay" style="margin-bottom:0;flex-shrink:0;">Processing...</div>
+            <video id="finalVideo" src="https://huggingface.co/datasets/zonszer/demo_source_data/resolve/main/AR/FTwan21_lora/5ZKStnWn8Zo/E014/A001/world_model_gen/bbox_gen_video_1.mp4" controls style="flex:1;height:120px;border-radius:8px;display:none;"></video>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="timeline-container" id="timelineContainer">
+      <div class="timeline-header">
+        <div class="timeline-title">🎬 Navigation Timeline</div>
+        <div class="frame-counter">Frame <span id="currentFrame">1</span> of <span id="totalFrames">8</span></div>
+      </div>
+      <div class="timeline">
+        <div class="timeline-progress" id="timelineProgress"></div>
+        <div class="timeline-markers" id="timelineMarkers"></div>
+      </div>
+      <div class="navigation-controls">
+        <button class="nav-btn" id="prevBtn" onclick="previousFrame()" disabled>⏮ Previous</button>
+        <button class="nav-btn" id="playBtn" onclick="togglePlayback()">▶️ Play</button>
+        <button class="nav-btn" id="nextBtn" onclick="nextFrame()">Next ⏭</button>
+      </div>
+    </div>
+    <div class="main-content">
+      <div class="iteration-display" id="iterationDisplay">
+        <div class="iteration-header">
+          <div class="iteration-title">Ready to Start</div>
+          <div class="iteration-status">Waiting...</div>
+        </div>
+        <div style="flex:1;display:flex;align-items:center;justify-content:center;color:#666;font-size:1.2em;">👆 Click "Begin Closed Loop Process" to start the demonstration</div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+let currentFrameIndex = 0;
+let totalFramesCount = 8;
+let isPlaying = false;
+let playInterval = null;
+let frames = [];
+let isRunning = false;
+let currentActiveStep = 0; // NEW: Track current processing step (1-4)
+let realActionData = {}; // Store loaded action data
+const scenarios = [
+  { name: "Kitchen Navigation - Find Red Cup", target: "Red Cup (Kitchen Counter)", prompt: "Navigate safely to the red cup on the kitchen counter", frames: 8, environment: "Kitchen" },
+  { name: "Living Room - Approach Blue Chair", target: "Blue Chair (Living Room)", prompt: "Move carefully to the blue armchair avoiding obstacles", frames: 12, environment: "Living Room" },
+  { name: "Office Space - Navigate to Green Door", target: "Green Door (Exit)", prompt: "Navigate to the green emergency exit door", frames: 15, environment: "Office" },
+  { name: "Bedroom - Find Yellow Lamp", target: "Yellow Lamp (Bedside)", prompt: "Approach the yellow bedside lamp without disturbing items", frames: 10, environment: "Bedroom" }
+];
+let currentScenario = scenarios[0];
+// Load real action data from your huggingface dataset
+async function loadActionData() {
+  const baseUrl = "https://huggingface.co/datasets/zonszer/demo_source_data/resolve/main/AR/FTwan21_lora/5ZKStnWn8Zo/E014";
+  const frameIds = ["A000", "A001", "A002", "A003", "A004", "A005", "A006"];
+  realActionData = {};
+  for (let i = 0; i < frameIds.length; i++) {
+    try {
+      const response = await fetch(`${baseUrl}/${frameIds[i]}/action_plan.json`);
+      if (response.ok) {
+        const data = await response.json();
+        realActionData[frameIds[i]] = data;
+        console.log(`Loaded data for ${frameIds[i]}:`, data);
+      } else {
+        console.warn(`Could not load data for ${frameIds[i]}`);
+      }
+    } catch (error) {
+      console.warn(`Error loading ${frameIds[i]}:`, error);
+    }
+  }
+}
+// Convert action plan data to display format
+function convertActionToPlans(actionData) {
+  if (!actionData || !actionData.planner_data || !actionData.planner_data["planner_next-1.json"]) {
+    return samplePlans; // Fallback to sample data
+  }
+  const planActions = actionData.planner_data["planner_next-1.json"];
+  return planActions.map((action, index) => ({
+    title: action.charAt(0).toUpperCase() + action.slice(1).replace(/([0-9.]+)m/, '$1m'),
+    description: action,
+    ranking: index + 1 // 1st, 2nd, 3rd choice based on original ordering
+  }));
+}
+const samplePlans = [
+  { title: "Go Straight", description: "go straight for 0.20m", ranking: 1 },
+  { title: "Turn Right", description: "turn right 22.5 degrees", ranking: 2 },
+  { title: "Turn Left", description: "turn left 22.5 degrees", ranking: 3 }
+];
+function loadScenario(){
+  const select = document.getElementById('scenarioSelect');
+  currentScenario = scenarios[parseInt(select.value)];
+  document.getElementById('scenarioInfo').innerHTML = `🎯 Target: <strong>${currentScenario.target}</strong> | 📝 Prompt: "${currentScenario.prompt}"`;
+  totalFramesCount = currentScenario.frames;
+  if (isRunning){
+    if (isPlaying) togglePlayback();
+    document.getElementById('timelineContainer').style.display = 'none';
+    document.getElementById('overviewPanel').style.display = 'none';
+    document.querySelector('.demo-container').classList.remove('expanded');
+    isRunning = false;
+    currentActiveStep = 0;
+    const display = document.getElementById('iterationDisplay');
+    display.innerHTML = `<div class="iteration-header"><div class="iteration-title">Ready to Start</div><div class="iteration-status">Waiting...</div></div><div style="flex:1;display:flex;align-items:center;justify-content:center;color:#666;font-size:1.2em;">👆 Click "Begin Closed Loop Process" to start the demonstration</div>`;
+    display.classList.remove('active');
+  }
+}
+async function startDemo(){
+  if (isRunning) return;
+  // Load real action data first
+  console.log("Loading action data...");
+  await loadActionData();
+  console.log("Action data loaded:", realActionData);
+  isRunning = true;
+  currentActiveStep = 1;
+  document.querySelector('.demo-container').classList.add('expanded');
+  document.getElementById('overviewPanel').style.display = 'flex';
+  document.getElementById('timelineContainer').style.display = 'block';
+  const frameKeys = ["A000", "A001", "A002", "A003", "A004", "A005", "A006"];
+  frames = Array.from({length: totalFramesCount}, (_, i) => {
+    const frameKey = frameKeys[Math.min(i, frameKeys.length - 1)];
+    const actionData = realActionData[frameKey];
+    return {
+      frameNumber: i + 1,
+      frameKey: frameKey,
+      status: i === 0 ? 'current' : 'pending',
+      observation: `Frame ${i + 1} - ${currentScenario.environment} view`,
+      plans: convertActionToPlans(actionData),
+      selectedPlan: null,
+      completed: false,
+      currentStep: 0,
+      actionData: actionData
+    };
+  });
+  currentFrameIndex = 0;
+  document.getElementById('totalFrames').textContent = totalFramesCount;
+  createTimeline();
+  displayFrame(0);
+  setTimeout(() => { processCurrentFrame(); }, 1000);
+}
+function processCurrentFrame(){
+  const frame = frames[currentFrameIndex];
+  if (frame.completed) return;
+  frame.status = 'current';
+  frame.currentStep = 1;
+  currentActiveStep = 1;
+  displayFrame(currentFrameIndex);
+  // Step 1: Observation (1 second)
+  setTimeout(() => {
+    frame.currentStep = 2;
+    currentActiveStep = 2;
+    displayFrame(currentFrameIndex);
+    // Step 2: VLM Planning (1.5 seconds)
+    setTimeout(() => {
+      frame.currentStep = 3;
+      currentActiveStep = 3;
+      displayFrame(currentFrameIndex);
+      // Step 3: World Model Simulation (1.5 seconds)
+      setTimeout(() => {
+        frame.currentStep = 4;
+        currentActiveStep = 4;
+        displayFrame(currentFrameIndex);
+        // Step 4: Plan Selection (1 second)
+        setTimeout(() => {
+          const bestPlan = frame.plans[0]; // First plan is highest ranked
+          selectPlan(currentFrameIndex, 0);
+          frame.completed = true;
+          frame.status = 'completed';
+          frame.currentStep = 0;
+          currentActiveStep = 0;
+          displayFrame(currentFrameIndex);
+        }, 1000);
+      }, 1500);
+    }, 1500);
+  }, 1000);
+}
+function selectPlan(frameIndex, planIndex){
+  const frame = frames[frameIndex];
+  frame.selectedPlan = frame.plans[planIndex];
+  displayFrame(frameIndex);
+}
+function jumpToFrame(frameIndex){
+  if (isPlaying) togglePlayback();
+  displayFrame(frameIndex);
+  if (frames[frameIndex].status === 'pending' && frameIndex <= currentFrameIndex + 1){
+    currentActiveStep = 1;
+    processCurrentFrame();
+  }
+}
+function previousFrame(){ if (currentFrameIndex > 0) displayFrame(currentFrameIndex - 1); }
+function nextFrame(){ if (currentFrameIndex < totalFramesCount - 1){ const nextIndex = currentFrameIndex + 1; displayFrame(nextIndex); if (frames[nextIndex].status === 'pending'){ currentActiveStep = 1; processCurrentFrame(); } } }
+function togglePlayback(){
+  const playBtn = document.getElementById('playBtn');
+  if (isPlaying){ clearInterval(playInterval); playBtn.textContent = '▶️ Play'; isPlaying = false; }
+  else { playBtn.textContent = '⏸️ Pause'; isPlaying = true; playInterval = setInterval(() => { if (currentFrameIndex < totalFramesCount - 1) nextFrame(); else togglePlayback(); }, 3000); }
+}
+function updateNavigationButtons(){
+  document.getElementById('prevBtn').disabled = currentFrameIndex === 0;
+  document.getElementById('nextBtn').disabled = currentFrameIndex === totalFramesCount - 1;
+}
+function createTimeline(){
+  const markersContainer = document.getElementById('timelineMarkers');
+  markersContainer.innerHTML = '';
+  for (let i = 0; i < totalFramesCount; i++){
+    const marker = document.createElement('div');
+    marker.className = 'frame-marker';
+    marker.textContent = i + 1;
+    marker.style.left = `${(i / (totalFramesCount - 1)) * 100}%`;
+    marker.onclick = () => jumpToFrame(i);
+    if (i === 0) marker.classList.add('current');
+    markersContainer.appendChild(marker);
+  }
+}
+function updateTimeline(){
+  const progress = ((currentFrameIndex + 1) / totalFramesCount) * 100;
+  document.getElementById('timelineProgress').style.width = progress + '%';
+  document.getElementById('currentFrame').textContent = currentFrameIndex + 1;
+  const markers = document.querySelectorAll('.frame-marker');
+  markers.forEach((marker, index) => {
+    marker.className = 'frame-marker';
+    if (index < currentFrameIndex) marker.classList.add('completed');
+    else if (index === currentFrameIndex) marker.classList.add('current');
+  });
+}
+function displayFrame(frameIndex){
+  if (frameIndex < 0 || frameIndex >= totalFramesCount) return;
+  currentFrameIndex = frameIndex;
+  const frame = frames[frameIndex];
+  updateTimeline();
+  updateNavigationButtons();
+  updateResults();
+  const display = document.getElementById('iterationDisplay');
+  // NEW: Create sequence indicator
+  const sequenceIndicatorHTML = `
+    <div class="sequence-indicator">
+      <div class="sequence-title">🔄 Processing Sequence</div>
+      <div class="sequence-flow">
+        <div class="sequence-step ${frame.currentStep === 1 ? 'active' : ''}">
+          <div class="sequence-number">1</div>
+          <span>Observe</span>
+        </div>
+        <div class="sequence-arrow">→</div>
+        <div class="sequence-step ${frame.currentStep === 2 ? 'active' : ''}">
+          <div class="sequence-number">2</div>
+          <span>Plan</span>
+        </div>
+        <div class="sequence-arrow">→</div>
+        <div class="sequence-step ${frame.currentStep === 3 ? 'active' : ''}">
+          <div class="sequence-number">3</div>
+          <span>Simulate</span>
+        </div>
+        <div class="sequence-arrow">→</div>
+        <div class="sequence-step ${frame.currentStep === 4 ? 'active' : ''}">
+          <div class="sequence-number">4</div>
+          <span>Select</span>
+        </div>
+      </div>
+    </div>`;
+  // Build the shared Step 4 + side column HTML
+  const step4WithPlans = `
+    <div class="step4-wrap">
+      <div class="step-card ${(frame.status === 'current' || frame.completed) && frame.currentStep === 4 ? 'active processing' : (frame.status === 'current' || frame.completed) ? 'active' : ''} step4-card">
+        <div class="step-header">
+          <div class="step-number ${frame.currentStep === 4 ? 'active-number' : ''}">4</div>
+          <div class="step-title">Best Plan Selection</div>
+        </div>
+        <div class="step-content">
+          ⭐ ${frame.selectedPlan ? 'Plan Selected' : 'Evaluating options'}<br/>
+          <small>${frame.selectedPlan ? frame.selectedPlan.title : 'Choosing optimal action'}</small>
+        </div>
+      </div>
+      <div class="plan-list">
+        ${frame.plans.map((plan, idx) => `
+          <div class="plan-card ${frame.selectedPlan === plan ? 'selected' : ''}" onclick="selectPlan(${frameIndex}, ${idx})">
+            <div class="plan-title">${plan.title}</div>
+            <div style="font-size:.9em;color:#666;margin-bottom:10px;">${plan.description}</div>
+            <div style="text-align:center;padding:8px;background:#f0f0f0;border-radius:6px;font-weight:bold;color:#333;">
+              ${plan.ranking === 1 ? '🥇 1st Choice' : plan.ranking === 2 ? '🥈 2nd Choice' : '🥉 3rd Choice'}
+            </div>
+          </div>
+        `).join('')}
+      </div>
+    </div>`;
+  if (frameIndex === 0){
+    display.innerHTML = `
+      <div class="iteration-header">
+        <div class="iteration-title">Frame ${frame.frameNumber} - Closed Loop Iteration (${frame.frameKey})</div>
+        <div class="iteration-status">${frame.completed ? 'Completed' : frame.status === 'current' ? 'Processing...' : 'Ready'}</div>
+      </div>
+      ${frame.status === 'current' ? sequenceIndicatorHTML : ''}
+      <div class="step-grid">
+        <div class="step-card ${(frame.status === 'current' || frame.completed) && frame.currentStep === 1 ? 'active processing' : (frame.status === 'current' || frame.completed) ? 'active' : ''}">
+          <div class="step-header">
+            <div class="step-number ${frame.currentStep === 1 ? 'active-number' : ''}">1</div>
+            <div class="step-title">Current Observation</div>
+          </div>
+          <div class="step-content" style="padding:8px;">
+            <img src="https://huggingface.co/datasets/zonszer/demo_source_data/resolve/main/AR/FTwan21_lora/5ZKStnWn8Zo/E014/${frame.frameKey}/real_obs_bbox.png" alt="Current Observation" style="width:100%;max-height:200px;object-fit:contain;border-radius:6px;margin-bottom:8px;"/>
+            <small style="color:#666;">First-Person Camera View with Bounding Boxes</small>
+          </div>
+        </div>
+        <div class="step-card ${(frame.status === 'current' || frame.completed) && frame.currentStep === 2 ? 'active processing' : (frame.status === 'current' || frame.completed) ? 'active' : ''}">
+          <div class="step-header">
+            <div class="step-number ${frame.currentStep === 2 ? 'active-number' : ''}">2</div>
+            <div class="step-title">VLM Planning</div>
+          </div>
+          <div class="step-content">🧠 Generated ${frame.plans.length} plans<br/><small>Target: ${currentScenario.target}</small></div>
+        </div>
+        <div class="step-card ${(frame.status === 'current' || frame.completed) && frame.currentStep === 3 ? 'active processing' : (frame.status === 'current' || frame.completed) ? 'active' : ''}">
+          <div class="step-header">
+            <div class="step-number ${frame.currentStep === 3 ? 'active-number' : ''}">3</div>
+            <div class="step-title">World Model Simulation</div>
+          </div>
+          <div class="step-content" style="padding:8px;">
+            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px;">
+              <div>
+                <video src="https://huggingface.co/datasets/zonszer/demo_source_data/resolve/main/AR/FTwan21_lora/5ZKStnWn8Zo/E014/${frame.frameKey}/world_model_gen/obj_centered_gen_video_1.mp4" controls style="width:100%;height:140px;object-fit:contain;border-radius:4px;"></video>
+                <div style="text-align:center;font-size:0.8em;color:#888;margin-top:4px;">Prediction 1</div>
+              </div>
+              <div>
+                <video src="https://huggingface.co/datasets/zonszer/demo_source_data/resolve/main/AR/FTwan21_lora/5ZKStnWn8Zo/E014/${frame.frameKey}/world_model_gen/obj_centered_gen_video_2.mp4" controls style="width:100%;height:140px;object-fit:contain;border-radius:4px;"></video>
+                <div style="text-align:center;font-size:0.8em;color:#888;margin-top:4px;">Prediction 2</div>
+              </div>
+            </div>
+            <small style="color:#666;">Generated Future Views (Object-Centered)</small>
+          </div>
+        </div>
+        ${step4WithPlans}
+      </div>`;
+  } else {
+    display.innerHTML = `
+      <div class="iteration-header">
+        <div class="iteration-title">Frame ${frame.frameNumber} - Closed Loop Iteration (${frame.frameKey})</div>
+        <div class="iteration-status">${frame.completed ? 'Completed' : frame.status === 'current' ? 'Processing...' : 'Ready'}</div>
+      </div>
+      ${frame.status === 'current' ? sequenceIndicatorHTML : ''}
+      <div class="step-grid">
+        <div class="step-card ${(frame.status === 'current' || frame.completed) && frame.currentStep === 1 ? 'active processing' : (frame.status === 'current' || frame.completed) ? 'active' : ''}">
+          <div class="step-header">
+            <div class="step-number ${frame.currentStep === 1 ? 'active-number' : ''}">1</div>
+            <div class="step-title">Current Observation</div>
+          </div>
+          <div class="step-content" style="padding:8px;">
+            <img src="https://huggingface.co/datasets/zonszer/demo_source_data/resolve/main/AR/FTwan21_lora/5ZKStnWn8Zo/E014/${frame.frameKey}/real_obs_bbox.png" alt="Current Observation" style="width:100%;max-height:200px;object-fit:contain;border-radius:6px;margin-bottom:8px;"/>
+            <small style="color:#666;">First-Person Camera View with Bounding Boxes</small>
+          </div>
+        </div>
+        <div class="step-card ${(frame.status === 'current' || frame.completed) && frame.currentStep === 2 ? 'active processing' : (frame.status === 'current' || frame.completed) ? 'active' : ''}">
+          <div class="step-header">
+            <div class="step-number ${frame.currentStep === 2 ? 'active-number' : ''}">2</div>
+            <div class="step-title">VLM Planning</div>
+          </div>
+          <div class="step-content">🧠 Generated ${frame.plans.length} plans<br/><small>Target: ${currentScenario.target}</small></div>
+        </div>
+        <div class="step-card ${(frame.status === 'current' || frame.completed) && frame.currentStep === 3 ? 'active processing' : (frame.status === 'current' || frame.completed) ? 'active' : ''}">
+          <div class="step-header">
+            <div class="step-number ${frame.currentStep === 3 ? 'active-number' : ''}">3</div>
+            <div class="step-title">World Model Simulation</div>
+          </div>
+          <div class="step-content" style="padding:8px;">
+            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px;">
+              <div>
+                <video src="https://huggingface.co/datasets/zonszer/demo_source_data/resolve/main/AR/FTwan21_lora/5ZKStnWn8Zo/E014/${frame.frameKey}/world_model_gen/obj_centered_gen_video_1.mp4" controls style="width:100%;height:140px;object-fit:contain;border-radius:4px;"></video>
+                <div style="text-align:center;font-size:0.8em;color:#888;margin-top:4px;">Prediction 1</div>
+              </div>
+              <div>
+                <video src="https://huggingface.co/datasets/zonszer/demo_source_data/resolve/main/AR/FTwan21_lora/5ZKStnWn8Zo/E014/${frame.frameKey}/world_model_gen/obj_centered_gen_video_2.mp4" controls style="width:100%;height:140px;object-fit:contain;border-radius:4px;"></video>
+                <div style="text-align:center;font-size:0.8em;color:#888;margin-top:4px;">Prediction 2</div>
+              </div>
+            </div>
+            <small style="color:#666;">Generated Future Views (Object-Centered)</small>
+          </div>
+        </div>
+        ${step4WithPlans}
+      </div>`;
+  }
+  if (frame.status === 'current' || frame.completed) display.classList.add('active');
+  else display.classList.remove('active');
+}
+function updateResults(){
+  const completedFrames = frames.filter(f => f.completed).length;
+  if (completedFrames === totalFramesCount){
+    const success = Math.random() > 0.2;
+    const statusElement = document.getElementById('statusDisplay');
+    const finalVideo = document.getElementById('finalVideo');
+    if (success){
+      statusElement.textContent = 'Mission Success!';
+      statusElement.className = 'final-status-display success';
+    } else {
+      statusElement.textContent = 'Mission Failed';
+      statusElement.className = 'final-status-display failure';
+    }
+    finalVideo.style.display = 'block';
+  } else if (completedFrames > 0){
+    const statusElement = document.getElementById('statusDisplay');
+    statusElement.textContent = 'In Progress...';
+    statusElement.className = 'final-status-display pending';
+    document.getElementById('finalVideo').style.display = 'none';
+  }
+}
+</script>
+</body>
+</html>