Spaces:

transformers-community
/

Transformers-tenets

Running

App Files Files Community

Molbap HF Staff commited on Oct 1

Commit

2f316e4

1 Parent(s): 7713755

some broken

Browse files

Files changed (8) hide show

app/dist/_astro/{index.CnFuS3U1.css → index.Cb8952bT.css} +0 -0
app/dist/_astro/{index.CnFuS3U1.css.gz → index.Cb8952bT.css.gz} +2 -2
app/dist/index.html +11 -11
app/dist/index.html.gz +2 -2
app/src/content/embeds/old_banner.html +143 -0
app/src/content/embeds/transformers/better-bloat.html +0 -0
app/src/styles/_reset.css +2 -2
app/src/styles/_variables.css +0 -1

app/dist/_astro/{index.CnFuS3U1.css → index.Cb8952bT.css} RENAMED Viewed

The diff for this file is too large to render. See raw diff

app/dist/_astro/{index.CnFuS3U1.css.gz → index.Cb8952bT.css.gz} RENAMED Viewed

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:61065d2e70dbdf047f73dea3d7a80b9389d2f80e2b798fc18544d445548d2191
-size 18332

 version https://git-lfs.github.com/spec/v1
+oid sha256:58d83d5019ff4253dac40a30b53e9e519bff80f16a23424df7ff3cf3152d0d5d
+size 18340

app/dist/index.html CHANGED Viewed

@@ -12,8 +12,8 @@
           document.documentElement.setAttribute("data-theme", theme);
         } catch {}
       })();
