-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathnora.html
More file actions
354 lines (341 loc) · 14.4 KB
/
Copy pathnora.html
File metadata and controls
354 lines (341 loc) · 14.4 KB
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
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
---
layout: null
permalink: /nora/
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>NORA: A Small Open-Sourced Generalist Vision Language Action Model for Embodied Tasks</title>
<!-- Fonts & CSS -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" integrity="sha384-..." crossorigin="anonymous">
<link rel="stylesheet" href="/assets/css/style.css">
<style>
:root {
--primary-color: #061E61;
--secondary-color: #1a2a6c;
--bg-light: #f8f9fa;
--btn-bg: #e0e0e0;
--btn-hover: #cccccc;
--project-radius: 1rem;
--spacing: 1.5rem;
}
* { box-sizing: border-box; }
body {
font-family: var(--font-serif);
background: var(--bg-light);
color: var(--primary-color);
margin: 0;
font-size: var(--type-body);
line-height: var(--content-leading);
}
.header {
background: #fff;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
padding: calc(var(--spacing) * 2) 1rem;
text-align: center;
}
.logo-title {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-bottom: 0.75rem;
}
.logo {
width: 80px;
}
.main-title {
font-family: var(--font-sans);
font-size: var(--type-page-title);
color: #000093;
margin: 0;
font-weight: var(--weight-display);
}
.subtitle {
font-family: var(--font-sans);
font-size: var(--type-section-title);
color: var(--secondary-color);
margin: 0.75rem 0 1.5rem;
font-weight: var(--weight-section);
}
.authors {
font-size: var(--type-body);
font-weight: var(--weight-body);
margin-bottom: var(--spacing);
}
/* Updated affiliations for responsiveness */
.affiliations {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: calc(var(--spacing) * 1);
margin-bottom: var(--spacing);
}
.affiliations a {
display: block;
flex: 0 1 auto;
margin: 0.5rem;
}
.affiliations img {
height: 60px;
max-width: 100%;
width: auto;
transition: transform 0.3s;
}
.affiliations img:hover { transform: scale(1.1); }
.links {
margin-bottom: calc(var(--spacing) * 1.5);
}
.links .btn {
margin: 0 0.75rem;
font-weight: var(--weight-card);
color: var(--primary-color);
background-color: var(--btn-bg);
border: none;
border-radius: var(--project-radius);
font-family: var(--font-sans);
font-size: var(--type-control);
padding: 0.5rem 1.25rem;
transition: background-color 0.3s, transform 0.3s;
}
.links .btn:hover {
background-color: var(--btn-hover);
transform: translateY(-2px);
}
main {
padding: var(--spacing) 1rem 3rem;
max-width: 1200px;
margin: auto;
}
section + section {
margin-top: calc(var(--spacing) * 2);
}
section h2 {
text-align: center;
font-family: var(--font-sans);
font-size: var(--type-section-title);
font-weight: var(--weight-section);
margin-bottom: var(--spacing);
color: var(--secondary-color);
position: relative;
}
section h2::after {
content: '';
display: block;
width: 60px;
height: 4px;
background: var(--primary-color);
margin: 0.5rem auto 0;
border-radius: 2px;
}
.teaser-section img,
.architecture img {
width: 100%;
max-width: 800px;
border-radius: var(--project-radius);
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
margin: auto;
display: block;
}
.abstract p {
max-width: 800px;
margin: auto;
font-size: var(--type-body);
text-align: justify;
}
.video-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
gap: var(--spacing);
margin: 0 auto;
}
.video-item {
background: #fff;
border-radius: var(--project-radius);
box-shadow: 0 6px 20px rgba(0,0,0,0.1);
overflow: hidden;
transition: transform 0.3s;
}
.video-item:hover {
transform: translateY(-4px);
}
.iframe-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 aspect */
background: #000;
}
.iframe-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.video-caption {
padding: 0.75rem;
text-align: center;
font-family: var(--font-sans);
font-size: var(--type-supporting);
font-weight: var(--weight-emphasis);
background: #fff;
}
.intro-grid {
display: flex;
justify-content: center;
}
.intro-item {
max-width: 800px;
width: 100%;
margin: 0 auto; /* fallback centering if you ever switch out of flex */
}
/* 2) Give the wrapper an aspect ratio so it “holds” space */
.intro-wrapper {
width: 100%;
aspect-ratio: 16 / 9; /* modern CSS for 16:9 videos */
position: relative; /* for the absolute‐positioned iframe */
}
/* 3) Make the iframe fill that wrapper */
.intro-wrapper iframe {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
footer { text-align: center; padding: 2rem 0; font-size: var(--type-small); color: #6c757d; }
</style>
</head>
<body class="site-layout site-layout--lab project-page">
<header class="header">
<div class="logo-title">
<img src="https://raw.githubusercontent.com/declare-lab/nora/main/assets/nora-logo.png" alt="NORA Logo" class="logo">
<h1 class="main-title">NORA</h1>
</div>
<h2 class="subtitle">A Small Open-Sourced Generalist Vision Language Action Model for Embodied Tasks</h2>
<div class="authors">Chia-Yu Hung, Qi Sun, Pengfei Hong, Amir Zadeh, Chuan Li, U-Xuan Tan, Navonil Majumder, Soujanya Poria</div>
<div class="affiliations">
<a href="https://declare-lab.github.io/" target="_blank"><img src="https://declare-lab.github.io/rec-light.png" alt="DeCLaRe Lab"></a>
<a href="https://www.sutd.edu.sg/" target="_blank"><img src="https://scholarshipguide.com.sg/images/providers/94.png" alt="SUTD"></a>
<a href="https://lambdalabs.com/" target="_blank"><img src="https://trust.lambda.ai/api/share/a1d6b6ac-7647-40c6-b836-673f56b9feaf/logo.png" alt="Lambda Labs"></a>
</div>
<div class="links">
<a href="https://arxiv.org/abs/2504.19854" class="btn btn-lg" target="_blank">arXiv</a>
<a href="https://github.com/declare-lab/nora" class="btn btn-lg" target="_blank">GitHub</a>
<a href="https://huggingface.co/collections/declare-lab/nora-6811ba3e820ef362d9eca281" class="btn btn-lg" target="_blank">Hugging Face</a>
</div>
</header>
<main>
<!-- Intro Video -->
<section>
<div class="intro-grid">
<div class="intro-item">
<div class="intro-wrapper">
<iframe
data-src="https://www.youtube.com/embed/_6AsL7AAPzk?si=di4MXco-w73zlj1y"
allow="encrypted-media; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</div>
</div>
</section>
<!-- Abstract -->
<section class="abstract">
<h2>Abstract</h2>
<p>Existing Visual-Language-Action (VLA) models have shown promising performance in zero-shot scenarios, demonstrating impressive task execution and reasoning capabilities. However, a significant challenge arises from the limitations of visual encoding, which can result in failures during tasks such as object grasping. Moreover, these models typically suffer from high computational overhead due to their large sizes, often exceeding 7B parameters. While these models excel in reasoning and task planning, the substantial computational overhead they incur makes them impractical for real-time robotic environments, where speed and efficiency are paramount. Given the common practice of fine-tuning VLA models for specific tasks, there is a clear need for a smaller, more efficient model that can be fine-tuned on consumer-grade GPUs. To address the limitations of existing VLA models, we propose NORA, a 3B-parameter model designed to reduce computational overhead while maintaining strong task performance. NORA adopts the Qwen-2.5-VL-3B multimodal model as the backbone, leveraging its superior visual-semantic understanding to enhance visual reasoning and action grounding. Additionally, our NORA is trained on 970k real-world robot demonstrations and equipped with the FAST+ tokenizer for efficient action sequence generation. Experimental results demonstrate that NORA outperforms existing large-scale VLA models, achieving better task performance with significantly reduced computational overhead, making it a more practical solution for real-time robotic autonomy.</p>
</section>
<!-- Teaser with Title -->
<section class="teaser-section">
<h2>Summarized Performance with WidowX</h2>
<img src="https://declare-lab.github.io/NORA_teaser.png" alt="NORA Teaser" class="teaser">
</section>
<!-- The Framework -->
<section class="architecture">
<h2>The Framework</h2>
<img src="https://declare-lab.github.io/NORA.png" alt="NORA Architecture">
</section>
<!-- Examples of NORA Performing Difficult Tasks -->
<section>
<h2>Examples of NORA Performing Difficult Tasks</h2>
<div class="video-grid">
<div class="video-item">
<div class="iframe-wrapper"><iframe data-src="https://www.youtube.com/embed/HiYl45UZLZw?si=2VLnDXTyNHXlm1eR" allowfullscreen></iframe></div>
<div class="video-caption">With object distraction: Put the pink toy in pot</div>
</div>
<div class="video-item">
<div class="iframe-wrapper"><iframe data-src="https://www.youtube.com/embed/uwFSFn1sqmk?si=iNxxOeiaQEjswyGx" allowfullscreen></iframe></div>
<div class="video-caption">With human distraction: Put the carrot in pot</div>
</div>
<div class="video-item">
<div class="iframe-wrapper"><iframe data-src="https://www.youtube.com/embed/txOXdlM40oQ?si=WNe2O4d3WrCzgr4F" allowfullscreen></iframe></div>
<div class="video-caption">With human + object distraction: Put the pink toy in pot</div>
</div>
</div>
</section>
<!-- More Examples of NORA in Action -->
<section>
<h2>More Examples of NORA in Action</h2>
<div class="video-grid">
<div class="video-item"><div class="iframe-wrapper"><iframe data-src="https://www.youtube.com/embed/vhRcvLRs5lI" allowfullscreen></iframe></div><div class="video-caption">Put the blue cube on the plate</div></div>
<div class="video-item"><div class="iframe-wrapper"><iframe data-src="https://www.youtube.com/embed/k3seqSaGftU" allowfullscreen></iframe></div><div class="video-caption">Put the corn and carrot in pan</div></div>
<div class="video-item"><div class="iframe-wrapper"><iframe data-src="https://www.youtube.com/embed/8RzuMsOkw2o" allowfullscreen></iframe></div><div class="video-caption">Put banana and carrot in pot</div></div>
<div class="video-item"><div class="iframe-wrapper"><iframe data-src="https://www.youtube.com/embed/AFZP3-1MEvY" allowfullscreen></iframe></div><div class="video-caption">Move the banana close to the pan</div></div>
<div class="video-item"><div class="iframe-wrapper"><iframe data-src="https://www.youtube.com/embed/L9eydFNtEWI" allowfullscreen></iframe></div><div class="video-caption">Put carrot in the pot</div></div>
<div class="video-item"><div class="iframe-wrapper"><iframe data-src="https://www.youtube.com/embed/N0ZTQq3G37A" allowfullscreen></iframe></div><div class="video-caption">Put the pink toy at the right corner</div></div>
<div class="video-item"><div class="iframe-wrapper"><iframe data-src="https://www.youtube.com/embed/QigpozIXbQ0" allowfullscreen></iframe></div><div class="video-caption">Put the carrot and hotdog in pot</div></div>
<div class="video-item"><div class="iframe-wrapper"><iframe data-src="https://www.youtube.com/embed/Xajw9eaB940" allowfullscreen></iframe></div><div class="video-caption">Put the blue cube on the plate</div></div>
<div class="video-item"><div class="iframe-wrapper"><iframe data-src="https://www.youtube.com/embed/YF6RH24j5nI" allowfullscreen></iframe></div><div class="video-caption">Put banana in pot</div></div>
<div class="video-item"><div class="iframe-wrapper"><iframe data-src="https://www.youtube.com/embed/ftHc9aISAQw" allowfullscreen></iframe></div><div class="video-caption">Put the red bottle and the hamburger in the pan</div></div>
</div>
</section>
</main>
<footer>© 2025 DeCLaRe Lab, Singapore University of Technology and Design</footer>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Helper to build a looped YouTube embed URL
function buildYouTubeUrl(baseSrc) {
// Extract the video ID from the embed URL
const match = baseSrc.match(/\/embed\/([^?&]+)/);
const videoId = match ? match[1] : '';
const url = new URL(baseSrc);
// Always mute, loop, and autoplay
url.searchParams.set('autoplay', '1');
url.searchParams.set('mute', '1');
url.searchParams.set('loop', '1');
// Required for looping: playlist must equal the same video ID
if (videoId) {
url.searchParams.set('playlist', videoId);
}
return url.toString();
}
// Load all iframes initially (but without autoplay/loop until in view)
document.querySelectorAll('iframe[data-src]').forEach(iframe => {
iframe.src = iframe.getAttribute('data-src');
});
// Observe scroll position to trigger autoplay+loop when 60% visible
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
const iframe = entry.target;
const baseSrc = iframe.getAttribute('data-src');
if (entry.isIntersecting) {
// Build and set the looped autoplay URL
iframe.src = buildYouTubeUrl(baseSrc);
} else {
// Reset back to the non-playing base URL
iframe.src = baseSrc;
}
});
}, { threshold: 0.6 });
// Start observing each iframe
document.querySelectorAll('iframe[data-src]').forEach(el => observer.observe(el));
});
</script>
</body>
</html>