munchboka-edutools 0.1.0__py3-none-any.whl

munchboka_edutools/static/js/interactiveCode/turtleCode.js

@@ -0,0 +1,203 @@
+function generateUUID() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+        const r = (Math.random() * 16) | 0;
+        const v = c === 'x' ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+    });
+}
+
+
+class TurtleCode {
+    /**
+     * @param {string} containerId - ID of an existing <div> that will hold this environment.
+     * @param {string} [initialCode=""] - Initial Python code to display in the editor.
+     * @param {Object} [cmOptions={}] - Additional CodeMirror options to merge in.
+     */
+    constructor(containerId, initialCode = "", cmOptions = {}) {
+        this.containerId = containerId;
+        this.container = document.getElementById(containerId);
+        if (!this.container) {
+            throw new Error(`Container with id="${containerId}" not found.`);
+        }
+        this.initialCode = initialCode;
+        this.cmOptions = cmOptions;
+    
+        this.uniqueSuffix = generateUUID(); // to avoid ID collisions
+    
+        this.createUI();
+      
+        // Initialize your existing CodeEditor on the created <textarea>
+        this.editor = new CodeEditor(this.textAreaEl.id);
+
+        // Add a small delay before setting the initial code
+        setTimeout(() => {
+            this.editor.setValue(this.initialCode);
+        }, 300); // 100ms delay should be enough
+        // this.editor.setValue(this.initialCode);
+
+        this.runButtonEl.addEventListener("click", () => this.runCode());
+    }
+  
+    createUI() {
+        // Clear any existing content in the container
+        this.container.innerHTML = "";
+
+        // A flex container to hold the editor (left) and the turtle div (right)
+        const editorAndCanvasContainer = document.createElement("div");
+
+        editorAndCanvasContainer.classList.add("turtle-env"); // for styling
+
+        editorAndCanvasContainer.style.display = "flex";
+        editorAndCanvasContainer.style.flexWrap = "wrap"; // in case of narrow screens
+        editorAndCanvasContainer.style.width = "100%";
+
+        // --- LEFT COLUMN: Editor, Run Button, Output ---
+        const editorContainer = document.createElement("div");
+
+        editorContainer.classList.add("turtle-left"); // for styling
+
+        editorContainer.style.flex = "1";          // Take 50% of available width
+        editorContainer.style.minWidth = "100px";  // Reasonable min width
+        editorContainer.style.display = "flex";
+        editorContainer.style.flexDirection = "column";
+
+        // Textarea for CodeMirror
+        this.textAreaEl = document.createElement("textarea");
+        this.textAreaEl.id = `skulpt-editor-${this.uniqueSuffix}`;
+        // Hide the raw <textarea> so CodeMirror can replace it
+        this.textAreaEl.style.display = "none";
+        editorContainer.appendChild(this.textAreaEl);
+
+        // Run Button
+        this.runButtonEl = document.createElement("button");
+        this.runButtonEl.className = "button button-run";
+        this.runButtonEl.id = `skulpt-run-btn-${this.uniqueSuffix}`;
+        this.runButtonEl.textContent = "Kjør kode";
+        this.runButtonEl.style.margin = "1em 0";
+        editorContainer.appendChild(this.runButtonEl);
+
+        // Output <pre>
+        this.outputEl = document.createElement("pre");
+        this.outputEl.className = "pythonoutput";
+        this.outputEl.id = `skulpt-output-${this.uniqueSuffix}`;
+        this.outputEl.style.border = "1px solid #ccc";
+        this.outputEl.style.padding = "8px";
+        this.outputEl.style.minHeight = "2em";
+        this.outputEl.style.whiteSpace = "pre-wrap";
+        editorContainer.appendChild(this.outputEl);
+
+        editorAndCanvasContainer.appendChild(editorContainer);
+
+        // --- RIGHT COLUMN: Turtle Div ---
+        const canvasContainer = document.createElement("div");
+
+        // canvasContainer.classList.add("turtle-right"); // for styling
+
+        canvasContainer.style.flex = "1";          // Take the other 50%
+        canvasContainer.style.minWidth = "350px";  // Reasonable min width
+        canvasContainer.style.display = "flex";
+        canvasContainer.style.flexDirection = "column";
+        canvasContainer.style.alignItems = "center";
+        canvasContainer.style.justifyContent = "center";
+
+        // Turtle div
+        this.canvasEl = document.createElement("div");
+        this.canvasEl.id = `skulpt-canvas-${this.uniqueSuffix}`;
+        this.canvasEl.style.border = "1px solid #ccc";
+        this.canvasEl.style.width = "95%";   // Adjust as needed
+        this.canvasEl.style.height = "400px"; 
+        this.canvasEl.style.marginTop = "0em";
+        this.canvasEl.style.boxSizing = "border-box";
+        canvasContainer.appendChild(this.canvasEl);
+
+        editorAndCanvasContainer.appendChild(canvasContainer);
+
+        // Finally, append the flex container into the main container
+        this.container.appendChild(editorAndCanvasContainer);
+    }
+  
+    runCode() {
+        let userCode = this.editor.getValue();
+        this.outputEl.innerHTML = ""; // clear output
+
+
+        const mode = document.documentElement.getAttribute("data-mode");
+        // default to black
+        let forcedColor = "black";
+        if (mode === "dark") {
+            forcedColor = "white";
+        }
+        else if (mode === "light") {
+            forcedColor = "black";
+        }
+        else if (mode === "auto") {
+            const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
+            forcedColor = prefersDarkScheme ? "white" : "black";
+        }
+
+        console.log("Mode", mode);
+
+
+        // Safely prepend a snippet that ensures turtle is white
+        // We also do a basic check to ensure turtle is imported before coloring
+        // (some users might not have "import turtle" at all).
+        // "import turtle" will just re-import gracefully if the user already had it.
+        const snippet = `
+try:
+    import turtle
+    turtle.color("${forcedColor}")
+    screen = turtle.Screen()
+
+    # screen.setup(width=300, height=300)
+
+    # Set a coordinate system so the center of the visible area is (0,0).
+    # For example, left = -200, right = 200, bottom = -150, top = 150
+    # screen.setworldcoordinates(-200, -150, 200, 150)
+except:
+    pass
+
+`;
+        userCode = snippet + userCode;
+  
+        // Output function for Python's print
+        const outf = (text) => {
+            this.outputEl.innerHTML += text;
+        };
+  
+        // Helper for Skulpt to read built-in libs
+        const builtinRead = (filename) => {
+            if (!Sk.builtinFiles || !Sk.builtinFiles["files"][filename]) {
+                throw new Error("File not found: " + filename);
+            }
+            return Sk.builtinFiles["files"][filename];
+        };
+  
+        // Configure Skulpt
+        Sk.pre = this.outputEl.id;
+        Sk.configure({
+            output: outf,
+            read: builtinRead,
+            python3: true,
+        });
+  
+        // Point turtle to our <div>
+        (Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = this.canvasEl.id;
+  
+        // Asynchronously run the code
+        Sk.misceval.asyncToPromise(() => {
+            return Sk.importMainWithBody("<stdin>", false, userCode, true);
+        }).then(
+            () => {
+                // success
+            },
+            (err) => {
+                // error
+                this.outputEl.innerHTML = err.toString();
+            }
+        );
+    }
+}
+
+function makeTurtleCode(containerId, initialCode = "", cmOptions = {}) {
+    return new TurtleCode(containerId, initialCode, cmOptions);
+}

munchboka_edutools/static/js/interactiveCode/workerManager.js

@@ -0,0 +1,353 @@
+// workerManager.js
+
+class WorkerManager {
+    static instance = null;
+
+    static getInstance(preloadPackages = null) {
+        if (!WorkerManager.instance) {
+            // Default PYODIDE packages (micropip is needed for custom packages)
+            const defaultPreloadPackages = ['matplotlib', 'numpy', 'scipy', 'sympy', 'micropip'];
+            const combinedPreloadPackages = Array.from(new Set(preloadPackages ? [...defaultPreloadPackages, ...preloadPackages] : defaultPreloadPackages));
+            WorkerManager.instance = new WorkerManager(combinedPreloadPackages);
+            
+            // Trigger warm-up after initialization
+            setTimeout(() => {
+                WorkerManager.instance.warmUpPyodide().catch(err => {
+                    console.warn("Pyodide warm-up failed:", err);
+                });
+            }, 1000); // Small delay to let the page finish loading
+
+
+
+        } else if (preloadPackages) {
+             // Only load packages that are NOT already loaded.
+            const packagesToLoad = preloadPackages.filter(pkg => !WorkerManager.instance.loadedPackages.has(pkg));
+            const combinedPreloadPackages = Array.from(new Set(['matplotlib', 'numpy', 'scipy', 'sympy', 'micropip', ...packagesToLoad]));
+            if (combinedPreloadPackages.length > 0) {
+                WorkerManager.instance.loadPackages(combinedPreloadPackages);
+            }
+        }
+        return WorkerManager.instance;
+    }
+
+    constructor(preloadPackages = []) { // Corrected default
+        if (WorkerManager.instance) {
+            return WorkerManager.instance;
+        }
+
+        this.worker = null;
+        this.callbacks = {};
+        this.preloadPackages = preloadPackages;
+        this.loadedPackages = new Set();
+        this.packageLoadPromises = {};
+        console.log("Preload packages in WorkerManager:", this.preloadPackages);
+
+        this.workerReadyPromise = new Promise((resolve, reject) => {
+            this.workerReadyResolve = resolve;
+            this.workerReadyReject = reject;
+        });
+
+        this.initWorker();
+
+        WorkerManager.instance = this;
+
+
+    }
+
+    initWorker() {
+        const workerScript = `
+importScripts('https://cdn.jsdelivr.net/pyodide/v0.26.2/full/pyodide.js');
+
+let pyodideReadyPromise = loadPyodide();
+let initialGlobals = new Set();
+
+async function resetPyodide(pyodide, initialGlobals) {
+    const currentGlobals = new Set(pyodide.globals.keys());
+    const globalsToClear = Array.from(currentGlobals).filter(x => !initialGlobals.has(x));
+    for (const key of globalsToClear) {
+        pyodide.globals.delete(key);
+    }
+    console.log("Globals cleared:", globalsToClear);
+}
+
+// Helper function to install packages via micropip
+async function installPackages(pyodide, packages) {
+    if (packages.length > 0) {
+        await pyodide.loadPackage("micropip"); // Load micropip
+        const micropip = pyodide.pyimport("micropip");
+        await micropip.install(packages);
+    }
+}
+
+onmessage = async (event) => {
+    const messageId = event.data.messageId;
+
+    if (event.data.type === 'init') {
+        const { preloadPackages } = event.data; // Receive preloadPackages
+        const pyodide = await pyodideReadyPromise;
+        initialGlobals = new Set(pyodide.globals.keys());
+
+        // Separate Pyodide packages from PyPI packages
+        const pyodidePackages = preloadPackages.filter(pkg => ['matplotlib', 'numpy', 'scipy', 'sympy', 'micropip'].includes(pkg));
+        const pypiPackages = preloadPackages.filter(pkg => !['matplotlib', 'numpy', 'scipy', 'sympy', 'micropip'].includes(pkg));
+
+        // Load Pyodide packages
+        if (pyodidePackages.length > 0) {
+            await pyodide.loadPackage(pyodidePackages);
+        }
+
+        // Install PyPI packages using micropip
+        await installPackages(pyodide, pypiPackages);
+
+        postMessage(JSON.stringify({ type: 'initReady' })); // Send AFTER preloading
+    }
+
+    if (event.data.type === 'runCode') {
+        const { code } = event.data;
+        try {
+            const pyodide = await pyodideReadyPromise;
+            await resetPyodide(pyodide, initialGlobals);
+
+            // Prepare the Python code
+            const pyCode = \`
+import sys
+import json
+import io
+import base64
+from js import postMessage
+import matplotlib
+matplotlib.use('Agg')
+import matplotlib.pyplot as plt
+
+class PyConsole:
+    def __init__(self, messageId):
+        self.messageId = messageId
+        self.buffer = ""
+
+    def write(self, msg):
+        self.buffer += msg
+        # Flush immediately for any output
+        self.flush()
+
+    def flush(self):
+        if self.buffer:
+            postMessage(json.dumps({'type': 'stdout', 'msg': self.buffer, 'messageId': self.messageId}))
+            self.buffer = ""
+
+sys.stdout = PyConsole("\${messageId}")
+sys.stderr = PyConsole("\${messageId}")
+
+# Override plt.show()
+def show_override(messageId):
+    buf = io.BytesIO()
+    plt.savefig(buf, format='png')
+    fig = plt.gcf()
+    width_in = fig.get_figwidth()
+    height_in = fig.get_figheight()
+    dpi = fig.get_dpi()
+    width_px = int(width_in * dpi)
+    height_px = int(height_in * dpi)
+    buf.seek(0)
+    image_base64 = base64.b64encode(buf.read()).decode('utf-8')
+    postMessage(json.dumps({
+        'type': 'plot',
+        'data': image_base64,
+        'messageId': messageId,
+        'width': width_px,
+        'height': height_px
+    }))
+    plt.clf()
+    # Add a newline after the plot
+    sys.stdout.write('\\\\\\\\n')
+    sys.stdout.write('\\\\\\\\n')
+    sys.stdout.flush()
+
+plt.show = lambda: show_override("\${messageId}")
+\`;
+
+            
+            await pyodide.runPythonAsync(pyCode);
+            await pyodide.runPythonAsync(code);
+            postMessage(JSON.stringify({ type: 'executionComplete', messageId }));
+        } catch (err) {
+            postMessage(JSON.stringify({ type: 'stderr', msg: String(err), messageId }));
+        }
+    }
+
+    if (event.data.type === 'loadPackage') {
+        const { packages, packageRequestId } = event.data;
+        try {
+            const pyodide = await pyodideReadyPromise;
+            console.log("Loading packages:", packages);
+
+            // Separate Pyodide packages from PyPI packages
+            const pyodidePackages = packages.filter(pkg => ['matplotlib', 'numpy', 'scipy', 'sympy', 'micropip'].includes(pkg));
+            const pypiPackages = packages.filter(pkg => !['matplotlib', 'numpy', 'scipy', 'sympy', 'micropip'].includes(pkg));
+
+            // Load Pyodide packages directly
+            if (pyodidePackages.length > 0) {
+                await pyodide.loadPackage(pyodidePackages);
+            }
+
+            // Install custom packages using micropip
+            await installPackages(pyodide, pypiPackages);
+
+            console.log("Packages loaded:", packages);
+            postMessage(JSON.stringify({ type: 'packagesLoaded', packageRequestId }));
+        } catch (err) {
+            postMessage(JSON.stringify({ type: 'stderr', msg: String(err), packageRequestId }));
+        }
+    }
+};
+`;
+
+        const workerBlob = new Blob([workerScript], { type: 'application/javascript' });
+        this.worker = new Worker(URL.createObjectURL(workerBlob));
+
+        this.worker.onmessage = this.handleMessage.bind(this);
+        this.worker.onerror = this.handleError.bind(this);
+
+        // Send preloadPackages with the init message!
+        this.worker.postMessage({ type: 'init', preloadPackages: this.preloadPackages });
+
+
+        this.pyodideWarmedUp = false;
+    }
+
+    warmUpPyodide() {
+        // Only warm up once
+        if (this.pyodideWarmedUp) {
+            return Promise.resolve();
+        }
+
+        return this.workerReadyPromise.then(() => {
+            console.log("Warming up Pyodide with empty execution...");
+            return new Promise((resolve) => {
+                const messageId = this.generateMessageId();
+                this.callbacks[messageId] = (data) => {
+                    if (data.type === 'executionComplete') {
+                        console.log("Pyodide warm-up complete");
+                        this.pyodideWarmedUp = true;
+                        resolve();
+                    }
+                };
+                this.worker.postMessage({ 
+                    type: 'runCode', 
+                    code: '# Empty script to trigger Pyodide compilation', 
+                    messageId 
+                });
+            });
+        });
+    }
+
+    generateMessageId() {
+        return 'msg-' + Math.random().toString(36).substr(2, 9);
+    }
+
+    loadPackages(packages) {
+        const packagesToLoad = packages.filter(pkg => !this.loadedPackages.has(pkg));
+
+        if (packagesToLoad.length === 0) {
+            return Promise.resolve(); // All packages already loaded
+        }
+
+        const packageRequestId = 'pkg-' + Math.random().toString(36).substr(2, 9);
+
+        return new Promise((resolve, reject) => {
+            this.packageLoadPromises[packageRequestId] = { resolve, reject, packages: packagesToLoad };
+            this.worker.postMessage({ type: 'loadPackage', packages: packagesToLoad, packageRequestId });
+        });
+    }
+
+    runCode(code, onMessageCallback) {
+        const messageId = this.generateMessageId();
+        this.callbacks[messageId] = onMessageCallback;
+        this.worker.postMessage({ type: 'runCode', code, messageId });
+        return messageId;
+    }
+
+    handleMessage(event) {
+        let data;
+        try {
+            data = JSON.parse(event.data);
+        } catch (e) {
+            console.error("Failed to parse message from worker:", event.data);
+            return;
+        }
+
+        const messageId = data.messageId;
+        const packageRequestId = data.packageRequestId;
+
+        if (messageId && this.callbacks[messageId]) {
+            this.callbacks[messageId](data);
+
+            if (data.type === 'executionComplete') {
+                delete this.callbacks[messageId];
+            }
+        } else if (packageRequestId && this.packageLoadPromises[packageRequestId]) {
+            const packagePromise = this.packageLoadPromises[packageRequestId];
+            if (data.type === 'packagesLoaded') {
+                for (const pkg of packagePromise.packages) {
+                    this.loadedPackages.add(pkg);
+                }
+                packagePromise.resolve();
+            } else if (data.type === 'stderr') {
+                packagePromise.reject(new Error(data.msg));
+            }
+            delete this.packageLoadPromises[packageRequestId];
+        } else {
+            if (data.type === 'initReady') {
+                console.log("Worker initialization message:", data.type);
+                this.workerReadyResolve(); // Resolve *after* preloading is done in the worker.
+            } else {
+                console.warn("Unhandled message from worker:", data);
+            }
+        }
+    }
+
+    handleError(error) {
+        console.error("Worker error:", error);
+        if (this.workerReadyReject) {
+            this.workerReadyReject(error);
+        }
+    }
+
+    // restartWorker() {
+    //     if (this.worker) {
+    //         this.worker.terminate();
+    //         this.worker = null;
+    //     }
+
+    //     this.loadedPackages = new Set();
+    //     this.workerReadyPromise = new Promise((resolve, reject) => {
+    //         this.workerReadyResolve = resolve;
+    //         this.workerReadyReject = reject;
+    //     });
+
+    //     this.initWorker();
+    // }
+
+    restartWorker() {
+        if (this.worker) {
+            this.worker.terminate();
+            this.worker = null;
+        }
+
+        this.loadedPackages = new Set();
+        this.pyodideWarmedUp = false;  // Reset warm-up status
+        
+        this.workerReadyPromise = new Promise((resolve, reject) => {
+            this.workerReadyResolve = resolve;
+            this.workerReadyReject = reject;
+        });
+
+        this.initWorker();
+
+        // Trigger warm-up after reinitialization
+        setTimeout(() => {
+            this.warmUpPyodide().catch(err => {
+                console.warn("Pyodide warm-up failed after restart:", err);
+            });
+        }, 1000); // Small delay to let the worker initialize
+    }
+}