<">
Edição de imagem, ilustração vetorial e revelação de fotos — tudo no navegador, sem instalar nada.
➜ Abrir o Studio em studio.gplansis.com · Rodar localmente · Contribuir
O GPlanSiS|Studio é um editor de imagem completo que roda no navegador, com quatro módulos integrados:
| Módulo | Para quê |
|---|---|
| Pixel | edição de imagem por camadas: pincel, seleções, texto, máscaras, camadas de ajuste e filtros não destrutivos |
| Vetor | ilustração vetorial com pranchetas, caminhos, formas, texto, alinhamento e exportação |
| Foto | catálogo com avaliação, marcação e rótulos, revelação rápida, predefinições e sincronização de ajustes |
| Ponte | integração entre os módulos: objetos inteligentes vinculados, biblioteca compartilhada, paleta, vetorização e fluxos em lote |
O processamento de imagem acontece no aparelho de cada pessoa — a imagem não sai do navegador. O servidor só cuida de acesso, usuários, permissões, preferências, avatar e dos projetos que a pessoa escolhe salvar na nuvem. A exceção é opcional e explícita: as funções de IA (menu IA), quando usadas, enviam uma cópia reduzida da imagem ao Claude, da Anthropic (ver Inteligência artificial).
Formatos de leitura — praticamente todo formato de imagem atual:
| Formato | Como é lido |
|---|---|
| JPEG, PNG, APNG, GIF, WebP, AVIF, BMP, ICO/CUR, SVG/SVGZ | nativo do navegador |
| HEIC/HEIF | nativo no Safari; libheif (WebAssembly) nos demais |
| JPEG XL | nativo no Safari; jSquash (WebAssembly) nos demais |
| JPEG 2000 (.jp2, .j2k, .jpx, .jph) | nativo no Safari; OpenJPEG (WebAssembly) nos demais |
| TIFF (8/16 bits, várias páginas) | UTIF.js |
| PSD/PSB | ag-psd — abre com todas as camadas (opacidade, mesclagem, visibilidade) |
| RAW (DNG, CR2, CR3, NEF, ARW, ORF, RAF, RW2, PEF, SRW…) | prévia JPEG embutida, com a orientação da câmera |
| TGA, QOI, PBM/PGM/PPM/PAM/PFM, Radiance HDR, PCX | decodificadores próprios |
| GIF/WebP/APNG animados | quadros como camadas (Chrome/Edge) |
Exportação: PNG, JPEG, WebP, AVIF (onde o navegador codifica), PSD com camadas, TIFF, BMP, ICO multitamanho e QOI.
Edição avançada — não destrutiva, empilhável e utilizável como camada de ajuste com máscara:
- Ajustes: Exposição, Vibração, Temperatura e matiz, Sombras e realces, Equilíbrio de cores, Mixer de canais, Filtro de foto, Mapa de degradê, Tom automático, CLAHE, Remover névoa, Tonalização HDR, LUT 3D (
.cube). - Filtros: Desfoque de superfície, Redução de ruído, Mediana, Passa-alta, Clareza, Desfoque de movimento, Desfoque radial, Tilt-shift, Correção de lente (distorção, aberração cromática, vinheta), Redemoinho, Ondulação, Pintura a óleo, Meio-tom, Brilho difuso, Esboço a lápis.
- Ferramentas: Preenchimento inteligente para remover o que está selecionado (
Shift+Del), Histograma, abrir animação como camadas.
Contas e permissões
- Login com e-mail e senha; troca obrigatória no primeiro acesso.
- Papéis administrador, editor e visualizador, com ajuste fino por pessoa: Pixel · Vetor · Foto · Ponte · Exportar arquivos · Projetos na nuvem · Usar IA · Gerenciar usuários · Ver auditoria.
- Um administrador master (definido por variável de ambiente) que não pode ser excluído, desativado nem rebaixado.
- Segurança: senha com scrypt, cookie de sessão HttpOnly/Secure/SameSite=Lax, cabeçalho anti-CSRF em toda escrita, limite de 8 tentativas de login por 15 min (por IP e por e-mail), sessões ativas revogáveis e auditoria de logins, falhas e alterações.
Configurações por conta — perfil com foto (recorte; aceita HEIC do iPhone), segurança, preferências (tema, módulo inicial, borda máxima ao importar, formato e qualidade padrão de exportação, salvamento automático) que acompanham a pessoa em qualquer aparelho.
Projetos na nuvem — Arquivo › Projetos na nuvem… (Ctrl+Shift+S). O trabalho local (salvamento automático no IndexedDB) fica separado por usuário no navegador.
PWA e celular — instalável (manifest, ícones maskable, apple-touch, service worker que só guarda o editor depois do login e nunca a API). No celular, diálogos viram painéis de baixo para cima, alvos de toque maiores e sem rolagem lateral.
| Pixel | Vetor |
|---|---|
 |
 |
