Gebruikers informeren over het downloaden van het model

Thomas Steiner

Gepubliceerd: 1 oktober 2025

Voordat een van de ingebouwde AI API's kan worden gebruikt, moeten het onderliggende model en eventuele aanpassingen (zoals finetunings) van het netwerk worden gedownload, moeten de gecomprimeerde gegevens worden geëxtraheerd en ten slotte in het geheugen worden geladen. Deze handleiding beschrijft enkele best practices voor het verbeteren van de gebruikerservaring tijdens het wachten op deze download.

Volg en deel de downloadvoortgang

Elke ingebouwde AI API heeft de create() functie om een ​​sessie te starten. De create() functie heeft een monitor , zodat u de downloadvoortgang kunt bekijken en met de gebruiker kunt delen.

Hoewel ingebouwde AI API's zijn gebouwd voor client-side AI , waarbij gegevens worden verwerkt in de browser en op het apparaat van de gebruiker, kunnen sommige applicaties gegevensverwerking op een server toestaan. Hoe u uw gebruiker aanspreekt tijdens de voortgang van het downloaden van het model, hangt af van die vraag: moet de gegevensverwerking alleen lokaal worden uitgevoerd of niet? Zo ja, dan is uw applicatie alleen client-side. Zo niet, dan zou uw applicatie een hybride implementatie kunnen gebruiken.

Alleen clientzijde

In sommige scenario's is client-side dataverwerking vereist. Een zorgapplicatie waarmee patiënten bijvoorbeeld vragen kunnen stellen over hun persoonlijke gegevens, wil die informatie waarschijnlijk privé houden op het apparaat van de gebruiker. De gebruiker moet wachten tot het model en alle aanpassingen gedownload en klaar zijn voordat hij/zij dataverwerkingsfuncties kan gebruiken.

Als het model nog niet beschikbaar is, moet u de voortgang van het downloaden aan de gebruiker bekendmaken.

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

Terwijl het ingebouwde model wordt gedownload, kan de app nog niet worden gebruikt.

Om dit functioneel te maken, is een beetje JavaScript nodig. De code reset eerst de voortgangsinterface naar de beginstatus (voortgang verborgen en nul), controleert of de API überhaupt wordt ondersteund en controleert vervolgens de beschikbaarheid van de API :

  • De API is 'unavailable' : uw applicatie kan niet client-side worden gebruikt op dit apparaat. Waarschuw de gebruiker dat de functie niet beschikbaar is.
  • De API is 'available' : de API kan onmiddellijk worden gebruikt, het is niet nodig de voortgangsinterface weer te geven.
  • De API is 'downloadable' of 'downloading' : de API kan worden gebruikt zodra het downloaden is voltooid. Toon een voortgangsindicator en werk deze bij wanneer de downloadprogress -gebeurtenis wordt geactiveerd. Toon na het downloaden de status 'indeterminate' om de gebruiker te laten weten dat de browser bezig is met het extraheren en laden van het model in het geheugen.
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;
  }
});

Als de gebruiker de app opent terwijl het model actief naar de browser wordt gedownload, geeft de voortgangsinterface aan waar de browser zich bevindt in het downloadproces op basis van de nog ontbrekende gegevens.

Bekijk de demo die deze flow in actie laat zien. Als de ingebouwde AI API (in dit voorbeeld de Prompt API) niet beschikbaar is, kan de app niet worden gebruikt. Moet het ingebouwde AI-model nog worden gedownload, dan wordt er een voortgangsindicator aan de gebruiker getoond. Je kunt de broncode bekijken op GitHub.

Hybride implementatie

Als u liever client-side AI gebruikt, maar tijdelijk gegevens naar de cloud kunt sturen, kunt u een hybride implementatie opzetten. Dit betekent dat gebruikers direct van de functies kunnen genieten, terwijl ze tegelijkertijd het lokale model downloaden. Zodra het model is gedownload, schakelt u dynamisch over naar de lokale sessie.

U kunt elke server-side implementatie gebruiken voor hybride toepassingen, maar het is waarschijnlijk het beste om dezelfde modelfamilie te gebruiken in zowel de cloud als lokaal om een ​​vergelijkbare resultaatkwaliteit te garanderen. In ' Aan de slag met de Gemini API en webapps' worden de verschillende benaderingen voor de Gemini API belicht.

Terwijl het ingebouwde model wordt gedownload, schakelt de app terug naar een cloudmodel en is deze al bruikbaar.

De demo toont deze flow in actie. Als de ingebouwde AI API niet beschikbaar is, schakelt de demo terug naar de Gemini API in de cloud. Moet het ingebouwde model nog worden gedownload, dan wordt er een voortgangsindicator aan de gebruiker getoond en gebruikt de app de Gemini API in de cloud totdat het model is gedownload. Bekijk de volledige broncode op GitHub .

Conclusie

In welke categorie valt uw app? Heeft u 100% client-side verwerking nodig of kunt u een hybride aanpak gebruiken? Nadat u deze vraag hebt beantwoord, is de volgende stap het implementeren van de modeldownloadstrategie die het beste bij u past.

Zorg ervoor dat uw gebruikers altijd weten of en wanneer ze uw app aan de clientzijde kunnen gebruiken door hen de voortgang van het downloaden van het model te laten zien zoals beschreven in deze handleiding.

Onthoud dat dit geen eenmalige uitdaging is: als de browser het model verwijdert vanwege opslagdruk of wanneer een nieuwe modelversie beschikbaar komt, moet de browser het model opnieuw downloaden. Of u nu de client-side of hybride aanpak kiest, u kunt er zeker van zijn dat u de best mogelijke ervaring voor uw gebruikers creëert en de browser de rest laat doen.