🐍 Interpretador Python Web

Uma aplicação web moderna e completa que permite executar código Python diretamente no navegador usando Pyodide (WebAssembly), sem necessidade de backend ou servidor.

🌐 Acesse a aplicação: https://icti-python.vercel.app/
📦 Repositório: https://github.com/LuisT-ls/interpreta-python

✨ Funcionalidades

🎯 Execução de Código

✅ Execução 100% no cliente - Todo o processamento acontece no navegador, sem envio de dados para servidor
✅ Suporte completo ao Python 3.12 - Execute código Python moderno com todas as funcionalidades
✅ Captura de stdout e stderr - Visualize saídas e erros em tempo real
✅ Formatação de tracebacks - Erros Python são exibidos de forma clara e legível com mapeamento preciso de linhas
✅ Suporte a múltiplos tipos de erro - Detecta e formata SyntaxError, IndentationError, TypeError, ValueError, NameError e muitos outros
✅ Mapeamento de linhas de erro - Erros são mapeados corretamente para as linhas originais do código, mesmo com código transformado
✅ Botão de parar execução - Interrompa códigos em loop infinito ou execuções longas com KeyboardInterrupt
✅ Suporte a input() - Sistema de input inline no terminal, sem popups do navegador
✅ Suporte a imports - Imports são tratados separadamente e executados antes do código principal

📝 Editor de Código

✅ Syntax highlighting - Destaque de sintaxe para palavras-chave, funções built-in, strings, números e operadores
✅ Números de linha - Visualização clara das linhas do código
✅ Validação em tempo real - Detecta erros de sintaxe enquanto você digita (com debounce de 800ms)
✅ Destaque visual de erros - Linha com erro é destacada em vermelho no editor
✅ Auto-complete de caracteres - Parênteses, colchetes, chaves e aspas são fechados automaticamente
✅ Indentação inteligente - Tab para indentar, Enter mantém indentação e adiciona 4 espaços após : (indentação automática)
✅ Múltiplas abas - Trabalhe com vários arquivos simultaneamente
✅ Nomes dinâmicos de abas - Cada nova aba recebe um nome sequencial (editor.py, editor_2.py, etc.)
✅ Fechar abas - Feche abas individuais mantendo outras abertas
✅ Editor responsivo - Adapta-se perfeitamente a diferentes tamanhos de tela

💾 Importação e Exportação

✅ Exportar código - Salve seu código em arquivo .py
✅ Importar código - Carregue arquivos .py diretamente no editor
✅ Exportar múltiplas abas - Exporte todas as abas como arquivo .zip
✅ Menu interativo de exportação - Escolha entre exportar apenas a aba atual ou todas as abas

🎨 Interface e Layout

✅ Layout customizável - Posicione o terminal abaixo, à direita, à esquerda ou acima do editor
✅ Preferência salva - Sua escolha de layout é salva no navegador
✅ Dark mode - Tema escuro com toggle manual
✅ Design moderno - Interface inspirada no VSCode com glassmorphism
✅ Terminal estilizado - Visual de terminal com fundo preto e texto verde
✅ Responsivo - Funciona perfeitamente em desktop, tablet e mobile

📊 Visualização de Dados

✅ Suporte a Matplotlib - Renderize gráficos do matplotlib diretamente na interface
✅ Captura automática de plots - Gráficos gerados com plt.show() são exibidos automaticamente no terminal
✅ Múltiplos gráficos por execução - Suporte a múltiplos plots na mesma execução
✅ Renderização em canvas - Gráficos renderizados com alta qualidade em HTML5 Canvas

📁 Sistema de Arquivos Virtual

✅ FileSystem completo - Sistema de arquivos virtual usando Emscripten FS do Pyodide
✅ Criar arquivos e pastas - Interface gráfica para criar arquivos e diretórios
✅ Navegação por diretórios - Navegue pela estrutura de arquivos com breadcrumbs
✅ Editar arquivos - Editor modal para editar conteúdo de arquivos
✅ Deletar arquivos e pastas - Remova arquivos e diretórios com confirmação
✅ Integração com Python - Use open() para ler/escrever arquivos criados na interface
✅ Sidebar retrátil - Painel lateral que pode ser aberto/fechado
✅ Botão flutuante de acesso rápido - Acesso rápido ao sistema de arquivos via botão flutuante

📦 Gerenciador de Pacotes

