Fix: Link Error on Page 17

README.md

@@ -18,9 +18,6 @@ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-
 Instruction to install and run locally
 
 ```bash
-# fetch LFS-tracked files (large assets)
-git lfs pull
-
 npm install
 npm run build
 npm run dev

convert_to_md.py

@@ -1,110 +0,0 @@
-#!/usr/bin/env python3
-"""
-HTML to Markdown Converter
-
-This script converts HTML files to Markdown format.
-Usage: python html_to_md.py input.html [output.md]
-If no output file is specified, it will use the input filename with .md extension.
-"""
-
-import sys
-import os
-import argparse
-import html2text
-import requests
-from urllib.parse import urlparse
-
-def is_url(path):
-    """Check if the given path is a URL."""
-    parsed = urlparse(path)
-    return parsed.scheme != '' and parsed.netloc != ''
-
-def convert_html_to_markdown(html_content, **options):
-    """Convert HTML content to Markdown."""
-    converter = html2text.HTML2Text()
-    
-    # Configure converter options
-    converter.ignore_links = options.get('ignore_links', False)
-    converter.ignore_images = options.get('ignore_images', False)
-    converter.ignore_tables = options.get('ignore_tables', False)
-    converter.body_width = options.get('body_width', 0)  # 0 means no wrapping
-    converter.unicode_snob = options.get('unicode_snob', True)  # Use Unicode instead of ASCII
-    converter.wrap_links = options.get('wrap_links', False)
-    converter.inline_links = options.get('inline_links', True)
-    
-    # Convert HTML to Markdown
-    return converter.handle(html_content)
-
-def main():
-    parser = argparse.ArgumentParser(description='Convert HTML to Markdown')
-    parser.add_argument('input', help='Input HTML file or URL')
-    parser.add_argument('output', nargs='?', help='Output Markdown file (optional)')
-    parser.add_argument('--ignore-links', action='store_true', help='Ignore links in the HTML')
-    parser.add_argument('--ignore-images', action='store_true', help='Ignore images in the HTML')
-    parser.add_argument('--ignore-tables', action='store_true', help='Ignore tables in the HTML')
-    parser.add_argument('--body-width', type=int, default=0, help='Wrap text at this width (0 for no wrapping)')
-    parser.add_argument('--unicode', action='store_true', help='Use Unicode characters instead of ASCII approximations')
-    parser.add_argument('--wrap-links', action='store_true', help='Wrap links in angle brackets')
-    parser.add_argument('--reference-links', action='store_true', help='Use reference style links instead of inline links')
-    
-    args = parser.parse_args()
-    
-    # Determine input
-    if is_url(args.input):
-        try:
-            response = requests.get(args.input)
-            response.raise_for_status()
-            html_content = response.text
-        except requests.exceptions.RequestException as e:
-            print(f"Error fetching URL: {e}", file=sys.stderr)
-            return 1
-    else:
-        try:
-            with open(args.input, 'r', encoding='utf-8') as f:
-                html_content = f.read()
-        except IOError as e:
-            print(f"Error reading file: {e}", file=sys.stderr)
-            return 1
-    
-    # Configure conversion options
-    options = {
-        'ignore_links': args.ignore_links,
-        'ignore_images': args.ignore_images,
-        'ignore_tables': args.ignore_tables,
-        'body_width': args.body_width,
-        'unicode_snob': args.unicode,
-        'wrap_links': args.wrap_links,
-        'inline_links': not args.reference_links,
-    }
-    
-    # Convert HTML to Markdown
-    markdown_content = convert_html_to_markdown(html_content, **options)
-    
-    # Determine output
-    if args.output:
-        output_file = args.output
-    else:
-        if is_url(args.input):
-            # Generate a filename from the URL
-            url_parts = urlparse(args.input)
-            base_name = os.path.basename(url_parts.path) or 'index'
-            if not base_name.endswith('.html'):
-                base_name += '.html'
-            output_file = os.path.splitext(base_name)[0] + '.md'
-        else:
-            # Generate a filename from the input file
-            output_file = os.path.splitext(args.input)[0] + '.md'
-    
-    # Write output
-    try:
-        with open(output_file, 'w', encoding='utf-8') as f:
-            f.write(markdown_content)
-        print(f"Conversion successful! Output saved to: {output_file}")
-    except IOError as e:
-        print(f"Error writing file: {e}", file=sys.stderr)
-        return 1
-    
-    return 0
-
-if __name__ == "__main__":
-    sys.exit(main())

dist/distill.bundle.js

@@ -2146,7 +2146,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
   function bylineTemplate(frontMatter) {
     return "\n    <div class=\"byline grid\">\n      <div>\n          <h3>Authors</h3>\n          <div>\n              ".concat(frontMatter.authors.map(function (author, i) {
       return "\n              <span class=\"author\">\n        ".concat(author.personalURL ? "\n          <a class=\"name\" href=\"".concat(author.personalURL, "\">").concat(author.name) + (i + 1 < frontMatter.authors.length ? "," : "") + "</a>" : "\n          <span class=\"name\">".concat(author.name) + (i + 1 < frontMatter.authors.length ? "," : "") + "</span>", "\n      </span>\n              ");
-    }).join(''), "\n          </div>\n      </div>\n      <div >\n          <h3>Affiliation</h3>\n          <div><a href=\"https://huggingface.co/\">Hugging Face</a>\n          </div>\n      </div>\n      <div >\n          <h3>Published</h3>\n          <div>Feb 19, 2025</div>\n      </div>\n    </div>\n\n");
+    }).join(''), "\n          </div>\n      </div>\n      <div >\n          <h3>Affiliation</h3>\n          <div><a href=\"https://huggingface.co/\">Hugging Face</a>\n          </div>\n      </div>\n      <div >\n          <h3>Published</h3>\n          <div>Feb 19, 2025</div>\n      </div>\n    </div>\n    <div class=\"side pdf-download\">\n      <a href=\"https://huggingface.co/spaces/nanotron/ultrascale-playbook/resolve/main/The_Ultra-Scale_Playbook_Training_LLMs_on_GPU_Clusters.pdf\">Download PDF\n      <br>\n      <img style=\"width: 32px;\" src=\"../assets/images/256px-PDF.png\" alt=\"PDF\"></a>\n      \n    </div>\n");
   }
   var Byline = /*#__PURE__*/function (_HTMLElement4) {
     function Byline() {

dist/main.bundle.js

@@ -5662,199 +5662,12 @@ function postMessageToHFSpaces(elementId) {
 }
 
 ;// ./src/index.js
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = src_unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
-function src_unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return src_arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? src_arrayLikeToArray(r, a) : void 0; } }
-function src_arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 // import { plotClusters } from './clusters'
 
 
 
-// Dark mode is now handled manually via a CSS class on <html> and injected styles
-
 document.addEventListener("DOMContentLoaded", function () {
   console.log("DOMContentLoaded");
-
-  // Inject minimal styles for the theme toggle button
-  var styleEl = document.createElement('style');
-  styleEl.textContent = "\n    .theme-toggle-btn{position:absolute;top:16px;left:16px;z-index:10000;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:rgba(255,255,255,0.9);backdrop-filter:saturate(150%) blur(6px);cursor:pointer;border:1px solid transparent;outline:none;box-shadow:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}\n    .theme-toggle-btn:hover{border-color:transparent;box-shadow:none}\n    .theme-toggle-btn:focus,.theme-toggle-btn:focus-visible{outline:none;border-color:transparent;box-shadow:none}\n    .theme-toggle-btn img{width:22px;height:22px;transition:filter .15s ease}\n    .theme-toggle-btn.dark img{filter: brightness(0) invert(1)}\n    @media (prefers-color-scheme: dark){.theme-toggle-btn{background:rgba(30,30,30,0.85);border-color:transparent;box-shadow:none}}\n    ";
-  document.head.appendChild(styleEl);
-
-  // Inject dark mode CSS (scoped via html.dark)
-  var darkCSS = "\n    html.dark{color-scheme:dark}\n    html.dark body{background:#242525;color:#e5e7eb}\n    html.dark a{color:#93c5fd}\n    html.dark .figure-legend{color:#9ca3af}\n    html.dark d-article, html.dark d-article p, html.dark d-article aside{color:white !important;}\n    html.dark d-contents{background:#242525}\n    html.dark d-contents nav a{color:#cbd5e1}\n    html.dark d-contents nav a:hover{text-decoration:underline solid rgba(255,255,255,0.6)}\n    html.dark .note-box{background:#111;border-left-color:#888}\n    html.dark .note-box-title{color:#d1d5db}\n    html.dark .note-box-content{color:#e5e7eb}\n    html.dark .large-image-background{background:#242525}\n    html.dark .boxed-image{background:#111;border-color:#262626;box-shadow:0 4px 6px rgba(0,0,0,.6)}\n    html.dark #graph-all,html.dark #controls,html.dark .memory-block,html.dark .activation-memory,html.dark .gradient-memory{background:#111;border-color:#262626;box-shadow:0 4px 6px rgba(0,0,0,.6);color:#e5e7eb}\n    html.dark label,html.dark .memory-title{color:#e5e7eb}\n    html.dark .memory-value{color:#93c5fd}\n    html.dark input,html.dark select,html.dark textarea{background:#0f0f0f;color:#e5e7eb;border:1px solid #333}\n    html.dark input:hover,html.dark select:hover,html.dark textarea:hover{border-color:#60a5fa}\n    html.dark input:focus,html.dark select:focus,html.dark textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,0.35)}\n    html.dark input[type=range]{background:#333}\n    html.dark input[type=range]::-webkit-slider-thumb{background:#3b82f6}\n    html.dark .plotly_caption{color:#9ca3af}\n    html.dark .theme-toggle-btn{background:rgba(30,30,30,0.85);border-color:transparent}\n    html.dark d-article img{background:white}\n    html.dark summary {color:black !important;}\n    html.dark .katex-container {color:white !important;}\n    html.dark d-code {background: white!important;}\n    html.dark .code-block div { background: white!important;}\n    html.dark .code-block div p { color: black!important;}\n    /* Table borders in dark mode */\n    html.dark table{border-color:rgba(255,255,255,0.3)}\n    html.dark th,html.dark td{border-color:rgba(255,255,255,0.3)}\n    html.dark thead tr,html.dark tbody tr{border-color:rgba(255,255,255,0.3)}\n    html.dark d-byline, html.dark d-article{border-top: 1px solid rgba(255, 255, 255, 0.5);}\n    html.dark d-byline h3{color:white;}\n    html.dark d-math *, html.dark span.katex{color:white !important;}\n    html.dark d-appendix { color: white}\n    html.dark h2 { border-bottom: 1px solid rgba(255, 255, 255, 0.25);}\n    html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 { color: white}\n    html.dark .code-area { color: black;}\n    html.dark .code-area a { color: black!important;}\n    \n    ";
-  var darkStyleEl = document.createElement('style');
-  darkStyleEl.id = 'darkmode-css';
-  darkStyleEl.textContent = darkCSS;
-  document.head.appendChild(darkStyleEl);
-
-  // Inject equivalent dark CSS into all ShadowRoots using :host-context(.dark)
-  // This ensures styles also apply inside web components with Shadow DOM
-  var shadowDarkCSS = darkCSS.replace(/html\.dark/g, ':host-context(.dark)');
-  var injectDarkStylesIntoRoot = function injectDarkStylesIntoRoot(root) {
-    // Only target ShadowRoots here
-    if (!root || !(root instanceof ShadowRoot)) return;
-    if (root.querySelector('style#darkmode-css-shadow')) return;
-    var style = document.createElement('style');
-    style.id = 'darkmode-css-shadow';
-    style.textContent = shadowDarkCSS;
-    root.appendChild(style);
-  };
-
-  // Normalize inline SVGs: ensure viewBox and preserveAspectRatio for responsiveness
-  var normalizeSvgElement = function normalizeSvgElement(svgEl) {
-    try {
-      if (!svgEl || svgEl.hasAttribute('viewBox')) return;
-      var widthAttr = svgEl.getAttribute('width');
-      var heightAttr = svgEl.getAttribute('height');
-      if (!widthAttr || !heightAttr) return;
-      var width = parseFloat(widthAttr);
-      var height = parseFloat(heightAttr);
-      if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return;
-      svgEl.setAttribute('viewBox', "0 0 ".concat(width, " ").concat(height));
-      if (!svgEl.hasAttribute('preserveAspectRatio')) {
-        svgEl.setAttribute('preserveAspectRatio', 'xMidYMid meet');
-      }
-    } catch (_) {
-      // no-op
-    }
-  };
-  var processRootForSVGs = function processRootForSVGs(root) {
-    if (!root || typeof root.querySelectorAll !== 'function') return;
-    var svgs = root.querySelectorAll('svg:not([viewBox])');
-    svgs.forEach(function (svg) {
-      return normalizeSvgElement(svg);
-    });
-  };
-  var _scanNodeForShadowRoots = function scanNodeForShadowRoots(node) {
-    if (!node) return;
-    if (node.shadowRoot) {
-      injectDarkStylesIntoRoot(node.shadowRoot);
-      processRootForSVGs(node.shadowRoot);
-    }
-    // Traverse children
-    if (node.childNodes && node.childNodes.length) {
-      node.childNodes.forEach(function (child) {
-        // Process SVGs in this subtree as well
-        processRootForSVGs(child);
-        _scanNodeForShadowRoots(child);
-      });
-    }
-  };
-
-  // Intercept future shadow roots
-  var originalAttachShadow = Element.prototype.attachShadow;
-  Element.prototype.attachShadow = function (init) {
-    var shadow = originalAttachShadow.call(this, init);
-    try {
-      injectDarkStylesIntoRoot(shadow);
-      processRootForSVGs(shadow);
-    } catch (e) {}
-    return shadow;
-  };
-
-  // Initial sweep for any existing shadow roots
-  _scanNodeForShadowRoots(document.documentElement);
-  // Initial pass for regular DOM SVGs
-  processRootForSVGs(document);
-
-  // Observe DOM mutations to catch dynamically added components
-  var mo = new MutationObserver(function (mutations) {
-    var _iterator = _createForOfIteratorHelper(mutations),
-      _step;
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var m = _step.value;
-        m.addedNodes && m.addedNodes.forEach(function (n) {
-          _scanNodeForShadowRoots(n);
-          processRootForSVGs(n);
-        });
-      }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
-    }
-  });
-  mo.observe(document.documentElement, {
-    childList: true,
-    subtree: true
-  });
-
-  // Create the toggle button
-  var btn = document.createElement('button');
-  btn.className = 'theme-toggle-btn';
-  btn.setAttribute('type', 'button');
-  btn.setAttribute('aria-label', 'Basculer le mode sombre');
-  // Reuse icons declared in HTML and move them into the button
-  var sunIcon = document.getElementById('sunIcon');
-  var moonIcon = document.getElementById('moonIcon');
-  if (sunIcon && moonIcon) {
-    // Make sure they adopt button sizing
-    sunIcon.style.display = 'none';
-    sunIcon.style.width = '22px';
-    sunIcon.style.height = '22px';
-    moonIcon.style.display = 'none';
-    moonIcon.style.width = '22px';
-    moonIcon.style.height = '22px';
-    btn.appendChild(sunIcon);
-    btn.appendChild(moonIcon);
-  }
-  document.body.appendChild(btn);
-  var setIcon = function setIcon(enabled) {
-    // enabled = dark mode enabled -> show sun (to indicate turning off), hide moon
-    sunIcon.style.display = enabled ? '' : 'none';
-    moonIcon.style.display = enabled ? 'none' : '';
-    btn.setAttribute('title', enabled ? 'Désactiver le mode sombre' : 'Activer le mode sombre');
-    btn.setAttribute('aria-pressed', String(enabled));
-    btn.classList.toggle('dark', enabled);
-  };
-  var setDark = function setDark(enabled) {
-    document.documentElement.classList.toggle('dark', enabled);
-    setIcon(enabled);
-  };
-  var THEME_KEY = 'theme';
-  var savedTheme = null;
-  try {
-    savedTheme = localStorage.getItem(THEME_KEY);
-  } catch (e) {}
-  var media = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
-  var prefersDark = media ? media.matches : false;
-  // Initialisation: priorité à la préférence sauvegardée, sinon préférence système
-  if (savedTheme === 'dark') {
-    setDark(true);
-  } else if (savedTheme === 'light') {
-    setDark(false);
-  } else {
-    setDark(prefersDark);
-  }
-
-  // Si l'utilisateur a déjà choisi manuellement, on ne suit plus la préférence système
-  var manualOverride = savedTheme === 'dark' || savedTheme === 'light';
-
-  // React to system preference changes dynamically (no persistence)
-  if (media && typeof media.addEventListener === 'function') {
-    media.addEventListener('change', function (e) {
-      if (!manualOverride) {
-        setDark(e.matches);
-      }
-    });
-  } else if (media && typeof media.addListener === 'function') {
-    // Fallback for older browsers
-    media.addListener(function (e) {
-      if (!manualOverride) {
-        setDark(e.matches);
-      }
-    });
-  }
-
-  // Toggle handler — for réduire les glitches, attendre le next frame avant d'ajuster l'icône
-  btn.addEventListener('click', function () {
-    manualOverride = true;
-    var next = !document.documentElement.classList.contains('dark');
-    setDark(next);
-    try {
-      localStorage.setItem(THEME_KEY, next ? 'dark' : 'light');
-    } catch (e) {}
-  });
   loadFragments();
   init_memory_plot();
   syncHFSpacesURLHash();

dist/style.css

@@ -304,6 +304,7 @@ d-contents nav > ul > li > a:hover {
     border-radius: 6px;
     /* Add this to ensure the box only takes up needed space */
     display: inline-block;
+    width: 100%;
 }
 
 .note-box-title {
@@ -596,141 +597,3 @@ select[name="presets"] {
     border-radius: 8px;
 }
 
-.order-button-second {
-            background: linear-gradient(135deg, #6DB4C4, #D4A5B8);
-            color: white;
-            font-size: 18px;
-            font-weight: 600;
-            padding: 20px 20px;
-            border: none;
-            border-radius: 12px;
-            cursor: pointer;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-        }
-.order-button-second:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
-}
-
-.order-button:active {
-    transform: translateY(0);
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-}
-
-.order-button-second::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
-    transition: left 0.5s ease;
-}
-
-.order-button-second:hover::before {
-    left: 100%;
-}
-
-.order-button {
-            background: linear-gradient(135deg, #6DB4C4, #D4A5B8);
-            color: white;
-            font-size: 18px;
-            font-weight: 600;
-            padding: 16px 32px;
-            border: none;
-            border-radius: 12px;
-            cursor: pointer;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-        }
-
-.order-button:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
-}
-
-.order-button:active {
-    transform: translateY(0);
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-}
-
-.order-button::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
-    transition: left 0.5s ease;
-}
-
-.order-button:hover::before {
-    left: 100%;
-}
-.order-button-container-second {
-    /* display: flex; */
-    justify-content: center;
-    margin: 0px 0;
-}
-
-.order-button-container {
-    display: flex;
-    justify-content: center;
-    margin: 0px 0 40px 0;
-}
-
-d-article img {
-    width: 100%!important;
-}
-
-
-iframe, .js-plotly-plot {
-    width: 100%!important;
-    margin-bottom: 20px;
-}
-
-.modebar-container {
-    display: none;
-}
-
-#graph-container {
-    display: grid; grid-template-columns: 1fr 1fr; align-items: center;
-}
-
-@media (max-width: 768px) {
-    #graph-container {
-        grid-template-columns: 1fr;
-    }
-}
-
-@media (max-width: 1024px) {
-    #graph-container {
-        grid-template-columns: 1fr;
-    }
-    #graph-all {
-        margin-right: 0px;
-    }
-    #controls {
-        margin-left: 0px;
-    }
-}
-
-.main-plot-container svg {
-    background: transparent !important;
-}
-
-.large-image-background-transparent {
-    margin-left: 0px;
-    margin-right: 0px;
-}

src/distill.js

@@ -2105,7 +2105,12 @@ d-appendix > distill-appendix {
           <div>Feb 19, 2025</div>
       </div>
     </div>
-
+    <div class="side pdf-download">
+      <a href="https://huggingface.co/spaces/nanotron/ultrascale-playbook/resolve/main/The_Ultra-Scale_Playbook_Training_LLMs_on_GPU_Clusters.pdf">Download PDF
+      <br>
+      <img style="width: 32px;" src="../assets/images/256px-PDF.png" alt="PDF"></a>
+      
+    </div>
 `;
   }
 

