Topik wawancara representatif

Wawancara Frontend: Bagaimana Anda mengevaluasi peluncuran inferensi graf WebNN?

FrontendSulit
Tim Redaksi Offer.ccDipublikasikan Diperbarui

Pertanyaan

Anda sedang memigrasikan model klasifikasi gambar dari WebAssembly ke W3C Web Neural Network API. Jelaskan bagaimana Anda merancang konstruksi graf, kompilasi, eksekusi, fallback, kompatibilitas, privasi, dan validasi performa.

Konteks dan cakupan

Sebuah aplikasi web ingin menjalankan model klasifikasi gambar secara lokal di peramban untuk mengurangi risiko privasi pengunggahan gambar dan latensi jaringan. Tim sedang mempertimbangkan Candidate Recommendation Draft W3C Web Neural Network API edisi Mei 2026. WebNN adalah API computational-graph yang dapat menargetkan eksekusi CPU, GPU, dan NPU; spesifikasinya masih terus berkembang, sehingga status Candidate Recommendation Draft bukanlah jaminan dukungan yang stabil di setiap peramban.

Berikan jawaban lengkap yang mencakup konversi model, konstruksi dan kompilasi graf, pengiriman inferensi (inference dispatch), pemilihan perangkat, fallback, dan validasi rilis.

Hal yang dievaluasi pewawancara

Pewawancara mencari pemahaman siklus hidup yang jelas mengenai “bangun sekali, eksekusi berkali-kali” dan perbedaan antara kompilasi MLGraphBuilder.build() asinkron serta eksekusi MLContext.dispatch() asinkron. WebNN harus dijelaskan sebagai abstraksi yang agnostik terhadap perangkat keras, bukan jaminan bahwa setiap operator berkinerja setara di setiap perangkat.

Jawaban yang kuat membahas cakupan operator, pengikatan tensor (tensor binding), pemblokiran thread utama, deteksi kapabilitas, privasi dan fingerprinting, kompatibilitas peramban, serta rencana canary yang dapat dibatalkan (reversible).

Pertanyaan klarifikasi sebelum menjawab

  • Apakah model menggunakan bentuk statis (fixed shapes), atau harus mendukung bentuk dinamis dan berbagai tingkat presisi?
  • Apakah peramban dan sistem operasi target mengekspos operator dan backend yang sama?
  • Apakah inferensi harus tetap offline, atau fallback server yang aman dapat diterima?
  • Apakah target utamanya adalah kecepatan first-paint, latensi per frame, throughput, energi, atau privasi?
  • Apakah model memproses gambar sensitif, dan mungkinkah kapabilitas perangkat keras menjadi sinyal fingerprinting?

Kerangka jawaban 30 detik

“Saya akan memperlakukan WebNN sebagai salah satu kandidat backend eksekusi. Pertama, saya akan memvalidasi operator model dan tata letak tensor, lalu memisahkan konstruksi dan kompilasi graf dari jalur inferensi. Kompilasi dan eksekusi bersifat asinkron, dengan named tensor yang mengikat input dan output. Sebelum rilis, saya akan membangun matriks peramban, perangkat, dan versi model; kapabilitas yang tidak didukung atau kegagalan kompilasi akan dialihkan ke WebAssembly atau server dengan batasan data yang jelas. Saya akan mengukur kompilasi pertama, inferensi kondisi stabil (steady-state), memori, energi, dan responsivitas thread utama, melakukan rilis canary secara bertahap, dan mempertahankan tombol pemutus (kill switch).”

Jawaban mendalam langkah demi langkah

Menetapkan kontrak model

Tetapkan bentuk input, tipe data, tata letak, normalisasi, label output, dan batas toleransi kesalahan. Konversikan model menjadi subgraf operator yang didukung, mendeteksi operator yang tidak didukung selama konstruksi graf alih-alih setelah eksekusi parsial pada perangkat pengguna. Pertahankan implementasi referensi WebAssembly atau server untuk perbandingan lapisan demi lapisan.

Membangun dan mengompilasi graf

Buat konteks dan MLGraphBuilder melalui navigator.ml, lalu susun input, konstanta, dan operator. build() mengompilasi graf dan mengembalikan Promise; setiap builder harus memiliki satu graf. Lakukan pemanasan (warm up) graf sebelumnya atau di dalam Worker agar kompilasi pertama tidak membebani latensi klik pengguna.

js
const context = await navigator.ml.createContext({ deviceType: 'gpu' });
const builder = new MLGraphBuilder(context);
const input = builder.input('image', {
  dataType: 'float32',
  dimensions: [1, 224, 224, 3],
});
const weights = builder.constant(weightDescriptor, weightBuffer);
const logits = builder.conv2d(input, weights, convOptions);
const graph = await builder.build({ logits });

Opsi perangkat hanyalah kebijakan kandidat; implementasi harus divalidasi terhadap peramban target dan versi spesifikasi alih-alih mengasumsikan bahwa perangkat akan menerima setiap nilai.

Merancang eksekusi asinkron dan alur memori

dispatch() mengirimkan eksekusi graf ke linimasa eksekusi dan segera kembali. Ikat tensor input dan output bernama, lalu baca hasilnya setelah eksekusi selesai. Gunakan kembali graf, konteks, dan buffer yang telah dikompilasi untuk inferensi berulang daripada mengalokasikannya per frame. Aliran kamera membutuhkan backpressure: lewati (drop) atau gabungkan frame baru saat frame sebelumnya masih berjalan daripada membuat antrean tanpa batas.

Memilih perangkat dan fallback

Deteksi dukungan API, operator, dan model sebelum memilih CPU, GPU, atau NPU. Ketersediaan perangkat tidak membuktikan bahwa operator target berjalan efisien; tentukan pilihan berdasarkan pengukuran end-to-end. Rantai fallback dapat berupa WebNN → WebAssembly → server, tetapi setiap tingkatan harus berbagi prapemrosesan dan pemeriksaan hasil yang sama. Fallback server mengunggah gambar, sehingga antarmuka pengguna (UI) dan lapisan jaringan harus menyatakan batasan persetujuan dan retensi data secara jelas.

Melindungi thread utama dan interaksi

Konstruksi graf, kompilasi, prapemrosesan, dan pascapemrosesan dapat memengaruhi interaktivitas. Alihkan tugas berat ke Dedicated Worker dan pertahankan thread utama untuk penangkapan input dan status UI. Gunakan pembatalan atau nomor urut untuk membuang hasil yang sudah usang. Ukur long task, lonjakan input, dan pemulihan tab latar belakang, bukan hanya waktu inferensi rata-rata.

Membangun matriks kebenaran dan kompatibilitas

Buat matriks versi peramban, sistem operasi, jenis perangkat, presisi model, dan set operator. Bandingkan output, akurasi, dan input batas dengan backend referensi. Catat kegagalan kompilasi, operator yang tidak didukung, kehilangan perangkat (device loss), dan penghancuran konteks. Karena dokumen W3C masih berupa Candidate Recommendation Draft, rencana rilis harus memperhitungkan perubahan spesifikasi dan perbedaan implementasi.

Menangani privasi, izin, dan fingerprinting

Eksekusi lokal mengurangi pengunggahan gambar, tetapi file model, cache, dan telemetri masih dapat membocorkan informasi. Simpan hanya bobot (weights) yang diperlukan di cache, hindari mencatat fitur input, dan jangan jadikan tipe perangkat sebagai pengenal pengguna. Spesifikasi mencatat bahwa penjadwalan perangkat dapat menghasilkan sinyal fingerprinting; oleh karena itu, hasil deteksi kapabilitas harus diminimalkan dan berumur pendek, dengan alternatif berbasis perangkat lunak atau server.

Rilis canary, observasi, dan rollback

Mulailah dengan model non-sensitif dan sebagian kecil target peramban. Bandingkan kompilasi pertama, P50/P95 kondisi stabil, long task pada thread utama, memori, energi, tingkat kegagalan, dan tingkat fallback. Jalankan kembali matriks pengujian saat ada pembaruan model atau peramban. Jika perangkat mengalami crash, terjadi pergeseran akurasi, konsumsi energi berlebihan, atau persyaratan privasi gagal dipenuhi, nonaktifkan WebNN dan gunakan backend referensi; simpan versi, perangkat, dan hash model untuk analisis.

Jawaban model berkualitas tinggi

“Saya akan menetapkan kontrak input, output, dan kesalahan model, lalu memverifikasi pemetaan operator ke WebNN. Graf dibangun dan dikompilasi sekali; build() dan dispatch() mengikuti alur asinkron, dan loop inferensi menggunakan kembali konteks serta buffernya. Matriks rilis mencakup versi peramban, perangkat, dan model, dengan Workers yang menangani kompilasi dan prapemrosesan. WebNN, WebAssembly, dan server membentuk rantai fallback yang dapat diobservasi, dan fallback server menyatakan batasan pengunggahan data. Metrik canary mencakup latensi awal dan kondisi stabil, long task, memori, energi, akurasi, dan tingkat kegagalan; kill switch akan segera memulihkan ke backend referensi.”

Kesalahan umum

  • Menganggap Candidate Recommendation sebagai dukungan universal → celah peramban atau operator merugikan pengguna → bangun matriks versi dan kapabilitas.
  • Mengompilasi graf pada setiap permintaan → biaya eksekusi pertama berulang terus → hangatkan (warm) dan gunakan kembali graf yang telah dikompilasi.
  • Melakukan benchmark hanya pada GPU ideal → jalur CPU atau NPU gagal → ukur performa end-to-end pada setiap backend.
  • Memperlakukan dispatch sebagai proses sinkron → antarmuka tersendat (jank) atau hasil tidak berurutan → gunakan status asinkron dan nomor urut.
  • Mengantrekan setiap frame kamera → latensi tumbuh tanpa batas → terapkan backpressure dan lewati frame yang sudah usang.
  • Melaporkan kapabilitas perangkat sebagai identitas → risiko fingerprinting meningkat → minimalkan deteksi dan sediakan fallback perangkat lunak.

Pertanyaan lanjutan dan tanggapan

Pertanyaan lanjutan 1: Mengapa tidak menggunakan WebGPU secara langsung?

WebGPU mengekspos sumber daya tingkat lebih rendah dan kontrol shader, yang cocok untuk operator kustom dan penjadwalan terperinci. WebNN menyediakan abstraksi graf jaringan saraf tingkat lebih tinggi yang memetakan lebih langsung ke framework dan backend perangkat keras. Pilihlah berdasarkan cakupan operator, kemudahan pemeliharaan, target performa, dan batasan privasi.

Pertanyaan lanjutan 2: Kompilasi membutuhkan waktu sepuluh detik. Bagaimana Anda menghindari waktu tunggu yang terlihat oleh pengguna?

Pindahkan pemuatan dan kompilasi model ke dalam Worker, lakukan pemanasan selama waktu diam (idle time), dan simpan bobot model yang telah diverifikasi integritasnya ke dalam cache. Jika permintaan pertama masih belum siap, tampilkan status yang sebenarnya dan gunakan WebAssembly atau fallback server; jangan pernah menyembunyikan kegagalan kompilasi di balik output palsu.

Pertanyaan lanjutan 3: Output GPU terkadang berbeda dari referensi. Apa yang Anda lakukan?

Pisahkan antara pembulatan floating-point, konversi presisi, perbedaan implementasi operator, dan cacat model yang sebenarnya. Reproduksi masalah menggunakan input statis, tensor perantara, dan ambang batas toleransi; jika melebihi toleransi produk, gunakan backend lain dan catat versi peramban, driver, serta model.

Pertanyaan lanjutan 4: Pengguna menolak pengunggahan gambar dan WebNN tidak tersedia. Lalu bagaimana?

Sediakan WebAssembly lokal atau tampilkan status tidak tersedia secara jelas; jangan mengabaikan pilihan pengguna. Produk dapat menurunkan kompleksitas model atau menawarkan alur manual, tetapi batasan penanganan data harus tetap transparan.

Sumber publik

Pertanyaan terkait