Spaces:

nanotron
/

ultrascale-playbook

Running

App Files Files Community

122

dark-mode

#82

by serhany - opened Feb 20

base: refs/heads/main

←

from: refs/pr/82

Discussion Files changed

+144

-0

Files changed (2) hide show

dist/index.html +72 -0
src/index.html +72 -0

dist/index.html CHANGED Viewed

@@ -5,14 +5,86 @@
     <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://cdn.plot.ly/plotly-3.0.0.min.js" charset="utf-8"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta charset="utf8">
     <base target="_blank">
     <title>The Ultra-Scale Playbook: Training LLMs on GPU Clusters</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <d-front-matter>
         <script id='distill-front-matter' type="text/json">{
     "title": "The Ultra-Scale Playbook: Training LLMs on GPU Clusters",

     <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://cdn.plot.ly/plotly-3.0.0.min.js" charset="utf-8"></script>
+    <script src="https://unpkg.com/darkreader/darkreader.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta charset="utf8">
     <base target="_blank">
     <title>The Ultra-Scale Playbook: Training LLMs on GPU Clusters</title>
     <link rel="stylesheet" href="style.css">
+    <style>
+        .toggle-button {
+          position: fixed;
+          top: 20px;
+          left: 20px;
+          width: 40px;
+          height: 40px;
+          background-color: transparent;
+          border: none;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 1000;
+          outline: none;
+        }
+        .toggle-button svg {
+          width: 24px;
+          height: 24px;
+        }
+    </style>
 </head>
 <body>
+    <button id="darkModeToggle" class="toggle-button">
+        <!-- sun icon -->
+        <svg id="sunIcon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="12" cy="12" r="5"></circle>
+          <line x1="12" y1="1" x2="12" y2="3"></line>
+          <line x1="12" y1="21" x2="12" y2="23"></line>
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+          <line x1="1" y1="12" x2="3" y2="12"></line>
+          <line x1="21" y1="12" x2="23" y2="12"></line>
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+        </svg>
+        <!-- moon icon -->
+        <svg id="moonIcon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: none;">
+          <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
+        </svg>
+    </button>
+    <script>
+    // check localStorage to see if the user had a preference from before
+    let darkModeEnabled = localStorage.getItem('darkModeEnabled') === 'true';
+    const toggleButton = document.getElementById('darkModeToggle');
+    const sunIcon = document.getElementById('sunIcon');
+    const moonIcon = document.getElementById('moonIcon');
+    const updateDarkMode = () => {
+        if (darkModeEnabled) {
+        DarkReader.enable({ brightness: 100, contrast: 90, sepia: 10 });
+        sunIcon.style.display = 'none';
+        moonIcon.style.display = 'block';
+        } else {
+        DarkReader.disable();
+        sunIcon.style.display = 'block';
+        moonIcon.style.display = 'none';
+        }
+    };
+    // initialize dark mode based on the stored preference
+    document.addEventListener('DOMContentLoaded', updateDarkMode);
+    // toggle dark mode and update localStorage on button click
+    toggleButton.addEventListener('click', () => {
+        darkModeEnabled = !darkModeEnabled;
+        localStorage.setItem('darkModeEnabled', darkModeEnabled);
+        updateDarkMode();
+    });
+    </script>
     <d-front-matter>
         <script id='distill-front-matter' type="text/json">{
     "title": "The Ultra-Scale Playbook: Training LLMs on GPU Clusters",

src/index.html CHANGED Viewed

@@ -5,14 +5,86 @@
     <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://cdn.plot.ly/plotly-3.0.0.min.js" charset="utf-8"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta charset="utf8">
     <base target="_blank">
     <title>The Ultra-Scale Playbook: Training LLMs on GPU Clusters</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <d-front-matter>
         <script id='distill-front-matter' type="text/json">{
     "title": "The Ultra-Scale Playbook: Training LLMs on GPU Clusters",

     <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://cdn.plot.ly/plotly-3.0.0.min.js" charset="utf-8"></script>
+    <script src="https://unpkg.com/darkreader/darkreader.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta charset="utf8">
     <base target="_blank">
     <title>The Ultra-Scale Playbook: Training LLMs on GPU Clusters</title>
     <link rel="stylesheet" href="style.css">
+    <style>
+        .toggle-button {
+          position: fixed;
+          top: 20px;
+          left: 20px;
+          width: 40px;
+          height: 40px;
+          background-color: transparent;
+          border: none;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 1000;
+          outline: none;
+        }
+        .toggle-button svg {
+          width: 24px;
+          height: 24px;
+        }
+    </style>
 </head>
 <body>
+    <button id="darkModeToggle" class="toggle-button">
+        <!-- sun icon -->
+        <svg id="sunIcon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="12" cy="12" r="5"></circle>
+          <line x1="12" y1="1" x2="12" y2="3"></line>
+          <line x1="12" y1="21" x2="12" y2="23"></line>
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+          <line x1="1" y1="12" x2="3" y2="12"></line>
+          <line x1="21" y1="12" x2="23" y2="12"></line>
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+        </svg>
+        <!-- moon icon -->
+        <svg id="moonIcon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: none;">
+          <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
+        </svg>
+    </button>
+    <script>
+    // check localStorage to see if the user had a preference from before
+    let darkModeEnabled = localStorage.getItem('darkModeEnabled') === 'true';
+    const toggleButton = document.getElementById('darkModeToggle');
+    const sunIcon = document.getElementById('sunIcon');
+    const moonIcon = document.getElementById('moonIcon');
+    const updateDarkMode = () => {
+        if (darkModeEnabled) {
+        DarkReader.enable({ brightness: 100, contrast: 90, sepia: 10 });
+        sunIcon.style.display = 'none';
+        moonIcon.style.display = 'block';
+        } else {
+        DarkReader.disable();
+        sunIcon.style.display = 'block';
+        moonIcon.style.display = 'none';
+        }
+    };
+    // initialize dark mode based on the stored preference
+    document.addEventListener('DOMContentLoaded', updateDarkMode);
+    // toggle dark mode and update localStorage on button click
+    toggleButton.addEventListener('click', () => {
+        darkModeEnabled = !darkModeEnabled;
+        localStorage.setItem('darkModeEnabled', darkModeEnabled);
+        updateDarkMode();
+    });
+    </script>
     <d-front-matter>
         <script id='distill-front-matter' type="text/json">{
     "title": "The Ultra-Scale Playbook: Training LLMs on GPU Clusters",