Bagaimana cara menjalankan model AI di browser?

Kenapa menjalankan AI di browser

Kebanyakan fitur AI memanggil server: foto atau teks diunggah, GPU di pusat data menjalankan model, lalu hasilnya dikirim balik. AI di browser membalik pola ini. Model diunduh sekali, dan perangkat pengunjung sendiri yang mengerjakannya.

• Privasi: foto, audio, dan dokumen tetap di perangkat. Tidak ada yang perlu diunggah atau disimpan, sehingga di banyak negara juga lebih mudah memenuhi hukum privasi.
• Tanpa biaya server per pemakaian: situs hanya membayar hosting file model, bukan waktu GPU. Inilah yang memungkinkan alat gratis.
• Bisa dipakai offline setelah pemuatan pertama, dan tanpa jeda jaringan per permintaan.
• Tidak perlu akun atau API key.

Kompromi-nya nyata. Kunjungan pertama butuh unduhan besar, kecepatan bergantung pada perangkat keras pengunjung, dan hanya model kecil dan menengah yang muat. Model chat besar dengan puluhan miliar parameter tetap butuh server. Tugas yang cocok saat ini mencakup penghapusan background, peningkatan resolusi gambar, estimasi depth, speech to text, terjemahan, klasifikasi teks, embedding, dan model gambar atau bahasa yang kecil. Misalnya, alat remove-background dan speech-to-text di cv.cm menjalankan BiRefNet dan Whisper dengan cara ini, tanpa mengunggah apa pun.

Empat lapisan: model, runtime, backend, library

ONNX adalah format terbuka untuk jaringan saraf. Model yang dilatih di PyTorch bisa diekspor ke ONNX, lalu ONNX Runtime Web dapat menjalankannya dengan beberapa backend. Backend WASM mendukung semua operator ONNX. Backend GPU mendukung sebagian saja, sehingga model bisa gagal di WebGPU tetapi tetap berjalan di WASM. Transformers.js menambahkan hal yang kalau tidak harus Anda tulis sendiri: mengubah ukuran gambar, mengubah teks menjadi token, men-decode audio, dan mengubah angka keluaran mentah menjadi label, mask, atau teks.

WebGPU versus WebAssembly

WebGPU adalah standar web W3C yang memberi halaman akses ke kartu grafis, baik untuk menggambar maupun komputasi umum. Untuk jaringan saraf, bagian komputasinyalah yang penting: perkalian matriks berjalan paralel di banyak inti GPU. WebAssembly menjalankan kode terkompilasi di CPU dengan kecepatan mendekati native dan berfungsi di setiap browser modern.

Dalam praktik, coba WebGPU dulu lalu beralih ke WASM. Jangan menentukan berdasarkan nama browser. Minta adapter dari browser dan periksa fiturnya:

// Check what this device can do before loading a model.
async function pickBackend() {
  if (!("gpu" in navigator)) return { device: "wasm" };      // no WebGPU API
  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) return { device: "wasm" };                    // API exists, no usable GPU
  const f16 = adapter.features.has("shader-f16");             // half-precision support
  return { device: "webgpu", f16 };
}

console.log(await pickBackend(), "threads:", self.crossOriginIsolated);

WASM multi-thread memakai SharedArrayBuffer, yang hanya diizinkan browser bila halaman cross-origin isolated. Artinya halaman harus mengirim header Cross-Origin-Opener-Policy dan Cross-Origin-Embedder-Policy. Tanpa header itu, WASM berjalan di satu thread dan jauh lebih lambat.

Contoh minimal Transformers.js

Dengan Transformers.js, satu tugas cukup satu panggilan pipeline. Library mengunduh model, memilih file untuk perangkat dan tipe data yang dipilih, lalu mengembalikan fungsi yang bisa Anda panggil:

import { pipeline } from "@huggingface/transformers";

const { device } = await pickBackend();     // from the snippet above

// First call downloads the model and caches it. Later visits load from cache.
const classify = await pipeline(
  "sentiment-analysis",
  "Xenova/distilbert-base-uncased-finetuned-sst-2-english",
  {
    device,                                  // "webgpu" or "wasm"
    dtype: device === "webgpu" ? "fp32" : "q8",
    progress_callback: (p) => console.log(p.status, p.file ?? "", p.progress ?? ""),
  }
);

console.log(await classify("This runs entirely on my laptop."));
// [{ label: "POSITIVE", score: 0.99... }]

Jalankan ini dalam module script atau, lebih baik lagi, di Web Worker. Inferensi model bisa memblokir selama ratusan milidetik atau lebih, dan di dalam worker halaman tetap responsif. WebGPU juga tersedia di dalam worker. Tampilkan progres unduhan kepada pengguna, karena pemuatan pertama model besar bisa lama pada koneksi lambat.

Ukuran unduhan, kuantisasi, dan caching

Ukuran unduhan kira-kira sama dengan jumlah parameter dikalikan byte yang disimpan untuk tiap parameter. Aritmetika sederhana ini menunjukkan apakah sebuah model praktis:

download size  ~  number of parameters  x  bytes per parameter

                      fp32 (4 B)   fp16 (2 B)   int8 / q8 (1 B)   q4 (0.5 B)
 50 million params      200 MB       100 MB          50 MB            25 MB
 500 million params     2.0 GB       1.0 GB         500 MB           250 MB
 1 billion params       4.0 GB       2.0 GB         1.0 GB           500 MB

Real files differ a little: some layers stay at higher precision,
and the tokenizer and config add a few MB.

Kuantisasi menyimpan bobot dengan lebih sedikit bit: fp16 memangkas ukuran fp32 menjadi setengah, kuantisasi 8-bit (q8) menjadi seperempat, dan 4-bit (q4) mengurangi sekitar delapan kali lipat. Bobot yang lebih kecil diunduh lebih cepat dan butuh lebih sedikit memori. Harganya adalah sedikit akurasi, yang biasanya kecil pada 8 bit dan lebih terlihat pada 4 bit, terutama pada model kecil dan tugas seperti pembuatan gambar yang menampakkan kesalahan kecil. Transformers.js memilih varian lewat opsi dtype. Nilai defaultnya q8 di WASM dan fp32 di WebGPU, dan opsi yang tersedia bergantung pada apa yang diekspor penerbit modelnya.

Caching membuat kunjungan kedua cepat. Transformers.js secara default menyimpan file unduhan dengan Cache API milik browser. Browser memberi tiap situs kuota penyimpanan berdasarkan ukuran disk, sering cukup besar untuk beberapa gigabyte di desktop, tetapi penyimpanan ini bersifat best-effort: browser dapat menghapusnya saat ruang perangkat menipis, dan Safari dapat menghapus data buatan skrip untuk situs yang tidak berinteraksi dengan pengguna selama beberapa hari. Situs bisa meminta penyimpanan persisten dengan navigator.storage.persist() dan memeriksa pemakaian dengan navigator.storage.estimate().

Ponsel dan batasan lain

• Memori: model butuh memori untuk bobotnya plus ruang kerja. Browser seluler memberi tiap tab memori jauh lebih sedikit daripada desktop dan bisa menutup tab tanpa peringatan bila model terlalu besar. Jaga model seluler tetap kecil, sering di bawah beberapa ratus megabyte.
• WebGPU di ponsel: dukungan bergantung pada browser, versi sistem operasi, dan driver GPU. Selalu sediakan jalur WASM atau pesan yang jelas.
• Panas dan baterai: kerja GPU yang lama membuat ponsel panas, lalu sistem memperlambat chip. Tugas yang sekali makan 2 detik bisa jauh lebih lama pada kali kelima.
• Paket data: peringatkan pengguna sebelum unduhan besar di koneksi seluler.
• Presisi: sebagian GPU tidak punya dukungan half-precision (fp16) yang cepat atau menghasilkan angka yang sedikit berbeda, sehingga keluaran bisa agak berbeda antarperangkat.
• Lisensi model tetap berlaku. Menjalankan model di browser tidak mengubah ketentuan penggunaannya.

Daftar periksa untuk merilis AI di browser

1. Pilih model terkecil yang memenuhi standar kualitas Anda, dan uji versi kuantisasinya berdampingan.
2. Deteksi WebGPU dengan permintaan adapter, dan beralih ke WASM bila tidak ada.
3. Sajikan situs lewat HTTPS, dan aktifkan cross-origin isolation jika Anda butuh thread WASM.
4. Jalankan inferensi di Web Worker dan tampilkan progres unduhan dan pemrosesan.
5. Jangan unduh model saat halaman dimuat. Tunggu sampai pengguna memulai tugas, agar pengunjung yang hanya membaca halaman tidak menanggung gigabyte.
6. Hosting file model pada versi yang dipatok, dan cache.
7. Uji di ponsel kelas bawah, bukan hanya di laptop pengembangan.