Skip to content

Commit

Permalink
Setup website.
Browse files Browse the repository at this point in the history
  • Loading branch information
kevinzakka committed Jan 6, 2025
0 parents commit 4313a79
Showing 1 changed file with 363 additions and 0 deletions.
363 changes: 363 additions & 0 deletions index.html
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>

0 comments on commit 4313a79

Please sign in to comment.