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) aus dem Netzwerk heruntergeladen, die komprimierten Daten extrahiert und schließlich in den Arbeitsspeicher geladen werden. In dieser Anleitung werden einige Best Practices zur Verbesserung der Nutzererfahrung während des Downloads beschrieben.

Downloadfortschritt überwachen und teilen

Jede integrierte KI‑API hat die Funktion create(), 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 ausgeführt werden 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. Beispiel: Eine Gesundheits-App, in der Patienten Fragen zu ihren personenbezogenen Daten stellen können, sollte diese Informationen wahrscheinlich 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>

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 session = 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();
    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, wird in der Fortschrittsoberfläche angezeigt, wie weit der Browser im Downloadprozess ist. Die Anzeige basiert auf den noch fehlenden Daten.

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.

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. 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 Verarbeitung, die zu 100% clientseitig erfolgt, oder können Sie einen hybriden Ansatz verwenden? Nachdem Sie diese Frage beantwortet haben, müssen Sie als Nächstes die Strategie zum Herunterladen von Modellen implementieren, die für Sie am besten geeignet ist.

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 wenn eine neue Modellversion verfügbar wird, 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.