src/index.html

@@ -58,9 +58,6 @@
     </script>
     </d-front-matter>
     <d-title>
-        <!-- Theme toggle icons (declared once in DOM for clarity; visibility controlled via JS) -->
-        <img id="sunIcon" src="assets/images/sun.svg" alt="Sun icon" style="display:none;width:22px;height:22px;color:inherit"/>
-        <img id="moonIcon" src="assets/images/moon.svg" alt="Moon icon" style="display:none;width:22px;height:22px;color:inherit"/>
         <h1 class="l-page" style="text-align: center;">The Ultra-Scale Playbook:<br>Training LLMs on GPU Clusters</h1>
         <div id="title-plot" class="main-plot-container l-screen" style="overflow-x: hidden; width: 100%; text-align: center;">
             <div style="display: flex; justify-content: center; position: relative;">
@@ -68,14 +65,8 @@
             </div>
             <p style="text-align: cekter; font-style: italic; margin-top: 10px; max-width: 900px; margin-left: auto; margin-right: auto;">We ran over 4,000 scaling experiments on up to 512 GPUs and measured throughput (size of markers) and GPU utilization (color of markers). Note that both are normalized per model size in this visualization.</p>
   
-
         </div>
-
     </d-title>
-    <div class="order-button-container">
-        <button class="order-button" style="margin: 0 8px;" onclick="window.open('https://www.lulu.com/shop/nouamane-tazi-and-ferdinand-mom-and-haojun-zhao-and-phuc-nguyen/the-ultra-scale-playbook/paperback/product-45yk9dj.html?page=1&pageSize=4', '_blank')">Order Book</button>
-        <button class="order-button" style="margin: 0 8px;" onclick="window.open('https://huggingface.co/nanotron', '_blank')">Get PDF</button>
-    </div>
     <d-byline></d-byline>
       <d-article>
         <d-contents>
