-
Notifications
You must be signed in to change notification settings - Fork 38
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 4313a79
Showing
1 changed file
with
363 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,363 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width"> | ||
<title>MuJoCo Playground</title> | ||
<link rel="preconnect" href="https://fonts.googleapis.com"> | ||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet"> | ||
<style> | ||
body { | ||
max-width: 800px; | ||
margin: 40px auto; | ||
padding: 0 20px; | ||
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; | ||
line-height: 1.6; | ||
color: #333; | ||
} | ||
|
||
h1, h2, h3 { | ||
font-weight: 500; | ||
} | ||
|
||
h1 { | ||
font-size: 24px; | ||
margin-bottom: 30px; | ||
} | ||
|
||
h2 { | ||
font-size: 20px; | ||
margin-top: 40px; | ||
padding-top: 20px; | ||
border-top: 1px solid #eee; | ||
} | ||
|
||
.video-result { | ||
margin-bottom: 30px; | ||
position: relative; | ||
overflow: hidden; | ||
} | ||
|
||
.video-grid { | ||
display: grid; | ||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | ||
gap: 20px; | ||
margin-bottom: 20px; | ||
} | ||
|
||
.video-result h3 { | ||
font-size: 16px; | ||
margin-bottom: 10px; | ||
} | ||
|
||
.video-container { | ||
position: relative; | ||
padding-top: 56.25%; /* 16:9 Aspect Ratio */ | ||
background: #f5f5f5; | ||
cursor: pointer; | ||
} | ||
|
||
.video-container img.thumbnail { | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
width: 100%; | ||
height: 100%; | ||
object-fit: cover; | ||
} | ||
|
||
.video-container video { | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
width: 100%; | ||
height: 100%; | ||
object-fit: contain; | ||
} | ||
|
||
.play-button { | ||
position: absolute; | ||
top: 50%; | ||
left: 50%; | ||
transform: translate(-50%, -50%); | ||
width: 60px; | ||
height: 60px; | ||
background: rgba(0, 0, 0, 0.7); | ||
border-radius: 50%; | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
cursor: pointer; | ||
} | ||
|
||
.play-button::after { | ||
content: ''; | ||
width: 0; | ||
height: 0; | ||
border-style: solid; | ||
border-width: 10px 0 10px 20px; | ||
border-color: transparent transparent transparent white; | ||
margin-left: 5px; | ||
} | ||
|
||
.caption { | ||
color: #666; | ||
font-size: 14px; | ||
margin: 5px 0; | ||
} | ||
|
||
@media (max-width: 640px) { | ||
.video-grid { | ||
grid-template-columns: 1fr; | ||
} | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<h1>MuJoCo Playground</h1> | ||
|
||
<div style="margin: 30px 0 50px 0;"> | ||
<p style="margin-bottom: 20px;"> | ||
We present MuJoCo Playground, a comprehensive suite of environments for RL research and robotic learning. Environments span DM Control Suite, quadruped and biped locomotion, prehensile and non-prehensile manipulation, as well as on-device training with pixels. We train with open-source RL libraries on consumer grade graphics cards and show sim-to-real transfer on several robotic tasks. | ||
</p> | ||
|
||
<div style="display: flex; gap: 20px; margin-top: 25px;"> | ||
<a href="#" style="color: #2962ff; text-decoration: none; text-transform: lowercase;">📄 report</a> | ||
<a href="#" style="color: #2962ff; text-decoration: none; text-transform: lowercase;">💻 code</a> | ||
<a href="#" style="color: #2962ff; text-decoration: none; text-transform: lowercase;">📝 blog</a> | ||
</div> | ||
</div> | ||
|
||
<!-- <h2>Quadruped Locomotion</h2> | ||
<div class="video-result"> | ||
<div class="video-container"> | ||
<img class="thumbnail" src="/api/placeholder/800/450" alt="GO1 Teaser Thumbnail"> | ||
<div class="play-button"></div> | ||
<video controls preload="none" loading="lazy" poster="/api/placeholder/800/450"> | ||
<source src="videos/go1-teaser.webm" type="video/webm"> | ||
<source src="videos/go1-teaser.mp4" type="video/mp4"> | ||
</video> | ||
</div> | ||
</div> --> | ||
|
||
<h2>Quadruped Locomotion</h2> | ||
<div class="video-container" style="position: relative; height: 0; overflow: hidden; max-width: 100%;"> | ||
<iframe | ||
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" | ||
src="https://www.youtube.com/embed/CjWySiEVHp8" | ||
title="Quadruped Locomotion" | ||
frameborder="0" | ||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" | ||
allowfullscreen> | ||
</iframe> | ||
</div> | ||
|
||
<div class="video-grid"> | ||
<div class="video-result"> | ||
<h3>Joystick</h3> | ||
<div class="video-container" style="position: relative; height: 0; overflow: hidden; max-width: 100%;"> | ||
<iframe | ||
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" | ||
src="https://www.youtube.com/embed/81Y1XS018DI" | ||
title="Quadruped Locomotion" | ||
frameborder="0" | ||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" | ||
allowfullscreen> | ||
</iframe> | ||
</div> | ||
</div> | ||
<div class="video-result"> | ||
<h3>Handstand</h3> | ||
<div class="video-container" style="position: relative; height: 0; overflow: hidden; max-width: 100%;"> | ||
<iframe | ||
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" | ||
src="https://www.youtube.com/embed/BIuqqd0L0Fk" | ||
title="Quadruped Locomotion" | ||
frameborder="0" | ||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" | ||
allowfullscreen> | ||
</iframe> | ||
</div> | ||
</div> | ||
<div class="video-result"> | ||
<h3>Footstand</h3> | ||
<div class="video-container" style="position: relative; height: 0; overflow: hidden; max-width: 100%;"> | ||
<iframe | ||
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" | ||
src="https://www.youtube.com/embed/yWa9vNW0j3M" | ||
title="Quadruped Locomotion" | ||
frameborder="0" | ||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" | ||
allowfullscreen> | ||
</iframe> | ||
</div> | ||
</div> | ||
<div class="video-result"> | ||
<h3>Fall recovery</h3> | ||
<div class="video-container" style="position: relative; height: 0; overflow: hidden; max-width: 100%;"> | ||
<iframe | ||
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" | ||
src="https://www.youtube.com/embed/im-L_yGONg8" | ||
title="Quadruped Locomotion" | ||
frameborder="0" | ||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" | ||
allowfullscreen> | ||
</iframe> | ||
</div> | ||
</div> | ||
<div class="video-result"> | ||
<h3>Sim2Sim Transfer (in distribution)</h3> | ||
<div class="video-container" style="position: relative; height: 0; overflow: hidden; max-width: 100%;"> | ||
<iframe | ||
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" | ||
src="https://www.youtube.com/embed/XwF2lkT2gqo" | ||
title="Quadruped Locomotion" | ||
frameborder="0" | ||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" | ||
allowfullscreen> | ||
</iframe> | ||
</div> | ||
</div> | ||
<div class="video-result"> | ||
<h3>Sim2Sim Transfer (out of distribution)</h3> | ||
<div class="video-container" style="position: relative; height: 0; overflow: hidden; max-width: 100%;"> | ||
<iframe | ||
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" | ||
src="https://www.youtube.com/embed/ThrzuKU6thQ" | ||
title="Quadruped Locomotion" | ||
frameborder="0" | ||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" | ||
allowfullscreen> | ||
</iframe> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<h2>Biped Locomotion</h2> | ||
<div class="video-grid"> | ||
<div class="video-result"> | ||
<h3>Flat Terrain</h3> | ||
<div class="video-container" style="position: relative; height: 0; overflow: hidden; max-width: 100%;"> | ||
<iframe | ||
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" | ||
src="https://www.youtube.com/embed/msjiRpZSLoA" | ||
title="Quadruped Locomotion" | ||
frameborder="0" | ||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" | ||
allowfullscreen> | ||
</iframe> | ||
</div> | ||
</div> | ||
<div class="video-result"> | ||
<h3>Slippery Terrain</h3> | ||
<div class="video-container" style="position: relative; height: 0; overflow: hidden; max-width: 100%;"> | ||
<iframe | ||
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" | ||
src="https://www.youtube.com/embed/Vp9g3J9Kn1Q" | ||
title="Quadruped Locomotion" | ||
frameborder="0" | ||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" | ||
allowfullscreen> | ||
</iframe> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<h2>Dexterous Manipulation</h2> | ||
<div class="video-grid"> | ||
<div class="video-result"> | ||
<h3>Reorientation</h3> | ||
<div class="video-container" style="position: relative; height: 0; overflow: hidden; max-width: 100%;"> | ||
<iframe | ||
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" | ||
src="https://www.youtube.com/embed/zsiSzGqyMf0" | ||
title="Quadruped Locomotion" | ||
frameborder="0" | ||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" | ||
allowfullscreen> | ||
</iframe> | ||
</div> | ||
</div> | ||
<div class="video-result"> | ||
<h3>Z-Axis Rotation</h3> | ||
<div class="video-container" style="position: relative; height: 0; overflow: hidden; max-width: 100%;"> | ||
<iframe | ||
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" | ||
src="https://www.youtube.com/embed/qkeCSxOuYdg" | ||
title="Quadruped Locomotion" | ||
frameborder="0" | ||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" | ||
allowfullscreen> | ||
</iframe> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<h2>Non-prehensile Manipulation</h2> | ||
<div class="video-container" style="position: relative; height: 0; overflow: hidden; max-width: 100%;"> | ||
<iframe | ||
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" | ||
src="https://www.youtube.com/embed/A_a0riSAPvw" | ||
title="Dexterous Manipulation" | ||
frameborder="0" | ||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" | ||
allowfullscreen> | ||
</iframe> | ||
</div> | ||
|
||
<script> | ||
document.querySelectorAll('.video-container').forEach(container => { | ||
const video = container.querySelector('video'); | ||
const thumbnail = container.querySelector('.thumbnail'); | ||
const playButton = container.querySelector('.play-button'); | ||
|
||
function playVideo() { | ||
video.play(); | ||
thumbnail.style.display = 'none'; | ||
playButton.style.display = 'none'; | ||
video.controls = true; | ||
} | ||
|
||
container.addEventListener('click', () => { | ||
if (video.paused) { | ||
playVideo(); | ||
} | ||
}); | ||
|
||
video.addEventListener('pause', () => { | ||
thumbnail.style.display = 'block'; | ||
playButton.style.display = 'flex'; | ||
}); | ||
|
||
video.addEventListener('play', () => { | ||
thumbnail.style.display = 'none'; | ||
playButton.style.display = 'none'; | ||
}); | ||
|
||
// Intersection Observer for lazy loading | ||
const observer = new IntersectionObserver((entries) => { | ||
entries.forEach(entry => { | ||
if (entry.isIntersecting) { | ||
const sources = entry.target.querySelectorAll('source'); | ||
sources.forEach(source => { | ||
const dataSrc = source.getAttribute('data-src'); | ||
if (dataSrc) { | ||
source.src = dataSrc; | ||
} | ||
}); | ||
video.load(); | ||
observer.unobserve(entry.target); | ||
} | ||
}); | ||
}, { | ||
rootMargin: '50px 0px', | ||
threshold: 0.1 | ||
}); | ||
|
||
observer.observe(video); | ||
}); | ||
</script> | ||
</body> | ||
</html> |