PyScript
ปกติเราจะเขียน front-end ภาษา script ที่เราใช้ก็ต้องเป็น javaScript ใช่ไหมละครับ แต่ถ้าเราอยากใช้ภาษา python มีเขียนแทน javaScript ละทำได้ไหม ต้องทำอย่างไร และแล้วความฝันของเราก็เป็นจริงแล้ว เย้ๆ ผมขอนำเสนอ pyScript จากค่าย Anaconda ความเท่ของมัน มันสามารถนำมาใช้ได้เหมือน ภาษา javaScript เลยครับ และที่สำคัญ สามารถนำ library ที่ใช้ๆกันอยู่ใน python ปกติ มาใช้ได้เลย อย่างเช่น numpy ,pandas หรือแม้แต่ matplotlib
อย่าช้าอยู่ใย มาเริ่มกันเลยดีกว่า ก่อนอื่นลง Anaconda3 ก่อนนะครับ
เครื่องมือที่ต้องมี vscode และ ลง extension Live Preview
พร้อมแล้ว สร้างไฟล์ index.html แล้วเขียนโคดตามด้านล่าง
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<h1>Test PyScript</h1>
<py-script>
print('hello world')
</py-script>
</body>
</html>จากโคดด้านบน มี 2 จุดที่ pyScript เพิ่มขึ้นมา จุดแรกที่ tag <head> เพื่อเรียกใช้ stylesheet และ pyscript
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js">จุดที่ 2 <py-script> เป็น code ภาษา python ตรงนี้ต้องระวังเรื่อง เว้น tab ด้วยนะครับ ให้เรา เขียน code ให้ชิดขอบซ้าย
<py-script>
print('hello world')
</py-script>เสร็จแล้ว คลิ๊กขวา -> Live Preview: Show Preview จะขึ้นแบบรูปด้านล่างนี้ครับ
ความนี้เราจะมาลองท่าที่ยากกว่านี้ ผมจะลองเรียก function จากอีกไฟล์ โดยให้ชื่อไฟล์ว่า cbFunc.py และจะเขียน function sumFunc
def sumFunc(a,b):
print(a+b)ใน tag <head> ไฟล์ index.html ผมจะเพิ่มโคดด้านล่างนี้ สำหรับ link path ไปยังโคดที่ผมต้องการเรียกใช้
<py-env>
- paths:
- ./cbFunc.py
</py-env>ส่วนของ tag <body> ผมสามารถเรียกใช้ sumFunc ได้ดังโคดด้านล่างนี้เลยครับ
<py-script>
import cbFunc
cbFunc.sumFunc(2,3)
</py-script>แล้วถ้าผมต้องการเรียก class ล่ะ ต้องทำอย่างไร ก่อนอื่นผมจะสร้างไฟล์ cbClass.py ในไฟล์นี้ผมจะต้อง declear function ดังเช่นโคด 2 บรรทัดด้านล่างนี้ เพื่อให้ไฟล์ .html มองเห็น
class CbClass(object):
def __init__(self):
print('Start.')
def sumFunc(self,a,b):
print(a+b)
def __del__(self):
print('End.')
_auto = CbClass()
sumFunc = _auto.sumFuncใช่ครับ ถ้าต้องการให้ ไฟล์ .html เรียกใช้ function ไหนใน class ก็ต้อง declear ไว้ทุก function เลย
ใน index.html ทำการแก้ไขโคดนิดหน่อยครับ
<py-env>
- paths:
- ./cbFunc.py
- ./cbClass.py
</py-env>เวลาเรียกใช้ สามารถเรียกใช้ได้ง่ายๆ แบบนี้เลยครับ
<py-script>
import cbClass
cbClass.sumFunc(4,5)
</py-script>คราวนี้เราจะมาลองเรียกใช้ matplotlib กันบ้าง แก้ไขตรง tag <py-env> ให้เป็นแบบด้านล่าง
<py-env>
- matplotlib
- numpy
</py-env>ในส่วนของ tag <body> ผมจะเพิ่ม <div id=”mpl”></div> เข้าไปแล้วให้ pyScript output ออกมาที่ id=”mpl”
<div id="mpl"></div>
<py-script output="mpl">
import numpy as np
import matplotlib.pyplot as plt# Compute the x and y coordinates for points on sine and cosine curves
x = np.arange(0, 3 * np.pi, 0.1)
y_sin = np.sin(x)
y_cos = np.cos(x)# Create just a figure and only one subplot
fig, ax = plt.subplots()
ax.plot(x, y_sin, label='Sine')
ax.plot(x, y_cos, label='Cosine')
ax.set_title('Sine and Cosine')
ax.set_xlabel('x axis label')
ax.set_ylabel('y axis label')
ax.legend(['Sine','Cosine'])
fig
</py-script>|
ลองทดสอบรันดูครับ
ต่อไปจะลองเรียกใช้ pandas เหมือนเดิมครับ แก้ไขตรง tag <py-env> ให้เป็นแบบด้านล่าง
<py-env>
- pandas
</py-env>ในส่วนของ tag <body> เขียนโคดด้านล่างนี้เข้าไปครับ
<div id="pand"></div>
<py-script output="pand">
import pandas as pd
data_name = ['blue','jeab']
data_age = [38,39]
date_birthday = [pd.Timestamp(year=1983, month=11, day=23),pd.Timestamp(year=1982, month=4, day=5)]
data_dict = {
'Name': data_name,
'Age': data_age,
'Date': date_birthday,
}
df = pd.DataFrame(data_dict)
df
</py-script>|ผลลัพธ์ที่ได้
จากเท่าที่ทดลอง เวลา render ค่อนข้างช้าอยู่นะครับ การ render จะเป็นแบบ server side rendering (ssr) จะเห็นได้ชัดเวลา เรา render graph เหมาะสำหรับ เวป demo AI เล็กๆ ไม่เหมาะอย่างยิ่งกับระบบใหญ่ๆที่ซับซ้อนมากๆ ใครที่ต้องการศึกษาเพิ่มเติม ตามไป link ด้านล่างที่ reference เลยครับ