-    </script><script type="module" src="/scripts/color-palettes.js"></script><!-- TO MANAGE PROPERLY --><script src="https://cdn.plot.ly/plotly-3.0.0.min.js" charset="utf-8"></script><link rel="stylesheet" href="/_astro/index.CnFuS3U1.css"><script type="module" src="/_astro/hoisted.DK-CdsVg.js"></script>
-<script type="module" src="/_astro/page.CH0W_C1Z.js"></script></head> <body> <button id="theme-toggle" aria-label="Toggle color theme" data-astro-cid-x3pjskd3> <svg class="icon light" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-astro-cid-x3pjskd3> <circle cx="12" cy="12" r="5" data-astro-cid-x3pjskd3></circle> <line x1="12" y1="1" x2="12" y2="4" data-astro-cid-x3pjskd3></line> <line x1="12" y1="20" x2="12" y2="23" data-astro-cid-x3pjskd3></line> <line x1="1" y1="12" x2="4" y2="12" data-astro-cid-x3pjskd3></line> <line x1="20" y1="12" x2="23" y2="12" data-astro-cid-x3pjskd3></line> <line x1="4.22" y1="4.22" x2="6.34" y2="6.34" data-astro-cid-x3pjskd3></line> <line x1="17.66" y1="17.66" x2="19.78" y2="19.78" data-astro-cid-x3pjskd3></line> <line x1="4.22" y1="19.78" x2="6.34" y2="17.66" data-astro-cid-x3pjskd3></line> <line x1="17.66" y1="6.34" x2="19.78" y2="4.22" data-astro-cid-x3pjskd3></line> </svg> <svg class="icon dark" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-astro-cid-x3pjskd3> <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" data-astro-cid-x3pjskd3></path> </svg>  </button>  <section class="hero" data-astro-cid-bbe6dxrz> <h1 class="hero-title" data-astro-cid-bbe6dxrz>Maintain the unmaintainable:<br/>1M python loc, 400+ models</h1> <div class="hero-banner" data-astro-cid-bbe6dxrz> <figure class="html-embed"><div class="html-embed__card is-frameless"><div id="frag-w62h1tmv3ok"><style>
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600&display=swap');
 .banner-container {
@@ -438,7 +438,7 @@ We continue to support all new models and expect to do so for the foreseeable fu
 <p>It works as follows. In order to contribute a model, say for instance  define a <code>modular_</code> file that can inherit from <em>any function across all other modeling, configuration and processor files</em>.
 This modular file can use inheritance across models: and then, it will be unravelled into a fully functional modeling file.</p>
 <summary id="generated-modeling">Auto-generated modeling code</summary>
-<figure class="html-embed"><div class="html-embed__card"><div id="frag-ybqs9gf0ev"><div class="code-compare" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0;">
     <div class="code-column" style="border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden;">
         <div class="code-header" style="background: #f8f9fa; padding: 0.75rem 1rem; font-weight: 600; color: #495057; border-bottom: 1px solid #e2e8f0;">
             modular_glm.py
@@ -599,7 +599,7 @@ However, if a model has a modular_<em>.py and a corresponding automatically gene
 <p>That gives an “effective LOC” curve: the 𝗺𝗮𝗶𝗻𝘁𝗲𝗻𝗮𝗻𝗰𝗲 𝘀𝘂𝗿𝗳𝗮𝗰𝗲.</p>
 <p>Measured on git history, raw <code>modeling_*.py</code> grew at ~362 LOC/day before modular; counting only modular shards yields ~25 LOC/day after — about <strong>15× lower</strong>. The curve represents the <strong>maintenance surface</strong> today: what maintainers actually read and review.</p>
 <p>Less code to hand-maintain means fewer places to break. LOC is not complexity, but they correlate in review effort and change risk.</p>
-<figure class="html-embed"><div class="html-embed__card"><div id="frag-jghx9aupas7"><iframe
 src="https://molbap-loc-1.hf.space"
 style="width:100%; height:900px; border:0"
 allow="clipboard-read; clipboard-write; fullscreen"
@@ -636,7 +636,7 @@ We choose to place the level of abstraction higher than the device placement: a
 <p>Hence, we want to touch <a href="#minimal-user-api">minimally</a> to the modeling code, and only modify it when <em>architectural changes</em> are involved. For instance, for tensor parallelism, we instead now specify a simple <code>tp_plan</code>.</p>
 <p>The alternative would be to modify parent classes specific to their</p>
 <p>It is written once in the config and passed to <code>.from_pretrained()</code>. The plan maps module name patterns to partitioning strategies. Strategies are resolved by the internal <code>ParallelInterface</code>, which wires to sharding implementations <code>ColwiseParallel</code>, <code>RowwiseParallel</code>, packed variants, and so on.</p>
-<figure class="html-embed"><div class="html-embed__card"><div id="frag-clzju5lcjla"><pre><code class="language-python"># In the model's config (example: ERNIE 4.5-style decoder blocks)
 base_model_tp_plan = {
     "layers.*.self_attn.q_proj": "colwise",
     "layers.*.self_attn.k_proj": "colwise",
@@ -706,7 +706,7 @@ So I wanted to take a look at the current <strong>state of modularity</strong> a
 </ol>
 <p>So what do we see? Llama is a basis for many models, and it shows.
 Radically different architectures such as mamba have spawned their own dependency subgraph.</p>
-<figure class="html-embed"><div class="html-embed__card"><div id="frag-subjkeqxafn"><iframe
 src="https://molbap-dependencies-1.hf.space"
 style="width:100%; height:680px; border:0"
 allow="clipboard-read; clipboard-write; fullscreen"
@@ -721,7 +721,7 @@ As you can see, there is a small DETR island, a little llava pocket, and so on,
 <p>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. We also tried code-embedding models that ranked candidates better in practice, but for this post we stick to the deterministic Jaccard index.</p>
 <p>It is interesting, for that, to look at <em>when</em> we deployed this modular logic and what was its rippling effect on the library. You can check the <a href="https://huggingface.co/spaces/Molbap/transformers-modular-refactor">larger space</a> 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.</p>
 <p>Zoom out below - it’s full of models. You can click on a node to see its connections better, or use the text box to search for a model.</p>
-<figure class="html-embed"><div class="html-embed__card"><div id="frag-0o31bfnme37">    <iframe
   src="https://molbap-timeline-1.hf.space"
   style="width:100%; height:680px; border:0"
   allow="clipboard-read; clipboard-write; fullscreen"
@@ -739,7 +739,7 @@ As you can see, there is a small DETR island, a little llava pocket, and so on,
 <p>What is the current state of these “abstractions” across the codebase?
 You will see all the imports around a modeling file, here <a href="https://huggingface.co/google/gemma-3n-E4B-it">Gemma3n</a>.</p>
 <p>Zoom and drag to explore.</p>
-<figure class="html-embed"><div class="html-embed__card"><div id="frag-npl26ocd3f"><html>
     <head>
         <meta charset="utf-8">
@@ -1234,7 +1234,7 @@ That means every decision we make to abstract something else has to be extremely
 <div class="crumbs"><p>The shape of a contribution: add a model (or variant) with a small modular shard; the community and serving stacks pick it up immediately. Popularity trends (encoders/embeddings) guide where we invest. <strong>Next:</strong> power tools enabled by a consistent API.</p></div>
 <h3 id="-models-popularity"><a href="#-models-popularity"><a id="encoders-ftw"></a> Models popularity</a></h3>
 <p>Talking about dependencies, we can take a look at the number of downloads for transformer models popularity. One thing we see is the prominence of encoders: This is because the usage of encoders lies in embeddings, just check out <a href="https://huggingface.co/blog/embeddinggemma">EmbeddingGemma</a> for a modern recap. Hence, it is vital to keep the encoders part viable, usable, fine-tune-able.</p>
-<div><figure class="html-embed"><div class="html-embed__card"><div id="frag-iker9jsycvd"><html>
 <head><meta charset="utf-8" /></head>
 <body>
     <div>                        <script type="text/javascript">window.PlotlyConfig = {MathJaxConfig: 'local'};</script>
@@ -5130,7 +5130,7 @@ return Plotly;
 <h3 id="attention-visualisation"><a href="#attention-visualisation">Attention visualisation</a></h3>
 <p>All models have the same API internally for attention computation, thanks to <a href="#external-attention-classes">the externalisation of attention classes</a>. it allows us to build cool tools to visualize the inner workings of the attention mechanism.</p>
 <p>One particular piece of machinery is the <code>attention mask</code>. 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.</p>
-<figure class="html-embed"><div class="html-embed__card"><div id="frag-bqf4ypa5oab"><!-- 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>
@@ -5183,7 +5183,7 @@ return Plotly;
 <div class="crumbs"><p>Forward interception and nested JSON logging align ports to reference implementations, reinforcing “Source of Truth.” <strong>Next:</strong> CUDA warmup reduces load-time stalls without touching modeling semantics.</p></div>
 <h3 id="cooking-faster-cuda-warmups"><a href="#cooking-faster-cuda-warmups">Cooking faster CUDA warmups</a></h3>
 <p>Having a clean <em>external</em> API allows us to work on the <a href="#code-is-product">true inner workings of transformers</a>. One of the few recent additions was the <em>CUDA warmup</em> via <code>caching_allocator_warmup</code> which improved massively the loading footprint by pre-allocating GPU memory to avoid malloc bottlenecks during model loading, achieving a 7x factor for an 8B model, 6x for a 32B, you can check out <a href="https://github.com/huggingface/transformers/pull/36380">the source</a>!</p>
-<figure class="html-embed"><div class="html-embed__card"><div id="frag-v6engnjl7vn"><style>
 /* 1) Scope tokens to the widget */
 .warmup-demo{
   --page-bg:#ffffff;

           document.documentElement.setAttribute("data-theme", theme);
         } catch {}
       })();
