Have you ever thought of running the Python script on the web without using any complex Python frameworks? Introducing the Pyscript package, which helps execute Python script inside HTML itself. The flow of the blog article is presented below,
- Introduction
- Features
- Installation
- Demonstration
Introduction
PyScript is an easy-to-use package for creating interactive web applications and automating complex tasks that require both Python code and HTML output. With PyScript, Python code can be embedded within the HTML files. In this blog, we will explore the key features of PyScript, How to use it, and the benefits of using this package for web development.
Features
PyScript offers a wide range of features to develop interactive web applications. Some of the features include,
- Seamless integration: With PyScript, developers can embed Python script snippets into HTML pages, which enables them to create dynamic and interactive web applications.
- Wide range of Python libraries: With PyScript, developers can able to use the existing Python packages in their web applications for better easy development.
- Easy to use: PyScript provides an intuitive and user-friendly interface, making it easy for developers of all skill levels to create dynamic web applications and automate tasks with just a few lines of Python code.
- Fast execution: PyScript is designed for high-performance execution, allowing you to quickly and efficiently process large amounts of data and perform complex computations in real-time.
- Cross-platform compatibility: PyScript is designed to work seamlessly across different platforms, including Windows, Linux, and Mac, providing a flexible and versatile solution for web developers.
Installation
To use PyScript in the HTML code the following codes need to be pasted in the <head> tag of the HTML page.
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>Demonstration
To begin, I create an HTML page named app.html with the basic tag sections such as head, title and body.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Simple text display program using PyScript</title>
</head>
<body>
</body>
</html>To use PyScript in HTML, I need to add the necessary tags to import the PyScript functionalities. After adding those tags our code will be,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Simple text display program using PyScript</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
</body>
</html>Now we have the basic settings to run Python in HTML. So here I am going to add a button and while clicking the button, a text should appear on the screen. The final version of the code will be,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Simple text display program using PyScript</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body style="text-align: center;">
<h2>Simple Text display with Button click using PyScript</h2><br>
<button py-click="write_to_page()" id="manual">Say Hello</button><br><br><br>
<div id="manual-write" style="text-align: center;"></div>
<py-script>
def write_to_page():
manual_div = Element("manual-write")
manual_div.element.innerText = "Hello World, This is generated using PyScript"
</py-script>
</body>
</html>So, I used the <py-script> tag to embed the Python code in the HTML code. Now the question is what is in that code? I created a function that will display text on the screen. Just like javascript, we have to identify the element which is needed to be modified. In JavaScript, we use document.getElementById(element-id) likewise in this PyScript, we use Element(element-id) function to identify the element on the web page. Now we can assign the innerText of the element with new text.
In the button, we have to include an attribute called py-click to perform the click operation on the button. Assign the attribute py-click with the name of the Python function write_to_page(). Once the button is clicked, the text will be displayed on the screen as shown below,
We can perform various complex operations by embedding PyScript such as Data Visualization, Data Analysis, and Machine Learning on the web.