Hướng dẫn run python script from react js - chạy tập lệnh python từ phản ứng js

Tôi có một trường hợp sử dụng trong đó tôi cần thực hiện tập lệnh Python cục bộ từ trình duyệt và hiển thị đầu ra được trả về.

Tôi đã viết ứng dụng web của mình bằng cách sử dụng React-JS.

Giải pháp hiện tại của tôi là khởi chạy một phiên bản cục bộ của một máy tính xách tay Jupyter [giả sử máy khách đã chạy nó] và làm cho người dùng thực hiện ô đầu tiên được đặt sẵn, nhưng tôi muốn có thể thực hiện điều này trực tiếp từ trình duyệt.

Đã hỏi ngày 10 tháng 6 năm 2018 lúc 9:33Jun 10, 2018 at 9:33

Các trang web không thể chạy các lệnh hệ điều hành tùy ý [chẳng hạn như thực thi các tập lệnh python] từ trình duyệt - vì lý do bảo mật

Một máy chủ phải cung cấp API cho trang web để gọi [lưu ý rằng Jupyter Notebook đang sử dụng máy chủ riêng của nó để thực thi các lệnh được chỉ định trong trình duyệt - mã Python không được thực thi trực tiếp trong trình duyệt]

Có nhiều cách để khởi động máy chủ web Python, cá nhân tôi giới thiệu Flask: //flask.pocoo.org/

CẬP NHẬT 2022: Hiện tại có một dự án để chạy Python trong trình duyệt, Pyscript, có thể đáng để kiểm tra một số trường hợp sử dụng

Đã trả lời ngày 10 tháng 6 năm 2018 lúc 10:13Jun 10, 2018 at 10:13

4

Nếu bạn muốn lập trình trong Python nhưng hãy thực thi mã trong trình duyệt, bạn cũng cần:

A] để chạy một số loại chương trình Python trên máy khách [tách biệt với trình duyệt] sẽ lắng nghe và cho phép trình duyệt kết nối với nó bằng cách sử dụng một số loại API [REST, v.v.];

Hoặc b] Chuyển Python của bạn sang JavaScript phía máy khách mà bạn đưa vào chế độ xem khách hàng của trang web. Có một số công cụ hỗ trợ nó, chẳng hạn như //www.transcrypt.org hoặc //pyjs.org

Hoặc c] sử dụng các thư viện cho phép python phía máy khách trong trình duyệt, chẳng hạn như //www.skulpt.org [về cơ bản tương tự như B] nhưng nó có trong suốt]

Đã trả lời ngày 10 tháng 6 năm 2018 lúc 11:16Jun 10, 2018 at 11:16

GnudiffgnudiffGnudiff

4.2541 Huy hiệu vàng24 Huy hiệu bạc25 Huy hiệu đồng1 gold badge24 silver badges25 bronze badges

Chúng ta có thể chạy Python trong React không?

Điều này là do React sử dụng các cấu trúc dữ liệu và cú pháp rất khác so với Python, điều này gây khó khăn cho các nhà phát triển Python để thích nghi. Trong bài viết này, chúng tôi sẽ vạch ra một kế hoạch đường bộ để bắt đầu với React, cũng như các điều kiện tiên quyết cốt lõi để lặn vào React như một nhà phát triển Python.

Chúng ta có thể chạy Python trong Node JS không?

Nếu bạn quen thuộc với Node.js, bạn sẽ biết rằng nó lànode.js, you know that it is

1. Cực nhanh ⚡
2. Ultra có thể mở rộng
3. Ultra mạnh mẽ 💥
4. Ultra đơn giản 😁

và Python có các thư viện điện toán khoa học tuyệt vời [Numpy, Pandas, v.v.] làm cho nó trở thành sự lựa chọn cho các học giả, nhà khoa học dữ liệu, kỹ sư học tập sâu, v.v.python has great scientific computing libraries [NumPy,Pandas,etc] that make it the go to choice for academics, data scientists, deep learning engineers, etc.

Cách đây một thời gian, tôi muốn khám phá tầm nhìn máy tính, một cái gì đó mà tôi đã thực sự bị mê hoặc trong một thời gian dài.computer vision, something that I had been really fascinated for quite a while.

Vì vậy, tôi bắt đầu học CV và viết một tập lệnh Python sẽ chụp ảnh và xóa các kênh màu để làm cho nó trông giống như một bộ lọc màu đã được áp dụng cho nó.image and remove color channels to make it look like as if a color filter had been applied to it.

