Merge branch 'main' into feat/vfolder-trash-bin

lablup · Feb 28, 2024 · 0b7394f · 0b7394f
2 parents 1523ad5 + 25f413d
commit 0b7394f
Show file tree

Hide file tree

Showing 112 changed files with 11,521 additions and 1,422 deletions.
diff --git a/index.html b/index.html
@@ -34,69 +34,81 @@
     };
     globalThis.packageVersion = "24.03.0-alpha.4";
     globalThis.buildNumber = "5862";
+
   </script>
   <!-- DO NOT CHANGE BELOW LINE -->
   <!-- REACT_BUNDLE_INJECTING FOR DEV-->
 </head>
 
 <body>
-  <div id="react-root">
-    <div class="splash">
-      <div class="splash-header">
-        <img src="manifest/backend.ai-text.svg" style="height:50px;padding:35px 20px;">
-      </div>
-      <div class="splash-information">
-        <ul>
-          <li>Backend.AI Web UI <span id="version-detail" class="detail"></span></li>
-          <li><span id="license-detail"></span></li>
-          <li><span id="mode-detail" class="detail"></span> <span id="build-detail" class="detail"></span></li>
-        </ul>
-        <ul>
-          <li>Powered by open-source software</li>
-          <li class="copyright">Copyright &copy; 2015-2023 Lablup Inc.</li>
-        </ul>
-      </div>
-      <div class="sk-folding-cube">
-        <div class="sk-cube1 sk-cube"></div>
-        <div class="sk-cube2 sk-cube"></div>
-        <div class="sk-cube4 sk-cube"></div>
-        <div class="sk-cube3 sk-cube"></div>
+  <script>
+    //To avoid flickering when first loading the page, we add a class to the body to indicate the theme.
+    const userPrefersDark = localStorage.getItem('backendaiwebui.settings.isDarkMode');
+    const systemPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    globalThis.isDarkMode = userPrefersDark === null || userPrefersDark === undefined ? systemPrefersDark : userPrefersDark === 'true';
+    if (globalThis.isDarkMode) {
+      document.body.classList.add('dark-theme');
+    }
+  </script>
+  <div>
+    <div id="react-root">
+      <div class="splash">
+        <div class="splash-header">
+          <!-- <img src="manifest/backend.ai-text.svg" style="height:50px;padding:35px 20px;"> -->
+          <div class="logo"></div>
+        </div>
+        <div class="splash-information">
+          <ul>
+            <li>Backend.AI Web UI <span id="version-detail" class="detail"></span></li>
+            <li><span id="license-detail"></span></li>
+            <li><span id="mode-detail" class="detail"></span> <span id="build-detail" class="detail"></span></li>
+          </ul>
+          <ul>
+            <li>Powered by open-source software</li>
+            <li class="copyright">Copyright &copy; 2015-2023 Lablup Inc.</li>
+          </ul>
+        </div>
+        <div class="sk-folding-cube">
+          <div class="sk-cube1 sk-cube"></div>
+          <div class="sk-cube2 sk-cube"></div>
+          <div class="sk-cube4 sk-cube"></div>
+          <div class="sk-cube3 sk-cube"></div>
+        </div>
+        <div id="loading-message" class="loading-message">Loading components...</div>
       </div>
-      <div id="loading-message" class="loading-message">Loading components...</div>
     </div>
-  </div>
-  <!-- <backend-ai-webui id="webui-shell" style="background-color:#222222;"> -->
+    <!-- <backend-ai-webui id="webui-shell" style="background-color:#222222;"> -->
 