@@ -85,12 +76,10 @@
           Thousands of GPUs humming in perfect harmony. That's what it takes to train today's most powerful AI models – a symphony of computing power that until recently was the exclusive domain of elite research labs. Open source has transformed this landscape, but not completely. Yes, you can download the latest <a href="https://huggingface.co/meta-llama">Llama</a> or <a href="https://huggingface.co/deepseek-ai">DeepSeek</a> models. Yes, you can read their <a href="https://ai.meta.com/research/publications/the-llama-3-herd-of-models/">technical</a> and <a href="https://github.com/deepseek-ai/DeepSeek-R1/blob/main/DeepSeek_R1.pdf">experiment</a> reports. But the most challenging part – the training code, the knowledge and techniques necessary to coordinate GPUs to train these massive systems – remains shrouded in complexity and spread around in a series of disconnected papers and often private codebases.
           </p>
           <aside>Reading time: 2-4 days. <br>For the best reading experience, we recommend not using a mobile phone.</aside>
-        
-        <p>
+          <p>
             This open source book is here to change that. Starting from the basics, we'll walk you through the knowledge necessary to scale the training of large language models (LLMs) from one GPU to tens, hundreds, and even thousands of GPUs, illustrating theory with practical code examples and reproducible benchmarks.
         </p>
 
