Fix code lines in dev version

Quansight · Aug 15, 2024 · 706cdbb · 706cdbb
1 parent d6202ad
commit 706cdbb
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 2 deletions.
diff --git a/content/demo-dev.html b/content/demo-dev.html
@@ -0,0 +1,127 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>AI Assurance Portal</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
+
+    <style>
+      .post {
+        border: 1px solid #ccc;
+        margin: 12px;
+        border-radius: 4px;
+        display: grid;
+        grid-auto-flow: column;
+        grid-template-columns: 60px 1fr;
+        padding: 8px
+      }
+      .user {
+        padding: 10px;
+        border-radius: 50px;
+        width: 50px;
+        height: 50px;
+        background: #ccc;
+        align-items: center;
+        display: flex;
+        place-content: center;
+      }
+      .content {
+        padding: 4px
+      }
+      code[data-run] {
+        white-space: pre-wrap;
+      }
+      #loader {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div class="post container">
+      <div class="user"><i class="bi bi-person-fill"></i></div>
+      <div class="content">
+        <p>I'm testing out this simple logistic regression model but it does not work, how can I fix that?</p>
+        <code data-run>
+          from sklearn import datasets
+          from sklearn.linear_model import LogisticRegression
+
+          X, y = datasets.load_digits(return_X_y=True)
+          y = (y > 4).astype(int)
+
+          model = LogisticRegression(penalty="l1", tol=0.01)
+          model.fit(X, y)
+        </code>
+      </div>
+    </div>
+
+    <div class="post container">
+      <div class="user"><i class="bi bi-person-fill"></i></div>
+      <div class="content">
+        <p>You need to change solver, by passing an argument like this <code>solver="saga"</code>, see below:</p>
+        <code data-run>
+          from sklearn import datasets
+          from sklearn.linear_model import LogisticRegression
+
+          X, y = datasets.load_digits(return_X_y=True)
+          y = (y > 4).astype(int)
+
+          model = LogisticRegression(penalty="l1", tol=0.01, solver="saga")
+          model.fit(X, y)
+        </code>
+      </div>
+    </div>
+
+    <div id="loader"></div>
+
+    <script>
+    const styles = `
+    .jp-CodeConsole-banner {
+      display: none;
+    }
+    `;
+    var styleSheet = document.createElement("style");
+    const loader = document.getElementById('loader');
+    styleSheet.textContent = styles;
+
+    for (const codeEl of document.querySelectorAll('code[data-run]')) {
+      const iframe = document.createElement('iframe');
+      const code = codeEl.textContent;
+      // find indent
+      let indent = 0;
+      for (const line of code.split('\n')) {
+        if (line.length === 0) {
+          continue
+        }
+        while (line.length > indent && line.substring(indent, indent + 1) === ' ') {
+          indent += 1;
+        }
+        break;
+      }
+      let cleanCode = '';
+      let blocks = [];
+      for (const line of code.split('\n')) {
+        if (cleanCode === '' && line.length === 0) {
+          continue
+        }
+        cleanCode += line.substring(indent) + '\n';
+      }
+      codeEl.textContent = cleanCode;
+      iframe.src = `https://quansight.github.io/jupyterlite-demo/repl/index.html?kernel=python&toolbar=1&code=${encodeURIComponent(cleanCode)}`;
+      iframe.style.width = '100%';
+      iframe.style.height = '300px';
+      iframe.onload = () => {
+        if (iframe.contentDocument) {
+          iframe.contentDocument.head.appendChild(styleSheet);
+        }
+        codeEl.replaceWith(iframe);
+      }
+      loader.appendChild(iframe);
+    }
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+  </body>
+</html>
+
diff --git a/content/demo.html b/content/demo.html
@@ -101,14 +101,16 @@
         break;
       }
       let cleanCode = '';
+      let codeLines = '';
       for (const line of code.split('\n')) {
         if (cleanCode === '' && line.length === 0) {
           continue
         }
         cleanCode += line.substring(indent) + '\n';
+        codeLines += '&code=' + line.substring(indent);
       }
       codeEl.textContent = cleanCode;
-      iframe.src = `https://quansight.github.io/jupyterlite-demo/repl/index.html?kernel=python&toolbar=1&code=${cleanCode}`;
+      iframe.src = `https://quansight.github.io/jupyterlite-demo/repl/index.html?kernel=python&toolbar=1&${codeLines}`;
       iframe.style.width = '100%';
       iframe.style.height = '300px';
       iframe.onload = () => {

diff --git a/repl/jupyter-lite.json b/repl/jupyter-lite.json
@@ -6,7 +6,9 @@
         "@jupyterlab/drawio-extension",
         "jupyterlab-kernel-spy",
         "jupyterlab-tour",
-        "@jupyterlite/application-extension:logo"
+        "@jupyterlite/application-extension:logo",
+        "jupyterlab-nebari-mode:logo",
+        "@jupyter-notebook/lab-extension:interface-switcher"
       ]
     }
 }