WebFPGA + TinyML: Lleva IA al navegador en microsegundos con una placa USB de $35

Introducción

Imagina que, con un solo clic, tu página web descarga un modelo de aprendizaje automático y lo ejecuta en una FPGA de bolsillo conectada por USB, sin instalar nada extra y con latencias del orden de los microsegundos. Eso es exactamente lo que permite WebFPGA, la combinación de la API WebUSB y los bitstreams de las FPGAs Lattice iCE40‑UP5K. En menos de 5 minutos puedes pasar de un archivo .tflite a una inferencia en tiempo real dentro del navegador, ahorrando energía y costos frente a soluciones basadas en la nube o en WebGPU.

A continuación te explico paso a paso cómo montar el flujo completo, comparo su rendimiento con alternativas habituales y te muestro tres casos de uso listos para copiar y pegar.

1. ¿Qué necesitas?

Tip: En Linux, instala las herramientas con sudo apt install yosys nextpnr-ice40 icepack. En macOS, usa Homebrew: brew install yosys nextpnr icepack.

2. Flujo completo: de .tflite a inferencia en el navegador

2.1. Convertir el modelo TensorFlow Lite a una red compatible con la FPGA

# 1️⃣ Instala tinymlgen (convierte .tflite → Verilog)
pip install tinymlgen

# 2️⃣ Convierte el modelo (ejemplo: clasificador de audio de 12 clases)
tinymlgen \
    --input model.tflite \
    --output verilog/ \
    --target ice40 \
    --quantize int8

El script genera un directorio verilog/ con los módulos necesarios y un archivo constraints.sdc que define la memoria RAM requerida.

2.2. Sintetizar y empaquetar el bitstream

# Entra al directorio generado
cd verilog

# Síntesis con Yosys
yosys -p "synth_ice40 -top top -json top.json" top.v

# Enlace y place&route con NextPNR
nextpnr-ice40 \
    --json top.json \
    --pcf constraints.pcf \
    --asc top.asc \
    --freq 12

# Genera el bitstream .bin
icepack top.asc top.bin

Resultado: top.bin es el bitstream que cargaremos desde el navegador.

2.3. Servir el bitstream y la página web

# Servidor estático rápido con Python 3
python -m http.server 8080

Coloca top.bin en la raíz del servidor y crea index.html (ver sección 3).

3. Código de la página web (WebUSB + WebFPGA)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>WebFPGA TinyML Demo</title>
  <style>
    body{font-family:sans-serif;max-width:800px;margin:auto;padding:2rem;}
    #log{white-space:pre;background:#f4f4f4;padding:1rem;}
  </style>
</head>
<body>
  <h1>Inferencia TinyML en una FPGA vía USB</h1>
  <button id="connect">Conectar placa</button>
  <button id="run" disabled>Ejecutar inferencia</button>
  <pre id="log"></pre>

  <script>
    const log = (msg)=>{document.getElementById('log').textContent+=msg+"\n";}
    let device;

    // 1️⃣ Conectar la FPGA
    document.getElementById('connect').onclick = async ()=>{
      try{
        device = await navigator.usb.requestDevice({filters:[{vendorId:0x1209}]});
        await device.open();
        await device.selectConfiguration(1);
        await device.claimInterface(0);
        log('✅ Placa conectada');
        // 2️⃣ Cargar el bitstream firmado (top.bin)
        const resp = await fetch('top.bin');
        const bitstream = await resp.arrayBuffer();
        // Envío en paquetes de 64 bytes (límites de USB)
        const chunkSize = 64;
        for(let i=0;i<bitstream.byteLength;i+=chunkSize){
          const chunk = bitstream.slice(i,i+chunkSize);
          await device.transferOut(1, chunk);
        }
        log('✅ Bitstream cargado');
        document.getElementById('run').disabled = false;
      }catch(e){log('❌ Error: '+e);}
    };

    // 3️⃣ Ejecutar inferencia (ejemplo: 1 s de audio)
    document.getElementById('run').onclick = async ()=>{
      // Datos de entrada (array de 128 int8, simulando MFCC)
      const input = new Int8Array(128).map(()=>Math.floor(Math.random()*256-128));
      await device.transferOut(2, input);
      const result = await device.transferIn(3, 1); // 1 byte con la clase predicha
      log('🔎 Clase predicha: '+result.data.getUint8(0));
    };
  </script>
</body>
</html>

Puntos clave

• Filtro USB: vendorId:0x1209 corresponde al identificador de la iCE40‑UP5K (cámbialo si usas otro board).
• Canales:
  • Endpoint 1 → carga de bitstream.
  • Endpoint 2 → envío de datos de entrada.
  • Endpoint 3 → lectura del resultado (una clase).
• Seguridad: si firmaste top.bin con openssl dgst -sha256 -sign privkey.pem -out top.bin.sig, puedes añadir una verificación en JavaScript antes de enviarlo.

4. Rendimiento y coste comparativo

*Suposición: 1 M inferencias/mes.

Conclusión: para aplicaciones de borde con miles de dispositivos, WebFPGA reduce el coste total en más de un 99 % y elimina la dependencia de la conectividad a la nube.

5. Casos de uso listos para copiar

5.1. Detector de palabras clave en tiempo real

Modelo: speech_commands.tflite (12 clases, 96 kB).

Salida: índice de la palabra detectada.

tinymlgen --input speech_commands.tflite --output verilog/kwd --target ice40 --quantize int8
# …sintetiza y genera top.bin como en la sección 2

En la web, sustituye el array aleatorio por los MFCC extraídos con Web Audio API.

5.2. Clasificador de gestos con cámara

Modelo: gesture_cnn.tflite (8 clases, 140 kB).

Entrada: 32 × 32 px en escala de grises → 1024 bytes (int8).

// Captura de canvas → Uint8Array → device.transferOut(2, data);

5.3. Análisis de vibraciones en maquinaria industrial

Modelo: vibration_anomaly.tflite (binary classifier