✅ Interface gráfica para Pip - Instale pacotes Python diretamente pela interface
✅ Busca de pacotes - Busque pacotes populares do PyPI
✅ Categorias de pacotes - Pacotes organizados por categoria (Data Science, Web, Utils, etc.)
✅ Lista de pacotes instalados - Visualize todos os pacotes já instalados
✅ Instalação com feedback visual - Status de instalação em tempo real
✅ Desinstalação de pacotes - Remova pacotes não mais necessários
✅ Botão flutuante de acesso rápido - Acesso rápido ao gerenciador via botão flutuante

⌨️ Produtividade

✅ Command Palette - Acesse todas as funcionalidades via atalho de teclado (Ctrl+K / Cmd+K)
✅ Zen Mode - Modo foco que esconde elementos da interface para máxima concentração
✅ Atalhos de teclado - Navegação rápida por comandos e ações

⚡ Performance e UX

✅ Carregamento assíncrono - Pyodide carrega em background com feedback visual
✅ Saída em tempo real - Os print() aparecem imediatamente durante a execução usando handlers batched
✅ Input inline - Digite valores diretamente no terminal, sem interrupções
✅ Auto-scroll - Terminal rola automaticamente para mostrar a saída mais recente
✅ Animações suaves - Transições e efeitos visuais modernos
✅ Debounce inteligente - Validação de sintaxe usa debounce de 800ms para evitar processamento excessivo

🧪 Qualidade e Testes

✅ Testes unitários - Cobertura de testes para lógica crítica (parser de erros)
✅ Jest configurado - Ambiente de testes completo com Jest e Testing Library
✅ Cobertura de código - Relatórios de cobertura disponíveis

🛠️ Tecnologias

Este projeto utiliza as seguintes tecnologias:

Next.js 16 - Framework React com App Router e Turbopack
React 19 - Biblioteca JavaScript para interfaces
TypeScript 5.6 - Superset JavaScript com tipagem estática
Tailwind CSS - Framework CSS utility-first
Pyodide 0.26.1 - Python para WebAssembly
JSZip - Biblioteca para criar arquivos ZIP no navegador
CodeMirror - Editor de código com syntax highlighting avançado
React Resizable Panels - Painéis redimensionáveis para layout flexível
Jest - Framework de testes JavaScript
Testing Library - Utilitários para testes de componentes React
Editor customizado - Editor de código Python com syntax highlighting e validação em tempo real implementado do zero

📦 Instalação

Pré-requisitos

Node.js 20.9 ou superior
npm ou yarn
Navegador moderno (Chrome, Firefox, Safari, Edge)

Passo a Passo

Clone o repositório:

git clone https://github.com/LuisT-ls/interpreta-python.git
cd interpreta-python

Instale as dependências:

npm install

Execute o servidor de desenvolvimento:

npm run dev

💡 Dica: Next.js 16 usa o Turbopack por padrão, oferecendo tempos de compilação muito mais rápidos. Se precisar usar Webpack, execute npm run dev -- --webpack.

Acesse a aplicação:
- Abra seu navegador e vá para http://localhost:3000

💡 Como Usar

Executando Código Python

Aguarde o carregamento - O Pyodide será carregado automaticamente ao abrir a página
Digite ou cole seu código - Use o editor para escrever código Python
Clique em "Executar Código" - O código será executado no navegador
Veja a saída - Os resultados aparecerão no terminal em tempo real

Trabalhando com Múltiplas Abas

Criar nova aba - Clique no botão "+" ao lado do nome da aba atual
Alternar entre abas - Clique no nome da aba desejada
Fechar aba - Clique no "×" na aba (não é possível fechar a última aba)

Importando e Exportando Código

Exportar:

Clique no ícone de download no topo do editor
Se houver múltiplas abas, escolha exportar apenas a atual ou todas

Importar:

Clique no ícone de upload no topo do editor
Selecione um arquivo .py do seu computador
O código será carregado na aba atual

Customizando o Layout

Clique no seletor de layout no header
Escolha uma das opções:
- Direita (padrão) - Terminal ao lado direito do editor
- Esquerda - Terminal ao lado esquerdo do editor
- Abaixo - Terminal abaixo do editor
- Acima - Terminal acima do editor

Sua preferência será salva automaticamente no navegador.

Usando Input do Usuário

Quando seu código contém input(), um campo de texto aparecerá inline no terminal:

nome = input("Digite seu nome: ")
print(f"Olá, {nome}!")

Digite o valor solicitado no campo que aparece no terminal
Pressione Enter para enviar
O código continuará a execução com o valor fornecido

Trabalhando com Sistema de Arquivos Virtual

O sistema de arquivos virtual permite criar, editar e gerenciar arquivos que podem ser acessados pelo Python:

