Gepubliceerd: 28 april 2025, Laatst bijgewerkt: 21 mei 2025
De snelle evolutie van AI opent nieuwe mogelijkheden voor webapplicaties, met name met de komst van mogelijkheden 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 ingebouwde AI gebruiken.
Wat is de Prompt API?
| Uitlegger | Web | Uitbreidingen | Chrome-status | Intentie |
|---|---|---|---|---|
| GitHub | Weergave | Intentie om te experimenteren |
De Prompt API helpt ontwikkelaars om uitgebreide taalmodellen te gebruiken om AI-functies rechtstreeks aan hun apps toe te voegen. Door aangepaste prompts te definiëren, kunnen apps taken uitvoeren zoals data-extractie, contentgeneratie en gepersonaliseerde reacties. In Chrome voert de Prompt API client-side inferentie uit met Gemini Nano . Deze lokale verwerking, ongeacht het gebruikte model, verbetert de dataprivacy en de reactiesnelheid. Ongeacht het gebruikte model, de reactiesnelheid van de client.
AI-ondersteuning voor auteurs van Ameba Blog
CyberAgent herkende een veelvoorkomend knelpunt voor auteurs: het vaak tijdrovende proces van het creëren van boeiende content, met name titels. Ze veronderstelden dat de integratie van AI-gestuurde functies in de interface voor blogcreatie de kwaliteit en efficiëntie van contentcreatie aanzienlijk zou kunnen verbeteren. Hun doel was om tools te bieden die inspiratie bieden en hun bloggers helpen bij het creëren van boeiende content.
CyberAgent heeft een Chrome-extensie met de Prompt API ontwikkeld. Deze extensie biedt een reeks AI-gestuurde functies die schrijvers van Ameba Blog helpen bij het genereren van titels en koppen, vervolgalinea's en algemene tekstverbeteringen.
CyberAgent wilde flexibiliteit in de 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 testte de extensie met een select aantal bloggers, wat waardevolle inzichten opleverde over de bruikbaarheid van de aangeboden functies. De feedback hielp CyberAgent om 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 en zo de kracht van client-side AI rechtstreeks naar hun blogcommunity brengen.
Laten we deze functies eens nader bekijken.
Schrijf betere titels en koppen
De extensie genereert meerdere titelsuggesties op basis van de volledige blogcontent. Blogschrijvers kunnen deze suggesties verder verfijnen met opties zoals 'Regenereren', 'Beleefder', 'Informeler' of 'Vergelijkbare titels genereren', en meer.
CyberAgent heeft de gebruikersinterface zo ontworpen dat gebruikers geen prompts hoeven te schrijven. Zo kunnen ook gebruikers die niet bekend zijn met prompt engineering profiteren van de kracht van AI.
De extensie kan ook aantrekkelijke headers genereren voor afzonderlijke secties van de blog. Auteurs kunnen deze opvragen door de relevante tekst voor een kop te selecteren.
De code om een titel te genereren met de Prompt API bevat een initiële prompt en een gebruikersprompt. De initiële prompt geeft context en instructies om een bepaald type output te verkrijgen, terwijl de gebruikersprompts het model vragen om te reageren op wat de gebruiker schrijft. Lees meer over hun code in AI-implementatiehulp .
Genereer volgende alinea's
De extensie helpt bloggers een writer's block te overwinnen door vervolgalinea's te genereren op basis van de geselecteerde tekst. Met de context van de voorgaande alinea schrijft de AI een vervolg op de alinea, zodat 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 regenereren met extra opmerkingen over toon en taalkeuze om de tekst "leuker" of "eenvoudiger" te maken.
AI-assistentie inzetten
CyberAgent heeft de extensiecode opgesplitst in drie stappen: sessie aanmaken, triggeren en modelprompt.
Eerst controleren ze via 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 helperfunctie die door de gebruiker wordt geactiveerd. Zodra de gebruiker op de betreffende knop klikt, wordt de sessie dienovereenkomstig bijgewerkt.
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, wordt het model aangestuurd op basis van de functie. Hier is bijvoorbeeld de code om een titel te genereren en een titel met een formelere toon opnieuw te genereren.
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 type 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 voor zowel applicatieontwikkelaars als gebruikers.
De belangrijkste voordelen waar CyberAgent zich op richt, zijn:
- Beveiliging en privacy
- Kosten
- Responsiviteit en betrouwbaarheid
- Gemak van ontwikkeling
Beveiliging en privacy
De mogelijkheid om AI-modellen rechtstreeks op het apparaat van de gebruiker te draaien zonder gegevens naar externe servers te verzenden, is van cruciaal belang. Blogconcepten zijn niet bedoeld om door het publiek te worden bekeken en daarom wil CyberAgent deze concepten niet naar een externe server sturen.
Ingebouwde AI downloadt Gemini Nano naar gebruikersapparaten, waardoor het niet meer nodig is om gegevens van en naar servers te versturen en te ontvangen. Dit is vooral handig tijdens het schrijven, aangezien concepten vertrouwelijke informatie of onbedoelde uitingen kunnen bevatten. Ingebouwde AI houdt de originele en gegenereerde content lokaal in plaats van deze naar een server te sturen, wat de beveiliging kan verbeteren en de privacy van de content kan beschermen.
Kostenbesparing
Een groot voordeel 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.
Ingebouwde AI verlaagt de serverkosten aanzienlijk en kan de kosten die gepaard gaan met 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 output te verfijnen zonder extra kosten.
Responsiviteit en betrouwbaarheid
Ingebouwde AI zorgt voor consistente en snelle responstijden, onafhankelijk van de netwerkomstandigheden. Dit stelde gebruikers in staat om steeds opnieuw content te genereren, waardoor het veel gemakkelijker is om nieuwe ideeën uit te proberen en snel een bevredigend eindresultaat te creëren.
Gemak van ontwikkeling
De ingebouwde AI van Chrome vereenvoudigt het ontwikkelingsproces door een direct beschikbare API te bieden. Ontwikkelaars profiteren van hoe eenvoudig het is om AI-gestuurde functies voor hun applicatie te creëren.
Gemini Nano en de ingebouwde AI API's worden in Chrome geïnstalleerd, 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 stuitte op reacties in onverwachte formaten (zoals Markdown en ongeldige JSON). Zelfs met instructies kunnen de resultaten sterk variëren. Bij de implementatie 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 , context te behouden en tokengebruik te verminderen. Dit was vooral belangrijk bij het verfijnen van titels. - Beperkingen van de modelgrootte : Omdat het model wordt gedownload en op het apparaat van de gebruiker staat, is het aanzienlijk kleiner dan een servergebaseerd model. Dit betekent dat het cruciaal is om voldoende context binnen de prompt te bieden om bevredigende resultaten te bereiken, met name voor samenvattingen. Lees meer over het begrijpen van LLM-groottes .
CyberAgent benadrukt dat client-side modellen weliswaar nog niet universeel beschikbaar zijn voor alle browsers en apparaten, en dat de kleinere modellen beperkingen hebben, maar dat ze toch indrukwekkende prestaties kunnen leveren voor specifieke taken. De mogelijkheid om snel te itereren en te experimenteren zonder server-side kosten maakt het een waardevolle tool.
Ze adviseren om een balans te vinden, in het besef dat perfecte responsen moeilijk te bereiken zijn met welke AI dan ook, of het nu server- of client-side is. Ten slotte zien ze een toekomst waarin een hybride aanpak, die de sterke punten van zowel server- als client-side AI combineert, nog meer potentieel zal ontsluiten.
Vooruitkijken
CyberAgent's onderzoek naar ingebouwde AI toont de interessante mogelijkheden van naadloze AI-integraties om de gebruikerservaring te verbeteren. Hun extensie, ontwikkeld om samen te werken met Ameba Blog, laat zien hoe deze technologieën praktisch kunnen worden toegepast om echte problemen op te lossen, en biedt waardevolle lessen voor de bredere webontwikkelingsgemeenschap.
Naarmate de technologie zich ontwikkelt en de ondersteuning voor browsers en apparaten wordt uitgebreid, verwachten we nog meer innovatieve toepassingen van ingebouwde AI en andere vormen van client-side AI te zien.
Bronnen
- Meer informatie over Prompt API
- Begin met het gebruiken van ingebouwde API's op Chrome
- De casestudy van CyberAgent over Web AI behandelt hetzelfde onderwerp.
- Bekijk De toekomst van AI is nu , CyberAgent's casestudies over client-side AI
Dankbetuigingen
Dank aan de bloggers van Ameba, oa Nodoka , Erin , Chiaki en Socchi , die feedback gaven en hielpen de extensie te verbeteren. Dank aan Thomas Steiner , Alexandra Klepper en Sebastian Benz voor hun hulp bij het schrijven en beoordelen van deze blogpost.