Python in the web browser: PyScript | by RAVI SHEKHAR TIWARI | Jul 2022

PyScript is a brand new framework that generated a lot of excitement when Eter Wangthe CEO and co-founder of Anaconda, Inc., revealed this during his keynote speech at PyCon US 2022. Although this project is just an experiment in an early stage of development, people on social media already seem to have fallen in love with it. This tutorial will get you started with PyScript, while the official documentation is still being worked on.

PyScript is a Python front-end framework that allows users to build Python programs using an in-browser HTML interface. It was developed using the power of Emscripten, Pyodide, WASM and other modern web technologies to provide the following capabilities Purposes:

  • Provide a simplistic and clean API.
  • Provide a pluggable and expandable component system.
  • Support and extend standard HTML to read savvy and reliable custom components to achieve the “Programming for the 99%” mission.
Source: Anaconda Blog

For the past two decades, Python and advanced user interface languages ​​such as modern HTML, CSS, and JavaScript have not worked together. Python lacked a simple mechanism to create attractive user interfaces for simply packaging and deploying applications, whereas current HTML, CSS, and JavaScript can have a steep learning curve. Enabling Python to use HTML, CSS, and JavaScript conventions solves not only these two problems, but also those related to developing, packaging, distributing, and deploying web applications.

However, PyScript is not intended to play the role of JavaScript in the browser. Rather, it is intended to give Python developers, especially data scientists, more flexibility and power.

PyScript gives you a programming language with consistent style conventions, more expressiveness, and ease of learning by providing the following:

  • Browser support: PyScript enables Python and hosting support without the need for servers or configuration.
  • Interoperability: Programs can communicate bidirectionally between Python and JavaScript objects and namespaces.
  • Ecosystem support: PyScript allows the use of popular Python packages such as Pandas, NumPy and many others.
  • Frame flexibility: PyScript is a flexible framework that developers can rely on to easily create extensible components directly in Python.
  • Environnment management : PyScript allows developers to define which files and packages to include in their page’s code to run.
  • Development of the user interface: With PyScript, developers can easily create with available UI components such as buttons and containers, and many more.

Step 1: Create an .html file as shown below

       


Title: PyScript with HTML

Pyscript in Html

2nd step: PyScript CDN link

After creating the HTML file, we will need to link PyScript into your HTML file to gain access to the PyScript interface. This will be placed in the label.

The full code of the HTML file is below:



Title: PyScript with HTML

Pyscript in Html

print("PyScript in Browser!!!!!")


Finally, open the file in your browser!!!!! and you will see the magic.

2. Calling custom Python functions in HTML.

One of the features provided by PyScript is flexibility. In PyScript, you can import local files, built-in modules, or third-party libraries. This process uses the label. This tag is used to declare the necessary dependencies.

For local Python files on your system, you can place the code in a .py file and paths to local modules are provided in paths: key in the label.

Let’s create a Python file examplefunction.py to contain some functions:

from random import randint

def add_two_numbers(x, y):
return x + y

def generate_random_number():
x = randint(0, 10)
return x

Then the Python file will be imported into the HTML with the label. You must place this tag in the beacon, above the label.



Title: Using custom code href="https://pyscript.net/alpha/pyscript.css" />



- paths:
- /examplefunction.py

from examplefunction import generate_random_number pyscript.write('lucky', generate_random_number())

Addition of two number 5 and 6 is : print(add_two_numbers(5,6))

Finally, open the file in your browser!!!!! and you will see the magic.

3. Importing Python modules into HTML.

One of the features provided by PyScript is flexibility. In PyScript, you can import a Python library, built-in modules, or third-party libraries. This process uses the label. This tag is used to declare the necessary dependencies.

For the Python library, you can place the code in a key in the label. Then the Python file will be imported into the HTML with the label. You must place this tag in the beacon, above the label.



Title: Using custom code href="https://pyscript.net/alpha/pyscript.css" />


- numpy
- requests
- humanize

import numpy as np
import requests
from datetime import datetime
import humanize

now_int = int(datetime.timestamp(datetime.now()))
now_fmt = humanize.intcomma(now_int)
print("It has been", now_fmt, "seconds since the epoch.")

Finally, open the file in your browser!!!!! and you will see the magic. system timedate in PyScript’s browser.

4. The REPL tag.

Python users should be familiar with Jupyter Notebook, the live, in-browser coding environment for Python typically used for math and statistics. PyScript offers a primitive building block for such an environment, the py-repl label.

py-repl generates an input field on a webpage that works like a very basic version of a Jupyter Notebook environment. Here’s an example from Anaconda’s own demos:



Title: Using custom code href="https://pyscript.net/alpha/pyscript.css" />

<py-repl id="my-repl" auto-generate="true"> py-repl>

Run this code and you will be presented with an input field, which works like the Python REPL.

Currently, the REPL tag has very little documented customization. For example, if you want to programmatically access the contents of a cell or its results, there is no clear documentation on how to do this.

REPL sample

In this article, you learned what PyScript is and how to use it in HTML files to run Python code on the browser. You also learned about the different operations/functionalities you can perform with PyScript.

With PyScript, it is easier to run and perform Python operations on the web, as it was not easy before. It’s a great tool for anyone who wants to use Python on the web.

PyScript is still in its infancy and in full development. It is still in its alpha phase and has known issues such as loading time which may affect usability (some other operations cannot be displayed at the time of this writing due to performance issues). So you shouldn’t use it in production yet because there will probably be a lot of breaking changes.

As we say “the car is useless if it does not have a good engine”, so the student is useless without proper guidance and motivation. I would like to thank my Guru as well as my Idol “Dr. P. Supraja” and “A. Helen Victoria” – guided me through the journey, from the bottom of my heart. As a Guru, she lit the best path available to me, motivated me whenever I encountered failure or an obstacle – without his support and motivation it was an impossible task for me.

The official site of PyScript.

Anaconda Blog.

Python source code.

Getting started with PyScript.

If you have any questions, please feel free to contact me with any of the options mentioned below:

Youtube : Linenk

Website: www.rstiwari.com

Medium: https://tiwari11-rst.medium.com

Github Pages: https://happyman11.github.io/

Articles: https://laptrinhx.com/author/ravi-shekhar-tiwari/

Google form: https://forms.gle/mhDYQKQJKtAKP78V7

Comments are closed.