Portando o modelo de pintura de imagem Moebius 0.2B para rodar no navegador com Claude Code
Portando o modelo de pintura de imagem Moebius 0.2B para rodar no navegador com Claude Code
22 de junho de 2026
Esta manhã, no Hacker News, vi Moebius: 0.2B Lightweight Image Inpainting Framework com desempenho de nível 10B, descrevendo um modelo de pintura interna pequeno, mas eficaz – um modelo onde você pode marcar regiões de uma imagem para remover e o modelo imagina o que deve preencher o espaço. O modelo lançado exigia PyTorch e NVIDIA CUDA, mas como se descrevia como 0.2BI, decidi tentar executá-lo usando WebGPU em um navegador. DR: consegui funcionar e você pode experimentar a demonstração em simonw.github.io/moebius-web/. Continue lendo para obter os detalhes.
A ferramenta finalizada
Aqui está um vídeo de demonstração da ferramenta finalizada:
Você pode abrir qualquer imagem nele (imagens não quadradas ficam em formato letterbox), destacar áreas a serem removidas, clicar no botão “Executar inpaint” e esperar que o modelo faça sua mágica.
Um projeto paralelo de agente paralelo
Meu principal projeto de hoje foi lançar um recurso importante no Datasette: uma UI para criar e alterar tabelas, como uma continuação do recurso de inserção e edição de linhas que lancei na semana passada.
Eu estava trabalhando nisso no Codex Desktop (aqui está o PR) e muitas vezes me pegava gastando de 5 a 10 minutos girando os dedos esperando que ele concluísse uma refatoração de tamanho médio ou adicionasse os retoques finais a uma alteração na interface do usuário.
(Uma coisa divertida sobre agentes de codificação é que quanto mais difícil é o problema, mais é hora de você se distrair enquanto espera que eles terminem de mastigar!)
Então decidi ativar o Claude Code em uma janela de terminal e ver até onde poderia chegar na portabilidade do Moebius para a web.
Algumas pesquisas de agência para iniciar o projeto
Meu primeiro passo foi perguntar ao Claude comum sobre a viabilidade deste projeto. Em Claude.ai, que tem a capacidade de clonar repositórios do GitHub:
Clone (https://github.com/hustvl/Moebius/)(https://github.com/hustvl/Moebius/) and tell me if they published the code and weights to run this model anywhere
(Eu ainda não tinha visto o link para os pesos, que está guardado na seção “Notícias”.)
Então:
For Moebius what are the options for running it right now - Python and NVIDIA CUDA only or other options too?
E:
Muse on the feasibility of porting it to Transformers.js or similar and running it in a browser
Gosto de dizer aos modelos para “meditar sobre X”, é a maneira mais curta que encontrei de expressar que quero que eles contemplem um problema para mim sem fornecer-lhes um objetivo concreto.
Aqui está a transcrição do bate-papo. Copiei a última resposta e salvei-a como research.md para Claude Code ler mais tarde.
Claude sugeriu usar ONNX Runtime Web no back-end WebGPU-a camada abaixo a biblioteca Transformers.js que sugeri.
Isso foi o suficiente para me convencer de que valia a pena soltar Claude Code e ver até onde ele poderia chegar.
Normalmente começo projetos como este reunindo o máximo de informações possível que o agente de codificação possa precisar. Como eu não esperava que esse projeto realmente funcionasse, fiz tudo ao meu alcance /tmp pasta:
cd /tmp
mkdir Moebius
cd Moebius
# Grab the Moebius python code
git clone https://github.com/hustvl/Moebius
# And the model weights (Claude figured this out):
GIT_LFS_SKIP_SMUDGE=0 git clone \
https://huggingface.co/hustvl/Moebius Moebius-weights
# Finally a couple of libraries we might use:
git clone https://github.com/huggingface/transformers.js
git clone https://github.com/microsoft/onnxruntime
Desativando o Código Claude
Criei um diretório para o resto do projeto e executei git init nisso para que Claude pudesse começar a enviar notas de código:
mkdir /tmp/Moebius/moebius-web
cd /tmp/Moebius/moebius-web
git init
# Copy in that research.md from earlier
git add research.md
git commit -m "Initial research by Claude Opus 4.8"
eu acendi um claude instância no /tmp/Moebius pasta, o nível acima de todos os materiais de pesquisa que preparei para ela. Eu perguntei:
Read ./moebius-web/research.md - your goal is to port this model to ONNX and WebGPU so we can run it directly in a browser, with a simple UI
Quando começou a funcionar, abandonei este acompanhamento (erros de digitação incluídos):
Bulid this in /tmp/Moebius/moebius-web and commit early and often, also maintain a notes.md file in there with notes about what you figure out along the way - also start by writing out a plan.md in there and update that plan as oy work too
Costumo pedir aos agentes que façam anotações como esta – o resultado final costuma ser interessante, tanto para mim quanto para a próxima sessão do agente que aborde o mesmo projeto. Esta é a aparência do arquivo notes.md no final do projeto.
Dei o pontapé inicial e voltei ao meu projeto principal, verificando ocasionalmente para ver como Claude estava. Quando parecia que algo poderia funcionar, solicitei:
Tell me what URL I can visit in my own browser to try this
Então experimentei no Chrome e colei alguns erros (e capturas de tela dos erros) de volta no Claude Code.
Depois de algumas rodadas, algo pareceu funcionar! É hora de colocá-lo na internet para que outras pessoas possam usá-lo.
How would we publish this to Hugging Face such that the model weights were on there and the HTML demo would show up in Hugging Face spaces?
Claude Code sabe como usar o hf ferramenta CLI, então criei um repositório de modelo no Hugging Face, criei um token que poderia gravar nesse repositório e coloquei-o em um /tmp/Moebius/token.txt arquivo para que Claude pudesse usá-lo.
Ele publicou 1,24 GB de pesos ONNX convertidos em huggingface.co/simonw/Moebius-ONNX para mim.
Eu já tinha visto outras demos carregando pesos do Hugging Face no navegador, então sabia que era possível. Decidi hospedar meu próprio código frontend nas páginas do GitHub, então disse:
I want to publish the moebius-web folder to GitHub, minus the large files (so maybe minus the models/ folder), such that when I turn on GitHub Pages for that repo navigating to https://simonw.github.io/moebius-web/ serves the UI
Informar o URL final era importante caso fosse necessário corrigir os URLs nas demonstrações que estava construindo para que funcionassem quando implantados na produção.
Depois de mais algumas rodadas de iteração, entre o trabalho em meu projeto principal, chegamos a uma versão funcional e implantada!
Exceto… cada vez que eu recarregava a página, ela parecia baixar cerca de 1,3 GB de pesos de modelo. O cache do navegador parecia muito importante para isso!
anything clever we can do with serviceworkers or similar to help cache this stuff? It seems to reload every time, I am concerned that there might be something weird about the way HF redirects work that mean we don't benefit from browser caching
Eu sabia que os projetos Transformers.js poderiam lidar com isso corretamente, então peguei uma cópia da demonstração do Whisper Web e coloquei-a em /tmp/Moebius/whisper-web e disse:
look in /tmp/Moebius/whisper-web (with a subagent) and see how they do this
Esse projeto foi totalmente ofuscado, construiu arquivos JavaScript, então imaginei que usar um subagente evitaria gastar o resto do meu contexto de token de nível superior decifrando esses arquivos.
Claude descobriu que estava usando caches.open("transformers-cache")—a API CacheStorage—e a adicionamos ao nosso projeto.
Compartilhei a transcrição completa do Claude Code para este projeto (publicada usando minha ferramenta claude-code-transcripts).
O que aprendi com tudo isso?
Isso definitivamente conta como vibração de codificação: não olhei para uma única linha de código do projeto, restringindo minha entrada aos testes, sugerindo pequenas melhorias de recursos (como uma barra de progresso para downloads de arquivos grandes) e apontando o modelo na direção de exemplos de como eu queria que as coisas funcionassem.
Como não escrevi nenhum código, o quanto aprendi sobre as tecnologias subjacentes — WebGPU, ONNX e o próprio modelo Moebius — foi muito limitado.
Como normalmente acontece com este tipo de projeto, as coisas mais importantes que aprendi diziam respeito ao que era possível:
- Claude Opus 4.8 é capaz de converter um modelo PyTorch em ONNX, publicar o resultado no Hugging Face e, em seguida, construir um aplicativo web e uma interface que possa carregar e executar esse modelo.
- Chrome, Firefox e Safari agora são capazes de executar esse tipo de modelo – tentei em todos os três.
- A API CacheStorage funciona com arquivos de modelo de aproximadamente 1,3 GB.
- … o que significa que podemos ter o inpainting como um recurso de uma aplicação web somente cliente! (Se nossos usuários puderem tolerar o download de 1,3 GB.)
Achei que provavelmente deveria tentar aprender um pouco mais sobre meu projeto. Liguei Claude.ai e perguntei:
Clone (https://github.com/simonw/moebius-web/)(https://github.com/simonw/moebius-web/) and use it to teach me all about the model and ONNX and the process of converting a model to ONNX and WebGPU and basically everything I'd need to know in order to fully understand this repo
Aqui está a transcrição e o arquivo Understanding.md Markdown que ela criou, que agora adicionei ao repositório GitHub. Achei a explicação do ONNX particularmente esclarecedora:
ONNX (Open Neural Network Exchange) é um formato de arquivo portátil e neutro em termos de estrutura para redes neurais. Um
.onnxarquivo é essencialmente duas coisas agrupadas:
- Um gráfico de computação – um gráfico direcionado de nósonde cada nó é um operador (
Conv,MatMul,Add,Einsum,Softmax,Gather,Resize,…) conectados por tensores nomeados fluindo entre eles. Esta é a “receita” do passe para frente.- Os pesos — os tensores de parâmetros aprendidos (os kernels de convolução, a tabela de incorporação, etc.), armazenados como inicializadores nesse mesmo gráfico.
Crucialmente, ONNX descreve o que calcularabstratamente, sem dizer como ou em que hardware. O conjunto de operadores é versionado por um configurar número (este repositório usa configuração 18), que determina exatamente quais operadores existem e quais são suas semânticas.
Acontece que o PyTorch incorporou mecanismos para exportar para ONNX, como visto aqui em export_onnx.py:
torch.onnx.export( dec, (lat,), dec_path, opset_version=args.opset, input_names=("latent"), output_names=("image"), dynamic_axes={"latent": {0: "B"}, "image": {0: "B"}}, )
Ele também incluía um glossário útil e um diagrama de arte ASCII ligeiramente quebrado mostrando como o pipeline do modelo se encaixa.