Nó rất tuyệt và tôi muốn tạo ra một trang web/webui nhỏ thú vị từ đó để tôi có thể chia sẻ nó với phần còn lại của thế giới.super cool and I wanted to make a fun little website/webUI out of it so I could share it to the rest of the world.

Là một nhà phát triển Mern Stack tự học, tôi bắt đầu nghiên cứu về cách người ta có thể kết hợp Python và JavaScript.

Một hoặc hai tuần sau, tôi đã làm điều đó.

Và blog này là một tài liệu về cách tôi giải quyết thử thách này.

Tôi cũng đã bao gồm ở đây, toàn bộ mã tôi đã sử dụng để triển khai ứng dụng của mình cho HerokuHeroku

Live Deployment: //color-filter.netlify.app
Source Code: //github.com/LucidMach/ColorFilter

Làm thế nào nó hoạt động

Projecct có 4 giai đoạn

1. Webcam -> React -> nodejs
2. Nodejs py con
3. Chương trình Python thực tế
4. Nodejs -> React -> Canvas

Giai đoạn 1: Webcam -> React -> NodeJS

Chúng tôi bắt đầu bằng cách trích xuất một hình ảnh từ webcam, chúng tôi có thể sử dụng ____10 của HTML5 đơn giản nhưng có một gói React đơn giản hóa toàn bộ quá trình.

yarn add react-webcam

Nhập chế độ FullScreenen EXIT Mode FullScreen

Chúng ta có thể sử dụng

axios.post[url, { image: imageSrc, color: selectedColor }]

1 để chụp ảnh chụp 1080p của người dùng.1080p snapshot of the user.

🔗: Tài liệu React-Webcam

Bây giờ chúng tôi có một ảnh chụp nhanh [như một chuỗi base64], chúng tôi đã gửi nó đến máy chủbase64 string], we've to send it to the server

Bất kỳ trình duyệt nào chỉ có thể chạy JavaScript trên máy khách, vì vậy chúng tôi đã chạy Python trên máy chủbrowser can only run javascript on the client, so we've to run python on the server

Chúng tôi thực hiện một yêu cầu bài đăng

axios.post[url, { image: imageSrc, color: selectedColor }]

Nhập chế độ FullScreenen EXIT Mode FullScreen

Chúng ta có thể sử dụng

axios.post[url, { image: imageSrc, color: selectedColor }]

1 để chụp ảnh chụp 1080p của người dùng.

🔗: Tài liệu React-Webcam the server[bodyParser middleware] limits the size of data it can get[post] to 1MB and pictures are usually way big

Bây giờ chúng tôi có một ảnh chụp nhanh [như một chuỗi base64], chúng tôi đã gửi nó đến máy chủ

Bất kỳ trình duyệt nào chỉ có thể chạy JavaScript trên máy khách, vì vậy chúng tôi đã chạy Python trên máy chủ

app.use[bodyParser.json[{ limit: "5mb" }]];

Nhập chế độ FullScreenen EXIT Mode FullScreen

Chúng ta có thể sử dụng

axios.post[url, { image: imageSrc, color: selectedColor }]

1 để chụp ảnh chụp 1080p của người dùng.

🔗: Tài liệu React-Webcam

axios.post[url, { image: imageSrc, color: selectedColor }]

2

Bây giờ chúng tôi có một ảnh chụp nhanh [như một chuỗi base64], chúng tôi đã gửi nó đến máy chủ

axios.post[url, { image: imageSrc, color: selectedColor }]

3

const base64Image = req.body.image.split[";base64,"].pop[];

Nhập chế độ FullScreenen EXIT Mode FullScreen

Chúng ta có thể sử dụng

axios.post[url, { image: imageSrc, color: selectedColor }]

1 để chụp ảnh chụp 1080p của người dùng.

🔗: Tài liệu React-Webcam

Bây giờ chúng tôi có một ảnh chụp nhanh [như một chuỗi base64], chúng tôi đã gửi nó đến máy chủargv] to a python script / built a CLI tool, what we're going to be doing is very similar

Bất kỳ trình duyệt nào chỉ có thể chạy JavaScript trên máy khách, vì vậy chúng tôi đã chạy Python trên máy chủ

const fs = require["fs"];

fs.writeFileSync["input/image.png", base64Image, { encoding: "base64" }];

Nhập chế độ FullScreenen EXIT Mode FullScreen

