Try to run python in a Pure Browser-Based Web App running on Cloudflare

In the ever-evolving landscape of web development, the ability to run various programming languages directly in the browser has become a sought-after feature. Thanks to advancements in WebAssembly System Interface (WASI), developers can now explore new possibilities for running languages like Python, Go, and TypeScript in a pure browser-based web application.

WASI, short for WebAssembly System Interface, provides a standardized interface for running WebAssembly modules outside of a web browser. This allows developers to execute code written in different languages in a secure and efficient manner, opening up a world of possibilities for web applications.

Recently, there has been a push to enable support for languages like Python, Go, and TypeScript via WASI. By leveraging tools like esbuild wasm and integrating projects like python-wasi, developers can now run arbitrary Python code directly in the browser.

One of the key projects in this space is python-wasi, developed by nalgeon. This project provides a way to run Python code using WASI, enabling developers to execute Python scripts in a browser environment. By fetching the python.wasm file from a specified URL and providing the Python script to execute, developers can seamlessly run Python code and see the output in real-time.

I successfully tested it by using the following code snippet:

const url = "https://unpkg.com/@antonz/python-wasi/dist/python.wasm";

const pythonScript = `
a = 1
b = 2
c = a + b
print(c)
print("Hello World!")
`;

import("@antonz/runno").then(({ WASI }) => {
    WASI.start(fetch(url), {
        args: ["python", "-c", pythonScript],
        stdout: (out) => console.log(out),
        stderr: (err) => console.error(err),
    }).then(result => console.log(`exit code = ${result.exitCode}`));
});

I guess I can combine it with ChatCraft in this way. But still need help to make sure if I need support the "function" and "run code".

This week I also fix a small bug "Show More..." button's text is improperly layered and visible through the options menu", I found the button uses zIndex={10}, so I just try to use zIndex={11} at first. Thanks Amnish provided a more suitable way by using Chakra theme theme.zIndices.dropdown.

Next week, I will keep working on combine python.wasm in ChatCraft.