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>