Hugging Face's logo

Spaces:
nics-efc
/
JuggleRL
Sleeping

App Files Community
JJJJJllll commited on
Commit
2cd9e86
·
1 Parent(s): 45056f2

back, try static

Browse files
Files changed (2) hide show
  1. app.py +1 -43
  2. index.html +130 -0
app.py CHANGED
@@ -72,12 +72,6 @@ with gr.Blocks(
72
  title="JuggleRL · Quadrotor Ball Juggling",
73
  theme=theme,
74
  css="""
75
- /* 让宿主元素负责深色背景（Shadow DOM 正确写法） */
76
- :host { background: #0b1020 !important; color-scheme: dark; }
77
-
78
- /* 内容容器透明，避免盖住宿主背景或你的自定义背景层 */
79
- .gradio-container { background: transparent !important; }
80
-
81
  .topbar{
82
  display:flex;justify-content:space-between;align-items:center;
83
  gap:12px; padding:18px 20px; border-bottom:1px solid rgba(255,255,255,.08);
@@ -107,43 +101,7 @@ with gr.Blocks(
107
  .footer{ padding:26px 10px; text-align:center; color:#9eb2d8; }
108
  """
109
  ) as demo:
110
-
111
- gr.HTML("""
112
- <script>
113
- (function(){
114
- // —— 核心：禁止任何 #dark-loader 存活 ——
115
- function nukeDarkLoader(root){
116
- const kill = el => { try { el.remove(); } catch(e){} };
117
- // 当前文档里
118
- document.querySelectorAll('#dark-loader').forEach(kill);
119
- // gradio-app 的 shadow 里
120
- const host = document.querySelector('gradio-app');
121
- if (host && host.shadowRoot) {
122
- host.shadowRoot.querySelectorAll('#dark-loader').forEach(kill);
123
- }
124
- }
125
-
126
- // 先清一次（防止被提前插入）
127
- nukeDarkLoader(document);
128
-
129
- // 监听整个文档树，发现 #dark-loader 就立即移除（解决“后来盖黑”）
130
- const obs = new MutationObserver(() => nukeDarkLoader(document));
131
- obs.observe(document.documentElement, { childList: true, subtree: true });
132
-
133
- // Safari 前后台切换/iframe重挂载也再清一次
134
- document.addEventListener('visibilitychange', () => {
135
- if (document.visibilityState === 'visible') nukeDarkLoader(document);
136
- });
137
-
138
- // 5 秒兜底，防止偶发没清干净
139
- setTimeout(()=> nukeDarkLoader(document), 5000);
140
- })();
141
- </script>
142
- """)
143
-
144
-
145
-
146
-
147
  gr.HTML(topbar())
148
 
149
  with gr.Row():
 
72
  title="JuggleRL · Quadrotor Ball Juggling",
73
  theme=theme,
74
  css="""
 
 
 
 
 
 
75
  .topbar{
76
  display:flex;justify-content:space-between;align-items:center;
77
  gap:12px; padding:18px 20px; border-bottom:1px solid rgba(255,255,255,.08);
 
101
  .footer{ padding:26px 10px; text-align:center; color:#9eb2d8; }
102
  """
103
  ) as demo:
104
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
105
  gr.HTML(topbar())
106
 
107
  with gr.Row():
