Run python script in html_file #memo #cording

I wrote lots of chemoinformatics apps as web app. To do that I often use Flask / Django. It’s python packge so most of part can be written in python however it’s difficult to embed python directry in html document.

Recently I found cool package for embedding python code in html, it’s name is pyscript. It’s really cool!

I tested simple code as shown below.

The directory system is …

root/
webserve.py
conponents/test1.html
test2.html
test3.html

And code is below. To do he test, I used python http package.

#webserver.py
from http.server import HTTPServer, SimpleHTTPRequestHandler,  os
os.chdir(os.path.join(os.path.dirname(__file__), 'contents'))
server = HTTPServer(('', 8000), SimpleHTTPRequestHandler)
server.serve_forever()
#contents/test1.html
<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body> <py-script> print('Hello, World!') </py-script> </body>
</html>
#contents/test2.html
<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <py-env>
        - matplotlib
      </py-env>
    </head>

  <body>
    <h1>Let's plot random numbers</h1>
    <div id="plot"></div>
    <py-script output="plot">
import matplotlib.pyplot as plt
import numpy as np
x = np.random.randn(1000)
y = np.random.randn(1000)

fig, ax = plt.subplots()
ax.scatter(x, y)
fig
    </py-script>
  </body>
</html>
#contents/test3.html
<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/unstable/pyscript.js"></script>
      <py-env>
        - pandas
        - scikit-learn
      </py-env>
    </head>

  <body>
<div>
    <py-script>
import pandas as pd
import numpy as np
from sklearn.datasets import load_iris
data = load_iris()
df = pd.DataFrame(data.data)
df['target'] = data.target
df.head(5)
    </py-script>
</div>
  </body>
</html>

After writing code above, run the server.

$ python webserver.py

Then simple webserver will run. And I could get following veiw from each page.

As you can see, main part of these pages are built with pure python code without javascript. It’s really interesting.

But there are limitations. PyScript doesn’t support all packages which are provided from pypi evenif major packages are suppored.

Unfortunately RDkit is not suppored too.

BTW lots of packages are abailable. If reader has interest PyScript, let’s check the original document and examples!

https://github.com/pyscript/pyscript/tree/main/pyscriptjs/examples

Advertisement

Published by iwatobipen

I'm medicinal chemist in mid size of pharmaceutical company. I love chemoinfo, cording, organic synthesis, my family.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: