Gepubliceerd: 28 april 2025, Laatst bijgewerkt: 21 mei 2025
De snelle evolutie van AI opent nieuwe mogelijkheden voor webapplicaties, met name door de opkomst van functionaliteiten op het apparaat zelf. Ontdek hoe CyberAgent, een toonaangevend Japans internetbedrijf, de ingebouwde AI van Chrome en de Prompt API gebruikt om de blogervaring op hun platform, Ameba Blog, te verbeteren.
We delen hun doelen, de voordelen van het werken met ingebouwde AI, de uitdagingen waar ze voor stonden en waardevolle inzichten voor andere ontwikkelaars die gebruikmaken van ingebouwde AI.
Wat is de Prompt API?
| Uitleg | Web | Uitbreidingen | Chrome-status | Intentie |
|---|---|---|---|---|
| GitHub |  Oorsprongsproef |  Chrome 138 | Weergave | Voornemen om te experimenteren |
De Prompt API helpt ontwikkelaars om met behulp van grote taalmodellen AI-functies rechtstreeks in hun apps te integreren. Door aangepaste prompts te definiëren, kunnen apps taken uitvoeren zoals data-extractie, contentgeneratie en gepersonaliseerde antwoorden. In Chrome voert de Prompt API client-side inferentie uit met Gemini Nano . Deze lokale verwerking, ongeacht welk model wordt gebruikt, verbetert de gegevensprivacy en de reactiesnelheid. Ongeacht het gebruikte model, de reactiesnelheid aan de clientzijde blijft constant.
AI-ondersteuning voor auteurs van Ameba Blog
CyberAgent herkende een veelvoorkomend probleem voor auteurs: het vaak tijdrovende proces van het creëren van aantrekkelijke content, met name titels. Ze veronderstelden dat de integratie van AI-gestuurde functies in de blogcreatie-interface de kwaliteit en efficiëntie van contentcreatie aanzienlijk zou kunnen verbeteren. Hun doel was om tools te bieden die inspiratie geven en bloggers helpen boeiende content te creëren.
CyberAgent heeft een Chrome-extensie ontwikkeld met behulp van de Prompt API. Deze extensie biedt een reeks AI-gestuurde functies die zijn ontworpen om Ameba Blog-schrijvers te helpen bij het genereren van titels en kopjes, daaropvolgende alinea's en algemene tekstverbeteringen.
CyberAgent wilde flexibele mogelijkheden, wat direct leidde tot de Prompt API. Met oneindig veel mogelijkheden in één API kon CyberAgent precies bepalen wat het beste zou werken en het meest nuttig zou zijn voor de Ameba-auteurs.
CyberAgent heeft de extensie getest met een select aantal bloggers, wat waardevolle inzichten opleverde over de praktische toepasbaarheid van de aangeboden functies. De feedback hielp CyberAgent betere toepassingen voor AI-ondersteuning te identificeren en het ontwerp van de extensie te verfijnen. Op basis van de positieve resultaten en feedback wil CyberAgent deze functie in de toekomst uitbrengen, waarmee de kracht van client-side AI direct beschikbaar komt voor hun bloggemeenschap.
Laten we deze kenmerken eens nader bekijken.
Schrijf betere titels en kopjes.
De extensie genereert meerdere titelsuggesties op basis van de volledige bloginhoud. Blogschrijvers kunnen deze suggesties verder verfijnen met opties zoals: "Opnieuw genereren", "Beleefder", "Informeler" of "Genereer vergelijkbare titels", en meer.
CyberAgent heeft de gebruikersinterface specifiek zo ontworpen dat gebruikers geen prompts hoeven te typen. Op deze manier kunnen ook gebruikers die niet bekend zijn met prompt-ontwikkeling profiteren van de mogelijkheden van AI.
De extensie kan ook aantrekkelijke kopteksten genereren voor afzonderlijke secties van de blog, die auteurs kunnen aanvragen door de relevante tekst voor een koptekst te selecteren.
De code voor het genereren van een titel met de Prompt API bevat een initiële prompt en een gebruikersprompt. De initiële prompt geeft context en instructies om een bepaald type uitvoer te verkrijgen, terwijl de gebruikersprompts het model vragen om te reageren op wat de gebruiker schrijft. Lees meer over hun code in Implementeer AI-ondersteuning .
Genereer volgende alinea's
De extensie helpt bloggers hun schrijversblok te overwinnen door vervolgparagrafen te genereren op basis van de geselecteerde tekst. Met de context van de voorgaande paragraaf schrijft de AI een vervolg, waardoor auteurs hun creatieve flow kunnen behouden.
Verbeter en bewerk de tekst.
Gemini Nano analyseert de geselecteerde tekst en kan verbeteringen voorstellen. Gebruikers kunnen de verbeteringen reproduceren met aanvullende opmerkingen over toon en woordkeuze om de tekst "leuker" of "eenvoudiger" te maken.
Zet AI-ondersteuning in
CyberAgent heeft hun extensiecode opgesplitst in drie stappen: sessiecreatie, trigger en modelprompt.
Eerst controleren ze bij de browser of ingebouwde AI beschikbaar en ondersteund is. Zo ja, dan maken ze een sessie aan met standaardparameters.
if (!LanguageModel) {
// Detect the feature and display "Not Supported" message as needed
return;
}
// Define default values for topK and temperature within the application
const DEFAULT_TOP_K = 3;
const DEFAULT_TEMPERATURE = 1;
let session = null;
async function createAISession({ initialPrompts, topK, temperature } = {}) {
const { available, defaultTopK, maxTopK, defaultTemperature } =
await LanguageModel.availability();
// "readily", "after-download", or "no"
if (available === "no") {
return Promise.reject(new Error('AI not available'));
}
const params = {
monitor(monitor) {
monitor.addEventListener('downloadprogress', event => {
console.log(`Downloaded: ${event.loaded} of ${event.total} bytes.`);
});
},
initialPrompts: initialPrompts || '',
topK: topK || defaultTopK,
temperature: temperature || defaultTemperature,
};
session = await LanguageModel.create(params);
return session;
}
Elke functie heeft een hulpfunctie die door de gebruiker wordt geactiveerd. Zodra deze is geactiveerd, wordt de sessie bijgewerkt wanneer de gebruiker op de betreffende knop klikt.
async function updateSession({ initialPrompts, topK, temperature } = {
topK: DEFAULT_TOP_K,
temperature: DEFAULT_TEMPERATURE,
}) {
if (session) {
session.destroy();
session = null;
}
session = await createAISession({
initialPrompts,
topK,
temperature,
});
}
Nadat de sessie is bijgewerkt, geven ze het model een prompt op basis van de functie. Hier is bijvoorbeeld de code om een titel te genereren en een nieuwe titel te genereren met een formelere toon.
async function generateTitle() {
// Initialize the model session
await updateSession({
initialPrompts: [
{ role: 'system',
content: `Create 3 titles suitable for the blog post's content,
within 128 characters, and respond in JSON array format.`,
}
]
});
const prompt = `Create a title for the following
blog post.${textareaEl.textContent}`;
const result = await session.prompt(prompt);
try {
const fixedJson = fixJSON(result);
// display result
displayResult(fixedJSON);
} catch (error) {
// display error
displayError();
}
}
async function generateMoreFormalTitle() {
// Do not execute updateSession to reuse the session during regeneration
const prompt = 'Create a more formal title.';
const result = await session.prompt(prompt);
...
}
De voordelen van ingebouwde AI
Ingebouwde AI is een vorm van client-side AI , wat betekent dat de inferentie plaatsvindt op het apparaat van de gebruiker. CyberAgent heeft ervoor gekozen om ingebouwde AI-API's te gebruiken met Gemini Nano vanwege de aantrekkelijke voordelen die dit biedt aan zowel applicatieontwikkelaars als gebruikers.
De belangrijkste voordelen waarop CyberAgent zich richt, zijn onder andere:
- Beveiliging en privacy
- Kosten
- Responsiviteit en betrouwbaarheid
- Ontwikkelingsgemak
Beveiliging en privacy
De mogelijkheid om AI-modellen direct op het apparaat van de gebruiker uit te voeren zonder gegevens naar externe servers te verzenden, is van cruciaal belang. Conceptblogs zijn niet bedoeld om door het publiek te worden gelezen, en daarom wil CyberAgent deze concepten niet naar een server van derden sturen.
De ingebouwde AI downloadt Gemini Nano naar de apparaten van de gebruiker, waardoor het niet meer nodig is om gegevens van en naar servers te verzenden. Dit is vooral handig tijdens het schrijven, omdat concepten vertrouwelijke informatie of onbedoelde uitdrukkingen kunnen bevatten. De ingebouwde AI bewaart de originele en gegenereerde inhoud lokaal in plaats van deze naar een server te sturen, wat de beveiliging kan verbeteren en de privacy van de inhoud kan beschermen.
Kostenbesparingen
Een groot voordeel van het gebruik van ingebouwde AI is dat de browser Gemini Nano bevat en de API's gratis te gebruiken zijn. Er zijn geen extra of verborgen kosten.
De ingebouwde AI verlaagt de serverkosten aanzienlijk en kan de kosten voor AI-inferentie volledig elimineren. Deze oplossing kan snel worden opgeschaald naar een grote gebruikersgroep en stelt gebruikers in staat om opeenvolgende prompts in te dienen om de resultaten te verfijnen zonder extra kosten.
Responsiviteit en betrouwbaarheid
De ingebouwde AI zorgt voor consistente en snelle reactietijden, onafhankelijk van de netwerkcondities. Hierdoor kunnen gebruikers steeds opnieuw content genereren, wat het voor hen veel gemakkelijker maakt om nieuwe ideeën uit te proberen en snel een bevredigend eindresultaat te bereiken.
Ontwikkelingsgemak
De ingebouwde AI van Chrome vereenvoudigt het ontwikkelingsproces door een direct beschikbare API te bieden. Ontwikkelaars profiteren van het gemak waarmee ze AI-gestuurde functies voor hun applicatie kunnen creëren.
Gemini Nano en de ingebouwde AI-API's zijn geïnstalleerd in Chrome, dus er is geen extra configuratie of modelbeheer nodig. De API's gebruiken JavaScript, net als andere browser-API's, en vereisen geen expertise in machine learning.
Uitdagingen overwinnen voor betere resultaten
De ervaring van CyberAgent met de Prompt API leverde waardevolle lessen op over de nuances van het werken met client-side LLM's.
- Inconsistente reacties : Net als andere LLM's garandeert Gemini Nano geen identieke uitvoer voor dezelfde prompt. CyberAgent kwam reacties tegen in onverwachte formaten (zoals Markdown en ongeldige JSON). Zelfs met instructies is het mogelijk dat de resultaten sterk variëren. Bij het implementeren van een applicatie of Chrome-extensie met ingebouwde AI kan het nuttig zijn om een workaround toe te voegen om ervoor te zorgen dat de uitvoer altijd in het juiste formaat is.
- Tokenlimiet : Het beheren van tokengebruik is cruciaal. CyberAgent gebruikte eigenschappen en methoden zoals
inputUsage,inputQuotaenmeasureInputUsage()om sessies te beheren , de context te behouden en het tokenverbruik te verminderen. Dit was vooral belangrijk bij het verfijnen van titels. - Beperkingen qua modelgrootte : Omdat het model wordt gedownload en op het apparaat van de gebruiker wordt opgeslagen, is het aanzienlijk kleiner dan een servergebaseerd model. Dit betekent dat het cruciaal is om voldoende context in de prompt te bieden om bevredigende resultaten te behalen, met name voor samenvattingen. Lees meer over het begrijpen van de grootte van LLM's .
CyberAgent benadrukt dat hoewel client-side modellen nog niet universeel beschikbaar zijn voor alle browsers en apparaten, en de kleinere modellen beperkingen hebben, ze toch indrukwekkende prestaties kunnen leveren voor specifieke taken. De mogelijkheid om snel te itereren en te experimenteren zonder serverkosten maakt het een waardevol hulpmiddel.
Ze adviseren een evenwicht te vinden en erkennen dat perfecte reacties moeilijk te bereiken zijn met welke AI dan ook, of die nu server- of client-side is. Tot slot zien ze een toekomst waarin een hybride aanpak, die de sterke punten van zowel server-side als client-side AI combineert, een nog groter potentieel zal ontsluiten.
Vooruitblik
CyberAgent's onderzoek naar ingebouwde AI laat de spannende mogelijkheden zien van naadloze AI-integraties om de gebruikerservaring te verbeteren. Hun extensie, ontwikkeld voor samenwerking met Ameba Blog, demonstreert hoe deze technologieën praktisch kunnen worden toegepast om problemen uit de praktijk op te lossen en biedt waardevolle lessen voor de bredere webontwikkelingsgemeenschap.
Naarmate de technologie zich verder ontwikkelt en de ondersteuning voor browsers en apparaten zich uitbreidt, verwachten we nog meer innovatieve toepassingen te zien van ingebouwde AI en andere vormen van client-side AI.
Bronnen
- Leer meer over de Prompt API.
- Begin met het gebruiken van de ingebouwde API's in Chrome.
- De casestudy van CyberAgent over web-AI behandelt hetzelfde onderwerp.
- Bekijk ' De toekomst van AI is nu' , de casestudies van CyberAgent over AI aan de clientzijde.
Dankbetuigingen
Met dank aan de bloggers van Ameba, ao , Nodoka , Erin , Chiaki en socchi , die feedback hebben gegeven en hebben bijgedragen aan de verbetering van de extensie. Dank aan Thomas Steiner , Alexandra Klepper en Sebastian Benz voor hun hulp bij het schrijven en nakijken van dit blogbericht.