Abrir o Sistema de Arquivos - Clique no botão flutuante de pasta no lado esquerdo da tela
Criar arquivo/pasta - Use o botão "+" na toolbar
Navegar - Clique em pastas para navegar, use breadcrumbs para voltar
Editar arquivo - Clique em um arquivo para abrir o editor
Usar no Python - Acesse arquivos criados usando open():

# Criar e escrever em arquivo
with open('dados.txt', 'w') as f:
    f.write('Olá, mundo!')

# Ler arquivo
with open('dados.txt', 'r') as f:
    conteudo = f.read()
    print(conteudo)

Instalando Pacotes Python

Use o Gerenciador de Pacotes para instalar bibliotecas Python suportadas pelo Pyodide:

Abrir o Gerenciador - Clique no botão flutuante de cubo 3D abaixo do botão de arquivos, ou use o Command Palette (Ctrl+K)
Buscar pacote - Digite o nome do pacote na barra de busca
Filtrar por categoria - Use os filtros para encontrar pacotes por categoria
Instalar - Clique em "Instalar" ao lado do pacote desejado
Usar no código - Após instalação, importe normalmente:

import pandas as pd
import numpy as np

# Agora você pode usar pandas e numpy!

Criando Gráficos com Matplotlib

Gráficos do matplotlib são renderizados automaticamente na interface:

import matplotlib.pyplot as plt
import numpy as np

# Criar dados
x = np.linspace(0, 10, 100)
y = np.sin(x)

# Criar gráfico
plt.figure(figsize=(10, 6))
plt.plot(x, y)
plt.title('Gráfico de Seno')
plt.xlabel('X')
plt.ylabel('Y')
plt.grid(True)

# Exibir (será renderizado automaticamente)
plt.show()

Usando o Command Palette

Acesse rapidamente todas as funcionalidades via Command Palette:

Abrir - Pressione Ctrl+K (Windows/Linux) ou Cmd+K (Mac)
Navegar - Use as setas ou digite para filtrar comandos
Executar - Pressione Enter para executar o comando selecionado

Comandos disponíveis:

Executar código
Parar execução
Toggle Zen Mode
Abrir/Fechar Sistema de Arquivos
Abrir Gerenciador de Pacotes
Alternar tema
E mais...

Modo Zen

O Modo Zen remove elementos da interface para focar apenas no código:

Ativar - Use o Command Palette (Ctrl+K) e selecione "Zen Mode"
Focar - A interface ficará minimalista, mostrando apenas o essencial
Desativar - Clique no botão "Sair do Modo Zen" que aparece no topo

📚 Exemplos de Código

Exemplo Básico

print("Olá, mundo!")
print("Python está funcionando! 🐍")

numeros = [1, 2, 3, 4, 5]
soma = sum(numeros)
print(f"A soma de {numeros} é {soma}")

for i in range(3):
    print(f"Contagem: {i}")

Exemplo com Input

# Solicitar dados do usuário
nome = input("Digite seu nome: ")
idade = int(input("Digite sua idade: "))

print(f"\nOlá, {nome}!")
print(f"Você tem {idade} anos.")
print(f"Em 10 anos, você terá {idade + 10} anos.")

Exemplo com Listas e Loops

# Criar e manipular listas
vetor = []

for i in range(4):
    numero = float(input(f"Digite o {i+1}° número: "))
    vetor.append(numero)

print("Vetor armazenado:", vetor)
print(f"Soma: {sum(vetor)}")
print(f"Média: {sum(vetor) / len(vetor)}")

Exemplo com Funções

def calcular_fatorial(n):
    if n <= 1:
        return 1
    return n * calcular_fatorial(n - 1)

numero = int(input("Digite um número: "))
resultado = calcular_fatorial(numero)
print(f"O fatorial de {numero} é {resultado}")

Exemplo com Matplotlib

import matplotlib.pyplot as plt
import numpy as np

# Criar dados
x = np.linspace(0, 2 * np.pi, 100)
y1 = np.sin(x)
y2 = np.cos(x)

# Criar gráfico
plt.figure(figsize=(10, 6))
plt.plot(x, y1, label='Seno', linewidth=2)
plt.plot(x, y2, label='Cosseno', linewidth=2)
plt.title('Gráfico de Funções Trigonométricas')
plt.xlabel('X (radianos)')
plt.ylabel('Y')
plt.legend()
plt.grid(True, alpha=0.3)

# Exibir (será renderizado automaticamente)
plt.show()

Exemplo com Sistema de Arquivos

# Criar arquivo de dados
dados = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

