Hello friends, today we are going to see, how you can run python scripts in a browser or you can say Run Python in Browser with HTML or you can execute your python algorithm or model using a web framework.
So in this article, I am going to introduce a python library that is called Py-Script (that can be used to define python code that is executable within the web page. The element itself is not rendered to the page and only used to add logic.).
What is Py-Script?
PyScript is a framework that allows users to create rich Python applications in the browser using HTML’s interface and the power of Pyodide, WASM, and modern web technologies. The PyScript framework provides users at every experience level with access to an expressive, easy-to-learn programming language with countless applications.
By using this library you can easily run python in browser with HTML, and you can do anything, you can run functions, loops, conditions anything that you want to do in python.
Now the Magic Begins For Python Lovers ❤️| Easily Run Python in HTML Code | PyScript Tutorial in Hindi
What is PyScript? Well, here are some of the core components:
- Python in the browser: Enable drop-in content, external file hosting (made possible by the Pyodide project, thank you!), and application hosting without the reliance on server-side configuration
- Python ecosystem: Run many popular packages of Python and the scientific stack (such as numpy, pandas, scikit-learn, and more)
- Python with JavaScript: Bi-directional communication between Python and Javascript objects and namespaces
- Environment management: Allow users to define what packages and files to include for the page code to run
- Visual application development: Use readily available curated UI components, such as buttons, containers, text boxes, and more
- Flexible framework: A flexible framework that can be leveraged to create and share new pluggable and extensible components directly in Python
So, now I think you understand about py-script. so now let’s see examples, of how can use py-script to run python in browser with an HTML file. So Let’s start now…..😄
For using py-script we have to download and include or directly include(By using CDN of py-script) two files one is a CSS file and the second is a JS file. You can get it by following the below links.
The initial release of the PyScript is found on the GitHub https://github.com/pyscript/pyscript
Install or Download
If you are interested in reading how it works on the browser and where PyScript components stand on the browser, read the two official pieces of documentation from the Anaconda about the architectural overview:
- https://www.anaconda.com/blog/pyscript-python-in-the-browser
- https://anaconda.cloud/pyscript-python-in-the-browser
PyScript currently implements the following elements:
py-env– Defines the Python packages needed to run your Python code.<py-script>: that can be used to define python code that is executable within the web page. The element itself is not rendered to the page and is only used to add logic.<py-repl>: creates a REPL component that is rendered to the page as a code editor and allows users to write code that can be executed.
Example of <py-script>:
I created a HTML file and the skeleton of the page looks like this,
<html>
<head>
<!--Included necessary files of Py-Script-->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<py-script>
print('Welcome To RKR Knowledge\n')
print("5+2=")
print(5+2)
for num in range(1, 7):
print(num)
</py-script>
</body>
</html>The above code displays the print message along with the for-loop iteration from 1 to 6 as shown below,
Output:
You can also use source reference inside the py-script tag of any python script file with a .py extension, which means you can also run any file that has python logic code with a .py extension in HTML file as,
<html>
<head>
<!--Included necessary files of Py-Script-->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<py-script>
<py-script src="python-script.py"></py-script>
</py-script>
</body>
</html>This will execute your python script file and prints the output in HTML file.
Example of <py-repl>:
If you use empty tags like <py-repl></py-repl>, it will create a single line editor same as a text box where you can write the code and execute it on your browser.
<html>
<head>
<!--Included necessary files of Py-Script-->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<py-repl>
</py-repl>
</body>
</html>Now you can write any python code in the editor and run it through the green button. You can write any logic and data structure supported by python, and it gives the output same as IDE. below is the screenshot,
the PyScript helps the data scientist to execute their algorithms and model on the browser with a really little knowledge of the HTML. You don’t need to worry about the front-end framework. Just run your python scripts inside the py-script tag.
Here Note that the core developer of py-script is working on this library and they said that “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.”
This is an open-source project and if you are interested, you can play your role by contributing to the PyScript repository which can be found at https://github.com/pyscript/pyscript
References:
That’s it for today friends, if you like this article then please like, share this with your circle and show some ❤️.
Thank You!😊 Keep supporting us.
Read More:
