| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> | |
| <title>Attention Lab · 3D Neural Architecture Atlas</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <!-- KaTeX Math Typesetting --> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css" crossorigin="anonymous"> | |
| <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js" crossorigin="anonymous"></script> | |
| <!-- Marked.js Markdown Parser --> | |
| <script defer src="https://cdn.jsdelivr.net/npm/marked@12.0.2/marked.min.js"></script> | |
| <!-- Import map for Vanilla Three.js + Addons --> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "three": "https://unpkg.com/three@0.160.0/build/three.module.js", | |
| "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/" | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="app"> | |
| <!-- WebGL Fallback Notification (Displays only if WebGL fails to initialize) --> | |
| <div id="webgl-fallback" class="webgl-fallback-banner" style="display: none;" role="alert"> | |
| <strong>⚠️ WebGL Accelerated Context Unavailable:</strong> | |
| Your browser or environment could not initialize WebGL. Please ensure hardware acceleration is enabled in Chrome/Firefox/Safari. | |
| </div> | |
| <div id="fps-counter" aria-label="Real-time frames per second" role="status">—</div> | |
| <div id="color-legend" role="region" aria-label="Node Color Palette Legend"></div> | |
| <div id="tour-step-label" role="status" aria-live="polite"></div> | |
| <!-- Scene Wrap with WebGL Canvas and SVG Leader Guides --> | |
| <section id="scene-wrap" class="scene-wrap" aria-label="Spatial 3D Architecture Comparison"> | |
| <canvas id="webgl-canvas" aria-label="Interactive 3D neural architecture graph" role="img" data-engine="three.js"></canvas> | |
| <!-- Screen-space Dynamic Leader Guides & Callout Labels --> | |
| <div id="labels" class="labels-container" aria-hidden="true"> | |
| <svg id="label-guides" class="label-guides" aria-hidden="true"></svg> | |
| <div id="callout-badges" class="callout-badges"></div> | |
| </div> | |
| </section> | |
| <!-- Top Navigation Header --> | |
| <header class="topbar" role="banner"> | |
| <div> | |
| <div class="eyebrow">NEURAL ARCHITECTURE ATLAS · 241 RESEARCH MODULES</div> | |
| <h1>Attention Lab <span>/ Transformer Visualizer</span></h1> | |
| </div> | |
| <div class="top-actions"> | |
| <!-- 3D / 2D View Switcher --> | |
| <div class="view-toggle" role="tablist" aria-label="Perspective View Mode"> | |
| <button id="btn-view-3d" class="active" role="tab" aria-selected="true" aria-controls="scene-wrap" title="3D Spatial Perspective">3D</button> | |
| <button id="btn-view-2d" role="tab" aria-selected="false" aria-controls="scene-wrap" title="2D Front Orthographic View">2D</button> | |
| </div> | |
| <!-- Engine Status Dot --> | |
| <div class="status ready" id="status-pill" title="Engine Status" role="status"> | |
| <i></i> | |
| <span id="status-text">Ready</span> | |
| </div> | |
| <!-- Quick Module Selector --> | |
| <div class="quick-select-box"> | |
| <select id="quick-module-select" class="quick-module-select" aria-label="Quick pick research module" title="Instantly select any of the 241 research attention & compression modules"> | |
| <option value="" disabled selected>⚡ Quick Pick (241 Modules)...</option> | |
| </select> | |
| </div> | |
| <!-- Present Mode Fullscreen Button --> | |
| <button id="btn-present-mode" class="round-button btn-present" title="Launch Minimal Presentation Mode (5-min Demo)" style="background: rgba(16,185,129,0.2); color:#34d399; border: 1px solid rgba(16,185,129,0.5);"> | |
| ▶ Present | |
| </button> | |
| <!-- Learn Mode Primer Button --> | |
| <button id="btn-open-learn" class="round-button btn-learn" title="Transformer & Attention Primer (English Masterclass)" style="background: rgba(34,213,247,0.15); color:#38bdf8; border: 1px solid rgba(34,213,247,0.4);"> | |
| 📖 Learn | |
| </button> | |
| <!-- Guided Lessons Masterclass Button --> | |
| <button id="btn-open-lessons" class="round-button" title="Interactive Guided Lessons (5 Bite-Sized Masterclasses)" style="background: rgba(16,185,129,0.2); color:#34d399; border: 1px solid rgba(16,185,129,0.45);"> | |
| 🎓 Lessons | |
| </button> | |
| <!-- Cross-Architecture Model Matrix Modal Trigger --> | |
| <button id="btn-open-model-matrix" class="round-button btn-matrix" title="Open 6-Model Architecture Comparison Matrix" style="background: rgba(2,132,199,0.2); color:#38bdf8; border: 1px solid rgba(56,189,248,0.4);"> | |
| 📊 Matrix | |
| </button> | |
| <!-- Interactive Attention Heatmap Explorer Trigger --> | |
| <button id="btn-open-heatmap" class="round-button" title="Interactive Sentence Attention Heatmap Explorer" style="background: rgba(236,72,153,0.2); color:#f472b6; border: 1px solid rgba(236,72,153,0.45);"> | |
| 🔥 Heatmap | |
| </button> | |
| <!-- Attention Square Unfolding & Matrix Deconstruction Trigger --> | |
| <button id="btn-open-unfolding" class="round-button" title="Attention Square Deconstruction & Matrix Unfolding Engine (U)" style="background: rgba(168,85,247,0.2); color:#c084fc; border: 1px solid rgba(168,85,247,0.45);"> | |
| 📐 Unfold Square | |
| </button> | |
| <!-- Live Autoregressive Token Prediction Trigger --> | |
| <button id="btn-open-prediction" class="round-button" title="Live Autoregressive Token Prediction Playground" style="background: rgba(16,185,129,0.2); color:#34d399; border: 1px solid rgba(16,185,129,0.45);"> | |
| ⚡ Predict | |
| </button> | |
| <!-- SVD Low-Rank Compression Simulator Trigger --> | |
| <button id="btn-open-compression" class="round-button" title="Interactive SVD Low-Rank Bottleneck Simulator" style="background: rgba(2,132,199,0.2); color:#38bdf8; border: 1px solid rgba(2,132,199,0.45);"> | |
| 🎛️ Compress | |
| </button> | |
| <!-- Side-by-Side Model Race Trigger --> | |
| <button id="btn-open-race" class="round-button" title="Side-by-Side Model Race & Telemetry Arena" style="background: rgba(245,158,11,0.2); color:#fbbf24; border: 1px solid rgba(245,158,11,0.45);"> | |
| 🏁 Race | |
| </button> | |
| <!-- Module Library Modal Trigger --> | |
| <button id="btn-open-catalog" class="round-button btn-catalog" title="Browse all 241 research modules" aria-haspopup="dialog" aria-controls="module-modal"> | |
| 📚 Library (241) | |
| </button> | |
| <!-- Deep Inspector Toggle --> | |
| <button id="btn-toggle-inspector" class="round-button" title="Toggle Deep Architecture Inspector" aria-expanded="false" aria-controls="inspector"> | |
| 🔬 Inspector | |
| </button> | |
| <!-- Share/Permalink Button --> | |
| <button id="btn-share" class="round-button" title="Copy shareable permalink to current state" aria-label="Copy shareable permalink"> | |
| 🔗 Share | |
| </button> | |
| <!-- Video Export Trigger --> | |
| <button id="btn-record-video" class="round-button" title="Record 360° Orbit Showcase Video (WebM/MP4)" style="background: rgba(236,72,153,0.2); color:#f472b6; border: 1px solid rgba(236,72,153,0.45);"> | |
| 🎥 Record | |
| </button> | |
| <!-- Keyboard shortcuts hint button --> | |
| <button id="btn-keyboard-shortcuts" class="round-button" title="Keyboard Shortcuts: Space=Play/Pause, R=Reset Camera, M=Module Library, P=Present, H=Heatmap, Esc=Close" aria-label="Keyboard shortcuts guide" style="opacity:0.85;font-size:11px;"> | |
| ⌨ Keys | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Floating Top Mechanism Navigation Bar --> | |
| <nav class="mechanism-nav" id="mechanism-nav" role="tablist" aria-label="Architecture Paradigm Navigation"> | |
| <button class="mechanism-button active" data-model="distilbert" data-module="svd" role="tab" aria-selected="true"> | |
| <b>DistilBERT</b> | |
| <small>Dense vs SVD · 66M</small> | |
| </button> | |
| <button class="mechanism-button" data-model="roberta" data-module="svd" role="tab" aria-selected="false"> | |
| <b>RoBERTa</b> | |
| <small>Dense vs SVD · 125M</small> | |
| </button> | |
| <button class="mechanism-button" data-model="gpt2" data-module="svd" role="tab" aria-selected="false"> | |
| <b>GPT-2</b> | |
| <small>Dense vs SVD · 124M</small> | |
| </button> | |
| <button class="mechanism-button" data-model="qwen" data-module="svd" role="tab" aria-selected="false"> | |
| <b>Qwen3.5</b> | |
| <small>Dense vs SVD · 0.5B</small> | |
| </button> | |
| <button class="mechanism-button" data-model="distilbert" data-module="moe" role="tab" aria-selected="false"> | |
| <b>ToMoE Experts</b> | |
| <small>Mixture-of-Experts</small> | |
| </button> | |
| <button class="mechanism-button" data-model="distilbert" data-module="slicegpt" role="tab" aria-selected="false"> | |
| <b>SliceGPT</b> | |
| <small>Channel Pruning</small> | |
| </button> | |
| </nav> | |
| <!-- Floating Left Stage Detail Card --> | |
| <div class="detail-card" id="detail-card" role="region" aria-label="Selected Stage Details"> | |
| <div class="detail-kicker" id="detail-kicker">STAGE 01 · INPUT EMBEDDINGS</div> | |
| <h2 id="detail-title">Input Embeddings</h2> | |
| <p id="detail-desc">Token sequences enter the network and project into continuous latent representations through the embedding lookup table.</p> | |
| <div class="fact-grid"> | |
| <div class="fact"> | |
| <small>LOGICAL SHAPE</small> | |
| <strong id="fact-shape">[30522 × 768]</strong> | |
| </div> | |
| <div class="fact"> | |
| <small>PARAM COUNT</small> | |
| <strong id="fact-params">23.44M</strong> | |
| </div> | |
| <div class="fact"> | |
| <small>SUBSPACE / RANK</small> | |
| <strong id="fact-subspace">d=768</strong> | |
| </div> | |
| <div class="fact"> | |
| <small>DELTA / STORAGE</small> | |
| <strong id="fact-delta" style="color: var(--cyan);">93.8 MB</strong> | |
| </div> | |
| </div> | |
| <button id="btn-detail-inspect" class="detail-inspect-btn" title="Open complete telemetry and mathematical formulation" aria-label="Open complete telemetry and formulas"> | |
| Inspect Full Breakdown & Formulas ↗ | |
| </button> | |
| </div> | |
| <!-- Floating Right Head-to-Head Comparison Card --> | |
| <div class="compare-card" id="compare-card" role="region" aria-label="Head-to-head comparison"> | |
| <div class="compare-head">HEAD-TO-HEAD COMPARISON</div> | |
| <div class="compare-row"> | |
| <span>Model:</span> | |
| <strong id="cmp-model-name">DistilBERT</strong> | |
| </div> | |
| <div class="compare-row"> | |
| <span>Dense Base:</span> | |
| <strong id="cmp-baseline-params">66.36M</strong> | |
| </div> | |
| <div class="compare-row"> | |
| <span>Compressed:</span> | |
| <strong id="cmp-compressed-params" style="color: var(--cyan);">29.20M</strong> | |
| </div> | |
| <div class="compare-row"> | |
| <span>Savings:</span> | |
| <strong id="cmp-ratio" style="color: var(--green);">2.27x (-56.0%)</strong> | |
| </div> | |
| <div class="compare-row"> | |
| <span>Memory Saved:</span> | |
| <strong id="cmp-storage" style="color: var(--amber);">148.6 MB</strong> | |
| </div> | |
| <div class="compare-row"> | |
| <span>Active Node:</span> | |
| <strong id="cmp-selected-node">input_embeddings</strong> | |
| </div> | |
| </div> | |
| <!-- Floating Bottom Control Dock --> | |
| <div class="control-dock" role="toolbar" aria-label="Playback and timeline controls"> | |
| <button id="btn-play-pause" class="primary" title="Toggle particle flow (Space)" aria-label="Toggle token flow animation">⏸ Pause</button> | |
| <select id="select-speed" class="speed" title="Particle flow speed" aria-label="Particle flow speed multiplier"> | |
| <option value="0.3">0.3x</option> | |
| <option value="0.5">0.5x</option> | |
| <option value="1.0" selected>1.0x</option> | |
| <option value="2.0">2.0x</option> | |
| </select> | |
| <div class="timeline" role="group" aria-label="Token lifecycle timeline"> | |
| <span class="timecode" id="timeline-step">01 Input</span> | |
| <input type="range" id="timeline-scrubber" min="0" max="6" step="1" value="0" title="Scrub through token lifecycle" aria-label="Token lifecycle position scrubber"> | |
| <span class="timecode" id="timeline-label">Input Embeddings</span> | |
| <div id="layer-quick-pills" class="layer-quick-pills" role="toolbar" aria-label="Quick jump to layer"></div> | |
| </div> | |
| <!-- Tour / Legend / Pin / Fit Actions Group --> | |
| <div class="dock-actions"> | |
| <button id="btn-auto-tour" class="secondary" title="Auto camera tour through all layers (8 stages × 3.2s)" aria-label="Start automated architecture camera tour">▶ Tour</button> | |
| <button id="btn-legend-toggle" class="secondary" title="Node color legend" aria-label="Toggle color legend">🎨</button> | |
| <button id="btn-pin-module" class="secondary" title="Pin current module for comparison" aria-label="Pin module for comparison">📌</button> | |
| <button id="btn-reset-cam" class="secondary" title="Auto-Fit Camera to Active Model (R)" aria-label="Auto-fit camera view">⊡ Fit</button> | |
| </div> | |
| </div> | |
| <!-- Viewport Split-Screen Legends --> | |
| <div class="legend" role="note" aria-label="Architecture color key"> | |
| <span><i style="background: #3c5d73;"></i> Dense Baseline ($O(N^2)$)</span> | |
| <span><i style="background: #22d5f7;"></i> Compressed ($U \times V$, MoE, MLA)</span> | |
| <span><i style="background: #10b981;"></i> Residual Skip Highway (+)</span> | |
| </div> | |
| <!-- Interactive Tooltip Overlay --> | |
| <div id="tooltip" class="tooltip hidden" role="tooltip" aria-hidden="true"></div> | |
| <!-- Hidden compatibility elements to ensure existing listeners don't break --> | |
| <div style="display: none;" aria-hidden="true"> | |
| <nav id="model-selector"> | |
| <button class="model-tab" data-model="distilbert" data-active="true"></button> | |
| <button class="model-tab" data-model="roberta" data-active="false"></button> | |
| <button class="model-tab" data-model="gpt2" data-active="false"></button> | |
| <button class="model-tab" data-model="qwen" data-active="false"></button> | |
| </nav> | |
| <nav id="compression-selector"> | |
| <button class="comp-tab active" data-module="svd"></button> | |
| <button class="comp-tab" data-module="moe"></button> | |
| <button class="comp-tab" data-module="mla"></button> | |
| <button class="comp-tab" data-module="slicegpt"></button> | |
| <button id="btn-browse-all-modules" class="comp-tab"></button> | |
| </nav> | |
| <span id="active-mode-label"></span> | |
| <span id="active-tokens-count"></span> | |
| <span id="left-panel-title"></span> | |
| <span id="right-panel-title"></span> | |
| <button class="btn-speed" data-speed="0.3"></button> | |
| <button class="btn-speed active" data-speed="1.0"></button> | |
| <button class="btn-speed" data-speed="2.0"></button> | |
| <input type="checkbox" id="toggle-pulse" checked> | |
| <button class="btn-lod" data-lod="macro"></button> | |
| <button class="btn-lod active" data-lod="mid"></button> | |
| <button class="btn-lod" data-lod="micro"></button> | |
| <button id="btn-zoom-out"></button> | |
| <button id="btn-zoom-in"></button> | |
| <div id="comparison-hud"> | |
| <span id="hud-model-name"></span> | |
| <span id="hud-active-module-badge" class="hud-badge" style="background:rgba(83,236,217,0.15);color:#53ecd9;border:1px solid rgba(83,236,217,0.4);font-size:9px;letter-spacing:0.5px;padding:1px 6px;border-radius:3px;opacity:0;transition:opacity 0.4s;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">—</span> | |
| <span id="hud-base-params"></span> | |
| <span id="hud-comp-params"></span> | |
| <span id="hud-ratio"></span> | |
| <span id="hud-saved"></span> | |
| </div> | |
| </div> | |
| <!-- Full Deep Inspector Drawer (slides out on request) --> | |
| <aside id="inspector" class="inspector-drawer hidden" role="dialog" aria-modal="false" aria-label="Deep Architecture Inspector"> | |
| <div class="drawer-header"> | |
| <div> | |
| <span id="insp-type-badge" class="badge">DENSE</span> | |
| <h3 id="insp-title">Layer Name</h3> | |
| </div> | |
| <button id="btn-close-insp" class="btn-icon-only" aria-label="Close Inspector Drawer">✕</button> | |
| </div> | |
| <div class="drawer-body"> | |
| <div class="stat-grid"> | |
| <div class="stat-cell"> | |
| <small>LOGICAL SHAPE</small> | |
| <strong id="insp-shape">—</strong> | |
| </div> | |
| <div class="stat-cell"> | |
| <small>PARAMETERS</small> | |
| <strong id="insp-params">—</strong> | |
| </div> | |
| <div class="stat-cell"> | |
| <small>EST. STORAGE</small> | |
| <strong id="insp-storage">—</strong> | |
| </div> | |
| <div class="stat-cell"> | |
| <small>COMPRESSION RATIO</small> | |
| <strong id="insp-efficiency" style="color: var(--col-svd);">—</strong> | |
| </div> | |
| </div> | |
| <!-- Deep Dimensional & Volumetric Telemetry --> | |
| <div class="stat-grid" style="margin-top: -6px;"> | |
| <div class="stat-cell"> | |
| <small>MATRIX DIMENSIONS</small> | |
| <strong id="insp-tensor-dims" style="color: #38bdf8;">[— × —]</strong> | |
| </div> | |
| <div class="stat-cell"> | |
| <small>ASPECT RATIO</small> | |
| <strong id="insp-aspect-ratio">—</strong> | |
| </div> | |
| <div class="stat-cell"> | |
| <small>3D TENSOR VOLUME</small> | |
| <strong id="insp-spatial-vol" style="color: #f6be68;">—</strong> | |
| </div> | |
| <div class="stat-cell"> | |
| <small>HEAD / RANK ARCH</small> | |
| <strong id="insp-heads-info">—</strong> | |
| </div> | |
| </div> | |
| <!-- Side-by-side Comparative Math --> | |
| <div class="comparison-card" id="insp-comp-card"> | |
| <div class="comp-header"> | |
| <span>PARAM COMPARISON</span> | |
| <span id="insp-savings-badge" class="badge badge-savings">-0%</span> | |
| </div> | |
| <div class="comp-row"> | |
| <span class="comp-label">Dense Baseline:</span> | |
| <span id="insp-comp-baseline" class="comp-val">—</span> | |
| </div> | |
| <div class="comp-row"> | |
| <span class="comp-label">SVD Low-Rank:</span> | |
| <span id="insp-comp-compressed" class="comp-val">—</span> | |
| </div> | |
| </div> | |
| <!-- Dedicated Attention Deep-Dive Card (13 Attention Variants) --> | |
| <div id="attention-deep-dive-card" style="margin-top: 12px;"></div> | |
| <!-- Structural Transformation (Before vs After) Explainer --> | |
| <div class="transformation-card" id="transformation-card"> | |
| <div class="transformation-header"> | |
| <span class="tf-title">STRUCTURAL TRANSFORMATION (BEFORE vs AFTER)</span> | |
| <span id="tf-paradigm-badge" class="badge">DECOMPOSITION</span> | |
| </div> | |
| <div class="tf-diagram" id="tf-diagram-body"></div> | |
| <table class="tf-comparison-table"> | |
| <thead> | |
| <tr> | |
| <th>ATTRIBUTE</th> | |
| <th>BASELINE</th> | |
| <th>COMPRESSED</th> | |
| <th>DELTA</th> | |
| </tr> | |
| </thead> | |
| <tbody id="tf-table-body"></tbody> | |
| </table> | |
| <div class="tf-explanation" id="tf-explanation-text"></div> | |
| </div> | |
| <!-- 4-Model Cross-Benchmark Matrix Dashboard --> | |
| <div class="models-matrix-section" id="models-matrix-section"> | |
| <div class="matrix-title-row"> | |
| <h4>4-MODEL ARCHITECTURE MATRIX</h4> | |
| <span class="matrix-subtitle">Click to switch 3D model</span> | |
| </div> | |
| <div class="models-matrix-grid" id="models-matrix-grid"> | |
| <!-- Dynamically populated 4 Model benchmark cards --> | |
| </div> | |
| </div> | |
| <!-- Token State Lifecycle & Step-by-Step Additions Tracker --> | |
| <div class="token-lifecycle-section" id="token-lifecycle-section"> | |
| <div class="matrix-title-row"> | |
| <h4>TOKEN LIFECYCLE & DATAFLOW</h4> | |
| <span class="badge" style="background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4);">7-STAGE FLOW</span> | |
| </div> | |
| <div class="lifecycle-subtitle">Tracks what enters, what gets added (+), and what exits at each transformer stage:</div> | |
| <div id="lifecycle-steps-list" class="lifecycle-steps-list"></div> | |
| </div> | |
| <!-- Architectural Component Flow & Sublayer Breakdown --> | |
| <div class="component-pipeline-section" id="component-pipeline-section"> | |
| <div class="matrix-title-row"> | |
| <h4>ARCHITECTURAL COMPONENT PIPELINE</h4> | |
| <span id="component-count-badge" class="badge">0 BLOCKS</span> | |
| </div> | |
| <div id="component-pipeline-list" class="component-pipeline-list"></div> | |
| </div> | |
| <!-- High-Definition LaTeX Mathematical Formulation --> | |
| <div class="latex-formula-card" id="latex-formula-card"> | |
| <div class="formula-header"> | |
| <span>MATHEMATICAL FORMULATION</span> | |
| </div> | |
| <div id="formula-latex-body" class="formula-latex-body"></div> | |
| </div> | |
| <div class="drawer-section" style="margin-top: 12px;"> | |
| <h4>Module Description & Implementation</h4> | |
| <p id="insp-desc">Click any 3D node or choose from the tree above to inspect rank decomposition, storage memory, and tensor dimensions.</p> | |
| </div> | |
| <!-- Parameter Breakdown Table --> | |
| <div id="param-breakdown-table"></div> | |
| <!-- Module Comparison Pin --> | |
| <div id="comparison-pin-section"> | |
| <div class="pbt-title">📌 Pinned vs Active Comparison</div> | |
| <div style="font-size:9px;color:var(--text-faint);margin-bottom:6px;">Pinned: <span id="pinned-module-name">—</span></div> | |
| <div id="comparison-pin-content"></div> | |
| </div> | |
| <div class="educational-callout" id="insp-edu-note"> | |
| 💡 <em>Token Funneling:</em> In SVD layers, watch how tokens squeeze horizontally through rank dimension $r=64$ in Factor $V$ before expanding back to full output dimension in Factor $U$. | |
| </div> | |
| <!-- Interactive Hierarchical Layer Explorer --> | |
| <div class="drawer-section" style="margin-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 12px;"> | |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;"> | |
| <h4>HIERARCHICAL LAYER EXPLORER</h4> | |
| <span id="insp-layer-count" style="font-size: 10px; color: var(--text-faint); font-family: var(--font-mono);">0 modules</span> | |
| </div> | |
| <div class="tree-search-wrapper"> | |
| <input type="text" id="tree-search-input" class="tree-search-input" placeholder="Search modules (e.g. q_proj, layer 0)..." autocomplete="off" spellcheck="false" aria-label="Search modules in hierarchy"> | |
| <button id="btn-tree-clear" class="btn-clear-search" title="Clear filter" aria-label="Clear search">✕</button> | |
| </div> | |
| <div id="layer-tree-container" class="layer-tree-container" role="tree" aria-label="Layer Architecture Tree"></div> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Module Library Modal (241 Modules) --> | |
| <div id="module-modal" class="modal-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="modal-title"> | |
| <div class="modal-container"> | |
| <div class="modal-header"> | |
| <div> | |
| <span class="hud-badge" style="background:#0284c7; color:#fff;">RESEARCH REPOSITORY</span> | |
| <h2 id="modal-title">Neural Architecture & Compression Modules (<span id="modal-module-count">241</span>)</h2> | |
| <p class="modal-subtitle">Choose from 241 state-of-the-art attention and compression engines developed in this framework to apply to the active 3D model.</p> | |
| </div> | |
| <button id="btn-close-modal" class="btn-icon-only modal-close" aria-label="Close modal">✕</button> | |
| </div> | |
| <div class="modal-search-row"> | |
| <input type="text" id="modal-search-input" class="modal-search-input" placeholder="Search 241 modules by name, algorithm, keyword (e.g. Mamba, CUR, AASVD, EAT, ToMoE)..." autocomplete="off" aria-label="Search 241 research modules"> | |
| <div class="modal-controls-subrow"> | |
| <div id="modal-category-pills" class="modal-category-pills" role="tablist" aria-label="Filter modules by paradigm"> | |
| <button class="cat-pill active" data-cat="all" role="tab" aria-selected="true">All (240)</button> | |
| <button class="cat-pill" data-cat="Low-Rank SVD & Factorization" role="tab" aria-selected="false">⚡ SVD & Low-Rank</button> | |
| <button class="cat-pill" data-cat="Mixture of Experts & Routing" role="tab" aria-selected="false">🔀 Mixture-of-Experts</button> | |
| <button class="cat-pill" data-cat="Linear Attention & State-Space (SSM)" role="tab" aria-selected="false">🐍 Linear & SSM</button> | |
| <button class="cat-pill" data-cat="Latent & KV-Cache Compression" role="tab" aria-selected="false">🧠 Latent & KV-Cache</button> | |
| <button class="cat-pill" data-cat="Structured Pruning & Channel Slicing" role="tab" aria-selected="false">✂️ Pruning & Slicing</button> | |
| <button class="cat-pill" data-cat="Dynamic & Efficient Attention" role="tab" aria-selected="false">🌟 Dynamic Attention</button> | |
| <button class="cat-pill" data-cat="Quantization & Mixed Precision" role="tab" aria-selected="false">💎 Quantization</button> | |
| </div> | |
| <div class="modal-sort-container"> | |
| <span class="sort-label">Sort:</span> | |
| <button class="sort-btn active" data-sort="accuracy" title="Sort by verified GLUE accuracy" aria-label="Sort by accuracy">🏆 Accuracy</button> | |
| <button class="sort-btn" data-sort="savings" title="Sort by parameter reduction ratio" aria-label="Sort by savings ratio">⚡ Savings</button> | |
| <button class="sort-btn" data-sort="name" title="Sort alphabetically by name" aria-label="Sort alphabetically">🔤 Name</button> | |
| <button class="sort-btn" data-sort="category" title="Sort grouped by category" aria-label="Sort by category">📂 Category</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="modal-module-grid" class="modal-module-grid" role="region" aria-label="Module Cards Gallery"> | |
| <!-- Dynamically populated 241 module cards --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Full Markdown & Research Paper Document Reader Modal --> | |
| <div id="doc-reader-modal" class="modal-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="doc-reader-title"> | |
| <div class="modal-container doc-reader-container"> | |
| <div class="modal-header"> | |
| <div> | |
| <span class="hud-badge" style="background:#10b981; color:#fff;">CANONICAL RESEARCH PAPER & SPECIFICATION</span> | |
| <h2 id="doc-reader-title">Module Documentation</h2> | |
| <p class="modal-subtitle" id="doc-reader-subtitle">Verified mathematical derivations, PyTorch tensor contracts, and benchmark results.</p> | |
| </div> | |
| <div style="display: flex; gap: 8px; align-items: center;"> | |
| <button id="btn-apply-from-doc" class="round-button btn-apply" style="padding: 6px 14px;">Apply to 3D Scene</button> | |
| <button id="btn-close-doc-modal" class="btn-icon-only modal-close" aria-label="Close document modal">✕</button> | |
| </div> | |
| </div> | |
| <div id="doc-reader-body" class="doc-reader-body markdown-body"> | |
| <!-- Dynamically rendered markdown content with KaTeX math --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Visualizer Logic --> | |
| <script type="module" src="app.js"></script> | |
| </body> | |
| </html> | |
Xet Storage Details
- Size:
- 30.4 kB
- Xet hash:
- ea87b8917f4c5cde8f76abbf8b6c60dfd2c69708cdcd3bd9ea7137aec2b6674d
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.