Python se usa ampliamente para análisis de datos, aprendizaje automático, web scraping y mucho más. Pero, ¿sabía que también puede ejecutar código Python en HTML para crear aplicaciones web?

PyScript lo hace posible, permitiéndole ejecutar código Python en un navegador. Aprenda a agregar visualizaciones de matplotlib a una página web con la ayuda de varios ejemplos de PyScript-HTML.

¿Qué es PyScript?

PyScript es un marco web de código abierto que le permite ejecutar Python en el navegador web. Integra la interfaz HTML y el poder de Pyodide, WASM y tecnologías web modernas. PyScript se encuentra actualmente en la fase de desarrollo, pero ya tiene algunas características interesantes. Potencialmente, podría convertirse en una herramienta para crear potentes aplicaciones web.

El código utilizado en este proyecto está disponible en un repositorio GitHub y es gratis para su uso bajo la licencia MIT. Si desea echar un vistazo a una versión en vivo de este proyecto, puede consultar el diagrama de línea y gráfico de barras población.

instagram viewer

Configurar plantilla HTML

Antes de usar PyScript, debe configurar las cosas. Cree un nuevo archivo HTML y configure el modelo HTML. La mayoría IDE modernos proporcionar la funcionalidad para crear repeticiones automáticamente. Solo necesitas teclear doc o html y pulsa enter. También puede usar la siguiente plantilla para comenzar:

<!DOCTYPE html>
<html>
<cabeza>
<juego de caracteres meta="utf-8">
<meta http-equiv="Compatible con X-UA" contenido="IE = borde">
<título></title>
<metanombre="descripción" contenido="">
<metanombre="mirador" contenido="ancho = ancho del dispositivo, escala inicial = 1">
</head>
<cuerpo>

</body>
</html>

Agregue PyScript a HTML: "¡Hola, mundo!" Usando PyScript

Puede usar PyScript en su archivo HTML descargándolo o vinculando su CDN en su cabecera HTML. Agrega lo siguiente en el sección de su archivo HTML:

<enlace rel="hoja de estilo" href="https://pyscript.net/alpha/pyscript.css" />
<script aplazar src="https://pyscript.net/alpha/pyscript.js"></script>

Eso es todo lo que necesita hacer para configurar PyScript.

Para verificar si PyScript se integró correctamente, agregue la siguiente línea de código en el sección:

<cuerpo>
<py-script>impresión("¡Hola Mundo!")</py-script>
</body>

Abra el archivo HTML en cualquier navegador web y verá ¡Hola Mundo! impreso allí.

Cargar biblioteca Matplotlib

Necesitas usar el etiquetas para importar módulos de Python. Carga el matplotlib módulo en el sección de su archivo HTML usando el siguiente fragmento:

<py-env>
- matplotlib
</py-env>

Mostrar un diagrama de líneas en el navegador usando PyScript

Crear un con un identificación. Necesitarás el identificación para usarlo con el producción atributo de la etiqueta.

<ID de división ="matplotlib-lineplot"></div>

Necesitas escribir el código de Python en el etiqueta. Asigna lo anterior identificación hacia producción atributo de la etiqueta.

<salida de secuencia de comandos py ="matplotlib-lineplot">
# Código Python
</py-script>

Ahora está listo para escribir el código de Python para crear un gráfico de líneas:

<cuerpo>
<ID de división ="matplotlib-lineplot"></div>
<salida de secuencia de comandos py ="matplotlib-lineplot">
# Código Python

# importando la biblioteca matplotlib
importar matplotlib.pyplot como por favor
higo, hacha = plt.subplots()
# eje x
x = ["Pitón", "C++", "JavaScript", "Golang"]
# eje y
y = [10, 5, 9, 7]
plt.plot (x, y, marcador='o', estilo de línea='-', color='b')
# Nombrando la etiqueta x
plt.xlabel('Idioma')
# Nombrar la etiqueta y
plt.ylabel('Puntaje')
# Nombrar el título de la trama
plt.titulo('Idioma vs Puntuación')
higo
</py-script>
</body>

Obtendrá la siguiente figura representada cuando abra el archivo HTML en el navegador web:

Mostrar un diagrama de barras en el navegador usando PyScript

Puede crear un gráfico de barras en el navegador utilizando el siguiente fragmento de código de Python:

<cuerpo>
<ID de división ="matplotlib-barra"></div>
<salida de secuencia de comandos py ="matplotlib-barra">
# Código Python

# importando la biblioteca matplotlib
importar matplotlib.pyplot como por favor
higo, hacha = plt.subplots()
# eje x
x = ["Pitón", "C++", "JavaScript", "Golang"]
# eje y
y = [10, 5, 9, 7]
por favor.bar(X, y)
# Nombrando la etiqueta x
plt.xlabel('Idioma')
# Nombrar la etiqueta y
plt.ylabel('Puntaje')
# Nombrar el título de la trama
plt.titulo('Idioma vs Puntuación')
higo
</py-script>
</body>

Este código produce el siguiente resultado:

¿Qué futuro tiene PyScript?

Puede crear cuadros de mando y gráficos potentes en HTML utilizando bibliotecas PyScript y Python como Matplotlib, Bokeh, Seaborn, etc. Sin embargo, probablemente debería abstenerse de usarlo en producción, ya que está bajo un fuerte desarrollo. El software actualmente tiene múltiples problemas, incluido el tiempo de carga y la usabilidad. En el futuro, PyScript puede abrir puertas para ejecutar y realizar operaciones de Python en la web de manera más fluida.

Una de las principales razones para desarrollar PyScript fue ayudar a los científicos de datos a visualizar datos en la web. Si es un científico de datos, puede aprovechar el poder de PyScript combinándolo con bibliotecas de ciencia de datos como Pandas y NumPy.