Skip to content

Commit a27fb8c

Browse files
shuynh2000shuynh2000
committed
Add Mobile Responsive Styles for Main Page
- Add breakpoints at 768px, 480px, and 1024px for progressive scaling - Replace inline styles with responsive CSS classes - Fix container widths, typography, and video sizing for mobile - Prevent wide images from overflowing on small screens
1 parent 46970ae commit a27fb8c

2 files changed

Lines changed: 386 additions & 206 deletions

File tree

‎app/page.js‎

Lines changed: 21 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -156,9 +156,7 @@ export default function FirstPost() {
156156
<br></br>
157157
</p>
158158

159-
<div style={{
160-
width: '130%',
161-
marginLeft: '-15%',
159+
<div className={styles.wideBreakoutImage} style={{
162160
marginTop: '4rem',
163161
marginBottom: '4rem'
164162
}}>
@@ -179,13 +177,7 @@ export default function FirstPost() {
179177
</p>
180178

181179
{/* Evaluation cards grid */}
182-
<div style={{
183-
display: 'grid',
184-
gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
185-
gap: '1rem',
186-
margin: '1.5rem 0 3rem 0',
187-
padding: '0'
188-
}}>
180+
<div className={styles.evalCardsGrid}>
189181
{[
190182
{
191183
num: '1',
@@ -287,13 +279,7 @@ export default function FirstPost() {
287279
{/* Evaluation Bar Chart */}
288280
<EvalBarChart />
289281

290-
<div style={{
291-
display: 'flex',
292-
flexWrap: 'wrap',
293-
justifyContent: 'center',
294-
gap: '0.5rem',
295-
marginTop: '1rem'
296-
}}>
282+
<div className={styles.taskButtonRow}>
297283
{/* PnP-Easy - Green */}
298284
{[
299285
{ id: 'seen_1', label: 'Pick & Place Fruit' },
@@ -406,13 +392,7 @@ export default function FirstPost() {
406392
{/* Unseen Evaluation Bar Chart */}
407393
<UnseenEvalBarChart />
408394

409-
<div style={{
410-
display: 'flex',
411-
flexWrap: 'wrap',
412-
justifyContent: 'center',
413-
gap: '0.5rem',
414-
marginTop: '1rem'
415-
}}>
395+
<div className={styles.taskButtonRow}>
416396
{[
417397
{ id: 'unseen_1', label: 'Untie Shoe/Gift' },
418398
{ id: 'unseen_2', label: 'Take Hat Off/On from Mannequin' },
@@ -487,13 +467,7 @@ export default function FirstPost() {
487467

488468
<DroidBarChart />
489469

490-
<div style={{
491-
display: 'flex',
492-
flexWrap: 'wrap',
493-
justifyContent: 'center',
494-
gap: '0.5rem',
495-
marginTop: '1rem'
496-
}}>
470+
<div className={styles.taskButtonRow}>
497471
<button
498472
onClick={() => setSelectedDroid('droid_1')}
499473
style={{
@@ -508,7 +482,7 @@ export default function FirstPost() {
508482
transition: 'all 0.2s ease'
509483
}}
510484
>
511-
Seen Tasks
485+
Seen Tasks<div className={styles.taskButtonRow}></div>
512486
</button>
513487

514488
<button
@@ -562,13 +536,7 @@ export default function FirstPost() {
562536
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.
563537
</p>
564538

565-
<div style={{
566-
display: 'flex',
567-
flexWrap: 'wrap',
568-
justifyContent: 'center',
569-
gap: '0.5rem',
570-
marginTop: '1rem'
571-
}}>
539+
<div className={styles.taskButtonRow}>
572540
{/* Shirt Folding - Green (lowest diversity) */}
573541
<button
574542
onClick={() => setSelectedCombinedVideo(combinedVideos[0])}
@@ -642,20 +610,11 @@ export default function FirstPost() {
642610
display: 'flex',
643611
justifyContent: 'center'
644612
}}>
645-
<div style={{
646-
width: '60%',
647-
maxWidth: '50%'
648-
}}>
613+
<div className={styles.responsiveVideoWrapper}>
649614
<h3 style={{ textAlign: 'center', marginBottom: '0.5rem', marginTop: '-2rem' }}>
650615
{selectedCombinedVideo.label}: 10 consecutive evaluations | {selectedCombinedVideo.progress}
651616
</h3>
652-
<div style={{
653-
width: '100%',
654-
aspectRatio: '16/9',
655-
borderRadius: '6px',
656-
overflow: 'hidden',
657-
backgroundColor: '#0f0f0f'
658-
}}>
617+
<div className={styles.responsiveVideoInner}>
659618
<LazyVideo
660619
src={selectedCombinedVideo.policyRolloutVideo}
661620
title="Policy Rollout Video"
@@ -696,14 +655,7 @@ export default function FirstPost() {
696655
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>.
697656
</p>
698657

699-
<div style={{
700-
display: 'flex',
701-
flexWrap: 'wrap',
702-
justifyContent: 'center',
703-
gap: '0.5rem',
704-
marginTop: '1rem',
705-
marginBottom: '1.5rem' /* Add this */
706-
}}>
658+
<div className={styles.taskButtonRow} style={{ marginBottom: '1.5rem' }}>
707659
{YamVideos.map((option) => (
708660
<button
709661
key={option.id}
@@ -731,19 +683,8 @@ export default function FirstPost() {
731683
display: 'flex',
732684
justifyContent: 'center'
733685
}}>
734-
<div style={{
735-
width: '60%',
736-
maxWidth: '50%'
737-
}}>
738-
<div style={{
739-
width: '100%',
740-
aspectRatio: '16/9',
741-
borderRadius: '6px',
742-
overflow: 'hidden',
743-
backgroundColor: '#0f0f0f',
744-
marginTop: '-2rem',
745-
marginBottom: '-2rem' /* Add this */
746-
}}>
686+
<div className={styles.responsiveVideoWrapper}>
687+
<div className={styles.responsiveVideoInner} style={{ marginTop: '-2rem', marginBottom: '-2rem' }}>
747688
<LazyVideo
748689
src={selectedYam.policyRolloutVideo}
749690
title="New Embodiment Adaptation Videos"
@@ -789,14 +730,7 @@ export default function FirstPost() {
789730
<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>
790731

791732
{/* Section 5: Interactive Prompting - Green buttons */}
792-
<div style={{
793-
display: 'flex',
794-
flexWrap: 'wrap',
795-
justifyContent: 'center',
796-
gap: '0.5rem',
797-
marginTop: '1rem',
798-
marginBottom: '1.5rem'
799-
}}>
733+
<div className={styles.taskButtonRow} style={{ marginBottom: '1.5rem' }}>
800734
{InteractivePromptingVideos.map((option) => (
801735
<button
802736
key={option.id}
@@ -824,19 +758,8 @@ export default function FirstPost() {
824758
display: 'flex',
825759
justifyContent: 'center'
826760
}}>
827-
<div style={{
828-
width: '60%',
829-
maxWidth: '50%'
830-
}}>
831-
<div style={{
832-
width: '100%',
833-
aspectRatio: '16/9',
834-
borderRadius: '6px',
835-
overflow: 'hidden',
836-
backgroundColor: '#0f0f0f',
837-
marginTop: '-2rem',
838-
marginBottom: '-2rem',
839-
}}>
761+
<div className={styles.responsiveVideoWrapper}>
762+
<div className={styles.responsiveVideoInner} style={{ marginTop: '-2rem', marginBottom: '-2rem' }}>
840763
<LazyVideo
841764
src={selectedInteractivePrompting.policyRolloutVideo}
842765
title="Interactive Prompting Video"
@@ -884,13 +807,7 @@ export default function FirstPost() {
884807
</p>
885808

886809
{/* Section 6: Inference - Green for DreamZero, Blue for DreamZero-Flash */}
887-
<div style={{
888-
display: 'flex',
889-
flexWrap: 'wrap',
890-
justifyContent: 'center',
891-
gap: '0.5rem',
892-
marginTop: '1rem'
893-
}}>
810+
<div className={styles.taskButtonRow}>
894811
<button
895812
onClick={() => setSelectedInference('dreamzero')}
896813
style={{
@@ -939,35 +856,17 @@ export default function FirstPost() {
939856
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!
940857
</p>
941858

942-
<div style={{
943-
display: 'flex',
944-
flexWrap: 'wrap',
945-
gap: '0.5rem',
946-
margin: '1rem 0'
947-
}}>
859+
<div className={styles.taskTags}>
948860
{[
949861
'Fan the burger', 'Press elevator button', 'Play xylophone',
950862
'Shake tambourine', 'Pour into human-held cup', 'Open laptop',
951863
'Ring the bell', 'Flip the pancake', 'Water the plant'
952864
].map((task) => (
953-
<span key={task} style={{
954-
background: 'rgba(118, 185, 0, 0.1)',
955-
border: '1px solid rgba(118, 185, 0, 0.2)',
956-
borderRadius: '20px',
957-
padding: '0.35rem 0.75rem',
958-
fontSize: '0.85rem'
959-
}}>
865+
<span key={task} className={styles.taskTag}>
960866
{task}
961867
</span>
962868
))}
963-
<span style={{
964-
background: 'rgba(118, 185, 0, 0.2)',
965-
border: '1px solid rgba(118, 185, 0, 0.3)',
966-
borderRadius: '20px',
967-
padding: '0.35rem 0.75rem',
968-
fontSize: '0.85rem',
969-
fontWeight: '600'
970-
}}>
869+
<span className={`${styles.taskTag} ${styles.taskTagHighlight}`}>
971870
<a href="https://dreamzero0.github.io/evals_gallery/">+90 more...</a>
972871
</span>
973872
</div>
@@ -978,21 +877,8 @@ export default function FirstPost() {
978877
rel="noopener noreferrer"
979878
style={{ textDecoration: 'none' }}
980879
>
981-
<div style={{
982-
background: 'linear-gradient(135deg, rgba(118, 185, 0, 0.15) 0%, rgba(118, 185, 0, 0.05) 100%)',
983-
border: '1px solid rgba(118, 185, 0, 0.3)',
984-
borderRadius: '12px',
985-
padding: '1.5rem',
986-
marginTop: '1.5rem',
987-
display: 'flex',
988-
alignItems: 'center',
989-
gap: '1rem',
990-
cursor: 'pointer',
991-
transition: 'all 0.2s ease'
992-
}}>
993-
<div style={{
994-
fontSize: '2.5rem'
995-
}}>
880+
<div className={styles.ctaBox}>
881+
<div style={{ fontSize: '2.5rem' }}>
996882
🎬
997883
</div>
998884
<div>

0 commit comments

Comments
 (0)