merge

Author: joeljang

app/page.js

@@ -156,9 +156,7 @@ export default function FirstPost() {
           <br></br>
           </p>
 
-          <div style={{ 
-            width: '130%', 
-            marginLeft: '-15%', 
+          <div className={styles.wideBreakoutImage} style={{ 
             marginTop: '4rem',
             marginBottom: '4rem'
           }}>
@@ -179,13 +177,7 @@ export default function FirstPost() {
           </p>
 
           {/* Evaluation cards grid */}
-          <div style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
-            gap: '1rem',
-            margin: '1.5rem 0 3rem 0',
-            padding: '0'
-          }}>
+          <div className={styles.evalCardsGrid}>
             {[
               {
                 num: '1',
@@ -287,13 +279,7 @@ export default function FirstPost() {
           {/* Evaluation Bar Chart */}
           <EvalBarChart />
 
-          <div style={{ 
-            display: 'flex', 
-            flexWrap: 'wrap', 
-            justifyContent: 'center', 
-            gap: '0.5rem',
-            marginTop: '1rem'
-          }}>
+          <div className={styles.taskButtonRow}>
             {/* PnP-Easy - Green */}
             {[
               { id: 'seen_1', label: 'Pick & Place Fruit' },
@@ -406,13 +392,7 @@ export default function FirstPost() {
           {/* Unseen Evaluation Bar Chart */}
           <UnseenEvalBarChart />
 
-          <div style={{ 
-            display: 'flex', 
-            flexWrap: 'wrap', 
-            justifyContent: 'center', 
-            gap: '0.5rem',
-            marginTop: '1rem'
-          }}>
+          <div className={styles.taskButtonRow}>
             {[
               { id: 'unseen_1', label: 'Untie Shoe/Gift' },
               { id: 'unseen_2', label: 'Take Hat Off/On from Mannequin' },
@@ -487,14 +467,9 @@ export default function FirstPost() {
 
         <DroidBarChart />
 
-        <div style={{ 
-          display: 'flex', 
-          flexWrap: 'wrap', 
-          justifyContent: 'center', 
-          gap: '0.5rem',
-          marginTop: '1rem'
-        }}>
+        <div className={styles.taskButtonRow}>
           <button
+            className={styles.taskButtonRow}
             onClick={() => setSelectedDroid('droid_1')}
             style={{
               padding: '0.4rem 0.8rem',
@@ -512,6 +487,7 @@ export default function FirstPost() {
           </button>
 
           <button
+            className={styles.taskButtonRow}
             onClick={() => setSelectedDroid('droid_2')}
             style={{
               padding: '0.4rem 0.8rem',
@@ -562,13 +538,7 @@ export default function FirstPost() {
           We investigate whether WAMs retain their generalization after being fine-tuning on task-specific data. We post-train on three downstream tasks : <em>shirt folding</em>, <em>fruit packing</em>, and <em>table bussing</em>. DreamZero enables stronger post-training results across three tasks, indicating that environment generalization is retained after post-training. 
         </p>
 
-        <div style={{ 
-          display: 'flex', 
-          flexWrap: 'wrap', 
-          justifyContent: 'center', 
-          gap: '0.5rem',
-          marginTop: '1rem'
-        }}>
+        <div className={styles.taskButtonRow}>
           {/* Shirt Folding - Green (lowest diversity) */}
           <button
             onClick={() => setSelectedCombinedVideo(combinedVideos[0])}
@@ -642,20 +612,11 @@ export default function FirstPost() {
           display: 'flex',
           justifyContent: 'center'
         }}>
-          <div style={{ 
-            width: '60%',
-            maxWidth: '50%'
-          }}>
-            <h3 style={{ textAlign: 'center', marginBottom: '0.5rem', marginTop: '-2rem' }}>
+          <div className={styles.responsiveVideoWrapper}>
+            <h3 style={{ textAlign: 'center', marginBottom: '0.5rem', marginTop: '-1rem' }}>
               {selectedCombinedVideo.label}: 10 consecutive evaluations | {selectedCombinedVideo.progress}
             </h3>
-            <div style={{ 
-              width: '100%',
-              aspectRatio: '16/9',
-              borderRadius: '6px',
-              overflow: 'hidden',
-              backgroundColor: '#0f0f0f'
-            }}>
+            <div className={styles.responsiveVideoInner}>
               <LazyVideo
                 src={selectedCombinedVideo.policyRolloutVideo}
                 title="Policy Rollout Video"
@@ -696,14 +657,7 @@ export default function FirstPost() {
             With only <b><a href="https://dreamzero0.github.io/yam_gallery/" style={{color: '#2d6555'}}>30 minutes</a></b> of play data (55 trajectories), DreamZero adapts to the YAM robot and generalizes zero-shot to novel objects like pumpkins, teddy bears, and paper bags, exhibiting strong language following capabilities. The knowledge gained from AgiBot pretraining transfers directly—no massive retraining required. To our understanding, this is the most efficient embodiment transfer yet—what previously demanded hundreds of hours of demonstrations, we accomplish in 30 minutes (no other YAM data was used). See the full 30-minute play dataset <a href="https://dreamzero0.github.io/yam_gallery/" style={{color: '#2d6555'}}><b>here</b></a>.
           </p>
 
-          <div style={{ 
-            display: 'flex', 
-            flexWrap: 'wrap', 
-            justifyContent: 'center', 
-            gap: '0.5rem',
-            marginTop: '1rem',
-            marginBottom: '1.5rem'  /* Add this */
-          }}>
+          <div className={styles.taskButtonRow} style={{ marginBottom: '1.5rem' }}>
             {YamVideos.map((option) => (
               <button
                 key={option.id}
@@ -731,19 +685,8 @@ export default function FirstPost() {
           display: 'flex',
           justifyContent: 'center'
         }}>
-          <div style={{ 
-            width: '60%',
-            maxWidth: '50%'
-          }}>
-            <div style={{ 
-              width: '100%',
-              aspectRatio: '16/9',
-              borderRadius: '6px',
-              overflow: 'hidden',
-              backgroundColor: '#0f0f0f',
-              marginTop: '-2rem',
-              marginBottom: '-2rem'  /* Add this */
-            }}>
+          <div className={styles.responsiveVideoWrapper}>
+            <div className={styles.responsiveVideoInner} style={{ marginTop: '-2rem', marginBottom: '-2rem' }}>
               <LazyVideo
                 src={selectedYam.policyRolloutVideo}
                 title="New Embodiment Adaptation Videos"
@@ -789,14 +732,7 @@ export default function FirstPost() {
           <p>The era of prompting robot foundation models has arrived. In this section, we show some rollouts of interactive prompting in action, where we take the robot around, and just ask people to <b>prompt</b> the robot to do new things. Here are some cool tasks that we found the robot is able to do.</p>
 
           {/* Section 5: Interactive Prompting - Green buttons */}
-          <div style={{ 
-            display: 'flex', 
-            flexWrap: 'wrap', 
-            justifyContent: 'center', 
-            gap: '0.5rem',
-            marginTop: '1rem',
-            marginBottom: '1.5rem'
-          }}>
+          <div className={styles.taskButtonRow} style={{ marginBottom: '1.5rem' }}>
             {InteractivePromptingVideos.map((option) => (
               <button
                 key={option.id}
@@ -824,19 +760,8 @@ export default function FirstPost() {
           display: 'flex',
           justifyContent: 'center'
         }}>
-          <div style={{ 
-            width: '60%',
-            maxWidth: '50%'
-          }}>
-            <div style={{ 
-              width: '100%',
-              aspectRatio: '16/9',
-              borderRadius: '6px',
-              overflow: 'hidden',
-              backgroundColor: '#0f0f0f',
-              marginTop: '-2rem',
-              marginBottom: '-2rem',
-            }}>
+          <div className={styles.responsiveVideoWrapper}>
+            <div className={styles.responsiveVideoInner} style={{ marginTop: '-2rem', marginBottom: '-2rem' }}>
               <LazyVideo
                 src={selectedInteractivePrompting.policyRolloutVideo}
                 title="Interactive Prompting Video"
@@ -884,13 +809,7 @@ export default function FirstPost() {
           </p>
 
           {/* Section 6: Inference - Green for DreamZero, Blue for DreamZero-Flash */}
-          <div style={{ 
-            display: 'flex', 
-            flexWrap: 'wrap', 
-            justifyContent: 'center', 
-            gap: '0.5rem',
-            marginTop: '1rem'
-          }}>
+            <div className={styles.taskButtonRow}>
             <button
               onClick={() => setSelectedInference('dreamzero')}
               style={{
@@ -939,35 +858,17 @@ export default function FirstPost() {
             How far can zero-shot generalization go? We've been stress-testing DreamZero with tasks we never trained on, in environments we've never seen. From fanning burgers to pressing elevator buttons, playing xylophones to shaking tambourines, we keep discovering surprising new capabilities. DreamZero is just the beginning of the new wave of robot foundation models built on video world models!
           </p>
 
-          <div style={{
-            display: 'flex',
-            flexWrap: 'wrap',
-            gap: '0.5rem',
-            margin: '1rem 0'
-          }}>
+          <div className={styles.taskTags}>
             {[
               'Fan the burger', 'Press elevator button', 'Play xylophone', 
               'Shake tambourine', 'Pour into human-held cup', 'Open laptop',
               'Ring the bell', 'Flip the pancake', 'Water the plant'
             ].map((task) => (
-              <span key={task} style={{
-                background: 'rgba(118, 185, 0, 0.1)',
-                border: '1px solid rgba(118, 185, 0, 0.2)',
-                borderRadius: '20px',
-                padding: '0.35rem 0.75rem',
-                fontSize: '0.85rem'
-              }}>
+              <span key={task} className={styles.taskTag}>
                 {task}
               </span>
             ))}
-            <span style={{
-              background: 'rgba(118, 185, 0, 0.2)',
-              border: '1px solid rgba(118, 185, 0, 0.3)',
-              borderRadius: '20px',
-              padding: '0.35rem 0.75rem',
-              fontSize: '0.85rem',
-              fontWeight: '600'
-            }}>
+            <span className={`${styles.taskTag} ${styles.taskTagHighlight}`}>
               <a href="https://dreamzero0.github.io/evals_gallery/">+90 more...</a>
             </span>
           </div>
@@ -978,21 +879,8 @@ export default function FirstPost() {
             rel="noopener noreferrer"
             style={{ textDecoration: 'none' }}
           >
-            <div style={{
-              background: 'linear-gradient(135deg, rgba(118, 185, 0, 0.15) 0%, rgba(118, 185, 0, 0.05) 100%)',
-              border: '1px solid rgba(118, 185, 0, 0.3)',
-              borderRadius: '12px',
-              padding: '1.5rem',
-              marginTop: '1.5rem',
-              display: 'flex',
-              alignItems: 'center',
-              gap: '1rem',
-              cursor: 'pointer',
-              transition: 'all 0.2s ease'
-            }}>
-              <div style={{
-                fontSize: '2.5rem'
-              }}>
+            <div className={styles.ctaBox}>
+              <div style={{ fontSize: '2.5rem' }}>
                 🎬
               </div>
               <div>

data/videoData.js

@@ -479,7 +479,7 @@ export const UnseenVideos = {
         caption: 'Grab one side of the map and fold the map.  | ✅'
       },
       {
-        generatedUrl: '/labs/gear/videos/agi_unseen/hsl/NEWUNSEEN_67_AI.m3u8',
+        generatedUrl: '/labs/gear/videos/agi_unseen/hsl/NEWUNSEEN_067_AI.m3u8',
         executionUrl: '/labs/gear/videos/agi_unseen/hsl/NEWUNSEEN_67.m3u8',
         caption: 'Grab one side of the map and fold the map.  | ⚠️'
       },

public/evals_gallery/index.html

@@ -148,6 +148,44 @@
       color: #1f4739;
       text-decoration: underline;
     }
+    
+    /* Mobile filters dropdown */
+    .filters-dropdown-btn {
+      display: none;
+      width: 100%;
+      font-weight: 700;
+      margin-bottom: 0.5rem;
+    }
+    .filters-content-collapse {
+      display: block;
+    }
+    @media (max-width: 767px) {
+      .nav.nav-pills.nav-fill {
+        flex-direction: column;
+      }
+      .nav.nav-pills.nav-fill .nav-item {
+        width: 100%;
+        margin-right: 0 !important;
+        margin-bottom: 0.5rem;
+      }
+      .nav.nav-pills.nav-fill .nav-item:last-child {
+        margin-bottom: 0;
+      }
+      .filters-dropdown-btn {
+        display: block;
+      }
+      .filters-content-collapse {
+        display: none;
+      }
+      .filters-content-collapse.show {
+        display: block;
+      }
+    }
+    @media (min-width: 768px) {
+      .filters-content-collapse {
+        display: block !important;
+      }
+    }
   </style>
 </head>
 <body>
@@ -168,7 +206,10 @@
 
     <div class="row">
       <div class="col-md-2 px-1 col-12">
-        
+        <button class="btn btn-outline-dark filters-dropdown-btn" type="button" id="filters-toggle-btn" aria-expanded="false" aria-controls="filters-content">
+          Filters <span id="filters-chevron" aria-hidden="true">▼</span>
+        </button>
+        <div class="filters-content-collapse" id="filters-content">
 
         <div class="mb-2" id="scene-checkbox-group">
           <h5 class="mb-1">Scene Types</h5>
@@ -550,6 +591,7 @@ <h5 class="mb-1">Task Types</h5>
           <p class="small mb-2" id="info-text"></p>
           <button class="btn btn-outline-dark btn-sm" id="resample-button" style="display: none;">Resample</button>
         </div>
+        </div>
       </div>
 
       <div class="col" id="video-grid">
@@ -818,6 +860,8 @@ <h5 class="mb-1">Task Types</h5>
       JSON.parse('{"info": "Use right arm to wipe water on counter with towel\u003cbr\u003e\u003cbr\u003eTowel / Wipe", "object_id": "object-5", "poster": "videos/NEWDATAVIZ_010_small.jpg", "scene_id": "scene-4", "src": "videos/NEWDATAVIZ_010_small.mp4", "task_id": "task-16"}'),
       JSON.parse('{"info": "Grab the brush with right arm and use it to scrub sink\u003cbr\u003e\u003cbr\u003eCleaning Tool / Clean", "object_id": "object-17", "poster": "videos/NEWDATAVIZ_011_small.jpg", "scene_id": "scene-4", "src": "videos/NEWDATAVIZ_011_small.mp4", "task_id": "task-22"}'),
       JSON.parse('{"info": "Pull paper towel out of dispenser with right arm\u003cbr\u003e\u003cbr\u003eTowel / Pull", "object_id": "object-5", "poster": "videos/NEWDATAVIZ_012_small.jpg", "scene_id": "scene-4", "src": "videos/NEWDATAVIZ_012_small.mp4", "task_id": "task-11"}'),
+      JSON.parse('{"info": "Pick up drum stick and hit cymbal\u003cbr\u003e\u003cbr\u003eOther / Other", "object_id": "object-20", "poster": "videos/NEWDATAVIZ_013_small.jpg", "scene_id": "scene-6", "src": "videos/NEWDATAVIZ_013_small.mp4", "task_id": "task-20"}'),
+      JSON.parse('{"info": "Push the button\u003cbr\u003e\u003cbr\u003eOther / Push", "object_id": "object-20", "poster": "videos/NEWDATAVIZ_014_small.jpg", "scene_id": "scene-7", "src": "videos/NEWDATAVIZ_014_small.mp4", "task_id": "task-14"}'),
     ];
 
     const filters = [
@@ -1027,6 +1071,21 @@ <h5 class="mb-1">Task Types</h5>
     // Add a click event listener to the "Resample" button
     resampleButton.addEventListener('click', filterVideos);
 
+    // Mobile filters dropdown toggle
+    (function() {
+      var toggleBtn = document.getElementById('filters-toggle-btn');
+      var filtersContent = document.getElementById('filters-content');
+      var chevron = document.getElementById('filters-chevron');
+      if (toggleBtn && filtersContent) {
+        toggleBtn.addEventListener('click', function() {
+          filtersContent.classList.toggle('show');
+          var isOpen = filtersContent.classList.contains('show');
+          toggleBtn.setAttribute('aria-expanded', isOpen);
+          if (chevron) chevron.textContent = isOpen ? '▲' : '▼';
+        });
+      }
+    })();
+
     // Initial filtering of videos
     filterVideos();
 

public/evals_gallery/videos/NEWDATAVIZ_013_small.jpg

@@ -2,6 +2,6 @@
 #EXT-X-VERSION:3
 #EXT-X-TARGETDURATION:9
 #EXT-X-MEDIA-SEQUENCE:0
-#EXTINF:8.666667,
+#EXTINF:8.625000,
 NEWUNSEEN_006_02_000.ts
 #EXT-X-ENDLIST

public/evals_gallery/videos/NEWDATAVIZ_013_small.mp4

@@ -0,0 +1,7 @@
+#EXTM3U
+#EXT-X-VERSION:3
+#EXT-X-TARGETDURATION:12
+#EXT-X-MEDIA-SEQUENCE:0
+#EXTINF:11.541667,
+NEWUNSEEN_012_AI_000.ts
+#EXT-X-ENDLIST