Questa pagina è stata tradotta dall'API Cloud Translation.

Memorizza nella cache i modelli AI nel browser

Thomas Steiner

La maggior parte dei modelli di AI ha una cosa in comune: sono piuttosto grandi per una risorsa che viene trasferita su internet. Il modello di rilevamento di oggetti MediaPipe più piccolo (SSD MobileNetV2 float16) pesa 5,6 MB e il più grande circa 25 MB.

L'LLM open source gemma-2b-it-gpu-int4.bin pesa 1,35 GB, il che è considerato molto poco per un LLM. I modelli di AI generativa possono essere enormi. Per questo motivo, gran parte dell'utilizzo dell'AI oggi avviene nel cloud. Sempre più spesso, le app eseguono modelli altamente ottimizzati direttamente sul dispositivo. Sebbene esistano demo di LLM in esecuzione nel browser, ecco alcuni esempi di altri modelli di livello di produzione in esecuzione nel browser:

Adobe Photoshop sul web con lo strumento di selezione degli oggetti basato sull'AI aperto, con tre oggetti selezionati: due giraffe e una luna.

Adobe Photoshop esegue una variante del Conv2D modello sul dispositivo per lo strumento di selezione intelligente degli oggetti.
Google Meet esegue una versione ottimizzata del MobileNetV3-smallmodello per la segmentazione delle persone per la funzionalità di sfocatura dello sfondo.
Tokopedia utilizza il modello MediaPipeFaceDetector-TFJS per il rilevamento del volto in tempo reale per impedire registrazioni non valide al suo servizio.
Google Colab consente agli utenti di utilizzare modelli dal proprio disco rigido nei notebook Colab.

Per velocizzare i futuri avvii delle tue applicazioni, devi memorizzare esplicitamente nella cache i dati del modello sul dispositivo, anziché fare affidamento sulla cache HTTP implicita del browser.

Sebbene questa guida utilizzi gemma-2b-it-gpu-int4.bin model per creare un chatbot, l'approccio può essere generalizzato per adattarsi ad altri modelli e altri casi d'uso sul dispositivo. Il modo più comune per connettere un'app a un modello è pubblicare il modello insieme al resto delle risorse dell'app. È fondamentale ottimizzare la pubblicazione.

Configurare le intestazioni della cache corrette

Se pubblichi modelli di AI dal tuo server, è importante configurare l'intestazione Cache-Control corretta. L'esempio seguente mostra un'impostazione predefinita solida, su cui puoi basarti per le esigenze della tua app.

Cache-Control: public, max-age=31536000, immutable

Ogni versione rilasciata di un modello di AI è una risorsa statica. I contenuti che non cambiano mai devono avere un valore max-age lungo combinato con l'aggiornamento della cache nell'URL della richiesta. Se devi aggiornare il modello, devi assegnargli un nuovo URL.

Quando l'utente ricarica la pagina, il client invia una richiesta di convalida, anche se il server sa che i contenuti sono stabili. La direttiva immutable indica esplicitamente che la convalida non è necessaria, perché i contenuti non cambieranno. L'istruzione immutable non è ampiamente supportata da browser e server proxy o cache intermedi, ma combinandola con l'istruzione max-age universalmente compresa, puoi garantire la massima compatibilità. La direttiva di risposta public indica che la risposta può essere archiviata in una cache condivisa.

Chrome DevTools mostra le intestazioni `Cache-Control` di produzione inviate da Hugging Face quando viene richiesto un modello di AI. (Fonte)

Memorizzare nella cache i modelli di AI lato client

Quando pubblichi un modello di AI, è importante memorizzarlo esplicitamente nella cache del browser. In questo modo, i dati del modello sono immediatamente disponibili dopo che un utente ricarica l'app.

Esistono diverse tecniche che puoi utilizzare per raggiungere questo obiettivo. Per i seguenti esempi di codice, supponi che ogni file del modello sia archiviato in un oggetto Blob denominato blob in memoria.

Per comprendere le prestazioni, ogni esempio di codice è annotato con i metodi performance.mark() e performance.measure(). Queste misure dipendono dal dispositivo e non sono generalizzabili.

In Chrome DevTools **Application** > **Storage**, esamina il diagramma di utilizzo con segmenti per IndexedDB, Cache storage e File System. Ogni segmento mostra un consumo di 1354 megabyte di dati, per un totale di 4063 megabyte.

Puoi scegliere di utilizzare una delle seguenti API per memorizzare nella cache i modelli di AI nel browser: API Cache, l'API Origin Private File System e l'API IndexedDB. Il suggerimento generale è di utilizzare l'API Cache, ma questa guida illustra i vantaggi e gli svantaggi di tutte le opzioni.

API Cache

L'API Cache fornisce spazio di archiviazione persistente per le coppie di oggetti Request e Response memorizzate nella cache nella memoria a lunga durata. Sebbene sia definita nella specifica dei service worker, puoi utilizzare questa API dal thread principale o da un worker normale. Per utilizzarlo al di fuori di un contesto di service worker, chiama il metodo Cache.put() con un oggetto Response sintetico, abbinato a un URL sintetico anziché a un oggetto Request.

Questa guida presuppone un blob in memoria. Utilizza un URL falso come chiave di cache e un Response sintetico basato su blob. Se scarichi direttamente il modello, utilizzerai Response ottenuto inviando una richiesta fetch().

Ad esempio, ecco come archiviare e ripristinare un file modello con l'API Cache.

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;
  }
};

API Origin Private File System

