Mattey Banana: Bridging Generative AI and CNC with Rust & WASM

Generative AI is great at producing imagery, but getting that imagery into a physical format—like a cut piece of matte board—requires a specialized pipeline. Mattey Banana is my solution for bridging the gap between Gemini-generated silhouettes and legacy CNC hardware.

The Origins: A Friend and a F-6100

The project started with a specific hardware challenge. A friend of mine uses a Fletcher-Terry F-6100, a Computerized Matte Cutter (CMC) that represents a pinnacle of late-90s framing technology. While the hardware is robust, the software pipeline for custom vectors is often brittle, requiring specific DXF formats and vertex counts that modern vector tools don't always respect.

He wanted a way to turn AI-generated organic shapes—think Monstera leaves or abstract patterns—into precise matte cuts without the manual overhead of traditional tracing software.

A modal interface titled "API Key Required" for the Nano Banana Pro pipeline, featuring a text input for a Gemini API key, a "Save API Key" button, and a security note about local IndexedDB storage.

Lessons from Pixie-Anim

The technical architecture of Mattey Banana draws heavily on lessons learned from building Pixie-Anim, my browser-based GIF optimizer.

  1. Rust as the Core: Just as Pixie used Rust for SIMD-accelerated color quantization, Mattey Banana uses a Rust-powered tracing engine to scan pixels and discover closed-loop contours.
  2. WASM Orchestration: I applied the same "thin JS, thick WASM" pattern. The frontend handles the UI and state (via Lit and Signals), while the performance-critical vectorization happens in a compiled binary, ensuring near-native speeds directly in the browser.
  3. The AI Loop: While Pixie used Gemini as a subjective judge for GIF quality, Mattey Banana uses it as a Prompt Assistant to ensure the generated source images are "trace-ready"—high contrast, clean edges, and zero background noise.

The Vector Pipeline

The core challenge is "tracing": converting a grid of pixels into a set of mathematical paths (SVG or DXF).

1. AI-Assisted Silhouettes

Using a specialized Prompt Assistant powered by Gemini Nano, Mattey Banana helps users generate high-contrast, zero-noise imagery. This is critical for the tracing engine to produce clean paths without "noise" (what I call "turds").

2. Rust-Powered WASM Tracing

For the heavy lifting, I used the visioncortex vtracer engine, compiled from Rust to WebAssembly. This provides high-fidelity tracing with support for:

  • Polygons and Bézier splines
  • Contour Hierarchy: Correct identification of holes and nested shapes using the evenodd fill rule.
  • Denoising: Adjustable filters to remove small, unwanted artifacts.

3. Targeting Legacy Hardware

The final output is often destined for a Fletcher-Terry F-6100, a legacy matte cutter that expects optimized DXF files. The tool generates LwPolyline entities with manageable vertex counts, ensuring compatibility with Windows 98-era plotters.

The Stack

  • Frontend: Lit WebComponents and Preact Signals for a reactive, framework-agnostic UI.
  • Backend: Rust (WASM) for performance-critical vectorization.
  • Persistence: IndexedDB (via idb) for local-only storage of API keys and generated assets.

Closing the Loop

Mattey Banana demonstrates that WebAssembly isn't just for heavy computation; it's a powerful bridge for bringing complex desktop-grade algorithms (like vector tracing) directly into the browser, enabling new workflows for physical craftsmanship.

Check out the live with just the vectorizer at ghchinoy.github.io/matteybanana/ or the full app (bring your own Gemini API key!) here: mattey-banana.ghc.wtf