Pyscript | Run Python In Your HTML
At PyCon US 2022, Anaconda released a new version called PyScript, a Javascript framework that will let you create python applications using both Python and standard HTML.
In this blog, I will explore this new feature through a hands-on example.
Introduction:
You can write and run Python code in HTML, call Javascript libraries in PyScript, and do all your web development in Python. It enables drop-in content and application hosting without the reliance on server-side configuration. It uses Pyodide and Web-Assembly to communicate between two languages JavaScript and Python.
1. Create HTML Document
Let's first create an index.html document, we are using Bootstrap for the frontend purposes and also adding some CSS to design our elements.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/app.min.css">
<title>Pyscript Testing</title>
</head>
<body class="d-flex h-100 text-center text-white">
<div class="cover-container d-flex justify-content-center w-100 h-100 p-3 mx-auto flex-column">
<main class="px-3">
<h1 class="display-2 fw-bold mb-5">Pyscript Testing</h1>
<p class="lead mb-4">Framework that allows users to create sophisticated browser applications with Python</p>
</main>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>
2. Install PyScript
To install PyScript, just you have to import the appropriate pyscript files to your HTML page within the <head></head> tags.
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>Well, that's a piece of cake!
3. Add Python Packages
We can load the python packages like NumPy, Pandas, and Scipy using py-env into our environment. We can also import local modules using this, I have added antigravity.py using paths.
<py-env>
- numpy
- matplotlib
- pandas
- paths:
- ./antigravity.py
</py-env>4. Write Python Code
By adding the py-script tag, we can embed Python code in it. You can get the antigravity.py file from my GitHub.
<py-script>
print("Hello World!")
import antigravity
antigravity.fly()
</py-script>Finally, after adding py-script, you can see python code running in your HTML document. I have used the antigravity example project to explain the work, you can check the live version here.
Note: Be careful in adding indentation within py-script tags.
To Conclude:
PyScript brings a new idea to the Python and JavaScript ecosystems. Data scientists who wish to share their research with the world can do it more easily now. We have more to explore in this new stunning field.
I read a article under the same title some time ago, but this articles quality is much, much better. How you do this.. esx scripts
ReplyDeleteYour blog contains lots of valuable data. It is a factual and beneficial article for us.Learn Python Functions Online USA Thankful to you for sharing an article like this.
ReplyDelete