Hướng dẫn run html in python - chạy html trong python

Question

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.

Nội dung chính Show

1. PyScript là gì?
2. Cách sử dụng PyScript
3. Sử dụng PyScript trực tuyến
3.1. Chương trình đầu tiên PyScript HTML
3.2. Chương trình đơn giản có nhiều dòng mã Python
3.3. Ghi kết quả vào Lable của HTML
3.4. Thẻ py-vev
3.5. Thêm mô-đun Python tự viết
3.6. Thẻ py-repl
3.7. Thẻ py-config
<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>5

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ẻ trong thẻ của mã HTML, đây là nơi bạn sẽ viết mã Python của mình.Việc sử dụng thẻ trong thẻ 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//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>
    <h2>Let's plot random numbers</h2>
    <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ẻ

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

0. 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: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>
    <h2>Let's plot random numbers</h2>
    <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ẻ

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

1 để đặ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ẻ

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

2

Giá trị	Kiểu	Giải thích
`<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	boolean	Nế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.
`<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>` 4	string	Tê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ọ.
`<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>` 5	string	Tê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ọ.
`<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>` 5	Phiê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.	`<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>` 6

List of Runtimes

Giá trị Kiểu Giải thích

<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

boolean

Nế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.

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

4

string

Tê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ọ.

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

5

string

Tê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ọ.

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

Phiê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.

`<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>` 6	Giải thích
`<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	boolean
Nế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.	`<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>` 4
string	Tê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ọ.
`<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>` 5	Phiê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.