Python

最新 PyScript 實測！讓 HTML 也能執行 Python！（附程式碼）

Jumping發表留言

最近看到 Anaconda 開發了一個新的 Open source project 叫做 PyScript，是一個能在 HTML 中直接撰寫 Python 程式，當使用者開啟該檔案時，就會在背後直接開始執行 Python

感覺運用場景可以很廣，像是直接進行資料視覺化、產出 Dashboard，或是利用爬蟲直接顯示有興趣的網頁的結果

這個專案的核心是靠 Pyodide，跟之前我介紹過的 Jupyter Lite 一樣，還沒看過的可以複習一下

網頁輕量級 Jupyter！JupyterLite 介紹與使用心得

此篇文章主要是做一些 PyScript 的實測，並記錄試用的過程與感想

1. 不管怎樣都要先來個 Hello world

程式碼

<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>
view raw 1. helloWorld.html hosted with ❤ by GitHub

網頁呈現結果

個人感想

  • 開網頁直到顯示出 Hello World 之間，會有明顯有感的延遲時間

2. 來點簡單的數學計算

程式碼

<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("Let's compute π:")
def wallis(n):
pi = 2
for i in range(1, n):
pi *= 4 * i ** 2 / (4 * i ** 2 – 1)
return pi
pi = wallis(100000)
s = f"π is approximately {pi:.3f}"
print(s)
</py-script>
</body>
</html>
view raw 2. math.html hosted with ❤ by GitHub

網頁呈現結果

個人感想

  • 還是很慢，看起來延遲時間是難以避免的了
  • 發現沒辦法進行程式碼格式上的排版，若把 python 往後 indent 縮排，就會出現 error，對於我這種排版狂人看了是有點刺眼啊（笑

3. 讓 Python 與 HTML Tags 溝通

利用 pyscript.write() 這個方法來將計算結果傳入指定的 id tag 中

程式碼

<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
<b><p>Today is <u><label id='today'></label></u></p></b>
<br>
<div id="pi" class="alert alert-primary"></div>
<py-script>
import datetime as dt
pyscript.write('today', dt.date.today().strftime('%A %B %d, %Y'))
def wallis(n):
pi = 2
for i in range(1,n):
pi *= 4 * i ** 2 / (4 * i ** 2 – 1)
return pi
pi = wallis(100000)
pyscript.write('pi', f'π is approximately {pi:.3f}')
</py-script>
</body>
</html>
view raw 3. writeToTag.html hosted with ❤ by GitHub

網頁呈現結果

個人感想

  • 這部分終於開始有種「哦～好像有點實用！」的感覺出現了
  • 感覺這功能可以用在比較多的場合

4. 試著呈現「視覺化圖表」

程式碼

<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
– numpy
– matplotlib
</py-env>
</head>
<body>
<h1>Let's plot random numbers</h1>
<div id="plot"></div>
<py-script>
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>
view raw 4. librayPlot.html hosted with ❤ by GitHub

網頁呈現結果

個人感想

  • 嗯…跑有點久
  • 需要使用 <py-env> 來指名需要另外 import 進來的 Python Library (如上方程式碼)
  • 另外也可以匯入 .whl 檔案，範例如下
<py-env>
- './travertino-0.1.3-py3-none-any.whl'
</py-env>

—

5. 匯入自己定義的 py 檔

程式碼

<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
– numpy
– matplotlib
– paths:
– ./data.py
</py-env>
</head>
<body>
<h1>Let's plot random numbers</h1>
<div id="plot"></div>
<py-script output="plot">
import matplotlib.pyplot as plt
from data import make_x_and_y
x, y = make_x_and_y(n=1000)
fig, ax = plt.subplots()
ax.scatter(x, y)
fig
</py-script>
</body>
</html>
view raw 5. importLocalFile.html hosted with ❤ by GitHub

網頁呈現結果

個人感想

  • 這個範例在自己本機上測試時會無法執行，因為在 web server 上會有找不到該檔案的問題
  • 解決方法是
    1. 先使用 python3 -m http.server 開啟一個 Local Server
    2. 前往 http://localhost:8000/
    3. 於畫面中點選開啟 HTML 檔就可以看到順利執行的圖了

個人總感想

等待時間過長

  • 在測試的過程，一直困擾我的就是執行速度
  • 雖然說這樣開網頁很方便，但這個等待的時間總覺得不是網頁該有的狀況…

可能需要更貼心的提示

  • 另一個問題是，在執行時可能還是需要一個「執行中」之類的提示，不然等待的時候都不知道程式是已經掛了還是還沒跑出來
  • 在發生 Error 時如果能直接顯示在畫面上更好，現在的情況就需要另外寫 print 或是 try 去抓錯誤

Dubug 上的優化

  • 因為 PyScript 是在 HTML 中寫 Python，所以就算我用 VSCode 編輯，也很難做 debug
  • 在 HTML 中不會有 python syntax highlight，也沒辦法套用 .py 相關的 extensions
  • 考量到這個問題，若要開發的話我可能會先在別的 .py 檔裡面先編輯好，再利用 <py-env> 去匯入寫好的 method/functions 可能會比較方便

其他有趣應用

1. 直接匯入 py 檔並執行

<py-script src="./test.py"></py-script>

2. 互動式 Python

<py-repl id="my-py-repl" auto-generate="true"></py-repl>
  • 類似 Jupyter notebook 功能，如下圖
  • 其中 auto-generate="true" 時，按下 shift enter 執行時會自動產生下一行新的 cell

3. 瑪利歐 Mario（是網頁遊戲！）

  • 想看試玩影片的在這裡

總結

  • 目前個人覺得 PyScript 可能還僅限於個人專案使用，或是公司內部分享程式碼的成果的時候使用，感覺還有點難運用到產品上
  • 現階段 Python 的 Web Application 可能還是要選擇像是 Django 或 Flask 之類的網頁框架，畢竟網頁的使用者不太可能願意等待過長的執行時間
  • 但我是滿期待之後有沒有什麼新的應用出現，PyScript 整體來說還算是滿新穎也滿有前景的一個專案！
廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入：

Gravatar
WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 ( 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 ( 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 ( 登出 /  變更 )

取消

連結到 %s