Python was the foundation of my technical career. I gained my Python skills and worked on many AI/ML projects. But when I have to show the output, I cannot run the python file for each stakeholder. There were some limitations. It needs to be contained within a product, which can be portrayed on some kind of website or mobile app.
Then, I had no idea how to build a bridge to connect these. Later, I learn about APIs (in Django/Flask) that can link my machine learning API with a web application so that users may use my API in a real sense.
But that approach seems to be lengthy as well as costly (you need to host the Python API on a cloud server).
But thanks to PYSCRIPT... 🙌
The pyscript team had brought a revolution in cross-platform connection technology.
With the help of Pyscript, you can run Python in HTML. Just you need to import a JS script via CDN. And that's it. You are ready to rock.
Get Started
- The process to set up and run pyscript is very simple. Create an
index.htmlfile and paste the below code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Python in HTML : Pyscript</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
</head>
<body>
<h1>Python in HTML : Pyscript</h1>
<py-script>
print("This hello world is written in Python and rendered in HTML using Python's print()")
</py-script>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</body>
</html>
- In the above code snippet you can see that, apart from the basic HTML boilerplate, we have added CSS and JS script of pyscript. And a special tag is provided by Pyscript. In which you can run Python commands.
- When you will open the
index.htmlfile in the browser, you can see something similar to this:
Pre-cooked examples
- Pyscript has the ability to leverage HTML benefits along with the power of Python. So you can dig deep via Pyscript Example.
- Above website contains almost every segment of Pyscript from bottom to top. Starting from basic print functions to using Matplotlib and Numpy for Data Visualization.
- You check each example available on the above-mentioned link. (TIP: Run
Ctrl+UorRight click -> View Page Sourceto check the HTML and pyscript code used in the respective example). Here are some snaps of a couple of demo examples.
How extensible is Pyscript?
- When Pyscript was launched, initially they have limited functionalities of Python integrated. Like REPL (Read, Eval, Print, Loop) and like that.
- But today, the horizon of Pyscript is way too big. You can use many Python libraries like Time, Numpy, Matplotlib, and many others.
- One of the most fascinating features which I like is the Import of external python files. It is just like importing a normal JS file in HTML and using the interwoven function of that.
- Similarly, you can also write complex python logic, ML APIs, and much more in a separate file. Import them in HTML, and leverage the benefit of Python via HTML.
Closing comments 🙋♂️
- Thank you for reading along with me. If you find any queries on the topic mentioned above, please ping me in the comments. 💬
- Knowledge spreads by sharing. So please share this article with your concerned friends. 📱
- PS: Also, I humbly request you to write which topic you want in my next blog. I will include that in my target list. 🎯
Tirth Patel, signing off! 🫡
Top comments (0)