MNIST Live Example — Rede Neural com WebAssembly
Bem-vindo à minha demonstração interativa de uma rede neural simples, implementada em Rust e compilada para WebAssembly. A visualização da interação é feita através da lib react-three-fiber.
Este projeto tem como objetivo mostrar como uma rede neural se comporta camada por camada, desmistificando como ela enxerga cada conexão através de álgebra linear. Sabe todas aquelas operações de matrizes? Aqui você pode ver a relação direta entre elas.
Como usar
Desenhe um número entre 0 a 9 no canvas.
A inferência roda automaticamente. Usei animações para ficar interativo - mas o cálculo é feito via WebAssembly e salvo as conexões para renderização, a cada nova previsão a cena é atualizada com os novos valores. O resultado final é o dígito previsto e a probabilidade atribuída a cada classe.
Você pode utilizar os botões dentro da renderização para alternar a visibilidade de cada camada — úteis para isolar visualmente uma etapa específica da propagação. A camada de entrada aparece como uma grade fixa de pontos cujo brilho corresponde ao valor de cada pixel desenhado.
Para navegar na cena: arraste para orbitar a câmera, use a roda do mouse para aplicar zoom e o botão direito (ou dois dedos no toque) para deslocar lateralmente. A camada final exibe o dígito previsto ao lado da probabilidade atribuída a cada classe.
Código fonte
Implementação em Rust com dependências mínimas: apenas ndarray e serde. Nada de framework pesado de machine learning, nada de runtime escondido. Todas as operações de álgebra linear, a propagação direta e o cálculo de probabilidades são feitas manualmente, camada por camada.
Características Principais
- Inferência local em milissegundos: a propagação direta inteira acontece no cliente, em Rust compilado para WebAssembly — sem nenhuma chamada para servidor.
- Trace completo da rede: além da classe prevista, o wasm devolve as ativações de cada camada e a contribuição normalizada de cada conexão, prontas para a visualização consumir.
- Cena 3D em react-three-fiber: cada camada é uma grade de neurônios no espaço; cada conexão é uma linha em blending aditivo, com bloom para destacar os pesos mais fortes. Tudo animado camada por camada a cada nova previsão.