L'Origin Private File System (OPFS) è uno standard relativamente recente per un endpoint di archiviazione. È privato per l'origine della pagina e quindi invisibile all'utente, a differenza del normale file system. Fornisce l'accesso a un file speciale altamente ottimizzato per le prestazioni e offre l'accesso in scrittura ai suoi contenuti.

Ad esempio, ecco come archiviare e ripristinare un file del modello in 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 IndexedDB

IndexedDB è uno standard consolidato per l'archiviazione persistente di dati arbitrari nel browser. È nota per la sua API piuttosto complessa, ma utilizzando una libreria wrapper come idb-keyval puoi trattare IndexedDB come un classico archivio chiave-valore.

Ad esempio:

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;
  }
};

Contrassegnare l'archiviazione come persistente

Chiama navigator.storage.persist() alla fine di uno di questi metodi di memorizzazione nella cache per richiedere l'autorizzazione all'utilizzo della memoria persistente. Questo metodo restituisce una promessa che si risolve in true se l'autorizzazione viene concessa e in false in caso contrario. Il browser potrebbe o meno rispettare la richiesta, a seconda delle regole specifiche del 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);
  }
}

Caso speciale: utilizza un modello su un disco rigido

Puoi fare riferimento ai modelli di AI direttamente dal disco rigido di un utente come alternativa all'archiviazione del browser. Questa tecnica può aiutare le app incentrate sulla ricerca a dimostrare la fattibilità dell'esecuzione di determinati modelli nel browser o consentire agli artisti di utilizzare modelli autoaddestrati in app di creatività esperta.

API File System Access

Con l'API File System Access, puoi aprire file dal disco rigido e ottenere un FileSystemFileHandle che puoi rendere persistente in IndexedDB.

Con questo pattern, l'utente deve concedere l'accesso al file del modello una sola volta. Grazie alle autorizzazioni persistenti, l'utente può scegliere di concedere l'accesso al file in modo permanente. Dopo aver ricaricato l'app e un gesto dell'utente richiesto, ad esempio un clic del mouse, il FileSystemFileHandle può essere ripristinato da IndexedDB con accesso al file sul disco rigido.

Le autorizzazioni di accesso ai file vengono richieste e interrogate, se necessario, il che rende questa operazione semplice per i futuri ricaricamenti. L'esempio seguente mostra come ottenere un handle per un file dal disco rigido, quindi archiviarlo e ripristinarlo.

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;
  }
};

Questi metodi non si escludono a vicenda. Potrebbe verificarsi un caso in cui memorizzi esplicitamente nella cache un modello nel browser e utilizzi un modello dal disco rigido di un utente.

Demo

Puoi vedere tutti e tre i metodi di archiviazione delle richieste regolari e il metodo del disco rigido implementati nella demo di MediaPipe LLM.

Bonus: scaricare un file di grandi dimensioni in blocchi

Se devi scaricare un modello di AI di grandi dimensioni da internet, parallelizza il download in blocchi separati, quindi ricomponili sul client.

Ecco una funzione di assistenza che puoi utilizzare nel tuo codice. Devi solo passargli il url. chunkSize (valore predefinito: 5 MB), maxParallelRequests (valore predefinito: 6), la funzione progressCallback (che genera report su downloadedBytes e fileSize totali) e signal per un indicatore AbortSignal sono tutti facoltativi.

Puoi copiare la seguente funzione nel tuo progetto o installare il pacchetto fetch-in-chunks da 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;

Scegli il metodo più adatto a te

Questa guida ha esplorato vari metodi per memorizzare in modo efficace nella cache i modelli di AI nel browser, un'attività fondamentale per migliorare l'esperienza utente e le prestazioni della tua app. Il team di archiviazione di Chrome consiglia l'API Cache per prestazioni ottimali, per garantire un rapido accesso ai modelli di AI, ridurre i tempi di caricamento e migliorare la reattività.

OPFS e IndexedDB sono opzioni meno utilizzabili. Le API OPFS e IndexedDB devono serializzare i dati prima di poterli archiviare. Inoltre, IndexedDB deve deserializzare i dati quando vengono recuperati, il che lo rende il posto peggiore per archiviare modelli di grandi dimensioni.

Per le applicazioni di nicchia, l'API File System Access offre l'accesso diretto ai file sul dispositivo di un utente, ideale per gli utenti che gestiscono i propri modelli di AI.

Se devi proteggere il tuo modello di AI, mantienilo sul server. Una volta memorizzati sul client, è banale estrarre i dati sia dalla cache sia da IndexedDB con DevTools o con l'estensione OFPS DevTools. Queste API di archiviazione sono intrinsecamente uguali in termini di sicurezza. Potresti essere tentato di memorizzare una versione criptata del modello, ma poi devi fornire la chiave di decrittografia al client, che potrebbe essere intercettata. Ciò significa che il tentativo di un malintenzionato di rubare il tuo modello è leggermente più difficile, ma non impossibile.

Ti consigliamo di scegliere una strategia di memorizzazione nella cache in linea con i requisiti della tua app, il comportamento del pubblico di destinazione e le caratteristiche dei modelli di AI utilizzati. Ciò garantisce che le tue applicazioni siano reattive e robuste in varie condizioni di rete e vincoli di sistema.

Ringraziamenti

La revisione è stata eseguita da Joshua Bell, Reilly Grant, Evan Stade, Nathan Memmott, Austin Sullivan, Etienne Noël, André Bandarra, Alexandra Klepper, François Beaufort, Paul Kinlan e Rachel Andrew.