PageSourceSearch

https://mesatask.github.io/

html mesatask.github.io collected 2026-10-03 09:35:55 UTC 32,829 bytes, 833 lines download raw bytes

1<!DOCTYPE html>
2<html xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
3<head>
4  <meta charset="utf-8">
5  <meta name="description" content="DESCRIPTION META TAG">
6  <meta property="og:title" content="SOCIAL MEDIA TITLE TAG"/>
7  <meta property="og:description" content="SOCIAL MEDIA DESCRIPTION TAG TAG"/>
8  <meta property="og:url" content="URL OF THE WEBSITE"/>
9  <meta property="og:image" content="static/image/your_banner_image.png" />
10  <meta property="og:image:width" content="1200"/>
11  <meta property="og:image:height" content="630"/>
12
13
14  <meta name="twitter:title" content="TWITTER BANNER TITLE META TAG">
15  <meta name="twitter:description" content="TWITTER BANNER DESCRIPTION META TAG">
16  <meta name="twitter:image" content="static/images/your_twitter_banner_image.png">
17  <meta name="twitter:card" content="summary_large_image">
18  <!-- Keywords for your paper to be indexed by-->
19  <meta name="keywords" content="Open-Vocabulary, Physical skill, Interactive agent">
20  <meta name="viewport" content="width=device-width, initial-scale=1">
21  <title>MesaTask: Towards Task-Driven Tabletop Scene Generation via 3D Spatial Reasonings</title>
22
23   <link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro"
24  rel="stylesheet">
25
26  <link rel="stylesheet" href="static/css/bulma.min.css">
27  <link rel="stylesheet" href="static/css/bulma-carousel.min.css">
28  <link rel="stylesheet" href="static/css/bulma-slider.min.css">
29<!--  <link rel="stylesheet" href="static/css/fontawesome.all.min.css">-->
30  <link rel="stylesheet"
31  href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
32  <link rel="stylesheet" href="static/css/index.css">
33
34  <style>
35    /* Gallery specific styles */
36    .tip-label {
37      position: absolute;
38      top: 10px;
39      right: 10px;
40      background: rgba(0,0,0,0.7);
41      color: white;
42      padding: 4px 8px;
43      border-radius: 4px;
44      font-size: 0.75rem;
45      cursor: help;
46      z-index: 10;
47    }
48
49    .tip-label:hover::after {
50      content: attr(data-tooltip);
51      position: absolute;
52      top: 100%;
53      right: 0;
54      background: rgba(0,0,0,0.9);
55      color: white;
56      padding: 8px 12px;
57      border-radius: 4px;
58      font-size: 0.8rem;
59      white-space: nowrap;
60      max-width: 300px;
61      white-space: normal;
62      width: max-content;
63      z-index: 1000;
64      margin-top: 5px;
65    }
66
67    .scene-viewer-container {
68      position: relative;
69    }
70
71    .object-info-container {
72      position: relative;
73    }
74
75    .object-item:hover {
76      box-shadow: 0 4px 12px rgba(50, 115, 220, 0.15) !important;
77    }
78
79    .object-item.selected {
80      background: #e8f4fd !important;
81      border-color: #3273dc !important;
82      transform: scale(1.02);
83    }
84
85    #sceneViewer canvas {
86      border-radius: 8px;
87    }
88
89    .task-display {
90      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
91    }
92
93    .scene-selection .field.has-addons {
94      justify-content: center;
95    }
96
97    /* Animation for smooth interactions */
98    .object-item {
99      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
100    }
101
102    /* Loading spinner animation */
103    @keyframes spin {
104      0% { transform: rotate(0deg); }
105      100% { transform: rotate(360deg); }
106    }
107
108    .fa-spinner.fa-spin {
109      animation: spin 1s linear infinite;
110    }
111
112    /* Responsive adjustments */
113    @media (max-width: 768px) {
114      .columns.is-variable.is-6 {
115        flex-direction: column;
116      }
117      
118      #sceneViewer {
119        height: 300px !important;
120      }
121      
122      .object-info-wrapper {
123        max-height: 300px !important;
124      }
125    }
126
127    /* Scene Thumbnail Styles */
128    .scene-thumbnails-container {
129      position: relative;
130      width: 100%;
131      max-width: 900px;
132      margin: 0 auto;
133      overflow: hidden;
134    }
135
136    .scene-thumbnails {
137      display: flex;
138      gap: 20px;
139      transition: transform 0.3s ease;
140      padding: 0 20px;
141    }
142
143    .thumbnail-nav {
144      position: absolute;
145      top: 50%;
146      transform: translateY(-50%);
147      width: 40px;
148      height: 40px;
149      background: rgba(255, 255, 255, 0.9);
150      border: 2px solid #ddd;
151      border-radius: 50%;
152      display: flex;
153      align-items: center;
154      justify-content: center;
155      cursor: pointer;
156      transition: all 0.3s ease;
157      z-index: 10;
158      font-size: 16px;
159      color: #666;
160    }
161
162    .thumbnail-nav:hover {
163      background: white;
164      border-color: #3273dc;
165      color: #3273dc;
166      box-shadow: 0 4px 12px rgba(50, 115, 220, 0.2);
167    }
168
169    .thumbnail-nav.disabled {
170      opacity: 0.3;
171      cursor: not-allowed;
172      pointer-events: none;
173    }
174
175    .thumbnail-nav-prev {
176      left: 10px;
177    }
178
179    .thumbnail-nav-next {
180      right: 10px;
181    }
182
183    .scene-thumbnail {
184      position: relative;
185      width: 200px;
186      height: 150px;
187      border: 3px solid #ddd;
188      border-radius: 12px;
189      overflow: hidden;
190      cursor: pointer;
191      transition: all 0.3s ease;
192      background: #f8f9fa;
193      display: flex;
194      flex-direction: column;
195      flex-shrink: 0;
196    }
197
198    .scene-thumbnail:hover {
199      border-color: #3273dc;
200      transform: translateY(-3px);
201      box-shadow: 0 8px 25px rgba(50, 115, 220, 0.2);
202    }
203
204    .scene-thumbnail.active {
205      border-color: #00d1b2;
206      box-shadow: 0 0 20px rgba(0, 209, 178, 0.4);
207    }
208
209    .scene-thumbnail-preview {
210      width: 100%;
211      height: 100px;
212      background: #f0f0f0;
213      position: relative;
214      overflow: hidden;
215    }
216
217    .scene-thumbnail-info {
218      padding: 8px 12px;
219      background: white;
220      text-align: center;
221      flex: 1;
222      display: flex;
223      flex-direction: column;
224      justify-content: center;
225    }
226
227    .scene-thumbnail-title {
228      font-weight: 600;
229      font-size: 0.9rem;
230      color: #333;
231      margin-bottom: 2px;
232    }
233
234    .scene-thumbnail-desc {
235      font-size: 0.75rem;
236      color: #666;
237      line-height: 1.2;
238    }
239
240    .thumbnail-loading {
241      display: flex;
242      align-items: center;
243      justify-content: center;
244      color: #999;
245      font-size: 0.8rem;
246    }
247  </style>
248
249  
249<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
249
250  
250<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
250
251<!--  
251<script defer src="static/js/fontawesome.all.min.js"></script>
251-->
252  
252<script src="https://kit.fontawesome.com/d383128d10.js" crossorigin="anonymous"></script>
252
253  
253<script src="static/js/bulma-carousel.min.js"></script>
253
254  
254<script src="static/js/bulma-slider.min.js"></script>
254
255  
255<script src="static/js/index.js"></script>
255
256
257
258
259  
259<script type="importmap">
260    {
261      "imports": {
262        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
263        "three": "https://unpkg.com/[email protected]/build/three.module.js",
264        "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
265      }
266    }
267  </script>
267
268</head>
269<!-- Google tag (gtag.js) -->
vendor: 64 bytes, lines 269-270
269
270<script async src="https://www.googletagmanager.com/gtag/js?id=
270G-KC36P9N5PB
vendor: 12 bytes, line 270
270"></script>
271<script>
272  
vendor: 134 bytes, lines 272-276
272window.dataLayer = window.dataLayer || [];
273  function gtag(){dataLayer.push(arguments);}
274  gtag('js', new Date());
275
276  gtag('config', '
276G-KC36P9N5PB
vendor: 4 bytes, line 276
276');
277</script>
277
278
279
280<body>
281
282  <section class="hero" style="position: relative; overflow: hidden;">
283
284  <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;">
285
286    <!-- 将video元素替换为img元素 -->
287    <img src="static/images/dataset_img.png" 
288         alt="Background Image"
289         style="width: 100%; height: 100%; object-fit: cover;">
290
291    <!-- 保持渐变遮罩层 -->
292    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;
293                background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));">
294    </div>
295  </div>
296
297    <div class="hero-body">
298      <div class="container is-max-desktop">
299        <div class="columns is-centered">
300          <div class="column has-text-centered">
301
302            <h1 class="title is-1 has-text-white" style="
303                font-size: clamp(2.8rem, 5.5vw, 4rem); 
304                font-weight: 600;
305                text-shadow: 
306                    0 2px 4px rgba(0,0,0,0.8),
307                    0 8px 20px rgba(0,0,0,0.4);
308                line-height: 1.2;
309                letter-spacing: -0.01em;
310                margin-bottom: 2rem;
311                text-align: center;">
312              <span style="display: block; font-weight: 800; margin-bottom: 0.3em;">MesaTask</span>
313              <span style="font-size: 0.65em; font-weight: 400; opacity: 0.95; line-height: 1.3;">
314                Towards Task-Driven Tabletop Scene Generation<br>via 3D Spatial Reasoning
315              </span>
316            </h1>
317
318
319            <div class="is-size-5 publication-authors">
320              <span class="author-block">
321                <a href="https://jinkun-hao.github.io/">Jinkun Hao</a><sup>1*</sup>,</span>
322              <span class="author-block">
323                Naifu Liang<sup>2*</sup>,
324              </span>
325              <span class="author-block">
326                <a href="https://scholar.google.com/citations?user=hYXbJgcAAAAJ&hl=zh-CN">Zhen luo</a><sup>3,4*</sup>,
327              </span>
328              <span class="author-block">
329                <a href="https://sheldontsui.github.io/">Xudong Xu</a><sup>2‡</sup>,
330              </span>
331              <span class="author-block">
332                Weipeng Zhong<sup>2</sup>,
333              </span>
334              <span class="author-block">
335                <a href="https://yiranran.github.io/">Ran Yi</a><sup>1</sup>,
336              </span>
337              <span class="author-block">
338                Yichen Jin<sup>5</sup>,
339              </span>
340              <span class="author-block">
341                <a href="https://zhaoyanglyu.github.io/">Zhaoyang Lyu</a><sup>2</sup>,
342              </span>
343              <span class="author-block">
344                <a href="https://www.sustech.edu.cn/en/faculties/zhengfeng.html">Feng Zheng</a><sup>4</sup>,
345              </span>
346              <span class="author-block">
347                <a href="https://dmcv.sjtu.edu.cn/people/">Lizhuang Ma</a><sup>1✉️</sup>,
348              </span>
349              <span class="author-block">
350                <a href="https://oceanpang.github.io/">Jiangmiao Pang</a><sup>2</sup></span>
351            </div>
352
353            <div class="is-size-5 publication-authors">
354              <span class="author-block"><sup>1</sup>Shanghai Jiao Tong University,</span>
355              <span class="author-block"><sup>2</sup>Shanghai AI Laboratory,</span>
356              <span class="author-block"><sup>3</sup>SII,</span>
357              <span class="author-block"><sup>4</sup>Southern University of Science and Technology,</span>
358              <span class="author-block"><sup>5</sup>Peking University</span>
359            </div>
360
361            <div class="is-size-6" style="color: #aaa; margin-bottom: -1.5rem;">
362              <span>* equal contribution, ‡ project lead, ✉️ corresponding author</span>
363            </div>
364
365          </div>
366        </div>
367      </div>
368    </div>
369  </section>
370
371
372  <div class="column has-text-centered">
373              <div class="publication-links">
374                <!-- PDF Link. -->
375                <span class="link-block">
376                  <a href="assets/MesaTask_paper.pdf"
377                     class="external-link button is-normal is-rounded is-dark">
378                    <span class="icon">
379                        <i class="fas fa-file-pdf"></i>
380                    </span>
381                    <span>Paper</span>
382                  </a>
383                </span>
384                <!-- ArXiv Link -->
385                <span class="link-block">
386                  <a href="https://arxiv.org/abs/2509.22281"
387                     class="external-link button is-normal is-rounded is-dark">
388                    <span class="icon">
389                        <i class="ai ai-arxiv"></i>
390                    </span>
391                    <span>arXiv</span>
392                  </a>
393                </span>
394                <!-- <span class="link-block">
395                  <a href="https://mesatask.github.io/"
396                     class="external-link button is-normal is-rounded is-dark">
397                    <span class="icon">
398                        <i class="fab fa-youtube"></i>
399                    </span>
400                    <span>Video</span>
401                  </a>
402                </span> -->
403                <!-- Code Link. -->
404                <span class="link-block">
405                  <a href="https://github.com/InternRobotics/MesaTask"
406                     class="external-link button is-normal is-rounded is-dark">
407                    <span class="icon">
408                        <i class="fab fa-github"></i>
409                    </span>
410                    <span>Code</span>
411                    </a>
412                </span>
413                <!-- Dataset Link.-->
414                <span class="link-block">
415                  <a href="https://huggingface.co/datasets/InternRobotics/MesaTask-10K"
416                     class="external-link button is-normal is-rounded is-dark">
417                    <span class="icon">
418                        <i class="far fa-images"></i>
419                    </span>
420                    <span>Data</span>
421                    </a>
422              </div>
423            </div>
424
425<div class="paper-section">
426  <div class="neurips-badge" style="color: #ff0000; font-weight: 700; font-size: 1.8rem; margin-bottom: 1rem; text-align: center; letter-spacing: 0.5px;">
427    NeurIPS 2025 Spotlight
428  </div>
429
430<!-- Paper abstract -->
431<section class="hero is-small">
432  <div class="hero-body">
433    <div class="container is-max-desktop">
434      <div class="columns is-centered has-text-centered">
435        <div class="column is-four-fifths">
436          <h2 class="title is-3">&#128161;Abstract</h2>
437          <div class="content has-text-justified">
438            <p>
439              The ability of robots to interpret human instructions and execute manipulation tasks necessitates the availability of task-relevant tabletop scenes for training.
440However, traditional methods for creating these scenes rely on time-consuming manual layout design or purely randomized layouts, which are limited in terms of plausibility or alignment with the tasks.
441In this paper, we formulate a novel task, namely task-oriented tabletop scene generation, which poses significant challenges due to the substantial gap between high-level task instructions and the tabletop scenes.
442To support research on such a challenging task, we introduce <span class="title is-6">MesaTask-10K</span>, a large-scale dataset comprising approximately 10,700 synthetic tabletop scenes with <span class="title is-6">manually crafted layouts</span> that ensure realistic layouts and intricate inter-object relations.
443To bridge the gap between tasks and scenes, we propose a <span class="title is-6">Spatial Reasoning Chain</span> that decomposes the generation process into object inference, spatial interrelation reasoning, and scene graph construction for the final 3D layout.
444We present <span class="title is-6">MesaTask</span>, an LLM-based framework that utilizes this reasoning chain and is further enhanced with DPO algorithms to generate physically plausible tabletop scenes that align well with given task descriptions.
445Exhaustive experiments demonstrate the superior performance of MesaTask compared to baselines in generating task-conforming tabletop scenes with realistic layouts.
446            </p>
447          </div>
448        </div>
449      </div>
450
451      <!-- Teaser demo -->
452
453    <div class="hero-body">
454      <div class="image-container" style="text-align: center;">
455        <img src="static/images/teaser_final.png" 
456             alt="MesaTask Teaser Image"
457             style="width: 100%; max-width: 1000px; height: auto;">
458      </div>
459
460      <h2 class="subtitle has-text-centered">
461        MesaTask generates 3D tabletop scenes directly from human instructions. To support this task, we construct a large-scale dataset of tabletop scenes, MesaTask-10K.
462      </h2>
463    </div>
464
465      <!-- Demo Video -->
466      <section class="hero is-small">
467        <div class="hero-body">
468          <div class="container is-max-desktop">
469            <div class="columns is-centered has-text-centered">
470              <div class="column is-full">
471                
472                <div class="video-container" style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.15);">
473                  <video controls 
474                          autoplay 
475                          muted 
476                          loop 
477                          playsinline
478                          style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px;">
479                    <source src="static/videos/demo_short_new.mp4" type="video/mp4">
480                    Your browser does not support the video tag.
481                  </video>
482                </div>
483
484              </div>
485            </div>
486          </div>
487        </div>
488      </section>
489      <!-- End Demo Video -->
490
491
492<!-- Interactive Scene Gallery Section -->
493<section class="section" style="background: white; padding: 2rem 0;">
494  <div class="container is-max-desktop">
495    
496    <!-- Gallery Title -->
497    <h2 class="title is-3 has-text-centered mb-5">🎨 Interactive Scene Gallery</h2>
498    
499    <!-- Gallery 3D Viewer and Object Info Panel -->
500    <div class="columns is-variable is-6">
501      <!-- Left Side: 3D Scene Viewer -->
502      <div class="column is-half">
503        <div class="scene-viewer-container">
504          <h4 class="title is-5 has-text-centered">3D Scene Viewer</h4>
505          
506          <!-- Task Display -->
507          <div class="task-display" style="background: #fff; padding: 1rem; margin-bottom: 1rem; border-radius: 8px; border: 1px solid #ddd;">
508            <h5 style="margin: 0 0 0.5rem 0; color: #3273dc; font-weight: bold;">📋 Task:</h5>
509            <p id="taskDescription" style="margin: 0; color: #333; font-size: 0.95rem;">Loading task description...</p>
510          </div>
511          
512          <div class="tip-label scene-tip" data-tooltip="Left click and drag to orbit • Middle click/scroll to zoom • Right click to pan • Click on objects to select them">
513            Tip
514          </div>
515          <div class="model-viewer-wrapper">
516            <div id="sceneViewer" style="width: 100%; height: 300px; background-color: #f5f5f5; border-radius: 8px; border: 1px solid #ddd; position: relative;">
517              <div class="loading-indicator" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #666;">
518                <i class="fas fa-cube fa-3x" style="margin-bottom: 1rem;"></i>
519                <p>Loading 3D Scene...</p>
520              </div>
521            </div>
522          </div>
523          
524          <!-- Scene Controls -->
525          <div class="viewer-controls" style="margin-top: 1rem; text-align: center;">
526            <button class="button is-small is-primary" id="resetSceneViewBtn">Reset View</button>
527            <button class="button is-small is-info" id="toggleWireframeBtn">Toggle Wireframe</button>
528          </div>
529        </div>
530      </div>
531      
532      <!-- Right Side: Object Information Panel -->
533      <div class="column is-half">
534        <div class="object-info-container">
535          <h4 class="title is-5 has-text-centered">Object Information</h4>
536          <div class="tip-label info-tip" data-tooltip="Click on objects in the 3D scene to see detailed information here">
537            Tip
538          </div>
539          
540          <!-- Object List -->
541          <div class="object-info-wrapper" style="background: #fff; border-radius: 8px; border: 1px solid #ddd; max-height: 380px; overflow-y: auto;">
542            <div id="objectInfoPanel" style="padding: 1rem;">
543              <div class="has-text-centered" style="color: #999; padding: 2rem;">
544                <i class="fas fa-mouse-pointer fa-2x" style="margin-bottom: 1rem;"></i>
545                <p>Click on objects in the 3D scene to view their details</p>
546              </div>
547            </div>
548          </div>
549        </div>
550      </div>
551    </div>
552    
553    <!-- Scene Selection Thumbnails -->
554    <div class="scene-selection" style="text-align: center; margin-top: 2rem;">
555      <h4 class="subtitle is-5 mb-3">Select Scene</h4>
556      <div class="scene-thumbnails-container">
557        <div class="thumbnail-nav thumbnail-nav-prev" id="thumbnailPrev">
558          <i class="fas fa-chevron-left"></i>
559        </div>
560        <div class="scene-thumbnails" id="sceneThumbnails">
561          <!-- Thumbnails will be generated here -->
562        </div>
563        <div class="thumbnail-nav thumbnail-nav-next" id="thumbnailNext">
564          <i class="fas fa-chevron-right"></i>
565        </div>
566      </div>
567    </div>
568    
569  </div>
570</section>
571<!-- End Interactive Scene Gallery -->
572
573
574<!-- Manipulation Results -->
575<section class="section" style="background: #f8f9fa; padding: 2rem 0;">
576  <div class="container is-max-desktop">
577    <div class="columns is-centered has-text-centered">
578      <div class="column is-full">
579        <h2 class="title is-3">🤖 Manipulation Demo</h2>
580        <p style="margin-bottom: 2rem; color: #6c757d; font-size: 1.1rem;">
581          Demonstration of robotic manipulation on our generated tabletop scenes.
582        </p>
583        
584        <!-- Scene 1 -->
585        <div style="margin-bottom: 3rem;">
586          <h3 class="title is-5" style="margin-bottom: 1.5rem; color: #3273dc;">
587            📍 Task 1: Place the banana on the plate.
588          </h3>
589          <div class="columns is-centered">
590            <div class="column is-5">
591              <div style="position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.12);">
592                <img src="static/videos/manip/banana_fro.gif" style="width: 100%; height: auto; border-radius: 12px;" alt="Banana task view 1">
593                <div style="position: absolute; bottom: 10px; left: 10px; background: rgba(0,0,0,0.7); color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.8rem;">
594                  View 1
595                </div>
596              </div>
597            </div>
598            <div class="column is-5">
599              <div style="position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.12);">
600                <img src="static/videos/manip/banana_back.gif" style="width: 100%; height: auto; border-radius: 12px;" alt="Banana task view 2">
601            </div>
602          </div>
603        </div>
604
605        <!-- Task 2 -->
606        <div style="margin-bottom: 2rem;">
607          <h3 class="title is-5" style="margin-bottom: 1.5rem; color: #28a745;">
608            📍 Task 2: Organize the office table by moving the mouse to the middle.
609          </h3>
610          <div class="columns is-centered">
611            <div class="column is-5">
612              <div style="position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.12);">
613                <img src="static/videos/manip/mouse_fro.gif" style="width: 100%; height: auto; border-radius: 12px;" alt="Mouse task view 1">
614                <div style="position: absolute; bottom: 10px; left: 10px; background: rgba(0,0,0,0.7); color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.8rem;">
615                  View 1
616                </div>
617              </div>
618            </div>
619            <div class="column is-5">
620              <div style="position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.12);">
621                <img src="static/videos/manip/mouse_back.gif" style="width: 100%; height: auto; border-radius: 12px;" alt="Mouse task view 2">
622                <div style="position: absolute; bottom: 10px; left: 10px; background: rgba(0,0,0,0.7); color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.8rem;">
623                  View 2
624                </div>
625              </div>
626            </div>
627          </div>
628        </div>
629
630        <p style="margin-top: 2rem; color: #6c757d; font-style: italic; line-height: 1.5;">
631          Our MesaTask framework generates sim-ready tabletop scenes that support robotic manipulation tasks.
632        </p>
633      </div>
634    </div>
635  </div>
636</section>
637<!-- End Manipulation Results -->
638
639
640<!-- End teaser demo -->
641
642      <!-- Dataset -->
643      <div class="columns is-centered has-text-centered">
644        <div class="column is-full">
645          <h2 class="title is-3">🗂️ Data Curation</h2>
646          <div class="publication-gif">
647            <img src="static/images/dataset_construct.png" 
648                 alt="Dataset Overview"
649                 style="width: 95%;">
650              <p style="text-align: left;">
651                <span class="title is-6">The dataset construction pipeline.</span>
652                First, an LLM is used to generate diverse tabletop scene descriptions, including relevant object lists and spatial relations. Conditioned on the scene description, a text-to-image model synthesizes reference images, from which coarse 3D layouts are built using depth estimation, object detection, and 3D asset retrieval. These layouts are refined through human annotations and physical simulation to ensure spatial plausibility, yielding high-quality 3D layouts.
653              </p>
654          </div>
655        </div>
656      </div>
657      <!--/ Dataset -->
658
659      <!-- Method -->
660      <div class="columns is-centered has-text-centered">
661        <div class="column is-full">
662          <h2 class="title is-3">⚙️ Method</h2>
663          <div class="publication-gif">
664            <img src="static/images/method_mesatask.png" 
665                alt="Dataset Overview"
666                style="width: 95%;">
667              <div style="text-align: left; line-height: 1.6;">
668                <p style="margin-bottom: 1.5rem;">
669                  <span class="title is-5" style="color: #3273dc;">🔍 Overview of our MesaTask Framework</span>
670                </p>
671                
672                <div style="margin-bottom: 1.5rem; padding: 1rem; background-color: #f8f9fa; border-left: 4px solid #3273dc; border-radius: 4px;">
673                  <p><span style="font-weight: bold; color: #e74c3c;">1) Task-to-Scene Generation</span> <span style="font-size: 0.9em; color: #6c757d;">(upper-left)</span></p>
674                  <p style="margin-top: 0.5rem;">
675                    Given a task instruction, we extract detailed task information including <strong>environment</strong>, <strong>sub-goals</strong>, and <strong>task-relevant objects</strong>. A structured spatial reasoning chain performs object list completion, interrelation inference, and scene graph construction, which guides the generation of 3D layouts. Final scenes are obtained via 3D asset retrieval.
676                  </p>
677                </div>
678
679                <div style="margin-bottom: 1.5rem; padding: 1rem; background-color: #f8f9fa; border-left: 4px solid #28a745; border-radius: 4px;">
680                  <p><span style="font-weight: bold; color: #28a745;">2) Reasoning Data Construction</span> <span style="font-size: 0.9em; color: #6c757d;">(bottom)</span></p>
681                  <p style="margin-top: 0.5rem;">
682                    Based on scene graphs and descriptions of our <span style="font-weight: bold; color: #6f42c1;">MesaTask-10K</span> dataset, a multimodal LLM is leveraged to produce <strong>task instructions</strong>, <strong>detailed task information</strong>, and <strong>complete object lists and interrelations</strong>.
683                  </p>
684                </div>
685
686                <div style="margin-bottom: 1.5rem; padding: 1rem; background-color: #f8f9fa; border-left: 4px solid #fd7e14; border-radius: 4px;">
687                  <p><span style="font-weight: bold; color: #fd7e14;">3) DPO Data Construction</span> <span style="font-size: 0.9em; color: #6c757d;">(upper right)</span></p>
688                  <p style="margin-top: 0.5rem;">
689                    To enable DPO training, we generate <span style="font-weight: bold; color: #dc3545;">negative examples</span> by randomly perturbing object positions or relations and removing key objects from normal layouts.
690                  </p>
691                </div>
692              </div>
693          </div>
694        </div>
695      </div>
696      <!--/ Method -->
697
698
699
700
701      
702    </div>
703  </div>
704</section>
705<!-- End paper abstract -->
706
707
708      <!-- Demo Video -->
709      <section class="hero is-small">
710        <div class="hero-body">
711          <div class="container is-max-desktop">
712            <div class="columns is-centered has-text-centered">
713              <div class="column is-full">
714                
715                <div class="video-container" style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.15);">
716                  <video controls 
717                          autoplay 
718                          muted 
719                          loop 
720                          playsinline
721                          style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px;">
722                    <source src="static/videos/page_demo.mp4" type="video/mp4">
723                    Your browser does not support the video tag.
724                  </video>
725                </div>
726
727              </div>
728            </div>
729          </div>
730        </div>
731      </section>
732      <!-- End Demo Video -->
733
734
735
736
737
738
739
740
741
742<!--BibTex citation -->
743<section class="section" id="BibTeX">
744  <div class="container is-max-desktop content">
745    <div class="has-text-centered">
746      <h2 class="title is-3">BibTeX</h2>
747    </div>
748    <pre><code>@misc{hao2025mesatask,
749      title={MesaTask: Towards Task-Driven Tabletop Scene Generation via 3D Spatial Reasoning}, 
750      author={Hao, Jinkun and Liang, Naifu and Luo, Zhen and Xu, Xudong and Zhong, Weipeng and Yi, Ran and Jin, Yichen and Lyu, Zhaoyang and Zheng, Feng and Ma, Lizhuang and Pang, Jiangmiao},
751      journal={arXiv preprint arXiv:2509.22281},
752      year={2025}
753    }
754</code></pre>
755  </div>
756</section>
757<!--End BibTex citation -->
758
759
760<footer class="footer">
761  <div class="container">
762    <div class="columns is-centered">
763      <div class="column is-8">
764        <div class="content has-text-centered">
765          <p>
766            This page was built using the <a href="https://github.com/eliahuhorwitz/Academic-project-page-template" target="_blank">Academic Project Page Template</a> which was adopted from the <a href="https://nerfies.github.io" target="_blank">Nerfies</a> project page.
767            The visual designs are inspired from the <a href="https://daibingquan.github.io/MeshCoder/#" target="_blank">MeshCoder</a>. 
768          </p>
769        </div>
770      </div>
771    </div>
772  </div>
773</footer>
774
775<!-- Statcounter tracking code -->
776
777<!-- You can add a tracker to track page visits by creating an account at statcounter.com -->
778
779<!-- End of Statcounter Code -->
780
781<script src="./animate.js" type="module"></script>
vendor: 1 bytes, line 781
781
782<script type="module">
783    // Import and initialize gallery
784    import { SceneGallery } from './gallery.js';
785    
786    // Ensure DOM is fully loaded before initializing
787    if (document.readyState === 'loading') {
788        document.addEventListener('DOMContentLoaded', initializeGallery);
789    } else {
790        // DOM is already loaded
791        initializeGallery();
792    }
793    
794    function initializeGallery() {
795        console.log('Initializing gallery from inline script...');
796        
797        // Wait for elements to be available
798        setTimeout(() => {
799            const sceneViewer = document.getElementById('sceneViewer');
800            console.log('Scene viewer element found:', !!sceneViewer);
801            
802            if (sceneViewer) {
803                try {
804                    window.sceneGallery = new SceneGallery();
805                    console.log('Gallery initialized successfully from inline script');
806                } catch (error) {
807                    console.error('Error initializing gallery:', error);
808                }
809            } else {
810                console.error('sceneViewer element not found in DOM');
811                // Debug: list all elements with IDs
812                const elementsWithIds = document.querySelectorAll('[id]');
813                console.log('Available elements with IDs:', Array.from(elementsWithIds).map(el => el.id));
814            }
815        }, 1000);
816    }
817</script>
817
818
819
820</body>
821
822
823
824<script>
825  new BeforeAfter({id: '#h3d-one'});
826  new BeforeAfter({id: '#h3d-two'});
827  new BeforeAfter({id: '#h3d-three'});
828  new BeforeAfter({id: '#h3d-four'});
829  new BeforeAfter({id: '#h3d-five'});
830  // new BeforeAfter({id: '#h3d-six'});
831</script>
831
832
833</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.