Recommit with PNGs tracked by LFS

.gitattributes

@@ -51,3 +51,4 @@ dist/static/graph_modular_related_models.png filter=lfs diff=lfs merge=lfs -text
 dist/static/Jaccard_similarity_plot.png filter=lfs diff=lfs merge=lfs -text
 dist/static/model_debugger.png filter=lfs diff=lfs merge=lfs -text
 dist/static/modular_candidates.png filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text

content/article.md

@@ -1,27 +1,17 @@
 
-## Introduction 
-
-The `transformers` library, built with `PyTorch`, supports all state-of-the-art LLMs, many VLMs, task-specific vision language models, video models, audio models, table models, classical encoders, to a global count of almost 400 models. 
-
-The name of the library itself is mostly majority driven as many models are not even transformers architectures, like Mamba, Zamba, RWKV, and convolution-based models.
-
-Regardless, each of these is wrought by the research and engineering team that created them, then harmonized into a now famous interface, and callable with a simple `.from_pretrained` command.
-
-Inference works for all models, training is functional for most. The library is a foundation for many machine learning courses, cookbooks, and overall, several thousands other open-source libraries depend on it. All models are tested as part of a daily CI ensuring their preservation and reproducibility. Most importantly, it is _open-source_ and has been written by the community for a large part.
-This isn't really to brag but to set the stakes: what does it take to keep such a ship afloat, made of so many moving, unrelated parts? 
-
-The ML wave has not stopped, there's more and more models being added, at a steadily growing rate. `Transformers` is widely used, and we read the feedback that users post online. Whether it's about a function that had 300+ keyword arguments, duplicated code and helpers, and mentions of `Copied from ... ` everywhere, along with optimisation concerns. Text-only models are relatively tamed, but multimodal models remain to be harmonized.
-
-Here we will dissect what is the new design philosophy of transformers, as a continuation from the existing older [philosophy](https://huggingface.co/docs/transformers/en/philosophy) page, and an accompanying [blog post from 2022](https://huggingface.co/blog/transformers-design-philosophy).
-
-More recently, and I recommend the read if it's not done yet, a blog post about [recent upgrades to transformers](https://huggingface.co/blog/faster-transformers) was written, explaining in particular what makes the library faster today.
-
-Some time ago I dare not say how long, we discussed with transformers maintainers about the state of features in transformers. A lot of recent developments were satisfactory, but if we were only talking about these, self-congratulation would be the only goalpost.
-
-Reflecting on this philosophy now, as models pile up, is essential and will drive new developments. 
-
-
-### What you will learn
+## Introduction  
+The `transformers` library, built with `PyTorch`, supports all state-of-the-art LLMs, many VLMs, task-specific vision language models, video models, audio models, table models, classical encoders, to a global count of almost 400 models.    
+The name of the library itself is mostly majority driven as many models are not even transformers architectures, like Mamba, Zamba, RWKV, and convolution-based models.  
+Regardless, each of these is wrought by the research and engineering team that created them, then harmonized into a now famous interface, and callable with a simple `.from_pretrained` command.  
+Inference works for all models, training is functional for most. The library is a foundation for many machine learning courses, cookbooks, and overall, several thousands other open-source libraries depend on it. All models are tested as part of a daily CI ensuring their preservation and reproducibility. Most importantly, it is _open-source_ and has been written by the community for a large part.  
+This isn't really to brag but to set the stakes: what does it take to keep such a ship afloat, made of so many moving, unrelated parts?  
+The ML wave has not stopped, there's more and more models being added, at a steadily growing rate. `Transformers` is widely used, and we read the feedback that users post online. Whether it's about a function that had 300+ keyword arguments, duplicated code and helpers, and mentions of `Copied from ... ` everywhere, along with optimisation concerns. Text-only models are relatively tamed, but multimodal models remain to be harmonized.  
+Here we will dissect what is the new design philosophy of transformers, as a continuation from the existing older [philosophy](https://huggingface.co/docs/transformers/en/philosophy) page, and an accompanying [blog post from 2022](https://huggingface.co/blog/transformers-design-philosophy).  
+More recently, and I recommend the read if it's not done yet, a blog post about [recent upgrades to transformers](https://huggingface.co/blog/faster-transformers) was written, explaining in particular what makes the library faster today.  
+Some time ago I dare not say how long, we discussed with transformers maintainers about the state of features in transformers. A lot of recent developments were satisfactory, but if we were only talking about these, self-congratulation would be the only goalpost.  
+Reflecting on this philosophy now, as models pile up, is essential and will drive new developments.
+
+### The core tenets of transformers
 
 Every reader, whether an OSS maintainer, power user, or casual fine-tuner, will walk away knowing how to reason about the `transformers` code base, how to use it better, how to meaningfully contribute to it.
 This will also showcase new features you might have missed so you'll be up-to-date.
@@ -210,6 +200,8 @@ class GlmRMSNorm(nn.Module):
 
 Plus, this opened another angle of contribution for the community. People who are GPU whisperers can now contribute optimized kernels. You can check on the [kernel community blog post](https://huggingface.co/blog/hello-hf-kernels) to learn more about it! 
 
+Even more resources have been added, like the formidable [kernel builder](https://github.com/huggingface/kernel-builder) with its connected resources to [help you build kernels with it](https://github.com/huggingface/kernel-builder/blob/main/docs/writing-kernels.md) and [with nix](https://github.com/huggingface/kernel-builder/blob/main/docs/nix.md).
+
 ## The good modularity
 
 Now, we have a form of inheritance in our codebase. Some models become standards, and model contributors are given the opportunity to _define standards_. Pushing the boundaries of scientific knowledge can translate into the boundaries of engineering if this effort is made, and we're striving for it.
@@ -232,11 +224,12 @@ As you can see, there is a small DETR island, a little llava pocket, and so on,
 
 Another problem is, this is only for `modular` models. Several models do NOT have a modular file.
 
-## Too many models, yet not enough, are alike
+## Many models, but not enough yet, are alike
 
 So I looked into Jaccard similarity, which we use to measure set differences. I know that code is more than a set of characters stringed together. I also used code embedding models to check out code similarities, and it yielded better results, for the needs of this blog post I will stick to Jaccard index. 
 
-It is interesting, for that, to look at _when_ we deployed this modular logic and what was its rippling effect on the library:
+It is interesting, for that, to look at _when_ we deployed this modular logic and what was its rippling effect on the library. You can check the [larger space](https://huggingface.co/spaces/Molbap/transformers-modular-refactor) to play around, but the gist is: adding modular allowed to connect more and more models to solid reference points. We have a lot of gaps to fill in still.
+
 {{{fragment-model-timeline}}} 
 
 If you've checked out llava, you've seen that llava_video is a red node, connected by a red edge to llava: it's a candidate, something that we can _likely_ remodularize, [not touching the actual model](#backwards-compatibility) but being much more readable with [DRY*](#do-repeat-yourself).
@@ -318,13 +311,15 @@ Cyclomatic complexity isn’t LOC, but they strongly correlate. As Les Hatton no
 
 {{{fragment-loc-growth}}}
 
+There's a sharp drop near the end, it's due to us [removing support for Jax and TensorFlow](https://github.com/huggingface/transformers/commit/4df2529d79d75f44e70396df5888a32ffa02d61e#diff-60849db3e9922197854ef1cac92bf4aba08b5d7fd3fe6f3c16a3511e29e0eacc) library-wide. 
+
 Of course, it is not only this effort that allowed to reduce the maintenance load. Externalising the [attention classes](#external-attention-classes) has moved out a lot of repeated code that was [standard](#standardize-dont-abstract). 
 
-## <a id="encoders-ftw"></a> The neverending stories of encoder models.
+## <a id="encoders-ftw"></a> Embedding models, now and forever.
 
 Models popularity speaks for itself! This is because the usage of encoders lies in embeddings. So we have to keep the encoders part viable, usable, fine-tune-able. 
 
-![Popular models bar plot](static/popular_models_barplot.png)
+{{{fragment-model-visualisation}}}
 
 As the codebase grows, with our friend codebase [Sentence Transformers](https://huggingface.co/sentence-transformers), we need to maintain this one as well. Retrieval use-cases, smart dbs, like FAISS-based indexing rely on it, and thus indirectly on transformers.
 
@@ -332,7 +327,9 @@ As the codebase grows, with our friend codebase [Sentence Transformers](https://
 
 Choosing to be a `torch`-first software meant relieving a tremendous amount of support from `jax ` and `TensorFlow` , and it also meant that we could be more lenient into the amount of torch-dependent utilities that we were able to add. One of these is the _fast processing_ of images. Where they were before assumed to be minimal ndarrays, making stronger assumptions and enforcing `torch` and `torchvision`native inputs allowed up to speed up massively the processing time for each model.
 
-The gains in performance are immense, up to 20x speed for most models when compiled torchvision ops. 
+The gains in performance are immense, up to 20x speed for most models when compiled torchvision ops.
+
+![Fast Image Processors Performance](fast_image_processors.png) 
  
 
 
@@ -352,44 +349,55 @@ In that regard, we DO want to be a [modular toolbox](#modular-toolbox), being [m
 ### Attention visualisation
 
 If all models have the same API internally for attention computation, it allows us to build cool tools to visualize the inner workings of the attention mechanism. One particular piece of
-machinery is the `attention mask`, cause of confusion. Thankfully, we can fix it.
+machinery is the `attention mask`, cause of confusion. 
+
+Here you see the famous bidirectional attention pattern for the whole prefix (text + image) in PaliGemma and all Gemma2+ models, contrasting with the usual "causal-only" models.
 
 {{{fragment-attention-visualizer}}}
 
-Because it is all PyTorch (and it is even more now that we support only PyTorch), we can easily debug any model when we want to add it to transformers. We now have a power-user tool for porting or adding models, that wraps a forward pass, intercepts every submodule call, and logs shapes, dtypes, and sample statistics of inputs/outputs to nested JSON. 
 
-It just works with PyTorch models and is especially useful when aligning outputs with a reference implementation, aligned with our core guideline, [source of truth for model definitions](#source-of-truth).
+### Logging entire model activations
+
+Further, because it is all PyTorch (and it is even more now that we support only PyTorch), we can easily debug any model when we want to add it to transformers. We now have a power-user tool for porting or adding models, that wraps a forward pass, intercepts every submodule call, and logs shapes, dtypes, and sample statistics of inputs/outputs to nested JSON. 
+
+It just works with PyTorch models and is especially useful when aligning outputs with a reference implementation, aligned with our [core guideline](#source-of-truth).
 
 ![Model debugger interface](static/model_debugger.png)
 
-### Transformers-serve
+### Cooking faster CUDA warmups
+
+Having a clean _external_ API allows us to work on the true inner workings of transformers. One of the few recent additions was the _CUDA warmup_ via `caching_allocator_warmup` which improved massively the loading footprint by pre-allocating GPU memory to avoid malloc bottlenecks during model loading. 
+
+{{{fragment-warmup_demo}}}
+
+It's hard to overstate how much of a lifesaver that is when you're trying to load a model as fast as possible, your iteration speed.
+
+## Transformers-serve and continuous batching
 
 Having all these models readily available allows to use all of them with transformers-serve, and enable interfacing with them with an Open API-like pattern. 
 
 ```bash
-# Start serving a model with transformers serve
 transformers serve
 
-# Query the model using OpenAI-compatible API
-curl -X POST http://localhost:8000/v1/chat/completions -H "Content-Type: application/json" -d '{"messages": [{"role": "system", "content": "hello"}], "temperature": 0.9, "max_tokens": 1000, "stream": true, "model": "Qwen/Qwen2.5-0.5B-Instruct"}'
+curl -X POST http://localhost:8000/v1/chat/completions \
+-H "Content-Type: application/json" \
+-d '{"messages": [{"role": "system", "content": "hello"}], "temperature": 0.9, "max_tokens": 1000, "stream": true, "model": "Qwen/Qwen2.5-0.5B-Instruct"}'
 ```
 
-This provides an OpenAI-compatible API with features like continuous batching for better GPU utilization.
+This provides an OpenAI-compatible API with features like [continuous batching](https://github.com/huggingface/transformers/pull/38085) (also check [here](https://github.com/huggingface/transformers/pull/40426)) for better GPU utilization.
+
+Continuous batching is in itself very much linked to the great work of vLLM with the `paged attention kernel`, further justifying the facilitation of [external kernels](#community-kernels). 
+
 
 ## Community reusability
  
-
-Adding a model to transformers means:
+Transformers-serve is transformers-first, for sure, but it's not limited to that. Adding a model to transformers means:
 - having it immediately available to the community
-- usable in vLLM, SGLang, and so on without additional code. In April 2025, transformers was added as a backend to run models on vLLM, which optimizes throughput/latency on top of existing transformers architectures [as seen in this great blog post.](https://blog.vllm.ai/2025/04/11/transformers-backend.html)
+- having it immediately usable in vLLM, SGLang, and so on without additional code. In April 2025, transformers was added as a backend to run models on vLLM, which optimizes throughput/latency on top of existing transformers architectures [as seen in this great blog post.](https://blog.vllm.ai/2025/04/11/transformers-backend.html)
 
-This cements the need even more for a [consistent public surface](#consistent-public-surface): we are now a backend, and there's more optimized software than us to handle serving. At the time of writing, more effort is done in that direction. We already have compatible configs for VLMs for vLLM (say that three times fast), [here for GLM4 video support](https://github.com/huggingface/transformers/pull/40696/files),  
+This cements the need even more for a [consistent public surface](#consistent-public-surface): we are now a backend, and there's more optimized software than us to handle serving. At the time of writing, more effort is done in that direction. We already have compatible configs for VLMs for vLLM (say that three times fast), [here for GLM4 video support](https://github.com/huggingface/transformers/pull/40696/files),  and here for [MoE support](https://github.com/huggingface/transformers/pull/40132) for instance.
 
-## Cooking faster CUDA warmups
 
-Having a clean _external_ API allows us to work on the true inner workings of transformers. One of the few recent additions was the _CUDA warmup_ via `caching_allocator_warmup` which improved massively the loading footprint by pre-allocating GPU memory to avoid malloc bottlenecks during model loading. 
-
-{{{fragment-warmup_demo}}}
 
 ## What is coming next
 

dist/fragments/attention-visualizer.html

@@ -1,102 +1,45 @@
-<div style="border: 1px solid #e2e8f0; border-radius: 8px; background: white; margin: 1.5rem 0;">
-    <div style="padding: 1rem; border-bottom: 1px solid #e2e8f0; background: #f8f9fa;">
-        <h4 style="margin: 0 0 0.5rem 0; color: #495057;">🔍 Attention Mask Visualizer</h4>
-        <p style="margin: 0; font-size: 0.9em; color: #6c757d;">
-            Visualize attention patterns in transformer models. This helps debug attention mask issues.
-        </p>
+<!-- Minimal HTML fragment: terminal-style ASCII attention masks -->
+<div style="max-width: 940px; margin: 16px 0; border:1px solid #2a2f3a; border-radius:8px; background:#0b0f19; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; color:#e5e7eb;">
+    <div style="display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid #1f2430; background:#111827; border-top-left-radius:8px; border-top-right-radius:8px;">
+      <span style="width:10px; height:10px; background:#ef4444; border-radius:50%; display:inline-block;"></span>
+      <span style="width:10px; height:10px; background:#f59e0b; border-radius:50%; display:inline-block;"></span>
+      <span style="width:10px; height:10px; background:#22c55e; border-radius:50%; display:inline-block;"></span>
+      <span style="margin-left:8px; font-size:12px; color:#9ca3af;">attention-mask-visualizer</span>
     </div>
-    
-    <div style="padding: 1rem;">
-        <div style="display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; margin-bottom: 1rem;">
-            <div>
-                <label style="display: block; font-weight: 600; margin-bottom: 0.5rem; color: #374151;">Model:</label>
-                <select id="model-select" style="width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 6px; background: white;">
-                    <option value="openai-community/gpt2">openai-community/gpt2</option>
-                    <option value="google/gemma-2-2b">google/gemma-2-2b</option>
-                    <option value="microsoft/DialoGPT-small">microsoft/DialoGPT-small</option>
-                </select>
-            </div>
-            
-            <div>
-                <label style="display: block; font-weight: 600; margin-bottom: 0.5rem; color: #374151;">Action:</label>
-                <button id="visualize-btn" style="padding: 0.5rem 1rem; background: #3b82f6; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 500;">
-                    🚀 Visualize
-                </button>
-            </div>
-        </div>
-        
-        <div style="margin-bottom: 1rem;">
-            <label style="display: block; font-weight: 600; margin-bottom: 0.5rem; color: #374151;">Prompt:</label>
-            <textarea id="prompt-input" 
-                      style="width: 100%; padding: 0.75rem; border: 1px solid #d1d5db; border-radius: 6px; resize: vertical; font-family: monospace; font-size: 0.9em;" 
-                      rows="3" 
-                      placeholder="You are an assistant. Make sure you print me."></textarea>
-        </div>
-        
-        <div id="attention-output" style="min-height: 200px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px; padding: 1rem;">
-            <div style="text-align: center; color: #6c757d; font-style: italic;">
-                Click "Visualize" to generate attention visualization
-            </div>
-        </div>
-    </div>
-    
-    <div style="padding: 1rem; border-top: 1px solid #e2e8f0; background: #f8f9fa; font-size: 0.9em; color: #6c757d;">
-        <strong>Note:</strong> This is a demonstration. In the original Gradio app, this would use GPU processing with ZeroGPU 
-        to generate real attention visualizations from transformer models.
-    </div>
-</div>
+    <div style="padding:12px 14px; overflow:auto; font-size:12.5px; line-height:1.4;">
+      <pre style="margin:0; white-space:pre; tab-size:2;">
+  ATTN MASK — GPT-2 (causal)
+  Tokens: [The, cat, sat, on, the, mat]
+  Legend: x = can attend, . = masked (future)
+  
+           The cat sat on  the mat
+  The       x
+  cat       x   x
+  sat       x   x   x
+  on        x   x   x   x
+  the       x   x   x   x   x
+  mat       x   x   x   x   x   x
+  
+  
+  ATTN MASK — PaliGemma-style (bidirectional prefix + causal suffix)
+  Prefix:  [&lt;i0&gt; &lt;i1&gt; &lt;i2&gt; &lt;i3&gt; &lt;i4&gt; What is this]
+  Suffix:  [A great duck]
+  Legend: ✓ = can attend, ✗ = cannot
 
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    const modelSelect = document.getElementById('model-select');
-    const promptInput = document.getElementById('prompt-input');
-    const visualizeBtn = document.getElementById('visualize-btn');
-    const output = document.getElementById('attention-output');
-    
-    // Set default prompt
-    promptInput.value = "You are an assistant. Make sure you print me.";
-    
-    visualizeBtn.addEventListener('click', function() {
-        const model = modelSelect.value;
-        const prompt = promptInput.value.trim();
-        
-        if (!prompt) {
-            output.innerHTML = '<div style="color: #e53e3e;">Please enter a prompt</div>';
-            return;
-        }
-        
-        // Show loading state
-        visualizeBtn.disabled = true;
-        visualizeBtn.textContent = 'Processing...';
-        output.innerHTML = '<div style="text-align: center; color: #6c757d;"><em>Generating attention visualization...</em></div>';
-        
-        // Simulate processing time
-        setTimeout(() => {
-            // Generate mock attention visualization
-            const tokens = prompt.split(' ').slice(0, 8); // Limit tokens for demo
-            let html = '<div style="margin-bottom: 1rem;"><strong>Model:</strong> ' + model + '</div>';
-            html += '<div style="margin-bottom: 1rem;"><strong>Tokens:</strong> ' + tokens.join(' • ') + '</div>';
-            html += '<div><strong>Attention Matrix (Layer 0, Head 0):</strong></div>';
-            html += '<table style="margin-top: 0.5rem; border-collapse: collapse; font-family: monospace; font-size: 0.8em;">';
-            
-            // Generate attention matrix visualization
-            for (let i = 0; i < tokens.length; i++) {
-                html += '<tr>';
-                for (let j = 0; j < tokens.length; j++) {
-                    const attention = Math.random();
-                    const opacity = attention;
-                    const color = `rgba(59, 130, 246, ${opacity})`;
-                    html += `<td style="border: 1px solid #ddd; padding: 4px; background: ${color}; text-align: center; min-width: 40px;">${attention.toFixed(2)}</td>`;
-                }
-                html += '</tr>';
-            }
-            html += '</table>';
-            html += '<div style="margin-top: 1rem; font-size: 0.9em; color: #6c757d;"><em>Darker blue = higher attention weight</em></div>';
-            
-            output.innerHTML = html;
-            visualizeBtn.disabled = false;
-            visualizeBtn.textContent = '🚀 Visualize';
-        }, 2000);
-    });
-});
-</script>
+             &lt;i0&gt;&lt;i1&gt;&lt;i2&gt;&lt;i3&gt;&lt;i4&gt; What  is  this  |   A   great  duck
+  &lt;i0&gt;        ✓   ✓   ✓   ✓   ✓    ✓     ✓    ✓        ✗     ✗      ✗
+  &lt;i1&gt;        ✓   ✓   ✓   ✓   ✓    ✓     ✓    ✓        ✗     ✗      ✗
+  &lt;i2&gt;        ✓   ✓   ✓   ✓   ✓    ✓     ✓    ✓        ✗     ✗      ✗
+  &lt;i3&gt;        ✓   ✓   ✓   ✓   ✓    ✓     ✓    ✓        ✗     ✗      ✗
+  &lt;i4&gt;        ✓   ✓   ✓   ✓   ✓    ✓     ✓    ✓        ✗     ✗      ✗
+  What        ✓   ✓   ✓   ✓   ✓    ✓     ✓    ✓        ✗     ✗      ✗
+  is          ✓   ✓   ✓   ✓   ✓    ✓     ✓    ✓        ✗     ✗      ✗
+  this        ✓   ✓   ✓   ✓   ✓    ✓     ✓    ✓        ✗     ✗      ✗
+  --------------------------------------------------------------------
+  A           ✓   ✓   ✓   ✓   ✓    ✓     ✓    ✓        ✓     ✗      ✗
+  great       ✓   ✓   ✓   ✓   ✓    ✓     ✓    ✓        ✓     ✓      ✗
+  duck        ✓   ✓   ✓   ✓   ✓    ✓     ✓    ✓        ✓     ✓      ✓
+      </pre>
+    </div>
+  </div>
+  

dist/fragments/dependency-graph.html

@@ -1,14 +1,6 @@
-<script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/4.0/gradio.js"></script>
-
-<section id="modular-explorer" data-no-toc style="margin:2rem 0">
-  <h2 style="margin:0 0 .5rem 0">🔍 Modular-candidate explorer (live)</h2>
-  <div style="position:relative; padding-top:62.5%; border:1px solid rgba(0,0,0,.08); border-radius:12px; overflow:hidden; background:#fff">
-    <gradio-app
-      src="https://molbap-transformers-modular-refactor.hf.space?tab=graph"
-      style="position:absolute; inset:0; width:100%; height:100%; border:0"
-    ></gradio-app>
-  </div>
-  <p class="figcaption" style="margin:.6rem 0 0 0">
-    Opens full app: <a href="https://huggingface.co/spaces/Molbap/transformers-modular-refactor" target="_blank" rel="noopener">Space page</a>.
-  </p>
-</section>
+<iframe
+src="https://molbap-dependencies-1.hf.space"
+style="width:100%; height:680px; border:0"
+allow="clipboard-read; clipboard-write; fullscreen"
+referrerpolicy="no-referrer-when-downgrade"
+></iframe>

dist/fragments/loc-growth.html

@@ -1,267 +1,6 @@
-<style>
-.loc-growth-container {
-    margin: 2rem 0;
-    border: 1px solid #e5e7eb;
-    border-radius: 12px;
-    overflow: hidden;
-    background: white;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-.loc-growth-header {
-    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-    color: white;
-    padding: 1rem 1.5rem;
-}
-
-.loc-growth-header h3 {
-    margin: 0;
-    font-size: 1.25rem;
-    font-weight: 600;
-}
-
-.loc-growth-controls {
-    padding: 1rem 1.5rem;
-    background: #f8f9fa;
-    border-bottom: 1px solid #e5e7eb;
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-    flex-wrap: wrap;
-}
-
-.loc-growth-control {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.loc-growth-control label {
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: #374151;
-}
-
-.loc-growth-control select {
-    padding: 0.5rem;
-    border: 1px solid #d1d5db;
-    border-radius: 6px;
-    background: white;
-    font-size: 0.875rem;
-}
-
-.loc-growth-control input[type="checkbox"] {
-    width: 16px;
-    height: 16px;
-    accent-color: #4facfe;
-}
-
-.loc-growth-iframe {
-    width: 100%;
-    height: 450px;
-    border: none;
-    background: white;
-}
-
-.loc-growth-footer {
-    padding: 1rem 1.5rem;
-    background: #f8f9fa;
-    font-size: 0.875rem;
-    color: #6b7280;
-    line-height: 1.5;
-}
-</style>
-
-<div class="loc-growth-container">
-    <div class="loc-growth-header">
-        <h3 data-no-toc">📈 Lines of Code Growth Analysis</h3>
-    </div>
-
-    <div class="loc-growth-controls">
-        <div class="loc-growth-control">
-            <label for="similarity-metric">Similarity metric:</label>
-            <select id="similarity-metric">
-                <option value="jaccard">Jaccard</option>
-                <option value="embedding">Embedding</option>
-            </select>
-        </div>
-
-        <div class="loc-growth-control">
-            <input type="checkbox" id="loc-multimodal-only">
-            <label for="loc-multimodal-only">Only multimodal models</label>
-        </div>
-
-        <div class="loc-growth-control">
-            <button id="update-loc" style="padding: 0.5rem 1rem; background: #4facfe; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;">
-                Update Chart
-            </button>
-        </div>
-    </div>
-
-    <iframe id="loc-frame" class="loc-growth-iframe" src="about:blank"></iframe>
-
-    <div class="loc-growth-footer">
-        <strong>Lines of code growth</strong> showing how the codebase has evolved over time.
-        This analysis reveals the impact of modularization efforts on code duplication and maintainability.
-        Different similarity metrics provide insights into various aspects of code relationships.
-    </div>
-</div>
-
-<script>
-(function() {
-    const metricSelect = document.getElementById('similarity-metric');
-    const multimodalCheckbox = document.getElementById('loc-multimodal-only');
-    const updateButton = document.getElementById('update-loc');
-    const locFrame = document.getElementById('loc-frame');
-
-    function updateLOC() {
-        const metric = metricSelect.value;
-        const multimodal = multimodalCheckbox.checked;
-
-        updateButton.textContent = 'Loading...';
-        updateButton.disabled = true;
-
-        // Create a LOC growth visualization
-        const locHtml = `
-        <!DOCTYPE html>
-        <html>
-        <head>
-            <script src="https://d3js.org/d3.v7.min.js"></script>
-            <style>
-                body { margin: 0; padding: 20px; font-family: system-ui, sans-serif; background: #fafafa; }
-                .loading { text-align: center; padding: 50px; color: #6b7280; }
-                .chart-container { background: white; border-radius: 8px; padding: 20px; }
-                .chart-title { text-align: center; font-weight: 600; margin-bottom: 20px; color: #374151; }
-                .axis { font-size: 12px; }
-                .line { fill: none; stroke-width: 2px; }
-                .line.total { stroke: #4facfe; }
-                .line.modular { stroke: #10b981; }
-                .line.non-modular { stroke: #f59e0b; }
-                .legend { font-size: 12px; }
-                .legend-item { margin-right: 20px; }
-                .legend-color { width: 12px; height: 12px; display: inline-block; margin-right: 5px; }
-                .tooltip {
-                    position: absolute;
-                    background: rgba(0,0,0,0.8);
-                    color: white;
-                    padding: 8px;
-                    border-radius: 4px;
-                    font-size: 12px;
-                    pointer-events: none;
-                    opacity: 0;
-                }
-            </style>
-        </head>
-        <body>
-            <div class="loading">Loading LOC growth analysis using ${metric} similarity${multimodal ? ' (multimodal only)' : ''}...</div>
-            <div class="chart-container" id="chart-content" style="display: none;">
-                <div class="chart-title">Lines of Code Growth Over Time</div>
-                <div class="legend" style="text-align: center; margin-bottom: 20px;">
-                    <span class="legend-item">
-                        <span class="legend-color" style="background: #4facfe;"></span>Total LOC
-                    </span>
-                    <span class="legend-item">
-                        <span class="legend-color" style="background: #10b981;"></span>Modular Models
-                    </span>
-                    <span class="legend-item">
-                        <span class="legend-color" style="background: #f59e0b;"></span>Non-Modular Models
-                    </span>
-                </div>
-                <svg id="loc-chart" width="100%" height="300"></svg>
-                <div style="margin-top: 20px; font-size: 0.875rem; color: #6b7280; text-align: center;">
-                    <p><strong>Key Insights:</strong></p>
-                    <p>• Modularization reduces code duplication and maintenance overhead</p>
-                    <p>• The ${metric} metric shows ${multimodal ? 'multimodal' : 'all'} model relationships</p>
-                    <p>• Growth trends indicate the effectiveness of the modular approach</p>
-                </div>
-            </div>
-            <div class="tooltip"></div>
-            <script>
-                // Sample LOC growth data
-                const sampleLOCData = [
-                    { date: '2022-01', total: 125000, modular: 15000, nonModular: 110000 },
-                    { date: '2022-06', total: 180000, modular: 35000, nonModular: 145000 },
-                    { date: '2023-01', total: 220000, modular: 65000, nonModular: 155000 },
-                    { date: '2023-06', total: 245000, modular: 95000, nonModular: 150000 },
-                    { date: '2024-01', total: 260000, modular: 125000, nonModular: 135000 },
-                    { date: '2024-06', total: 270000, modular: 155000, nonModular: 115000 }
-                ];
-
-                setTimeout(() => {
-                    const loadingDiv = document.querySelector('.loading');
-                    const chartDiv = document.getElementById('chart-content');
-
-                    // Simple chart rendering
-                    const svg = d3.select('#loc-chart');
-                    const margin = {top: 20, right: 30, bottom: 40, left: 60};
-                    const width = 500 - margin.left - margin.right;
-                    const height = 300 - margin.top - margin.bottom;
-
-                    const parseDate = d3.timeParse('%Y-%m');
-                    const data = sampleLOCData.map(d => ({
-                        ...d,
-                        date: parseDate(d.date)
-                    }));
-
-                    const x = d3.scaleTime()
-                        .domain(d3.extent(data, d => d.date))
-                        .range([0, width]);
-
-                    const y = d3.scaleLinear()
-                        .domain([0, d3.max(data, d => d.total)])
-                        .range([height, 0]);
-
-                    const g = svg.append('g')
-                        .attr('transform', \`translate(\${margin.left},\${margin.top})\`);
-
-                    // Add axes
-                    g.append('g')
-                        .attr('transform', \`translate(0,\${height})\`)
-                        .call(d3.axisBottom(x).tickFormat(d3.timeFormat('%Y-%m')));
-
-                    g.append('g')
-                        .call(d3.axisLeft(y).tickFormat(d => (d/1000) + 'k'));
-
-                    // Add lines
-                    const line = d3.line()
-                        .x(d => x(d.date))
-                        .y(d => y(d.value));
-
-                    const lines = [
-                        { key: 'total', color: '#4facfe', data: data.map(d => ({date: d.date, value: d.total})) },
-                        { key: 'modular', color: '#10b981', data: data.map(d => ({date: d.date, value: d.modular})) },
-                        { key: 'nonModular', color: '#f59e0b', data: data.map(d => ({date: d.date, value: d.nonModular})) }
-                    ];
-
-                    lines.forEach(lineData => {
-                        g.append('path')
-                            .datum(lineData.data)
-                            .attr('class', 'line')
-                            .attr('d', line)
-                            .style('stroke', lineData.color);
-                    });
-
-                    loadingDiv.style.display = 'none';
-                    chartDiv.style.display = 'block';
-                }, 1000);
-            </script>
-        </body>
-        </html>`;
-
-        // Encode the HTML for the iframe
-        const encodedHtml = 'data:text/html;charset=utf-8,' + encodeURIComponent(locHtml);
-        locFrame.src = encodedHtml;
-
-        setTimeout(() => {
-            updateButton.textContent = 'Update Chart';
-            updateButton.disabled = false;
-        }, 1000);
-    }
-
-    // Initial load
-    updateLOC();
-
-    // Update on button click
-    updateButton.addEventListener('click', updateLOC);
-})();
-</script>
+<iframe
+src="https://molbap-loc-1.hf.space"
+style="width:100%; height:680px; border:0"
+allow="clipboard-read; clipboard-write; fullscreen"
+referrerpolicy="no-referrer-when-downgrade"
+></iframe>

dist/fragments/model-timeline.html

@@ -1,254 +1,6 @@
-<style>
-.model-timeline-container {
-    margin: 2rem 0;
-    border: 1px solid #e5e7eb;
-    border-radius: 12px;
-    overflow: hidden;
-    background: white;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-.model-timeline-header {
-    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-    color: white;
-    padding: 1rem 1.5rem;
-}
-
-.model-timeline-header h3 {
-    margin: 0;
-    font-size: 1.25rem;
-    font-weight: 600;
-}
-
-.model-timeline-controls {
-    padding: 1rem 1.5rem;
-    background: #f8f9fa;
-    border-bottom: 1px solid #e5e7eb;
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-    flex-wrap: wrap;
-}
-
-.model-timeline-control {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.model-timeline-control label {
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: #374151;
-}
-
-.model-timeline-control input[type="range"] {
-    width: 120px;
-    height: 4px;
-    background: #e5e7eb;
-    border-radius: 2px;
-    outline: none;
-    -webkit-appearance: none;
-}
-
-.model-timeline-control input[type="range"]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    width: 16px;
-    height: 16px;
-    background: #f5576c;
-    border-radius: 50%;
-    cursor: pointer;
-}
-
-.model-timeline-control input[type="checkbox"] {
-    width: 16px;
-    height: 16px;
-    accent-color: #f5576c;
-}
-
-.model-timeline-control .threshold-value {
-    font-weight: 600;
-    color: #f5576c;
-    min-width: 40px;
-}
-
-.model-timeline-iframe {
-    width: 100%;
-    height: 500px;
-    border: none;
-    background: white;
-}
-
-.model-timeline-footer {
-    padding: 1rem 1.5rem;
-    background: #f8f9fa;
-    font-size: 0.875rem;
-    color: #6b7280;
-    line-height: 1.5;
-}
-</style>
-
-<div class="model-timeline-container">
-    <div class="model-timeline-header">
-        <h3 data-no-toc">📅 Model Evolution Timeline</h3>
-    </div>
-
-    <div class="model-timeline-controls">
-        <div class="model-timeline-control">
-            <label for="timeline-similarity-threshold">Similarity ≥</label>
-            <input type="range" id="timeline-similarity-threshold" min="0.5" max="0.95" step="0.01" value="0.6">
-            <span class="threshold-value" id="timeline-threshold-display">0.60</span>
-        </div>
-
-        <div class="model-timeline-control">
-            <input type="checkbox" id="timeline-multimodal-only">
-            <label for="timeline-multimodal-only">Only multimodal models</label>
-        </div>
-
-        <div class="model-timeline-control">
-            <button id="update-timeline" style="padding: 0.5rem 1rem; background: #f5576c; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;">
-                Update Timeline
-            </button>
-        </div>
-    </div>
-
-    <iframe id="timeline-frame" class="model-timeline-iframe" src="about:blank"></iframe>
-
-    <div class="model-timeline-footer">
-        <strong>Chronological model evolution</strong> showing when similar models were added to the library.
-        This timeline helps identify patterns in model development and the emergence of model families over time.
-        Higher similarity thresholds reveal closer relationships between models.
-    </div>
-</div>
-
-<script>
-(function() {
-    const thresholdSlider = document.getElementById('timeline-similarity-threshold');
-    const thresholdDisplay = document.getElementById('timeline-threshold-display');
-    const multimodalCheckbox = document.getElementById('timeline-multimodal-only');
-    const updateButton = document.getElementById('update-timeline');
-    const timelineFrame = document.getElementById('timeline-frame');
-
-    // Update threshold display
-    thresholdSlider.addEventListener('input', function() {
-        thresholdDisplay.textContent = parseFloat(this.value).toFixed(2);
-    });
-
-    function updateTimeline() {
-        const threshold = parseFloat(thresholdSlider.value);
-        const multimodal = multimodalCheckbox.checked;
-
-        updateButton.textContent = 'Loading...';
-        updateButton.disabled = true;
-
-        // Create a timeline visualization
-        const timelineHtml = `
-        <!DOCTYPE html>
-        <html>
-        <head>
-            <script src="https://d3js.org/d3.v7.min.js"></script>
-            <style>
-                body { margin: 0; padding: 20px; font-family: system-ui, sans-serif; background: #fafafa; }
-                .loading { text-align: center; padding: 50px; color: #6b7280; }
-                .timeline-container { max-width: 100%; margin: 0 auto; }
-                .timeline-item {
-                    background: white;
-                    margin: 10px 0;
-                    padding: 15px;
-                    border-radius: 8px;
-                    border-left: 4px solid #f5576c;
-                    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-                }
-                .timeline-date { font-weight: 600; color: #f5576c; font-size: 0.875rem; }
-                .timeline-model { font-weight: 500; margin: 5px 0; }
-                .timeline-similarity { font-size: 0.75rem; color: #6b7280; }
-                .metric-badge {
-                    display: inline-block;
-                    background: #f3f4f6;
-                    padding: 2px 8px;
-                    border-radius: 12px;
-                    font-size: 0.75rem;
-                    margin-left: 10px;
-                }
-            </style>
-        </head>
-        <body>
-            <div class="loading">Loading model timeline with threshold ≥ ${threshold}${multimodal ? ' (multimodal only)' : ''}...</div>
-            <div class="timeline-container" id="timeline-content" style="display: none;">
-                <!-- Timeline content will be inserted here -->
-            </div>
-            <script>
-                // Sample timeline data (in a real implementation, this would come from the API)
-                const sampleTimelineData = [
-                    { date: '2023-01', model: 'LLaVA-1.5', similarity: 0.85, type: 'multimodal' },
-                    { date: '2023-03', model: 'LLaVA-NeXT', similarity: 0.92, type: 'multimodal' },
-                    { date: '2023-06', model: 'Qwen-VL', similarity: 0.71, type: 'multimodal' },
-                    { date: '2023-09', model: 'LLaVA-NeXT-Video', similarity: 0.88, type: 'multimodal' },
-                    { date: '2024-01', model: 'Qwen2-VL', similarity: 0.76, type: 'multimodal' }
-                ];
-
-                setTimeout(() => {
-                    const filteredData = sampleTimelineData.filter(item => {
-                        if (${multimodal} && item.type !== 'multimodal') return false;
-                        return item.similarity >= ${threshold};
-                    });
-
-                    const loadingDiv = document.querySelector('.loading');
-                    const timelineDiv = document.getElementById('timeline-content');
-
-                    if (filteredData.length === 0) {
-                        loadingDiv.innerHTML = \`
-                            <div style="text-align: center; padding: 40px; color: #6b7280;">
-                                <p>📊 No models found with similarity ≥ ${threshold}</p>
-                                <p style="font-size: 0.875rem;">Try lowering the similarity threshold to see more model relationships.</p>
-                            </div>
-                        \`;
-                        return;
-                    }
-
-                    let timelineHTML = '';
-                    filteredData.forEach(item => {
-                        timelineHTML += \`
-                            <div class="timeline-item">
-                                <div class="timeline-date">\${item.date}</div>
-                                <div class="timeline-model">\${item.model}</div>
-                                <div class="timeline-similarity">
-                                    Similarity: \${item.similarity.toFixed(2)}
-                                    <span class="metric-badge">\${item.type}</span>
-                                </div>
-                            </div>
-                        \`;
-                    });
-
-                    timelineDiv.innerHTML = timelineHTML;
-                    loadingDiv.style.display = 'none';
-                    timelineDiv.style.display = 'block';
-                }, 1000);
-            </script>
-        </body>
-        </html>`;
-
-        // Encode the HTML for the iframe
-        const encodedHtml = 'data:text/html;charset=utf-8,' + encodeURIComponent(timelineHtml);
-        timelineFrame.src = encodedHtml;
-
-        setTimeout(() => {
-            updateButton.textContent = 'Update Timeline';
-            updateButton.disabled = false;
-        }, 1000);
-    }
-
-    // Initial load
-    updateTimeline();
-
-    // Update on button click
-    updateButton.addEventListener('click', updateTimeline);
-
-    // Update on Enter key in slider
-    thresholdSlider.addEventListener('keydown', function(e) {
-        if (e.key === 'Enter') {
-            updateTimeline();
-        }
-    });
-})();
-</script>
+    <iframe
+  src="https://molbap-timeline-1.hf.space"
+  style="width:100%; height:680px; border:0"
+  allow="clipboard-read; clipboard-write; fullscreen"
+  referrerpolicy="no-referrer-when-downgrade"
+></iframe>

dist/fragments/warmup_demo.html

@@ -243,7 +243,7 @@
 
         <div class="demo-container">
             <div class="side no-warmup">
-                <h2 data-no-toc>❌ Without Warmup</h2>
+                <h4 data-no-toc>❌ Without Warmup</h4>
                 <div class="timing" id="noWarmupTime">0.00s</div>
                 <div class="layer-counter" id="noWarmupCounter">Layers loaded: 0/10</div>
                 <div class="phase-indicator" id="noWarmupPhase"></div>
@@ -258,7 +258,7 @@
             </div>
 
             <div class="side with-warmup">
-                <h2 data-no-toc>✅ With Warmup</h2>
+                <h4 data-no-toc>✅ With Warmup</h4>
                 <div class="timing" id="warmupTime">0.00s</div>
                 <div class="layer-counter" id="warmupCounter">Layers loaded: 0/10</div>
                 <div class="phase-indicator" id="warmupPhase"></div>

dist/main.bundle.js

@@ -1201,20 +1201,22 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Transformers-specific styling addit
     counter-reset: tenet-counter -1; /* Start from 0 */
     list-style: none;
     padding-left: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 2.5rem;
+    max-width: 900px;
+    margin: 0 auto;
 }
 
 .tenet-list li.tenet {
     counter-increment: tenet-counter;
     background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
-    border: 2px solid transparent;
+    border: 2px solid #e2e8f0;
     border-radius: 16px;
     padding: 2rem 2rem 2rem 4rem;
     margin: 0;
     position: relative;
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
     transition: all 0.3s ease;
     cursor: pointer;
 }
@@ -1301,6 +1303,12 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Transformers-specific styling addit
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
 }
 
+/* Model visualization fragment styling */
+[id*="plot-model-visualisation"] {
+    margin: 1rem -2rem !important;
+    width: calc(100% + 4rem) !important;
+}
+
 .interactive-demo .demo-header {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
@@ -1854,7 +1862,7 @@ d-article .memory-chart-container {
     .interactive-demo .demo-content {
         padding: 1rem;
     }
-}`, "",{"version":3,"sources":["webpack://./src/transformers-custom.css"],"names":[],"mappings":"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","sourcesContent":["/* Transformers-specific styling additions */\n\n/* Code comparison layout */\n.code-compare {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 1.5rem;\n    margin: 2rem 0;\n    align-items: start;\n}\n\n.code-compare .code-column {\n    background: #ffffff;\n    border: 1px solid #e2e8f0;\n    border-radius: 8px;\n    overflow: hidden;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.code-compare .code-header {\n    background: #f8f9fa;\n    padding: 0.75rem 1rem;\n    font-weight: 600;\n    color: #495057;\n    border-bottom: 1px solid #e2e8f0;\n    font-size: 0.9em;\n}\n\n.code-compare pre {\n    margin: 0;\n    padding: 1rem;\n    background: #ffffff;\n    overflow-x: auto;\n    font-size: 0.85em;\n    line-height: 1.4;\n}\n\n.code-compare pre code {\n    color: #374151;\n}\n\n/* Mobile responsiveness for code comparison */\n@media (max-width: 768px) {\n    .code-compare {\n        grid-template-columns: 1fr;\n        gap: 1rem;\n    }\n}\n\n/* Tenet styling - special highlighting for design principles */\n.tenet-list {\n    margin: 3rem 0;\n}\n\n.tenet-list ol {\n    counter-reset: tenet-counter -1; /* Start from 0 */\n    list-style: none;\n    padding-left: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 2rem;\n}\n\n.tenet-list li.tenet {\n    counter-increment: tenet-counter;\n    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n    border: 2px solid transparent;\n    border-radius: 16px;\n    padding: 2rem 2rem 2rem 4rem;\n    margin: 0;\n    position: relative;\n    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);\n    transition: all 0.3s ease;\n    cursor: pointer;\n}\n\n.tenet-list li.tenet:hover {\n    transform: translateY(-8px) scale(1.02);\n    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);\n    border-color: rgba(0, 123, 255, 0.5);\n    background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);\n}\n\n/* Colorful numbering system */\n.tenet-list li.tenet:nth-child(1):before { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }\n.tenet-list li.tenet:nth-child(2):before { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }\n.tenet-list li.tenet:nth-child(3):before { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }\n.tenet-list li.tenet:nth-child(4):before { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }\n.tenet-list li.tenet:nth-child(5):before { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }\n.tenet-list li.tenet:nth-child(6):before { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }\n.tenet-list li.tenet:nth-child(7):before { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); }\n.tenet-list li.tenet:nth-child(8):before { background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); }\n.tenet-list li.tenet:nth-child(9):before { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); }\n\n.tenet-list li.tenet:before {\n    content: counter(tenet-counter);\n    position: absolute;\n    top: -12px;\n    left: -12px;\n    color: white;\n    width: 48px;\n    height: 48px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 1.2em;\n    font-weight: bold;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    border: 3px solid white;\n}\n\n.tenet-list li.tenet strong {\n    color: #1a202c;\n    font-size: 1.1em;\n    display: block;\n    margin-bottom: 0.5rem;\n}\n\n.tenet-list li.tenet em {\n    color: #4a5568;\n    font-size: 0.95em;\n    font-style: italic;\n    display: block;\n    margin-top: 0.75rem;\n    padding: 1rem;\n    background: rgba(0, 0, 0, 0.03);\n    border-radius: 8px;\n    border-left: 3px solid #e2e8f0;\n}\n\n.tenet-list li.tenet p {\n    color: #2d3748;\n    line-height: 1.6;\n    margin: 0.5rem 0;\n}\n\n/* Add a subtle pulse animation for the numbers */\n@keyframes pulse-glow {\n    0% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }\n    50% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); }\n    100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }\n}\n\n.tenet-list li.tenet:hover:before {\n    animation: pulse-glow 2s ease-in-out infinite;\n}\n\n/* Interactive component styling */\n.interactive-demo {\n    border: 1px solid #e2e8f0;\n    border-radius: 12px;\n    background: #ffffff;\n    margin: 2rem 0;\n    overflow: hidden;\n    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);\n}\n\n.interactive-demo .demo-header {\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n    color: white;\n    padding: 1rem 1.5rem;\n    font-weight: 600;\n}\n\n.interactive-demo .demo-content {\n    padding: 1.5rem;\n}\n\n.interactive-demo .demo-footer {\n    background: #f8f9fa;\n    padding: 1rem 1.5rem;\n    border-top: 1px solid #e2e8f0;\n    color: #6c757d;\n    font-size: 0.9em;\n}\n\n/* Button styling for interactive elements */\n.btn-primary {\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n    border: none;\n    color: white;\n    padding: 0.75rem 1.5rem;\n    border-radius: 6px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: transform 0.2s, box-shadow 0.2s;\n}\n\n.btn-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);\n}\n\n.btn-primary:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n    transform: none;\n    box-shadow: none;\n}\n\n/* Terminal styling */\n.terminal-container {\n    background: #1a202c;\n    border-radius: 8px;\n    padding: 1rem;\n    color: #e2e8f0;\n    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n    font-size: 0.9em;\n}\n\n.terminal-input {\n    background: #2d3748;\n    border: 1px solid #4a5568;\n    color: #e2e8f0;\n    padding: 0.5rem;\n    border-radius: 4px;\n    width: 100%;\n    font-family: inherit;\n}\n\n.terminal-output {\n    background: #0a0e1a;\n    padding: 1rem;\n    border-radius: 4px;\n    white-space: pre-wrap;\n    word-break: break-all;\n    min-height: 100px;\n    max-height: 300px;\n    overflow-y: auto;\n}\n\n/* Attention visualization styling */\n.attention-matrix {\n    font-family: monospace;\n    font-size: 0.8em;\n    border-collapse: collapse;\n    margin: 1rem 0;\n}\n\n.attention-matrix td {\n    border: 1px solid #ddd;\n    padding: 4px 8px;\n    text-align: center;\n    min-width: 50px;\n}\n\n/* Memory chart styling */\n.memory-chart-container {\n    background: #f8f9fa;\n    border: 2px solid #e9ecef;\n    border-radius: 8px;\n    padding: 1rem;\n    margin: 1rem 0;\n}\n\n/* Image styling improvements */\nimg {\n    max-width: 100%;\n    height: auto;\n    border-radius: 8px;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n    margin: 1.5rem 0;\n}\n\n/* Table of contents styling - Fixed positioning like ultrascale */\n@media (min-width: 1200px) {\n    d-article {\n        overflow: visible !important;\n    }\n    \n    d-contents {\n        align-self: start !important;\n        background: white !important;\n        grid-column-start: 1 !important;\n        grid-column-end: 4 !important;\n        grid-row: auto / span 6 !important;\n        justify-self: end !important;\n        margin-top: 0em !important;\n        padding-right: 3em !important;\n        padding-left: 2em !important;\n        position: -webkit-sticky !important; /* For Safari */\n        position: sticky !important;\n        top: 10px !important;\n        overflow-y: auto !important;\n        height: calc(100vh - 40px) !important;\n        scrollbar-width: none !important;\n        transition: max-height 0.3s ease-out !important;\n        z-index: -100 !important;\n        display: block !important;\n        visibility: visible !important;\n    }\n}\n\n@media (max-width: 1199px) {\n    d-contents {\n        display: none !important;\n        background: white !important;\n        justify-self: start !important;\n        align-self: start !important;\n        padding-bottom: 0.5em !important;\n        margin-bottom: 1em !important;\n        padding-left: 0.25em !important;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;\n        overflow-y: scroll !important;\n        height: calc(100vh - 40px) !important;\n        scrollbar-width: none !important;\n        z-index: -100 !important;\n    }\n}\n\n/* Force TOC to be visible and override distill defaults */\nd-contents {\n    display: block !important;\n    visibility: visible !important;\n    opacity: 1 !important;\n}\n\n/* TOC Navigation styling */\nd-contents .toc-header {\n    margin-bottom: 1.5rem;\n    border-bottom: 2px solid #007bff;\n    padding-bottom: 0.5rem;\n}\n\nd-contents .toc-title {\n    font-weight: bold;\n    font-size: 1.2em;\n    color: #333;\n}\n\nd-contents nav a {\n    color: rgba(0, 0, 0, 0.7);\n    text-decoration: none;\n    border-bottom: none;\n    display: block;\n    padding: 0.3rem 0;\n    font-size: 0.9em;\n    line-height: 1.4;\n    transition: color 0.2s ease;\n}\n\nd-contents nav a:hover {\n    color: #007bff;\n    text-decoration: none;\n}\n\nd-contents nav a.active {\n    color: #007bff;\n    font-weight: 600;\n}\n\nd-contents nav div {\n    margin-bottom: 0.2rem;\n}\n\n/* Smooth scrollbar */\nd-contents {\n    scrollbar-width: thin;\n    scrollbar-color: rgba(0, 123, 255, 0.3) transparent;\n}\n\nd-contents::-webkit-scrollbar {\n    width: 6px;\n}\n\nd-contents::-webkit-scrollbar-track {\n    background: transparent;\n}\n\nd-contents::-webkit-scrollbar-thumb {\n    background: rgba(0, 123, 255, 0.3);\n    border-radius: 3px;\n}\n\nd-contents::-webkit-scrollbar-thumb:hover {\n    background: rgba(0, 123, 255, 0.5);\n}\n\n/* Custom tooltip styling for tenet links */\nd-contents nav a[title] {\n    position: relative;\n    cursor: help;\n}\n\nd-contents nav a[title]:hover {\n    color: #667eea;\n}\n\n/* Enhanced tooltip using CSS (fallback for title attribute) */\nd-contents nav a[title]:after {\n    content: attr(title);\n    position: absolute;\n    left: 100%;\n    top: 50%;\n    transform: translateY(-50%);\n    background: #1a202c;\n    color: white;\n    padding: 0.75rem 1rem;\n    border-radius: 8px;\n    font-size: 0.85em;\n    white-space: normal;\n    width: 300px;\n    line-height: 1.4;\n    z-index: 1001;\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.3s ease, visibility 0.3s ease;\n    pointer-events: none;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\n}\n\nd-contents nav a[title]:before {\n    content: '';\n    position: absolute;\n    left: 100%;\n    top: 50%;\n    transform: translate(-8px, -50%);\n    border: 8px solid transparent;\n    border-right-color: #1a202c;\n    z-index: 1002;\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.3s ease, visibility 0.3s ease;\n}\n\nd-contents nav a[title]:hover:after,\nd-contents nav a[title]:hover:before {\n    opacity: 1;\n    visibility: visible;\n}\n\n/* Adjust for smaller screens */\n@media (max-width: 1400px) {\n    d-contents nav a[title]:after {\n        left: auto;\n        right: 100%;\n        margin-right: 1rem;\n        width: 250px;\n    }\n    \n    d-contents nav a[title]:before {\n        left: auto;\n        right: 100%;\n        transform: translate(8px, -50%);\n        border-right-color: transparent;\n        border-left-color: #1a202c;\n    }\n}\n\n/* Improve code syntax highlighting with Prism */\npre[class*=\"language-\"] {\n    background: #f8f9fa !important;\n    border: 1px solid #e9ecef !important;\n    border-radius: 8px !important;\n    padding: 1.5rem !important;\n    margin: 1.5rem 0 !important;\n    overflow-x: auto !important;\n    font-size: 0.9em !important;\n    line-height: 1.5 !important;\n}\n\ncode[class*=\"language-\"] {\n    background: none !important;\n    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace !important;\n    color: #383a42 !important;\n}\n\n/* Inline code */\np code, li code {\n    background: #f1f3f4 !important;\n    padding: 0.2em 0.4em !important;\n    border-radius: 3px !important;\n    font-size: 0.9em !important;\n    color: #d73a49 !important;\n}\n\n/* Distill article improvements */\nd-article {\n    max-width: none;\n    font-size: 18px; /* Increased from default ~16px */\n    line-height: 1.7;\n}\n\nd-article > * {\n    max-width: 1100px; /* Increased from 900px for more space */\n    margin-left: auto;\n    margin-right: auto;\n}\n\n/* Make content even wider on large screens when TOC is present */\n@media (min-width: 1400px) {\n    d-article > * {\n        max-width: 1300px;\n    }\n}\n\n/* Improve paragraph readability */\nd-article p {\n    font-size: 18px;\n    line-height: 1.8;\n    margin-bottom: 1.5rem;\n    color: #2d3748;\n}\n\n/* Improve heading sizes */\nd-article h1 {\n    font-size: 3rem;\n    line-height: 1.2;\n    margin: 3rem 0 2rem 0;\n    color: #1a202c;\n    font-weight: 700;\n}\n\nd-article h2 {\n    font-size: 2.5rem;\n    line-height: 1.3;\n    margin: 2.5rem 0 1.5rem 0;\n    color: #1a202c;\n    font-weight: 650;\n}\n\nd-article h3 {\n    font-size: 2rem;\n    line-height: 1.4;\n    margin: 2rem 0 1rem 0;\n    color: #1a202c;\n    font-weight: 600;\n}\n\nd-article h4 {\n    font-size: 1.5rem;\n    line-height: 1.4;\n    margin: 1.5rem 0 1rem 0;\n    color: #2d3748;\n    font-weight: 600;\n}\n\n/* Improve list readability */\nd-article ul li,\nd-article ol li {\n    font-size: 18px;\n    line-height: 1.7;\n    margin-bottom: 0.5rem;\n}\n\n/* Enhanced tenet reference styling with tooltips */\na[href^=\"#source-of-truth\"],\na[href^=\"#one-model-one-file\"],\na[href^=\"#code-is-product\"],\na[href^=\"#standardize-dont-abstract\"],\na[href^=\"#do-repeat-yourself\"],\na[href^=\"#minimal-user-api\"],\na[href^=\"#backwards-compatibility\"],\na[href^=\"#consistent-public-surface\"],\na[href^=\"#modular-toolbox\"] {\n    position: relative;\n    color: #667eea;\n    font-weight: 600;\n    text-decoration: underline;\n    text-decoration-color: rgba(102, 126, 234, 0.3);\n    transition: all 0.3s ease;\n    cursor: help;\n}\n\na[href^=\"#source-of-truth\"]:hover,\na[href^=\"#one-model-one-file\"]:hover,\na[href^=\"#code-is-product\"]:hover,\na[href^=\"#standardize-dont-abstract\"]:hover,\na[href^=\"#do-repeat-yourself\"]:hover,\na[href^=\"#minimal-user-api\"]:hover,\na[href^=\"#backwards-compatibility\"]:hover,\na[href^=\"#consistent-public-surface\"]:hover,\na[href^=\"#modular-toolbox\"]:hover {\n    color: #4c51bf;\n    text-decoration-color: #4c51bf;\n    background: rgba(102, 126, 234, 0.1);\n    padding: 2px 4px;\n    border-radius: 4px;\n}\n\n/* Tooltip content for each tenet */\na[href^=\"#source-of-truth\"]:after { content: \"We should be a source of truth for all model definitions. Model implementations should be reliable, reproducible, and faithful to the original performances.\"; }\na[href^=\"#one-model-one-file\"]:after { content: \"All inference (and most of training, loss is separate, not a part of model) logic visible, top‑to‑bottom.\"; }\na[href^=\"#code-is-product\"]:after { content: \"Optimize for reading, diffing, and tweaking, our users are power users. Variables can be explicit, full words, even several words, readability is primordial.\"; }\na[href^=\"#standardize-dont-abstract\"]:after { content: \"If it's model behavior, keep it in the file; abstractions only for generic infra.\"; }\na[href^=\"#do-repeat-yourself\"]:after { content: \"Copy when it helps users; keep successors in sync without centralizing behavior.\"; }\na[href^=\"#minimal-user-api\"]:after { content: \"Config, model, preprocessing; from_pretrained, save_pretrained, push_to_hub. We want the least amount of codepaths.\"; }\na[href^=\"#backwards-compatibility\"]:after { content: \"Evolve by additive standardization, never break public APIs.\"; }\na[href^=\"#consistent-public-surface\"]:after { content: \"Same argument names, same outputs, hidden states and attentions exposed.\"; }\na[href^=\"#modular-toolbox\"]:after { content: \"Provide tools and utilities, but don't force users into a rigid framework.\"; }\n\n/* Universal tooltip styling for tenet references */\na[href^=\"#source-of-truth\"]:after,\na[href^=\"#one-model-one-file\"]:after,\na[href^=\"#code-is-product\"]:after,\na[href^=\"#standardize-dont-abstract\"]:after,\na[href^=\"#do-repeat-yourself\"]:after,\na[href^=\"#minimal-user-api\"]:after,\na[href^=\"#backwards-compatibility\"]:after,\na[href^=\"#consistent-public-surface\"]:after,\na[href^=\"#modular-toolbox\"]:after {\n    position: absolute;\n    bottom: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    background: #1a202c;\n    color: white;\n    padding: 0.75rem 1rem;\n    border-radius: 8px;\n    font-size: 0.85em;\n    font-weight: 400;\n    white-space: normal;\n    width: 320px;\n    line-height: 1.4;\n    z-index: 1001;\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.3s ease, visibility 0.3s ease;\n    pointer-events: none;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\n    margin-bottom: 8px;\n}\n\n/* Tooltip arrows */\na[href^=\"#source-of-truth\"]:before,\na[href^=\"#one-model-one-file\"]:before,\na[href^=\"#code-is-product\"]:before,\na[href^=\"#standardize-dont-abstract\"]:before,\na[href^=\"#do-repeat-yourself\"]:before,\na[href^=\"#minimal-user-api\"]:before,\na[href^=\"#backwards-compatibility\"]:before,\na[href^=\"#consistent-public-surface\"]:before,\na[href^=\"#modular-toolbox\"]:before {\n    content: '';\n    position: absolute;\n    bottom: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    border: 8px solid transparent;\n    border-top-color: #1a202c;\n    z-index: 1002;\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.3s ease, visibility 0.3s ease;\n}\n\n/* Show tooltips on hover */\na[href^=\"#source-of-truth\"]:hover:after,\na[href^=\"#one-model-one-file\"]:hover:after,\na[href^=\"#code-is-product\"]:hover:after,\na[href^=\"#standardize-dont-abstract\"]:hover:after,\na[href^=\"#do-repeat-yourself\"]:hover:after,\na[href^=\"#minimal-user-api\"]:hover:after,\na[href^=\"#backwards-compatibility\"]:hover:after,\na[href^=\"#consistent-public-surface\"]:hover:after,\na[href^=\"#modular-toolbox\"]:hover:after,\na[href^=\"#source-of-truth\"]:hover:before,\na[href^=\"#one-model-one-file\"]:hover:before,\na[href^=\"#code-is-product\"]:hover:before,\na[href^=\"#standardize-dont-abstract\"]:hover:before,\na[href^=\"#do-repeat-yourself\"]:hover:before,\na[href^=\"#minimal-user-api\"]:hover:before,\na[href^=\"#backwards-compatibility\"]:hover:before,\na[href^=\"#consistent-public-surface\"]:hover:before,\na[href^=\"#modular-toolbox\"]:hover:before {\n    opacity: 1;\n    visibility: visible;\n}\n\n/* Improve blockquote styling */\nd-article blockquote {\n    font-size: 19px;\n    line-height: 1.8;\n    padding: 1.5rem 2rem;\n    margin: 2rem 0;\n    border-left: 4px solid #667eea;\n    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%);\n    border-radius: 0 8px 8px 0;\n    font-style: italic;\n    color: #4a5568;\n}\n\n/* Full width elements */\nd-article .code-compare,\nd-article .interactive-demo,\nd-article .memory-chart-container {\n    max-width: none;\n    width: 100%;\n    margin-left: 0;\n    margin-right: 0;\n}\n\n/* Responsive design improvements */\n@media (max-width: 1200px) {\n    d-article .code-compare,\n    d-article .interactive-demo {\n        max-width: 95%;\n        margin-left: auto;\n        margin-right: auto;\n    }\n}\n\n@media (max-width: 768px) {\n    .tenet-list li.tenet {\n        padding: 1rem;\n    }\n    \n    .interactive-demo .demo-content {\n        padding: 1rem;\n    }\n}"],"sourceRoot":""}]);
+}`, "",{"version":3,"sources":["webpack://./src/transformers-custom.css"],"names":[],"mappings":"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","sourcesContent":["/* Transformers-specific styling additions */\n\n/* Code comparison layout */\n.code-compare {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 1.5rem;\n    margin: 2rem 0;\n    align-items: start;\n}\n\n.code-compare .code-column {\n    background: #ffffff;\n    border: 1px solid #e2e8f0;\n    border-radius: 8px;\n    overflow: hidden;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.code-compare .code-header {\n    background: #f8f9fa;\n    padding: 0.75rem 1rem;\n    font-weight: 600;\n    color: #495057;\n    border-bottom: 1px solid #e2e8f0;\n    font-size: 0.9em;\n}\n\n.code-compare pre {\n    margin: 0;\n    padding: 1rem;\n    background: #ffffff;\n    overflow-x: auto;\n    font-size: 0.85em;\n    line-height: 1.4;\n}\n\n.code-compare pre code {\n    color: #374151;\n}\n\n/* Mobile responsiveness for code comparison */\n@media (max-width: 768px) {\n    .code-compare {\n        grid-template-columns: 1fr;\n        gap: 1rem;\n    }\n}\n\n/* Tenet styling - special highlighting for design principles */\n.tenet-list {\n    margin: 3rem 0;\n}\n\n.tenet-list ol {\n    counter-reset: tenet-counter -1; /* Start from 0 */\n    list-style: none;\n    padding-left: 0;\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 2.5rem;\n    max-width: 900px;\n    margin: 0 auto;\n}\n\n.tenet-list li.tenet {\n    counter-increment: tenet-counter;\n    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n    border: 2px solid #e2e8f0;\n    border-radius: 16px;\n    padding: 2rem 2rem 2rem 4rem;\n    margin: 0;\n    position: relative;\n    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);\n    transition: all 0.3s ease;\n    cursor: pointer;\n}\n\n.tenet-list li.tenet:hover {\n    transform: translateY(-8px) scale(1.02);\n    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);\n    border-color: rgba(0, 123, 255, 0.5);\n    background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);\n}\n\n/* Colorful numbering system */\n.tenet-list li.tenet:nth-child(1):before { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }\n.tenet-list li.tenet:nth-child(2):before { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }\n.tenet-list li.tenet:nth-child(3):before { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }\n.tenet-list li.tenet:nth-child(4):before { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }\n.tenet-list li.tenet:nth-child(5):before { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }\n.tenet-list li.tenet:nth-child(6):before { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }\n.tenet-list li.tenet:nth-child(7):before { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); }\n.tenet-list li.tenet:nth-child(8):before { background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); }\n.tenet-list li.tenet:nth-child(9):before { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); }\n\n.tenet-list li.tenet:before {\n    content: counter(tenet-counter);\n    position: absolute;\n    top: -12px;\n    left: -12px;\n    color: white;\n    width: 48px;\n    height: 48px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 1.2em;\n    font-weight: bold;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    border: 3px solid white;\n}\n\n.tenet-list li.tenet strong {\n    color: #1a202c;\n    font-size: 1.1em;\n    display: block;\n    margin-bottom: 0.5rem;\n}\n\n.tenet-list li.tenet em {\n    color: #4a5568;\n    font-size: 0.95em;\n    font-style: italic;\n    display: block;\n    margin-top: 0.75rem;\n    padding: 1rem;\n    background: rgba(0, 0, 0, 0.03);\n    border-radius: 8px;\n    border-left: 3px solid #e2e8f0;\n}\n\n.tenet-list li.tenet p {\n    color: #2d3748;\n    line-height: 1.6;\n    margin: 0.5rem 0;\n}\n\n/* Add a subtle pulse animation for the numbers */\n@keyframes pulse-glow {\n    0% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }\n    50% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); }\n    100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }\n}\n\n.tenet-list li.tenet:hover:before {\n    animation: pulse-glow 2s ease-in-out infinite;\n}\n\n/* Interactive component styling */\n.interactive-demo {\n    border: 1px solid #e2e8f0;\n    border-radius: 12px;\n    background: #ffffff;\n    margin: 2rem 0;\n    overflow: hidden;\n    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);\n}\n\n/* Model visualization fragment styling */\n[id*=\"plot-model-visualisation\"] {\n    margin: 1rem -2rem !important;\n    width: calc(100% + 4rem) !important;\n}\n\n.interactive-demo .demo-header {\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n    color: white;\n    padding: 1rem 1.5rem;\n    font-weight: 600;\n}\n\n.interactive-demo .demo-content {\n    padding: 1.5rem;\n}\n\n.interactive-demo .demo-footer {\n    background: #f8f9fa;\n    padding: 1rem 1.5rem;\n    border-top: 1px solid #e2e8f0;\n    color: #6c757d;\n    font-size: 0.9em;\n}\n\n/* Button styling for interactive elements */\n.btn-primary {\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n    border: none;\n    color: white;\n    padding: 0.75rem 1.5rem;\n    border-radius: 6px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: transform 0.2s, box-shadow 0.2s;\n}\n\n.btn-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);\n}\n\n.btn-primary:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n    transform: none;\n    box-shadow: none;\n}\n\n/* Terminal styling */\n.terminal-container {\n    background: #1a202c;\n    border-radius: 8px;\n    padding: 1rem;\n    color: #e2e8f0;\n    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n    font-size: 0.9em;\n}\n\n.terminal-input {\n    background: #2d3748;\n    border: 1px solid #4a5568;\n    color: #e2e8f0;\n    padding: 0.5rem;\n    border-radius: 4px;\n    width: 100%;\n    font-family: inherit;\n}\n\n.terminal-output {\n    background: #0a0e1a;\n    padding: 1rem;\n    border-radius: 4px;\n    white-space: pre-wrap;\n    word-break: break-all;\n    min-height: 100px;\n    max-height: 300px;\n    overflow-y: auto;\n}\n\n/* Attention visualization styling */\n.attention-matrix {\n    font-family: monospace;\n    font-size: 0.8em;\n    border-collapse: collapse;\n    margin: 1rem 0;\n}\n\n.attention-matrix td {\n    border: 1px solid #ddd;\n    padding: 4px 8px;\n    text-align: center;\n    min-width: 50px;\n}\n\n/* Memory chart styling */\n.memory-chart-container {\n    background: #f8f9fa;\n    border: 2px solid #e9ecef;\n    border-radius: 8px;\n    padding: 1rem;\n    margin: 1rem 0;\n}\n\n/* Image styling improvements */\nimg {\n    max-width: 100%;\n    height: auto;\n    border-radius: 8px;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n    margin: 1.5rem 0;\n}\n\n/* Table of contents styling - Fixed positioning like ultrascale */\n@media (min-width: 1200px) {\n    d-article {\n        overflow: visible !important;\n    }\n    \n    d-contents {\n        align-self: start !important;\n        background: white !important;\n        grid-column-start: 1 !important;\n        grid-column-end: 4 !important;\n        grid-row: auto / span 6 !important;\n        justify-self: end !important;\n        margin-top: 0em !important;\n        padding-right: 3em !important;\n        padding-left: 2em !important;\n        position: -webkit-sticky !important; /* For Safari */\n        position: sticky !important;\n        top: 10px !important;\n        overflow-y: auto !important;\n        height: calc(100vh - 40px) !important;\n        scrollbar-width: none !important;\n        transition: max-height 0.3s ease-out !important;\n        z-index: -100 !important;\n        display: block !important;\n        visibility: visible !important;\n    }\n}\n\n@media (max-width: 1199px) {\n    d-contents {\n        display: none !important;\n        background: white !important;\n        justify-self: start !important;\n        align-self: start !important;\n        padding-bottom: 0.5em !important;\n        margin-bottom: 1em !important;\n        padding-left: 0.25em !important;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;\n        overflow-y: scroll !important;\n        height: calc(100vh - 40px) !important;\n        scrollbar-width: none !important;\n        z-index: -100 !important;\n    }\n}\n\n/* Force TOC to be visible and override distill defaults */\nd-contents {\n    display: block !important;\n    visibility: visible !important;\n    opacity: 1 !important;\n}\n\n/* TOC Navigation styling */\nd-contents .toc-header {\n    margin-bottom: 1.5rem;\n    border-bottom: 2px solid #007bff;\n    padding-bottom: 0.5rem;\n}\n\nd-contents .toc-title {\n    font-weight: bold;\n    font-size: 1.2em;\n    color: #333;\n}\n\nd-contents nav a {\n    color: rgba(0, 0, 0, 0.7);\n    text-decoration: none;\n    border-bottom: none;\n    display: block;\n    padding: 0.3rem 0;\n    font-size: 0.9em;\n    line-height: 1.4;\n    transition: color 0.2s ease;\n}\n\nd-contents nav a:hover {\n    color: #007bff;\n    text-decoration: none;\n}\n\nd-contents nav a.active {\n    color: #007bff;\n    font-weight: 600;\n}\n\nd-contents nav div {\n    margin-bottom: 0.2rem;\n}\n\n/* Smooth scrollbar */\nd-contents {\n    scrollbar-width: thin;\n    scrollbar-color: rgba(0, 123, 255, 0.3) transparent;\n}\n\nd-contents::-webkit-scrollbar {\n    width: 6px;\n}\n\nd-contents::-webkit-scrollbar-track {\n    background: transparent;\n}\n\nd-contents::-webkit-scrollbar-thumb {\n    background: rgba(0, 123, 255, 0.3);\n    border-radius: 3px;\n}\n\nd-contents::-webkit-scrollbar-thumb:hover {\n    background: rgba(0, 123, 255, 0.5);\n}\n\n/* Custom tooltip styling for tenet links */\nd-contents nav a[title] {\n    position: relative;\n    cursor: help;\n}\n\nd-contents nav a[title]:hover {\n    color: #667eea;\n}\n\n/* Enhanced tooltip using CSS (fallback for title attribute) */\nd-contents nav a[title]:after {\n    content: attr(title);\n    position: absolute;\n    left: 100%;\n    top: 50%;\n    transform: translateY(-50%);\n    background: #1a202c;\n    color: white;\n    padding: 0.75rem 1rem;\n    border-radius: 8px;\n    font-size: 0.85em;\n    white-space: normal;\n    width: 300px;\n    line-height: 1.4;\n    z-index: 1001;\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.3s ease, visibility 0.3s ease;\n    pointer-events: none;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\n}\n\nd-contents nav a[title]:before {\n    content: '';\n    position: absolute;\n    left: 100%;\n    top: 50%;\n    transform: translate(-8px, -50%);\n    border: 8px solid transparent;\n    border-right-color: #1a202c;\n    z-index: 1002;\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.3s ease, visibility 0.3s ease;\n}\n\nd-contents nav a[title]:hover:after,\nd-contents nav a[title]:hover:before {\n    opacity: 1;\n    visibility: visible;\n}\n\n/* Adjust for smaller screens */\n@media (max-width: 1400px) {\n    d-contents nav a[title]:after {\n        left: auto;\n        right: 100%;\n        margin-right: 1rem;\n        width: 250px;\n    }\n    \n    d-contents nav a[title]:before {\n        left: auto;\n        right: 100%;\n        transform: translate(8px, -50%);\n        border-right-color: transparent;\n        border-left-color: #1a202c;\n    }\n}\n\n/* Improve code syntax highlighting with Prism */\npre[class*=\"language-\"] {\n    background: #f8f9fa !important;\n    border: 1px solid #e9ecef !important;\n    border-radius: 8px !important;\n    padding: 1.5rem !important;\n    margin: 1.5rem 0 !important;\n    overflow-x: auto !important;\n    font-size: 0.9em !important;\n    line-height: 1.5 !important;\n}\n\ncode[class*=\"language-\"] {\n    background: none !important;\n    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace !important;\n    color: #383a42 !important;\n}\n\n/* Inline code */\np code, li code {\n    background: #f1f3f4 !important;\n    padding: 0.2em 0.4em !important;\n    border-radius: 3px !important;\n    font-size: 0.9em !important;\n    color: #d73a49 !important;\n}\n\n/* Distill article improvements */\nd-article {\n    max-width: none;\n    font-size: 18px; /* Increased from default ~16px */\n    line-height: 1.7;\n}\n\nd-article > * {\n    max-width: 1100px; /* Increased from 900px for more space */\n    margin-left: auto;\n    margin-right: auto;\n}\n\n/* Make content even wider on large screens when TOC is present */\n@media (min-width: 1400px) {\n    d-article > * {\n        max-width: 1300px;\n    }\n}\n\n/* Improve paragraph readability */\nd-article p {\n    font-size: 18px;\n    line-height: 1.8;\n    margin-bottom: 1.5rem;\n    color: #2d3748;\n}\n\n/* Improve heading sizes */\nd-article h1 {\n    font-size: 3rem;\n    line-height: 1.2;\n    margin: 3rem 0 2rem 0;\n    color: #1a202c;\n    font-weight: 700;\n}\n\nd-article h2 {\n    font-size: 2.5rem;\n    line-height: 1.3;\n    margin: 2.5rem 0 1.5rem 0;\n    color: #1a202c;\n    font-weight: 650;\n}\n\nd-article h3 {\n    font-size: 2rem;\n    line-height: 1.4;\n    margin: 2rem 0 1rem 0;\n    color: #1a202c;\n    font-weight: 600;\n}\n\nd-article h4 {\n    font-size: 1.5rem;\n    line-height: 1.4;\n    margin: 1.5rem 0 1rem 0;\n    color: #2d3748;\n    font-weight: 600;\n}\n\n/* Improve list readability */\nd-article ul li,\nd-article ol li {\n    font-size: 18px;\n    line-height: 1.7;\n    margin-bottom: 0.5rem;\n}\n\n/* Enhanced tenet reference styling with tooltips */\na[href^=\"#source-of-truth\"],\na[href^=\"#one-model-one-file\"],\na[href^=\"#code-is-product\"],\na[href^=\"#standardize-dont-abstract\"],\na[href^=\"#do-repeat-yourself\"],\na[href^=\"#minimal-user-api\"],\na[href^=\"#backwards-compatibility\"],\na[href^=\"#consistent-public-surface\"],\na[href^=\"#modular-toolbox\"] {\n    position: relative;\n    color: #667eea;\n    font-weight: 600;\n    text-decoration: underline;\n    text-decoration-color: rgba(102, 126, 234, 0.3);\n    transition: all 0.3s ease;\n    cursor: help;\n}\n\na[href^=\"#source-of-truth\"]:hover,\na[href^=\"#one-model-one-file\"]:hover,\na[href^=\"#code-is-product\"]:hover,\na[href^=\"#standardize-dont-abstract\"]:hover,\na[href^=\"#do-repeat-yourself\"]:hover,\na[href^=\"#minimal-user-api\"]:hover,\na[href^=\"#backwards-compatibility\"]:hover,\na[href^=\"#consistent-public-surface\"]:hover,\na[href^=\"#modular-toolbox\"]:hover {\n    color: #4c51bf;\n    text-decoration-color: #4c51bf;\n    background: rgba(102, 126, 234, 0.1);\n    padding: 2px 4px;\n    border-radius: 4px;\n}\n\n/* Tooltip content for each tenet */\na[href^=\"#source-of-truth\"]:after { content: \"We should be a source of truth for all model definitions. Model implementations should be reliable, reproducible, and faithful to the original performances.\"; }\na[href^=\"#one-model-one-file\"]:after { content: \"All inference (and most of training, loss is separate, not a part of model) logic visible, top‑to‑bottom.\"; }\na[href^=\"#code-is-product\"]:after { content: \"Optimize for reading, diffing, and tweaking, our users are power users. Variables can be explicit, full words, even several words, readability is primordial.\"; }\na[href^=\"#standardize-dont-abstract\"]:after { content: \"If it's model behavior, keep it in the file; abstractions only for generic infra.\"; }\na[href^=\"#do-repeat-yourself\"]:after { content: \"Copy when it helps users; keep successors in sync without centralizing behavior.\"; }\na[href^=\"#minimal-user-api\"]:after { content: \"Config, model, preprocessing; from_pretrained, save_pretrained, push_to_hub. We want the least amount of codepaths.\"; }\na[href^=\"#backwards-compatibility\"]:after { content: \"Evolve by additive standardization, never break public APIs.\"; }\na[href^=\"#consistent-public-surface\"]:after { content: \"Same argument names, same outputs, hidden states and attentions exposed.\"; }\na[href^=\"#modular-toolbox\"]:after { content: \"Provide tools and utilities, but don't force users into a rigid framework.\"; }\n\n/* Universal tooltip styling for tenet references */\na[href^=\"#source-of-truth\"]:after,\na[href^=\"#one-model-one-file\"]:after,\na[href^=\"#code-is-product\"]:after,\na[href^=\"#standardize-dont-abstract\"]:after,\na[href^=\"#do-repeat-yourself\"]:after,\na[href^=\"#minimal-user-api\"]:after,\na[href^=\"#backwards-compatibility\"]:after,\na[href^=\"#consistent-public-surface\"]:after,\na[href^=\"#modular-toolbox\"]:after {\n    position: absolute;\n    bottom: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    background: #1a202c;\n    color: white;\n    padding: 0.75rem 1rem;\n    border-radius: 8px;\n    font-size: 0.85em;\n    font-weight: 400;\n    white-space: normal;\n    width: 320px;\n    line-height: 1.4;\n    z-index: 1001;\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.3s ease, visibility 0.3s ease;\n    pointer-events: none;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\n    margin-bottom: 8px;\n}\n\n/* Tooltip arrows */\na[href^=\"#source-of-truth\"]:before,\na[href^=\"#one-model-one-file\"]:before,\na[href^=\"#code-is-product\"]:before,\na[href^=\"#standardize-dont-abstract\"]:before,\na[href^=\"#do-repeat-yourself\"]:before,\na[href^=\"#minimal-user-api\"]:before,\na[href^=\"#backwards-compatibility\"]:before,\na[href^=\"#consistent-public-surface\"]:before,\na[href^=\"#modular-toolbox\"]:before {\n    content: '';\n    position: absolute;\n    bottom: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    border: 8px solid transparent;\n    border-top-color: #1a202c;\n    z-index: 1002;\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.3s ease, visibility 0.3s ease;\n}\n\n/* Show tooltips on hover */\na[href^=\"#source-of-truth\"]:hover:after,\na[href^=\"#one-model-one-file\"]:hover:after,\na[href^=\"#code-is-product\"]:hover:after,\na[href^=\"#standardize-dont-abstract\"]:hover:after,\na[href^=\"#do-repeat-yourself\"]:hover:after,\na[href^=\"#minimal-user-api\"]:hover:after,\na[href^=\"#backwards-compatibility\"]:hover:after,\na[href^=\"#consistent-public-surface\"]:hover:after,\na[href^=\"#modular-toolbox\"]:hover:after,\na[href^=\"#source-of-truth\"]:hover:before,\na[href^=\"#one-model-one-file\"]:hover:before,\na[href^=\"#code-is-product\"]:hover:before,\na[href^=\"#standardize-dont-abstract\"]:hover:before,\na[href^=\"#do-repeat-yourself\"]:hover:before,\na[href^=\"#minimal-user-api\"]:hover:before,\na[href^=\"#backwards-compatibility\"]:hover:before,\na[href^=\"#consistent-public-surface\"]:hover:before,\na[href^=\"#modular-toolbox\"]:hover:before {\n    opacity: 1;\n    visibility: visible;\n}\n\n/* Improve blockquote styling */\nd-article blockquote {\n    font-size: 19px;\n    line-height: 1.8;\n    padding: 1.5rem 2rem;\n    margin: 2rem 0;\n    border-left: 4px solid #667eea;\n    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%);\n    border-radius: 0 8px 8px 0;\n    font-style: italic;\n    color: #4a5568;\n}\n\n/* Full width elements */\nd-article .code-compare,\nd-article .interactive-demo,\nd-article .memory-chart-container {\n    max-width: none;\n    width: 100%;\n    margin-left: 0;\n    margin-right: 0;\n}\n\n/* Responsive design improvements */\n@media (max-width: 1200px) {\n    d-article .code-compare,\n    d-article .interactive-demo {\n        max-width: 95%;\n        margin-left: auto;\n        margin-right: auto;\n    }\n}\n\n@media (max-width: 768px) {\n    .tenet-list li.tenet {\n        padding: 1rem;\n    }\n    \n    .interactive-demo .demo-content {\n        padding: 1rem;\n    }\n}"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 

src/fragments/attention-visualizer.html

@@ -1,102 +1,45 @@
-<div style="border: 1px solid #e2e8f0; border-radius: 8px; background: white; margin: 1.5rem 0;">
-    <div style="padding: 1rem; border-bottom: 1px solid #e2e8f0; background: #f8f9fa;">
-        <h4 style="margin: 0 0 0.5rem 0; color: #495057;">🔍 Attention Mask Visualizer</h4>
-        <p style="margin: 0; font-size: 0.9em; color: #6c757d;">
-            Visualize attention patterns in transformer models. This helps debug attention mask issues.
-        </p>
+<!-- Minimal HTML fragment: terminal-style ASCII attention masks -->
+<div style="max-width: 940px; margin: 16px 0; border:1px solid #2a2f3a; border-radius:8px; background:#0b0f19; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; color:#e5e7eb;">
+    <div style="display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid #1f2430; background:#111827; border-top-left-radius:8px; border-top-right-radius:8px;">
+      <span style="width:10px; height:10px; background:#ef4444; border-radius:50%; display:inline-block;"></span>
+      <span style="width:10px; height:10px; background:#f59e0b; border-radius:50%; display:inline-block;"></span>
+      <span style="width:10px; height:10px; background:#22c55e; border-radius:50%; display:inline-block;"></span>
+      <span style="margin-left:8px; font-size:12px; color:#9ca3af;">attention-mask-visualizer</span>
     </div>
-    
-    <div style="padding: 1rem;">
-        <div style="display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; margin-bottom: 1rem;">
-            <div>
-                <label style="display: block; font-weight: 600; margin-bottom: 0.5rem; color: #374151;">Model:</label>
-                <select id="model-select" style="width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 6px; background: white;">
-                    <option value="openai-community/gpt2">openai-community/gpt2</option>
-                    <option value="google/gemma-2-2b">google/gemma-2-2b</option>
-                    <option value="microsoft/DialoGPT-small">microsoft/DialoGPT-small</option>
-                </select>
-            </div>
-            
-            <div>
-                <label style="display: block; font-weight: 600; margin-bottom: 0.5rem; color: #374151;">Action:</label>
-                <button id="visualize-btn" style="padding: 0.5rem 1rem; background: #3b82f6; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 500;">
-                    🚀 Visualize
-                </button>
-            </div>
-        </div>
-        
-        <div style="margin-bottom: 1rem;">
-            <label style="display: block; font-weight: 600; margin-bottom: 0.5rem; color: #374151;">Prompt:</label>
-            <textarea id="prompt-input" 
-                      style="width: 100%; padding: 0.75rem; border: 1px solid #d1d5db; border-radius: 6px; resize: vertical; font-family: monospace; font-size: 0.9em;" 
-                      rows="3" 
-                      placeholder="You are an assistant. Make sure you print me."></textarea>
-        </div>
-        
-        <div id="attention-output" style="min-height: 200px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px; padding: 1rem;">
-            <div style="text-align: center; color: #6c757d; font-style: italic;">
-                Click "Visualize" to generate attention visualization
-            </div>
-        </div>
-    </div>
-    
-    <div style="padding: 1rem; border-top: 1px solid #e2e8f0; background: #f8f9fa; font-size: 0.9em; color: #6c757d;">
-        <strong>Note:</strong> This is a demonstration. In the original Gradio app, this would use GPU processing with ZeroGPU 
-        to generate real attention visualizations from transformer models.
-    </div>
-</div>
+    <div style="padding:12px 14px; overflow:auto; font-size:12.5px; line-height:1.4;">
+      <pre style="margin:0; white-space:pre; tab-size:2;">
+  ATTN MASK — GPT-2 (causal)
+  Tokens: [The, cat, sat, on, the, mat]
+  Legend: x = can attend, . = masked (future)
+  
+           The cat sat on  the mat
+  The       x
+  cat       x   x
+  sat       x   x   x
+  on        x   x   x   x
+  the       x   x   x   x   x
+  mat       x   x   x   x   x   x
+  
+  
+  ATTN MASK — PaliGemma-style (bidirectional prefix + causal suffix)
+  Prefix:  [&lt;i0&gt; &lt;i1&gt; &lt;i2&gt; &lt;i3&gt; &lt;i4&gt; What is this]
+  Suffix:  [A great duck]
+  Legend: ✓ = can attend, ✗ = cannot
 
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    const modelSelect = document.getElementById('model-select');
-    const promptInput = document.getElementById('prompt-input');
-    const visualizeBtn = document.getElementById('visualize-btn');
-    const output = document.getElementById('attention-output');
-    
-    // Set default prompt
-    promptInput.value = "You are an assistant. Make sure you print me.";
-    
-    visualizeBtn.addEventListener('click', function() {
-        const model = modelSelect.value;
-        const prompt = promptInput.value.trim();
-        
-        if (!prompt) {
-            output.innerHTML = '<div style="color: #e53e3e;">Please enter a prompt</div>';
-            return;
-        }
-        
-        // Show loading state
-        visualizeBtn.disabled = true;
-        visualizeBtn.textContent = 'Processing...';
-        output.innerHTML = '<div style="text-align: center; color: #6c757d;"><em>Generating attention visualization...</em></div>';
-        
-        // Simulate processing time
-        setTimeout(() => {
-            // Generate mock attention visualization
-            const tokens = prompt.split(' ').slice(0, 8); // Limit tokens for demo
-            let html = '<div style="margin-bottom: 1rem;"><strong>Model:</strong> ' + model + '</div>';
-            html += '<div style="margin-bottom: 1rem;"><strong>Tokens:</strong> ' + tokens.join(' • ') + '</div>';
-            html += '<div><strong>Attention Matrix (Layer 0, Head 0):</strong></div>';
-            html += '<table style="margin-top: 0.5rem; border-collapse: collapse; font-family: monospace; font-size: 0.8em;">';
-            
-            // Generate attention matrix visualization
-            for (let i = 0; i < tokens.length; i++) {
-                html += '<tr>';
-                for (let j = 0; j < tokens.length; j++) {
-                    const attention = Math.random();
-                    const opacity = attention;
-                    const color = `rgba(59, 130, 246, ${opacity})`;
-                    html += `<td style="border: 1px solid #ddd; padding: 4px; background: ${color}; text-align: center; min-width: 40px;">${attention.toFixed(2)}</td>`;
-                }
-                html += '</tr>';
-            }
-            html += '</table>';
-            html += '<div style="margin-top: 1rem; font-size: 0.9em; color: #6c757d;"><em>Darker blue = higher attention weight</em></div>';
-            
-            output.innerHTML = html;
-            visualizeBtn.disabled = false;
-            visualizeBtn.textContent = '🚀 Visualize';
-        }, 2000);
-    });
-});
-</script>
+             &lt;i0&gt;&lt;i1&gt;&lt;i2&gt;&lt;i3&gt;&lt;i4&gt; What  is  this  |   A   great  duck
+  &lt;i0&gt;        ✓   ✓   ✓   ✓   ✓    ✓     ✓    ✓        ✗     ✗      ✗
+  &lt;i1&gt;        ✓   ✓   ✓   ✓   ✓    ✓     ✓    ✓        ✗     ✗      ✗
+  &lt;i2&gt;        ✓   ✓   ✓   ✓   ✓    ✓     ✓    ✓        ✗     ✗      ✗
+  &lt;i3&gt;        ✓   ✓   ✓   ✓   ✓    ✓     ✓    ✓        ✗     ✗      ✗
+  &lt;i4&gt;        ✓   ✓   ✓   ✓   ✓    ✓     ✓    ✓        ✗     ✗      ✗
+  What        ✓   ✓   ✓   ✓   ✓    ✓     ✓    ✓        ✗     ✗      ✗
+  is          ✓   ✓   ✓   ✓   ✓    ✓     ✓    ✓        ✗     ✗      ✗
+  this        ✓   ✓   ✓   ✓   ✓    ✓     ✓    ✓        ✗     ✗      ✗
+  --------------------------------------------------------------------
+  A           ✓   ✓   ✓   ✓   ✓    ✓     ✓    ✓        ✓     ✗      ✗
+  great       ✓   ✓   ✓   ✓   ✓    ✓     ✓    ✓        ✓     ✓      ✗
+  duck        ✓   ✓   ✓   ✓   ✓    ✓     ✓    ✓        ✓     ✓      ✓
+      </pre>
+    </div>
+  </div>
+  

src/fragments/dependency-graph.html

@@ -1,14 +1,6 @@
-<script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/4.0/gradio.js"></script>
-
-<section id="modular-explorer" data-no-toc style="margin:2rem 0">
-  <h2 style="margin:0 0 .5rem 0">🔍 Modular-candidate explorer (live)</h2>
-  <div style="position:relative; padding-top:62.5%; border:1px solid rgba(0,0,0,.08); border-radius:12px; overflow:hidden; background:#fff">
-    <gradio-app
-      src="https://molbap-transformers-modular-refactor.hf.space?tab=graph"
-      style="position:absolute; inset:0; width:100%; height:100%; border:0"
-    ></gradio-app>
-  </div>
-  <p class="figcaption" style="margin:.6rem 0 0 0">
-    Opens full app: <a href="https://huggingface.co/spaces/Molbap/transformers-modular-refactor" target="_blank" rel="noopener">Space page</a>.
-  </p>
-</section>
+<iframe
+src="https://molbap-dependencies-1.hf.space"
+style="width:100%; height:680px; border:0"
+allow="clipboard-read; clipboard-write; fullscreen"
+referrerpolicy="no-referrer-when-downgrade"
+></iframe>

src/fragments/loc-growth.html

@@ -1,267 +1,6 @@
-<style>
-.loc-growth-container {
-    margin: 2rem 0;
-    border: 1px solid #e5e7eb;
-    border-radius: 12px;
-    overflow: hidden;
-    background: white;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-.loc-growth-header {
-    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-    color: white;
-    padding: 1rem 1.5rem;
-}
-
-.loc-growth-header h3 {
-    margin: 0;
-    font-size: 1.25rem;
-    font-weight: 600;
-}
-
-.loc-growth-controls {
-    padding: 1rem 1.5rem;
-    background: #f8f9fa;
-    border-bottom: 1px solid #e5e7eb;
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-    flex-wrap: wrap;
-}
-
-.loc-growth-control {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.loc-growth-control label {
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: #374151;
-}
-
-.loc-growth-control select {
-    padding: 0.5rem;
-    border: 1px solid #d1d5db;
-    border-radius: 6px;
-    background: white;
-    font-size: 0.875rem;
-}
-
-.loc-growth-control input[type="checkbox"] {
-    width: 16px;
-    height: 16px;
-    accent-color: #4facfe;
-}
-
-.loc-growth-iframe {
-    width: 100%;
-    height: 450px;
-    border: none;
-    background: white;
-}
-
-.loc-growth-footer {
-    padding: 1rem 1.5rem;
-    background: #f8f9fa;
-    font-size: 0.875rem;
-    color: #6b7280;
-    line-height: 1.5;
-}
-</style>
-
-<div class="loc-growth-container">
-    <div class="loc-growth-header">
-        <h3 data-no-toc">📈 Lines of Code Growth Analysis</h3>
-    </div>
-
-    <div class="loc-growth-controls">
-        <div class="loc-growth-control">
-            <label for="similarity-metric">Similarity metric:</label>
-            <select id="similarity-metric">
-                <option value="jaccard">Jaccard</option>
-                <option value="embedding">Embedding</option>
-            </select>
-        </div>
-
-        <div class="loc-growth-control">
-            <input type="checkbox" id="loc-multimodal-only">
-            <label for="loc-multimodal-only">Only multimodal models</label>
-        </div>
-
-        <div class="loc-growth-control">
-            <button id="update-loc" style="padding: 0.5rem 1rem; background: #4facfe; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;">
-                Update Chart
-            </button>
-        </div>
-    </div>
-
-    <iframe id="loc-frame" class="loc-growth-iframe" src="about:blank"></iframe>
-
-    <div class="loc-growth-footer">
-        <strong>Lines of code growth</strong> showing how the codebase has evolved over time.
-        This analysis reveals the impact of modularization efforts on code duplication and maintainability.
-        Different similarity metrics provide insights into various aspects of code relationships.
-    </div>
-</div>
-
-<script>
-(function() {
-    const metricSelect = document.getElementById('similarity-metric');
-    const multimodalCheckbox = document.getElementById('loc-multimodal-only');
-    const updateButton = document.getElementById('update-loc');
-    const locFrame = document.getElementById('loc-frame');
-
-    function updateLOC() {
-        const metric = metricSelect.value;
-        const multimodal = multimodalCheckbox.checked;
-
-        updateButton.textContent = 'Loading...';
-        updateButton.disabled = true;
-
-        // Create a LOC growth visualization
-        const locHtml = `
-        <!DOCTYPE html>
-        <html>
-        <head>
-            <script src="https://d3js.org/d3.v7.min.js"></script>
-            <style>
-                body { margin: 0; padding: 20px; font-family: system-ui, sans-serif; background: #fafafa; }
-                .loading { text-align: center; padding: 50px; color: #6b7280; }
-                .chart-container { background: white; border-radius: 8px; padding: 20px; }
-                .chart-title { text-align: center; font-weight: 600; margin-bottom: 20px; color: #374151; }
-                .axis { font-size: 12px; }
-                .line { fill: none; stroke-width: 2px; }
-                .line.total { stroke: #4facfe; }
-                .line.modular { stroke: #10b981; }
-                .line.non-modular { stroke: #f59e0b; }
-                .legend { font-size: 12px; }
-                .legend-item { margin-right: 20px; }
-                .legend-color { width: 12px; height: 12px; display: inline-block; margin-right: 5px; }
-                .tooltip {
-                    position: absolute;
-                    background: rgba(0,0,0,0.8);
-                    color: white;
-                    padding: 8px;
-                    border-radius: 4px;
-                    font-size: 12px;
-                    pointer-events: none;
-                    opacity: 0;
-                }
-            </style>
-        </head>
-        <body>
-            <div class="loading">Loading LOC growth analysis using ${metric} similarity${multimodal ? ' (multimodal only)' : ''}...</div>
-            <div class="chart-container" id="chart-content" style="display: none;">
-                <div class="chart-title">Lines of Code Growth Over Time</div>
-                <div class="legend" style="text-align: center; margin-bottom: 20px;">
-                    <span class="legend-item">
-                        <span class="legend-color" style="background: #4facfe;"></span>Total LOC
-                    </span>
-                    <span class="legend-item">
-                        <span class="legend-color" style="background: #10b981;"></span>Modular Models
-                    </span>
-                    <span class="legend-item">
-                        <span class="legend-color" style="background: #f59e0b;"></span>Non-Modular Models
-                    </span>
-                </div>
-                <svg id="loc-chart" width="100%" height="300"></svg>
-                <div style="margin-top: 20px; font-size: 0.875rem; color: #6b7280; text-align: center;">
-                    <p><strong>Key Insights:</strong></p>
-                    <p>• Modularization reduces code duplication and maintenance overhead</p>
-                    <p>• The ${metric} metric shows ${multimodal ? 'multimodal' : 'all'} model relationships</p>
-                    <p>• Growth trends indicate the effectiveness of the modular approach</p>
-                </div>
-            </div>
-            <div class="tooltip"></div>
-            <script>
-                // Sample LOC growth data
-                const sampleLOCData = [
-                    { date: '2022-01', total: 125000, modular: 15000, nonModular: 110000 },
-                    { date: '2022-06', total: 180000, modular: 35000, nonModular: 145000 },
-                    { date: '2023-01', total: 220000, modular: 65000, nonModular: 155000 },
-                    { date: '2023-06', total: 245000, modular: 95000, nonModular: 150000 },
-                    { date: '2024-01', total: 260000, modular: 125000, nonModular: 135000 },
-                    { date: '2024-06', total: 270000, modular: 155000, nonModular: 115000 }
-                ];
-
-                setTimeout(() => {
-                    const loadingDiv = document.querySelector('.loading');
-                    const chartDiv = document.getElementById('chart-content');
-
-                    // Simple chart rendering
-                    const svg = d3.select('#loc-chart');
-                    const margin = {top: 20, right: 30, bottom: 40, left: 60};
-                    const width = 500 - margin.left - margin.right;
-                    const height = 300 - margin.top - margin.bottom;
-
-                    const parseDate = d3.timeParse('%Y-%m');
-                    const data = sampleLOCData.map(d => ({
-                        ...d,
-                        date: parseDate(d.date)
-                    }));
-
-                    const x = d3.scaleTime()
-                        .domain(d3.extent(data, d => d.date))
-                        .range([0, width]);
-
-                    const y = d3.scaleLinear()
-                        .domain([0, d3.max(data, d => d.total)])
-                        .range([height, 0]);
-
-                    const g = svg.append('g')
-                        .attr('transform', \`translate(\${margin.left},\${margin.top})\`);
-
-                    // Add axes
-                    g.append('g')
-                        .attr('transform', \`translate(0,\${height})\`)
-                        .call(d3.axisBottom(x).tickFormat(d3.timeFormat('%Y-%m')));
-
-                    g.append('g')
-                        .call(d3.axisLeft(y).tickFormat(d => (d/1000) + 'k'));
-
-                    // Add lines
-                    const line = d3.line()
-                        .x(d => x(d.date))
-                        .y(d => y(d.value));
-
-                    const lines = [
-                        { key: 'total', color: '#4facfe', data: data.map(d => ({date: d.date, value: d.total})) },
-                        { key: 'modular', color: '#10b981', data: data.map(d => ({date: d.date, value: d.modular})) },
-                        { key: 'nonModular', color: '#f59e0b', data: data.map(d => ({date: d.date, value: d.nonModular})) }
-                    ];
-
-                    lines.forEach(lineData => {
-                        g.append('path')
-                            .datum(lineData.data)
-                            .attr('class', 'line')
-                            .attr('d', line)
-                            .style('stroke', lineData.color);
-                    });
-
-                    loadingDiv.style.display = 'none';
-                    chartDiv.style.display = 'block';
-                }, 1000);
-            </script>
-        </body>
-        </html>`;
-
-        // Encode the HTML for the iframe
-        const encodedHtml = 'data:text/html;charset=utf-8,' + encodeURIComponent(locHtml);
-        locFrame.src = encodedHtml;
-
-        setTimeout(() => {
-            updateButton.textContent = 'Update Chart';
-            updateButton.disabled = false;
-        }, 1000);
-    }
-
-    // Initial load
-    updateLOC();
-
-    // Update on button click
-    updateButton.addEventListener('click', updateLOC);
-})();
-</script>
+<iframe
+src="https://molbap-loc-1.hf.space"
+style="width:100%; height:680px; border:0"
+allow="clipboard-read; clipboard-write; fullscreen"
+referrerpolicy="no-referrer-when-downgrade"
+></iframe>

src/fragments/model-timeline.html

@@ -1,254 +1,6 @@
-<style>
-.model-timeline-container {
-    margin: 2rem 0;
-    border: 1px solid #e5e7eb;
-    border-radius: 12px;
-    overflow: hidden;
-    background: white;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-.model-timeline-header {
-    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-    color: white;
-    padding: 1rem 1.5rem;
-}
-
-.model-timeline-header h3 {
-    margin: 0;
-    font-size: 1.25rem;
-    font-weight: 600;
-}
-
-.model-timeline-controls {
-    padding: 1rem 1.5rem;
-    background: #f8f9fa;
-    border-bottom: 1px solid #e5e7eb;
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-    flex-wrap: wrap;
-}
-
-.model-timeline-control {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.model-timeline-control label {
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: #374151;
-}
-
-.model-timeline-control input[type="range"] {
-    width: 120px;
-    height: 4px;
-    background: #e5e7eb;
-    border-radius: 2px;
-    outline: none;
-    -webkit-appearance: none;
-}
-
-.model-timeline-control input[type="range"]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    width: 16px;
-    height: 16px;
-    background: #f5576c;
-    border-radius: 50%;
-    cursor: pointer;
-}
-
-.model-timeline-control input[type="checkbox"] {
-    width: 16px;
-    height: 16px;
-    accent-color: #f5576c;
-}
-
-.model-timeline-control .threshold-value {
-    font-weight: 600;
-    color: #f5576c;
-    min-width: 40px;
-}
-
-.model-timeline-iframe {
-    width: 100%;
-    height: 500px;
-    border: none;
-    background: white;
-}
-
-.model-timeline-footer {
-    padding: 1rem 1.5rem;
-    background: #f8f9fa;
-    font-size: 0.875rem;
-    color: #6b7280;
-    line-height: 1.5;
-}
-</style>
-
-<div class="model-timeline-container">
-    <div class="model-timeline-header">
-        <h3 data-no-toc">📅 Model Evolution Timeline</h3>
-    </div>
-
-    <div class="model-timeline-controls">
-        <div class="model-timeline-control">
-            <label for="timeline-similarity-threshold">Similarity ≥</label>
-            <input type="range" id="timeline-similarity-threshold" min="0.5" max="0.95" step="0.01" value="0.6">
-            <span class="threshold-value" id="timeline-threshold-display">0.60</span>
-        </div>
-
-        <div class="model-timeline-control">
-            <input type="checkbox" id="timeline-multimodal-only">
-            <label for="timeline-multimodal-only">Only multimodal models</label>
-        </div>
-
-        <div class="model-timeline-control">
-            <button id="update-timeline" style="padding: 0.5rem 1rem; background: #f5576c; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.875rem;">
-                Update Timeline
-            </button>
-        </div>
-    </div>
-
-    <iframe id="timeline-frame" class="model-timeline-iframe" src="about:blank"></iframe>
-
-    <div class="model-timeline-footer">
-        <strong>Chronological model evolution</strong> showing when similar models were added to the library.
-        This timeline helps identify patterns in model development and the emergence of model families over time.
-        Higher similarity thresholds reveal closer relationships between models.
-    </div>
-</div>
-
-<script>
-(function() {
-    const thresholdSlider = document.getElementById('timeline-similarity-threshold');
-    const thresholdDisplay = document.getElementById('timeline-threshold-display');
-    const multimodalCheckbox = document.getElementById('timeline-multimodal-only');
-    const updateButton = document.getElementById('update-timeline');
-    const timelineFrame = document.getElementById('timeline-frame');
-
-    // Update threshold display
-    thresholdSlider.addEventListener('input', function() {
-        thresholdDisplay.textContent = parseFloat(this.value).toFixed(2);
-    });
-
-    function updateTimeline() {
-        const threshold = parseFloat(thresholdSlider.value);
-        const multimodal = multimodalCheckbox.checked;
-
-        updateButton.textContent = 'Loading...';
-        updateButton.disabled = true;
-
-        // Create a timeline visualization
-        const timelineHtml = `
-        <!DOCTYPE html>
-        <html>
-        <head>
-            <script src="https://d3js.org/d3.v7.min.js"></script>
-            <style>
-                body { margin: 0; padding: 20px; font-family: system-ui, sans-serif; background: #fafafa; }
-                .loading { text-align: center; padding: 50px; color: #6b7280; }
-                .timeline-container { max-width: 100%; margin: 0 auto; }
-                .timeline-item {
-                    background: white;
-                    margin: 10px 0;
-                    padding: 15px;
-                    border-radius: 8px;
-                    border-left: 4px solid #f5576c;
-                    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-                }
-                .timeline-date { font-weight: 600; color: #f5576c; font-size: 0.875rem; }
-                .timeline-model { font-weight: 500; margin: 5px 0; }
-                .timeline-similarity { font-size: 0.75rem; color: #6b7280; }
-                .metric-badge {
-                    display: inline-block;
-                    background: #f3f4f6;
-                    padding: 2px 8px;
-                    border-radius: 12px;
-                    font-size: 0.75rem;
-                    margin-left: 10px;
-                }
-            </style>
-        </head>
-        <body>
-            <div class="loading">Loading model timeline with threshold ≥ ${threshold}${multimodal ? ' (multimodal only)' : ''}...</div>
-            <div class="timeline-container" id="timeline-content" style="display: none;">
-                <!-- Timeline content will be inserted here -->
-            </div>
-            <script>
-                // Sample timeline data (in a real implementation, this would come from the API)
-                const sampleTimelineData = [
-                    { date: '2023-01', model: 'LLaVA-1.5', similarity: 0.85, type: 'multimodal' },
-                    { date: '2023-03', model: 'LLaVA-NeXT', similarity: 0.92, type: 'multimodal' },
-                    { date: '2023-06', model: 'Qwen-VL', similarity: 0.71, type: 'multimodal' },
-                    { date: '2023-09', model: 'LLaVA-NeXT-Video', similarity: 0.88, type: 'multimodal' },
-                    { date: '2024-01', model: 'Qwen2-VL', similarity: 0.76, type: 'multimodal' }
-                ];
-
-                setTimeout(() => {
-                    const filteredData = sampleTimelineData.filter(item => {
-                        if (${multimodal} && item.type !== 'multimodal') return false;
-                        return item.similarity >= ${threshold};
-                    });
-
-                    const loadingDiv = document.querySelector('.loading');
-                    const timelineDiv = document.getElementById('timeline-content');
-
-                    if (filteredData.length === 0) {
-                        loadingDiv.innerHTML = \`
-                            <div style="text-align: center; padding: 40px; color: #6b7280;">
-                                <p>📊 No models found with similarity ≥ ${threshold}</p>
-                                <p style="font-size: 0.875rem;">Try lowering the similarity threshold to see more model relationships.</p>
-                            </div>
-                        \`;
-                        return;
-                    }
-
-                    let timelineHTML = '';
-                    filteredData.forEach(item => {
-                        timelineHTML += \`
-                            <div class="timeline-item">
-                                <div class="timeline-date">\${item.date}</div>
-                                <div class="timeline-model">\${item.model}</div>
-                                <div class="timeline-similarity">
-                                    Similarity: \${item.similarity.toFixed(2)}
-                                    <span class="metric-badge">\${item.type}</span>
-                                </div>
-                            </div>
-                        \`;
-                    });
-
-                    timelineDiv.innerHTML = timelineHTML;
-                    loadingDiv.style.display = 'none';
-                    timelineDiv.style.display = 'block';
-                }, 1000);
-            </script>
-        </body>
-        </html>`;
-
-        // Encode the HTML for the iframe
-        const encodedHtml = 'data:text/html;charset=utf-8,' + encodeURIComponent(timelineHtml);
-        timelineFrame.src = encodedHtml;
-
-        setTimeout(() => {
-            updateButton.textContent = 'Update Timeline';
-            updateButton.disabled = false;
-        }, 1000);
-    }
-
-    // Initial load
-    updateTimeline();
-
-    // Update on button click
-    updateButton.addEventListener('click', updateTimeline);
-
-    // Update on Enter key in slider
-    thresholdSlider.addEventListener('keydown', function(e) {
-        if (e.key === 'Enter') {
-            updateTimeline();
-        }
-    });
-})();
-</script>
+    <iframe
+  src="https://molbap-timeline-1.hf.space"
+  style="width:100%; height:680px; border:0"
+  allow="clipboard-read; clipboard-write; fullscreen"
+  referrerpolicy="no-referrer-when-downgrade"
+></iframe>

src/fragments/warmup_demo.html

@@ -243,7 +243,7 @@
 
         <div class="demo-container">
             <div class="side no-warmup">
-                <h2 data-no-toc>❌ Without Warmup</h2>
+                <h4 data-no-toc>❌ Without Warmup</h4>
                 <div class="timing" id="noWarmupTime">0.00s</div>
                 <div class="layer-counter" id="noWarmupCounter">Layers loaded: 0/10</div>
                 <div class="phase-indicator" id="noWarmupPhase"></div>
@@ -258,7 +258,7 @@
             </div>
 
             <div class="side with-warmup">
-                <h2 data-no-toc>✅ With Warmup</h2>
+                <h4 data-no-toc>✅ With Warmup</h4>
                 <div class="timing" id="warmupTime">0.00s</div>
                 <div class="layer-counter" id="warmupCounter">Layers loaded: 0/10</div>
                 <div class="phase-indicator" id="warmupPhase"></div>

src/transformers-custom.css

@@ -56,20 +56,22 @@
     counter-reset: tenet-counter -1; /* Start from 0 */
     list-style: none;
     padding-left: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 2.5rem;
+    max-width: 900px;
+    margin: 0 auto;
 }
 
 .tenet-list li.tenet {
     counter-increment: tenet-counter;
     background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
-    border: 2px solid transparent;
+    border: 2px solid #e2e8f0;
     border-radius: 16px;
     padding: 2rem 2rem 2rem 4rem;
     margin: 0;
     position: relative;
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
     transition: all 0.3s ease;
     cursor: pointer;
 }
@@ -156,6 +158,12 @@
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
 }
 
+/* Model visualization fragment styling */
+[id*="plot-model-visualisation"] {
+    margin: 1rem -2rem !important;
+    width: calc(100% + 4rem) !important;
+}
+
 .interactive-demo .demo-header {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;