TechAE Blogs - Explore now for new leading-edge technologies

TechAE Blogs - a global platform designed to promote the latest technologies like artificial intelligence, big data analytics, and blockchain.

Full width home advertisement

Post Page Advertisement [Top]

Pyscript_head

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.

Pyscript

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>
Now our page looks like this:
Initial Page

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.

Final Image

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.

More Resources:

2 comments:

  1. 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

    ReplyDelete
  2. Your 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

Bottom Ad [Post Page]