with open('numeros.txt', 'w') as f:
    for numero in dados:
        f.write(f"{numero}\n")

# Ler e processar
with open('numeros.txt', 'r') as f:
    linhas = f.readlines()
    numeros = [int(linha.strip()) for linha in linhas]

print(f"Números lidos: {numeros}")
print(f"Soma: {sum(numeros)}")
print(f"Média: {sum(numeros) / len(numeros)}")

Exemplo com Pacotes Externos

# Após instalar pandas via Gerenciador de Pacotes
import pandas as pd

# Criar DataFrame
dados = {
    'Nome': ['Alice', 'Bob', 'Charlie'],
    'Idade': [25, 30, 35],
    'Cidade': ['São Paulo', 'Rio de Janeiro', 'Belo Horizonte']
}

df = pd.DataFrame(dados)
print(df)

# Operações com pandas
print(f"\nMédia de idades: {df['Idade'].mean()}")
print(f"\nPessoas em São Paulo: {len(df[df['Cidade'] == 'São Paulo'])}")

📁 Estrutura do Projeto

interpreta-python/
├── app/
│   ├── img/
│   │   └── favicon/          # Favicons e ícones
│   ├── layout.tsx            # Layout principal da aplicação (metadata, fontes)
│   ├── page.tsx              # Página principal (orquestrador, integração de componentes)
│   ├── globals.css            # Estilos globais
│   ├── robots.ts             # Configuração de robots.txt
│   └── sitemap.ts            # Configuração de sitemap.xml
├── components/
│   ├── PythonEditor.tsx       # Editor de código com syntax highlighting, validação e auto-complete
│   ├── OutputTerminal.tsx    # Terminal de saída com input inline e renderização de plots
│   ├── MatplotlibPlot.tsx    # Componente para renderizar gráficos matplotlib
│   ├── ThemeToggle.tsx       # Toggle de tema claro/escuro
│   ├── LayoutSelector.tsx    # Seletor de layout
│   ├── EditorTabs.tsx        # Sistema de abas do editor
│   ├── ExportMenu.tsx        # Menu de exportação
│   ├── FileSystemSidebar.tsx # Sidebar do sistema de arquivos virtual
│   ├── FileEditor.tsx        # Editor modal para arquivos do VFS
│   ├── PackageManager.tsx    # Interface gráfica do gerenciador de pacotes
│   ├── CommandPalette.tsx    # Palette de comandos com atalhos de teclado
│   ├── AboutModal.tsx        # Modal com informações sobre a aplicação
│   └── InputDialog.tsx       # Dialog para inputs do usuário
├── hooks/
│   ├── usePyodide.ts         # Hook para carregar e gerenciar Pyodide
│   ├── useLayout.ts          # Hook para gerenciar layout (com persistência no localStorage)
│   ├── useEditorTabs.ts      # Hook para gerenciar abas do editor
│   ├── usePythonExecution.ts # Hook para execução de código Python
│   ├── useSyntaxValidation.ts # Hook para validação de sintaxe em tempo real
│   ├── useFileSystem.ts      # Hook para interagir com o sistema de arquivos virtual
│   ├── usePackageManager.ts  # Hook para gerenciar pacotes Python (micropip)
│   ├── useMatplotlib.ts      # Hook para gerenciar plots do matplotlib
│   └── useZenMode.ts         # Hook para gerenciar modo Zen
├── utils/
│   ├── parsePyodideError.ts  # Parser de erros do Pyodide com mapeamento de linhas
│   ├── shareCode.ts          # Utilitários para compartilhamento de código
│   └── __tests__/
│       ├── parsePyodideError.test.ts # Testes unitários do parser de erros
│       └── README.md          # Documentação dos testes
├── docs/
│   └── FILESYSTEM_ANALYSIS.md # Análise e documentação do sistema de arquivos
├── public/
│   ├── logo.png              # Logo da aplicação
│   └── favicon/              # Arquivos de favicon
├── coverage/                 # Relatórios de cobertura de testes (gerado)
├── jest.config.js            # Configuração do Jest
├── jest.setup.js             # Setup do ambiente de testes
├── .eslintrc.json            # Configuração do ESLint
├── .gitignore                # Arquivos ignorados pelo Git
├── next.config.js            # Configuração do Next.js
├── package.json              # Dependências do projeto
├── postcss.config.js         # Configuração do PostCSS
├── tailwind.config.ts        # Configuração do Tailwind CSS
├── tsconfig.json             # Configuração do TypeScript
├── vercel.json               # Configuração do Vercel
└── README.md                 # Este arquivo

