Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta name="theme-color" content="#101412" /> | |
| <meta name="description" content="Turn an object in a photo into an interactive 3D model with Meta SAM 3D Objects. Independent demo with a shared public inference backend." /> | |
| <title>SAM 3D Objects Studio</title> | |
| <script type="module" crossorigin src="./index-DS9QG7X3.js"></script> | |
| <link rel="stylesheet" crossorigin href="./index-BghKNsnQ.css"> | |
| </head> | |
| <body> | |
| <div class="app"> | |
| <header class="topbar"> | |
| <a class="brand" href="./" aria-label="SAM 3D Objects Studio home"><span class="brand-icon">◈</span> SAM 3D <span class="brand-light">Objects Studio</span></a> | |
| <div class="header-actions"><button type="button" id="auth-button" class="auth-button">Sign in for GPU quota ↗</button><a class="model-link" href="https://huggingface.co/facebook/sam-3d-objects" target="_blank" rel="noopener noreferrer">Model card <span aria-hidden="true">↗</span></a></div> | |
| </header> | |
| <main> | |
| <section class="intro"> | |
| <div><p class="eyebrow">IMAGE → OBJECT → 3D</p><h1>A new dimension<br>for your photos<span>.</span></h1><p class="intro-copy">Pick an object. Give it depth.<br>Reconstruct shape and color from a single image.</p></div> | |
| <div class="intro-note"><span class="small-cube" aria-hidden="true">⬡</span><p>Powered by Meta's<br><strong>SAM 3D Objects</strong></p><span class="tag">COMMUNITY DEMO</span></div> | |
| </section> | |
| <section class="workspace" aria-label="Image to 3D workspace"> | |
| <form id="generate-form" class="input-panel"> | |
| <div class="panel-heading"><h2><span class="step">01</span> Source image</h2><button id="clear" class="text-button" type="button" hidden>Clear</button></div> | |
| <label class="dropzone" id="dropzone" for="image-upload"> | |
| <input id="image-upload" type="file" accept="image/png,image/jpeg,image/webp" /> | |
| <span id="upload-placeholder" class="upload-placeholder"><span class="upload-symbol" aria-hidden="true">↥</span><strong>Drop an image here</strong><span>or click to browse</span><small>PNG, JPG, WEBP · up to 20 MB</small></span> | |
| <img id="source-image" alt="Selected source image" hidden /> | |
| <span id="image-name" class="image-name" hidden></span> | |
| </label> | |
| <div class="example-row"><span>Start with an example</span><button type="button" id="example" class="example-button"><img src="./bus.png" alt="" /> Bus <span aria-hidden="true">↗</span></button></div> | |
| <div class="prompt-block"><label for="prompt"><span class="step">02</span> Choose your object</label><input id="prompt" type="text" value="" maxlength="160" placeholder="e.g. chair, coffee mug, yellow bus" autocomplete="off" required /><p>The best-matching object will be selected automatically.</p></div> | |
| <button id="generate" type="submit" class="primary-button"><span>Generate 3D</span><span aria-hidden="true">↗</span></button> | |
| <button id="cancel" type="button" class="cancel-button" hidden>Cancel request</button> | |
| <p class="privacy-note">Images are sent to a <a href="https://huggingface.co/spaces/HaiderCG/sam3d-lab" target="_blank" rel="noopener noreferrer">shared public backend ↗</a>.<br>Don't upload confidential images. Queue and quota limits apply.</p> | |
| </form> | |
| <div class="output-panel"> | |
| <div class="viewer-toolbar"><div class="tabs" role="tablist" aria-label="Output view"><button type="button" id="model-tab" class="tab active" role="tab" aria-selected="true" aria-controls="model-pane">3D model</button><button type="button" id="mask-tab" class="tab" role="tab" aria-selected="false" aria-controls="mask-pane">Object mask</button></div><span id="result-badge" class="viewer-badge">LIVE WORKSPACE</span></div> | |
| <div class="viewer-stage"> | |
| <div id="model-pane" role="tabpanel" aria-labelledby="model-tab"> | |
| <model-viewer id="viewer" alt="Reconstructed 3D object. Drag to orbit and scroll or pinch to zoom." camera-controls touch-action="pan-y" shadow-intensity="0.7" exposure="1.1" environment-image="neutral" camera-orbit="35deg 70deg auto" interaction-prompt="none" hidden></model-viewer> | |
| <div id="empty-state" class="empty-state"><svg class="wire-cube" width="148" height="160" viewBox="0 0 148 160" fill="none" aria-hidden="true"><path d="M74 17 130 49V112L74 145 18 112V49L74 17Z M18 49 74 82 130 49 M74 82V145" stroke="currentColor" stroke-width="1.1"/><path d="M74 17V82 M18 112 74 82 130 112" stroke="currentColor" stroke-width=".7" stroke-dasharray="3 5"/><circle cx="74" cy="82" r="5" fill="#b6f7bb"/><circle cx="74" cy="17" r="2.5" fill="currentColor"/><circle cx="130" cy="112" r="2.5" fill="currentColor"/></svg><h3>Your object, from every angle.</h3><p>Upload a photo to create a 3D model,<br>or explore a real saved reconstruction.</p><button id="saved-example" class="secondary-button" type="button">Explore saved bus result <span aria-hidden="true">↗</span></button></div> | |
| </div> | |
| <div id="mask-pane" role="tabpanel" aria-labelledby="mask-tab" hidden><img id="mask-image" alt="SAM 3 object selection highlighted in green" hidden /><p id="mask-empty">The selected object appears here after reconstruction.</p></div> | |
| <div id="busy-overlay" class="busy-overlay" hidden><span class="spinner" aria-hidden="true"></span><strong id="busy-label">Connecting to the backend…</strong><p>Keep this tab open. Cold requests can take a few minutes.</p><span id="elapsed">0:00 elapsed</span></div> | |
| </div> | |
| <div class="viewer-bottom"><span class="controls-hint">↔ Drag to orbit <span>·</span> Scroll to zoom</span><div class="viewer-actions"><button id="rotate" type="button" class="text-button" disabled aria-pressed="false">Auto-rotate</button><button id="reset-camera" type="button" class="text-button" disabled>Reset view ↺</button></div></div> | |
| <div class="result-bar"><div><span class="result-label">OUTPUT</span><strong id="result-summary">No reconstruction yet</strong><span id="result-detail">Vertex-colored mesh · GLB format</span></div><a id="download" class="download-button disabled" aria-disabled="true">Download GLB <span aria-hidden="true">↓</span></a></div> | |
| </div> | |
| </section> | |
| <div id="status" class="status-line" role="status" aria-live="polite"><span class="status-dot"></span><span id="status-text">Ready when you are. Choose an image to begin.</span></div> | |
| <section class="notes"><div><span>01 / SELECT</span><p>A clear subject works best.<br>Use a short, specific object name.</p></div><div><span>02 / RECONSTRUCT</span><p>SAM 3 selects the object.<br>SAM 3D estimates its complete shape.</p></div><div><span>03 / TAKE IT WITH YOU</span><p>Orbit the result, inspect the mask,<br>then download your GLB mesh.</p></div></section> | |
| <details class="about"><summary>About this demo & limitations</summary><p>This free static Space calls <a href="https://huggingface.co/spaces/HaiderCG/sam3d-lab" target="_blank" rel="noopener noreferrer">HaiderCG/sam3d-lab</a>; it does not host the model weights. Availability depends on that shared backend and Hugging Face ZeroGPU quotas. Meshes use vertex colors, not baked texture maps. Hidden geometry is estimated and is not a reliable physical measurement. Seed: 42. The saved bus result is a real prior inference, not a live generation. For quota or backend issues, <a href="https://huggingface.co/spaces/HaiderCG/sam3d-lab" target="_blank" rel="noopener noreferrer">open the backend directly</a> and sign in there if needed.</p><p>Independent demo, not affiliated with Meta. Model and outputs are subject to the <a href="https://huggingface.co/facebook/sam-3d-objects" target="_blank" rel="noopener noreferrer">upstream SAM license</a>. The example image is from Gradio's public test fixtures.</p></details> | |
| </main> | |
| <footer><span>SAM 3D OBJECTS STUDIO</span><div><a href="https://github.com/facebookresearch/sam-3d-objects" target="_blank" rel="noopener noreferrer">Research & code ↗</a><a href="https://huggingface.co/spaces/samuel4038/sam3d-objects-studio/tree/main" id="source-link" target="_blank" rel="noopener noreferrer">Space source ↗</a></div></footer> | |
| </div> | |
| </body> | |
| </html> | |