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 integrierte KI von Chrome 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 verwenden.
Was ist die Prompt API?
| Erläuterung | Web | Erweiterungen | Chrome-Status | Intent |
|---|---|---|---|---|
| GitHub |  Ursprungstest |
 Chrome 138 |
Ansicht | Absicht zum Testen |
| GitHub | Ursprungstest für Sampling-Parameter |
Chrome 148 |
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 Gemini Nano durch. Diese lokale Verarbeitung verbessert unabhängig vom verwendeten Modell den Datenschutz und die Reaktionsgeschwindigkeit. Unabhängig vom verwendeten Modell wird die Reaktionsgeschwindigkeit des Clients verbessert.
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 KI-gestützter Funktionen in die Benutzeroberfläche für die 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, die Ameba Blog-Autoren dabei helfen, Titel und Überschriften, nachfolgende Absätze und allgemeine Verbesserungen am Text zu generieren.
CyberAgent wollte flexible Funktionen, was direkt zur Prompt API führte. 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, was wertvolle Erkenntnisse über die Praktikabilität der angebotenen Funktionen lieferte. Das Feedback half CyberAgent, bessere Anwendungen für die KI-Unterstützung zu finden und das Design der Erweiterung zu verfeinern. 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 für die Blogger-Community bereitzustellen.
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, z. B. mit den Optionen „Neu generieren“, „Höflicher“, „Informeller“ oder „Ähnliche Titel generieren“.
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, von den Vorteilen der KI profitieren.
Die Erweiterung kann auch ansprechende Überschriften für einzelne Abschnitte des Blogs generieren. Autoren können dies 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. Die Nutzer-Prompts fordern das Modell auf, mit dem zu interagieren, 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 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 für Anwendungsentwickler als auch für Nutzer ü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
Die Möglichkeit, KI-Modelle direkt auf dem Gerät des Nutzers auszuführen, ohne Daten an externe Server zu übertragen, ist von entscheidender Bedeutung. Blogentwürfe sind nicht für die Öffentlichkeit bestimmt. Daher möchte CyberAgent diese Entwürfe nicht an einen Drittanbieterserver senden.
Bei der integrierten KI wird Gemini Nano auf die Geräte der Nutzer heruntergeladen, sodass keine Daten von Servern gesendet und empfangen werden müssen. Das ist besonders beim Schreiben nützlich, da Entwürfe vertrauliche Informationen oder unbeabsichtigte Formulierungen enthalten können. Bei der integrierten KI werden die ursprünglichen und generierten Inhalte lokal gespeichert, anstatt sie an einen Server zu senden. Das kann die Sicherheit erhöhen und den Datenschutz für Inhalte verbessern.
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.
Mit integrierter KI lassen sich die Serverkosten erheblich senken und die Kosten für die KI-Inferenz vollständig vermeiden. Diese Lösung kann schnell auf eine große Nutzerbasis skaliert werden und ermöglicht es Nutzern, aufeinanderfolgende Prompts zu senden, um die Ausgaben zu verfeinern, ohne dass zusätzliche Gebühren anfallen.
Reaktionsfähigkeit und Zuverlässigkeit
Integrierte KI bietet konsistente und schnelle Reaktionszeiten, unabhängig von den Netzwerkbedingungen. So konnten Nutzer immer wieder Inhalte generieren, was es ihnen viel einfacher macht, neue Ideen auszuprobieren und schnell ein zufriedenstellendes Endergebnis zu erzielen.
Einfache Entwicklung
Die integrierte KI von Chrome 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, sodass keine zusätzliche Einrichtung oder Modellverwaltung erforderlich ist. 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 erhielt Antworten in unerwarteten Formaten (z. B. Markdown und ungültiges JSON). Auch mit Anweisungen können die Ergebnisse stark variieren. Bei der Implementierung einer Anwendung oder Chrome-Erweiterung mit integrierter KI 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 der Zusammenfassung. 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 eine beeindruckende Leistung 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 immer 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.