Chúng ta có thể sử dụng

axios.post[url, { image: imageSrc, color: selectedColor }]

1 để chụp ảnh chụp 1080p của người dùng.
we do this my representing terminal commands to an array

const { spawn } = require["child_process"];

const py = spawn["python", ["color-filter.py", body.color]];

Nhập chế độ FullScreenen EXIT Mode FullScreen

Chúng ta có thể sử dụng

axios.post[url, { image: imageSrc, color: selectedColor }]

1 để chụp ảnh chụp 1080p của người dùng.

🔗: Tài liệu React-Webcam

var data2send

py.stdout.on["data", [data] => {
    data2send = data.toString[];
}];

console.log[data2send];

Nhập chế độ FullScreenen EXIT Mode FullScreen

Chúng ta có thể sử dụng

axios.post[url, { image: imageSrc, color: selectedColor }]

1 để chụp ảnh chụp 1080p của người dùng.

🔗: Tài liệu React-Webcam

Bây giờ chúng tôi có một ảnh chụp nhanh [như một chuỗi base64], chúng tôi đã gửi nó đến máy chủ

Bất kỳ trình duyệt nào chỉ có thể chạy JavaScript trên máy khách, vì vậy chúng tôi đã chạy Python trên máy chủ

Chúng tôi thực hiện một yêu cầu bài đăng

Tôi cũng gửi màu sắc đã chọn, vì tôi cần nó cho ứng dụng mà tôi đang xây dựng

py.on["close", [] => {
  // Adding Heading and converting image to base64
  const image = `data:image/png;base64,${fs.readFileSync["output/image.png", {
    encoding: "base64",
  }]}`;

  // sending image to client
    res.json[{ image }];
  }];

Nhập chế độ FullScreenen EXIT Mode FullScreen

Chúng ta có thể sử dụng

axios.post[url, { image: imageSrc, color: selectedColor }]

1 để chụp ảnh chụp 1080p của người dùng.

🔗: Tài liệu React-Webcam

Bây giờ chúng tôi có một ảnh chụp nhanh [như một chuỗi base64], chúng tôi đã gửi nó đến máy chủ

Bất kỳ trình duyệt nào chỉ có thể chạy JavaScript trên máy khách, vì vậy chúng tôi đã chạy Python trên máy chủ

1. Chúng tôi thực hiện một yêu cầu bài đăng
   Heroku Node App Deployment Docs

2. Tôi cũng gửi màu sắc đã chọn, vì tôi cần nó cho ứng dụng mà tôi đang xây dựng
   In the JavaScript World we have a

   axios.post[url, { image: imageSrc, color: selectedColor }]
   

   4 which tells every node instance all the packages required to run

Chúng tôi tạo ra một cái gì đó tương tự cho Python gọi là

axios.post[url, { image: imageSrc, color: selectedColor }]

5 để sao chép hành vi đó.

Nó sẽ trông giống như một tệp

axios.post[url, { image: imageSrc, color: selectedColor }]

6

// requirements.txt

numpy
cv2
matplotlib

Nhập chế độ FullScreenen EXIT Mode FullScreen

Khi Heroku nhận thấy tệp

axios.post[url, { image: imageSrc, color: selectedColor }]

5, nó chạy

axios.post[url, { image: imageSrc, color: selectedColor }]

8, do đó cài đặt tất cả các gói cần thiết

1. Định cấu hình BuildPacks HEROKU NODE Ứng dụng DOCS DOCS Đây là TL: DR; phiên bản

// terminal


// This command will set your default buildpack to Node.js
heroku buildpacks:set heroku/nodejs

// This command will set it up so that the Heroku Python buildpack will run first
heroku buildpacks:add --index 1 heroku/python

Nhập chế độ FullScreenen EXIT Mode FullScreen

Khi Heroku nhận thấy tệp

axios.post[url, { image: imageSrc, color: selectedColor }]

5, nó chạy

axios.post[url, { image: imageSrc, color: selectedColor }]

8, do đó cài đặt tất cả các gói cần thiết
Be Sure To Drop a DM on Twitter

Định cấu hình BuildPacks HEROKU NODE Ứng dụng DOCS DOCS Đây là TL: DR; phiên bản
LucidMach

Chúng ta có thể chạy Python trong React không?

Chúng ta có thể chạy Python trong Node JS không?

Chúng ta có thể sử dụng mã JavaScript trong React không?

Tôi có thể sử dụng Python với React Native không?