И знаете, как интегрировать пакеты Python в PyScript.

Вы даже не представляете, что нам предстоит испытать. Генеральный директор Anaconda Питер Ван представил довольно неожиданный проект — PyScript на мероприятии PyCon 2022. Разработчики Anaconda разработали новый способ запуска скриптов Python в веб-браузере в HTML.

PyScript — это фреймворк для создания мощных программ Python в браузере с использованием интерфейса HTML. Чтобы прочитать полное руководство, перейдите в их официальный блог.

Установка и настройка

Нет такой установки каких-либо пакетов для использования PyScript.

Есть два способа установить и использовать PyScript

  1. Вы можете загрузить zip-файл и включить следующие строки кода в тег <head> в свой HTML-файл после распаковки.
...
<link rel="stylesheet" href="path/to/pyscript.css" />
<script defer src="path/to/pyscript.js"></script>
...

Обязательно переместите извлеченные файлы в корень основного HTML-файла.

2. Или вы можете просто включить эти строки прямо в свой <head>tag:

...
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
...

Теперь давайте перейдем к следующей части.

Настройка кода VS

Я рекомендую использовать VS Code в качестве редактора, так как он предоставляет расширения, лучшую подсветку синтаксиса и многое другое. После установки VS Code перейдите на вкладку расширений и установите следующие расширения —

  • pyscript :красивый синтаксис и фрагменты кода для PyScript.

После этого есть параметр, который вам нужно изменить в VS Code, чтобы мы не получали никаких ошибок, таких как «Ошибка отступа». Для этого перейдите в Файл › Настройки › Настройки. В строке поиска введите «Форматировать при сохранении»и снимите следующие флажки:

Причина этого в следующем: когда VS Code сохраняет файл, он форматирует текст и добавляет/удаляет пробелы, которые могут вызвать ошибки в Python.

Мы закончили со всеми настройками, теперь пришло время написать наш код.

Давайте создадим новый файл HTML и вставим в него следующий код:

Нажмите «Сохранить» и выберите параметр Go Live в правом нижнем углу:

Это откроет ссылку http://127.0.0.1:5500/index.html в вашем браузере по умолчанию. Вот результат:

Как вы можете видеть в коде, мы пишем наш код Python в теге <py-script></py-script>. Код должен быть написан так, как мы обычно пишем наш код на Python, без пробелов слева, если это не требуется.

Давайте немного поиграем с CSS и немного усложним код —

В приведенном выше коде, как вы можете видеть, мы использовали метод pyscript.write() вместо простого метода print() — это потому, что простой текст в качестве вывода не всегда хорош.

Чтобы применить CSS, мы создали пустой <div> и присвоили ему id. Добавьте соответствующий стиль css для идентификатора. Затем в методе write() он принимает idв качестве аргумента и с помощью f форматированияуказывает текст, который требуется для печати.

Вот результат в действии:

Работа с библиотеками

Да, вы также можете работать с модулями Python с помощью PyScript. Мы используем <py-env></py-env>в теге <head>.

Вы можете указать файл .whl с полным путем к вашей локальной системе следующим образом:

...
<py-env>
- './static/wheels/travertino-0.1.3-py3-none-any.whl'
</py-env>
...

Или вы можете напрямую включать встроенные в Пиодид модули в теге <head> вот так:

...
<py-env>
  - numpy
  - matplotlib
  - another module here
</py-env>
...

Вот пример:

Запуск страницы дает следующий результат:

Увы! Мы можем запускать скрипты Python в нашем HTML.



GitHub — pyscript/pyscript
PyScript — это Pythonic, альтернатива Scratch, JSFiddle или другим «простым в использовании платформам программирования, превращающая Интернет в…github. ком»



Если вам нужны дополнительные функции, вы можете просмотреть примеры в приведенном выше репозитории. Скоро будет выпущена официальная документация по PyScript. На данный момент вы можете обратиться к шаблону Getting-Started.MD на Github.

Want to Connect?
Follow me LinkedIn.