Hanif Restian Pratikno
On Engineering

Batech

2023

In-Browser Neural Vision for Indonesian Batik

Awards
Technologies
Computer VisionTools, and Stacks
Status
ShippedTeam of 4
Role
Machine Learning EngineerModel Evaluation (F1, Accuracy, Precision, RMSE)

Batech is an interactive visual recognition engine for Indonesian Batik motifs running entirely inside the visitor's browser using quantized ResNet-152V2 and WebGPU hardware acceleration.

Overview

A pattern is more than a label

Indonesian batik carries centuries of regional history, philosophical meaning, and artisanal technique that a photograph alone cannot fully convey. Batech offers a starting point for exploring these motifs, serving as an educational bridge rather than an infallible authority on cultural lineage. A computer vision model can suggest a motif name, but the cultural context accompanying each prediction is what grounds the pattern in its heritage.

Keep the image in the browser

Choosing a sample or uploading your own image runs preprocessing and inference locally. Your image is not uploaded to a classification server. The quantized ResNet-152V2 ONNX model is downloaded separately on first use (about 69.3 MiB); browser cache reuse is best-effort, so a later visit may need another download.

The image is resized to 150 × 150 RGB input. The model ranks eight labels: Bali, Betawi, Celup, Cendrawasih, Kawung, Megamendung, Parang, and Tambal. WebGPU is preferred when supported, but some operations can still execute on the CPU; a WASM fallback is available. Neither acceleration nor a particular inference speed is guaranteed.

Try a motif

Pick a sample or supply an image from your device. The model can err, especially with mixed, unfamiliar, or cropped patterns; the scores are predictions, not cultural authentication.

Loading batik playground…

Architecture & Quantization

The original deep neural network was trained on high-resolution Indonesian batik textiles using a ResNet-152V2 convolutional backbone. To bring real-time inference directly to client browsers without incurring server-side GPU hosting overhead or compromising visitor privacy, the model was converted to ONNX and quantized to INT8 precision.

Quantization reduced the model footprint from 818 MB down to 69 MB INT8 weights while preserving the learned feature representations for intricate motif geometry:

  1. Local Preprocessing: Uploaded image files or canvas elements are normalized directly in JavaScript: resized to square canvas dimensions, converted from standard RGBA to contiguous NHWC float32 tensors, and scaled to [0.0, 1.0].
  2. Execution Provider Tiering: The inference session negotiates available hardware backends in the browser runtime. WebGPU is attempted first for GPU shader execution; if unsupported or if specific INT8 quantized operators fall back, WebAssembly (WASM) with SIMD multi-threading takes over.
  3. Zero-Server Ingress: Pixels never traverse network boundaries. All tensor allocations, matrix multiplications, and softmax activations occur within browser process memory.

Sample provenance

The Megamendung sample is a cropped/resized Wikimedia thumbnail of Batik Mega Mendung by Gunarta, licensed CC BY-SA 4.0. The Parang sample comes from the pre-1891, public-domain Parang rusak barong textile, museum record RV-847-77. Both images are used as examples for exploration; the model's answer may differ from the source label.