playground: most of the logic for both frontend and backend is implemented, some bugs remain

frontend/tools/PlaygroundDialogContent.vue

@@ -1,15 +1,20 @@
 <script setup lang="ts">
 import {setupMonaco} from "./monaco.ts";
 import {VueMonacoEditor} from '@guolao/vue-monaco-editor'
-import {ref, shallowRef} from "vue";
+import {nextTick, ref, shallowRef} from "vue";
 import Loading from "../misc/Loading.vue";
-import {asyncRun, pyodideWorker, resetState} from "./pyodide-worker-api.ts";
-import {mdiCircleOpacity, mdiClose, mdiLockReset, mdiPlay, mdiReload, mdiRun} from "@mdi/js";
+import {newPyodideWorker} from "./pyodide-worker-api.ts";
+import {mdiCircleOpacity, mdiClose, mdiPlay, mdiReload, mdiShare} from "@mdi/js";
 import {VBtn, VCard, VCardText, VSlider, VSpacer, VToolbar, VToolbarTitle} from "vuetify/components";
 import SvgIcon from '@jamescoyle/vue-icon';
+import {version as pyodideVersion} from "pyodide";
+import {gzip} from 'pako';
+import {b66Encode} from "./b66.ts";
+import {Base64} from 'js-base64'; // More compatible with binary data from python...
+import {NetworkUpdateEvent, NetworkUpdateEventModel} from "../misc/network.ts";
 
 const props = defineProps<{ initialCode: string }>();
-const emit = defineEmits<{ (e: 'close'): void }>()
+const emit = defineEmits<{ close: [], updateModel: [NetworkUpdateEvent] }>()
 
 // ============ LOAD MONACO EDITOR ============
 setupMonaco() // Must be called before using the editor
