Javascript có thể giao tiếp với python không?

Question

Gần đây, tôi đã bắt gặp một trường hợp sử dụng liên quan đến việc chạy mô hình PyTorch để suy luận trong thời gian thực, cùng với Nút. máy chủ js xử lý I/O. Sau lần thất bại ban đầu khi sử dụng đèn pin. js, chúng tôi đã quyết định sử dụng Tensorflow. js (tfjs). Tuy nhiên, mô hình lớp là một quy trình đồng bộ và chặn, buộc phải sử dụng các luồng công nhân (lộ trình này được trình bày chi tiết trong một câu chuyện riêng). Cách tiếp cận này có những khó khăn riêng. (1) một luồng công nhân cụ thể của tfjs cần được chạy riêng. (2) việc sử dụng GPU thông qua phụ trợ WebGL không đơn giản

Nội dung chính Show

đường ống được đặt tên
con trăn. đọc, xử lý và viết
Nút. js. viết và đọc
Ứng dụng. py
Mục lục. html
Chạy ứng dụng
chức năng kiểm tra
Gọi dữ liệu từ Javascript
Thiết lập cuộc gọi trang
Viết yêu cầu Tìm nạp
Làm cách nào để tích hợp Python với JavaScript?
Làm cách nào để lấy dữ liệu từ js sang Python?
JavaScript có mạnh hơn Python không?
Bạn có thể viết JavaScript bằng Python không?

PyTorch thuận tiện cho việc phát triển AI, dễ dàng sử dụng Python. Ngoài ra, PyTorch cung cấp giao diện người dùng C++ đẹp mắt, đặc biệt hấp dẫn đối với các hệ thống có độ trễ thấp. Đối với trường hợp sử dụng trên, chúng tôi quyết định tiếp tục sử dụng PyTorch. Trong khi nút. js xử lý đầu vào và đầu ra, Python/PyTorch sẽ xử lý suy luận mô hình AI. Hai hệ thống sẽ giao tiếp bằng cách sử dụng các đường ống có tên

đường ống được đặt tên

'Pipe' là một tính năng cơ bản của Linux cho phép các quy trình riêng biệt giao tiếp và truyền dữ liệu cho nhau. Một đường dẫn có tên (sử dụng hệ thống tệp) là một tệp có thể được truy cập bởi hai quy trình không liên quan; . nhiều thông tin thêm có thế được tìm thấy ở đây. Các đường ống được đặt tên đôi khi được gọi là FIFO. nhập trước xuất trước, vì thứ tự byte (vào và ra) được giữ nguyên

Đơn giản hóa tuyên bố vấn đề…

Mục tiêu là sử dụng Named Pipes để liên lạc

một nút. js sẽ ghi một số dữ liệu vào một đường ống (A)
Một quy trình Python đọc từ đường ống (A) và thao tác dữ liệu
Quá trình python ở trên sau đó ghi dữ liệu vào một đường ống (B)
Nút. js đọc từ đường ống (B)

con trăn. đọc, xử lý và viết

Đầu tiên, hãy tạo một quy trình Python đơn giản để đọc từ một đường ống có tên A, xử lý dữ liệu và sau đó ghi nó vào đường ống có tên B (để đơn giản, hàm

<body>
<h1> Python Fetch Example</h1>
<p id='embed'>{{embed}}</p><p id='mylog'/>
<body>

3 ở đây trả về dữ liệu đã đọc). Trước tiên, tập lệnh tạo đường ống có tên A bằng lệnh

<body>
<h1> Python Fetch Example</h1>
<p id='embed'>{{embed}}</p><p id='mylog'/>
<body>

4

Nút. js. viết và đọc

Tiếp theo, hãy viết một Node đơn giản. chương trình js ghi vào đường ống. Có một vài gói làm điều này. tên-ống, fifo-js. Tuy nhiên, nút cung cấp các chức năng giúp thuận tiện cho việc thiết lập IPC với các đường ống. Đoạn script bên dưới ghi dữ liệu cứ sau 1 giây vào Ống A (gửi dữ liệu) và đọc từ Ống B (nhận dữ liệu đã xử lý từ Python). Để đơn giản, dữ liệu ở đây là thời gian hiện tại dưới dạng chuỗi

Lưu ý rằng mặc dù

<body>
<h1> Python Fetch Example</h1>
<p id='embed'>{{embed}}</p><p id='mylog'/>
<body>