-
         <p>As the size of the clusters used to train these models has grown, various techniques, such as data parallelism, tensor parallelism, pipeline parallelism, and context parallelism as well as ZeRO and kernel fusion, have been invented to make sure that GPUs are highly utilized at all times. This significantly reduces training time and makes the most efficient use of this expensive hardware. These distributed training techniques are not only important for building initial models but have also become essential for fine-tuning large models on specialized data, which often produces the best results. In this book, we'll progressively go over all of these techniques – from the simplest to the most refined ones – while maintaining a single story line to help you understand where each method comes from.</p>
 
         <aside>If you have questions or remarks, open a discussion on the <a href="https://huggingface.co/spaces/nanotron/ultrascale-playbook/discussions?status=open&type=discussion">Community tab</a>!</aside>
@@ -106,7 +95,7 @@
         <aside>Note that we're still missing pipeline parallelism in this widget. To be added as an exercise for the reader.</aside>
 
         <div class="large-image-background-transparent">
-            <div id="graph-container">
+            <div style="display: grid; grid-template-columns: 1fr 1fr; align-items: center;">
                 <div id="graph-all">
                     <div class="figure-legend">Memory usage breakdown</div>
                 <div id="graph"></div>
@@ -2122,7 +2111,7 @@
 
         <p>To run the kernel you will also need some <strong><em>host code</em></strong>, which is executed on the CPU/host and takes care of preparing data allocations and loading data and code:</p>
 
