Последнее обновление 06.01.2023 — Василий Иванов
Python широко используется для анализа данных, машинного обучения, просмотра веб-страниц и многого другого. Но знаете ли вы, что вы также можете запускать код Python в HTML для создания веб-приложений?
PScript делает это возможным, позволяя запускать код Python в браузере. Узнайте, как добавить визуализацию matplotlib на веб-страницу с помощью нескольких примеров PyScript-HTML.
Что такое ПиСкрипт?
PyScript — это веб-фреймворк с открытым исходным кодом, который позволяет запускать Python в веб-браузере. Он объединяет интерфейс HTML и мощь Pyodide, WASM и современных веб-технологий. PyScript в настоящее время находится в стадии разработки, но уже имеет некоторые интересные функции. Потенциально он может стать инструментом для создания мощных веб-приложений.
Код, используемый в этом проекте, доступен в репозитории GitHub, и вы можете использовать его бесплатно по лицензии MIT. Если вы хотите взглянуть на живую версию этого проекта, вы можете ознакомиться с демонстрациями линейного и гистограммного графиков.
Настройка HTML-шаблона
Прежде чем использовать PyScript, вам нужно все настроить. Создайте новый файл HTML и настройте шаблон HTML. Большинство современных IDE предоставляют возможность автоматического создания шаблонов. Вам нужно только ввести doc или html и нажать Enter. Вы также можете использовать следующий шаблон для начала работы:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>
Добавьте PyScript в HTML: «Привет, мир!» Использование ПиСкрипта
Вы можете использовать PyScript в своем HTML-файле, либо загрузив его, либо связав его CDN в своем HTML-заголовке. Добавьте следующее в раздел
вашего HTML-файла:<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
Это все, что вам нужно сделать, чтобы настроить PyScript.
Чтобы убедиться, что PyScript был успешно интегрирован, добавьте следующую строку кода в раздел
:<body>
<py-script>print("Hello, World!")</py-script>
</body>
Откройте файл HTML в любом веб-браузере, и вы увидите Hello, World! напечатано там.
Загрузить библиотеку Matplotlib
Вам нужно использовать теги
<py-env>
- matplotlib
</py-env>
Отображение линейного графика в браузере с использованием PyScript
Создайте
<div id="matplotlib-lineplot"> </div>
Вам нужно написать код Python в теге
<py-script output="matplotlib-lineplot">
# Python Code
</py-script>
Теперь вы готовы написать код Python для создания линейного графика:
<body>
<div id="matplotlib-lineplot"></div>
<py-script output="matplotlib-lineplot">
# Python Code
# importing the matplotlib library
import matplotlib.pyplot as plt
fig, ax = plt.subplots()
# x axis
x = ["Python", "C++", "JavaScript", "Golang"]
# y axis
y = [10, 5, 9, 7]
plt.plot(x, y, marker='o', linestyle='-', color='b')
# Naming the x-label
plt.xlabel('Language')
# Naming the y-label
plt.ylabel('Score')
# Naming the title of the plot
plt.title('Language vs Score')
fig
</py-script>
</body>
Вы получите следующий рисунок, когда откроете файл HTML в веб-браузере:
Отображение гистограммы в браузере с помощью PyScript
Вы можете создать гистограмму в браузере, используя следующий фрагмент Python:
<body>
<div id="matplotlib-bar"></div>
<py-script output="matplotlib-bar">
# Python Code
# importing the matplotlib library
import matplotlib.pyplot as plt
fig, ax = plt.subplots()
# x axis
x = ["Python", "C++", "JavaScript", "Golang"]
# y axis
y = [10, 5, 9, 7]
plt.bar(x, y)
# Naming the x-label
plt.xlabel('Language')
# Naming the y-label
plt.ylabel('Score')
# Naming the title of the plot
plt.title('Language vs Score')
fig
</py-script>
</body>
Этот код производит следующий вывод:
Какое будущее у PScript?
Вы можете создавать мощные информационные панели и диаграммы в HTML, используя библиотеки PyScript и Python, такие как Matplotlib, Bokeh, Seaborn и т. д. Тем не менее, вам, вероятно, следует воздержаться от использования его в производстве, поскольку он находится в стадии активной разработки. В настоящее время у программного обеспечения есть несколько проблем, включая время загрузки и удобство использования. В будущем PyScript может открыть ворота для более плавного запуска и выполнения операций Python в Интернете.
Одной из основных причин разработки PyScript было желание помочь специалистам по данным визуализировать данные в Интернете. Если вы специалист по данным, вы можете использовать возможности PyScript, комбинируя его с библиотеками обработки данных, такими как Pandas и NumPy.
