Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="description" content="Real-Time Chunking (RTC) Experiments - Flow Matching Steps and Sigma_d Parameter Analysis"> | |
| <meta name="keywords" content="RTC, Real-Time Chunking, LeRobot, PI0.5, SmolVLA"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>RTC Experiments: Flow Matching Steps & Sigma Analysis</title> | |
| <link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro" rel="stylesheet"> | |
| <link rel="stylesheet" href="./static/css/bulma.min.css"> | |
| <link rel="stylesheet" href="./static/css/fontawesome.all.min.css"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css"> | |
| <link rel="stylesheet" href="./static/css/index.css"> | |
| <link rel="icon" href="./static/images/favicon.svg"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> | |
| <script defer src="./static/js/fontawesome.all.min.js"></script> | |
| <style> | |
| .experiment-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| margin-top: 20px; | |
| } | |
| .experiment-card { | |
| border: 1px solid #ddd; | |
| border-radius: 8px; | |
| padding: 15px; | |
| background: white; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| transition: transform 0.2s; | |
| } | |
| .experiment-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.2); | |
| } | |
| .experiment-card h3 { | |
| margin-bottom: 10px; | |
| color: #363636; | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| } | |
| .experiment-card img { | |
| width: 100%; | |
| height: auto; | |
| border-radius: 4px; | |
| margin-bottom: 10px; | |
| cursor: pointer; | |
| } | |
| .visualization-tabs { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 5px; | |
| margin-bottom: 10px; | |
| } | |
| .visualization-tab { | |
| padding: 5px 10px; | |
| background: #f5f5f5; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-size: 0.85rem; | |
| transition: all 0.2s; | |
| } | |
| .visualization-tab:hover { | |
| background: #e8e8e8; | |
| } | |
| .visualization-tab.active { | |
| background: #3273dc; | |
| color: white; | |
| border-color: #3273dc; | |
| } | |
| .section-header { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| padding: 20px; | |
| border-radius: 8px; | |
| margin-bottom: 30px; | |
| } | |
| .model-section { | |
| margin-bottom: 60px; | |
| } | |
| .steps-group { | |
| margin-bottom: 40px; | |
| padding: 20px; | |
| background: #f9f9f9; | |
| border-radius: 8px; | |
| } | |
| .steps-group h2 { | |
| color: #363636; | |
| margin-bottom: 20px; | |
| padding-bottom: 10px; | |
| border-bottom: 2px solid #3273dc; | |
| } | |
| .image-modal { | |
| display: none; | |
| position: fixed; | |
| z-index: 1000; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0,0,0,0.9); | |
| } | |
| .image-modal img { | |
| margin: auto; | |
| display: block; | |
| max-width: 90%; | |
| max-height: 90%; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| .close-modal { | |
| position: absolute; | |
| top: 20px; | |
| right: 35px; | |
| color: #f1f1f1; | |
| font-size: 40px; | |
| font-weight: bold; | |
| cursor: pointer; | |
| } | |
| .nav-tabs { | |
| display: flex; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| flex-wrap: wrap; | |
| } | |
| .nav-tab { | |
| padding: 10px 20px; | |
| background: #f5f5f5; | |
| border: 2px solid #ddd; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| transition: all 0.3s; | |
| } | |
| .nav-tab:hover { | |
| background: #e8e8e8; | |
| } | |
| .nav-tab.active { | |
| background: #3273dc; | |
| color: white; | |
| border-color: #3273dc; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <section class="hero"> | |
| <div class="hero-body"> | |
| <div class="container is-max-desktop"> | |
| <div class="columns is-centered"> | |
| <div class="column has-text-centered"> | |
| <h1 class="title is-1 publication-title">Real-Time Chunking Experiments</h1> | |
| <h2 class="subtitle is-3">Flow Matching Steps & Sigma_d Parameter Analysis</h2> | |
| <div class="is-size-5 publication-authors"> | |
| <span class="author-block">LeRobot RTC Integration Tests</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="section"> | |
| <div class="container is-max-desktop"> | |
| <div class="section-header"> | |
| <h2 class="title is-3" style="color: white; margin-bottom: 10px;">Experiment Overview</h2> | |
| <div class="content has-text-justified" style="color: white;"> | |
| <p> | |
| This page presents comprehensive results from Real-Time Chunking (RTC) experiments across different models, | |
| flow matching steps, and sigma_d values. The experiments demonstrate how these parameters affect the | |
| denoising process and final action predictions. | |
| </p> | |
| <p> | |
| <strong>Models tested:</strong> PI0.5, SmolVLA<br> | |
| <strong>Flow matching steps:</strong> 10, 20, 50, 100<br> | |
| <strong>Sigma_d values:</strong> 0.1, 0.2, 0.5, 0.8, 1.0, 1.2, 1.5<br> | |
| <strong>Modes:</strong> Classical RTC (fulltrajectory=false), Full Trajectory (fulltrajectory=true) | |
| </p> | |
| <p style="margin-top: 10px; font-size: 0.95em;"> | |
| <strong>Classical RTC:</strong> Uses RTC guidance during denoising with chunked trajectory processing.<br> | |
| <strong>Full Trajectory:</strong> Processes the complete trajectory without chunking. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Navigation Tabs --> | |
| <div class="nav-tabs"> | |
| <div class="nav-tab active" onclick="showModel('pi05')">PI0.5 Model</div> | |
| <div class="nav-tab" onclick="showModel('smolvla')">SmolVLA Model</div> | |
| </div> | |
| <!-- Mode Selector --> | |
| <div class="nav-tabs" style="margin-top: 15px;"> | |
| <div class="nav-tab active" onclick="showMode('classical')">Classical RTC</div> | |
| <div class="nav-tab" onclick="showMode('fulltrajectory')">Full Trajectory</div> | |
| </div> | |
| <!-- PI0.5 Model Section --> | |
| <div id="pi05-section" class="model-section"> | |
| <h1 class="title is-2">PI0.5 Model Results</h1> | |
| <!-- Steps 2 --> | |
| <div class="steps-group"> | |
| <h2 class="title is-3">Flow Matching Steps: 2</h2> | |
| <div class="experiment-grid" id="pi05-steps-2"></div> | |
| </div> | |
| <!-- Steps 5 --> | |
| <div class="steps-group"> | |
| <h2 class="title is-3">Flow Matching Steps: 5</h2> | |
| <div class="experiment-grid" id="pi05-steps-5"></div> | |
| </div> | |
| <!-- Steps 10 --> | |
| <div class="steps-group"> | |
| <h2 class="title is-3">Flow Matching Steps: 10</h2> | |
| <div class="experiment-grid" id="pi05-steps-10"></div> | |
| </div> | |
| <!-- Steps 20 --> | |
| <div class="steps-group"> | |
| <h2 class="title is-3">Flow Matching Steps: 20</h2> | |
| <div class="experiment-grid" id="pi05-steps-20"></div> | |
| </div> | |
| <!-- Steps 50 --> | |
| <div class="steps-group"> | |
| <h2 class="title is-3">Flow Matching Steps: 50</h2> | |
| <div class="experiment-grid" id="pi05-steps-50"></div> | |
| </div> | |
| <!-- Steps 100 --> | |
| <div class="steps-group"> | |
| <h2 class="title is-3">Flow Matching Steps: 100</h2> | |
| <div class="experiment-grid" id="pi05-steps-100"></div> | |
| </div> | |
| </div> | |
| <!-- SmolVLA Model Section --> | |
| <div id="smolvla-section" class="model-section" style="display: none;"> | |
| <h1 class="title is-2">SmolVLA Model Results</h1> | |
| <!-- Steps 2 --> | |
| <div class="steps-group"> | |
| <h2 class="title is-3">Flow Matching Steps: 2</h2> | |
| <div class="experiment-grid" id="smolvla-steps-2"></div> | |
| </div> | |
| <!-- Steps 5 --> | |
| <div class="steps-group"> | |
| <h2 class="title is-3">Flow Matching Steps: 5</h2> | |
| <div class="experiment-grid" id="smolvla-steps-5"></div> | |
| </div> | |
| <!-- Steps 10 --> | |
| <div class="steps-group"> | |
| <h2 class="title is-3">Flow Matching Steps: 10</h2> | |
| <div class="experiment-grid" id="smolvla-steps-10"></div> | |
| </div> | |
| <!-- Steps 20 --> | |
| <div class="steps-group"> | |
| <h2 class="title is-3">Flow Matching Steps: 20</h2> | |
| <div class="experiment-grid" id="smolvla-steps-20"></div> | |
| </div> | |
| <!-- Steps 50 --> | |
| <div class="steps-group"> | |
| <h2 class="title is-3">Flow Matching Steps: 50</h2> | |
| <div class="experiment-grid" id="smolvla-steps-50"></div> | |
| </div> | |
| <!-- Steps 100 --> | |
| <div class="steps-group"> | |
| <h2 class="title is-3">Flow Matching Steps: 100</h2> | |
| <div class="experiment-grid" id="smolvla-steps-100"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Image Modal --> | |
| <div id="imageModal" class="image-modal" onclick="closeModal()"> | |
| <span class="close-modal">×</span> | |
| <img id="modalImage" src=""> | |
| </div> | |
| <footer class="footer"> | |
| <div class="container"> | |
| <div class="content has-text-centered"> | |
| <p> | |
| RTC Experiments for LeRobot - Real-Time Chunking Integration | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Global state | |
| let currentMode = 'classical'; // 'classical' or 'fulltrajectory' | |
| // Experiment data structure | |
| // Only steps 10, 20, 50, 100 have fulltrajectory mode experiments | |
| const experiments = { | |
| pi05: { | |
| 10: ['0.1', '0.2', '0.5', '0.8', '1.0', '1.2', '1.5'], | |
| 20: ['0.1', '0.2', '0.5', '0.8', '1.0', '1.2', '1.5'], | |
| 50: ['0.1', '0.2', '0.5', '0.8', '1.0', '1.2', '1.5'], | |
| 100: ['0.1', '0.2', '0.5', '0.8', '1.0', '1.2', '1.5'] | |
| }, | |
| smolvla: { | |
| 10: ['0.1', '0.2', '0.5', '0.8', '1.0', '1.2', '1.5'], | |
| 20: ['0.1', '0.2', '0.5', '0.8', '1.0', '1.2', '1.5'], | |
| 50: ['0.1', '0.2', '0.5', '0.8', '1.0', '1.2', '1.5'], | |
| 100: ['0.1', '0.2', '0.5', '0.8', '1.0', '1.2', '1.5'] | |
| } | |
| }; | |
| const visualizations = { | |
| 'final': 'final_actions_comparison.png', | |
| 'xt': 'denoising_xt_comparison.png', | |
| 'vt': 'denoising_vt_comparison.png', | |
| 'x1t': 'denoising_x1t_comparison.png', | |
| 'correction': 'denoising_correction_comparison.png' | |
| }; | |
| const visualizationNames = { | |
| 'final': 'Final Actions', | |
| 'xt': 'X_t', | |
| 'vt': 'V_t (Velocity)', | |
| 'x1t': 'X1_t', | |
| 'correction': 'Correction' | |
| }; | |
| // Generate experiment cards | |
| function generateExperimentCards() { | |
| for (const model in experiments) { | |
| for (const steps in experiments[model]) { | |
| const sigmas = experiments[model][steps]; | |
| const gridId = `${model}-steps-${steps}`; | |
| const grid = document.getElementById(gridId); | |
| if (!grid) continue; | |
| sigmas.forEach(sigma => { | |
| const card = createExperimentCard(model, steps, sigma); | |
| grid.appendChild(card); | |
| }); | |
| } | |
| } | |
| } | |
| function createExperimentCard(model, steps, sigma) { | |
| const card = document.createElement('div'); | |
| card.className = 'experiment-card'; | |
| const title = document.createElement('h3'); | |
| title.textContent = `Sigma_d: ${sigma}`; | |
| card.appendChild(title); | |
| // Create visualization tabs | |
| const tabs = document.createElement('div'); | |
| tabs.className = 'visualization-tabs'; | |
| let firstTab = true; | |
| for (const vizKey in visualizations) { | |
| const tab = document.createElement('div'); | |
| tab.className = 'visualization-tab' + (firstTab ? ' active' : ''); | |
| tab.textContent = visualizationNames[vizKey]; | |
| tab.onclick = () => switchVisualization(card, model, steps, sigma, vizKey); | |
| tabs.appendChild(tab); | |
| firstTab = false; | |
| } | |
| card.appendChild(tabs); | |
| // Create image element | |
| const img = document.createElement('img'); | |
| const modeSuffix = currentMode === 'classical' ? '_fulltrajectory_false' : '_fulltrajectory_true'; | |
| const expPath = `./static/experiments/${model}_steps_${steps}_sigma_${sigma}${modeSuffix}`; | |
| img.src = `${expPath}/${visualizations['final']}`; | |
| img.alt = `${model} - Steps: ${steps}, Sigma: ${sigma} - ${currentMode === 'classical' ? 'Classical RTC' : 'Full Trajectory'}`; | |
| img.onclick = () => openModal(img.src); | |
| card.appendChild(img); | |
| return card; | |
| } | |
| function switchVisualization(card, model, steps, sigma, vizKey) { | |
| // Update active tab | |
| const tabs = card.querySelectorAll('.visualization-tab'); | |
| tabs.forEach(tab => { | |
| tab.classList.remove('active'); | |
| if (tab.textContent === visualizationNames[vizKey]) { | |
| tab.classList.add('active'); | |
| } | |
| }); | |
| // Update image | |
| const img = card.querySelector('img'); | |
| const modeSuffix = currentMode === 'classical' ? '_fulltrajectory_false' : '_fulltrajectory_true'; | |
| const expPath = `./static/experiments/${model}_steps_${steps}_sigma_${sigma}${modeSuffix}`; | |
| img.src = `${expPath}/${visualizations[vizKey]}`; | |
| } | |
| function showModel(model) { | |
| // Update nav tabs (only in the first nav-tabs div) | |
| const modelTabs = document.querySelectorAll('.nav-tabs')[0].querySelectorAll('.nav-tab'); | |
| modelTabs.forEach(tab => { | |
| tab.classList.remove('active'); | |
| if (tab.textContent.toLowerCase().includes(model.replace('smolvla', 'smol'))) { | |
| tab.classList.add('active'); | |
| } | |
| }); | |
| // Show/hide sections | |
| document.getElementById('pi05-section').style.display = model === 'pi05' ? 'block' : 'none'; | |
| document.getElementById('smolvla-section').style.display = model === 'smolvla' ? 'block' : 'none'; | |
| } | |
| function showMode(mode) { | |
| // Update mode | |
| currentMode = mode; | |
| // Update nav tabs (only in the second nav-tabs div) | |
| const modeTabs = document.querySelectorAll('.nav-tabs')[1].querySelectorAll('.nav-tab'); | |
| modeTabs.forEach(tab => { | |
| tab.classList.remove('active'); | |
| if ((mode === 'classical' && tab.textContent.includes('Classical')) || | |
| (mode === 'fulltrajectory' && tab.textContent.includes('Full Trajectory'))) { | |
| tab.classList.add('active'); | |
| } | |
| }); | |
| // Regenerate all experiment cards with new mode | |
| document.querySelectorAll('.experiment-grid').forEach(grid => { | |
| grid.innerHTML = ''; | |
| }); | |
| generateExperimentCards(); | |
| } | |
| function openModal(src) { | |
| const modal = document.getElementById('imageModal'); | |
| const modalImg = document.getElementById('modalImage'); | |
| modal.style.display = 'block'; | |
| modalImg.src = src; | |
| } | |
| function closeModal() { | |
| document.getElementById('imageModal').style.display = 'none'; | |
| } | |
| // Close modal with Escape key | |
| document.addEventListener('keydown', function(event) { | |
| if (event.key === 'Escape') { | |
| closeModal(); | |
| } | |
| }); | |
| // Initialize | |
| generateExperimentCards(); | |
| </script> | |
| </body> | |
| </html> | |