Home / Blog / Executando Python no seu Navegador com PyScript

Executando Python no seu Navegador com PyScript

Vinícius Ramos • 07/05/2022
Atualizado em: 26/02/2023

Cansado(a) de quebrar a cabeça para aprender a programar Python de verdade?

Conheça a melhor e mais completa formação de Python e Django e sinta-se um programador verdadeiramente competente. Além de Python e Django, você também vai aprender Banco de Dados, SQL, HTML, CSS, Javascript, Bootstrap e muito mais!

Quero aprender Python e Django de Verdade! Quero aprender!

Tire suas dúvidas diretamente com o professor

Projetos práticos voltados para o mercado de trabalho

Formação moderna com foco na prática profissional

Salve salve queridos Pythonistas!

Já pensou em poder executar código Python diretamente no browser?!

Pois é, com o PyScript agora isto é possível!

o PyScript foi introduzido na PyCon US 2022 e vem chamando bastante a atenção dos amantes do Python!

E aí, será que essa moda de executar código Python diretamente no seu navegador vai pegar?

Mas primeiro, vamos aprender como podemos escrever código Python dentro de código HTML!

Faça seu cafezinho e bora nessa!

Vá Direto ao Assunto…

De onde surgiu essa ideia maluca…
Como o PyScript funciona
Seu primeiro código Python no Browser com o PyScript
Indo além

De onde surgiu essa ideia maluca…

Durante uma palestra na PyCon US 2022, o CEO da Anaconda, Peter Wang, revelou um projeto bastante surpreendente: o PyScript.

O PyScript é uma biblioteca JavaScript que permite aos usuários criar aplicativos Python no navegador usando uma mistura de Python e HTML padrão.

O objetivo final do projeto é permitir que um público muito mais amplo (por exemplo, desenvolvedores front-end) se beneficie do poder do Python e de suas várias bibliotecas (estatística, ML/DL, etc.).

É possível usar alguns dos componentes de UI pré-definidos, como por exemplo: botões, contêineres, caixas de texto etc.

Além disso, não é necessário nos preocupar com a implantação, pois com o PyScript tudo acontecerá em navegadores da web.

Se você é Cientista de Dados, podem - por exemplo - compartilhar arquivos HTML contendo painéis, dashboards e/ou modelos com pessoas interessadas, que poderão executá-los em seus navegadores sem nenhuma configuração complicada!

Como o PyScript funciona

PyScript é construído em cima do Pyodide, que é uma biblioteca que transforma código Python em WebAssembly. O que traz a próxima pergunta: o que é WebAssembly?

WebAssembly é a tecnologia que possibilita escrever sites em Python. Ela usa uma linguagem de formato de texto .wat legível por humanos, que então é convertida para um formato .wasm binário que os navegadores podem executar. Graças a isso, podemos escrever código em qualquer linguagem, compilá-lo para o WebAssembly e executá-lo em um navegador da web!

Por enquanto, o PyScript suporta escrever e executar apenas código Python em um navegador. O objetivo para o futuro é que também ofereça suporte para outras linguagens de programação.

É também aqui que entra em jogo uma potencial limitação: atualmente, ao usar o PyScript, podemos usar apenas as bibliotecas suportadas pelo Pyodide. Você pode encontrar a lista completa aqui.

Está curtindo esse conteúdo?

Que tal receber 30 dias de conteúdo direto na sua Caixa de Entrada?

Sua assinatura não pôde ser validada.

Você fez sua assinatura com sucesso.

Seu primeiro código Python no Browser com o PyScript

Para começar a brincar com o PyScript, primeiro crie um arquivo index.html.

Em seguida, copie o seguinte código, que é o exemplo mais básico - o Hello World do PyScript:


1
2
3
4
5
6
7
8
9

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body> 
    <py-script> print('Hello, World!') </py-script> 
  </body>
</html>

Como podemos ver, o código Python está embutido no bloco <py-script>.

Abra o arquivo no navegador e verá o seguinte na saída:

Indo além

No segundo exemplo, faremos um pouco mais!

Usaremos o numpy para gerar números provenientes da distribuição Normal Padrão e, em seguida, plotá-los usando matplotlib.

Parece mentira, mas é possível!

O código é o seguinte (a explicação vem depois):


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <py-env>
        - numpy
        - matplotlib
      </py-env>
    </head>

  <body>
    <h1>Histograma de uma Distribuição Padrão</h1>
    <div id="grafico"></div>
    <py-script output="grafico">
import matplotlib.pyplot as plt
import numpy as np

np.random.seed(42)

rv = np.random.standard_normal(1000)

fig, ax = plt.subplots()
ax.hist(rv, bins=30)
fig
    </py-script>
  </body>
</html>

E o resultado é esse:

Agora, vamos explicar alguns pontos:

Usamos o bloco <py-env> para definir as bibliotecas que vamos utilizar como uma lista, com uma biblioteca por linha
Indicamos que vamos desenhar um gráfico especificando-o no bloco <py-script output=grafico”>.

Naturalmente, conforme nosso código cresce, é interessante deixar o código HTML mais limpo. Podemos fazer isso, separando o código Python em um arquivo .py, da seguinte forma:


1
2
3
4
5
6
7
8
9

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body> 
    <py-script src="/arquivo.py"> </py-script>
  </body>
</html>