OPFS: איך לאחסן מודלי AI בדפדפן במהירות שיא ובאפס עלויות שרת

כשרציתי להריץ מודל שפה מקומי בדפדפן עבור כלי פנימי שבניתי, נתקלתי במחסום קלאסי. המודל שקל 1.8 ג'יגה-בייט. בפעם הראשונה שהמשתמש נכנס, ההורדה לקחה 12 שניות. הבעיה האמיתית החלה בביקורים החוזרים: IndexedDB פשוט נחנק תחת העומס, וכל רענון של העמוד דרש המרה איטית של בייטים בזיכרון. כאן נכנס לתמונה OPFS.

מה זה Origin Private File System ולמה הוא משנה את התמונה?

הגדרה · OPFS

Origin Private File System (OPFS) הוא מנוע גישה נפרד ומאובטח למערכת הקבצים של המכשיר דרך הדפדפן. הוא מבודד לגמרי לכל מקור (Origin) ומספק קצב קריאה וכתיבה מהיר במיוחד ללא תיווך מיותר.

במשך שנים, מפתחי ווב שנדרשו לאחסן מידע כבד בדפדפן היו תקועים עם אלטרנטיבות מוגבלות. LocalStorage מוגבל ל-5MB ומתאים לטקסט בלבד. IndexedDB מסוגל להחזיק נתונים גדולים יותר, אך תהליך המרת הנתונים (Serialization) מאיט דרמטית את הפעולה כשמדובר בקבצי ענק.

OPFS עובד אחרת לגמרי. הוא מעניק גישה ישירה לביטים בדיסק דרך מנגנון שנקרא SyncAccessHandle, הפועל בתוך Web Workers.

איך OPFS מאיץ הרצת מודלים בדפדפן?

כשמריצים מודלים כמו Whisper, Llama 3 או מודלי וקטורים ישירות בדפדפן (בעזרת WebGPU ו-WebAssembly), האתגר המרכזי הוא קצב העברת הנתונים מהאחסון אל ה-RAM וה-VRAM.

כאשר משקולות המודל שמורות ב-OPFS:

• הטעינה מתבצעת ישירות מנתיב הקובץ המקומי במכשיר.
• אין צורך בהמרת בייטים מיותרת של JavaScript.
• הקריאה מתבצעת מתוך Web Worker, מה שמשאיר את ממשק המשתמש נקי וחלק ללא תקיעות.

פרטיות מלאה ואפס עלויות ענן

שילוב של OPFS יחד עם הרצת AI בדפדפן משנה לחלוטין את מודל העלויות של אפליקציות תוכנה.

במקום לשלם אלפי דולרים בחודש על שרתי GPU עמוסים בתשתיות ענן, האפליקציה משתמשת בכוח העיבוד ובשטח האחסון של המכשיר אצל הלקוח.

💡

העברת העיבוד והאחסון לדפדפן הלקוח דרך OPFS מאפשרת לבנות אפליקציות AI שמתרחבות למיליוני משתמשים בעלות אחסון ושרת של אפס שקלים.

בנוסף, המידע הפרטי של המשתמש לא עוזב את המכשיר שלו. המודל רץ מקומית, הנתונים נשמרים ב-OPFS, והפרטיות מלאה.

דוגמת קוד מעשית: כתיבה וקריאה מ-OPFS

הנה הדרך הבסיסית ליצור קשר עם OPFS בתוך Web Worker כדי לשמור קובץ מודל כבד:

// מיועד לריצה בתוך Web Worker
async function saveModelToOPFS(fileName, arrayBuffer) {
  const root = await navigator.storage.getDirectory();
  const fileHandle = await root.getFileHandle(fileName, { create: true });
  const accessHandle = await fileHandle.createSyncAccessHandle();
  
  accessHandle.write(new Uint8Array(arrayBuffer));
  accessHandle.flush();
  accessHandle.close();
}

וכדי לקרוא את הקובץ בחזרה בזינוק מהיר אל הזיכרון:

async function loadModelFromOPFS(fileName) {
  const root = await navigator.storage.getDirectory();
  const fileHandle = await root.getFileHandle(fileName);
  const file = await fileHandle.getFile();
  return await file.arrayBuffer();
}

סיכום

אחסון ב-OPFS אינו עוד תכונה נידחת של הדפדפן — הוא התשתית שמאפשרת לאפליקציות AI מודרניות לפעול בדפדפן במהירות של אפליקציה נייטיב. מעבר מ-IndexedDB ל-OPFS מקצר את זמני הטעינה משניות ארוכות לשבריר שנייה.