RoboManipBaselines-ProjectPage/index.html at master · isri-aist/RoboManipBaselines-ProjectPage · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="RoboManipBaselines">
<meta property="og:site_name" content="RoboManipBaselines">
<meta property="og:description" content="Build, train, and deploy robot manipulation policies across real and simulated environments">
<meta property="og:image" content="https://isri-aist.github.io/RoboManipBaselines-ProjectPage/media/images/thumbnail.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1920">
<meta property="og:image:height" content="1080">
<meta property="og:url" content="https://isri-aist.github.io/RoboManipBaselines-ProjectPage/">
<meta property="og:type" content="website">
<meta property="og:video" content="https://isri-aist.github.io/RoboManipBaselines-ProjectPage/media/videos/hero/overview.mp4">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="1920">
<meta property="og:video:height" content="1080">
<title>RoboManipBaselines</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">

<style>
body{font-family:'Inter',sans-serif;background:linear-gradient(180deg,#fbfcfe,#ffffff);color:#111}
.section{padding:2.5rem 1.5rem}
.container{max-width:1100px;margin:auto}
.logo{width:240px;margin:auto;display:block}
.hero-title{font-size:3rem;font-weight:800;text-align:center;margin-top:0.8rem}
.hero-sub{max-width:1000px;margin:1rem auto 0;text-align:center;color:#555;font-size:1.06rem;line-height:1.6}
.buttons{display:flex;gap:0.6rem;justify-content:center;margin-top:1.2rem;flex-wrap:wrap}
.button{width:170px;border-radius:999px;font-weight:600}
.hero-note{display:inline-flex;align-items:center;gap:0.5rem;margin-top:1.4rem;padding:0.55rem 0.9rem;border-radius:999px;background:#fff4d6;color:#8a5a00;font-size:0.95rem;font-weight:700;border:1px solid #f1dfaa}
.hero-subnote{display:inline-flex;align-items:center;gap:0.5rem;margin-top:1.2rem;padding:0.5rem 0.85rem;border-radius:999px;background:#f5f7fb;color:#4b5563;font-size:0.92rem;font-weight:700;border:1px solid #e5e7eb}
.hero-media{position:relative;width:100%;aspect-ratio:16/9;background:#eef2f7;border-radius:18px;margin-top:1rem;box-shadow:0 10px 30px rgba(0,0,0,0.08);overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#eef2f7}

.hero-subvideos{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
.hero-subvideos .sub{position:relative;aspect-ratio:4/3;background:#eef2f7;border-radius:14px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,0.06)}
.hero-subvideos video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:640px){.hero-subvideos{grid-template-columns:1fr}}
.section-title{font-size:2rem;font-weight:800;margin-bottom:0.4rem}
.section-desc{color:#666;margin-bottom:1.2rem}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.card{padding:1.2rem;border-radius:16px;border:1px solid #eee;background:white;line-height:1.5}
.policy-grid{display:flex;flex-wrap:wrap;gap:0.6rem}
.policy-tag{width:160px;text-align:center;padding:0.5rem;border-radius:999px;background:#f5f7fb;border:1px solid #e5e7eb;font-weight:600}
.carousel-wrapper{position:relative}
.carousel{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2rem)/2.8);gap:1rem;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;align-items:start;white-space:normal}
.carousel::-webkit-scrollbar{display:none}
.item{scroll-snap-align:start;min-width:0;display:block;aspect-ratio:16/9;overflow:hidden;background:#eef2f7;border-radius:16px}
.item video{display:block;width:100%;height:100%;object-fit:cover;border-radius:16px}
.caption{text-align:center;margin-top:0.4rem;font-size:0.9rem}
.arrow{position:absolute;top:40%;transform:translateY(-50%);background:white;border:1px solid #ddd;border-radius:50%;width:36px;height:36px;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,0.08);z-index:3}
.arrow:hover{background:#f0f4ff}
.arrow.left{left:-40px}
.arrow.right{right:-40px}
.links{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1.5rem}
.link-card{padding:1rem;border-radius:16px;border:1px solid #eee;background:white;text-decoration:none;color:#111}
.link-card:hover{box-shadow:0 10px 30px rgba(0,0,0,0.08)}
.link-title{font-weight:700;margin-bottom:0.2rem}
.link-desc{color:#666;font-size:0.9rem}
@media (max-width:900px){.features{grid-template-columns:repeat(2,1fr)}.carousel{grid-auto-columns:calc((100% - 1rem)/2)}}
@media (max-width:640px){.features{grid-template-columns:1fr}.carousel{grid-auto-columns:88%}.arrow.left{left:-10px}.arrow.right{right:-10px}.links{grid-template-columns:1fr}}

/* dots */
.dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
.dot{width:8px;height:8px;border-radius:50%;background:#cbd5e1;cursor:pointer;transition:all .2s}
.dot.active{background:#2563eb;transform:scale(1.2)}

</style>
</head>

<body>

<section class="section" style="padding-top:1rem;padding-bottom:0.5rem;">
<img src="./media/images/logo.png" class="logo">
</section>

<section class="section" style="padding-top:0;">
<div class="container">
<h1 class="hero-title">RoboManipBaselines</h1>
<p class="hero-sub">Build, train, and deploy robot manipulation policies across real and simulated environments</p>

<div class="buttons">
<a href="https://github.com/isri-aist/RoboManipBaselines" target="_blank" rel="noopener noreferrer" class="button is-dark">💻 Code</a>
<a href="https://arxiv.org/abs/2509.17057" target="_blank" rel="noopener noreferrer" class="button">📄 Paper</a>
<a href="https://huggingface.co/RoboManipBaselines" target="_blank" rel="noopener noreferrer" class="button">🗂️ Datasets</a>
</div>

<div class="hero-note">🎉 Version 3 Released</div>
<div class="hero-media">
<video class="hero-video" autoplay muted loop controls playsinline>
<source src="./media/videos/hero/overview.mp4" type="video/mp4">
</video>
</div>

<div class="hero-subnote">🕰️ Old Version Videos</div>
<div class="hero-subvideos">
  <div class="sub">
    <video autoplay muted loop controls playsinline>
      <source src="./media/videos/hero/version1.mp4" type="video/mp4">
    </video>
  </div>
  <div class="sub">
    <video autoplay muted loop controls playsinline>
      <source src="./media/videos/hero/version2.mp4" type="video/mp4">
    </video>
  </div>
</div>

</div>
</section>

<section class="section">
<div class="container">
<h2 class="section-title">Core Capabilities</h2>
<p class="section-desc">RoboManipBaselines provides a unified software foundation for imitation learning in robotic manipulation, covering the full pipeline from data collection to deployment.</p>

<div class="features">
<div class="card">⚙️ <strong>End-to-end workflow</strong><br>From demonstration data collection to policy training and rollout, all components are integrated into a single consistent pipeline.</div>
<div class="card">🌍 <strong>Works across environments</strong><br>Supports diverse environments including multiple simulators and real robots under a unified interface.</div>
<div class="card">🧩 <strong>Easily extensible</strong><br>New robots, tasks, and policies can be added with minimal implementation by extending base classes.</div>
<div class="card">📊 <strong>Reproducible benchmarking</strong><br>Enables systematic comparison using shared datasets and standardized evaluation procedures.</div>
</div>

</div>
</section>

<section class="section">
<div class="container">
<h2 class="section-title">Policy Families</h2>
<p class="section-desc">A unified interface supports a wide range of baseline and recent policy models.</p>

<div class="policy-grid">
<span class="policy-tag">MLP</span>
<span class="policy-tag">ACT</span>
<span class="policy-tag">Diffusion</span>
<span class="policy-tag">SARNN</span>
<span class="policy-tag">3D Diffusion</span>
<span class="policy-tag">ManiFlow</span>
<span class="policy-tag">Flow Policy</span>
<span class="policy-tag">MT-ACT</span>
<span class="policy-tag">π0</span>
<span class="policy-tag">GR00T</span>
</div>
</div>
</section>

<!-- Environments -->
<section class="section">
<div class="container">
<h2 class="section-title">Environments</h2>
<p class="section-desc">Supports diverse environments across both simulation and real-world settings.</p>
<div class="carousel-wrapper">
<button class="arrow left" type="button" onclick="scrollCarousel('env-carousel', -1)">◀</button>
<div class="carousel" id="env-carousel">
<div class="item"><video autoplay controls muted loop playsinline src="./media/videos/environments/01.mp4"></video><div class="caption">UR5e in MuJoCo</div></div>
<div class="item"><video autoplay controls muted loop playsinline src="./media/videos/environments/02.mp4"></video><div class="caption">FR3 in MuJoCo</div></div>
<div class="item"><video autoplay controls muted loop playsinline src="./media/videos/environments/03.mp4"></video><div class="caption">ALOHA in MuJoCo</div></div>
<div class="item"><video autoplay controls muted loop playsinline src="./media/videos/environments/04.mp4"></video><div class="caption">HSR in MuJoCo</div></div>
<div class="item"><video autoplay controls muted loop playsinline src="./media/videos/environments/05.mp4"></video><div class="caption">G1 in MuJoCo</div></div>
<div class="item"><video autoplay controls muted loop playsinline src="./media/videos/environments/06.mp4"></video><div class="caption">Sawyer in PyBullet</div></div>
<div class="item"><video autoplay controls muted loop playsinline src="./media/videos/environments/07.mp4"></video><div class="caption">UR5e in Isaac Gym</div></div>
<div class="item"><video autoplay controls muted loop playsinline src="./media/videos/environments/08.mp4"></video><div class="caption">UR5e real robot</div></div>
<div class="item"><video autoplay controls muted loop playsinline src="./media/videos/environments/09.mp4"></video><div class="caption">xArm7 real robot</div></div>
<div class="item"><video autoplay controls muted loop playsinline src="./media/videos/environments/10.mp4"></video><div class="caption">Parallel simulation</div></div>
<div class="item"><video autoplay controls muted loop playsinline src="./media/videos/environments/11.mp4"></video><div class="caption">Tactile sensor plugin</div></div>
</div>
<button class="arrow right" type="button" onclick="scrollCarousel('env-carousel', 1)">▶</button>
</div>
<div class="dots" id="env-dots"></div>
</div>
</section>

<!-- Benchmarks -->
<section class="section">
<div class="container">
<h2 class="section-title">Benchmarks</h2>
<p class="section-desc">Enables systematic benchmarking with publicly available datasets.</p>
<div class="carousel-wrapper">
<button class="arrow left" type="button" onclick="scrollCarousel('benchmark-carousel', -1)">◀</button>
<div class="carousel" id="benchmark-carousel">
<div class="item"><video autoplay controls muted loop playsinline src="./media/videos/benchmarks/01.mp4"></video><div class="caption">Handkerchief</div></div>
<div class="item"><video autoplay controls muted loop playsinline src="./media/videos/benchmarks/02.mp4"></video><div class="caption">Sheet</div></div>
<div class="item"><video autoplay controls muted loop playsinline src="./media/videos/benchmarks/04.mp4"></video><div class="caption">Bag (S)</div></div>
<div class="item"><video autoplay controls muted loop playsinline src="./media/videos/benchmarks/05.mp4"></video><div class="caption">ChainInTube</div></div>
<div class="item"><video autoplay controls muted loop playsinline src="./media/videos/benchmarks/06.mp4"></video><div class="caption">RingOnCone</div></div>
<div class="item"><video autoplay controls muted loop playsinline src="./media/videos/benchmarks/07.mp4"></video><div class="caption">RingOnHook</div></div>
</div>
<button class="arrow right" type="button" onclick="scrollCarousel('benchmark-carousel', 1)">▶</button>
</div>
<div class="dots" id="benchmark-dots"></div>
</div>
</section>

<!-- Applications -->
<section class="section">
<div class="container">
<h2 class="section-title">Research Applications</h2>
<p class="section-desc">Demonstrates how the framework can be extended for diverse research applications.</p>
<div class="carousel-wrapper">
<button class="arrow left" type="button" onclick="scrollCarousel('app-carousel', -1)">◀</button>
<div class="carousel" id="app-carousel">
<div class="item"><video autoplay controls muted loop playsinline src="./media/videos/applications/01.mp4"></video><div class="caption">Integration with a tactile foundation model</div></div>
<div class="item"><video autoplay controls muted loop playsinline src="./media/videos/applications/02.mp4"></video><div class="caption">Interactive robotic system</div></div>
<div class="item"><video autoplay controls muted loop playsinline src="./media/videos/applications/03.mp4"></video><div class="caption">3D sensing evaluation</div></div>
<div class="item"><video autoplay controls muted loop playsinline src="./media/videos/applications/04.mp4"></video><div class="caption">Hardware extensions</div></div>
</div>
<button class="arrow right" type="button" onclick="scrollCarousel('app-carousel', 1)">▶</button>
</div>
<div class="dots" id="app-dots"></div>
</div>
</section>

<section class="section">
<div class="container">
<h2 class="section-title">Resources</h2>
<p class="section-desc">Access datasets, trained models, and evaluation results.</p>

<div class="links">
<a href="https://github.com/isri-aist/RoboManipBaselines/blob/master/doc/environment_catalog.md" target="_blank" rel="noopener noreferrer" class="link-card"><div class="link-title">🌍 Environment catalog</div><div class="link-desc">Manipulation task environments across diverse robots</div></a>
<a href="https://github.com/isri-aist/RoboManipBaselines/blob/master/doc/dataset_list.md" target="_blank" rel="noopener noreferrer" class="link-card"><div class="link-title">📂 Demonstration datasets</div><div class="link-desc">Datasets used for training and evaluation</div></a>
<a href="https://github.com/isri-aist/RoboManipBaselines/blob/master/doc/learned_parameters.md" target="_blank" rel="noopener noreferrer" class="link-card"><div class="link-title">🧠 Learned parameters</div><div class="link-desc">Pretrained policy checkpoints</div></a>
<a href="https://github.com/isri-aist/RoboManipBaselines/blob/master/doc/evaluation_results.md" target="_blank" rel="noopener noreferrer" class="link-card"><div class="link-title">📊 Evaluation results</div><div class="link-desc">Summary of evaluation experiments</div></a>
</div>
</div>
</section>

<section class="section" style="padding-top:2rem;padding-bottom:2rem;border-top:1px solid #eee;">
<div class="container" style="text-align:center;color:#666;font-size:0.9rem;">
<strong>RoboManipBaselines</strong><br>
An open-source framework for imitation learning in robotic manipulation.<br>
<a href="https://github.com/isri-aist/RoboManipBaselines" target="_blank" rel="noopener noreferrer">GitHub</a> |
<a href="https://arxiv.org/abs/2509.17057" target="_blank" rel="noopener noreferrer">Paper</a>
</div>
</section>

<script>
function scrollCarousel(id, dir) {
  const el = document.getElementById(id);
  if (!el) return;
  const item = el.querySelector('.item');
  if (!item) return;
  const gap = 16;
  const width = item.offsetWidth + gap;
  el.scrollBy({ left: dir * width, behavior: 'smooth' });
}

function initDots(carouselId, dotsId){
  const carousel = document.getElementById(carouselId);
  const dotsContainer = document.getElementById(dotsId);
  if (!carousel || !dotsContainer) return;

  function compute(){
    const items = carousel.querySelectorAll('.item');
    if (items.length === 0) return;

    const item = items[0];
    const gap = 16;
    const itemWidth = item.getBoundingClientRect().width + gap;
    const maxScroll = Math.max(0, carousel.scrollWidth - carousel.clientWidth);
    const pageCount = Math.max(1, Math.round(maxScroll / itemWidth) + 1);

    dotsContainer.innerHTML = '';

    for(let i = 0; i < pageCount; i++){
      const d = document.createElement('div');
      d.className = 'dot';
      d.onclick = () => {
        carousel.scrollTo({ left: i * itemWidth, behavior: 'smooth' });
      };
      dotsContainer.appendChild(d);
    }

    update();
  }

  function update(){
    const items = carousel.querySelectorAll('.item');
    if (items.length === 0) return;

    const gap = 16;
    const itemWidth = items[0].getBoundingClientRect().width + gap;
    const dots = dotsContainer.querySelectorAll('.dot');
    const rawIndex = itemWidth > 0 ? carousel.scrollLeft / itemWidth : 0;
    const index = Math.min(dots.length - 1, Math.round(rawIndex));

    dots.forEach((d, i) => {
      d.classList.toggle('active', i === index);
    });
  }

  carousel.addEventListener('scroll', () => {
    window.requestAnimationFrame(update);
  });

  compute();
  window.addEventListener('resize', compute);
}

initDots('env-carousel','env-dots');
initDots('benchmark-carousel','benchmark-dots');
initDots('app-carousel','app-dots');
</script>

</body>
</html>