Veröffentlicht am 28. April 2025, zuletzt aktualisiert am 21. Mai 2025

Die rasante Entwicklung der KI eröffnet neue Möglichkeiten für Webanwendungen, insbesondere mit dem Aufkommen von On-Device-Funktionen. Erfahren Sie, wie CyberAgent, ein führendes japanisches Internetunternehmen, die in Chrome's integrierte KI und die Prompt API nutzt, um das Bloggerlebnis auf seiner Plattform, Ameba Blog zu verbessern.
Wir stellen die Ziele des Unternehmens, die Vorteile der Arbeit mit integrierter KI, die Herausforderungen, vor denen es stand, und wertvolle Erkenntnisse für andere Entwickler vor, die integrierte KI nutzen.
Was ist die Prompt API?
| Erläuterung | Web | Erweiterungen | Chrome-Status | Absicht |
|---|---|---|---|---|
| GitHub | Ansicht | Absicht zur Auslieferung | ||
| GitHub | Ansicht | Absicht zum Testen |
Mit der Prompt API können Entwickler große Sprachmodelle verwenden, um KI-Funktionen direkt in ihre Apps einzubinden. Durch das Definieren benutzerdefinierter Prompts können Apps Aufgaben wie Datenextraktion, Content-Generierung und personalisierte Antworten ausführen. In Chrome führt die Prompt API clientseitige Inferenz mit einem Foundation Model durch. Diese lokale Verarbeitung verbessert unabhängig vom verwendeten Modell den Datenschutz und die Reaktionsgeschwindigkeit. Unabhängig vom verwendeten Modell ist die Reaktionsgeschwindigkeit des Clients.
KI-Unterstützung für Ameba Blog-Autoren
CyberAgent hat ein häufiges Problem für Autoren erkannt: den oft zeitaufwendigen Prozess, ansprechende Inhalte zu erstellen, insbesondere Titel. Das Unternehmen ging davon aus, dass die Einbindung von KI-gestützten Funktionen in die Benutzeroberfläche zur Blogerstellung die Qualität und Effizienz der Content-Erstellung erheblich verbessern könnte. Ziel war es, Tools bereitzustellen, die Inspiration bieten und Bloggern helfen, ansprechende Inhalte zu erstellen.
CyberAgent hat mit der Prompt API eine Chrome-Erweiterung entwickelt. Diese Erweiterung bietet eine Reihe von KI-gestützten Funktionen, mit denen Ameba Blog-Autoren Titel und Überschriften, nachfolgende Absätze und allgemeine Verbesserungen am Text generieren können.
CyberAgent wollte flexible Funktionen. Das führte direkt zur Prompt API. Mit den unzähligen Möglichkeiten einer einzigen API konnte CyberAgent genau festlegen, was für die Ameba-Autoren am besten geeignet und nützlichsten wäre.
CyberAgent hat die Erweiterung mit einer ausgewählten Anzahl von Bloggern getestet. So konnten wertvolle Erkenntnisse über die Praktikabilität der angebotenen Funktionen gewonnen werden. Das Feedback half CyberAgent, bessere Anwendungen für die KI-Unterstützung zu finden und das Design der Erweiterung zu optimieren. Aufgrund der positiven Ergebnisse und des Feedbacks plant CyberAgent, diese Funktion in Zukunft zu veröffentlichen und so die Leistungsfähigkeit der clientseitigen KI direkt der Blogger-Community zur Verfügung zu stellen.
Sehen wir uns diese Funktionen genauer an.
Bessere Titel und Überschriften schreiben
Die Erweiterung generiert basierend auf dem gesamten Bloginhalt mehrere Titelvorschläge. Blogautoren können diese Vorschläge weiter verfeinern. Dazu stehen Optionen wie „Neu generieren“, „Höflicher“, „Informeller“ oder „Ähnliche Titel generieren“ zur Verfügung.
CyberAgent hat die Benutzeroberfläche so gestaltet, dass Nutzer keine Prompts schreiben müssen. So können auch Nutzer, die mit Prompt-Engineering nicht vertraut sind, die Leistungsfähigkeit der KI nutzen.
Die Erweiterung kann auch ansprechende Überschriften für einzelne Abschnitte des Blogs generieren. Autoren können diese anfordern, indem sie den entsprechenden Text für eine Überschrift auswählen.
Der Code zum Generieren eines Titels mit der Prompt API umfasst einen anfänglichen Prompt und einen Nutzer-Prompt. Der anfängliche Prompt liefert Kontext und Anweisungen, um eine bestimmte Art von Ausgabe zu erhalten. Mit den Nutzer-Prompts wird das Modell aufgefordert, auf das zu reagieren, was der Nutzer schreibt. Weitere Informationen zum Code finden Sie unter KI-Unterstützung bereitstellen.
Nachfolgende Absätze generieren
Die Erweiterung hilft Bloggern, Schreibblockaden zu überwinden, indem sie basierend auf dem ausgewählten Text nachfolgende Absätze generiert. Mit dem Kontext aus dem vorherigen Absatz entwirft die KI eine Fortsetzung des Absatzes, sodass Autoren ihren kreativen Fluss beibehalten können.
Text verbessern und bearbeiten
Gemini Nano analysiert den ausgewählten Text und kann Verbesserungen vorschlagen. Nutzer können die Verbesserungen mit zusätzlichen Hinweisen zu Ton und Sprachwahl neu generieren, um den Text „süßer“ oder „einfacher“ zu gestalten.
KI-Unterstützung bereitstellen
CyberAgent hat den Code der Erweiterung in drei Schritte unterteilt: Sitzungserstellung, Trigger und Modell-Prompt.
Zuerst wird im Browser geprüft, ob die integrierte KI verfügbar ist und unterstützt wird. Wenn ja, wird eine Sitzung mit Standardparametern erstellt.
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;
}
Jede Funktion hat eine Hilfsfunktion, die vom Nutzer ausgelöst wird. Sobald sie ausgelöst wurde, wird die Sitzung entsprechend aktualisiert, wenn der Nutzer auf die entsprechende Schaltfläche klickt.
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,
});
}
Nachdem die Sitzung aktualisiert wurde, wird das Modell entsprechend der Funktion aufgefordert. Hier ist beispielsweise der Code zum Generieren eines Titels und zum erneuten Generieren eines Titels mit einem formelleren Ton.
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);
...
}
Vorteile der integrierten KI
Integrierte KI ist eine Art clientseitige KI, d. h., die Inferenz erfolgt auf dem Gerät des Nutzers. CyberAgent hat sich für die Verwendung von APIs für integrierte KI mit Gemini Nano entschieden, da sie sowohl Anwendungsentwicklern als auch Nutzern überzeugende Vorteile bietet.
Zu den wichtigsten Vorteilen, auf die sich CyberAgent konzentriert hat, gehören:
- Sicherheit und Datenschutz
- Kosten
- Reaktionsfähigkeit und Zuverlässigkeit
- Einfache Entwicklung
Sicherheit und Datenschutz
Es ist von entscheidender Bedeutung, KI-Modelle direkt auf dem Gerät des Nutzers ausführen zu können, ohne Daten an externe Server zu übertragen. Blogentwürfe sind nicht für die Öffentlichkeit bestimmt. Daher möchte CyberAgent diese Entwürfe nicht an einen Drittanbieterserver senden.
Mit der integrierten KI wird Gemini Nano auf die Geräte der Nutzer heruntergeladen. So müssen keine Daten von Servern gesendet und empfangen werden. Das ist besonders beim Schreiben nützlich, da Entwürfe vertrauliche Informationen oder unbeabsichtigte Formulierungen enthalten können. Die integrierte KI speichert die Original- und generierten Inhalte lokal, anstatt sie an einen Server zu senden. So können die Sicherheit und der Datenschutz der Inhalte verbessert werden.
Kosteneinsparungen
Ein großer Vorteil der Verwendung von integrierter KI besteht darin, dass Gemini Nano im Browser enthalten ist und die APIs kostenlos verwendet werden können. Es fallen keine zusätzlichen oder versteckten Kosten an.
Die integrierte KI senkt die Serverkosten erheblich und kann die Kosten für die KI-Inferenz vollständig eliminieren. Diese Lösung lässt sich schnell auf eine große Nutzerbasis skalieren. Nutzer können aufeinanderfolgende Prompts senden, um die Ausgaben zu verfeinern, ohne dass zusätzliche Gebühren anfallen.
Reaktionsfähigkeit und Zuverlässigkeit
Die integrierte KI bietet unabhängig von den Netzwerkbedingungen konsistente und schnelle Reaktionszeiten. So konnten Nutzer immer wieder Inhalte generieren. Das erleichtert es ihnen, neue Ideen auszuprobieren und schnell ein zufriedenstellendes Endergebnis zu erzielen.
Einfache Entwicklung
Die in Chrome integrierte KI vereinfacht den Entwicklungsprozess, da eine sofort verfügbare API bereitgestellt wird. Entwickler profitieren davon, wie einfach es ist, KI-gestützte Funktionen für ihre Anwendung zu erstellen.
Gemini Nano und die APIs für integrierte KI sind in Chrome installiert. Daher sind keine zusätzliche Einrichtung oder Modellverwaltung erforderlich. Die APIs verwenden wie andere Browser-APIs JavaScript und erfordern keine Fachkenntnisse im Bereich maschinelles Lernen.
Herausforderungen meistern, um bessere Ergebnisse zu erzielen
Die Arbeit von CyberAgent mit der Prompt API hat wertvolle Erkenntnisse über die Feinheiten der Arbeit mit clientseitigen LLMs geliefert.
- Inkonsistente Antworten: Wie andere LLMs garantiert auch Gemini Nano keine identischen Ausgaben für denselben Prompt. CyberAgent hat Antworten in unerwarteten Formaten erhalten (z. B. Markdown und ungültiges JSON). Auch mit Anweisungen können die Ergebnisse stark variieren. Wenn Sie eine Anwendung oder Chrome-Erweiterung mit integrierter KI implementieren, kann es sinnvoll sein, eine Problemumgehung hinzuzufügen, um sicherzustellen, dass die Ausgabe immer im richtigen Format erfolgt.
- Token-Limit: Die Verwaltung der Token-Nutzung ist entscheidend. CyberAgent hat Eigenschaften und Methoden wie
contextUsage,contextWindowundmeasureContextUsage()verwendet, um Sitzungen zu verwalten, den Kontext beizubehalten und den Token-Verbrauch zu senken. Das war besonders wichtig, als Titel verfeinert wurden. - Beschränkungen der Modellgröße: Da das Modell heruntergeladen wird und sich auf dem Gerät des Nutzers befindet, ist es deutlich kleiner als ein serverbasiertes Modell. Das bedeutet, dass im Prompt ausreichend Kontext bereitgestellt werden muss, um zufriedenstellende Ergebnisse zu erzielen, insbesondere bei Zusammenfassungen. Weitere Informationen zum Verständnis von LLM-Größen.
CyberAgent betont, dass clientseitige Modelle noch nicht universell für alle Browser und Geräte verfügbar sind und die kleineren Modelle Einschränkungen haben. Sie können jedoch für bestimmte Aufgaben beeindruckende Leistungen erbringen. Die Möglichkeit, schnell zu iterieren und zu experimentieren, ohne dass serverseitige Kosten anfallen, macht sie zu einem wertvollen Tool.
Das Unternehmen empfiehlt, ein Gleichgewicht zu finden, da perfekte Antworten mit keiner KI möglich sind, weder serverseitig noch clientseitig. Schließlich sieht CyberAgent eine Zukunft, in der ein hybrider Ansatz, der die Stärken von serverseitiger und clientseitiger KI kombiniert, noch mehr Potenzial freisetzen wird.
Zukunftspläne
Die Arbeit von CyberAgent mit integrierter KI zeigt die spannenden Möglichkeiten nahtloser KI-Integrationen zur Verbesserung der Nutzererfahrung. Die Erweiterung, die für Ameba Blog entwickelt wurde, zeigt, wie diese Technologien praktisch eingesetzt werden können, um reale Probleme zu lösen. Das bietet wertvolle Erkenntnisse für die breitere Webentwickler-Community.
Da die Technologie ausgereifter wird und die Unterstützung für Browser und Geräte zunimmt, erwarten wir noch mehr innovative Anwendungen von integrierter KI und anderen Formen der clientseitigen KI.
Ressourcen
- Weitere Informationen zur Prompt API
- Integrierte APIs in Chrome verwenden
- Fallstudie von CyberAgent zu Web-KI, in der dieses Thema behandelt wird
- Video „The future of AI is now“ mit Fallstudien von CyberAgent's zu clientseitiger KI ansehen
Danksagungen
Vielen Dank an die Blogger von Ameba, ao, Nodoka, Erin, Chiaki, und socchi, die Feedback gegeben und zur Verbesserung der Erweiterung beigetragen haben. Vielen Dank an Thomas Steiner, Alexandra Klepper und Sebastian Benz für ihre Hilfe beim Schreiben und Überprüfen dieses Blogposts.