PyScript allows users to build Python applications on the web using an HTML interface.
Python is mostly utilised on the backend of websites, with frameworks such as Django and Flask. But, Python did not have as much front-end support as other languages such as JavaScript. But this has changed with PyScript.
PyScript is a Python front-end framework that allows users to build Python applications on the web using an HTML interface. This article will be focused on building a webpage with PyScript where we will perform the visualization of data.
Table of Contents
About PyScript
PyScript is a JavaScript framework that lets users construct Python apps in the browser by combining Python with regular HTML. The eventual purpose of the project is to enable a much larger audience (for example, front-end developers) to benefit from the power of Python and its numerous libraries (statistical, ML/DL, and so on).
Key features of PyScript
- Allows us to access Python and its extensive ecosystem of libraries from within the browser (including NumPy, pandas, and scikit-learn).
- Users can control which packages and files are available when running the page’s code by utilising environment management.
- We can utilise some of the selected UI components right away, such as buttons, containers, text boxes, and so on.
- We don’t have to bother about deployment because PyScript handles everything in our web browsers. As data scientists, we could share HTML files containing dashboards and/or models with our stakeholders, who would be able to execute them on their browsers without any technical configuration.
Working of PyScript
Pyodide is the foundation of PyScript. Pyodide is a Python distribution (a CPython version) for the browser and Node.js based on WebAssembly.
WebAssembly is the technology that allows Python programmers to create web pages. It employs a human-readable text format language that is then translated into a binary code that browsers can execute. We can now create code in any language, compile it to WebAssembly, and run it in a web browser.
Emscripten, an open-source compiler toolchain, may be seen in the following graphic of the tech stack. It enables the compilation of any portable C/C++ codebase into WebAssembly.
Fortunately, end-users, do not need to completely comprehend what is going on behind the scenes. However, it is unquestionably necessary, for example, for security reasons.
PyScript now allows creating and executing Python code in a browser. The plan for the future is to provide support for more languages. This is also where a possible constraint may arise. Currently, while using PyScript, we can only utilise libraries that Pyodide supports.
Build a webpage
To build a webpage we need to know about HTML and CSS. Let’s start with a basic example of printing “Hello world”.
Defining the HTML structure for webpage
<html>
<head>
<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('Hello Folks')
print("\U0001f600")
print('This is sample webpage running on python with the help of Pyscript')
</py-script>
</body>
</html>
Below is what the webpage looks like.
Now let’s move on to the advanced example. In this example, we will plot some charts using matplotlib.
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
- numpy
- matplotlib
- seaborn
- pandas
</py-env>
</head>
<body>
Hello Folks <br> This is sample webpage running on python with the help of Pyscript
<div id="random-plot">
<py-script >
import matplotlib.pyplot as plt
import numpy as np
x = np.random.randn(1000)
y = np.random.randn(1000)
fig, ax = plt.subplots(figsize=(15,8))
plt.title("Scatter plot with random number")
ax.scatter(x, y)
plt.tick_params(
axis='both',
which='both',
bottom=False,
top=False,
left=False,
right=False,
labeltop=False,
labelleft=False,
labelright=False,
labelbottom=False)
plt.xlabel("Random numbers")
plt.ylabel("Random numbers")
fig
</py-script>
</div>
</body>
</html>
In the above code, there is a div tag that will create a blank box for the content inside the tag. Then by using the py-script tag we can write the whole python within the tag and understand it as writing a python script. To use the Matplotlib, Pandas, and NumPy we need to create an environment for that we are using the py-env tag.
We can also use the CSS for styling the page and modifying the page, leaving that to you.
Conclusions
PyScript will allow us to run Python (and other) scripts directly from our browsers; the project is being developed by Anaconda; the project is currently in alpha, but we can already experiment with a selection of libraries provided by Pyodide. With this article, we have understood about PyScript utilization in building a webpage in python.
