index.html

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#007e70"><title>audio.cpp / Audio Model Architecture Atlas</title><link rel="stylesheet" href="style.css"></head>
<body>
<header><a class="brand" href="#">audio.cpp / Audio Model Architecture Atlas</a><div class="repo-links"><a id="coverage" href="https://github.com/0xShug0/audio.cpp" target="_blank" rel="noopener noreferrer"></a><span>Enjoy the atlas? Star us on <a href="https://github.com/0xShug0/audio.cpp" target="_blank" rel="noopener noreferrer">GitHub</a> or leave a like on <a href="https://huggingface.co/audio-cpp/audio.cpp-gguf" target="_blank" rel="noopener noreferrer">Hugging Face</a> :)</span></div></header>
<div class="workspace">
 <aside class="library" aria-label="Model library">
  <div class="library-title">Models <span id="count"></span></div>
  <input id="search" type="search" placeholder="Search model or technology" aria-label="Search model, family or technology">
  <label for="task">Task</label><select id="task"></select>
  <div id="models"></div>
 </aside>
 <main>
  <nav id="breadcrumb" aria-label="Architecture navigation" hidden><button id="back"><img src="assets/icons/arrow-left.svg" alt="">Shared architecture</button><span>/</span><span id="breadcrumb-model"></span></nav>
  <div class="heading"><div><div id="view-label" class="eyebrow"></div><div class="title-line"><h1 id="title"></h1><code id="family"></code></div><div id="variants"></div><div id="subtitle"></div></div><button id="clear" class="quiet" hidden>Clear selection</button></div>
  <section id="model-info" hidden><p id="summary"></p><div id="inputs"></div><p id="detail-status"></p><div id="model-links"></div></section>
  <div class="toolbar">
   <div class="graph-scope"><span id="graph-label" class="eyebrow"></span><select id="scope-filter" aria-label="Graph scope"><option value="selected">Selected models</option><option value="filtered">All filtered models</option></select></div>
   <div class="graph-controls"><button id="zoom-out" class="icon" title="Zoom out" aria-label="Zoom out"><img src="assets/icons/minus.svg" alt=""></button><output id="zoom-level">100%</output><button id="zoom-in" class="icon" title="Zoom in" aria-label="Zoom in"><img src="assets/icons/plus.svg" alt=""></button><button id="fit" class="icon" title="Fit graph" aria-label="Fit graph"><img src="assets/icons/maximize.svg" alt=""></button><button id="export" class="icon" title="Download graph SVG" aria-label="Download graph SVG"><img src="assets/icons/download.svg" alt=""></button></div>
  </div>
  <div class="graph-options"><div class="legend"><span class="ar">AR backbone</span><span class="flow">Generation</span><span class="encoder">Encoder</span><span class="codec">Codec</span><span class="head">Prediction</span></div><label id="frontend-control"><input id="frontends" type="checkbox">Frontends</label></div>
  <div id="variant-wrap" hidden><label for="variant">Architecture route</label><select id="variant"></select></div>
  <div id="graph" aria-label="Architecture graph"></div>
  <section class="relatives"><div class="section-label">RELATED MODELS <span id="relation-name"></span></div><div id="peers"></div></section>
  <details id="packages" hidden><summary>Published packages</summary><div id="package-list"></div></details>
 </main>
 <aside class="inspector" aria-label="Component detail"><button id="expand-detail" class="icon" title="Expand component detail" aria-label="Expand component detail"><img src="assets/icons/maximize.svg" alt=""></button><div class="eyebrow">COMPONENT DETAIL</div><h2 id="component-title"></h2><span id="component-role" class="badge"></span><p id="component-description"></p><p id="instance-description"></p><div id="block-nav"></div><div id="scope"></div><div id="blocks"></div><div id="block-caption"></div><div id="evidence"></div></aside>
</div>
<footer><span>Based on models supported by audio.cpp</span><span id="snapshot"></span><span id="status" role="status"></span></footer>
<dialog id="detail-dialog" aria-labelledby="component-title"></dialog>
<noscript>This architecture atlas requires JavaScript.</noscript>
<script src="registry.js"></script><script src="assets/dagre.min.js"></script><script src="graph.js"></script><script src="app.js"></script>
</body></html>