Power HTML with Python : PyScript Powered your web browser to execute Python with HTML

Power HTML with Python : PyScript Powered your web browser to execute Python with HTML

A sneak peek at how to run Python from HTML code

PyCon US 2022, Anaconda’s CEO Peter Wang announced a shiny new technology called PyScript that allows users to write Python and in fact many languages in the browser.?

It is a JavaScript framework that allows users to create Python applications in the browser using a mix of Python and standard HTML. The project’s ultimate goal is to allow a much wider audience (for example, front-end developers) to benefit from the power of Python and its various libraries (statistical, ML/DL, etc.).

The key things to know about PyScript

  • Allows us to use Python and its vast ecosystem of libraries (including?numpy,? pandas,? scikit-learn) from within the browser.
  • By using environment management?users can decide which packages and files are available when running the page’s code.
  • We can use some of the curated UI components out-of-the-box, for example: buttons, containers, text boxes, etc.
  • We do not have to worry about deployment as with PyScript everything will happen in our web browsers. As data scientists, we could share HTML files containing dashboards and/or models with our stakeholders, who will be able to run those in their browsers without any complicated setup.

Working magical logic behind PyScript?

PyScript is currently built on?Pyodide, which is a “port of CPython to WebAssembly/Emscripten.” PyScript supports writing and running Python code in a browser, and it will provide support for other languages in the future.?

No alt text provided for this image

What is WebAssembly?

The fundamental technology that makes it possible to write websites in Python is WebAssembly. When WebAssembly was originally developed, web browsers only supported Javascript.?

First released in 2017, WebAssembly quickly became the official World Wide Web Consortium (W3C) standard by 2019. It includes a human readable .wat text format language, which then gets converted to a binary .wasm format that browsers can run. This allows us to write code in any language, compile it to WebAssembly, and then run in a web browser.

How to use PyScript

  • Base code (JavaScript and CSS files are available ) on https://pyscript.net/
  • py-env defines the Python packages needed to run your Python code.?
  • py-script is where you write your Python code that gets executed within the web page.
  • py-repl?creates a REPL (read-eval-print loop) component that evaluates the code users enter and displays the results.
  • To use the PyScript Embed the provided CSS and JavaScript in your code, Define. Py-env, py-script & py-repl and execute the same.
  • Example

<html>

??<head>

???<link rel="stylesheet" />

???<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

???<py-env>

????- matplotlib

????- pandas

???</py-env>

??</head>


?<body>

??<center><h1>Now its time to boost up HTML with Python?with <b><font color='red'>py-script</font></b></h1></center>

??</br>

??<h2>Below are the different python plots with HTML</h2>

?</br>

??

??<div id="plot">

??<py-script output="plot">


import matplotlib.pyplot as plt

import numpy as np

fig, axs = plt.subplots(2, 2)

lst = [34,40,37,30,44,36,32,26,32,36]

axs[0, 0].hist(lst,histtype='bar', bins=7)

axs[0, 0].set_title('Histrogram')

plt

age = [34,40,37,30,44,36,32,26,32,36]

marks =[100,98,99,95,96,96,99,98,94,97]

axs[0, 1].boxplot(age)

axs[0, 1].set_title('Box Plot')

plt

axs[1, 0].scatter(age, marks)

axs[1, 0].set_title('Scatter Plot', y=-0.35)

plt

student = [1,2,3,4,5]

weight=[50,40,70,80,20]

height = [80,20,20,50,60]

axs[1, 1].plot([],[],linewidth=5,label='weight')

axs[1, 1].plot([],[],linewidth=5,label='height')

axs[1,1].stackplot(student,weight,height)

axs[1, 1].set_title('Area Plot', y=-0.35)

plt

??</py-script>

??</div>??

?</body>

</html>

Save file as .html

Output:

No alt text provided for this image


#py-script #pythonwith html #python #html #pythonpoweredhtml #pythoninweb #webbrowserwithpython #py-script #anaconda #pyscript.net/ #AngadGupta

要查看或添加评论,请登录

社区洞察

其他会员也浏览了