Hugging Face's logo

Spaces:
nics-efc
/
JuggleRL
Running

App Files Community
JuggleRL / index.html
JJJJJllll
back, try static
2cd9e86
raw
history blame contribute delete
6.39 kB
 <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JuggleRL: Mastering Ball Juggling with a Quadrotor via Deep Reinforcement Learning</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="dark">
<style>
:root{
--bg:#0b1020; --bg2:#0f1630; --fg:#e7eefc; --muted:#9eb2d8; --link:#6cb0ff;
--br:14px; --shadow:0 4px 24px rgba(0,0,0,.35);
}
html,body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto; }
a{color:var(--link);text-decoration:none}
.wrap{max-width:1100px;margin:auto;padding:20px;}
.topbar{position:sticky;top:0;z-index:10;background:var(--bg);
border-bottom:1px solid rgba(255,255,255,.08); padding:16px 20px;display:flex;gap:12px;align-items:center;justify-content:space-between;}
.title{font-weight:800;letter-spacing:.2px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{padding:6px 10px;border:1px solid rgba(255,255,255,.15);border-radius:999px;color:#cfe3ff}
.pill:hover{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.06)}
.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
@media (max-width: 900px){ .grid{grid-template-columns:1fr} }
.card{background:var(--bg2);border:1px solid rgba(255,255,255,.08);border-radius:var(--br);box-shadow:var(--shadow);padding:16px}
.info3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width: 900px){ .info3{grid-template-columns:1fr} }
.metric{text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.08);border-radius:var(--br);padding:14px}
.metric .k{font-size:28px;font-weight:800}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (max-width:900px){ .gallery{grid-template-columns:repeat(2,1fr)} }
.gallery img{width:100%;height:200px;object-fit:cover;border-radius:10px;border:1px solid rgba(255,255,255,.08)}
.footer{color:var(--muted);text-align:center;padding:26px 10px}
details{background:var(--bg2);border:1px solid rgba(255,255,255,.08);border-radius:var(--br);padding:12px}
summary{cursor:pointer;font-weight:700}
.heroimg{width:100%;height:380px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.08)}
</style>
</head>
<body>
<!-- 顶部导航：保留 arXiv + 三个 GitHub 链接 -->
<div class="topbar">
<div class="title">JuggleRL: Mastering Ball Juggling with a Quadrotor via Deep Reinforcement Learning</div>
<div class="pills">
<a class="pill" href="https://arxiv.org/abs/2509.24892" target="_blank" rel="noopener">📄 arXiv</a>
<a class="pill" href="https://github.com/thu-uav/JuggleRL_train" target="_blank" rel="noopener">Training</a>
<a class="pill" href="https://github.com/thu-uav/JuggleRL_rospack" target="_blank" rel="noopener">ROS Pack</a>
<a class="pill" href="https://github.com/thu-uav/JuggleRL_NatNetSDK" target="_blank" rel="noopener">NatNet SDK</a>
</div>
</div>
<div class="wrap">
<!-- Overview + Hero 图 -->
<div class="grid">
<div class="card">
<h2>Overview</h2>
<p><b>Highlights</b></p>
<ul>
<li><b>Zero-shot sim-to-real</b> deployment (no real data for training)</li>
<li><b>Calibrated dynamics + domain randomization</b> reduce sim-to-real gap</li>
<li><b>Lightweight Communication Protocol (LCP)</b> for low-latency streaming</li>
<li><b>Real-world performance</b>: up to <b>462</b> hits (avg <b>311</b> across 10 trials)</li>
</ul>
<p>This page hosts figures, demo videos, and links to paper &amp; code.</p>
</div>
<div class="card">
<!-- 可放一张系统图：assets/system_overview.png -->
<img class="heroimg" src="assets/system_overview.png" alt="System Diagram / Teaser" onerror="this.style.display='none'">
</div>
</div>
<!-- Links + Metrics -->
<div class="grid" style="margin-top:14px">
<div class="card">
<h3>Project Links</h3>
<ul>
<li><b>Paper:</b> <a href="https://arxiv.org/abs/2509.24892" target="_blank" rel="noopener">arXiv:2509.24892</a></li>
<li><b>Training:</b> <a href="https://github.com/thu-uav/JuggleRL_train" target="_blank" rel="noopener">GitHub</a></li>
<li><b>ROS Pack:</b> <a href="https://github.com/thu-uav/JuggleRL_rospack" target="_blank" rel="noopener">GitHub</a></li>
<li><b>NatNet SDK:</b> <a href="https://github.com/thu-uav/JuggleRL_NatNetSDK" target="_blank" rel="noopener">GitHub</a></li>
</ul>
</div>
<div class="card">
<h3>Key Metrics</h3>
<div class="info3">
<div class="metric"><div class="k">462</div><div>Max real-world hits</div></div>
<div class="metric"><div class="k">311</div><div>Avg hits (10 trials)</div></div>
<div class="metric"><div class="k">0</div><div>Real data for training</div></div>
</div>
</div>
</div>
<!-- Figures 画廊：自动读取 assets/ 下图片（简单：按固定文件名；或手工列出） -->
<div class="card" style="margin-top:14px">
<h3>Figures</h3>
<div class="gallery">
<!-- 你可以按需要增删文件名 -->
<img src="assets/overview.png" alt="Figure 1" onerror="this.style.display='none'">
</div>
</div>
<!-- Bilibili -->
<div class="card" style="margin-top:14px">
<h3>Real-world Video (Bilibili)</h3>
<div style="position:relative;padding-top:56.25%;">
<iframe src="https://player.bilibili.com/player.html?bvid=BV1hKxDzrEw5&autoplay=0"
scrolling="no" frameborder="0" allowfullscreen
style="position:absolute;top:0;left:0;width:100%;height:100%;">
</iframe>
</div>
</div>
<!-- BibTeX -->
<div class="card" style="margin-top:14px">
<details>
<summary>BibTeX</summary>
<pre>
@article{JuggleRL2025,
title = {JuggleRL: Mastering Ball Juggling with a Quadrotor via Deep Reinforcement Learning},
author = {Your Name and Coauthors},
journal = {arXiv preprint arXiv:2509.24892},
year = {2025}
}
</pre>
</details>
</div>
<div class="footer">© 2025 JuggleRL Team · Hosted on Hugging Face Spaces</div>
</div>
</body>
</html>