01. Product & System Overview

What it does

Browser playground for IndicTrans2 translation (EN↔22 Indic languages, Indic↔Indic) using exported ONNX models. All inference is local; text is not sent to a translation API.

Users and workflow

1. Pick direction / model size / precision / provider (WebGPU or WASM)
2. Load model (download + cache)
3. Enter text → Translate
4. Read output + load time, TTFT, tok/s

Architecture sequence

%%{init: {
  "theme": "base",
  "themeVariables": {
    "primaryColor": "#1e293b",
    "primaryTextColor": "#f8fafc",
    "primaryBorderColor": "#38bdf8",
    "lineColor": "#64748b",
    "actorBackground": "#1e293b",
    "actorBorder": "#38bdf8",
    "actorTextColor": "#f8fafc",
    "noteBorderColor": "#fbbf24",
    "noteBkgColor": "#78350f",
    "noteTextColor": "#fffbeb"
  }
}}%%
sequenceDiagram
  actor User
  participant UI as app.js
  participant T as translator.js
  participant HF as Hugging Face
  participant ORT as ONNX Runtime

  User->>UI: Load model
  UI->>T: loadModel(config, precision, provider)
  T->>HF: Fetch graphs + sidecars + tokenizers
  T->>T: Cache Storage
  T->>ORT: Create enc/dec/decPast sessions
  User->>UI: Translate
  UI->>T: translate(text, src, tgt)
  T->>T: Transliterate if needed
  T->>ORT: Encode + greedy decode loop
  T-->>UI: Text + metrics

Relationship to export repo

This demo consumes HF ONNX collections. indictrans2-onnx-export produces graphs, sidecars, and tokenizer assets.

Interview one-liner

"I shipped a zero-backend IndicTrans2 demo that loads optimized ONNX from Hugging Face into ONNX Runtime Web, with Cache Storage, custom KV-cache decoding, and Indic script transliteration."