Executando scripts Python no browser

#HTML
#Python

Pyscript é um framework experimental desenvolvido pela Anaconda Inc. Com ele é possível executar scripts Python em código HTML. Neste breve artigo iremos apenas introduzir o framework, deixando que as pessoas interessadas busquem mais informações.

Em linhas gerais, além de rodar no browser, Pyscript é capaz de:

Executar pacotes populares de Python, inclusive pandas, numpy, matplotlib, entres outros;
Estabelecer comunicação bi-direcional com Javascript;
Permitir que sejam definidos quais pacotes e arquivos são necessários para que o script execute;
Utilizar componentes da UI, tais como inputs, buttons, etc, inclusive com tratamento de eventos, e
Muito mais...

Tudo isso é obtido sem necessidade de qualquer instalação. Basta incluir as seguintes linhas no <head>:

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

A fim de ilustrar o poder do Pyscript vamos apresentar um exemplo simples que plota um gráfico de linha no navegador utilizando matplotlib. Para tornar ainda mais simples o exemplo, os dados usados para a plotagem são definidos estaticamente. Mas, que fique claro que os dados podem ser obtidos de arquivos, inclusive na web utilizando [[fetch]].

Para o nosso teste vamos criar um arquivo index.html no VSCode e executar com o plugin LiveServer.

<html>
 <head>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-config>
  packages = ["matplotlib"]
</py-config>
 </head>

 <body>
<h1>Linguagens mais populares (TIOBE)</h1>
<div id="line-graph"></div>
<py-script>
  import matplotlib.pyplot as plt
  fig, ax = plt.subplots()
  x = ["Python", "C", "C++", "Java", "C#", "Javascript"]
  y = [13.3, 11.4, 10.6, 10.3, 7, 3.3]
  plt.plot(x, y, marker='o', linestyle='-', color='b')
  plt.xlabel('Linguagem')
  plt.ylabel('Avaliação')
  plt.title('Linguagem vs Avaliação')
  fig
  display(fig, target="line-graph")
 </py-script>
 </body>
</html>

Explicando alguns pontos:

1) A tag <py-config> é usada para declarar pacotes, arquivos, etc que serão necessários para o script executar. Neste caso, apenas um pacote será importado;

2) Uma <div> vazia é declarada, pois ela será o container no gráfico. O id definido é importante pois será referenciado no script;

3) A tag <py-script> é onde a mágica acontece. Aí está o script Python que será executado. Lembrando que está embutido no HTML apenas por simplicidade, mas pode residir em um arquivo .py e declarado na tag;

4) O último comando do script é display(fig, target="line-graph"), o qual exibe o gráfico na div que foi declarada.

O navegador deverá exibir o seguinte:

Não me julguem. Este gráfico não é apropriado para o conjunto de dados utilizado. Serviu apenas para apresentar o framework.

As possibilidades são inúmeras. Para acessar a documentação e exemplos veja o site da ferramenta.