5 và

<body>
<h1> Python Fetch Example</h1>
<p id='embed'>{{embed}}</p><p id='mylog'/>
<body>

6 dường như có giao diện đồng bộ, nhưng chúng là các hoạt động không đồng bộ. họ không trả lại lời hứa hoặc chấp nhận gọi lại để liên lạc khi hoàn thành thao tác. Thông tin chi tiết có thể được tìm thấy trong câu trả lời stackoverflow này

Tiếp theo, kích hoạt hai thiết bị đầu cuối, một cho Python và một cho Node. js. Đường ống thêm độ trễ khoảng 1ms

Phần kết luận

Các đường ống được đặt tên cung cấp một cách giao tiếp thuận tiện giữa các quy trình. Tôi đã trình bày một cách đơn giản để truyền dữ liệu từ một Nút. js đến một quy trình Python có thể thực hiện thao tác dữ liệu. Đối với các tác vụ chậm hơn, có thể sử dụng nhiều luồng trong Python để đọc và ghi riêng biệt

Vì một số lý do, việc nhập trực tiếp

<body>
<h1> Python Fetch Example</h1>
<p id='embed'>{{embed}}</p><p id='mylog'/>
<body>

7 bằng Python (hoặc bằng pyodide. runPython() hoặc trong py-script) với TypeError

import canvas
Python exception:
Traceback (most recent call last):
  File "/lib/python3.10/site-packages/_pyodide/_base.py", line 429, in eval_code
    .run(globals, locals)
  File "/lib/python3.10/site-packages/_pyodide/_base.py", line 300, in run
    coroutine = eval(self.code, globals, locals)
  File "", line 2, in 
  File "", line 1075, in _handle_fromlist
JsException: TypeError: Cannot read properties of undefined (reading 'name')

Và cũng thất bại với lỗi "không thể đọc các thuộc tính không xác định"

Là một bản hack, bạn luôn có thể làm điều gì đó như

for (const property in canvas){
  window[property] = canvas[property]
}

Điều này sẽ làm cho tất cả các thuộc tính được xác định trong canvas. js thành các đối tượng chung mà bạn có thể nhập vào Pyodide. Nó chắc chắn cảm thấy thô mặc dù

Trong lĩnh vực khoa học dữ liệu, người ta thường yêu cầu sử dụng một loạt các công cụ, mỗi công cụ cụ thể cho công việc của họ. Một vai trò yêu cầu trực quan hóa bằng giao diện web, nhưng xử lý tập lệnh Python, tốt hơn là nên xây dựng trực quan hóa riêng trong d3 hoặc THREE. js để hiển thị nó và sau đó tìm nạp dữ liệu theo yêu cầu. Bài viết này đề cập đến việc tạo một ứng dụng bình đơn giản có thể cung cấp dữ liệu cho giao diện web bằng cách sử dụng API tìm nạp

Tạo ứng dụng Flask

Chúng tôi bắt đầu bằng cách xây dựng một kho lưu trữ chứa một thư mục

<body>
<h1> Python Fetch Example</h1>
<p id='embed'>{{embed}}</p><p id='mylog'/>
<body>

8 trống và một tệp

<body>
<h1> Python Fetch Example</h1>
<p id='embed'>{{embed}}</p><p id='mylog'/>
<body>

0

Ứng dụng. py

Tệp

<body>
<h1> Python Fetch Example</h1>
<p id='embed'>{{embed}}</p><p id='mylog'/>
<body>

0 của chúng tôi chứa dữ liệu cần thiết để tạo giao diện web. Để làm điều này, chúng tôi sử dụng thư viện python bình (

<body>
<h1> Python Fetch Example</h1>
<p id='embed'>{{embed}}</p><p id='mylog'/>
<body>

2 ). Đối với điều này, chúng ta có thể sử dụng mẫu sau

########  imports  ##########
from flask import Flask, jsonify, request, render_template
app = Flask(__name__)#############################
# Additional code goes here #
######################################  run app  #########
app.run(debug=True)

Ở đây chúng tôi bắt đầu bằng cách nhập các chức năng cần thiết, cấu trúc ứng dụng và lệnh chạy để khởi động ứng dụng

Mục lục. html

Đã xác định ứng dụng bình của chúng tôi, bây giờ chúng tôi cần tạo một trang web mẫu. Điều này có thể được thực hiện bằng cách đặt tệp

