Spaces:
Paused
Paused
| <html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>GeoNeXt Demo</title><link rel="stylesheet" href="style.css"><style>.examples{margin:0 0 18px;padding:14px 16px;border:1px solid #e2e5ef;border-radius:14px;background:#fff}.examples-title{margin-bottom:10px;color:#5d5aec;font-size:14px;font-weight:750}.example-list{display:flex;gap:10px;overflow-x:auto;padding:2px}.example{width:104px;height:72px;flex:0 0 auto;overflow:hidden;padding:0;border:2px solid transparent;border-radius:9px;background:#eef0f6;cursor:pointer}.example img{width:100%;height:100%;object-fit:cover}.example.selected,.example:hover{border-color:#6862f3}</style></head> | |
| <body><main> | |
| <header><h1>GeoNeXt</h1><h2>Video Generative Models as Geometry Learner</h2><p>Predict monocular depth and surface normals with video generative priors.</p><nav><a href="https://arxiv.org/abs/2608.28549" target="_blank">📄 Paper</a><a href="https://happy-hsy.github.io/projects/GeoNeXt/" target="_blank">🌐 Project Page</a><a href="https://github.com/Creative-Intelligence-Studio/GeoNeXt" target="_blank">💻 GitHub</a><a href="https://huggingface.co/happy0612/GeoNeXt" target="_blank">🤗 Model Checkpoints</a></nav></header> | |
| <div class="grant"><span></span><strong>GPU inference will be enabled after Community GPU Grant approval.</strong></div> | |
| <section class="examples"><div class="examples-title">Try an example</div><div class="example-list"><button class="example selected" data-src="examples/case1.jpg"><img src="examples/case1.jpg" alt="Example 1"></button><button class="example" data-src="examples/case2.jpg"><img src="examples/case2.jpg" alt="Example 2"></button><button class="example" data-src="examples/case3.png"><img src="examples/case3.png" alt="Example 3"></button><button class="example" data-src="examples/case4.png"><img src="examples/case4.png" alt="Example 4"></button><button class="example" data-src="examples/case5.jpg"><img src="examples/case5.jpg" alt="Example 5"></button><button class="example" data-src="examples/case6.jpg"><img src="examples/case6.jpg" alt="Example 6"></button></div></section> | |
| <section class="workspace"> | |
| <label class="image-panel input-panel"><div class="panel-title">▧ Input Image</div><img id="input-preview" src="examples/case1.jpg" alt="Input preview"><div class="panel-footer">Click to upload an image</div><input id="file-input" type="file" accept="image/*"></label> | |
| <div class="image-panel output-panel"><div class="panel-title">▧ GeoNeXt Prediction</div><div class="empty-output"><div class="output-icon">✦</div><strong>Depth prediction will appear here</strong><small>The interactive model is waiting for GPU access.</small></div></div> | |
| </section> | |
| <section class="controls"> | |
| <div class="control"><label>Backend</label><div class="choices"><button class="selected">GeoNeXt-Wan</button><button>GeoNeXt-SVD</button></div></div> | |
| <div class="control"><label>Inference Steps <output id="step-value">5</output></label><input id="steps" type="range" min="1" max="5" value="5"><small>More steps may improve quality but take longer.</small></div> | |
| <div class="control"><label>Output View</label><div class="choices"><button class="selected">Depth</button><button>Surface Normal</button></div></div> | |
| </section> | |
| <button class="run" disabled>Run GeoNeXt · Waiting for GPU</button> | |
| </main><script> | |
| const input=document.querySelector('#file-input');input.addEventListener('change',()=>{if(input.files[0])document.querySelector('#input-preview').src=URL.createObjectURL(input.files[0])});const steps=document.querySelector('#steps');steps.addEventListener('input',()=>document.querySelector('#step-value').textContent=steps.value);document.querySelectorAll('.choices').forEach(group=>group.addEventListener('click',event=>{if(event.target.tagName!=='BUTTON')return;group.querySelectorAll('button').forEach(button=>button.classList.remove('selected'));event.target.classList.add('selected')})); | |
| document.querySelectorAll('.example').forEach(button=>button.addEventListener('click',()=>{document.querySelectorAll('.example').forEach(item=>item.classList.remove('selected'));button.classList.add('selected');document.querySelector('#input-preview').src=button.dataset.src})); | |
| </script></body></html> | |