Veröffentlicht: 28. April 2025, zuletzt aktualisiert: 21. Mai 2025
Die rasante Entwicklung von 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 Blogging auf seiner Plattform Ameba Blog zu optimieren.
Wir stellen ihre Ziele, die Vorteile der Zusammenarbeit mit integrierter KI, die Herausforderungen, denen sie sich stellen mussten, und wertvolle Erkenntnisse für andere Entwickler vor, die integrierte KI verwenden.
Was ist die Prompt API?
Erklärung | Web | Erweiterungen | Chrome-Status | Absicht |
---|---|---|---|---|
GitHub | Ansicht | Absicht, Tests durchzuführen |
Mit der Prompt API können Entwickler große Sprachmodelle verwenden, um KI-Funktionen direkt in ihre Apps einzubinden. Durch die Definition benutzerdefinierter Prompts können Apps Aufgaben wie Datenextraktion, Inhaltserstellung und personalisierte Antworten ausführen. In Chrome führt die Prompt API clientseitige Inferenzen mit Gemini Nano aus. Diese lokale Verarbeitung, unabhängig davon, welches Modell verwendet wird, verbessert den Datenschutz und die Reaktionsgeschwindigkeit. Unabhängig vom verwendeten Modell: Reaktionsgeschwindigkeit des Clients.
KI-Unterstützung für Ameba-Blog-Autoren
CyberAgent erkannte ein häufiges Problem für Autoren: den oft zeitaufwendigen Prozess der Erstellung ansprechender Inhalte, insbesondere von Titeln. Sie stellten die Hypothese auf, dass die Integration von KI-gestützten Funktionen in die Blog-Erstellungsoberfläche die Qualität und Effizienz der Inhaltserstellung erheblich verbessern könnte. Ziel war es, Tools bereitzustellen, die Blogger inspirieren und ihnen helfen, ansprechende Inhalte zu erstellen.
CyberAgent hat eine Chrome-Erweiterung mit der Prompt API entwickelt. Diese Erweiterung bietet eine Reihe von KI-basierten Funktionen, die Ameba Blog-Autoren dabei helfen, Titel und Überschriften, nachfolgende Absätze und allgemeine Textverbesserungen zu generieren.
CyberAgent benötigte flexible Funktionen, was direkt zur Prompt API führte. Mit den unendlichen Möglichkeiten einer einzigen API konnte CyberAgent genau feststellen, was für die Ameba-Autoren am besten funktionieren und am nützlichsten sein würde.
CyberAgent hat die Erweiterung mit einer ausgewählten Anzahl von Bloggern getestet, was wertvolle Erkenntnisse zur Praktikabilität der angebotenen Funktionen lieferte. Das Feedback half CyberAgent, bessere Anwendungsbereiche für 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 einzuführen und die Leistungsfähigkeit der clientseitigen KI direkt in die Blogging-Community zu bringen.
Sehen wir uns diese Funktionen genauer an.
Bessere Titel und Überschriften schreiben
Die Erweiterung generiert mehrere Titelvorschläge basierend auf dem gesamten Bloginhalt. Blogautoren können diese Vorschläge weiter verfeinern, indem sie Optionen wie „Neu generieren“, „Höflicher“, „Informeller“ oder „Ähnliche Titel generieren“ auswählen.
CyberAgent hat die Benutzeroberfläche so gestaltet, dass die Nutzer keinen Prompt eingeben müssen. So können auch Nutzer, die sich mit Prompt-Engineering nicht auskennen, von den Vorteilen von KI profitieren.
Die Erweiterung kann auch ansprechende Überschriften für einzelne Abschnitte des Blogs generieren. Dazu müssen Autoren den entsprechenden Text für eine Überschrift auswählen.
Der Code zum Generieren eines Titels mit der Prompt API enthält einen ersten Prompt und einen Nutzer-Prompt. Der erste Prompt liefert Kontext und Anweisungen, um eine bestimmte Art von Ausgabe zu erhalten. In den Nutzer-Prompts wird das Modell aufgefordert, auf die Eingaben des Nutzers zu reagieren. Weitere Informationen zum Code finden Sie unter KI‑Unterstützung bereitstellen.
Folgeabsätze generieren
Die Erweiterung hilft Bloggern, Schreibblockaden zu überwinden, indem sie auf Grundlage des ausgewählten Texts weitere Absätze generiert. Anhand des Kontexts 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. Die 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 Erweiterungscode in drei Schritte unterteilt: Sitzungserstellung, Trigger und Modell-Prompting.
Zuerst wird 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;
}
Für jede Funktion gibt es eine Hilfsfunktion, die vom Nutzer ausgelöst wird. Wenn der Nutzer nach dem Auslösen auf die entsprechende Schaltfläche klickt, wird die Sitzung entsprechend aktualisiert.
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 Regenerieren 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 von integrierter KI
Die integrierte KI ist eine Form der clientseitigen KI. Das bedeutet, dass die Inferenz auf dem Gerät des Nutzers erfolgt. CyberAgent hat sich für die Verwendung integrierter KI-APIs mit Gemini Nano entschieden, da dies sowohl für Anwendungsentwickler als auch für Nutzer überzeugende Vorteile bietet.
CyberAgent konzentrierte sich auf die folgenden wichtigen Vorteile:
- 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.
Durch die integrierte KI wird Gemini Nano auf Nutzergeräte heruntergeladen. Dadurch 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 sorgt dafür, dass Original- und generierte Inhalte lokal bleiben, anstatt an einen Server gesendet zu werden. Das kann die Sicherheit erhöhen und den Datenschutz verbessern.
Kosteneinsparungen
Ein großer Vorteil der integrierten KI ist, dass der Browser Gemini Nano enthält 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 KI-Inferenz vollständig eliminieren. Diese Lösung lässt sich schnell auf eine große Nutzerbasis skalieren und ermöglicht es Nutzern, aufeinanderfolgende Prompts einzureichen, um die Ausgaben zu optimieren, ohne dass zusätzliche Gebühren anfallen.
Reaktionsfähigkeit und Zuverlässigkeit
Die integrierte KI sorgt für gleichbleibende und schnelle Reaktionszeiten, unabhängig von den Netzwerkbedingungen. So konnten Nutzer immer wieder Inhalte generieren, was es ihnen viel einfacher machte, 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-basierte Funktionen für ihre Anwendung zu erstellen.
Gemini Nano und die integrierten KI-APIs sind in Chrome installiert. Sie müssen also nichts weiter einrichten oder Modelle verwalten. Die APIs verwenden JavaScript wie andere Browser-APIs und erfordern keine Kenntnisse im Bereich maschinelles Lernen.
Herausforderungen meistern, um bessere Ergebnisse zu erzielen
Die Erfahrungen von CyberAgent mit der Prompt API haben wertvolle Erkenntnisse über die Feinheiten der Arbeit mit clientseitigen LLMs geliefert.
- Inkonsistente Antworten: Wie bei anderen LLMs sind bei Gemini Nano für denselben Prompt keine identischen Ausgaben garantiert. CyberAgent hat Antworten in unerwarteten Formaten (z. B. Markdown und ungültiges JSON) erhalten. Auch wenn Sie Anweisungen geben, können die Ergebnisse stark variieren. Wenn Sie eine Anwendung oder Chrome-Erweiterung mit integrierter KI implementieren, kann es sinnvoll sein, einen Workaround hinzuzufügen, um sicherzustellen, dass die Ausgabe immer im richtigen Format erfolgt.
- Tokenlimit: Die Verwaltung der Tokennutzung ist entscheidend. CyberAgent hat Attribute und Methoden wie
inputUsage
,inputQuota
undmeasureInputUsage()
verwendet, um Sitzungen zu verwalten, den Kontext beizubehalten und den Tokenverbrauch zu senken. Das war besonders wichtig, als wir Titel optimiert haben. - Einschränkungen bei 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 es wichtig ist, im Prompt ausreichend Kontext bereitzustellen, um zufriedenstellende Ergebnisse zu erzielen, insbesondere bei der Zusammenfassung. Weitere Informationen zu 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 aber dennoch eine beeindruckende Leistung für bestimmte Aufgaben bieten. Die Möglichkeit, schnell zu iterieren und ohne serverseitige Kosten zu experimentieren, macht es zu einem wertvollen Tool.
Sie empfehlen, ein Gleichgewicht zu finden, da perfekte Antworten mit keiner KI, weder serverseitig noch clientseitig, schwer zu erreichen sind. Schließlich sehen sie eine Zukunft, in der ein hybrider Ansatz, der die Stärken von serverseitiger und clientseitiger KI kombiniert, noch größeres Potenzial freisetzen wird.
Zukunftspläne
Die Untersuchung von integrierter KI durch CyberAgent zeigt die spannenden Möglichkeiten nahtloser KI-Integrationen zur Verbesserung der Nutzerfreundlichkeit. Die Erweiterung, die sie für Ameba Blog entwickelt haben, zeigt, wie diese Technologien praktisch eingesetzt werden können, um reale Probleme zu lösen. Sie bietet wertvolle Erkenntnisse für die gesamte 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 von clientseitiger KI.
Ressourcen
- Weitere Informationen zur Prompt API
- Integrierte APIs in Chrome verwenden
- Fallstudie zu Web AI von CyberAgent, in der dieses Thema behandelt wird.
- Die Zukunft von KI ist jetzt – Fallstudien von CyberAgent zu clientseitiger KI
Danksagungen
Vielen Dank an die Blogger von Ameba, ao, Nodoka, Erin, Chiaki und socchi, die Feedback gegeben und uns geholfen haben, die Erweiterung zu verbessern. Vielen Dank an Thomas Steiner, Alexandra Klepper und Sebastian Benz für ihre Hilfe beim Schreiben und Überprüfen dieses Blogposts.