Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>ChemLab-Assets Explorer</title> | |
| <meta name="description" content="Browse 198 simulation-ready chemistry laboratory instruments in 3D: geometry, working joints, interface points, panel readouts, capabilities and files from the ChemLab-Assets dataset."> | |
| <meta name="color-scheme" content="light dark"> | |
| <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2.5h6M10 2.5v6.2L4.4 18.6A2 2 0 0 0 6.2 21.5h11.6a2 2 0 0 0 1.8-2.9L14 8.7V2.5' fill='none' stroke='%2315202a' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M7.3 15h9.4' stroke='%230a6bc2' stroke-width='1.8'/%3E%3C/svg%3E"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <!-- Fonts load without blocking the page: if Google Fonts is unreachable the system fallbacks are used. --> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,300..800&family=IBM+Plex+Mono:wght@400;500&family=Source+Serif+4:ital,opsz,wght@0,8..60,300..650;1,8..60,400&display=swap" media="print" onload="this.media='all'"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script> | |
| // Theme before first paint: ?__theme= (passed by some Hugging Face embeds), then a stored choice, else the system setting. | |
| (function () { | |
| try { | |
| var t = new URLSearchParams(location.search).get('__theme') || localStorage.getItem('chemlab-explorer-theme'); | |
| if (t === 'light' || t === 'dark') document.documentElement.setAttribute('data-theme', t); | |
| } catch (e) { /* storage unavailable: follow the system */ } | |
| })(); | |
| </script> | |
| <script type="importmap"> | |
| { "imports": { "three": "./vendor/three.module.js", "three/addons/": "./vendor/addons/" } } | |
| </script> | |
| </head> | |
| <body> | |
| <a class="skip-link" href="#stage">Skip to the 3D viewer</a> | |
| <header id="topbar"> | |
| <a class="brand" href="./" aria-label="ChemLab-Assets Explorer, start page"> | |
| <svg class="brand-mark" width="26" height="26" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 2.5h6M10 2.5v6.2L4.4 18.6A2 2 0 0 0 6.2 21.5h11.6a2 2 0 0 0 1.8-2.9L14 8.7V2.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M7.3 15h9.4" stroke="var(--accent)" stroke-width="1.8"/></svg> | |
| <span class="brand-text"> | |
| <span class="brand-name">ChemLab-Assets <span class="brand-x">Explorer</span></span> | |
| <span class="brand-tag" id="tagline">198 simulation-ready chemistry lab instruments in 3D</span> | |
| </span> | |
| </a> | |
| <div class="filters"> | |
| <label class="search"> | |
| <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="6.5" fill="none" stroke="currentColor" stroke-width="2"/><path d="m16 16 4.5 4.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg> | |
| <span class="sr">Search instruments</span> | |
| <input id="search" type="search" placeholder="Search name, maker, model or CHEM-ID" autocomplete="off" spellcheck="false"> | |
| </label> | |
| <label class="select"> | |
| <span class="sr">Filter by domain</span> | |
| <select id="domain"><option value="">All domains</option></select> | |
| </label> | |
| </div> | |
| <div class="seg" role="group" aria-label="View"> | |
| <button type="button" data-view="viewer" aria-pressed="true"><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" d="m12 2.8 8 4.6v9.2l-8 4.6-8-4.6V7.4l8-4.6Zm0 9.2 8-4.6M12 12v9.2M12 12 4 7.4"/></svg>3D viewer</button> | |
| <button type="button" data-view="table" aria-pressed="false"><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="1.8" d="M3.5 5h17v14h-17zM3.5 10h17M3.5 14.5h17M9.5 10v9"/></svg>Table</button> | |
| </div> | |
| <nav class="links" aria-label="Project links"> | |
| <span id="base-note" class="base-note" hidden></span> | |
| <a class="btn" id="link-dataset" href="https://huggingface.co/datasets/MBZUAI/ChemLab-Assets" target="_blank" rel="noopener" aria-label="Dataset on Hugging Face" title="ChemLab-Assets dataset on Hugging Face"><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="1.8" d="M4 6c0-1.7 3.6-3 8-3s8 1.3 8 3-3.6 3-8 3-8-1.3-8-3Zm0 0v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3"/></svg><span class="btn-text">Dataset</span></a> | |
| <a class="btn" id="link-website" href="#" target="_blank" rel="noopener" aria-label="Project website" title="Project website" hidden><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="1.8" d="M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm-9 9h18M12 3c2.5 2.6 3.7 5.6 3.7 9s-1.2 6.4-3.7 9c-2.5-2.6-3.7-5.6-3.7-9S9.5 5.6 12 3Z"/></svg><span class="btn-text">Website</span></a> | |
| <button type="button" class="btn icon" id="theme-btn" aria-label="Colour theme: follow system"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M12 4a8 8 0 0 1 0 16Z" fill="currentColor"/></svg></button> | |
| </nav> | |
| </header> | |
| <aside id="sidebar" aria-label="Instruments"> | |
| <div class="side-head"> | |
| <button type="button" id="list-toggle" class="list-toggle" aria-expanded="false" aria-controls="list-wrap"><span>Instruments</span><svg class="chev" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6" fill="none" stroke="currentColor" stroke-width="2"/></svg></button> | |
| <span class="side-title">Instruments</span> | |
| <span id="asset-count" class="count" aria-live="polite"></span> | |
| </div> | |
| <div id="list-wrap"> | |
| <ul id="asset-list"><li class="list-msg">Loading the catalogue…</li></ul> | |
| </div> | |
| </aside> | |
| <main id="viewer" aria-label="3D viewer"> | |
| <div id="titlebar"> | |
| <div class="tb-text"> | |
| <div class="tb-id" id="inst-id"> </div> | |
| <h1 id="inst-name">Loading…</h1> | |
| <div class="tb-mm" id="inst-mm"></div> | |
| <div class="tb-zh" id="inst-zh" lang="zh"></div> | |
| </div> | |
| <div class="tb-chips" id="inst-chips"></div> | |
| </div> | |
| <div id="stage"> | |
| <canvas id="gl" tabindex="-1" aria-label="Interactive 3D model. Drag to rotate, scroll or pinch to zoom, click a part to identify it."></canvas> | |
| <div id="labels" aria-hidden="true"></div> | |
| <div class="vt vt-left"> | |
| <button type="button" class="tool" id="layers-btn" aria-expanded="false" aria-controls="layers"><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" d="m12 3 9 5-9 5-9-5 9-5Zm-9 9 9 5 9-5M3 16l9 5 9-5"/></svg>Layers<span class="tool-count" id="layers-count"></span></button> | |
| <div id="layers" class="pop" hidden></div> | |
| </div> | |
| <div class="vt vt-right" role="group" aria-label="Camera view"> | |
| <button type="button" class="tool" data-cam="iso" title="Isometric view (front-right, from above)">Iso</button><button type="button" class="tool" data-cam="front" title="Front view">Front</button><button type="button" class="tool" data-cam="back" title="Back view">Back</button><button type="button" class="tool" data-cam="left" title="Left view">Left</button><button type="button" class="tool" data-cam="right" title="Right view">Right</button><button type="button" class="tool" data-cam="top" title="Top view">Top</button><button type="button" class="tool" data-cam="fit" title="Fit the model in the view">Fit</button> | |
| </div> | |
| <div id="loader" hidden> | |
| <img id="loader-thumb" alt="" width="400" height="300"> | |
| <div class="loader-card" role="status" aria-live="polite"> | |
| <span class="spinner" aria-hidden="true"></span> | |
| <div class="loader-text"> | |
| <div id="loader-text">Loading model…</div> | |
| <div class="progress" aria-hidden="true"><i id="loader-bar"></i></div> | |
| <div id="loader-bytes" class="mono"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="viewer-error" role="alert" hidden></div> | |
| <div id="hint" aria-hidden="true">Drag to rotate · right-drag to pan · scroll to zoom · click a part</div> | |
| </div> | |
| <div id="dock"> | |
| <section id="joint-panel" aria-label="Joint sliders" hidden> | |
| <button type="button" class="jp-head" id="jp-toggle" aria-expanded="false" aria-controls="jp-body"> | |
| <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="1.8" d="M4 7h10M18 7h2M4 17h4M12 17h8"/><circle cx="16" cy="7" r="2.2" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="10" cy="17" r="2.2" fill="none" stroke="currentColor" stroke-width="1.8"/></svg> | |
| <span>Move joints</span><span id="jp-count" class="jp-count"></span><svg class="chev" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 15 6-6 6 6" fill="none" stroke="currentColor" stroke-width="2"/></svg> | |
| </button> | |
| <div id="jp-body" hidden></div> | |
| </section> | |
| <section id="pick-card" aria-label="Selected component" aria-live="polite" hidden></section> | |
| </div> | |
| </main> | |
| <section id="panel" aria-label="Instrument details"> | |
| <div id="tabs" role="tablist" aria-label="Instrument details"> | |
| <button type="button" role="tab" id="tab-overview" data-tab="overview" aria-controls="tab-body" aria-selected="true">Overview</button> | |
| <button type="button" role="tab" id="tab-components" data-tab="components" aria-controls="tab-body" aria-selected="false" tabindex="-1">Components</button> | |
| <button type="button" role="tab" id="tab-joints" data-tab="joints" aria-controls="tab-body" aria-selected="false" tabindex="-1" title="Joints & controls">Joints</button> | |
| <button type="button" role="tab" id="tab-interfaces" data-tab="interfaces" aria-controls="tab-body" aria-selected="false" tabindex="-1" title="Interfaces & readouts">Interfaces</button> | |
| <button type="button" role="tab" id="tab-capabilities" data-tab="capabilities" aria-controls="tab-body" aria-selected="false" tabindex="-1" title="Capabilities & mechanisms">Capabilities</button> | |
| <button type="button" role="tab" id="tab-files" data-tab="files" aria-controls="tab-body" aria-selected="false" tabindex="-1">Files</button> | |
| </div> | |
| <div id="tab-body" role="tabpanel" aria-labelledby="tab-overview" tabindex="0"><p class="empty">Loading…</p></div> | |
| </section> | |
| <section id="table-view" aria-labelledby="tv-title" hidden> | |
| <div class="tv-head"> | |
| <h2 id="tv-title">All instruments</h2> | |
| <span id="tv-count" class="count" aria-live="polite"></span> | |
| <span class="tv-hint">Sort by any column. Select a row to open the instrument in 3D.</span> | |
| </div> | |
| <div class="tv-scroll" tabindex="0" aria-label="Instrument table (scrolls horizontally on small screens)"> | |
| <table class="grid" id="tv-table"><thead></thead><tbody></tbody></table> | |
| </div> | |
| </section> | |
| <dialog id="lightbox" aria-label="Preview image"> | |
| <figure class="lb-fig"> | |
| <img id="lb-img" alt=""> | |
| <figcaption id="lb-cap"></figcaption> | |
| </figure> | |
| <button type="button" class="lb-btn lb-prev" id="lb-prev" aria-label="Previous image"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m15 5-7 7 7 7" fill="none" stroke="currentColor" stroke-width="2"/></svg></button> | |
| <button type="button" class="lb-btn lb-next" id="lb-next" aria-label="Next image"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 5 7 7-7 7" fill="none" stroke="currentColor" stroke-width="2"/></svg></button> | |
| <button type="button" class="lb-btn lb-close" id="lb-close" aria-label="Close"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18" fill="none" stroke="currentColor" stroke-width="2"/></svg></button> | |
| </dialog> | |
| <div id="toast" role="status" aria-live="polite" hidden></div> | |
| <noscript><p class="noscript">The ChemLab-Assets Explorer needs JavaScript. The data itself is in the <a href="https://huggingface.co/datasets/MBZUAI/ChemLab-Assets">ChemLab-Assets dataset</a>.</p></noscript> | |
| <script type="module" src="app.js"></script> | |
| </body> | |
| </html> | |