Spaces:

helper2424
/

rtc_tests

Running

File size: 14,829 Bytes

<!DOCTYPE html>
<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">&times;</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>