Spaces:
Running
Running
Download template.html from HuggingFaceBio/carbon-a-release: direct link, hf CLI and curl.
- Browser
- Download file 22.6 kB
-
https://huggingface.co/spaces/HuggingFaceBio/carbon-a-release/resolve/main/template.html
- Command line
-
hf download hf://spaces/HuggingFaceBio/carbon-a-release/template.html
-
curl -L -o template.html https://huggingface.co/spaces/HuggingFaceBio/carbon-a-release/resolve/main/template.html
22.6 kB
| <html lang="en" data-theme="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Carbon-A: Discovering Genes Across the Tree of Life</title><script>try{const t=localStorage.getItem('carbon-a-theme');if(t==='light'||t==='dark')document.documentElement.dataset.theme=t}catch{}if(new URLSearchParams(location.search).get('record')==='1')document.documentElement.dataset.recording='true';</script><style> | |
| __FONTS__ | |
| :root{color-scheme:dark;--green:#29e99a;--blue:#789dff;--ink:#e6f0ed;--muted:#91a5a4;--rule:#233038;--bg:#080e13;--panel:#0d151c;--hover:#16252c;--secondary:#bccdc7;--shadow:#00000050} | |
| :root[data-theme="light"]{color-scheme:light;--green:#00b86b;--blue:#4167ec;--ink:#14221c;--muted:#6e7b73;--rule:#e6ece8;--bg:#fff;--panel:#fff;--hover:#f6faf7;--secondary:#435a4c;--shadow:#2035280c} | |
| *{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--bg);font:13px Inter,Arial,sans-serif}button,input,select{font:inherit;color:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;background:var(--bg);border:1px solid var(--rule);padding:9px 13px}button:hover{border-color:var(--muted);background:var(--hover)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--green);outline-offset:3px}button:disabled{opacity:.35;cursor:default}a{color:inherit}input::placeholder{color:var(--muted);opacity:1}[hidden]{display:none!important} | |
| .presentation{height:100svh;min-height:650px;display:grid;grid-template-columns:210px minmax(0,1fr) 210px;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"hero hero hero" "resources tree .";column-gap:8px} | |
| .hero{grid-area:hero;padding:30px 28px 8px;text-align:center} | |
| h1{font-family:Manrope,Arial,sans-serif;font-size:clamp(27px,2.8vw,46px);font-weight:500;line-height:1.2;letter-spacing:-1.35px;margin:0} | |
| .wordmark{font-weight:800;white-space:nowrap}.wordmark em{font-style:normal;color:var(--green)}.title-separator{font-weight:400} | |
| .release-subtitle{font-size:clamp(13px,1.25vw,18px);line-height:1.5;color:var(--secondary);margin:13px 0 0}.release-subtitle strong{font-weight:500;color:var(--green);white-space:nowrap} | |
| .stage-wrap{grid-area:tree;position:relative;min-width:0;min-height:0;width:100%;height:100%;overflow:visible} | |
| #stage{position:absolute;inset:6px 8px 8px;touch-action:none}canvas{position:absolute;width:100%;height:100%;inset:0}#tree{cursor:default;touch-action:none}#overlay,#interaction,#tree-still{pointer-events:none}#tree-still{visibility:hidden}[data-sweeping="true"] #tree,[data-sweeping="true"] #overlay{visibility:hidden}[data-sweeping="true"] #tree-still{visibility:visible} | |
| .home-control{position:absolute;left:24px;bottom:14px;z-index:6;display:flex;align-items:center;gap:8px;background:var(--panel);font-size:12px;padding:10px 14px;border-radius:4px}.home-control svg{width:15px;height:15px;stroke:var(--green);stroke-width:1.5;fill:none}[data-zoomed="true"] #selection{max-height:calc(100% - 82px)} | |
| .resources{grid-area:resources;align-self:center;width:100%;max-height:100%;overflow:auto;padding:24px 10px 24px 28px;text-align:left;scrollbar-width:thin} | |
| .resources h2{font:500 14px/1.4 Inter,Arial,sans-serif;margin:0 0 12px} | |
| .strand-legend{display:grid;gap:12px;margin:28px 0 0;font-size:11px;line-height:1.5;color:var(--secondary)}.strand-legend .legend-heading{color:var(--muted)}.strand-legend .legend-item{display:flex;align-items:flex-start;gap:9px}.strand-legend .sample-line{width:22px;margin-top:7px} | |
| .resource-links{display:grid;grid-template-columns:minmax(0,1fr);gap:8px} | |
| .resource-links a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 13px;width:100%;min-width:0;border:1px solid var(--rule);border-radius:4px;text-decoration:none;font-size:13px;font-weight:500;background:transparent} | |
| .resource-links a span{color:var(--green);font-size:15px}.resource-links a:hover{border-color:var(--green);background:var(--hover)} | |
| .utilities{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;margin-top:22px} | |
| .utilities button{grid-column:1;border:0;background:transparent;color:var(--muted);padding:6px 0;font-size:10px;text-align:left}.utilities button:hover{color:var(--ink)} | |
| #theme-toggle{grid-column:2;grid-row:1 / span 2;display:grid;place-items:center;width:26px;height:26px;padding:4px}#theme-toggle svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.5;fill:none}[data-theme="dark"] .theme-moon,[data-theme="light"] .theme-sun{display:none} | |
| [data-recording="true"] .utilities{visibility:hidden}[data-recording="true"] #stage{pointer-events:none}[data-recording="true"] #layer-tooltip,[data-recording="true"] #home{display:none!important}[data-recording="true"] #selection{pointer-events:none} | |
| .tag{font-size:10px;letter-spacing:1.3px;color:var(--muted);text-transform:uppercase} | |
| #loading{position:absolute;inset:0;display:grid;place-content:center;background:var(--bg);color:var(--muted);z-index:10} | |
| #selection{position:absolute;right:-194px;top:18px;width:295px;max-height:calc(100% - 36px);overflow:auto;background:var(--panel);border:1px solid var(--rule);box-shadow:0 8px 40px var(--shadow);z-index:5;padding:23px} | |
| #sel-close{position:absolute;top:6px;right:8px;border:0;background:transparent;font-size:20px;padding:0 4px;color:var(--muted)}#sel-name{font:600 18px/1.25 Manrope,Arial,sans-serif;letter-spacing:-.5px;margin:0 0 6px}#sel-id{font-size:11px;color:var(--green);font-weight:500;text-decoration:none}#sel-lineage{font-size:10px;line-height:1.7;color:var(--muted);margin-top:15px}#sel-status{font-size:11px;line-height:1.6;border-top:1px solid var(--rule);padding-top:13px;margin-top:14px}#sel-status small{font-size:10px;color:var(--muted);margin-left:13px}.dot{display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;margin-right:6px}.dot.blue{background:var(--blue)}#sel-data{display:grid;gap:3px;margin:16px 0;font-size:10px}#sel-data span{color:var(--muted);margin-top:7px}#sel-data b{font-weight:500;font-size:12px}#selection button:not(#sel-close){font-size:10px;margin:4px 0;padding:8px 10px}#sel-state{font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin:0 0 12px}#selection[data-pinned="true"] #sel-state{color:var(--green)} | |
| #layer-tooltip{position:absolute;z-index:8;width:250px;pointer-events:none;padding:13px 15px;background:var(--panel);border:1px solid var(--rule);box-shadow:0 5px 25px var(--shadow);font-size:11px}#layer-tooltip b,#layer-tooltip span,#layer-tooltip small{display:block}#layer-tooltip b{font-weight:600;margin-bottom:6px}#layer-tooltip span{line-height:1.5}#layer-tooltip small{font-size:10px;color:var(--muted);margin-top:6px} | |
| .data-access{border-top:1px solid var(--rule);padding-top:10px;margin-top:12px}.data-access button,.data-access a{color:var(--green)}.data-access a{font-size:11px;line-height:1.8;text-decoration:none}#sel-availability{font-size:10px;line-height:1.5;color:var(--muted);margin:3px 0 8px} | |
| dialog{background:var(--panel);border:1px solid var(--rule);padding:32px;max-width:calc(100vw - 32px);max-height:85svh;width:1000px;color:var(--ink)}dialog::backdrop{background:#00000070;backdrop-filter:blur(3px)}dialog h2{font:600 28px/1.2 Manrope,Arial,sans-serif;letter-spacing:-1px;margin:0 0 15px}dialog p{font-size:12px;line-height:1.7;color:var(--muted)}dialog ul{padding-left:18px;font-size:12px;line-height:1.9;color:var(--muted)}.dialog-close{float:right;border:0;font-size:22px;padding:0 4px} | |
| #view-dialog{width:520px}#about-dialog{width:680px}#credits-dialog{width:740px}#data-dialog{width:780px} | |
| .searchbox{position:relative;margin:22px 0 18px}#search{width:100%;padding:12px;border:1px solid var(--rule);background:var(--bg);font-size:12px}#results{position:absolute;top:40px;width:100%;background:var(--panel);box-shadow:0 10px 30px var(--shadow);font-size:11px;z-index:4}#results:empty{display:none}#results button{display:block;width:100%;text-align:left;padding:11px;border:0;border-bottom:1px solid var(--rule)}#results strong,#results span{display:block;font-size:11px;font-weight:500}#results span{font-size:10px;color:var(--muted);margin-top:3px} | |
| .legend,.locus-controls{border-top:1px solid var(--rule);padding-top:18px;margin-top:18px}.legend select,.locus-controls select{width:100%;border:0;border-bottom:1px solid var(--rule);padding:9px 0;margin:6px 0 12px;background:var(--panel);font-size:12px}.key{display:flex;align-items:center;gap:8px;font-size:11px;margin-bottom:10px}.key strong{margin-left:auto;font-weight:500;font-variant-numeric:tabular-nums}.sample-line{height:2px;width:21px;display:inline-block;background:var(--green);flex-shrink:0}.sample-line.blue{background:var(--blue)}.scope-note,.locus-controls p{font-size:10px;color:var(--muted);line-height:1.5;margin:10px 0 13px}.checkbox{font-size:11px;display:flex;gap:7px;align-items:center}.checkbox input{accent-color:var(--green)}.locus-controls strong{display:block;font-size:11px;font-weight:500;margin-top:10px}.icon-toggle{margin-top:12px}.quick{display:flex;gap:6px;margin:20px 0 6px}.quick button{font-size:11px;padding:8px 10px}.controls{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:18px}.controls button{font-size:11px;padding:7px 10px}.controls span{font-size:10px;padding:0 5px;min-width:42px;text-align:center;color:var(--muted)} | |
| #icon-credits{max-height:60vh;overflow:auto}#icon-credits table{border-collapse:collapse;width:100%;font-size:11px;text-align:left}#icon-credits th,#icon-credits td{padding:10px 8px;border-bottom:1px solid var(--rule)}#icon-credits a,#data-dialog a{color:var(--green)}.gene-label{font-size:11px;margin-top:28px;color:var(--muted)}#gene-svg{width:100%;height:auto;font:11px Inter;fill:var(--muted);margin:16px 0}.gene-notes{border-top:1px solid var(--rule);padding-top:15px;font-size:11px}#data-dialog pre{max-height:45vh;overflow:auto;border:1px solid var(--rule);background:var(--bg);padding:18px;font-size:11px;line-height:1.7;white-space:pre}#copy-status{font-size:11px;margin-left:12px;color:var(--green)}#data-dialog .data-setup{font-size:11px} | |
| .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} | |
| @media(max-width:700px){.presentation{height:auto;min-height:100svh;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(480px,calc(100svh - 175px)) auto;grid-template-areas:"hero" "tree" "resources"}.hero{padding:25px 22px 4px}h1{font-size:clamp(26px,5.8vw,38px);letter-spacing:-1px}.title-topic{display:block;margin-top:6px;font-size:.8em;line-height:1.3;letter-spacing:-.4px;text-wrap:balance}.release-subtitle{max-width:330px;margin:12px auto 0;text-wrap:balance}#stage{inset:0 4px}.home-control{left:12px;bottom:10px} | |
| .resources{width:min(100%,460px);justify-self:center;max-height:none;overflow:visible;padding:26px 22px 30px}.strand-legend{gap:10px;margin-top:24px}#selection{width:275px;right:12px;top:10px;max-height:calc(100% - 20px)}dialog{padding:24px}} | |
| @media(prefers-reduced-motion:no-preference){button,.resource-links a{transition:background .15s,border-color .15s}} | |
| </style></head><body> | |
| <main class="presentation"> | |
| <header class="hero"><h1><span class="wordmark">Carbon-<em>A</em></span><span class="title-separator">: </span><span class="title-topic">Discovering Genes Across the Tree of Life</span></h1><p class="release-subtitle">Releasing <strong>566M</strong> gene candidates for over <strong>22k</strong> species</p></header> | |
| <aside class="resources" aria-labelledby="links-title"><h2 id="links-title">Links:</h2><nav class="resource-links" aria-label="Carbon-A resources"><a href="https://huggingface.co/HuggingFaceBio/Carbon-A-1.2B" target="_blank" rel="noopener">Model<span aria-hidden="true">↗</span></a><a href="https://huggingface.co/buckets/HuggingFaceBio/genbank-annotations" target="_blank" rel="noopener">Database<span aria-hidden="true">↗</span></a><a href="https://huggingface.co/spaces/HuggingFaceBio/carbon-a-database-explorer" target="_blank" rel="noopener">Explorer<span aria-hidden="true">↗</span></a><a href="https://huggingface.co/buckets/HuggingFaceBio/Carbon-A-Technical-Report" target="_blank" rel="noopener">Paper<span aria-hidden="true">↗</span></a><a href="https://huggingface.co/blog/HuggingFaceBio/carbon-annotator-genbank-genome-annotation" target="_blank" rel="noopener">Blog<span aria-hidden="true">↗</span></a></nav><div class="strand-legend" aria-label="Assembly strand colours"><span class="legend-heading">Assembly strands</span><span class="legend-item"><i class="sample-line" aria-hidden="true"></i><span id="strand-green-label">No GenBank annotation listed</span></span><span class="legend-item"><i class="sample-line blue" aria-hidden="true"></i><span id="strand-blue-label">GenBank annotation listed</span></span></div><div class="utilities"><button id="view-options">View options</button><button id="about">About the data</button><button id="theme-toggle" aria-label="Switch to light mode" title="Switch to light mode"><svg class="theme-sun" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 1v3m0 16v3M1 12h3m16 0h3M4.2 4.2l2.1 2.1m11.4 11.4 2.1 2.1M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"/></svg><svg class="theme-moon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.5 14.5A9 9 0 0 1 9.5 3.5a9 9 0 1 0 11 11Z"/></svg></button></div></aside> | |
| <section class="stage-wrap" aria-label="Carbon-A assembly tree"> | |
| <span id="sweep-announcement" class="visually-hidden" role="status"></span> | |
| <div id="stage"><canvas id="tree" aria-label="Interactive taxonomic tree of assembly strands. Hover to preview a strand; click to keep it selected; click anywhere again to clear. Scroll to zoom. Search is in View options."></canvas><canvas id="tree-still" aria-hidden="true"></canvas><canvas id="overlay" aria-hidden="true"></canvas><canvas id="interaction" aria-hidden="true"></canvas><div id="loading">Preparing the assembly tree…</div></div> | |
| <button id="home" class="home-control" hidden aria-label="Return to the whole tree"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="m2 9 8-7 8 7M4 8v9h5v-5h2v5h5V8"/></svg>Whole tree</button><div id="layer-tooltip" hidden></div><section id="selection" hidden><button id="sel-close" aria-label="Close assembly details">×</button><div id="sel-state">Selected</div><h2 id="sel-name"></h2><a id="sel-id" target="_blank" rel="noopener"></a><div id="sel-lineage"></div><div id="sel-status"></div><div id="sel-data"></div><div class="data-access"><a id="sel-files" target="_blank" rel="noopener">Annotation files ↗</a><br><button id="sel-download">Get annotation data ↗</button><p id="sel-availability"></p></div><button id="sel-focus">Zoom to this strand ↗</button><button id="sel-loci" hidden>See coding regions →</button></section></section> | |
| </main> | |
| <dialog id="view-dialog"><button id="view-close" class="dialog-close" aria-label="Close view options">×</button><h2>Explore the tree</h2><div class="searchbox"><input id="search" type="search" aria-label="Search assemblies or species" placeholder="Search a species or assembly…" disabled autocomplete="off"><div id="results"></div></div><section class="locus-controls"><label class="tag" for="locus-mode">Coding loci at the strand tips</label><select id="locus-mode"><option value="5">Binned · 5 assemblies per bar</option><option value="20">Binned · 20 assemblies per bar</option><option value="50">Binned · 50 assemblies per bar</option><option value="200">Binned · 200 assemblies per bar</option><option value="raw">Individual assemblies</option><option value="off">Hide locus bars</option></select><strong id="locus-readout"></strong><p id="locus-explain"></p><label class="checkbox icon-toggle"><input type="checkbox" id="show-icons" checked>Genome Atlas silhouettes</label></section><section class="legend"><label class="tag" for="scope">Compare assembly records</label><select id="scope"><option value="0">GenBank annotation records</option><option value="1">RefSeq comparison corpus</option></select><div class="key"><i class="sample-line blue"></i><span id="blue-label"></span><strong id="blue-count"></strong></div><div class="key"><i class="sample-line"></i><span id="green-label"></span><strong id="green-count"></strong></div><label class="checkbox"><input id="existing-only" type="checkbox">Emphasise matching assemblies</label><p id="scope-note" class="scope-note"></p></section><div class="controls"><button id="detail">Strand detail</button><button id="zoomout" aria-label="Zoom out">−</button><span id="zoom-readout">1.0×</span><button id="zoomin" aria-label="Zoom in">+</button><button id="reset">Whole tree</button></div><div class="quick"><button id="human">Find a human assembly ↗</button><button id="gene-open">Its coding regions →</button></div><p>Hover to preview · Click to select · Click anywhere again to clear.<br>Scroll to zoom · Drag to pan · Space to start or stop.</p></dialog> | |
| <dialog id="gene-dialog"><button class="dialog-close" id="gene-close" aria-label="Close coding-region view">×</button><span class="tag">From an assembly to its annotations</span><h2 style="margin-top:16px">Homo sapiens</h2><p id="gene-summary"></p><div class="gene-label">GCA_000001405.29 · chromosome 1, CM000663.2 · first 1,000,000 bases<br>Upper track: forward strand · lower track: reverse strand</div><svg id="gene-svg" viewBox="0 0 1110 210" role="img" aria-label="Actual predicted coding segments in the first one million bases of human chromosome 1"></svg><p id="gene-count-window"></p><p class="gene-notes">Real coordinates from the published Carbon-A GFF3. These are model predictions, not experimentally confirmed genes. The blue/green tree colours describe annotation records for an assembly; they do not classify individual loci as known or new.</p></dialog><dialog id="about-dialog"><button class="dialog-close" id="about-close" aria-label="Close data information">×</button><h2>What is being drawn</h2><p>Each of the <span id="shown">33,588</span> strands across <span id="taxa-shown">16,976</span> taxa is a distinct accession from the explorer’s covered-assembly table, mapped through the NCBI taxonomy. This is a subset of the release. No assemblies or taxonomic branches have been invented to fill out the release total.</p><ul><li>Tree and common names: the existing HuggingFaceBio GenBank annotation explorer, 7 October 2026.</li><li>Existing annotation evidence: the cached NCBI GenBank assembly summary, 7 October 2026; a named annotation provider is required.</li><li>RefSeq mode counts matching assemblies, not genes: exact versioned matches between an assembly’s paired GCF accession and the project’s 2,055-assembly comparison corpus. It does not cover all RefSeq annotations.</li><li>Gene detail: actual published GFF3 coordinates and metadata for GCA_000001405.29.</li><li>Release totals supplied on 8 October 2026: 48,167 assemblies, 22,617 taxa, 566.34M coding loci and 27.18 Tbp.</li></ul><p>The centre hand follows the highlighted strand. Hover over a strand or inside the centre to preview an assembly; click to keep it selected. Click anywhere again to clear the selection. Clicking icons and bars also selects an assembly without zooming; use the scroll wheel or zoom controls to zoom and Whole tree to return. For video capture, press Space to start or replay a four-second clockwise sweep. Space again stops at the current strand; Escape stops and clears it. The assembly info box follows the highlighted strand and remains on the final assembly when playback finishes. The sweep has no counters.</p><p>Equal-width assembly strands preserve count through shared ancestors. At overview scale many strands fall within a pixel; zoom reveals them separately. Radius and branch length are layout choices, not dates or evolutionary distances.</p><p>For example, the human branch contains 1,412 assemblies: 2 match the project’s RefSeq comparison corpus, while 4 have annotation-provider records in this GenBank snapshot. These small counts describe assembly records, not human genes. RefSeq annotations are maintained separately from GenBank submission annotations. <a href="https://www.ncbi.nlm.nih.gov/refseq/about/human/" target="_blank" rel="noopener">NCBI’s explanation of human reference annotation</a>.</p><p>The outer bars sum measured gene_count values from published per-assembly metadata. Bins contain consecutive assembly tips in taxonomy order. Grey base marks indicate the fraction of assemblies without counts; these are not treated as measured zeros. The radial scale is linear and recalculated for each bin size. Colours within the tree classify assemblies; the green outer bars count all predicted loci, regardless of prior annotation status.</p><p>Silhouettes are the original PhyloPic assets and taxon assignments used by the Genome Atlas. Click an icon to select a strand at that node. <button id="credits-open">Icon credits and licences</button></p><p><a href="https://huggingface.co/spaces/HuggingFaceBio/carbon-a-database-explorer" target="_blank" rel="noopener">Source explorer ↗</a> · <a href="https://www.ncbi.nlm.nih.gov/datasets/docs/v2/reference-docs/ftp-browsing/" target="_blank" rel="noopener">NCBI metadata ↗</a></p></dialog><dialog id="credits-dialog"><button id="credits-close" class="dialog-close" aria-label="Close icon credits">×</button><h2>Genome Atlas silhouettes</h2><p>Original PhyloPic silhouettes, reused with the atlas’s taxonomic assignments. Their fill colour is adapted to the selected theme; original SVG files are preserved in the source data. Each image’s source page and licence are linked below.</p><div id="icon-credits"></div></dialog><dialog id="data-dialog"><button id="data-close" class="dialog-close" aria-label="Close download instructions">×</button><h2>Get annotation data</h2><p id="data-assembly"></p><p id="data-description"></p><p><a id="data-browse" target="_blank" rel="noopener">Browse annotation files ↗</a></p><p class="data-setup">Install <code>huggingface_hub</code> and run <code>hf auth login</code> with an account that can access the bucket.</p><pre><code id="data-code"></code></pre><button id="data-copy">Copy Python code</button><span id="copy-status" role="status"></span><p><a href="https://huggingface.co/docs/huggingface_hub/guides/buckets#download-files" target="_blank" rel="noopener">Hugging Face download documentation ↗</a></p></dialog><script id="dataset" type="application/octet-stream">__DATA__</script><script>__SCRIPT__</script></body></html> | |