<body>
<h1> Python Fetch Example</h1>
<p id='embed'>{{embed}}</p><p id='mylog'/>
<body>

3 trong thư mục mẫu

<body>
<h1> Python Fetch Example</h1>
<p id='embed'>{{embed}}</p><p id='mylog'/>
<body>

Vì chúng tôi đang sử dụng mẫu này làm mẫu nên chúng tôi có thể sử dụng cú pháp thay thế kiểu phản ứng cho các từ khóa nhất định. Trong trường hợp này,

<body>
<h1> Python Fetch Example</h1>
<p id='embed'>{{embed}}</p><p id='mylog'/>
<body>

4 sẽ được thay thế bằng chuỗi

<body>
<h1> Python Fetch Example</h1>
<p id='embed'>{{embed}}</p><p id='mylog'/>
<body>

5 trong đoạn trích bên dưới

for (const property in canvas){
  window[property] = canvas[property]
}

0

Điều này xác định mã sẽ chạy khi truy cập trang chủ của ứng dụng bình và cần được thêm vào giữa các dòng

<body>
<h1> Python Fetch Example</h1>
<p id='embed'>{{embed}}</p><p id='mylog'/>
<body>

6 và

<body>
<h1> Python Fetch Example</h1>
<p id='embed'>{{embed}}</p><p id='mylog'/>
<body>

7 trong

<body>
<h1> Python Fetch Example</h1>
<p id='embed'>{{embed}}</p><p id='mylog'/>
<body>

0

Chạy ứng dụng

Cuối cùng, chúng ta có thể chạy ứng dụng và xem nó bằng cách sử dụng

<body>
<h1> Python Fetch Example</h1>
<p id='embed'>{{embed}}</p><p id='mylog'/>
<body>

9 và điều hướng đến

for (const property in canvas){
  window[property] = canvas[property]
}

00 trong trình duyệt web để xem nó

NHẬN và ĐĂNG — chúng hoạt động như thế nào?

Khi chuyển dữ liệu, chúng tôi dựa vào các hàm GET và POST trong API tìm nạp. Các thuật ngữ này khá dễ hiểu

POST đề cập đến việc gửi thông tin đến một địa điểm, tương tự như gửi thư
NHẬN đề cập đến việc truy xuất dữ liệu - bạn biết mình có thư, vì vậy bạn đến bưu điện để thu thập (yêu cầu) nó

chức năng kiểm tra

Trong vòng

<body>
<h1> Python Fetch Example</h1>
<p id='embed'>{{embed}}</p><p id='mylog'/>
<body>

0, chúng tôi có thể tạo một URL cho các yêu cầu GET. Đoạn mã sau xác định phản hồi khi URL được gọi

for (const property in canvas){
  window[property] = canvas[property]
}

7

Theo yêu cầu GET, chúng tôi xác định một từ điển chứa phần tử

for (const property in canvas){
  window[property] = canvas[property]
}

02 và tuần tự hóa nó. Tiếp theo, điều này sau đó được đăng trở lại chương trình javascript đang gọi

Sau khi thêm đoạn mã sau vào trước lệnh

<body>
<h1> Python Fetch Example</h1>
<p id='embed'>{{embed}}</p><p id='mylog'/>
<body>

7 và thực thi nó, chúng ta có thể truy cập vào

for (const property in canvas){
  window[property] = canvas[property]
}

04 — sẽ tạo ra kết quả sau

<body>
<h1> Python Fetch Example</h1>
<p id='embed'>{{embed}}</p><p id='mylog'/>
<body>

1

Gọi dữ liệu từ Javascript

Bây giờ chúng tôi đã thiết lập phía máy chủ của mọi thứ, chúng tôi có thể sử dụng lệnh tìm nạp để lấy dữ liệu từ nó. Để làm điều này, chúng ta có thể sử dụng lời hứa

for (const property in canvas){
  window[property] = canvas[property]
}

05 như sau

<body>
<h1> Python Fetch Example</h1>
<p id='embed'>{{embed}}</p><p id='mylog'/>
<body>

3

Ở đây, chúng tôi chạy một yêu cầu GET trên

for (const property in canvas){
  window[property] = canvas[property]
}

06 để chuyển đổi chuỗi JSON được trả về thành một đối tượng, sau đó in phần tử

for (const property in canvas){
  window[property] = canvas[property]
}

02 ra bảng điều khiển web. Như thường lệ, mã JavaScript phải được lồng giữa các thẻ

