Chạy hình ảnh hóa Python trên web bằng PyScript
Python được sử dụng rộng rãi để phân tích dữ liệu, học máy, duyệt web và hơn thế nữa. Nhưng bạn có biết rằng bạn cũng có thể chạy mã Python trong HTML để xây dựng các ứng dụng web không?
PyScript làm cho nó trở nên khả thi, cho phép bạn chạy mã Python trong trình duyệt. Tìm hiểu cách thêm trực quan hóa matplotlib vào trang web với sự trợ giúp của một số ví dụ PyScript-HTML.
Mục Lục
PyScript là gì?
PyScript là một khung công tác web mã nguồn mở cho phép bạn chạy Python trong trình duyệt web. Nó tích hợp giao diện HTML và sức mạnh của Pyodide, WASM và các công nghệ web hiện đại. PyScript hiện đang trong giai đoạn phát triển nhưng nó đã có một số tính năng thú vị. Về tiềm năng, nó có thể trở thành một công cụ để tạo ra các ứng dụng web mạnh mẽ.
Mã được sử dụng trong dự án này có sẵn trong kho lưu trữ GitHub và miễn phí cho bạn sử dụng theo giấy phép MIT. Nếu bạn muốn xem phiên bản trực tiếp của dự án này, bạn có thể xem bản trình diễn lineplot và barplot.
Thiết lập HTML Boilerplate
Trước khi sử dụng PyScript, bạn cần thiết lập mọi thứ. Tạo một tệp HTML mới và thiết lập bảng soạn thảo HTML. Hầu hết các IDE hiện đại đều cung cấp chức năng tự động tạo bảng nấu. Bạn chỉ cần gõ doc hoặc html và nhấn enter. Bạn cũng có thể sử dụng mẫu sau để bắt đầu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body></body>
</html>
Thêm PyScript vào HTML: “Hello, World!” Sử dụng PyScript
Bạn có thể sử dụng PyScript trong tệp HTML của mình bằng cách tải xuống hoặc liên kết CDN của nó trong phần đầu HTML của bạn. Thêm phần sau vào phần của tệp HTML của bạn:
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
Đó là tất cả những gì bạn cần làm để thiết lập PyScript.
Để xác minh xem PyScript có được tích hợp thành công hay không, hãy thêm dòng mã sau vào tiết diện:
<body>
<py-script>print("Hello, World!")</py-script>
</body>Mở tệp HTML trong bất kỳ trình duyệt web nào và bạn sẽ thấy Chào thế giới! in ở đó.
Tải thư viện Matplotlib
Bạn cần sử dụng
<py-env>
- matplotlib
</py-env>Hiển thị một Biểu đồ Dòng trong Trình duyệt Sử dụng PyScript
Tạo một
<div id="matplotlib-lineplot"> </div>
Bạn cần viết mã Python trong
<py-script output="matplotlib-lineplot">
</py-script>Bây giờ bạn đã sẵn sàng viết mã Python để tạo một biểu đồ dòng:
<body>
<div id="matplotlib-lineplot"></div>
<py-script output="matplotlib-lineplot">
import matplotlib.pyplot as plt
fig, ax = plt.subplots()
x = ["Python", "C++", "JavaScript", "Golang"]
y = [10, 5, 9, 7]
plt.plot(x, y, marker='o', linestyle='-', color='b')
plt.xlabel('Language')
plt.ylabel('Score')
plt.title('Language vs Score')
fig
</py-script>
</body>
Bạn sẽ nhận được hình sau được hiển thị khi bạn mở tệp HTML trong trình duyệt web:
Hiển thị một ô thanh trong trình duyệt bằng PyScript
Bạn có thể tạo một biểu đồ thanh trong trình duyệt bằng cách sử dụng đoạn mã Python sau:
<body>
<div id="matplotlib-bar"></div>
<py-script output="matplotlib-bar">
import matplotlib.pyplot as plt
fig, ax = plt.subplots()
x = ["Python", "C++", "JavaScript", "Golang"]
y = [10, 5, 9, 7]
plt.bar(x, y)
plt.xlabel('Language')
plt.ylabel('Score')
plt.title('Language vs Score')
fig
</py-script>
</body>
Mã này tạo ra kết quả sau:
PyScript nắm giữ tương lai nào?
Bạn có thể xây dựng các bảng điều khiển và biểu đồ mạnh mẽ trong HTML bằng cách sử dụng các thư viện PyScript và Python như Matplotlib, Bokeh, Seaborn, v.v. Tuy nhiên, bạn có lẽ nên ngừng sử dụng nó trong sản xuất vì nó đang được phát triển nặng. Phần mềm hiện có nhiều vấn đề bao gồm thời gian tải và khả năng sử dụng. Trong tương lai, PyScript có thể mở các cánh cổng để chạy và thực hiện các hoạt động Python trên web một cách trơn tru hơn.
Một trong những lý do chính để phát triển PyScript là để giúp các nhà khoa học dữ liệu trực quan hóa dữ liệu trên web. Nếu bạn là một nhà khoa học dữ liệu, bạn có thể tận dụng sức mạnh của PyScript bằng cách kết hợp nó với các thư viện khoa học dữ liệu như Pandas và NumPy.