Nutzer über den Modelldownload informieren

Thomas Steiner

Veröffentlicht: 1. Oktober 2025

Bevor eine der integrierten KI-APIs verwendet werden kann, müssen das zugrunde liegende Modell und alle Anpassungen (z. B. Feinabstimmungen) heruntergeladen, die komprimierten Daten extrahiert und alles in den Arbeitsspeicher geladen werden. Es empfiehlt sich, den Nutzer über die für diese Downloads erforderliche Zeit zu informieren.

In den folgenden Beispielen wird die Prompt API verwendet. Die Konzepte lassen sich jedoch auf alle anderen integrierten KI-APIs anwenden.

Downloadfortschritt überwachen und teilen

Für jede integrierte KI-API wird die Funktion create() verwendet, um eine Sitzung zu starten. Die Funktion create() hat die Option monitor, mit der Sie den Downloadfortschritt abrufen und mit dem Nutzer teilen können.

Die integrierten KI‑APIs sind zwar für clientseitige KI konzipiert, bei der Daten im Browser und auf dem Gerät des Nutzers verarbeitet werden, aber bei einigen Anwendungen können Daten auch auf einem Server verarbeitet werden. Wie Sie den Nutzer im Fortschritt des Modelldownloads ansprechen, hängt von dieser Frage ab: Muss die Datenverarbeitung nur lokal erfolgen oder nicht? Wenn dies der Fall ist, ist Ihre Anwendung nur clientseitig. Andernfalls könnte Ihre Anwendung eine Hybridimplementierung verwenden.

Nur clientseitig

In einigen Szenarien ist eine clientseitige Datenverarbeitung erforderlich. Eine Gesundheitsanwendung, in der Patienten Fragen zu ihren personenbezogenen Daten stellen können, sollte diese Informationen beispielsweise auf dem Gerät des Nutzers speichern. Der Nutzer muss warten, bis das Modell und alle Anpassungen heruntergeladen und bereit sind, bevor er Datenverarbeitungsfunktionen verwenden kann.

Wenn das Modell in diesem Fall noch nicht verfügbar ist, sollten Sie dem Nutzer Informationen zum Downloadfortschritt anzeigen.

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

Während das integrierte Modell heruntergeladen wird, kann die App noch nicht verwendet werden.

Damit das funktioniert, ist etwas JavaScript erforderlich. Der Code setzt zuerst die Fortschrittsschnittstelle auf den Anfangszustand zurück (Fortschritt verborgen und null), prüft, ob die API überhaupt unterstützt wird, und prüft dann die Verfügbarkeit der API:

  • Die API ist 'unavailable': Ihre Anwendung kann auf diesem Gerät nicht clientseitig verwendet werden. Informieren Sie den Nutzer, dass die Funktion nicht verfügbar ist.
  • Die API ist 'available': Die API kann sofort verwendet werden. Es ist nicht erforderlich, die Fortschritts-UI anzuzeigen.
  • Die API ist 'downloadable' oder 'downloading': Die API kann verwendet werden, sobald der Download abgeschlossen ist. Zeigen Sie eine Fortschrittsanzeige an und aktualisieren Sie sie, wenn das downloadprogress-Ereignis ausgelöst wird. Zeigen Sie nach dem Download den unbestimmten Status an, um dem Nutzer zu signalisieren, dass das Modell extrahiert und in den Arbeitsspeicher geladen wird.
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;
  }
});

Wenn der Nutzer die App aufruft, während das Modell aktiv in den Browser heruntergeladen wird, zeigt die Fortschrittsoberfläche an, wie weit der Browser im Downloadprozess ist. Die Anzeige basiert auf den noch fehlenden Daten.

Clientseitige Demo

Sehen Sie sich die Demo an, in der dieser Ablauf in Aktion gezeigt wird. Wenn die integrierte KI-API (in diesem Beispiel die Prompt API) nicht verfügbar ist, kann die App nicht verwendet werden. Wenn das integrierte KI-Modell noch heruntergeladen werden muss, wird dem Nutzer ein Fortschrittsindikator angezeigt. Sie können den Quellcode auf GitHub ansehen.

Hybride Implementierung

Wenn Sie lieber clientseitige KI verwenden, aber vorübergehend Daten in die Cloud senden können, können Sie eine Hybridimplementierung einrichten. So können Nutzer Funktionen sofort nutzen, während das lokale Modell parallel heruntergeladen wird. Sobald das Modell heruntergeladen wurde, wird dynamisch zur lokalen Sitzung gewechselt.

Sie können jede serverseitige Implementierung für Hybrid verwenden. Es ist jedoch wahrscheinlich am besten, sowohl in der Cloud als auch lokal bei derselben Modellfamilie zu bleiben, um eine vergleichbare Ergebnisqualität zu erzielen. Erste Schritte mit der Gemini API und Web-Apps enthält Informationen zu den verschiedenen Ansätzen für die Gemini API.

Während das integrierte Modell heruntergeladen wird, greift die App auf ein Cloud-Modell zurück und kann bereits verwendet werden.

Hybrid demo

In der Demo wird dieser Ablauf in Aktion gezeigt. Wenn die integrierte KI API nicht verfügbar ist, greift die Demo auf die Gemini API in der Cloud zurück. Wenn das integrierte Modell noch heruntergeladen werden muss, wird dem Nutzer eine Fortschrittsanzeige angezeigt und die App verwendet die Gemini API in der Cloud, bis das Modell heruntergeladen ist. Vollständigen Quellcode auf GitHub ansehen

Fazit

In welche Kategorie fällt Ihre App? Benötigen Sie eine 100% ige clientseitige Verarbeitung oder können Sie einen hybriden Ansatz verwenden? Nachdem Sie diese Frage beantwortet haben, müssen Sie als Nächstes die für Sie am besten geeignete Strategie zum Herunterladen von Modellen implementieren.

Sorgen Sie dafür, dass Ihre Nutzer immer wissen, wann und ob sie Ihre App clientseitig verwenden können, indem Sie ihnen den Fortschritt des Modelldownloads anzeigen, wie in diesem Leitfaden beschrieben.

Denken Sie daran, dass dies nicht nur eine einmalige Herausforderung ist: Wenn der Browser das Modell aufgrund von Speichermangel oder bei Verfügbarkeit einer neuen Modellversion löscht, muss das Modell noch einmal heruntergeladen werden. Ganz gleich, ob Sie den clientseitigen oder den hybriden Ansatz verwenden: Sie können sicher sein, dass Sie die bestmögliche Nutzererfahrung schaffen und der Browser sich um den Rest kümmert.