index.html ADDED
@@ -0,0 +1,130 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>JuggleRL: Mastering Ball Juggling with a Quadrotor via Deep Reinforcement Learning</title>
6
+ <meta name="viewport" content="width=device-width, initial-scale=1">
7
+ <meta name="color-scheme" content="dark">
8
+ <style>
9
+ :root{
10
+ --bg:#0b1020; --bg2:#0f1630; --fg:#e7eefc; --muted:#9eb2d8; --link:#6cb0ff;
11
+ --br:14px; --shadow:0 4px 24px rgba(0,0,0,.35);
12
+ }
13
+ html,body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto; }
14
+ a{color:var(--link);text-decoration:none}
15
+ .wrap{max-width:1100px;margin:auto;padding:20px;}
16
+ .topbar{position:sticky;top:0;z-index:10;background:var(--bg);
17
+ border-bottom:1px solid rgba(255,255,255,.08); padding:16px 20px;display:flex;gap:12px;align-items:center;justify-content:space-between;}
18
+ .title{font-weight:800;letter-spacing:.2px}
19
+ .pills{display:flex;flex-wrap:wrap;gap:8px}
20
+ .pill{padding:6px 10px;border:1px solid rgba(255,255,255,.15);border-radius:999px;color:#cfe3ff}
21
+ .pill:hover{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.06)}
22
+ .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
23
+ @media (max-width: 900px){ .grid{grid-template-columns:1fr} }
24
+ .card{background:var(--bg2);border:1px solid rgba(255,255,255,.08);border-radius:var(--br);box-shadow:var(--shadow);padding:16px}
25
+ .info3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
26
+ @media (max-width: 900px){ .info3{grid-template-columns:1fr} }
27
+ .metric{text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
28
+ border:1px solid rgba(255,255,255,.08);border-radius:var(--br);padding:14px}
29
+ .metric .k{font-size:28px;font-weight:800}
30
+ .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
31
+ @media (max-width:900px){ .gallery{grid-template-columns:repeat(2,1fr)} }
32
+ .gallery img{width:100%;height:200px;object-fit:cover;border-radius:10px;border:1px solid rgba(255,255,255,.08)}
33
+ .footer{color:var(--muted);text-align:center;padding:26px 10px}
34
+ details{background:var(--bg2);border:1px solid rgba(255,255,255,.08);border-radius:var(--br);padding:12px}
35
+ summary{cursor:pointer;font-weight:700}
36
+ .heroimg{width:100%;height:380px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.08)}
37
+ </style>
38
+ </head>
39
+ <body>
40
+ <!-- 顶部导航：保留 arXiv + 三个 GitHub 链接 -->
41
+ <div class="topbar">
42
+ <div class="title">JuggleRL: Mastering Ball Juggling with a Quadrotor via Deep Reinforcement Learning</div>
43
+ <div class="pills">
44
+ <a class="pill" href="https://arxiv.org/abs/2509.24892" target="_blank" rel="noopener">📄 arXiv</a>
45
+ <a class="pill" href="https://github.com/thu-uav/JuggleRL_train" target="_blank" rel="noopener">Training</a>
46
+ <a class="pill" href="https://github.com/thu-uav/JuggleRL_rospack" target="_blank" rel="noopener">ROS Pack</a>
47
+ <a class="pill" href="https://github.com/thu-uav/JuggleRL_NatNetSDK" target="_blank" rel="noopener">NatNet SDK</a>
48
+ </div>
49
+ </div>
50
+
51
+ <div class="wrap">
52
+ <!-- Overview + Hero 图 -->
53
+ <div class="grid">
54
+ <div class="card">
55
+ <h2>Overview</h2>
56
+ <p><b>Highlights</b></p>
57
+ <ul>
58
+ <li><b>Zero-shot sim-to-real</b> deployment (no real data for training)</li>
59
+ <li><b>Calibrated dynamics + domain randomization</b> reduce sim-to-real gap</li>
60
+ <li><b>Lightweight Communication Protocol (LCP)</b> for low-latency streaming</li>
61
+ <li><b>Real-world performance</b>: up to <b>462</b> hits (avg <b>311</b> across 10 trials)</li>
62
+ </ul>
63
+ <p>This page hosts figures, demo videos, and links to paper &amp; code.</p>
64
+ </div>
65
+ <div class="card">
66
+ <!-- 可放一张系统图：assets/system_overview.png -->
67
+ <img class="heroimg" src="assets/system_overview.png" alt="System Diagram / Teaser" onerror="this.style.display='none'">
68
+ </div>
69
+ </div>
70
+
71
+ <!-- Links + Metrics -->
72
+ <div class="grid" style="margin-top:14px">
73
+ <div class="card">
74
+ <h3>Project Links</h3>
75
+ <ul>
76
+ <li><b>Paper:</b> <a href="https://arxiv.org/abs/2509.24892" target="_blank" rel="noopener">arXiv:2509.24892</a></li>
77
+ <li><b>Training:</b> <a href="https://github.com/thu-uav/JuggleRL_train" target="_blank" rel="noopener">GitHub</a></li>
78
+ <li><b>ROS Pack:</b> <a href="https://github.com/thu-uav/JuggleRL_rospack" target="_blank" rel="noopener">GitHub</a></li>
79
+ <li><b>NatNet SDK:</b> <a href="https://github.com/thu-uav/JuggleRL_NatNetSDK" target="_blank" rel="noopener">GitHub</a></li>
80
+ </ul>
81
+ </div>
82
+ <div class="card">
83
+ <h3>Key Metrics</h3>
84
+ <div class="info3">
85
+ <div class="metric"><div class="k">462</div><div>Max real-world hits</div></div>
86
+ <div class="metric"><div class="k">311</div><div>Avg hits (10 trials)</div></div>
87
+ <div class="metric"><div class="k">0</div><div>Real data for training</div></div>
88
+ </div>
89
+ </div>
90
+ </div>
91
+
92
+ <!-- Figures 画廊：自动读取 assets/ 下图片（简单：按固定文件名；或手工列出） -->
93
+ <div class="card" style="margin-top:14px">
94
+ <h3>Figures</h3>
95
+ <div class="gallery">
96
+ <!-- 你可以按需要增删文件名 -->
97
+ <img src="assets/overview.png" alt="Figure 1" onerror="this.style.display='none'">
98
+ </div>
99
+ </div>
100
+
101
+ <!-- Bilibili -->
102
+ <div class="card" style="margin-top:14px">
103
+ <h3>Real-world Video (Bilibili)</h3>
104
+ <div style="position:relative;padding-top:56.25%;">
105
+ <iframe src="https://player.bilibili.com/player.html?bvid=BV1hKxDzrEw5&autoplay=0"
106
+ scrolling="no" frameborder="0" allowfullscreen
107
+ style="position:absolute;top:0;left:0;width:100%;height:100%;">
108
+ </iframe>
109
+ </div>
110
+ </div>
111
+
112
+ <!-- BibTeX -->
113
+ <div class="card" style="margin-top:14px">
114
+ <details>
115
+ <summary>BibTeX</summary>
116
+ <pre>
117
+ @article{JuggleRL2025,
118
+ title = {JuggleRL: Mastering Ball Juggling with a Quadrotor via Deep Reinforcement Learning},
119
+ author = {Your Name and Coauthors},
120
+ journal = {arXiv preprint arXiv:2509.24892},
121
+ year = {2025}
122
+ }
123
+ </pre>
124
+ </details>
125
+ </div>
126
+
127
+ <div class="footer">© 2025 JuggleRL Team · Hosted on Hugging Face Spaces</div>
128
+ </div>
129
+ </body>
130
+ </html>