Meng-cache model AI di browser

Thomas Steiner

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 di web dengan alat pemilihan objek berteknologi AI terbuka, dengan tiga objek dipilih: dua jerapah dan bulan.

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.

Chrome DevTools menampilkan header Cache-Control produksi yang dikirim oleh Wajah Memeluk saat meminta model AI. (Sumber)

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.

Di Chrome DevTools Application > Storage, tinjau diagram penggunaan dengan segmen untuk IndexedDB, Penyimpanan Cache, dan Sistem File. Setiap segmen terbukti menggunakan data sebesar 1.354 megabyte, atau totalnya mencapai 4.063 megabyte.

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.