🚀 Deploy

Deploy na Vercel (Recomendado)

A aplicação está otimizada para deploy na Vercel:

Faça push do código para um repositório Git (GitHub, GitLab, Bitbucket)
Acesse vercel.com e faça login
Clique em "New Project" e importe seu repositório
A Vercel detectará automaticamente que é um projeto Next.js
Clique em "Deploy" - não é necessário configurar variáveis de ambiente
Aguarde o deploy e sua aplicação estará online!

Deploy via CLI

# Instalar Vercel CLI globalmente
npm install -g vercel

# Fazer deploy
vercel

# Para produção
vercel --prod

Outras Plataformas

A aplicação também pode ser deployada em:

Netlify - Suporte nativo a Next.js
Railway - Deploy simples via Git
Render - Deploy automático
Docker - Containerização (requer configuração adicional)

🔧 Scripts Disponíveis

# Desenvolvimento
npm run dev          # Inicia servidor de desenvolvimento (Turbopack)

# Build
npm run build        # Cria build de produção
npm start            # Inicia servidor de produção

# Testes
npm test             # Executa todos os testes
npm run test:watch   # Executa testes em modo watch
npm run test:coverage # Executa testes com relatório de cobertura

# Qualidade de Código
npm run lint         # Executa o ESLint

🎨 Características do Design

Layout Responsivo - Adapta-se perfeitamente a dispositivos móveis e desktop
Dark Mode - Tema escuro com suporte a preferência do sistema
Glassmorphism - Efeitos de vidro leves no header
Terminal Estilizado - Visual inspirado em terminais com fundo preto e texto verde
Animações Suaves - Transições e hover effects modernos
Acessibilidade - Suporte a ARIA labels e navegação por teclado

📝 Notas Importantes

Limitações

⚠️ Conexão com Internet - O Pyodide é carregado via CDN (jsdelivr), então é necessária conexão com a internet
⚠️ Primeira Execução - A primeira execução pode demorar alguns segundos enquanto o Pyodide baixa os arquivos necessários (~10-15MB)
⚠️ Bibliotecas Python - Algumas bibliotecas Python podem não estar disponíveis no Pyodide (especialmente aquelas que dependem de código C). Use o Gerenciador de Pacotes para verificar pacotes disponíveis
⚠️ Performance - Códigos muito complexos podem ser mais lentos que em Python nativo devido à execução via WebAssembly
⚠️ Validação em Tempo Real - A validação de sintaxe usa debounce de 800ms, então pode haver um pequeno delay na detecção de erros
⚠️ Sistema de Arquivos - O sistema de arquivos é virtual e existe apenas durante a sessão do navegador. Arquivos são perdidos ao recarregar a página
⚠️ Pacotes Instalados - Pacotes instalados via Gerenciador de Pacotes são mantidos apenas durante a sessão atual. É necessário reinstalá-los ao recarregar a página

Segurança

✅ Execução no Cliente - Todo o código é executado no navegador, sem envio para servidor
✅ Sem Backend - Não há servidor processando seu código
✅ Privacidade - Seus códigos nunca saem do seu navegador

🤝 Contribuindo

Contribuições são bem-vindas! Sinta-se à vontade para:

Fazer Fork do projeto
Criar uma branch para sua feature (git checkout -b feature/AmazingFeature)
Commit suas mudanças (git commit -m 'Add some AmazingFeature')
Push para a branch (git push origin feature/AmazingFeature)
Abrir um Pull Request

Diretrizes de Contribuição

Siga os padrões de código existentes
Adicione testes quando apropriado
Atualize a documentação conforme necessário
Mantenha os commits descritivos

📄 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

👨‍💻 Autor

Luis Teixeira

🌐 Website: https://luistls.vercel.app/
💼 LinkedIn: https://www.linkedin.com/in/luis-tei
🐙 GitHub: @LuisT-ls

🙏 Agradecimentos

Pyodide - Por tornar Python possível no navegador
Next.js - Por fornecer uma base sólida para a aplicação
Vercel - Por hospedar a aplicação gratuitamente

📊 Estatísticas

⭐ Se este projeto foi útil para você, considere dar uma estrela no repositório!

Name		Name	Last commit message	Last commit date
Latest commit History 56 Commits
app		app
components		components
docs		docs
hooks		hooks
public		public
utils		utils
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
jest.config.js		jest.config.js
jest.setup.js		jest.setup.js
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json
vercel.json		vercel.json

License

LuisT-ls/interpreta-python

Folders and files

Latest commit

History

Repository files navigation