在瀏覽器中快取 AI 模型

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

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

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

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

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

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

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

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;