speed up by loading pyodide on page load

Author: ngxson

examples/server/public/index.html.gz

@@ -3,6 +3,7 @@ import { useAppContext } from '../utils/app.context';
 import { OpenInNewTab, XCloseButton } from '../utils/common';
 import { CanvasType } from '../utils/types';
 import { PlayIcon, StopIcon } from '@heroicons/react/24/outline';
+import StorageUtils from '../utils/storage';
 
 const canInterrupt = typeof SharedArrayBuffer === 'function';
 
@@ -54,18 +55,26 @@ const interruptBuffer = canInterrupt
   ? new Uint8Array(new SharedArrayBuffer(1))
   : null;
 
+const startWorker = () => {
+  if (!worker) {
+    worker = new Worker(
+      URL.createObjectURL(new Blob([WORKER_CODE], { type: 'text/javascript' }))
+    );
+  }
+};
+
+if (StorageUtils.getConfig().pyIntepreterEnabled) {
+  startWorker();
+}
+
 const runCodeInWorker = (
   pyCode: string,
   callbackRunning: () => void
 ): {
   donePromise: Promise<string>;
   interrupt: () => void;
 } => {
-  if (!worker) {
-    worker = new Worker(
-      URL.createObjectURL(new Blob([WORKER_CODE], { type: 'text/javascript' }))
-    );
-  }
+  startWorker();
   const id = Math.random() * 1e8;
   const context = {};
   if (interruptBuffer) {

examples/server/webui/src/components/CanvasPyInterpreter.tsx

@@ -137,7 +137,7 @@ export default function ChatScreen() {
         </div>
       </div>
       {canvasData && (
-        <div className="w-full sticky top-[8em] h-[calc(100vh-9em)]">
+        <div className="w-full sticky top-[7em] h-[calc(100vh-9em)]">
           <CanvasPyInterpreter />
         </div>
       )}