Neuromancer
Neuromancer
š Visualize Neural Networks Blazingly Fast 
in 3D
Tech Used
- Svelte, Tailwind CSS
- Threlte - 3D library based on svelte and three.js
- Open Neural Network Exchange - ONNX Web Runtime
How it works
- I run a neural network in a seperate webworker using ONNX Web Runtime.
- Output from the neural network is transferred over to main thread using efficient Transferable ArrayBuffer.
- The 3D neural network is updated asynchronously @ 30 FPS.
This dual-thread architecture is also reflected in the arrangement of src/ directory:
./src āāā onnx āāā ui āāā bridge.ts āāā main.ts
Models
[!NOTE]
Work in progress- More models and features are on the way š«”
Visit the Live Demo or Run Locally
git clone https://github.com/rudrowo/neuromancer &&\
cd neuromancer &&\
npm install &&\
npm run dev
My Takes & Stuff I Learned
Click to expand
WebAssembly is awesome: Modern web browsers pretty much stand in par with lightweight virtual machines. Many intensive computations that once needed a dedicated server can now be done via WebAssembly on a client's machine. This includes everything from running AutoCAD to neural networks.
Concurrency is awesome when done right: I learned about co-ordinating between webworkers to offload expensive neural net computations and deliver a responsive user interface. Still nowhere near as good as Go's concurrency though š„±.
Power of declarative code:
- I used Threlte, a library built on top of three.js to write declarative 3d components as if they were regular DOM nodes!.
- It is always more intuitive to define what you want rather than writing the steps to get there šæ.
Vite deepdive: Vite is a super awesome bundler that comes with a ton of quality of life features for great DX. I learned about things such as:
- Importing files as webworkers!.
- Code-splitting with dynamic import- great for reducing initial load times.
- You can even write custom middleware for the vite development server!! I used this feature to correctly set the MIME type of .wasm files during development- which were for some reason (š) being sent over as plaintext.
3D raycasting for interactivity: Did you know 3d graphics emulate mouse interaction by casting a ray and calculating whether it intersects with objects? Well now you do.
Svelte 5 is awesome- chef's kiss:
- Signal-driven reactivity is a godsend!
- What I really enjoyed about Svelte is this- I never had to think about what my UI framework was doing under the hood.
- No more
useFootgun()hooks to ruin my day āļøš.
Inspired by
Icons attribution: SVGRepo, Wikimedia Commons