-  <!-- </backend-ai-webui> -->
-  <noscript>
-    <p>Could not render Backend.AI Web UI. Check that JavaScript is enabled.</p>
-  </noscript>
-  <script src="./dist/components/backend-ai-webui.js" type="module"></script>
-  <script>
-    document.getElementById('version-detail').innerText = globalThis.packageVersion;
-    document.getElementById('build-detail').innerText = ' Build ' + globalThis.buildVersion;
-    document.getElementById('license-detail').innerText = '';
-    if (globalThis.isElectron) {
-      document.getElementById('mode-detail').innerText = 'App';
-    } else {
-      document.getElementById('mode-detail').innerText = 'WebServer';
-    }
-    if (globalThis.isIE) {
-      alert('Internet Explorer is not supported. Please visit with modern browsers.');
-      document.getElementById('loading-message').innerText = 'Not supported browser.';
-      document.getElementById('loading-message').style.color = 'red';
-    }
-    if (!['127.0.0.1', 'localhost'].includes(window.location.hostname) &&
-      'enableSW' in globalThis &&
-      globalThis.enableSW === true) {
-      // Service worker routine.
-      if ('serviceWorker' in navigator && globalThis.isElectron === false) {
-        window.addEventListener('load', () => {
-          navigator.serviceWorker.register('/sw.js');
-        });
+    <!-- </backend-ai-webui> -->
+    <noscript>
+      <p>Could not render Backend.AI Web UI. Check that JavaScript is enabled.</p>
+    </noscript>
+    <script src="./dist/components/backend-ai-webui.js" type="module"></script>
+    <script>
+      document.getElementById('version-detail').innerText = globalThis.packageVersion;
+      document.getElementById('build-detail').innerText = ' Build ' + globalThis.buildVersion;
+      document.getElementById('license-detail').innerText = '';
+      if (globalThis.isElectron) {
+        document.getElementById('mode-detail').innerText = 'App';
+      } else {
+        document.getElementById('mode-detail').innerText = 'WebServer';
       }
-    }
-  </script>
+      if (globalThis.isIE) {
+        alert('Internet Explorer is not supported. Please visit with modern browsers.');
+        document.getElementById('loading-message').innerText = 'Not supported browser.';
+        document.getElementById('loading-message').style.color = 'red';
+      }
+      if (!['127.0.0.1', 'localhost'].includes(window.location.hostname) &&
+        'enableSW' in globalThis &&
+        globalThis.enableSW === true) {
+        // Service worker routine.
+        if ('serviceWorker' in navigator && globalThis.isElectron === false) {
+          window.addEventListener('load', () => {
+            navigator.serviceWorker.register('/sw.js');
+          });
+        }
+      }
+    </script>
 </body>
 
 </html>
diff --git a/main.js b/main.js
@@ -14,7 +14,6 @@ if (isDev()) { // Dev mode from Makefile
   process.env.serveMode = 'prod'; // Prod OR debug
   debugMode = false;
 }
-process.env.liveDebugMode = false; // Special flag for live server debug.
 const url = require('url');
 const path = require('path');
 const toml = require('markty-toml');
@@ -340,14 +339,12 @@ function createWindow() {
     }
   });
   // and load the index.html of the app.
-  if (process.env.liveDebugMode === true) {
+  if (process.env.LIVE_DEBUG === '1') {
+    const endpoint = process.env.LIVE_DEBUG_ENDPOINT || 'http://127.0.0.1:9081';
+
     // Load HTML into new Window (dynamic serving for develop)
-    console.log("Running on live debug mode...");
-    mainWindow.loadURL(url.format({
-      pathname: '127.0.0.1:9081',
-      protocol: 'http',
-      slashes: true
-    }));
+    console.log(`Running on live debug(${endpoint}) mode...`);
+    mainWindow.loadURL(endpoint);
   } else {
     // Load HTML into new Window (file-based serving)
     nfs.readFile(path.join(es6Path, 'config.toml'), 'utf-8', (err, data) => {

diff --git a/manifest/backend.ai-brand-simple-bgdark.svg b/manifest/backend.ai-brand-simple-bgdark.svg
diff --git a/manifest/backend.ai-text-bgdark.svg b/manifest/backend.ai-text-bgdark.svg