| Foto | Usuários e permissões |
 |
 |
Capturas feitas numa instância local com dados fictícios (projeto de demonstração do próprio editor).
Menu IA no Pixel, no Vetor e no Foto, com o Claude (Anthropic) chamado pelo servidor (server/ai.py, front em web/plus/ai.js):
| Função | Módulo | O que faz |
|---|---|---|
Editar com IA (Ctrl+K) |
Pixel | transforma um pedido em texto numa camada de ajuste com filtros do próprio Studio (desfazível) |
| Melhorar automaticamente | Pixel, Foto | propõe a revelação (exposição, balanço de branco, contraste…) |
| Selecionar com IA | Pixel | cria a seleção do objeto descrito |
| Sugerir enquadramento | Pixel, Foto | até 4 recortes por proporção |
| Gerar ilustração / Redesenhar como vetor | Vetor | SVG editável a partir de texto ou de uma imagem |
| Catalogar | Foto | título, legenda, texto alternativo, palavras-chave, nota e rótulo |
| Ler texto, Analisar paleta, Revisar composição, Perguntar | todos | OCR, cores dominantes, crítica e perguntas livres |
Chave. Só no servidor: STUDIO_ANTHROPIC_API_KEY no .env ou gravada por um administrador em Configurações › IA (tabela settings do banco, na pasta de dados com permissão 700; a do painel tem precedência). A chave nunca volta ao navegador (a tela mostra só os 4 últimos caracteres), não entra na auditoria nem em log. Sem chave a IA fica desligada: as rotas respondem 503 com orientação, o menu avisa quem deve configurar e o resto do Studio funciona normalmente.
Permissão. ia ("Usar IA"): ligada por padrão para master, administrador e editor; desligada para visualizador. Ajuste por pessoa em Configurações › Usuários. Só administradores veem e alteram a configuração da IA e as cotas.
Cotas e custo. Cada chamada grava tokens e custo estimado (US$) em ai_usage. Há uma cota mensal por pessoa (padrão global de US$ 20, ajustável em Configurações › IA; cota própria por pessoa na tabela Uso por pessoa). Ao atingir a cota, a rota responde 402. Além disso: até 3 chamadas simultâneas e 30 por minuto por pessoa (429). A cota é conferida antes de cada chamada, então o mês pode fechar levemente acima dela (no máximo o custo das chamadas já em andamento).
Modelo e nível. Claude Opus 5.5 (padrão), Sonnet 5.5 ou Haiku 5.5; nível Economia, Padrão (esforço por função) ou Máxima qualidade.
Limites e proteções. Corpo de /api/ai/run até 6 MB (lido em blocos, recusado com 413 antes de interpretar); imagem JPEG/PNG/WebP/GIF em base64 até 5 MB (o navegador já envia reduzida); pedido de texto até 4.000 caracteres. A resposta do modelo vem em JSON validado por esquema; o texto dentro das imagens e o pedido da pessoa são tratados como dados, não como instruções. O SVG gerado passa por limpeza no servidor (sem script, foreignObject, style, image, eventos on*, href externos ou javascript:, nem url() externo) antes de virar documento no Vetor.
| Variável | Para quê | Padrão |
|---|---|---|
STUDIO_ANTHROPIC_API_KEY |
chave da Anthropic (opcional; alternativa ao painel) | vazia = IA desligada |
flowchart LR
subgraph Navegador["Navegador (PWA)"]
ED["Editor<br/>Pixel · Vetor · Foto · Ponte"]
PLUS["Módulos plus<br/>formats · filters · account · ai"]
WASM["Decodificadores WASM<br/>libheif · jSquash JXL · OpenJPEG"]
IDB[("IndexedDB<br/>por usuário")]
SW["Service worker"]
ED --- PLUS --- WASM
ED --- IDB
end
subgraph Servidor["Servidor (FastAPI · uvicorn · 1 worker)"]
API["/api: sessão, usuários,<br/>permissões, avatar, projetos, auditoria, IA"]
WEB["Estáticos do editor<br/>(só com sessão válida)"]
DB[("SQLite<br/>studio.db")]
PJ[("projetos/<br/>arquivos JSON")]
API --- DB
API --- PJ
end
Caddy["Caddy<br/>HTTPS · proxy reverso"]
Navegador -- "HTTPS" --> Caddy --> Servidor
Servidor -. "só as funções de IA" .-> Claude["Anthropic API<br/>(Claude)"]
Como o build funciona. O editor original (editor/GPlanSiS-Studio.html, um único arquivo HTML) não é editado à mão. O build.py aplica pontos de integração pequenos e verificados — cada troca precisa casar exatamente o número de vezes esperado, senão o build para — e injeta os módulos de web/plus/ (formatos, filtros, conta, IA). O resultado vai para dist/web/, que é o que o servidor entrega.
- Editor: HTML/CSS/JavaScript puro (sem framework, sem bundler), Canvas 2D, IndexedDB, Service Worker.
- Bibliotecas no navegador: ag-psd, UTIF.js, pako, libheif-js, jSquash (JPEG XL), OpenJPEG (
@cornerstonejs/codec-openjpeg) servidos deweb/vendor/; JSZip e polygon-clipping carregados sob demanda de CDN (cdnjs/jsDelivr); fontes IBM Plex embutidas. - Servidor: Python 3, FastAPI, uvicorn, SQLite (biblioteca padrão), scrypt (
hashlib), SDKanthropic(funções de IA). - Produção: systemd + Caddy (HTTPS e proxy reverso).
- Testes:
tools/testar_api.py(API, sem dependências),tools/testar_ia.py(rotas de IA com o Claude simulado),tools/prova_navegador.mjsetools/prova_ia.mjs(Chrome real via puppeteer-core).
Requisitos: Python 3.10+ e um navegador moderno (Chrome, Edge, Firefox ou Safari).
git clone https://github.com/SSBianchiplan/studio.git
cd studio
# 1. gerar o editor integrado em dist/web
python3 build.py
# 2. ambiente do servidor
python3 -m venv .venv
.venv/bin/pip install -r server/requirements.txt
# 3. variáveis (valores fictícios, para teste local)
cp .env.example .env
set -a; . ./.env; set +a
# 4. subir
.venv/bin/uvicorn --app-dir server app:app --host 127.0.0.1 --port 8972Abra http://127.0.0.1:8972, entre com o STUDIO_MASTER_EMAIL e o STUDIO_MASTER_PASSWORD do seu .env e defina a nova senha (o sistema exige a troca no primeiro acesso). Use o botão Demonstração para carregar um projeto de exemplo.
STUDIO_COOKIE_SECURE=0é necessário para testar emhttp://; em produção (HTTPS) use1.
# API: 39 verificações contra um servidor de teste com banco descartável
STUDIO_DATA=/tmp/studio-teste STUDIO_COOKIE_SECURE=0 STUDIO_MASTER_EMAIL=contato@gplansis.com \
STUDIO_MASTER_PASSWORD='Teste-Master-2026' .venv/bin/uvicorn --app-dir server app:app --port 8972 &
python3 tools/testar_api.py http://127.0.0.1:8972 Teste-Master-2026
# navegador real (login, formatos, filtros, exportação, nuvem, permissões, PWA, celular)
npm i puppeteer-core
BASE=http://127.0.0.1:8972 EMAIL=... SENHA=... AMOSTRAS=<pasta com imagens> SAIDA=<pasta> node tools/prova_navegador.mjs
# IA com o Claude simulado (nenhuma chamada à Anthropic, chave fictícia): rotas, cotas, permissões, limites, SVG
cd server && STUDIO_DATA=/tmp/studio-ia STUDIO_COOKIE_SECURE=0 STUDIO_MASTER_EMAIL=contato@gplansis.com \
STUDIO_MASTER_PASSWORD='Teste-Master-2026' ../.venv/bin/python ../tools/servidor_teste_ia.py 8973 & cd ..
python3 tools/testar_ia.py http://127.0.0.1:8973 Teste-Master-2026
# no navegador (num banco novo, depois de trocar a senha inicial do master):
BASE=http://127.0.0.1:8973 EMAIL=contato@gplansis.com SENHA=... SAIDA=<pasta> node tools/prova_ia.mjseditor/GPlanSiS-Studio.html editor original (Pixel, Vetor, Foto, Ponte) — fonte do build, não é editado à mão
build.py gera dist/web: editor + pontos de integração + módulos de web/plus
web/
login.html página de login (pública)
manifest.webmanifest, sw.js PWA
icons/ logo, ícones 192/512, maskable, apple-touch, favicon
plus/ formats.js · filters.js · account.js · ai.js · plus.css
vendor/ bibliotecas de terceiros (com os textos de licença)
server/
app.py FastAPI + SQLite: sessão, usuários, permissões, avatar, preferências, nuvem, auditoria
ai.py funções de IA (Claude): rotas /api/ai/*, cotas, uso e configuração
requirements.txt
deploy/
enviar.sh build + envio + serviço + Caddy (idempotente, com backup e validação)
gplansis-studio.service unidade systemd (usuário próprio, sistema de arquivos protegido)
studio.caddy bloco do Caddy (HTTPS, limite de 210 MB para projetos)
env.exemplo modelo do .env de produção
tools/
testar_api.py prova da API
testar_ia.py prova das rotas de IA (contra servidor_teste_ia.py)
servidor_teste_ia.py servidor de teste com o Claude simulado (nunca em produção)
prova_ia.mjs prova das funções de IA no Chrome
prova_navegador.mjs prova de ponta a ponta no Chrome
gerar_icones.mjs rasteriza os SVG da marca nos tamanhos de ícone
| Variável | Para quê | Padrão |
|---|---|---|
STUDIO_DATA |
pasta de dados (banco SQLite e projetos) | server/dados |
STUDIO_WEB |
pasta dos estáticos gerados pelo build | dist/web |
STUDIO_MASTER_EMAIL |
e-mail do administrador master | contato@gplansis.com |
STUDIO_MASTER_PASSWORD |
senha inicial do master (só no primeiro arranque; sem ela, uma senha aleatória é gravada em STUDIO_DATA/senha-inicial-master.txt) |
— |
STUDIO_COOKIE_SECURE |
1 em produção (HTTPS), 0 em teste local |
1 |
STUDIO_ANTHROPIC_API_KEY |
chave da Anthropic para as funções de IA (opcional; também pode ser gravada em Configurações › IA) | vazia = IA desligada |
deploy/enviar.sh gera o build, envia para o servidor (HOST, via SSH), cria usuário de sistema, venv, serviço systemd e bloco do Caddy no primeiro envio e, nos seguintes, só troca os arquivos e reinicia o serviço. A versão anterior dos estáticos fica em web.antigo/ para reverter. Backup dos dados: a pasta STUDIO_DATA (studio.db + projetos/).
- RAW usa a prévia embutida da câmera (resolução total na maioria dos modelos atuais); não faz revelação do sensor.
- AVIF só é exportado onde o navegador codifica; o Chrome atual não codifica.
- O processamento roda no aparelho: no iPhone/iPad o limite de canvas é ~16,7 MP; nos demais o padrão é 6.000 px na borda maior (ajustável até 12.000 em Preferências).
- As permissões de módulo e de exportação valem na interface do editor; usuários, auditoria, nuvem e IA são validados no servidor.
- A chave da IA gravada pelo painel fica em texto no banco (protegido pela permissão 700 da pasta de dados); quem prefere não guardá-la no banco usa só
STUDIO_ANTHROPIC_API_KEY.
O Studio é feito pela GPlanSiS e quer colaboradores — de quem desenha filtros a quem caça bug no Safari. Dá para ajudar em:
- Formatos: revelação RAW de verdade (hoje só a prévia embutida), exportação AVIF/JPEG XL por WebAssembly onde o navegador não codifica, EXR.
- Edição: novos ajustes e filtros não destrutivos, desempenho dos filtros pesados (Web Workers, OffscreenCanvas, WebGL).
- Permissões no servidor: hoje módulos e exportação são aplicados na interface; levar mais regras para o servidor.
- Testes: casos novos em
tools/testar_api.py, amostras de formatos raros paratools/prova_navegador.mjs. - Acessibilidade e celular: navegação por teclado, leitores de tela, telas pequenas.
- Documentação e tradução da interface.
Boas primeiras issues: um decodificador simples novo em web/plus/formats.js; um filtro novo em web/plus/filters.js; uma verificação a mais em tools/testar_api.py; correções de texto e de layout no celular.
Leia o guia de contribuição, o código de conduta e, para falhas de segurança, a política de segurança. Ideias e dúvidas: abra uma issue.
Código próprio sob a licença MIT — Copyright (c) 2026 GPlanSiS.
As bibliotecas de terceiros mantêm as próprias licenças (textos em web/vendor/LICENSE-*): polygon-clipping, JSZip, UTIF.js, pako, ag-psd, @cornerstonejs/codec-openjpeg (MIT) · libheif (LGPL-3.0) · jSquash JPEG XL (Apache-2.0) · OpenJPEG (BSD-2-Clause) · fontes IBM Plex (SIL OFL 1.1).
Desenvolvido pela GPlanSiS · contato: contato@gplansis.com