Thực hiện Python code ngay trong tệp HTML

Hiện nay có rất nhiều cách để bạn có thể chạy mã Python ngay trong tệp HTML, ở đây VniTeach sẽ chọn cách đơn giản nhất đó là sử dụng PyScript Framework.

Chạy mã Python ngay trong tệp HTML

1. PyScript là gì?

PyScript là một framework cho phép người dùng tạo các ứng dụng Python phong phú trong trình duyệt bằng cách sử dụng giao diện của HTML và sức mạnh của Pyodide, WASM và các công nghệ web hiện đại.

2. Cách sử dụng PyScript

PyScript không yêu cầu bất kỳ môi trường phát triển nào ngoài trình duyệt web (chúng tôi khuyên bạn nên sử dụng Chrome) và trình soạn thảo văn bản, mặc dù việc sử dụng IDE như: VSCode, Dreamwaver,… có thể thuận tiện cho bạn.

Thông thường có 2 cách để sử dụng PyScript là bạn sử dụng PyScript trực tuyến trên https://pyscript.net hoặc có thể tải PyScript về và tệp HTML sẽ liên kết đến nó. Ở đây mình sẽ hướng dẫn cách thứ nhất là sử dụng trực tuyến cho đơn giản và nhanh chóng.

3. Sử dụng PyScript trực tuyến

3.1. Chương trình đầu tiên PyScript 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>

Lưu ý: Việc sử dụng thẻ <py-script> trong thẻ <body> của mã HTML, đây là nơi bạn sẽ viết mã Python của mình.

3.2. Chương trình đơn giản có nhiều dòng mã Python

<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 compute_pi(n):
            pi = 2
            for i in range(1,n):
                pi *= 4 * i ** 2 / (4 * i ** 2 - 1)
            return pi

        pi = compute_pi(100000)
        s = f"π is approximately {pi:.3f}"
        print(s)
      </py-script>
  </body>
</html>

3.3. Ghi kết quả vào Lable của HTML

<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 compute_pi(n):
          pi = 2
          for i in range(1,n):
              pi *= 4 * i ** 2 / (4 * i ** 2 - 1)
          return pi

      pi = compute_pi(100000)
      pyscript.write('pi', f'π is approximately {pi:.3f}')
    </py-script>
  </body>
</html>

3.4. Thẻ py-vev

Ngoài Thư viện chuẩn Python và mô-đun pyscript, nhiều gói OSS của bên thứ 3 sẽ hoạt động hiệu quả với PyScript.

Để sử dụng chúng, bạn sẽ cần khai báo các phần phụ thuộc bằng thẻ trong phần đầu HTML. Bạn cũng có thể liên kết đến các tệp .whl trực tiếp trên ổ đĩa máy tính như trong ví dụ sau:

<py-env>
- './static/wheels/travertino-0.1.3-py3-none-any.whl'
</py-env>

Ví dụ, NumPy và Matplotlib có sẵn. Lưu ý ở đây chúng tôi đang sử dụng <py-script output="plot"> làm lối tắt, lấy biểu thức ở dòng cuối cùng của script và chạy pyscript.write (‘plot’, fig)

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

3.5. Thêm mô-đun Python tự viết

Ngoài các gói, bạn có thể khai báo các mô-đun Python cục bộ sẽ được nhập vào thẻ <py-script>. Ví dụ: chúng ta có thể đặt các bước tạo số ngẫu nhiên trong một hàm trong tệp data.py.

# data.py
import numpy as np


def make_x_and_y(n):
    x = np.random.randn(n)
    y = np.random.randn(n)
    return x, y

Trong thẻ HTML , đường dẫn đến mô-đun cục bộ được cung cấp trong từ khóa paths:

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

3.6. Thẻ py-repl

Thẻ tạo thành phần REPL được hiển thị cho trang dưới dạng trình chỉnh sửa mã, cho phép bạn viết nội tuyến mã thực thi.

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <py-repl></py-repl>
</html>

3.7. Thẻ py-config

Sử dụng thẻ <py-config> để đặt và định cấu hình siêu dữ liệu chung về ứng dụng PyScript của bạn ở định dạng YAML. Nếu bạn chưa quen với YAML, hãy xem hướng dẫn về YAML cho người mới bắt đầu của Red Hat để biết thêm thông tin.

Thẻ có thể được sử dụng như sau:

<py-config>
  autoclose_loader: false
  runtimes:
    - src: "https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js"
      name: pyodide-0.20
      lang: python
</py-config>

Các giá trị tùy chọn sau được hỗ trợ bởi thẻ <py-config>

Giá trịKiểuGiải thích
autoclose_loaderbooleanNếu sai, PyScript sẽ không đóng màn hình hiển thị tải khi các hoạt động khởi động kết thúc.
namestringTên của ứng dụng người dùng. Trường này có thể là bất kỳ chuỗi nào và được tác giả ứng dụng sử dụng cho các mục đích tùy chỉnh của riêng họ.
versionstringPhiên bản của ứng dụng người dùng. Trường này có thể là bất kỳ chuỗi nào và được tác giả ứng dụng sử dụng cho các mục đích tùy chỉnh của riêng họ. Nó không liên quan đến phiên bản PyScript.
runtimesList of RuntimesDanh sách các cấu hình thời gian chạy, được mô tả bên dưới.

Cấu hình thời gian chạy bao gồm những điều sau:

Giá trịKiểuGiải thích
srcstring (bắt buộc)URL đến nguồn thời gian chạy.
namestringTên thời gian chạy. Trường này có thể là bất kỳ chuỗi nào và được tác giả ứng dụng sử dụng cho các mục đích tùy chỉnh của riêng họ
langstringNgôn ngữ lập trình được hỗ trợ bởi thời gian chạy. Trường này có thể được tác giả ứng dụng sử dụng để làm rõ. Nó hiện không có ý nghĩa về cách hoạt động của PyScript.

3.8. Thẻ thành phần trực quan

Các thẻ sau có thể được sử dụng để thêm các thuộc tính trực quan vào trang HTML của bạn.

ThẻGiải thích
<py-inputbox>Thêm một hộp nhập liệu có thể được sử dụng để nhắc người dùng nhập các giá trị đầu vào.
<py-box>Tạo một đối tượng vùng chứa có thể được sử dụng để lưu trữ một hoặc nhiều thành phần trực quan xác định cách các phần tử của phải căn chỉnh và hiển thị trên trang.
<py-button>Thêm nút mà tác giả có thể thêm nhãn và trình xử lý sự kiện cho các hành động trên nút, chẳng hạn như on_focus hoặc on_click.
<py-title>Thêm thành phần tiêu đề văn bản tĩnh định kiểu văn bản bên trong thẻ làm tiêu đề trang.

Azst AI – Trang web học lập trình Python hữu ích

CopyAssignment – Nền tảng tải mã nguồn miễn phí

Real Python – Hướng dẫn lập trình Python thực tế

Lập trình chia số tiền sao cho có ít số tờ nhất bằng Python

Chương trình Python tự động chụp ảnh màn hình sau mỗi giây

PyTorch – Thư viện mã nguồn mở mạnh mẽ dành cho học sâu và học máy

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *