Meskipun sebagian besar fitur AI di web mengandalkan server, AI sisi klien berjalan langsung di browser pengguna. Hal ini menawarkan manfaat seperti latensi rendah, pengurangan biaya sisi server, tidak ada persyaratan kunci API, peningkatan privasi pengguna, dan akses offline. Anda dapat menerapkan AI sisi klien yang berfungsi di seluruh browser dengan library JavaScript seperti TensorFlow.js, Transformers.js, dan MediaPipe GenAI.
AI sisi klien juga menimbulkan tantangan performa: pengguna harus mendownload lebih banyak file, dan browser mereka harus bekerja lebih keras. Untuk membuatnya berfungsi dengan baik, pertimbangkan:
- Kasus penggunaan Anda. Apakah AI sisi klien adalah pilihan yang tepat untuk fitur Anda? Apakah fitur Anda berada dalam perjalanan penting pengguna, dan jika ya, apakah Anda memiliki penggantian?
- Praktik yang baik untuk download dan penggunaan model. Baca terus untuk mempelajari lebih lanjut.
Sebelum download model
Ukuran model dan library Mind
Untuk menerapkan AI sisi klien, Anda memerlukan model dan biasanya library. Saat memilih library, nilai ukurannya seperti yang Anda lakukan pada alat lainnya.
Ukuran model juga penting. Model AI yang dianggap besar bergantung pada beberapa hal. 5 MB dapat menjadi aturan praktis yang berguna: ukuran ini juga merupakan persentil ke-75 dari ukuran halaman web median. Jumlah yang lebih longgar adalah 10 MB.
Berikut beberapa pertimbangan penting tentang ukuran model:
- Banyak model AI khusus tugas yang ukurannya sangat kecil. Model seperti BudouX, untuk pemisahan karakter yang akurat dalam bahasa Asia, hanya berukuran 9,4 KB dalam format GZIP. Model deteksi bahasa MediaPipe adalah 315 KB.
- Bahkan model visi dapat berukuran wajar. Model Handpose dan semua resource terkait berjumlah total 13,4 MB. Meskipun jauh lebih besar daripada sebagian besar paket frontend yang diminifikasi, ukuran ini sebanding dengan halaman web median, yaitu 2,2 MB (2,6 MB di desktop).
- Model AI generatif dapat melebihi ukuran yang direkomendasikan untuk resource web. DistilBERT, yang dianggap sebagai LLM yang sangat kecil atau model NLP sederhana (pendapat bervariasi), memiliki ukuran 67 MB. Bahkan LLM kecil, seperti Gemma 2B, dapat mencapai 1,3 GB. Ukuran ini lebih dari 100 kali ukuran halaman web median.
Anda dapat menilai ukuran download persis model yang ingin digunakan dengan alat developer browser.
Mengoptimalkan ukuran model
- Membandingkan kualitas model dan ukuran download. Model yang lebih kecil mungkin memiliki akurasi yang memadai untuk kasus penggunaan Anda, sekaligus jauh lebih kecil. Penyesuaian dan teknik pengecilan model ada untuk mengurangi ukuran model secara signifikan sekaligus mempertahankan akurasi yang memadai.
- Pilih model khusus jika memungkinkan. Model yang disesuaikan dengan tugas tertentu cenderung lebih kecil. Misalnya, jika Anda ingin melakukan tugas tertentu seperti analisis sentimen atau toksisitas, gunakan model yang berspesialisasi dalam tugas ini, bukan LLM generik.
Meskipun semua model ini melakukan tugas yang sama, dengan akurasi yang bervariasi, ukurannya bervariasi: dari 3 MB hingga 1,5 GB.
Periksa apakah model dapat berjalan
Tidak semua perangkat dapat menjalankan model AI. Bahkan perangkat yang memiliki spesifikasi hardware yang memadai dapat mengalami kesulitan, jika proses mahal lainnya berjalan atau dimulai saat model sedang digunakan.
Hingga solusi tersedia, berikut tindakan yang dapat Anda lakukan saat ini:
- Periksa dukungan WebGPU. Beberapa library AI sisi klien termasuk Transformers.js versi 3 dan MediaPipe menggunakan WebGPU. Saat ini, beberapa library ini tidak otomatis kembali ke Wasm jika WebGPU tidak didukung. Anda dapat menguranginya dengan menyertakan kode terkait AI dalam pemeriksaan deteksi fitur WebGPU, jika Anda tahu bahwa library AI sisi klien memerlukan WebGPU.
- Menetapkan aturan tentang perangkat yang kurang daya. Gunakan Navigator.hardwareConcurrency, Navigator.deviceMemory dan Compute Pressure API untuk memperkirakan kemampuan dan tekanan perangkat. API ini tidak didukung di semua browser dan sengaja tidak akurat untuk mencegah pembuatan sidik jari, tetapi API ini masih dapat membantu mengecualikan perangkat yang tampaknya sangat lemah.
Memberi sinyal download besar
Untuk model besar, peringatkan pengguna sebelum mendownload. Pengguna desktop lebih cenderung
tidak keberatan dengan download berukuran besar daripada pengguna seluler. Untuk mendeteksi perangkat seluler, gunakan
mobile
dari User-Agent Client Hints API (atau string User-Agent jika UA-CH
tidak didukung).
Membatasi download berukuran besar
- Hanya download yang diperlukan. Terutama jika model berukuran besar, download hanya setelah ada kepastian yang wajar bahwa fitur AI akan digunakan. Misalnya, jika Anda memiliki fitur AI saran ketik-sebelumnya, hanya download saat pengguna mulai menggunakan fitur mengetik.
- Menyimpan model dalam cache secara eksplisit di perangkat menggunakan Cache API, untuk menghindari mendownloadnya di setiap kunjungan. Jangan hanya mengandalkan cache browser HTTP implisit.
- Membagi download model menjadi beberapa bagian. fetch-in-chunks membagi download besar menjadi beberapa bagian yang lebih kecil.
Download dan persiapan model
Jangan blokir pengguna
Prioritaskan pengalaman pengguna yang lancar: izinkan fitur utama berfungsi meskipun model AI belum dimuat sepenuhnya.
Menunjukkan progres
Saat Anda mendownload model, tunjukkan progres yang telah selesai dan waktu yang tersisa.
- Jika download model ditangani oleh library AI sisi klien, gunakan status progres download untuk menampilkannya kepada pengguna. Jika fitur ini tidak tersedia, pertimbangkan untuk membuka masalah guna memintanya (atau berkontribusi).
- Jika menangani download model dalam kode Anda sendiri, Anda dapat mengambil model dalam
bagian menggunakan library, seperti
fetch-in-chunks,
dan menampilkan progres download kepada pengguna.
- Untuk saran selengkapnya, lihat Praktik terbaik untuk indikator progres animasi dan Mendesain untuk waktu tunggu dan gangguan yang lama.
Menangani gangguan jaringan dengan baik
Download model dapat memerlukan waktu yang berbeda-beda, bergantung pada ukurannya. Pertimbangkan cara menangani gangguan jaringan jika pengguna offline. Jika memungkinkan, beri tahu pengguna tentang koneksi yang terputus, dan lanjutkan download saat koneksi pulih.
Konektivitas yang tidak stabil adalah alasan lain untuk mendownload dalam beberapa bagian.
Mengalihkan tugas yang mahal kepada pekerja web
Tugas yang mahal, misalnya langkah-langkah persiapan model setelah didownload, dapat memblokir thread utama Anda, sehingga menyebabkan pengalaman pengguna yang tidak stabil. Memindahkan tugas ini ke pekerja web akan membantu.
Temukan demo dan penerapan lengkap berdasarkan pekerja web:
Selama inferensi
Setelah model didownload dan siap, Anda dapat menjalankan inferensi. Inferensi dapat menjadi mahal secara komputasi.
Memindahkan inferensi ke pekerja web
Jika inferensi terjadi melalui WebGL, WebGPU, atau WebNN, inferensi tersebut bergantung pada GPU. Ini berarti terjadi dalam proses terpisah yang tidak memblokir UI.
Namun, untuk implementasi berbasis CPU (seperti Wasm, yang dapat menjadi pengganti untuk WebGPU, jika WebGPU tidak didukung), memindahkan inferensi ke pekerja web akan membuat halaman Anda responsif—sama seperti selama persiapan model.
Penerapan Anda mungkin lebih sederhana jika semua kode terkait AI (pengambilan model, persiapan model, inferensi) berada di tempat yang sama. Jadi, Anda dapat memilih pekerja web, baik GPU sedang digunakan maupun tidak.
Menangani error
Meskipun Anda telah memeriksa bahwa model harus berjalan di perangkat, pengguna mungkin memulai proses lain yang menggunakan resource secara ekstensif nanti. Untuk mengurangi hal ini:
- Menangani error inferensi. Gabungkan inferensi dalam blok
try/catch, dan tangani error runtime yang sesuai. - Menangani error WebGPU, baik tidak terduga dan GPUDevice.lost, yang terjadi saat GPU benar-benar direset karena perangkat mengalami kesulitan.
Menunjukkan status inferensi
Jika inferensi memerlukan waktu lebih lama daripada yang akan dirasakan segera, beri tahu pengguna bahwa model sedang berpikir. Gunakan animasi untuk memudahkan waktu tunggu dan memastikan pengguna bahwa aplikasi berfungsi sebagaimana mestinya.
Membuat inferensi dapat dibatalkan
Izinkan pengguna menyaring kueri mereka dengan cepat, tanpa sistem membuang resource yang menghasilkan respons yang tidak akan pernah dilihat pengguna.