@@ -20,12 +25,12 @@ const outputText = ref(``);
 function output(text: string) {
   outputText.value += text; // Append to output
   console.log(text); // Also log to console
-  setTimeout(() => { // Scroll to bottom? TODO: Test
-    const consoleElement = document.querySelector('.playground-console pre');
+  nextTick(() => { // Scroll to bottom
+    const consoleElement = document.querySelector('.playground-console');
     if (consoleElement) {
       consoleElement.scrollTop = consoleElement.scrollHeight;
     }
-  }, 0);
+  })
 }
 
 const MONACO_EDITOR_OPTIONS = {
@@ -40,45 +45,120 @@ const handleMount = (editorInstance: typeof VueMonacoEditor) => (editor.value =
 const opacity = ref(0.9); // Opacity for the editor
 
 // ============ LOAD PYODIDE (ASYNC) ============
-
+let pyodideWorker: ReturnType<typeof newPyodideWorker> | null = (import.meta as any).hot?.data?.pyodideWorker || null;
 const running = ref(true);
 
 async function setupPyodide() {
+  running.value = true;
   if (opacity.value == 0.0) opacity.value = 0.9; // User doesn't know how to show code again, reset after reopening
-  let firstTime = pyodideWorker === null;
-  if (firstTime) {
-    resetState();
-    output("Loading packages...\n");
-    await asyncRun(`import micropip, asyncio
-  micropip.set_index_urls(["https://yeicor.github.io/OCP.wasm", "https://pypi.org/simple"])
-  await (micropip.install("lib3mf"))
-  micropip.add_mock_package("py-lib3mf", "2.4.1", modules={"py_lib3mf": '''from lib3mf import *'''})
-  await (micropip.install(["build123d"]))`, output);
-    if (props.initialCode != "") {
-      await runCode();
-      opacity.value = 0.0; // Hide editor after running initial code
-    } else {
-      output("Ready for custom code.\n");
-    }
+  if (pyodideWorker === null) {
+    output("Creating new Pyodide worker...\n");
+    pyodideWorker = newPyodideWorker({
+      indexURL: `https://cdn.jsdelivr.net/pyodide/v${pyodideVersion}/full/`, // FIXME: Local deployment?
+      packages: ["micropip", "sqlite3"], // Faster load if done here
+    });
+    if ((import.meta as any).hot) (import.meta as any).hot.data.pyodideWorker = pyodideWorker
   } else {
     output("Reusing existing Pyodide instance...\n");
   }
+  output("Preloading packages...\n");
+  await pyodideWorker.asyncRun(`import micropip, asyncio
+micropip.set_index_urls(["https://yeicor.github.io/OCP.wasm", "https://pypi.org/simple"])
+await (micropip.install("lib3mf"))
+micropip.add_mock_package("py-lib3mf", "2.4.1", modules={"py_lib3mf": '''from lib3mf import *'''})
+await (micropip.install(["https://files.pythonhosted.org/packages/67/25/80be117f39ff5652a4fdbd761b061123c5425e379f4b0a5ece4353215d86/yacv_server-0.10.0a4-py3-none-any.whl"]))
+from yacv_server import *`, output, output); // Also import yacv_server here for faster custom code execution
   running.value = false; // Indicate that Pyodide is ready
+  output("Pyodide worker initialized.\n");
 }
 
-setupPyodide()
-
 async function runCode() {
+  if (pyodideWorker === null) {
+    output("Pyodide worker is not initialized. Please wait...\n");
+    return;
+  }
+  if (running.value) {
+    output("Pyodide is already running. Please wait...\n");
+    return;
+  }
   output("Running code...\n");
   try {
     running.value = true;
-    await asyncRun(code.value, output);
+    await pyodideWorker.asyncRun(code.value, output, (msg: string) => {
+      // Detect models printed to console (since http server is not available in pyodide)
+      if (msg.startsWith(yacvServerModelPrefix)) {
+        const modelData = msg.slice(yacvServerModelPrefix.length);
+        onModelData(modelData);
+      } else {
+        output(msg); // Print other messages directly
+      }
+    });
   } catch (e) {
     output(`Error running initial code: ${e}\n`);
   } finally {
     running.value = false; // Indicate that Pyodide is ready
   }
 }
+
+const yacvServerModelPrefix = "yacv_server://model/";
+
+function onModelData(modelData: string) {
+  output(`Model data detected... ${modelData.length}B\n`);
+  // Decode the model data and emit the event for the interface to handle
+  // - Start by finding the end of the initial json object by looking for brackets.
+  let i = 0;
+  let openBrackets = 0;
+  for (; i < modelData.length; i++) {
+    if (modelData[i] === '{') openBrackets++;
+    else if (modelData[i] === '}') openBrackets--;
+    if (openBrackets === 0) break; // Found the end of the JSON object
+  }
+  if (openBrackets !== 0) throw `Error: Invalid model data received: ${modelData}\n`
+  const jsonData = modelData.slice(0, i + 1); // Extract the JSON part and parse it into the proper class
+  let modelMetadataRaw = JSON.parse(jsonData);
+  const modelMetadata: any = new NetworkUpdateEventModel(modelMetadataRaw.name, "Wait for it...", modelMetadataRaw.hash, modelMetadataRaw.is_remove)
+  // console.debug(`Model metadata:`, modelMetadata);
+  output(`Model metadata: ${JSON.stringify(modelMetadata)}\n`);
+  // - Now decode the rest of the model data which is a single base64 encoded glb file (or an empty string)
+  if (!modelMetadata.isRemove) {
+    const binaryData = Base64.toUint8Array(modelData.slice(i + 1)); // Extract the base64 part
+    console.assert(binaryData.slice(0, 4).toString() == "103,108,84,70", // Ugly...
+        "Invalid GLTF binary data received: " + binaryData.slice(0, 4).toString());
+    // - Create a Blob from the binary data to be used as a URL
+    const blob = new Blob([binaryData], {type: 'model/gltf-binary'});
+    modelMetadata.url = URL.createObjectURL(blob); // Set the hacked URL in the model metadata
+  }
+  // - Emit the event with the model metadata and URL
+  let networkUpdateEvent = new NetworkUpdateEvent([modelMetadata], () => {
+  });
+  emit('updateModel', networkUpdateEvent);
+}
+
+function resetWorker() {
+  code.value = props.initialCode; // Reset code to initial state
+  if (pyodideWorker) {
+    pyodideWorker.terminate(); // Terminate existing worker
+    pyodideWorker = null; // Reset worker reference
+  }
+  outputText.value = ``; // Clear output text
+  setupPyodide(); // Reinitialize Pyodide
+}
+
+function shareLink() {
+  const baseUrl = window.location
+  const urlParams = new URLSearchParams(baseUrl.search); // Keep all previous URL parameters
+  urlParams.set('code', b66Encode(gzip(code.value, {level: 9}))); // Compress and encode the code
+  const shareUrl = `${baseUrl.origin}${baseUrl.pathname}?${urlParams.toString()}`;
+  output(`Share link ready: ${shareUrl}\n`)
+  navigator.clipboard.writeText(shareUrl)
+      .then(() => output("Link copied to clipboard!\n"))
+      .catch(err => output(`Failed to copy link: ${err}\n`));
+}
+
+const reused = (import.meta as any).hot?.data?.pyodideWorker !== undefined;
+setupPyodide().then(() => {
+  if (props.initialCode != "" && !reused) runCode();
+});
 </script>
 
 <template>
@@ -94,7 +174,7 @@ async function runCode() {
 
       <!-- TODO: snapshots... -->
 
-      <v-btn icon @click="resetState()">
+      <v-btn icon @click="resetWorker()">
         <svg-icon :path="mdiReload" type="mdi"/>
       </v-btn>
 
@@ -102,6 +182,10 @@ async function runCode() {
         <svg-icon :path="mdiPlay" type="mdi"/>
       </v-btn>
 
+      <v-btn icon @click="shareLink()">
+        <svg-icon :path="mdiShare" type="mdi"/>
+      </v-btn>
+
       <v-btn icon @click="emit('close')">
         <svg-icon :path="mdiClose" type="mdi"/>
       </v-btn>
@@ -110,13 +194,8 @@ async function runCode() {
       <!-- Only show content if opacity is greater than 0 -->
       <div class="playground-container">
         <div class="playground-editor">
-          <VueMonacoEditor
-              v-model:value="code"
-              :theme="editorTheme"
-              :options="MONACO_EDITOR_OPTIONS"
-              language="python"
-              @mount="handleMount"
-          />
+          <VueMonacoEditor v-model:value="code" :theme="editorTheme" :options="MONACO_EDITOR_OPTIONS"
+                           language="python" @mount="handleMount"/>
         </div>
         <div class="playground-console">
           <h3>Console Output</h3>

frontend/tools/Tools.vue

@@ -21,6 +21,8 @@ import type ModelViewerWrapper from "../viewer/ModelViewerWrapper.vue";
 import {defineAsyncComponent, ref, type Ref} from "vue";
 import type {SelectionInfo} from "./selection";
 import {settings} from "../misc/settings.ts";
+import type {NetworkUpdateEvent} from "../misc/network.ts";
+import IfNotSmallBuild from "../misc/IfNotSmallBuild.vue";
 
 const SelectionComponent = defineAsyncComponent({
   loader: () => import("./Selection.vue"),
@@ -43,7 +45,7 @@ const PlaygroundDialogContent = defineAsyncComponent({
 
 
 let props = defineProps<{ viewer: InstanceType<typeof ModelViewerWrapper> | null }>();
-const emit = defineEmits<{ findModel: [string] }>()
+const emit = defineEmits<{ findModel: [string], updateModel: [NetworkUpdateEvent] }>()
 
 const sett = ref<any | null>(null);
 const showPlaygroundDialog = ref(false);
@@ -162,14 +164,17 @@ window.addEventListener('keydown', (event) => {
   <h5>Extras</h5>
   <v-dialog v-model="showPlaygroundDialog" persistent :scrim="false" attach="body">
     <template v-slot:activator="{ props }">
-      <v-btn icon v-bind="props" style="width: 100%">
+      <v-btn v-bind="props" style="width: 100%">
         <v-tooltip activator="parent">Open a python editor and build models directly in the browser!</v-tooltip>
         <svg-icon :path="mdiScriptTextPlay" type="mdi"/>
         &nbsp;Sandbox
       </v-btn>
     </template>
     <template v-slot:default="{ isActive }">
-      <playground-dialog-content v-if="sett != null" :initial-code="sett.value.code" @close="isActive.value = false"/>
+      <if-not-small-build>
+        <playground-dialog-content v-if="sett != null" :initial-code="sett.code" @close="isActive.value = false"
+                                   @update-model="(event: NetworkUpdateEvent) => emit('updateModel', event)"/>
+      </if-not-small-build>
     </template>
   </v-dialog>
   <v-btn icon @click="downloadSceneGlb">

frontend/tools/b66.ts

@@ -0,0 +1,54 @@
+// B66 encoding and decoding functions for compact url query parameter values. https://gist.github.com/danneu/6755394
+const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.-_~";
+
+export function b66Encode(data: Uint8Array): string {
+    let result = "";
+    let bits = 0;
+    let value = 0;
+
+    for (let byte of data) {
+        value = (value << 8) | byte;
+        bits += 8;
+
+        while (bits >= 6) {
+            bits -= 6;
+            result += alphabet[(value >> bits) & 0x3F];
+        }
+    }
+
+    if (bits > 0) {
+        result += alphabet[(value << (6 - bits)) & 0x3F];
+    }
+
+    return result;
+}
+
+export function b66Decode(encoded: string): Uint8Array {
+    let result = [];
+    let bits = 0;
+    let value = 0;
+
+    for (let char of encoded) {
+        const index = alphabet.indexOf(char);
+        if (index === -1) {
+            throw new Error(`Invalid character '${char}' in B66 encoded string.`);
+        }
+
+        value = (value << 6) | index;
+        bits += 6;
+
+        while (bits >= 8) {
+            bits -= 8;
+            result.push((value >> bits) & 0xFF);
+        }
+    }
+
+    if (bits > 0) {
+        // If there are leftover bits, they should not be present in a valid B66 encoding.
+        if (value << (8 - bits)) {
+            throw new Error("Invalid B66 encoding: leftover bits.");
+        }
+    }
+
+    return new Uint8Array(result);
+}

frontend/tools/pyodide-worker-api.ts

@@ -1,44 +1,31 @@
-// Each message needs a unique id to identify the response. In a real example,
-// we might use a real uuid package
-let lastId = 1;
+import type {loadPyodide} from "pyodide";
 
-function getId() {
-    return lastId++;
+/** Simple API for the Pyodide worker. */
+export function newPyodideWorker(initOpts: Parameters<typeof loadPyodide>[0]) {
+    let worker = new Worker(new URL('./pyodide-worker.ts', import.meta.url), {type: "module"});
+    worker.postMessage(initOpts);
+    return {
+        asyncRun: (code: String, stdout: (msg: string) => void, stderr: (msg: string) => void) => new Promise((resolve, reject) => {
+            worker.addEventListener("message", function listener(event) {
+                if (event.data?.stdout) {
+                    stdout(event.data.stdout);
+                    return;
+                }
+                if (event.data?.stderr) {
+                    stderr(event.data.stderr);
+                    return;
+                }
+                // Result or error.
+                worker.removeEventListener("message", listener);
+                if (event.data?.error) {
+                    reject(event.data.error);
+                } else {
+                    resolve(event.data?.result);
+                }
+            });
+            worker.postMessage(code);
+        }),
+        terminate: () => worker.terminate()
+    }
 }
 
-// Add an id to msg, send it to worker, then wait for a response with the same id.
-// When we get such a response, use it to resolve the promise.
-function requestResponse(worker: Worker, code: String, output: (msg: string) => void) {
-    return new Promise((resolve) => {
-        const idWorker = getId();
-        worker.addEventListener("message", function listener(event) {
-            if (event.data?.stdout) {
-                output(event.data.stdout + "\n");
-                return;
-            }
-            if (event.data?.stderr) {
-                output(event.data.stderr + "\n");
-                return;
-            }
-            if (event.data?.id !== idWorker) return;
-            // This listener is done so remove it.
-            worker.removeEventListener("message", listener);
-            // Filter the id out of the result
-            const {id, ...rest} = event.data;
-            resolve(rest);
-        });
-        worker.postMessage({id: idWorker, code});
-    });
-}
-
-export function asyncRun(code: String, output: (msg: string) => void) {
-    return requestResponse(pyodideWorker as Worker, code, output);
-}
-
-export function resetState() {
-    // Reset the worker state by terminating it and creating a new one.
-    if (pyodideWorker) pyodideWorker.terminate();
-    pyodideWorker = new Worker(new URL('./pyodide-worker.ts', import.meta.url), {type: "module"});
-}
-
-export let pyodideWorker: Worker | null = null;

frontend/tools/pyodide-worker.ts

@@ -1,27 +1,33 @@
-import {loadPyodide, version} from "pyodide";
+import {loadPyodide, type PyodideInterface} from "pyodide";
 
-let pyodideReadyPromise = loadPyodide({
-    indexURL: `https://cdn.jsdelivr.net/pyodide/v${version}/full/`, // FIXME: Local deployment?
-    packages: ["micropip", "sqlite3"], // Preloaded faster here...
-    stdout: (msg) => self.postMessage({stdout: msg}),
-    stderr: (msg) => self.postMessage({stderr: msg}),
+let myLoadPyodide = (initOpts: Parameters<typeof loadPyodide>[0]) => loadPyodide({
+    ...initOpts,
+    stdout: (msg) => self.postMessage({stdout: msg + "\n"}), // Add newline for better readability
+    stderr: (msg) => self.postMessage({stderr: msg + "\n"}), // Add newline for better readability
     stdin: () => {
         console.warn("Input requested by Python code, but stdin is not supported in this playground.");
         return "";
     },
 });
 
-self.onmessage = async (event) => {
+let pyodideReadyPromise: Promise<PyodideInterface> | null = null;
+
+self.onmessage = async (event: MessageEvent<any>) => {
+    if (!pyodideReadyPromise) { // First message is always the init message
+        // If we haven't loaded Pyodide yet, do so now.
+        // This is a singleton, so we only load it once.
+        pyodideReadyPromise = myLoadPyodide(event.data as Parameters<typeof loadPyodide>[0]);
+        return;
+    }
+    // All other messages are code to run.
+    let code = event.data as string;
     // make sure loading is done
     const pyodide = await pyodideReadyPromise;
-    const {id, code} = event.data;
     // Now load any packages we need, run the code, and send the result back.
     await pyodide.loadPackagesFromImports(code);
     try {
-        // Execute the python code in this context
-        const result = await pyodide.runPythonAsync(code);
-        self.postMessage({result, id});
+        self.postMessage({result: await pyodide.runPythonAsync(code)});
     } catch (error: any) {
-        self.postMessage({error: error.message, id});
+        self.postMessage({error: error.message});
     }
 };