Typos

.gitattributes

@@ -18,7 +18,6 @@
 *.ot filter=lfs diff=lfs merge=lfs -text
 *.parquet filter=lfs diff=lfs merge=lfs -text
 *.pb filter=lfs diff=lfs merge=lfs -text
-*.pdf filter=lfs diff=lfs merge=lfs -text
 *.pickle filter=lfs diff=lfs merge=lfs -text
 *.pkl filter=lfs diff=lfs merge=lfs -text
 *.png filter=lfs diff=lfs merge=lfs -text

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

The_Ultra-Scale_Playbook_Training_LLMs_on_GPU_Clusters.pdf

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:274a19a2577ed220cd3a102b4469c44310e4a7c8e8f8ebc36842d907cb51e127
-size 14059172

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/bibliography.bib

@@ -316,15 +316,6 @@ url = {https://github.com/meta-llama/llama3/blob/main/MODEL_CARD.md}
       archivePrefix={arXiv},
       primaryClass={cs.AI}
 }
-@misc{liu2023ringattentionblockwisetransformers,
-      title={Ring Attention with Blockwise Transformers for Near-Infinite Context}, 
-      author={Hao Liu and Matei Zaharia and Pieter Abbeel},
-      year={2023},
-      eprint={2310.01889},
-      archivePrefix={arXiv},
-      primaryClass={cs.CL},
-      url={https://arxiv.org/abs/2310.01889}, 
-}
 @misc{hendrycks2021measuring,
       title={Measuring Massive Multitask Language Understanding},
       author={Dan Hendrycks and Collin Burns and Steven Basart and Andy Zou and Mantas Mazeika and Dawn Song and Jacob Steinhardt},
@@ -497,7 +488,7 @@ url = {https://github.com/meta-llama/llama3/blob/main/MODEL_CARD.md}
 @software{torchao,
   title = {torchao: PyTorch native quantization and sparsity for training and inference},
   author = {torchao maintainers and contributors},
-  url = {https://github.com/pytorch/ao},
+  url = {https://github.com/pytorch/torchao},
   license = {BSD-3-Clause},
   month = oct,
   year = {2024}

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");
   }
   var Byline = /*#__PURE__*/function (_HTMLElement4) {
     function Byline() {

dist/main.bundle.js

@@ -5544,320 +5544,14 @@ function _loadFragments() {
   return _loadFragments.apply(this, arguments);
 }
 
-;// ./src/syncHFSpacesURLHash.js
-var queryArg = "section";
-function syncHFSpacesURLHash() {
-  // Handle explicit section requests (don't update hash automatically on load)
-  var hasExplicitRequest = handleExplicitSectionRequest();
-
-  // Set up hash change monitoring
-  updateHashBasedOnHashChange();
-
-  // Always set up scroll monitoring to update hash during scrolling
-  setupScrollMonitoring();
-
-  // If no explicit request, we don't update the hash on initial load
-  // The hash will only start updating when the user scrolls
-}
-function handleExplicitSectionRequest() {
-  // Check for section parameter in URL
-  var urlParams = new URLSearchParams(window.location.search);
-  var sectionId = urlParams.get(queryArg);
-
-  // If we have an explicit section request
-  if (sectionId) {
-    var targetElement = document.getElementById(sectionId);
-    if (targetElement) {
-      // Slight delay to ensure the browser doesn't try to do its own scrolling first
-      setTimeout(function () {
-        targetElement.scrollIntoView();
-        history.replaceState(null, null, "#".concat(sectionId));
-      }, 100);
-    }
-    return true;
-  }
-
-  // No explicit section parameter found
-  return false;
-}
-function setupScrollMonitoring() {
-  // Variables to manage throttling
-  var isScrolling = false;
-  var lastKnownScrollPosition = 0;
-  var initialScroll = true;
-
-  // Add the scroll event listener
-  window.addEventListener('scroll', function () {
-    lastKnownScrollPosition = window.scrollY;
-    if (!isScrolling) {
-      window.requestAnimationFrame(function () {
-        // Skip the first scroll event which might be browser's automatic scroll
-        // to a hash on page load
-        if (initialScroll) {
-          initialScroll = false;
-        } else {
-          updateHashBasedOnScroll(lastKnownScrollPosition);
-        }
-        isScrolling = false;
-      });
-    }
-    isScrolling = true;
-  });
-}
-
-// Function to update the URL hash based on scroll position
-function updateHashBasedOnScroll(scrollPosition) {
-  var closestHeading = findClosestHeading(scrollPosition);
-
-  // Update the URL hash if we found a closest element
-  if (closestHeading && closestHeading.id) {
-    // Only update if the hash is different to avoid unnecessary operations
-    if (window.location.hash !== "#".concat(closestHeading.id)) {
-      silentlyUpdateHash(closestHeading.id);
-      postMessageToHFSpaces(closestHeading.id);
-    }
-  }
-}
-
-// Find the closest heading to the current scroll position
-function findClosestHeading(scrollPosition) {
-  // Get only heading elements with IDs that we want to track
-  var headingsWithIds = Array.from(document.querySelectorAll('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]'));
-
-  // Skip if there are no headings with IDs
-  if (headingsWithIds.length === 0) return null;
-
-  // Find the element closest to the middle of the viewport
-  var closestHeading = null;
-  var closestDistance = Infinity;
-  var viewportMiddle = scrollPosition + window.innerHeight / 2;
-
-  // Iterate through all headings to find the closest one
-  headingsWithIds.forEach(function (heading) {
-    var headingTop = heading.getBoundingClientRect().top + scrollPosition;
-    var distance = Math.abs(headingTop - viewportMiddle);
-    if (distance < closestDistance) {
-      closestDistance = distance;
-      closestHeading = heading;
-    }
-  });
-  return closestHeading;
-}
-
-// Update hash without triggering scroll or other side effects
-function silentlyUpdateHash(id) {
-  history.replaceState(null, null, "#".concat(id));
-}
-function updateHashBasedOnHashChange() {
-  window.addEventListener('hashchange', function () {
-    var elementId = window.location.hash.slice(1);
-    postMessageToHFSpaces(elementId);
-  });
-}
-function postMessageToHFSpaces(elementId) {
-  var parentOrigin = "https://huggingface.co";
-  window.parent.postMessage({
-    queryString: "".concat(queryArg, "=").concat(elementId)
-  }, parentOrigin);
-}
-
 ;// ./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();
 }, {
   once: true
 });

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;
-}

package.json

@@ -11,7 +11,7 @@
   "description": "--- title: \"The Nanotron Gigablogpost\" emoji: 🍷 colorFrom: pink colorTo: red sdk: static pinned: false header: mini ---",
   "main": "index.js",
   "scripts": {
-    "dev": "webpack serve --open --hot",
+    "dev": "webpack serve --open",
     "build": "NODE_ENV=production webpack"
   },
   "author": "",

src/bibliography.bib

@@ -316,15 +316,6 @@ url = {https://github.com/meta-llama/llama3/blob/main/MODEL_CARD.md}
       archivePrefix={arXiv},
       primaryClass={cs.AI}
 }
-@misc{liu2023ringattentionblockwisetransformers,
-      title={Ring Attention with Blockwise Transformers for Near-Infinite Context}, 
-      author={Hao Liu and Matei Zaharia and Pieter Abbeel},
-      year={2023},
-      eprint={2310.01889},
-      archivePrefix={arXiv},
-      primaryClass={cs.CL},
-      url={https://arxiv.org/abs/2310.01889}, 
-}
 @misc{hendrycks2021measuring,
       title={Measuring Massive Multitask Language Understanding},
       author={Dan Hendrycks and Collin Burns and Steven Basart and Andy Zou and Mantas Mazeika and Dawn Song and Jacob Steinhardt},
@@ -497,7 +488,7 @@ url = {https://github.com/meta-llama/llama3/blob/main/MODEL_CARD.md}
 @software{torchao,
   title = {torchao: PyTorch native quantization and sparsity for training and inference},
   author = {torchao maintainers and contributors},
-  url = {https://github.com/pytorch/ao},
+  url = {https://github.com/pytorch/torchao},
   license = {BSD-3-Clause},
   month = oct,
   year = {2024}

src/distill.js

@@ -2105,7 +2105,6 @@ d-appendix > distill-appendix {
           <div>Feb 19, 2025</div>
       </div>
     </div>
-
 `;
   }
 

src/index.js

@@ -1,239 +1,9 @@
 // import { plotClusters } from './clusters'
 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();
 }, { once: true });

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;
-}

src/syncHFSpacesURLHash.js

@@ -1,124 +0,0 @@
-const queryArg = "section";
-
-function syncHFSpacesURLHash() {
-  // Handle explicit section requests (don't update hash automatically on load)
-  const hasExplicitRequest = handleExplicitSectionRequest();
-  
-  // Set up hash change monitoring
-  updateHashBasedOnHashChange();
-  
-  // Always set up scroll monitoring to update hash during scrolling
-  setupScrollMonitoring();
-  
-  // If no explicit request, we don't update the hash on initial load
-  // The hash will only start updating when the user scrolls
-}
-
-function handleExplicitSectionRequest() {
-  // Check for section parameter in URL
-  const urlParams = new URLSearchParams(window.location.search);
-  const sectionId = urlParams.get(queryArg);
-  
-  // If we have an explicit section request
-  if (sectionId) {
-    const targetElement = document.getElementById(sectionId);
-    if (targetElement) {
-      // Slight delay to ensure the browser doesn't try to do its own scrolling first
-      setTimeout(() => {
-        targetElement.scrollIntoView();
-        history.replaceState(null, null, `#${sectionId}`);
-      }, 100);
-    }
-    return true;
-  }
-  
-  // No explicit section parameter found
-  return false;
-}
-
-function setupScrollMonitoring() {
-  // Variables to manage throttling
-  let isScrolling = false;
-  let lastKnownScrollPosition = 0;
-  let initialScroll = true;
-  
-  // Add the scroll event listener
-  window.addEventListener('scroll', function() {
-    lastKnownScrollPosition = window.scrollY;
-    
-    if (!isScrolling) {
-      window.requestAnimationFrame(function() {
-        // Skip the first scroll event which might be browser's automatic scroll
-        // to a hash on page load
-        if (initialScroll) {
-          initialScroll = false;
-        } else {
-          updateHashBasedOnScroll(lastKnownScrollPosition);
-        }
-        isScrolling = false;
-      });
-    }
-    
-    isScrolling = true;
-  });
-}
-
-// Function to update the URL hash based on scroll position
-function updateHashBasedOnScroll(scrollPosition) {
-  const closestHeading = findClosestHeading(scrollPosition);
-  
-  // Update the URL hash if we found a closest element
-  if (closestHeading && closestHeading.id) {
-    // Only update if the hash is different to avoid unnecessary operations
-    if (window.location.hash !== `#${closestHeading.id}`) {
-      silentlyUpdateHash(closestHeading.id);
-      postMessageToHFSpaces(closestHeading.id);
-    }
-  }
-}
-
-// Find the closest heading to the current scroll position
-function findClosestHeading(scrollPosition) {
-  // Get only heading elements with IDs that we want to track
-  const headingsWithIds = Array.from(document.querySelectorAll('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]'));
-
-  // Skip if there are no headings with IDs
-  if (headingsWithIds.length === 0) return null;
-
-  // Find the element closest to the middle of the viewport
-  let closestHeading = null;
-  let closestDistance = Infinity;
-  const viewportMiddle = scrollPosition + window.innerHeight / 2;
-  
-  // Iterate through all headings to find the closest one
-  headingsWithIds.forEach(heading => {
-    const headingTop = heading.getBoundingClientRect().top + scrollPosition;
-    const distance = Math.abs(headingTop - viewportMiddle);
-    
-    if (distance < closestDistance) {
-      closestDistance = distance;
-      closestHeading = heading;
-    }
-  });
-  
-  return closestHeading;
-}
-
-// Update hash without triggering scroll or other side effects
-function silentlyUpdateHash(id) {
-  history.replaceState(null, null, `#${id}`);
-}
-
-function updateHashBasedOnHashChange() {
-  window.addEventListener('hashchange', () => {
-    const elementId = window.location.hash.slice(1);
-    postMessageToHFSpaces(elementId);
-  });
-}
-
-function postMessageToHFSpaces(elementId) {
-  const parentOrigin = "https://huggingface.co";
-  window.parent.postMessage({ queryString: `${queryArg}=${elementId}` }, parentOrigin);
-}
-
-export { syncHFSpacesURLHash };

webpack.config.js

@@ -99,14 +99,9 @@ module.exports = {
     ],
     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,
-        },
+        static: "./dist", // Serve files from the 'dist' directory
+        open: process.env.NODE_ENV !== 'production', // Automatically open the browser unless in production
+        hot: process.env.NODE_ENV !== 'production', // Enable hot module replacement unless in production
     },
     mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
     optimization: {