Рубрики
Без рубрики

Реагирование интернет-интерфейса для сценариев Python на узле. Js.

Если вы знакомы с Node.js, вы знаете, что он ультра быстрый ⚡ Ultra Callable ⚖️ Ultra … Теги за новичками, JavaScript, Python, WebDev.

Если вы знакомы с node.js , знаешь тот это

  1. Ультра быстрый ⚡.
  2. Ультра масштабируемый ⚖️.
  3. Ультра мощный 💥.
  4. Ultra Simple 😁.

и Python имеет отличное Научные вычислительные библиотеки [Numpy, Pandas и т. Д.] которые делают его по выбору для ученых, ученых данных, технические инженеры для обучения и т. Д. Отказ

Некоторое время назад я хотел Исследуйте компьютерное зрение что-то, что я был действительно очарован некоторое время.

Так что я начал учиться CV и написал сценарий Python, который взял бы изображение и Удалить цветные каналы Чтобы он выглядел так, как будто Цветной фильтр был применен к этому .

Это было Super Cool И я хотел повеселиться маленьким Веб-сайт/Webui от этого Так что я мог бы Поделиться Это до остальных Мир Отказ

Будучи самоучкой Meern Stack Разработчик, я начал исследовать, как можно Объединить Python и JavaScript Отказ

Неделя или два Позже , Я это сделал.

И этот блог – это документация о том, как я решил эту проблему.

Я также включаю здесь, полный код, который я использовал для развертывания моего приложения в Heroku Живое развертывание: https://color-filter.netlify.app Исходный код: https://github.com/LucidMach/ColorFilter

Как это работает

Проект имеет 4 фазы

  1. Веб-камера -> React -> Nodejs
  2. Nodejs Py Child Process
  3. Фактическая программа Python
  4. Nodejs -> React -> Холст

Фаза 1: Веб-камера -> Реакция -> Nodejs

Мы начинаем сначала извлекать изображение из веб-камеры, мы можем использовать обычную HTML5 Navigator.GetUsermedia API. Но есть реактивный пакет, который упрощает весь процесс.

yarn add react-webcam

Мы можем использовать getscreenshot ({ширина: 1920, высота: 1080}) взять 1080P Снимок пользователя.

🔗: React-Webcam Docs

Теперь, когда у нас есть снимок (как base64 строка), мы должны отправить его на сервер

Любой браузер может Только Беги JavaScript на клиенте, поэтому мы должны запустить Python на сервере

Мы делаем почтовый запрос

axios.post(url, { image: imageSrc, color: selectedColor })

Я также отправляю выбранный цвет, так как мне нужно для приложения что я строителью

По умолчанию Сервер (промежуточное программное обеспечение BodyParser) ограничения Размер данных он может получить (пост) на 1 МБ и картинки обычно большие

Если вы не использовали оптимизатор изображения, как я делал в Предыдущий проект

Давайте нажимаем ограничения

app.use(bodyParser.json({ limit: "5mb" }));

Также нам нужно извлечь изображение из строки Base64

Пример Base64 Png String Данные: изображение/PNG; BASE64, IVBORW0KGGOAAAAANAAASUHEUGAAAKSAAADVCAMAAAAFHVCAAAAAGFBMVEVY

Фактическое base64 изображение ivborw0kgggoaaaaaaaaaaaaksaaaadvcamaaaaaaaaaaadvcamaaaaaaaaaaaAagfbmvevy

const base64Image = req.body.image.split(";base64,").pop();

Фаза 2: Nodejs Py Child Process

Теперь, когда у нас есть изображение обратно на сервер, нам нужно запустить сценарий Python

Если вы когда-либо Пройденные параметры ( argv ) к сценарию Python/встроенный инструмент CLI , что мы будем делать, очень похоже

До этого давайте сохраним изображение временно, потому что мы не можем пройти изображения AS Argv (параметр сценария)

const fs = require("fs");

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

Теперь мы породим детский процесс Python, мы делаем это моим представляющим команды терминала к массиву

const { spawn } = require("child_process");

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

Каждый сценарий Python Rubabily отправляет данные обратно в терминал/консоль

Чтобы прочитать журнал консоли PY, мы создаем функцию обратного вызова

var data2send

py.stdout.on("data", (data) => {
    data2send = data.toString();
});

console.log(data2send);

Фаза 3: Фактическая программа Python

Сценарий Python выполняется в моем случае, в моем случае это Numpy Script, который условно удаляет цветные каналы

Если вы заинтересованы, вы можете проверить Исходный код на Github.

Фаза 4: Nodejs -> Реакция -> Холст

Теперь, когда Py Child Complic заканчивается, нам нужно кодировать изображение обратно в Base64 и отправить обратно ответ

Мы можем сделать это, привлечение обратного вызова, когда дочерний процесс заканчивается

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 });
  });

Бонусная фаза: Развертывание Heroku

Эта самая важная часть любого проекта

Это больше не только «работает на вашей машине»

Процесс в основном то же самое, что и вы развертываете приложения Vanilla Node + Config для Python ChildProcess

  1. Стандартный развертывающий узел к Heroku Areoku узел приложения развертывания документов

  2. Добавить пакеты Python В мире JavaScript у нас есть package.json который рассказывает каждый экземпляр узла всех пакетов, необходимых для запуска

Мы делаем что-то подобное для Python под названием требования .txt повторить это поведение.

Это будет выглядеть сортировку как .gitignore файл

// requirements.txt

numpy
cv2
matplotlib

Когда Heroku замечает требования .txt Файл он работает PIP Установка -R требования. atxt , следовательно, устанавливая все необходимые пакеты

  1. Настроить Buildpacks Areoku узел приложения развертывания документов Вот TL: DR; версия
// 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

Если вы ❤️ Этот блог пост Обязательно бросить DM на Твиттер

✌️, Lucidmach.

Оригинал: “https://dev.to/lucidmach/react-ui-for-python-scripts-on-node-js-1dfa”

Читайте ещё по теме: