Использование Python в браузере для обработки изображений

Сегодня приложения или веб-приложения более популярны, чем настольные приложения. Вы можете делать почти все в своем браузере и не нужно ничего устанавливать. Любое веб-приложение, написанное на Javascript, не требует установки дополнительного программного обеспечения благодаря мощному движку приложений V8, таких как Chrome. Но еще несколько месяцев назад только JavaScript был тем языком, который можно использовать для написания веб-приложений. В случае таких вариантов использования, как машинное обучение или обработка изображений, для выполнения внутренней обработки используется отдельный сервер. В некоторых случаях разработчики используют такие фреймворки, как TensorFlow JS, для разработки таких приложений, но, тем не менее, версия Python TensorFlow является более зрелой и популярной в сообществе из-за популярности Python в этой области. В большинстве случаев API обычно развертывается в облаке, что стоит дороже и менее безопасно, чем полностью локальный сервер. Следовательно, было бы хорошо, если бы у нас был способ запуска python в браузере.

В этой статье объясняется, как можно решить вышеуказанную проблему, и мы можем запустить python в браузере с помощью Pyscript. В конце этой статьи вы узнаете, как обрабатывать изображения в браузере с помощью pyscript.

ПиСкрипт

PySript — это технология, разработанная командой anaconda, которая предназначена для запуска Python в веб-браузере. Он использует веб-сборку для запуска Python. Код, который мы пишем на Python, компилируется в веб-сборку и выполняется нашим браузером. PyScript основан на pyiodide, который предоставляет порт Python для веб-сборки. Pyscript представляет собой отдельный JS-файл, который можно добавить на веб-страницу, что в свою очередь загружает всю среду выполнения Python. Поскольку pyscript основан на pyiodide, можно использовать большинство библиотек, доступных в pyiodide. В настоящее время pyscript все еще находится на стадии разработки, поэтому некоторые функции могут не работать в будущих версиях или работать по-другому.

Основы ПиСкрипта

Давайте изучим некоторые основы PyScript, прежде чем разрабатывать настоящее приложение. PyScript можно рассматривать как HTML-страницу с Python, которая выполняется средой выполнения браузера. Это реализовано с помощью HTML-тегов.

Тег ‹py-script›

Тег pyscript, как и любой HTML-тег, начинается с ‹py-script› и заканчивается на ‹/py-script›. В промежутках между этим мы пишем весь код Python, который мы хотим выполнить при открытии страницы.

Тег ‹py-env›

Тег pyscript, как и любой HTML-тег, начинается с ‹py-env› и заканчивается на ‹/py-env›. Этот тег используется для импорта внешних библиотек, которые используются в нашем исходном коде. Он указывает среде pyiodide загрузить перечисленные библиотеки из источника. Ниже приведен пример импорта внешних библиотек matplotlib,numpy,imageio и scipy.

<py-env>
    - matplotlib
    - imageio
    - numpy
    - scipy
</py-env>

Обработка DOM в PyScript

PyScript может манипулировать различными объектами в HTML-документе/веб-странице. Интерпретатор Python может получить доступ ко всем объектам на странице, таким как кнопка ввода, текстовые области и т. д. Доступ к объекту/элементам на странице можно получить с помощью класса Element и документа из js модуль PyScript. Ниже приведен пример, в котором мы используем функцию манипулирования DOM в PyScript.

<py-script>
from js import document
def say_hello(*args,**kwargs):
  name_txt=Element('Name').value
  message_field = document.getElementById("message_txt")
  message_field.value="Hello "+name_txt
</py-script>

В приведенной выше функции мы получаем значение, содержащееся в текстовом поле с именем Имя, идобавляем к нему приветствие. Наконец, мы получаем доступ к текстовому полю с идентификатором message_txt с помощью getElementById и устанавливаем его значение как новый текст.

Обработка изображений в PyScript

Давайте сначала посмотрим код, а затем разберем его по частям.

Кредиты: часть HTML-CSS, используемая в этом коде, была вдохновлена ​​учебником 1littlecoder pyscript на youtube.

Код Пояснение

• В строках 11–12 мы импортируем pyscript CSS и среду выполнения pyscript, используя теги link и script соответственно.
• В строках 13–18 мы импортируем внешние библиотеки в среду PyScript с помощью тега ‹py-env›.
• В строках 22–53 мы написали код CSS для стилизации нашего текстового поля ввода и объекта раскрывающегося списка в HTML-части.
• В строках 57–74 мы используем базовый HTML для создания тега HTML. Обратите внимание, что в теге формы мы установили атрибут onsubmit для возврата false, что означает, что мы не хотим переключать страницы нажатием кнопки отправки. В форме HTML есть три объекта, один из которых представляет собой текстовое поле, которое используется для ввода URL-адреса изображения, которое необходимо обработать, другой объект представляет собой раскрывающийся список, который используется для выбора типа операции обработки изображения, которую мы хотим выполнить. . Последний объект — это кнопка отправки, которая вызывает нашу функцию Python, которая выполняет всю обработку. Атрибут pys-onClick, который является атрибутом, специфичным для pyscript, используется для вызова нашей функции python, подопределенной внутри pyscript. Помимо тега формы мы можем заметить еще два тега div, один из которых предназначен только для метки, а другой элемент div содержит тег img, которым мы в конечном итоге будем манипулировать для отображения нашего изображения.
• Из строк 76–84 мы импортируем необходимые библиотеки для выполнения обработки изображений. Можно заметить, что мы также импортируем модуль async и модуль pyiodide, но это не упоминается в теге ‹py-env›. Причина в том, что эти библиотеки являются внутренними библиотеками python/pyscript.
• В строках 86–110 мы написали некоторые функции обработки изображений, используя numpy и scipy, поскольку opencv в то время не был доступен в pyiodide.
• В строке 114 мы определяем асинхронную функцию с именем sub.
• В строках 115 и 116 мы получаем доступ к значениям текстового поля URL-адреса изображения и раскрывающегося списка выбора обработки изображения.
• В строках 117–119 мы получаем изображение из URL-адреса с помощью функции pyfetch pyiodide, затем мы преобразуем байты, полученные в ответе, в буфер с помощью BytesIO и читаем его как изображение с помощью Функция imread. Наконец, мы конвертируем изображения в формат numpy.
• Из строк 120–137 мы вызываем функцию в соответствии с нашим выбором в выпадающем списке.
• В строке 141 мы инициализируем буфер BytesIO. В строке 142 мы сохраняем наш график в этот буфер. В строке 143 мы указываем на начало буфера.
• В строках 144–146 мы кодируем изображение как строку base64. Затем мы получаем доступ к тегу img и устанавливаем его атрибут src с помощью этой строки. Установка этого параметра помещает данные изображения в тег img, который отображается браузером так же, как и любой тег img.

Приведенный выше код можно сохранить как HTML-документ и открыть в Chrome.

Вывод приложения

Выше показана работа приложения pyscript, которое мы создали. URL-адрес в текстовом поле imageurl — это URL-адрес, который случайным образом возвращает изображение кошки. Еще одна вещь, на которую следует обратить внимание, это то, что URL-адрес в браузере указывает непосредственно на HTML-файл на моем диске, поскольку я сохранил этот файл как html-документ и открыл его в Chrome. В некоторых руководствах они сначала создают интерфейсный сервер и запускают приложение. В этом случае мы могли бы иметь прямой доступ к файловой системе системы. Но создание сервера потребовало бы некоторой установки, что повредило бы переносимости PyScript, поэтому я решил сделать это по-другому, читая изображения из URL-адреса.

Ссылки и дополнительная литература

Если вы добрались сюда, поздравляю, вы только что узнали удивительную концепцию. Если вам понравилось, поставьте лайк статье и нажмите кнопку «Подписаться», чтобы получать больше таких блогов. Это мотивировало бы меня продолжать исследования и вести блоги. Не стесняйтесь задавать любые вопросы или сомнения в разделе комментариев, я буду рад помочь.