Is there a way to run Python scripts client side in the browser using a front end framework like react?

Question

Introduction

There are so many cool and useful python scripts/programs out there, that aren't living up to their potential, in my opinion. Because all of these are executed locally in the command line, they aren't very user friendly and not very accessible to the normal person. I wanted to create a site that could run such a script on it, but from the browser with an easy to navigate UI, that way the user wont have to download a file in order to use the service.

My approach

I'm still very much a beginner even though I've dedicated quite a bit of time to learning js, but I just don't seem to see how I would be able to make this happen. I'm thinking I might have to set up an API that could run on the back end and feed the information to the front end. However the specific script/file that I want to run is called spleeter and takes in audio files, and split them into stems. I'm sure it's possible to upload a file through an API, however I can see that becoming very heavy server side, especially if a lot of people were to visit the site at the same time. I quite naively thought, this issue of essentially scalability could be solved by running the script locally client side, so the user wouldn't have to upload anything, two birds with one stone, in the sense that I don't have to pay server costs of hosting the uploaded files, nor the computational power of running the script. After searching up on this topic for a week now, I know realize that this was indeed VERY naïve of me. I've sorta looked into a thing called Brython and a thing called Transcrypt but don't quite see how it would be applicable.

Basically the question

All of this explanation to essentially ask the following question(s), is what I want to do even possible? Does this kind of setup have a name that I'm just not searching correctly for? And if possible, could someone nudge me in the right direction?

I hope a solution to this exists and if not I really think there's a gold mine ahead to anyone coupling this together.

Answer 1

I'm personally a fan of Transcrypt and use it myself to create full React applications that are programmed with Python instead of JavaScript. But like any React application, that does require the code to be pre-compiled into JavaScript before being able to be run in a web browser. That said, thanks to sourcemaps, you can still troubleshoot the Python code in the browser.

If you want to actually run Python code from source in the browser, you would likely need one of the following:

• Brython (which gives you Python script tags, compiled to JS on load)
• Skulpt (which provides a JS based Python interpreter)
• Pyodide (A WASM based Python interpreter that runs in the browser)

Beyond those, there are a few framework type projects like Dash and IDOM that let you use Python to create browser applications.

Finally, there is Anvil that gives you a VB style experience for developing web applications using Python.

Given all of the above options, it sounds like Skulpt may be something you might want to look into some more.

Answer 2

Now it is possible to run the python code directly in browser without any development environment other than a web browser. Say Hello to PyScript.

As per the current official documentation :

Please be advised that PyScript is very alpha and under heavy development. There are many known issues, from usability to loading times, and you should expect things to change often. We encourage people to play and explore with PyScript, but at this time we do not recommend using it for production.

Here is the demo to print Hello World and live date time using pyscript directly in the browser.

<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>

<py-script>
  from datetime import datetime
  print('Hello world!')
  now = datetime.now()
  now.strftime("%m/%d/%Y, %H:%M:%S")
</py-script>