for (const property in canvas){
  window[property] = canvas[property]
}

08 trong tài liệu HTML

Yêu cầu dữ liệu từ máy chủ

Bây giờ chúng tôi có một ví dụ hoạt động, chúng tôi có thể mở rộng nó để bao gồm dữ liệu thực tế. Trên thực tế, điều này có thể liên quan đến việc truy cập cơ sở dữ liệu, giải mã một số thông tin hoặc lọc bảng

Với mục đích của hướng dẫn này, chúng tôi tạo một mảng dữ liệu từ đó chúng tôi lập chỉ mục các phần tử

<body>
<h1> Python Fetch Example</h1>
<p id='embed'>{{embed}}</p><p id='mylog'/>
<body>

7

Thiết lập cuộc gọi trang

Trong ứng dụng Flask của mình, chúng ta có thể thêm các đối số tùy chọn vào yêu cầu GET — trong trường hợp này là chỉ mục mảng mà chúng ta quan tâm. Điều này được chỉ định thông qua phần mở rộng trang bổ sung trong URL trang

for (const property in canvas){
  window[property] = canvas[property]
}

09. Đối số này sau đó được chuyển vào hàm trang và được xử lý (

for (const property in canvas){
  window[property] = canvas[property]
}

70) trong lệnh return

<body>
<h1> Python Fetch Example</h1>
<p id='embed'>{{embed}}</p><p id='mylog'/>
<body>

0

Viết yêu cầu Tìm nạp

Yêu cầu tìm nạp vẫn giữ nguyên ngoại trừ việc thay đổi URL GET để bao gồm chỉ mục của phần tử dữ liệu mà chúng tôi quan tâm. Điều này được thực hiện trong tập lệnh JS trong

<body>
<h1> Python Fetch Example</h1>
<p id='embed'>{{embed}}</p><p id='mylog'/>
<body>

3

<body>
<h1> Python Fetch Example</h1>
<p id='embed'>{{embed}}</p><p id='mylog'/>
<body>

2

Lần này, thay vì trả về một đối tượng, chúng tôi trả về một chuỗi và phân tích nó như vậy. Điều này sau đó có thể được sử dụng khi cần thiết trong mã — có thể là để cập nhật một con số hoặc hiển thị một thông báo

Tóm lược

Chúng tôi đã khám phá một phương pháp để trích xuất dữ liệu bằng python và cung cấp dữ liệu đó cho mã javascript để trực quan hóa (các phương pháp thay thế bao gồm ổ cắm web/TCP và truyền phát tệp). Chúng tôi có thể tạo mã python phía máy chủ để xử lý trước hoặc giải mã dữ liệu và chỉ cung cấp thông tin cần thiết cho khách hàng

Điều này hữu ích nếu chúng tôi có dữ liệu cập nhật liên tục, tập dữ liệu lớn (tài nguyên cao) hoặc dữ liệu nhạy cảm mà chúng tôi không thể cung cấp trực tiếp cho khách hàng

Làm cách nào để tích hợp Python với JavaScript?

Bạn có thể dịch JavaScript sang Python bằng Js2Py. Js2Py là một mô-đun Python có thể được sử dụng để dịch JavaScript sang Python và hoạt động như một trình thông dịch JavaScript được viết bằng Python thuần 100%. Nó dịch bất kỳ JavaScript hợp lệ nào (ECMA Script 5. 1) sang Python. Bản dịch hoàn toàn tự động

Làm cách nào để lấy dữ liệu từ js sang Python?

Cách chuyển một biến Javascript sang Python bằng JSON .

Vì vậy, làm thế nào để chúng ta đạt được điều này?

Bước 2 – Tạo tuyến web để cho chương trình biết mẫu HTML được gọi là gì. @ứng dụng. tuyến đường('/').

Bước 4 – Tạo tệp HTML sẽ ghi lại đầu vào và xử lý dữ liệu thành JSON

JavaScript có mạnh hơn Python không?

Các khung tồn tại để thực hiện nhiệm vụ dễ dàng hơn – như Django và Flask – nhưng ngay cả như vậy, sử dụng Python không phải là tối ưu. JavaScript là lựa chọn tốt hơn cho các trang web trên máy tính để bàn và thiết bị di động. Giữa JQuery, Angular và React, JavaScript cung cấp khả năng gần như vô tận cho lập trình web