Sebagian besar model AI memiliki setidaknya satu kesamaan, yaitu model
cukup besar untuk resource yang
ditransfer melalui Internet. Model deteksi objek MediaPipe terkecil
(SSD MobileNetV2 float16
) memiliki berat 5,6 MB
dan yang terbesar adalah sekitar 25 MB.
LLM open source gemma-2b-it-gpu-int4.bin
memiliki clock 1,35 GB—dan ini dianggap sangat kecil untuk LLM.
Model AI generatif bisa menjadi sangat besar. Inilah alasan banyak penggunaan AI
saat ini di cloud. Makin banyak aplikasi yang menjalankan model yang sangat dioptimalkan secara langsung
di perangkat. Meskipun demo LLM yang berjalan di browser
ada, berikut beberapa contoh tingkat produksi dari model lain yang berjalan di
browser:
- Adobe Photoshop menjalankan varian model
Conv2D
di perangkat untuk alat pemilihan objek cerdasnya. - Google Meet menjalankan versi model
MobileNetV3-small
yang dioptimalkan untuk segmentasi orang karena fitur blur latar belakangnya. - Tokopedia menjalankan model
MediaPipeFaceDetector-TFJS
untuk deteksi wajah real-time guna mencegah pendaftaran yang tidak valid ke layanannya. - Google Colab memungkinkan pengguna menggunakan model dari hard disk mereka di notebook Colab.
Untuk mempercepat peluncuran aplikasi di masa mendatang, Anda harus secara eksplisit meng-cache data model di perangkat, bukan mengandalkan cache browser HTTP implisit.
Meskipun panduan ini menggunakan gemma-2b-it-gpu-int4.bin model
untuk membuat chatbot,
pendekatan ini dapat digeneralisasi agar sesuai dengan model lain dan kasus penggunaan lainnya
di perangkat. Cara yang paling umum untuk menghubungkan aplikasi ke model adalah dengan menyajikan
model tersebut bersama resource aplikasi lainnya. Sangat penting untuk
mengoptimalkan penyampaian.
Mengonfigurasi header cache yang tepat
Jika menayangkan model AI dari server, penting untuk mengonfigurasi header
Cache-Control
yang benar. Contoh berikut menunjukkan setelan default yang solid, yang dapat Anda bangun
untuk kebutuhan aplikasi.
Cache-Control: public, max-age=31536000, immutable
Setiap versi rilis model AI adalah resource statis. Konten yang tidak pernah
berubah harus diberi
max-age
panjang yang dikombinasikan dengan perusak cache
di URL permintaan. Jika Anda perlu mengupdate model, Anda harus memberikan URL baru.
Saat pengguna memuat ulang halaman, klien akan mengirimkan permintaan validasi ulang, meskipun
server mengetahui bahwa konten tersebut stabil. Perintah
immutable
secara eksplisit menunjukkan bahwa validasi ulang tidak diperlukan, karena
konten tidak akan berubah. Perintah immutable
tidak didukung secara luas
oleh browser dan cache atau server proxy perantara, tetapi dengan
menggabungkannya dengan
perintah max-age
yang dapat dipahami secara universal, Anda dapat memastikan kompatibilitas
maksimum. Perintah respons
public
menunjukkan bahwa respons dapat disimpan dalam cache bersama.
Meng-cache model AI sisi klien
Saat menyajikan model AI, penting untuk meng-cache model secara eksplisit di browser. Hal ini memastikan data model siap tersedia setelah pengguna memuat ulang aplikasi.
Ada sejumlah teknik yang dapat Anda gunakan untuk mencapai hal ini. Untuk contoh kode berikut, asumsikan setiap file model disimpan dalam objek Blob
bernama blob
dalam memori.
Untuk memahami performa, setiap contoh kode dianotasi dengan metode
performance.mark()
dan
performance.measure()
. Tindakan ini bergantung pada perangkat dan tidak dapat digeneralisasi.
Anda dapat memilih menggunakan salah satu API berikut untuk meng-cache model AI di browser: Cache API, Origin Private File System API, dan Tetap API. Rekomendasi umumnya adalah menggunakan Cache API, tetapi panduan ini membahas kelebihan dan kekurangan semua opsi.
API Cache
Cache API menyediakan
penyimpanan persisten untuk pasangan
objek Request
dan Response
yang di-cache dalam memori jangka panjang. Meskipun
ditentukan dalam spesifikasi Service Worker,
Anda dapat menggunakan API ini dari thread utama atau pekerja reguler. Untuk menggunakannya di luar
konteks pekerja layanan, panggil metode
Cache.put()
dengan objek Response
sintetis, yang disambungkan dengan URL sintetis, bukan
objek Request
.
Panduan ini mengasumsikan blob
dalam memori. Gunakan URL palsu sebagai kunci cache dan
Response
sintetis berdasarkan blob
. Jika akan langsung mendownload model tersebut, Anda akan menggunakan Response
yang akan Anda dapatkan dari pembuatan permintaan fetch()
.
Misalnya, berikut ini cara menyimpan dan memulihkan file model dengan Cache API.
const storeFileInSWCache = async (blob) => {
try {
performance.mark('start-sw-cache-cache');
const modelCache = await caches.open('models');
await modelCache.put('model.bin', new Response(blob));
performance.mark('end-sw-cache-cache');
const mark = performance.measure(
'sw-cache-cache',
'start-sw-cache-cache',
'end-sw-cache-cache'
);
console.log('Model file cached in sw-cache.', mark.name, mark.duration.toFixed(2));
} catch (err) {
console.error(err.name, err.message);
}
};
const restoreFileFromSWCache = async () => {
try {
performance.mark('start-sw-cache-restore');
const modelCache = await caches.open('models');
const response = await modelCache.match('model.bin');
if (!response) {
throw new Error(`File model.bin not found in sw-cache.`);
}
const file = await response.blob();
performance.mark('end-sw-cache-restore');
const mark = performance.measure(
'sw-cache-restore',
'start-sw-cache-restore',
'end-sw-cache-restore'
);
console.log(mark.name, mark.duration.toFixed(2));
console.log('Cached model file found in sw-cache.');
return file;
} catch (err) {
throw err;
}
};
Origin Private File System API
Origin Private File System (OPFS) adalah standar yang relatif muda untuk endpoint penyimpanan. Bersifat pribadi untuk asal halaman sehingga tidak terlihat oleh pengguna, tidak seperti sistem file biasa. Layanan ini memberikan akses ke file khusus yang sangat dioptimalkan untuk performa dan menawarkan akses tulis ke kontennya.
Misalnya, berikut cara menyimpan dan memulihkan file model di OPFS.
const storeFileInOPFS = async (blob) => {
try {
performance.mark('start-opfs-cache');
const root = await navigator.storage.getDirectory();
const handle = await root.getFileHandle('model.bin', { create: true });
const writable = await handle.createWritable();
await blob.stream().pipeTo(writable);
performance.mark('end-opfs-cache');
const mark = performance.measure(
'opfs-cache',
'start-opfs-cache',
'end-opfs-cache'
);
console.log('Model file cached in OPFS.', mark.name, mark.duration.toFixed(2));
} catch (err) {
console.error(err.name, err.message);
}
};
const restoreFileFromOPFS = async () => {
try {
performance.mark('start-opfs-restore');
const root = await navigator.storage.getDirectory();
const handle = await root.getFileHandle('model.bin');
const file = await handle.getFile();
performance.mark('end-opfs-restore');
const mark = performance.measure(
'opfs-restore',
'start-opfs-restore',
'end-opfs-restore'
);
console.log('Cached model file found in OPFS.', mark.name, mark.duration.toFixed(2));
return file;
} catch (err) {
throw err;
}
};
API tensorflow
IndexedDB adalah standar yang sudah mapan untuk menyimpan data arbitrer secara persisten di browser. ID ini sangat dikenal karena API-nya yang agak kompleks, tetapi dengan menggunakan library wrapper seperti idb-keyval, Anda dapat memperlakukan IndexedDB seperti penyimpanan nilai kunci klasik.
Contoh:
import { get, set } from 'https://cdn.jsdelivr.net/npm/idb-keyval@latest/+esm';
const storeFileInIDB = async (blob) => {
try {
performance.mark('start-idb-cache');
await set('model.bin', blob);
performance.mark('end-idb-cache');
const mark = performance.measure(
'idb-cache',
'start-idb-cache',
'end-idb-cache'
);
console.log('Model file cached in IDB.', mark.name, mark.duration.toFixed(2));
} catch (err) {
console.error(err.name, err.message);
}
};
const restoreFileFromIDB = async () => {
try {
performance.mark('start-idb-restore');
const file = await get('model.bin');
if (!file) {
throw new Error('File model.bin not found in IDB.');
}
performance.mark('end-idb-restore');
const mark = performance.measure(
'idb-restore',
'start-idb-restore',
'end-idb-restore'
);
console.log('Cached model file found in IDB.', mark.name, mark.duration.toFixed(2));
return file;
} catch (err) {
throw err;
}
};
Tandai penyimpanan sebagai dipertahankan
Panggil navigator.storage.persist()
di akhir salah satu metode cache ini untuk meminta izin menggunakan
penyimpanan persisten. Metode ini menampilkan promise yang di-resolve ke true
jika izin diberikan, dan false
jika tidak. Browser mungkin memenuhi permintaan tersebut atau tidak, bergantung pada aturan khusus browser.
if ('storage' in navigator && 'persist' in navigator.storage) {
try {
const persistent = await navigator.storage.persist();
if (persistent) {
console.log("Storage will not be cleared except by explicit user action.");
return;
}
console.log("Storage may be cleared under storage pressure.");
} catch (err) {
console.error(err.name, err.message);
}
}
Kasus khusus: Menggunakan model pada hard disk
Anda dapat mereferensikan model AI langsung dari hard disk pengguna sebagai alternatif untuk penyimpanan browser. Teknik ini dapat membantu aplikasi yang berfokus pada riset menunjukkan kemungkinan menjalankan model tertentu di browser, atau memungkinkan artis menggunakan model mandiri dalam aplikasi kreativitas dari pakar.
File System Access API
Dengan File System Access API, Anda dapat membuka file dari hard disk dan mendapatkan FileSystemFileHandle yang dapat dipertahankan di IndexedDB.
Dengan pola ini, pengguna hanya perlu memberikan akses ke file model satu kali. Berkat izin persisten,
pengguna dapat memilih untuk memberikan akses secara permanen ke file. Setelah memuat ulang
aplikasi dan gestur pengguna yang diperlukan, seperti klik mouse, FileSystemFileHandle
dapat dipulihkan dari IndexedDB dengan akses ke file
di hard disk.
Izin akses file akan dikueri dan diminta jika perlu, sehingga proses pemuatan ulang di masa mendatang akan lancar. Contoh berikut menunjukkan cara mendapatkan handle untuk file dari hard disk, lalu menyimpan dan memulihkan handle tersebut.
import { fileOpen } from 'https://cdn.jsdelivr.net/npm/browser-fs-access@latest/dist/index.modern.js';
import { get, set } from 'https://cdn.jsdelivr.net/npm/idb-keyval@latest/+esm';
button.addEventListener('click', async () => {
try {
const file = await fileOpen({
extensions: ['.bin'],
mimeTypes: ['application/octet-stream'],
description: 'AI model files',
});
if (file.handle) {
// It's an asynchronous method, but no need to await it.
storeFileHandleInIDB(file.handle);
}
return file;
} catch (err) {
if (err.name !== 'AbortError') {
console.error(err.name, err.message);
}
}
});
const storeFileHandleInIDB = async (handle) => {
try {
performance.mark('start-file-handle-cache');
await set('model.bin.handle', handle);
performance.mark('end-file-handle-cache');
const mark = performance.measure(
'file-handle-cache',
'start-file-handle-cache',
'end-file-handle-cache'
);
console.log('Model file handle cached in IDB.', mark.name, mark.duration.toFixed(2));
} catch (err) {
console.error(err.name, err.message);
}
};
const restoreFileFromFileHandle = async () => {
try {
performance.mark('start-file-handle-restore');
const handle = await get('model.bin.handle');
if (!handle) {
throw new Error('File handle model.bin.handle not found in IDB.');
}
if ((await handle.queryPermission()) !== 'granted') {
const decision = await handle.requestPermission();
if (decision === 'denied' || decision === 'prompt') {
throw new Error(Access to file model.bin.handle not granted.');
}
}
const file = await handle.getFile();
performance.mark('end-file-handle-restore');
const mark = performance.measure(
'file-handle-restore',
'start-file-handle-restore',
'end-file-handle-restore'
);
console.log('Cached model file handle found in IDB.', mark.name, mark.duration.toFixed(2));
return file;
} catch (err) {
throw err;
}
};
Metode ini tidak saling eksklusif. Mungkin ada kasus saat Anda berdua secara eksplisit meng-cache model di browser dan menggunakan model dari hard disk pengguna.
Demo
Anda dapat melihat ketiga metode penyimpanan kasus reguler dan metode hard disk yang diimplementasikan dalam demo LLM MediaPipe.
Bonus: Mendownload file besar dalam potongan
Jika Anda perlu mendownload model AI besar dari Internet, paralelkan download menjadi potongan-potongan terpisah, lalu gabungkan lagi di sisi klien.
Berikut adalah fungsi bantuan yang bisa Anda gunakan dalam kode. Anda hanya perlu meneruskan url
ke sini. chunkSize
(default: 5 MB), maxParallelRequests
(default: 6), fungsi progressCallback
(yang melaporkan
downloadedBytes
dan total fileSize
), dan signal
untuk
sinyal AbortSignal
bersifat opsional.
Anda dapat menyalin fungsi berikut dalam project Anda atau
menginstal paket fetch-in-chunks
dari paket npm.
async function fetchInChunks(
url,
chunkSize = 5 * 1024 * 1024,
maxParallelRequests = 6,
progressCallback = null,
signal = null
) {
// Helper function to get the size of the remote file using a HEAD request
async function getFileSize(url, signal) {
const response = await fetch(url, { method: 'HEAD', signal });
if (!response.ok) {
throw new Error('Failed to fetch the file size');
}
const contentLength = response.headers.get('content-length');
if (!contentLength) {
throw new Error('Content-Length header is missing');
}
return parseInt(contentLength, 10);
}
// Helper function to fetch a chunk of the file
async function fetchChunk(url, start, end, signal) {
const response = await fetch(url, {
headers: { Range: `bytes=${start}-${end}` },
signal,
});
if (!response.ok && response.status !== 206) {
throw new Error('Failed to fetch chunk');
}
return await response.arrayBuffer();
}
// Helper function to download chunks with parallelism
async function downloadChunks(
url,
fileSize,
chunkSize,
maxParallelRequests,
progressCallback,
signal
) {
let chunks = [];
let queue = [];
let start = 0;
let downloadedBytes = 0;
// Function to process the queue
async function processQueue() {
while (start < fileSize) {
if (queue.length < maxParallelRequests) {
let end = Math.min(start + chunkSize - 1, fileSize - 1);
let promise = fetchChunk(url, start, end, signal)
.then((chunk) => {
chunks.push({ start, chunk });
downloadedBytes += chunk.byteLength;
// Update progress if callback is provided
if (progressCallback) {
progressCallback(downloadedBytes, fileSize);
}
// Remove this promise from the queue when it resolves
queue = queue.filter((p) => p !== promise);
})
.catch((err) => {
throw err;
});
queue.push(promise);
start += chunkSize;
}
// Wait for at least one promise to resolve before continuing
if (queue.length >= maxParallelRequests) {
await Promise.race(queue);
}
}
// Wait for all remaining promises to resolve
await Promise.all(queue);
}
await processQueue();
return chunks.sort((a, b) => a.start - b.start).map((chunk) => chunk.chunk);
}
// Get the file size
const fileSize = await getFileSize(url, signal);
// Download the file in chunks
const chunks = await downloadChunks(
url,
fileSize,
chunkSize,
maxParallelRequests,
progressCallback,
signal
);
// Stitch the chunks together
const blob = new Blob(chunks);
return blob;
}
export default fetchInChunks;
Pilih metode yang tepat untuk Anda
Panduan ini telah mempelajari berbagai metode untuk meng-cache model AI secara efektif di browser, tugas yang sangat penting untuk meningkatkan pengalaman pengguna dan performa aplikasi Anda. Tim penyimpanan Chrome merekomendasikan Cache API untuk performa optimal, guna memastikan akses cepat ke model AI, sehingga mengurangi waktu pemuatan dan meningkatkan responsivitas.
OPFS dan IndexedDB adalah opsi yang kurang dapat digunakan. OPFS dan menaikkan API perlu serial data sebelum dapat disimpan. AlarmManager juga perlu melakukan deserialisasi data saat diambil, sehingga menjadikannya tempat terburuk untuk menyimpan model besar.
Untuk aplikasi khusus, File System Access API menawarkan akses langsung ke file di perangkat pengguna, yang ideal bagi pengguna yang mengelola model AI mereka sendiri.
Jika Anda perlu mengamankan model AI, simpan model tersebut di server. Setelah disimpan di klien, sangat mudah untuk mengekstrak data dari Cache dan IndexedDB dengan DevTools atau ekstensi OFPS DevTools. API penyimpanan ini pada dasarnya sama dalam hal keamanan. Anda mungkin tergoda untuk menyimpan versi model yang dienkripsi, tetapi Anda kemudian perlu mendapatkan kunci dekripsi ke klien yang dapat dicegat. Ini berarti upaya orang tidak bertanggung jawab untuk mencuri model Anda sedikit lebih sulit, tetapi bukan tidak mungkin.
Sebaiknya pilih strategi penyimpanan dalam cache yang sesuai dengan persyaratan aplikasi Anda, perilaku target audiens, dan karakteristik model AI yang digunakan. Hal ini memastikan aplikasi Anda responsif dan tangguh dalam berbagai kondisi jaringan dan kendala sistem.
Ucapan terima kasih
Ulasan ini diulas oleh Joshua Bell, Reilly Grant, Evan Stade, Nathan Memmott, Austin Sullivan, Etienne Noël, André Bandarra, Alexandra Klepper, François Beaufort, Paul Kinlan, dan Rachel Andrew.