הודעה למשתמשים על הורדת מודל

Thomas Steiner

תאריך פרסום: 1 באוקטובר 2025

כדי להשתמש בממשקי ה-API של ה-AI המובנה, צריך להוריד את המודל הבסיסי ואת ההתאמות האישיות (כמו כוונון עדין), לחלץ את הנתונים הדחוסים ולטעון את הכול לזיכרון. מומלץ להודיע למשתמש כמה זמן יידרש להורדות האלה.

בדוגמאות הבאות נעשה שימוש ב-Prompt API, אבל אפשר להשתמש במושגים האלה גם בכל ממשקי ה-AI המובנים האחרים.

מעקב אחרי התקדמות ההורדה ושיתוף שלה

כל ממשקי ה-API המובנים של AI משתמשים בפונקציה create() כדי להתחיל סשן. לפונקציה create() יש אפשרות monitor שמאפשרת לגשת להתקדמות ההורדה ולשתף אותה עם המשתמש.

ממשקי ה-API המובנים של AI מיועדים ל-AI בצד הלקוח, שבו הנתונים מעובדים בדפדפן ובמכשיר של המשתמש, אבל יש אפליקציות שמאפשרות לעבד את הנתונים בשרת. האופן שבו תפנו למשתמש בהתקדמות ההורדה של המודל תלוי בשאלה: האם עיבוד הנתונים חייב להתבצע באופן מקומי בלבד או לא? אם הערך הוא true, האפליקציה שלכם היא רק בצד הלקוח. אם לא, האפליקציה יכולה להשתמש בהטמעה היברידית.

בצד הלקוח בלבד

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

במקרה כזה, אם המודל עדיין לא זמין, צריך להציג למשתמש את פרטי ההתקדמות של ההורדה.

<style>
  progress[hidden] ~ label {
    display: none;
  }
</style>

<button type="button">Create LanguageModel session</button>
<progress hidden id="progress" value="0"></progress>
<label for="progress">Model download progress</label>

כדי שהתכונה הזו תפעל, צריך להוסיף קצת JavaScript. הקוד מאפס קודם את ממשק ההתקדמות למצב ההתחלתי (ההתקדמות מוסתרת והערך הוא אפס), בודק אם ה-API נתמך בכלל, ואז בודק את הזמינות של ה-API:

• ממשק ה-API הוא 'unavailable': אי אפשר להשתמש באפליקציה בצד הלקוח במכשיר הזה. התראה למשתמש שהתכונה לא זמינה.
• ה-API הוא 'available': אפשר להשתמש ב-API באופן מיידי, אין צורך להציג את ממשק המשתמש של ההתקדמות.
• ה-API הוא 'downloadable' או 'downloading': אפשר להשתמש ב-API אחרי שההורדה מסתיימת. להציג אינדיקטור התקדמות ולעדכן אותו בכל פעם שהאירוע downloadprogress מופעל. אחרי ההורדה, מוצג מצב לא מוגדר כדי לסמן למשתמש שהדפדפן מקבל את המודל שחולץ ונטען לזיכרון.

const createButton = document.querySelector('.create');
const promptButton = document.querySelector('.prompt');
const progress = document.querySelector('progress');
const output = document.querySelector('output');

let sessionCreationTriggered = false;
let localSession = null;

const createSession = async (options = {}) => {
  if (sessionCreationTriggered) {
    return;
  }

  progress.hidden = true;
  progress.value = 0;

  try {
    if (!('LanguageModel' in self)) {
      throw new Error('LanguageModel is not supported.');
    }

    const availability = await LanguageModel.availability({
      // ⚠️ Always pass the same options to the `availability()` function that
      // you use in `prompt()` or `promptStreaming()`. This is critical to
      // align model language and modality capabilities.
      expectedInputs: [{ type: 'text', languages: ['en'] }],
      expectedOutputs: [{ type: 'text', languages: ['en'] }],
    });
    if (availability === 'unavailable') {
      throw new Error('LanguageModel is not available.');
    }

    let modelNewlyDownloaded = false;
    if (availability !== 'available') {
      modelNewlyDownloaded = true;
      progress.hidden = false;
    }
    console.log(`LanguageModel is ${availability}.`);
    sessionCreationTriggered = true;

    const llmSession = await LanguageModel.create({
      monitor(m) {
        m.addEventListener('downloadprogress', (e) => {
          progress.value = e.loaded;
          if (modelNewlyDownloaded && e.loaded === 1) {
            // The model was newly downloaded and needs to be extracted
            // and loaded into memory, so show the undetermined state.
            progress.removeAttribute('value');
          }
        });
      },
      ...options,
    });

    sessionCreationTriggered = false;
    return llmSession;
  } catch (error) {
    throw error;
  } finally {
    progress.hidden = true;
    progress.value = 0;
  }
};

createButton.addEventListener('click', async () => {
  try {
    localSession = await createSession({
      expectedInputs: [{ type: 'text', languages: ['en'] }],
      expectedOutputs: [{ type: 'text', languages: ['en'] }],
    });
    promptButton.disabled = false;
  } catch (error) {
    output.textContent = error.message;
  }
});

promptButton.addEventListener('click', async () => {
  output.innerHTML = '';
  try {
    const stream = localSession.promptStreaming('Write me a poem');
    for await (const chunk of stream) {
      output.append(chunk);
    }
  } catch (err) {
    output.textContent = err.message;
  }
});

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

הדגמה בצד הלקוח

מומלץ לצפות בהדגמה שבה מוצג התהליך הזה בפועל. אם ה-API המובנה של ה-AI (בדוגמה הזו, Prompt API) לא זמין, אי אפשר להשתמש באפליקציה. אם עדיין צריך להוריד את מודל ה-AI המובנה, יוצג למשתמש מד התקדמות. אפשר לראות את קוד המקור ב-GitHub.

הטמעה היברידית

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

אפשר להשתמש בכל הטמעה בצד השרת עבור היברידי, אבל כדאי להשתמש באותה משפחת מודלים גם בענן וגם באופן מקומי כדי להבטיח איכות תוצאות דומה. תחילת העבודה עם Gemini API ואפליקציות אינטרנט מציג גישות שונות לשימוש ב-Gemini API.

הדגמה היברידית

הדמו מציג את התהליך הזה בפעולה. אם ה-API המובנה של AI לא זמין, ההדגמה תשתמש ב-Gemini API בענן. אם עדיין צריך להוריד את המודל המובנה, מוצג למשתמש אינדיקטור התקדמות והאפליקציה משתמשת ב-Gemini API בענן עד שהמודל יורד. אפשר לעיין בקוד המקור המלא ב-GitHub.

סיכום

לאיזו קטגוריה שייכת האפליקציה שלך? האם נדרש עיבוד של 100% בצד הלקוח או שאפשר להשתמש בגישה היברידית? אחרי שתענו על השאלה הזו, השלב הבא הוא להטמיע את אסטרטגיית ההורדה של המודל שהכי מתאימה לכם.

כדי שהמשתמשים תמיד יידעו מתי הם יכולים להשתמש באפליקציה בצד הלקוח, חשוב להציג להם את התקדמות ההורדה של המודל, כמו שמתואר במדריך הזה.

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