-        <div class="l-body code-block" style="display: grid; grid-template-columns: 1fr 1fr; align-items: center;">
+        <div class="l-body" style="display: grid; grid-template-columns: 1fr 1fr; align-items: center;">
             <div>
                 <d-code block language="python">
                     // Host code                

src/index.js

@@ -2,237 +2,9 @@
 import { init_memory_plot } from './memory'
 import { loadFragments } from './fragmentLoader'
 import { syncHFSpacesURLHash } from './syncHFSpacesURLHash'
-// Dark mode is now handled manually via a CSS class on <html> and injected styles
 
 document.addEventListener("DOMContentLoaded", () => {
     console.log("DOMContentLoaded");
-
-    // Inject minimal styles for the theme toggle button
-    const styleEl = document.createElement('style');
-    styleEl.textContent = `
-    .theme-toggle-btn{position:absolute;top:16px;left:16px;z-index:10000;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:rgba(255,255,255,0.9);backdrop-filter:saturate(150%) blur(6px);cursor:pointer;border:1px solid transparent;outline:none;box-shadow:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
-    .theme-toggle-btn:hover{border-color:transparent;box-shadow:none}
-    .theme-toggle-btn:focus,.theme-toggle-btn:focus-visible{outline:none;border-color:transparent;box-shadow:none}
-    .theme-toggle-btn img{width:22px;height:22px;transition:filter .15s ease}
-    .theme-toggle-btn.dark img{filter: brightness(0) invert(1)}
-    @media (prefers-color-scheme: dark){.theme-toggle-btn{background:rgba(30,30,30,0.85);border-color:transparent;box-shadow:none}}
-    `;
-    document.head.appendChild(styleEl);
-
-    // Inject dark mode CSS (scoped via html.dark)
-    const darkCSS = `
-    html.dark{color-scheme:dark}
-    html.dark body{background:#242525;color:#e5e7eb}
-    html.dark a{color:#93c5fd}
-    html.dark .figure-legend{color:#9ca3af}
-    html.dark d-article, html.dark d-article p, html.dark d-article aside{color:white !important;}
-    html.dark d-contents{background:#242525}
-    html.dark d-contents nav a{color:#cbd5e1}
-    html.dark d-contents nav a:hover{text-decoration:underline solid rgba(255,255,255,0.6)}
-    html.dark .note-box{background:#111;border-left-color:#888}
-    html.dark .note-box-title{color:#d1d5db}
-    html.dark .note-box-content{color:#e5e7eb}
-    html.dark .large-image-background{background:#242525}
-    html.dark .boxed-image{background:#111;border-color:#262626;box-shadow:0 4px 6px rgba(0,0,0,.6)}
-    html.dark #graph-all,html.dark #controls,html.dark .memory-block,html.dark .activation-memory,html.dark .gradient-memory{background:#111;border-color:#262626;box-shadow:0 4px 6px rgba(0,0,0,.6);color:#e5e7eb}
-    html.dark label,html.dark .memory-title{color:#e5e7eb}
-    html.dark .memory-value{color:#93c5fd}
-    html.dark input,html.dark select,html.dark textarea{background:#0f0f0f;color:#e5e7eb;border:1px solid #333}
-    html.dark input:hover,html.dark select:hover,html.dark textarea:hover{border-color:#60a5fa}
-    html.dark input:focus,html.dark select:focus,html.dark textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,0.35)}
-    html.dark input[type=range]{background:#333}
-    html.dark input[type=range]::-webkit-slider-thumb{background:#3b82f6}
-    html.dark .plotly_caption{color:#9ca3af}
-    html.dark .theme-toggle-btn{background:rgba(30,30,30,0.85);border-color:transparent}
-    html.dark d-article img{background:white}
-    html.dark summary {color:black !important;}
-    html.dark .katex-container {color:white !important;}
-    html.dark d-code {background: white!important;}
-    html.dark .code-block div { background: white!important;}
-    html.dark .code-block div p { color: black!important;}
-    /* Table borders in dark mode */
-    html.dark table{border-color:rgba(255,255,255,0.3)}
-    html.dark th,html.dark td{border-color:rgba(255,255,255,0.3)}
-    html.dark thead tr,html.dark tbody tr{border-color:rgba(255,255,255,0.3)}
-    html.dark d-byline, html.dark d-article{border-top: 1px solid rgba(255, 255, 255, 0.5);}
-    html.dark d-byline h3{color:white;}
-    html.dark d-math *, html.dark span.katex{color:white !important;}
-    html.dark d-appendix { color: white}
-    html.dark h2 { border-bottom: 1px solid rgba(255, 255, 255, 0.25);}
-    html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 { color: white}
-    html.dark .code-area { color: black;}
-    html.dark .code-area a { color: black!important;}
-    
-    `;
-    const darkStyleEl = document.createElement('style');
-    darkStyleEl.id = 'darkmode-css';
-    darkStyleEl.textContent = darkCSS;
-    document.head.appendChild(darkStyleEl);
-
-	// Inject equivalent dark CSS into all ShadowRoots using :host-context(.dark)
-	// This ensures styles also apply inside web components with Shadow DOM
-	const shadowDarkCSS = darkCSS.replace(/html\.dark/g, ':host-context(.dark)');
-
-	const injectDarkStylesIntoRoot = (root) => {
-		// Only target ShadowRoots here
-		if (!root || !(root instanceof ShadowRoot)) return;
-		if (root.querySelector('style#darkmode-css-shadow')) return;
-		const style = document.createElement('style');
-		style.id = 'darkmode-css-shadow';
-		style.textContent = shadowDarkCSS;
-		root.appendChild(style);
-	};
-
-	// Normalize inline SVGs: ensure viewBox and preserveAspectRatio for responsiveness
-	const normalizeSvgElement = (svgEl) => {
-		try {
-			if (!svgEl || svgEl.hasAttribute('viewBox')) return;
-			const widthAttr = svgEl.getAttribute('width');
-			const heightAttr = svgEl.getAttribute('height');
-			if (!widthAttr || !heightAttr) return;
-			const width = parseFloat(widthAttr);
-			const height = parseFloat(heightAttr);
-			if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return;
-			svgEl.setAttribute('viewBox', `0 0 ${width} ${height}`);
-			if (!svgEl.hasAttribute('preserveAspectRatio')) {
-				svgEl.setAttribute('preserveAspectRatio', 'xMidYMid meet');
-			}
-		} catch (_) {
-			// no-op
-		}
-	};
-
-	const processRootForSVGs = (root) => {
-		if (!root || typeof root.querySelectorAll !== 'function') return;
-		const svgs = root.querySelectorAll('svg:not([viewBox])');
-		svgs.forEach((svg) => normalizeSvgElement(svg));
-	};
-
-	const scanNodeForShadowRoots = (node) => {
-		if (!node) return;
-		if (node.shadowRoot) {
-			injectDarkStylesIntoRoot(node.shadowRoot);
-			processRootForSVGs(node.shadowRoot);
-		}
-		// Traverse children
-		if (node.childNodes && node.childNodes.length) {
-			node.childNodes.forEach((child) => {
-				// Process SVGs in this subtree as well
-				processRootForSVGs(child);
-				scanNodeForShadowRoots(child);
-			});
-		}
-	};
-
-	// Intercept future shadow roots
-	const originalAttachShadow = Element.prototype.attachShadow;
-	Element.prototype.attachShadow = function(init) {
-		const shadow = originalAttachShadow.call(this, init);
-		try {
-			injectDarkStylesIntoRoot(shadow);
-			processRootForSVGs(shadow);
-		} catch (e) {}
-		return shadow;
-	};
-
-	// Initial sweep for any existing shadow roots
-	scanNodeForShadowRoots(document.documentElement);
-	// Initial pass for regular DOM SVGs
-	processRootForSVGs(document);
-
-	// Observe DOM mutations to catch dynamically added components
-	const mo = new MutationObserver((mutations) => {
-		for (const m of mutations) {
-			m.addedNodes && m.addedNodes.forEach((n) => {
-				scanNodeForShadowRoots(n);
-				processRootForSVGs(n);
-			});
-		}
-	});
-	mo.observe(document.documentElement, { childList: true, subtree: true });
-
-    // Create the toggle button
-    const btn = document.createElement('button');
-    btn.className = 'theme-toggle-btn';
-    btn.setAttribute('type', 'button');
-    btn.setAttribute('aria-label', 'Basculer le mode sombre');
-    // Reuse icons declared in HTML and move them into the button
-    const sunIcon = document.getElementById('sunIcon');
-    const moonIcon = document.getElementById('moonIcon');
-
-    if (sunIcon && moonIcon) {
-        // Make sure they adopt button sizing
-        sunIcon.style.display = 'none';
-        sunIcon.style.width = '22px';
-        sunIcon.style.height = '22px';
-        moonIcon.style.display = 'none';
-        moonIcon.style.width = '22px';
-        moonIcon.style.height = '22px';
-        btn.appendChild(sunIcon);
-        btn.appendChild(moonIcon);
-    }
-    document.body.appendChild(btn);
-
-    const setIcon = (enabled) => {
-        // enabled = dark mode enabled -> show sun (to indicate turning off), hide moon
-        sunIcon.style.display = enabled ? '' : 'none';
-        moonIcon.style.display = enabled ? 'none' : '';
-        btn.setAttribute('title', enabled ? 'Désactiver le mode sombre' : 'Activer le mode sombre');
-        btn.setAttribute('aria-pressed', String(enabled));
-        btn.classList.toggle('dark', enabled);
-    };
-
-    const setDark = (enabled) => {
-        document.documentElement.classList.toggle('dark', enabled);
-        setIcon(enabled);
-    };
-
-    const THEME_KEY = 'theme';
-    let savedTheme = null;
-    try {
-        savedTheme = localStorage.getItem(THEME_KEY);
-    } catch (e) {}
-
-    const media = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
-    const prefersDark = media ? media.matches : false;
-    // Initialisation: priorité à la préférence sauvegardée, sinon préférence système
-    if (savedTheme === 'dark') {
-        setDark(true);
-    } else if (savedTheme === 'light') {
-        setDark(false);
-    } else {
-        setDark(prefersDark);
-    }
-
-    // Si l'utilisateur a déjà choisi manuellement, on ne suit plus la préférence système
-    let manualOverride = savedTheme === 'dark' || savedTheme === 'light';
-
-    // React to system preference changes dynamically (no persistence)
-    if (media && typeof media.addEventListener === 'function') {
-        media.addEventListener('change', (e) => {
-            if (!manualOverride) {
-                setDark(e.matches);
-            }
-        });
-    } else if (media && typeof media.addListener === 'function') {
-        // Fallback for older browsers
-        media.addListener((e) => {
-            if (!manualOverride) {
-                setDark(e.matches);
-            }
-        });
-    }
-
-    // Toggle handler — for réduire les glitches, attendre le next frame avant d'ajuster l'icône
-    btn.addEventListener('click', () => {
-        manualOverride = true;
-        const next = !document.documentElement.classList.contains('dark');
-        setDark(next);
-        try {
-            localStorage.setItem(THEME_KEY, next ? 'dark' : 'light');
-        } catch (e) {}
-    });
-
     loadFragments();
     init_memory_plot();
     syncHFSpacesURLHash();

src/style.css

@@ -304,6 +304,7 @@ d-contents nav > ul > li > a:hover {
     border-radius: 6px;
     /* Add this to ensure the box only takes up needed space */
     display: inline-block;
+    width: 100%;
 }
 
 .note-box-title {
@@ -596,141 +597,3 @@ select[name="presets"] {
     border-radius: 8px;
 }
 
-.order-button-second {
-            background: linear-gradient(135deg, #6DB4C4, #D4A5B8);
-            color: white;
-            font-size: 18px;
-            font-weight: 600;
-            padding: 20px 20px;
-            border: none;
-            border-radius: 12px;
-            cursor: pointer;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-        }
-.order-button-second:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
-}
-
-.order-button:active {
-    transform: translateY(0);
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-}
-
-.order-button-second::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
-    transition: left 0.5s ease;
-}
-
-.order-button-second:hover::before {
-    left: 100%;
-}
-
-.order-button {
-            background: linear-gradient(135deg, #6DB4C4, #D4A5B8);
-            color: white;
-            font-size: 18px;
-            font-weight: 600;
-            padding: 16px 32px;
-            border: none;
-            border-radius: 12px;
-            cursor: pointer;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-        }
-
-.order-button:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
-}
-
-.order-button:active {
-    transform: translateY(0);
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-}
-
-.order-button::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
-    transition: left 0.5s ease;
-}
-
-.order-button:hover::before {
-    left: 100%;
-}
-.order-button-container-second {
-    /* display: flex; */
-    justify-content: center;
-    margin: 0px 0;
-}
-
-.order-button-container {
-    display: flex;
-    justify-content: center;
-    margin: 0px 0 40px 0;
-}
-
-d-article img {
-    width: 100%!important;
-}
-
-
-iframe, .js-plotly-plot {
-    width: 100%!important;
-    margin-bottom: 20px;
-}
-
-.modebar-container {
-    display: none;
-}
-
-#graph-container {
-    display: grid; grid-template-columns: 1fr 1fr; align-items: center;
-}
-
-@media (max-width: 768px) {
-    #graph-container {
-        grid-template-columns: 1fr;
-    }
-}
-
-@media (max-width: 1024px) {
-    #graph-container {
-        grid-template-columns: 1fr;
-    }
-    #graph-all {
-        margin-right: 0px;
-    }
-    #controls {
-        margin-left: 0px;
-    }
-}
-
-.main-plot-container svg {
-    background: transparent !important;
-}
-
-.large-image-background-transparent {
-    margin-left: 0px;
-    margin-right: 0px;
-}