tahamajs/RR / Docs /visualizer /index.html
tahamajs's picture
download
raw
30.4 kB
<!DOCTYPE html>
<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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; Factorization" role="tab" aria-selected="false">⚡ SVD &amp; Low-Rank</button>
<button class="cat-pill" data-cat="Mixture of Experts &amp; Routing" role="tab" aria-selected="false">🔀 Mixture-of-Experts</button>
<button class="cat-pill" data-cat="Linear Attention &amp; State-Space (SSM)" role="tab" aria-selected="false">🐍 Linear &amp; SSM</button>
<button class="cat-pill" data-cat="Latent &amp; KV-Cache Compression" role="tab" aria-selected="false">🧠 Latent &amp; KV-Cache</button>
<button class="cat-pill" data-cat="Structured Pruning &amp; Channel Slicing" role="tab" aria-selected="false">✂️ Pruning &amp; Slicing</button>
<button class="cat-pill" data-cat="Dynamic &amp; Efficient Attention" role="tab" aria-selected="false">🌟 Dynamic Attention</button>
<button class="cat-pill" data-cat="Quantization &amp; 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 &amp; 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.