+    </script><script type="module" src="/scripts/color-palettes.js"></script><!-- TO MANAGE PROPERLY --><script src="https://cdn.plot.ly/plotly-3.0.0.min.js" charset="utf-8"></script><link rel="stylesheet" href="/_astro/index.Cb8952bT.css"><script type="module" src="/_astro/hoisted.DK-CdsVg.js"></script>
+<script type="module" src="/_astro/page.CH0W_C1Z.js"></script></head> <body> <button id="theme-toggle" aria-label="Toggle color theme" data-astro-cid-x3pjskd3> <svg class="icon light" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-astro-cid-x3pjskd3> <circle cx="12" cy="12" r="5" data-astro-cid-x3pjskd3></circle> <line x1="12" y1="1" x2="12" y2="4" data-astro-cid-x3pjskd3></line> <line x1="12" y1="20" x2="12" y2="23" data-astro-cid-x3pjskd3></line> <line x1="1" y1="12" x2="4" y2="12" data-astro-cid-x3pjskd3></line> <line x1="20" y1="12" x2="23" y2="12" data-astro-cid-x3pjskd3></line> <line x1="4.22" y1="4.22" x2="6.34" y2="6.34" data-astro-cid-x3pjskd3></line> <line x1="17.66" y1="17.66" x2="19.78" y2="19.78" data-astro-cid-x3pjskd3></line> <line x1="4.22" y1="19.78" x2="6.34" y2="17.66" data-astro-cid-x3pjskd3></line> <line x1="17.66" y1="6.34" x2="19.78" y2="4.22" data-astro-cid-x3pjskd3></line> </svg> <svg class="icon dark" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-astro-cid-x3pjskd3> <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" data-astro-cid-x3pjskd3></path> </svg>  </button>  <section class="hero" data-astro-cid-bbe6dxrz> <h1 class="hero-title" data-astro-cid-bbe6dxrz>Maintain the unmaintainable:<br/>1M python loc, 400+ models</h1> <div class="hero-banner" data-astro-cid-bbe6dxrz> <figure class="html-embed"><div class="html-embed__card is-frameless"><div id="frag-su0f3gugr3"><style>
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600&display=swap');
 .banner-container {
 <p>It works as follows. In order to contribute a model, say for instance  define a <code>modular_</code> file that can inherit from <em>any function across all other modeling, configuration and processor files</em>.
 This modular file can use inheritance across models: and then, it will be unravelled into a fully functional modeling file.</p>
 <summary id="generated-modeling">Auto-generated modeling code</summary>
+<figure class="html-embed"><div class="html-embed__card"><div id="frag-fs7nee511q"><div class="code-compare" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0;">
     <div class="code-column" style="border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden;">
         <div class="code-header" style="background: #f8f9fa; padding: 0.75rem 1rem; font-weight: 600; color: #495057; border-bottom: 1px solid #e2e8f0;">
             modular_glm.py
 <p>That gives an “effective LOC” curve: the 𝗺𝗮𝗶𝗻𝘁𝗲𝗻𝗮𝗻𝗰𝗲 𝘀𝘂𝗿𝗳𝗮𝗰𝗲.</p>
 <p>Measured on git history, raw <code>modeling_*.py</code> grew at ~362 LOC/day before modular; counting only modular shards yields ~25 LOC/day after — about <strong>15× lower</strong>. The curve represents the <strong>maintenance surface</strong> today: what maintainers actually read and review.</p>
 <p>Less code to hand-maintain means fewer places to break. LOC is not complexity, but they correlate in review effort and change risk.</p>
+<figure class="html-embed"><div class="html-embed__card"><div id="frag-09l75wbrf8o5"><iframe
 src="https://molbap-loc-1.hf.space"
 style="width:100%; height:900px; border:0"
 allow="clipboard-read; clipboard-write; fullscreen"
 <p>Hence, we want to touch <a href="#minimal-user-api">minimally</a> to the modeling code, and only modify it when <em>architectural changes</em> are involved. For instance, for tensor parallelism, we instead now specify a simple <code>tp_plan</code>.</p>
 <p>The alternative would be to modify parent classes specific to their</p>
 <p>It is written once in the config and passed to <code>.from_pretrained()</code>. The plan maps module name patterns to partitioning strategies. Strategies are resolved by the internal <code>ParallelInterface</code>, which wires to sharding implementations <code>ColwiseParallel</code>, <code>RowwiseParallel</code>, packed variants, and so on.</p>
+<figure class="html-embed"><div class="html-embed__card"><div id="frag-lywjo7xifz"><pre><code class="language-python"># In the model's config (example: ERNIE 4.5-style decoder blocks)
 base_model_tp_plan = {
     "layers.*.self_attn.q_proj": "colwise",
     "layers.*.self_attn.k_proj": "colwise",
 </ol>
 <p>So what do we see? Llama is a basis for many models, and it shows.
 Radically different architectures such as mamba have spawned their own dependency subgraph.</p>
+<figure class="html-embed"><div class="html-embed__card"><div id="frag-ja1w4rtppo9"><iframe
 src="https://molbap-dependencies-1.hf.space"
 style="width:100%; height:680px; border:0"
 allow="clipboard-read; clipboard-write; fullscreen"
 <p>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. We also tried code-embedding models that ranked candidates better in practice, but for this post we stick to the deterministic Jaccard index.</p>
 <p>It is interesting, for that, to look at <em>when</em> we deployed this modular logic and what was its rippling effect on the library. You can check the <a href="https://huggingface.co/spaces/Molbap/transformers-modular-refactor">larger space</a> 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.</p>
 <p>Zoom out below - it’s full of models. You can click on a node to see its connections better, or use the text box to search for a model.</p>
+<figure class="html-embed"><div class="html-embed__card"><div id="frag-897vw2ctxj">    <iframe
   src="https://molbap-timeline-1.hf.space"
   style="width:100%; height:680px; border:0"
   allow="clipboard-read; clipboard-write; fullscreen"
 <p>What is the current state of these “abstractions” across the codebase?
 You will see all the imports around a modeling file, here <a href="https://huggingface.co/google/gemma-3n-E4B-it">Gemma3n</a>.</p>
 <p>Zoom and drag to explore.</p>
+<figure class="html-embed"><div class="html-embed__card"><div id="frag-zkoqofuoqk"><html>
     <head>
         <meta charset="utf-8">
 <div class="crumbs"><p>The shape of a contribution: add a model (or variant) with a small modular shard; the community and serving stacks pick it up immediately. Popularity trends (encoders/embeddings) guide where we invest. <strong>Next:</strong> power tools enabled by a consistent API.</p></div>
 <h3 id="-models-popularity"><a href="#-models-popularity"><a id="encoders-ftw"></a> Models popularity</a></h3>
 <p>Talking about dependencies, we can take a look at the number of downloads for transformer models popularity. One thing we see is the prominence of encoders: This is because the usage of encoders lies in embeddings, just check out <a href="https://huggingface.co/blog/embeddinggemma">EmbeddingGemma</a> for a modern recap. Hence, it is vital to keep the encoders part viable, usable, fine-tune-able.</p>
+<div><figure class="html-embed"><div class="html-embed__card"><div id="frag-in3xmqq4je"><html>
 <head><meta charset="utf-8" /></head>
 <body>
     <div>                        <script type="text/javascript">window.PlotlyConfig = {MathJaxConfig: 'local'};</script>
 <h3 id="attention-visualisation"><a href="#attention-visualisation">Attention visualisation</a></h3>
 <p>All models have the same API internally for attention computation, thanks to <a href="#external-attention-classes">the externalisation of attention classes</a>. it allows us to build cool tools to visualize the inner workings of the attention mechanism.</p>
 <p>One particular piece of machinery is the <code>attention mask</code>. 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.</p>
+<figure class="html-embed"><div class="html-embed__card"><div id="frag-yso5z65rmt"><!-- 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>
 <div class="crumbs"><p>Forward interception and nested JSON logging align ports to reference implementations, reinforcing “Source of Truth.” <strong>Next:</strong> CUDA warmup reduces load-time stalls without touching modeling semantics.</p></div>
 <h3 id="cooking-faster-cuda-warmups"><a href="#cooking-faster-cuda-warmups">Cooking faster CUDA warmups</a></h3>
 <p>Having a clean <em>external</em> API allows us to work on the <a href="#code-is-product">true inner workings of transformers</a>. One of the few recent additions was the <em>CUDA warmup</em> via <code>caching_allocator_warmup</code> which improved massively the loading footprint by pre-allocating GPU memory to avoid malloc bottlenecks during model loading, achieving a 7x factor for an 8B model, 6x for a 32B, you can check out <a href="https://github.com/huggingface/transformers/pull/36380">the source</a>!</p>
+<figure class="html-embed"><div class="html-embed__card"><div id="frag-vko4f1u5op"><style>
 /* 1) Scope tokens to the widget */
 .warmup-demo{
   --page-bg:#ffffff;

app/dist/index.html.gz CHANGED Viewed

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0607da7008565a4fa9721bb30f2e8d303d1070284a7779972d67f73714d5c8ac
-size 1654680

 version https://git-lfs.github.com/spec/v1
+oid sha256:af7c7f5f1e9896dde3c7f76843a8691cacca9699dcf0a856abcee7505744e43f
+size 1654674

app/src/content/embeds/old_banner.html ADDED Viewed

	@@ -0,0 +1,143 @@

+<div class="transformers-banner" style="width:100%;margin:10px 0;aspect-ratio:3/1;min-height:260px;"></div>
+<script>
+    (() => {
+        const ensureD3 = (cb) => {
+            if (window.d3 && typeof window.d3.select === 'function') return cb();
+            let s = document.getElementById('d3-cdn-script');
+            if (!s) {
+                s = document.createElement('script');
+                s.id = 'd3-cdn-script';
+                s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
+                document.head.appendChild(s);
+            }
+            const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
+            s.addEventListener('load', onReady, { once: true });
+            if (window.d3) onReady();
+        };
+        const bootstrap = () => {
+            const mount = document.currentScript ? document.currentScript.previousElementSibling : null;
+            const container = (mount && mount.querySelector && mount.querySelector('.transformers-banner')) || document.querySelector('.transformers-banner');
+            if (!container) return;
+            if (container.dataset) {
+                if (container.dataset.mounted === 'true') return;
+                container.dataset.mounted = 'true';
+            }
+            // Simplified transformers network - showing key models
+            const nodes = [
+                { id: "llama", is_base: true, size: 3.0, x: 0.5, y: 0.5 },
+                { id: "mistral", is_base: false, size: 1.3, x: 0.3, y: 0.4 },
+                { id: "gemma", is_base: false, size: 1.3, x: 0.7, y: 0.4 },
+                { id: "qwen2", is_base: false, size: 1.2, x: 0.4, y: 0.6 },
+                { id: "phi3", is_base: false, size: 1.2, x: 0.6, y: 0.6 },
+                { id: "deepseek_v3", is_base: false, size: 1.15, x: 0.35, y: 0.3 },
+                { id: "cohere", is_base: false, size: 1.2, x: 0.65, y: 0.3 },
+                { id: "mixtral", is_base: false, size: 1.2, x: 0.25, y: 0.5 },
+                { id: "glm4", is_base: false, size: 1.15, x: 0.75, y: 0.5 },
+                { id: "llava", is_base: true, size: 1.3, x: 0.5, y: 0.7 }
+            ];
+            const links = [
+                { source: "llama", target: "mistral" },
+                { source: "llama", target: "gemma" },
+                { source: "llama", target: "qwen2" },
+                { source: "llama", target: "phi3" },
+                { source: "llama", target: "deepseek_v3" },
+                { source: "llama", target: "cohere" },
+                { source: "mistral", target: "mixtral" },
+                { source: "llama", target: "llava" }
+            ];
+            const svg = d3.select(container).append('svg')
+                .attr('width', '100%')
+                .attr('height', '100%')
+                .style('display', 'block');
+            const width = container.clientWidth;
+            const height = container.clientHeight;
+            const g = svg.append('g');
+            // Links
+            const link = g.append('g')
+                .selectAll('line')
+                .data(links)
+                .join('line')
+                .attr('stroke', '#999')
+                .attr('stroke-opacity', 0.4)
+                .attr('stroke-width', 1.5);
+            // Nodes
+            const node = g.append('g')
+                .selectAll('g')
+                .data(nodes)
+                .join('g')
+                .attr('class', d => d.is_base ? 'node base' : 'node derived');
+            // Base models: styled circles with emoji
+            node.filter(d => d.is_base)
+                .append('circle')
+                .attr('r', d => 30 * d.size)
+                .attr('fill', '#FFD21E')
+                .attr('stroke', '#FF9D00')
+                .attr('stroke-width', 2);
+            node.filter(d => d.is_base)
+                .append('text')
+                .attr('text-anchor', 'middle')
+                .attr('dy', '0.35em')
+                .style('font-size', '20px')
+                .text('🤗');
+            // Derived models: simple circles
+            node.filter(d => !d.is_base)
+                .append('circle')
+                .attr('r', d => 15 * d.size)
+                .attr('fill', '#667eea');
+            // Labels
+            node.append('text')
+                .attr('text-anchor', 'middle')
+                .attr('dy', d => d.is_base ? 45 : 25)
+                .style('font-size', '11px')
+                .style('font-weight', '600')
+                .style('fill', 'var(--text-color, #333)')
+                .text(d => d.id);
+            // Position nodes and links
+            const updatePositions = () => {
+                link
+                    .attr('x1', d => {
+                        const source = nodes.find(n => n.id === d.source);
+                        return source ? source.x * width : 0;
+                    })
+                    .attr('y1', d => {
+                        const source = nodes.find(n => n.id === d.source);
+                        return source ? source.y * height : 0;
+                    })
+                    .attr('x2', d => {
+                        const target = nodes.find(n => n.id === d.target);
+                        return target ? target.x * width : 0;
+                    })
+                    .attr('y2', d => {
+                        const target = nodes.find(n => n.id === d.target);
+                        return target ? target.y * height : 0;
+                    });
+                node.attr('transform', d => `translate(${d.x * width}, ${d.y * height})`);
+            };
+            updatePositions();
+            // Responsive resize
+            let resizeTimer;
+            window.addEventListener('resize', () => {
+                clearTimeout(resizeTimer);
+                resizeTimer = setTimeout(updatePositions, 100);
+            });
+        };
+        ensureD3(bootstrap);
+    })();
+</script>

app/src/content/embeds/transformers/better-bloat.html ADDED Viewed

The diff for this file is too large to render. See raw diff

app/src/styles/_reset.css CHANGED Viewed

@@ -1,6 +1,6 @@
-html { box-sizing: border-box; }
 *, *::before, *::after { box-sizing: inherit; }
-body { margin: 0; font-family: var(--default-font-family); color: var(--text-color); }
 audio { display: block; width: 100%; }
 img,

+html { box-sizing: border-box; background: var(--page-bg); color: var(--text-color); }
 *, *::before, *::after { box-sizing: inherit; }
+body { margin: 0; font-family: var(--default-font-family); background: var(--page-bg); color: var(--text-color); }
 audio { display: block; width: 100%; }
 img,

app/src/styles/_variables.css CHANGED Viewed

@@ -114,5 +114,4 @@
   --on-primary: #0f1115;
   color-scheme: dark;
-  background: var(--page-bg);
 }

   --on-primary: #0f1115;
   color-scheme: dark;
 }