improve banner perfs and responsiveness | lazyload iframes | cleanup files

app/src/components/Hero.astro

@@ -208,6 +208,15 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
     padding: 48px 16px 16px;
     text-align: center;
   }
+  .hero :global(.html-embed) {
+    margin-bottom: 0;
+  }
+  @media (max-width: 768px) {
+    .hero :global(.html-embed) {
+      padding: 0 16px;
+    }
+  }
+
   .hero-title {
     font-size: clamp(28px, 4vw, 48px);
     font-weight: 800;

app/src/content/embeds/banner.html

@@ -3,7 +3,7 @@
 
 .banner-container {
   width: 100%;
-  height: 400px;
+  min-height: 200px;
   position: relative;
   overflow: visible;
   margin: 0 auto;
@@ -153,19 +153,34 @@ const sim = d3.forceSimulation(graph.nodes)
   .force('y', d3.forceY((_,i) => (Math.floor(i/12)%3) * (H/3) + H/6).strength(0.25))
   .force('collide', d => d3.forceCollide(d.id === 'llama' ? rBase(d) + 100 : rBase(d) + 20));
 
-sim.on('tick', () => {
+// Tick handler that updates node/link positions
+function tickHandler() {
   link
     .attr('x1', d=>d.source.x).attr('y1', d=>d.source.y)
     .attr('x2', d=>d.target.x).attr('y2', d=>d.target.y);
   node.attr('transform', d=>`translate(${d.x},${d.y})`);
-});
+  
+  // Stop ticking when simulation stabilizes (performance optimization)
+  if (sim.alpha() < 0.01) {
+    sim.on('tick', null); // Remove tick listener to save CPU
+  }
+}
 
-// Ajouter une turbulence constante
-sim.alphaTarget(0.04);
+sim.on('tick', tickHandler);
 
-function dragStart(e,d){ if(!e.active) sim.alphaTarget(.3).restart(); d.fx=d.x; d.fy=d.y; }
+function dragStart(e,d){ 
+  if(!e.active) {
+    sim.alphaTarget(.3).restart();
+    // Re-attach tick handler when dragging starts
+    sim.on('tick', tickHandler);
+  }
+  d.fx=d.x; d.fy=d.y; 
+}
 function dragged(e,d){ d.fx=e.x; d.fy=e.y; }
-function dragEnd(e,d){ if(!e.active) sim.alphaTarget(0.02); d.fx=d.fy=null; }
+function dragEnd(e,d){ 
+  if(!e.active) sim.alphaTarget(0); 
+  d.fx=d.fy=null; 
+}
 
 // Initialize color palettes
 function initializeColorPalettes() {

app/src/content/embeds/transformers/dependency-graph.html

@@ -3,4 +3,5 @@ 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"
+loading="lazy"
 ></iframe>

app/src/content/embeds/transformers/loc-growth.html

@@ -3,4 +3,5 @@ src="https://molbap-loc-1.hf.space"
 style="width:100%; height:900px; border:0"
 allow="clipboard-read; clipboard-write; fullscreen"
 referrerpolicy="no-referrer-when-downgrade"
+loading="lazy"
 ></iframe>

app/src/content/embeds/transformers/model-timeline.html

@@ -3,4 +3,5 @@
   style="width:100%; height:680px; border:0"
   allow="clipboard-read; clipboard-write; fullscreen"
   referrerpolicy="no-referrer-when-downgrade"
+  loading="lazy"
 ></iframe>

package.json

@@ -1,42 +0,0 @@
-{
-  "dependencies": {
-    "d3": "^7.9.0",
-    "katex": "^0.16.11",
-    "lodash": "^4.17.21",
-    "papaparse": "^5.4.1",
-    "plotly.js-basic-dist-min": "^2.33.0",
-    "markdown-it": "^13.0.1"
-  },
-  "name": "scaling-insanity",
-  "version": "1.0.0",
-  "description": "A peek into software engineering for the transformers library",
-  "main": "index.js",
-  "scripts": {
-    "dev": "webpack serve --open --hot",
-    "build": "NODE_ENV=production webpack"
-  },
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "@babel/preset-env": "^7.24.6",
-    "@swc/html": "^1.10.17",
-    "babel-loader": "^9.1.3",
-    "clean-webpack-plugin": "^4.0.0",
-    "compression-webpack-plugin": "^11.1.0",
-    "copy-webpack-plugin": "^12.0.2",
-    "css-loader": "^7.1.2",
-    "fs": "^0.0.1-security",
-    "handlebars": "^4.7.8",
-    "html-minimizer-webpack-plugin": "^5.0.0",
-    "html-webpack-change-assets-extension-plugin": "^1.3.1",
-    "html-webpack-plugin": "^5.6.0",
-    "image-minimizer-webpack-plugin": "^4.1.3",
-    "sharp": "^0.33.5",
-    "style-loader": "^4.0.0",
-    "svgo": "^3.3.2",
-    "webpack": "^5.91.0",
-    "webpack-bundle-analyzer": "^4.10.2",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.4"
-  }
-}

webpack.config.js

@@ -1,354 +0,0 @@
-const path = require("path");
-const { CleanWebpackPlugin } = require("clean-webpack-plugin");
-const CopyPlugin = require("copy-webpack-plugin");
-const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
-const Handlebars = require("handlebars");
-const fs = require("fs");
-
-// Load app configuration
-const appConfig = JSON.parse(fs.readFileSync(path.resolve(__dirname, "config/app.json"), "utf8"));
-const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
-const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
-
-const FRAGMENTS_PATH = "src/fragments";
-
-// Load the fragments from the fragments directory and caches it
-const loadFragmentsMap = (() => {
-    let cachedFragments = null;
-    return async () => {
-        if (cachedFragments === null) {
-            cachedFragments = {};
-            const walkDir = async (dir, basePath = '') => {
-                const files = fs.readdirSync(dir);
-                await Promise.all(files.map(async file => {
-                    const filePath = path.join(dir, file);
-                    const relativePath = path.join(basePath, file);
-                    if (fs.statSync(filePath).isDirectory()) {
-                        await walkDir(filePath, relativePath);
-                    } else {
-                        const nameWithoutExt = relativePath.replace(/\.html$/, '');
-                        const dottedPath = 'fragment-' + nameWithoutExt.replace(/\\/g, '-').replace(/\//g, '-').replace(/\./g, '-');
-                        const content = fs.readFileSync(filePath, "utf8");
-                        let minifiedContent;
-
-                        if (content.trim().startsWith('<!DOCTYPE') || content.trim().startsWith('<html')) {
-                            minifiedContent = content;
-                        } else {
-                            try {
-                                const minifiedRes = await HtmlMinimizerPlugin.swcMinifyFragment({"tmp.html": content})
-                                if (minifiedRes.errors) {
-                                    minifiedContent = content;
-                                } else {
-                                    minifiedContent = minifiedRes.code;
-                                }
-                            } catch (error) {
-                                minifiedContent = content;
-                            }
-                        }
-                        cachedFragments[dottedPath] = minifiedContent;
-                    }
-                }));
-            };
-            await walkDir(FRAGMENTS_PATH);
-        }
-        return cachedFragments;
-    };
-})();
-
-const transformMarkdownWithFragments = async (data, filepath) => {
-    const fragments = await loadFragmentsMap();
-    console.log(`Available fragments: ${Object.keys(fragments).join(', ')}`);
-    
-    // Read the markdown file
-    const markdown = require('markdown-it')({
-        html: true,
-        linkify: true,
-        typographer: true
-    });
-    
-    const markdownContent = data.toString('utf8');
-    const htmlContent = markdown.render(markdownContent);
-    
-    // Process with Handlebars for fragment insertion
-    const template = Handlebars.compile(htmlContent);
-    return template(fragments);
-};
-
-module.exports = {
-    entry: {
-        distill: "./src/distill.js",
-        main: "./src/index.js",
-    },
-    output: {
-        filename: "[name].bundle.js",
-        path: path.resolve(__dirname, "dist"),
-    },
-    module: {
-        rules: [
-            { test: /\.css$/, use: ["style-loader", "css-loader"] },
-            {
-                test: /\.(js|mjs)$/,
-                exclude: /node_modules/,
-                use: {
-                    loader: "babel-loader",
-                    options: {
-                        presets: ["@babel/preset-env"],
-                    },
-                },
-            }
-        ],
-    },
-    plugins: [
-        new CleanWebpackPlugin(),
-        new CopyPlugin({
-            patterns: [
-                { from: "src/fragments/*", to: "fragments/[name].html" },
-                { from: "src/style.css", to: "style.css" },
-                { from: "src/transformers-custom.css", to: "transformers-custom.css" },
-                { from: "content/*.png", to: "static/[name][ext]" },
-                { from: "content/*.svg", to: "static/[name][ext]" },
-                { from: "content/*.html", to: "static/[name][ext]" },
-                { from: "content/hf-logo.svg", to: "hf-logo.svg" },
-                { 
-                    from: "content/article.md", 
-                    to: "index.html",
-                    transform: async (content, path) => {
-                        const fragments = await loadFragmentsMap();
-                        
-                        // Convert markdown to HTML
-                        const markdown = require('markdown-it')({
-                            html: true,
-                            linkify: true,
-                            typographer: true
-                        });
-                        
-                        const markdownContent = content.toString('utf8');
-                        const htmlContent = markdown.render(markdownContent);
-                        
-                        // Extract headings for TOC generation
-                        const tocScript = `
-                        <script>
-                        function initializeTOC() {
-                            const article = document.querySelector('d-article');
-                            const toc = document.querySelector('d-contents');
-                            if (toc) {
-                                const headings = [...article.querySelectorAll('h1, h2, h3, h4')].filter(h => !h.hasAttribute('data-no-toc'));
-                                let ToC = '<nav role="navigation" class="l-text figcaption">';
-                                ToC += '<div class="toc-header"><span class="toc-title">Table of Contents</span></div>';
-                                ToC += '<div class="toc-content">';
-                                
-                                headings.forEach((heading, index) => {
-                                    const id = heading.id || 'heading-' + index;
-                                    if (!heading.id) heading.id = id;
-                                    const level = parseInt(heading.tagName.charAt(1));
-                                    const indent = level === 1 ? '' : 'style="margin-left: ' + ((level - 1) * 1.2) + 'em;"';
-                                    ToC += '<div ' + indent + '><a href="#' + id + '">' + heading.textContent + '</a></div>';
-                                });
-                                
-                                ToC += '</div></nav>';
-                                toc.innerHTML = ToC;
-                                toc.setAttribute('prerendered', 'true');
-                                
-                                // Extract tenet text for tooltips
-                                const tenetTooltips = {
-                                    'source-of-truth': 'We aim be a source of truth for all model definitions. Model implementations should be reliable, reproducible, and faithful to the original performances.',
-                                    'one-model-one-file': 'All inference and training core logic has to be visible, top‑to‑bottom, to maximize each model\\'s hackability.',
-                                    'code-is-product': 'Optimize for reading, diffing, and tweaking, our users are power users. Variables can be explicit, full words, even several words, readability is primordial.',
-                                    'standardize-dont-abstract': 'If it\\'s model behavior, keep it in the file; abstractions only for generic infra.',
-                                    'do-repeat-yourself': 'Copy when it helps users; keep successors in sync without centralizing behavior.',
-                                    'minimal-user-api': 'Config, model, preprocessing; from_pretrained, save_pretrained, push_to_hub. We want the least amount of codepaths.',
-                                    'backwards-compatibility': 'Evolve by additive standardization, never break public APIs.',
-                                    'consistent-public-surface': 'Same argument names, same outputs, hidden states and attentions exposed, enforced by tests.',
-                                };
-
-                                // Add smooth scrolling and custom tooltips to all tenet links (TOC and article)
-                                const tocLinks = document.querySelectorAll('d-contents a');
-                                tocLinks.forEach(link => {
-                                    const href = link.getAttribute('href');
-                                    const anchor = href ? href.substring(1) : '';
-
-                                    if (tenetTooltips[anchor]) {
-                                        link.setAttribute('data-tooltip', tenetTooltips[anchor]);
-                                        link.style.position = 'relative';
-                                    }
-
-                                    link.addEventListener('click', function(e) {
-                                        e.preventDefault();
-                                        const target = document.querySelector(this.getAttribute('href'));
-                                        if (target) {
-                                            target.scrollIntoView({ behavior: 'smooth' });
-                                        }
-                                    });
-                                });
-
-                                // Add custom tooltips to tenet links in article content
-                                const articleLinks = document.querySelectorAll('d-article a[href^="#"]');
-                                articleLinks.forEach(link => {
-                                    const href = link.getAttribute('href');
-                                    const anchor = href ? href.substring(1) : '';
-                                    if (tenetTooltips[anchor]) {
-                                        link.setAttribute('data-tooltip', tenetTooltips[anchor]);
-                                    }
-                                });
-                                
-                                // Update active state on scroll
-                                window.addEventListener('scroll', function() {
-                                    const scrollPos = window.scrollY + 100;
-                                    headings.forEach((heading) => {
-                                        const link = document.querySelector('d-contents a[href="#' + heading.id + '"]');
-                                        if (link) {
-                                            if (heading.offsetTop <= scrollPos && 
-                                                heading.offsetTop + heading.offsetHeight > scrollPos) {
-                                                link.classList.add('active');
-                                            } else {
-                                                link.classList.remove('active');
-                                            }
-                                        }
-                                    });
-                                });
-                            }
-                        }
-                        
-                        // Initialize Prism syntax highlighting
-                        function initializeSyntaxHighlighting() {
-                            if (typeof Prism !== 'undefined') {
-                                Prism.highlightAll();
-                            }
-                        }
-                        
-                        // Try multiple times to ensure it runs after distill.js
-                        document.addEventListener('DOMContentLoaded', function() {
-                            initializeTOC();
-                            initializeSyntaxHighlighting();
-                        });
-                        setTimeout(function() {
-                            initializeTOC();
-                            initializeSyntaxHighlighting();
-                        }, 100);
-                        setTimeout(function() {
-                            initializeTOC();
-                            initializeSyntaxHighlighting();
-                        }, 500);
-                        setTimeout(function() {
-                            initializeTOC();
-                            initializeSyntaxHighlighting();
-                        }, 1000);
-                        </script>`;
-
-                        // Create full HTML document with distill template
-                        const template = `<!DOCTYPE html>
-<html>
-<head>
-    <script src="distill.bundle.js" type="module" fetchpriority="high" blocking></script>
-    <script src="main.bundle.js" type="module" fetchpriority="low" defer></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
-    <script src="https://d3js.org/d3.v7.min.js"></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta charset="utf8">
-    <title>${appConfig.fullTitle}</title>
-    <link rel="stylesheet" href="style.css">
-    <link rel="stylesheet" href="transformers-custom.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
-</head>
-<body>
-    <d-front-matter>
-        <script id='distill-front-matter' type="text/json">{
-    "title": "${appConfig.fullTitle}",
-    "description": "${appConfig.description}",
-    "published": "Aug 21, 2025",
-    "authors": [{"author": "Pablo Montalvo", "authorURL": "https://huggingface.co/Molbap"},
-    {"author": "Lysandre Debut", "authorURL": "https://huggingface.co/lysandre"},
-    {"author": "Pedro Cuenca", "authorURL": "https://huggingface.co/pcuenq"}
-    {"author": "Yoni Gozlan", "authorURL": "https://huggingface.co/yonigozlan"}]
-  }</script>
-    </d-front-matter>
-    <d-title>
-        <h1>${appConfig.fullTitle}</h1>
-        <p>${appConfig.description}</p>
-    </d-title>
-    <d-byline></d-byline>
-    <d-article>
-        <d-contents>
-            <nav role="navigation" class="l-text figcaption">
-                <div class="toc-header"><span class="toc-title">Table of Contents</span></div>
-                <div class="toc-content">
-                    <div><a href="#introduction">Introduction</a></div>
-                    <div style="margin-left: 1.2em;"><a href="#what-you-will-learn">What you will learn</a></div>
-                    <div><a href="#source-of-truth">0. Source of truth</a></div>
-                    <div><a href="#one-model-one-file">1. One model, one file</a></div>
-                    <div><a href="#code-is-product">2. Code is product</a></div>
-                    <div><a href="#standardize-dont-abstract">3. Standardize, don't abstract</a></div>
-                    <div><a href="#do-repeat-yourself">4. DRY* (DO Repeat Yourself)</a></div>
-                    <div><a href="#minimal-user-api">5. Minimal user API</a></div>
-                    <div><a href="#backwards-compatibility">6. Backwards compatibility</a></div>
-                    <div><a href="#consistent-public-surface">7. Consistent public surface</a></div>
-                    <div><a href="#modular">Going modular</a></div>
-                    <div><a href="#attention-classes">External Attention classes</a></div>
-                    <div><a href="#encoders-ftw">Encoders win!</a></div>
-                </div>
-            </nav>
-        </d-contents>
-        ${htmlContent}
-    </d-article>
-    ${tocScript}
-</body>
-</html>`;
-                        
-                        // Process with Handlebars for fragment insertion
-                        const handlebars = Handlebars.compile(template);
-                        return handlebars(fragments);
-                    }
-                },
-            ],
-        }),
-    ],
-    devtool: process.env.NODE_ENV === 'production' ? 'source-map' : 'eval-source-map',
-    devServer: {
-        static: {
-            directory: path.join(__dirname, 'dist'),
-        },
-        hot: true,
-        watchFiles: ['src/**/*'],
-        client: {
-            overlay: true,
-        },
-    },
-    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
-    optimization: {
-        minimizer: [
-            new ImageMinimizerPlugin({
-                minimizer: [{
-                    implementation: ImageMinimizerPlugin.sharpMinify,
-                    options: {
-                        encodeOptions: {
-                            jpeg: {
-                                quality: 80
-                            },
-                            png: {
-                                quality: 80
-                            },
-                            webp: {
-                                quality: 80
-                            }
-                        }
-                    }
-                },
-                {
-                    implementation: ImageMinimizerPlugin.svgoMinify,
-                    options: {
-                        encodeOptions: {
-                            multipass: true,
-                            plugins: [
-                                'preset-default',
-                            ]
-                        }
-                    }
-                }
-            ]
-            }),
-        ]
-    },
-};
-
-console.log(process.env.NODE_ENV)