Publié le 28 avril 2025, dernière mise à jour le 21 mai 2025
L'évolution rapide de l'IA ouvre de nouvelles perspectives pour les applications Web, en particulier avec l'avènement des fonctionnalités sur l'appareil. Découvrez comment CyberAgent, une entreprise Internet japonaise de premier plan, utilise l'IA intégrée de Chrome et l'API Prompt pour améliorer l'expérience de blogging sur sa plate-forme, Ameba Blog.
Nous partageons leurs objectifs, les avantages de l'utilisation de l'IA intégrée, les défis qu'ils ont rencontrés et des informations précieuses pour les autres développeurs qui utilisent l'IA intégrée.
Qu'est-ce que l'API Prompt ?
| Présentateur | Web | Extensions | État de Chrome | Intention |
|---|---|---|---|---|
| GitHub |  Test d'origine |
 Chrome 138 |
Afficher | Intention de tester |
| GitHub | Test d'origine pour les paramètres d'échantillonnage |
Chrome 148 |
Afficher | Intention de tester |
L'API Prompt aide les développeurs à utiliser des modèles de langage volumineux pour ajouter des fonctionnalités d'IA directement dans leurs applications. En définissant des prompts personnalisés, les applications peuvent effectuer des tâches telles que l'extraction de données, la génération de contenu et les réponses personnalisées. Dans Chrome, l'API Prompt effectue une inférence côté client avec Gemini Nano. Ce traitement local, quel que soit le modèle utilisé, améliore la confidentialité des données et la rapidité de réponse. Quel que soit le modèle utilisé, la vitesse de réponse du client.
Assistance par l'IA pour les auteurs d'Ameba Blog
CyberAgent a identifié un problème courant pour les auteurs : le processus souvent long de création de contenu attrayant, en particulier les titres. Ils ont émis l'hypothèse que l'intégration de fonctions optimisées par l'IA dans l'interface de création de blog pourrait améliorer considérablement la qualité et l'efficacité de la création de contenu. Leur objectif était de fournir des outils qui inspirent et aident leurs blogueurs à créer du contenu attrayant.
CyberAgent a développé une extension Chrome avec l'API Prompt. Cette extension fournit une suite de fonctionnalités optimisées par l'IA conçues pour aider les auteurs d'Ameba Blog à générer des titres et des en-têtes, des paragraphes suivants et des améliorations générales de la copie.
CyberAgent souhaitait une flexibilité des fonctionnalités, ce qui l'a conduit directement à l'API Prompt. Avec des possibilités infinies dans une seule API, CyberAgent a pu déterminer exactement ce qui fonctionnerait le mieux et serait le plus utile pour les auteurs d'Ameba.
CyberAgent a testé l'extension auprès d'un certain nombre de blogueurs, ce qui a permis d'obtenir des informations précieuses sur l'aspect pratique des fonctions proposées. Les commentaires ont aidé CyberAgent à identifier de meilleures applications pour l'assistance par l'IA et à affiner la conception de l'extension. Sur la base des résultats et des commentaires positifs, CyberAgent prévoit de lancer cette fonctionnalité à l'avenir, en mettant la puissance de l'IA côté client directement à la disposition de sa communauté de blogueurs.
Examinons de plus près ces fonctionnalités.
Rédiger de meilleurs titres et en-têtes
L'extension génère plusieurs suggestions de titres, en fonction du contenu complet du blog. Les auteurs de blog peuvent affiner ces suggestions, avec des options telles que "Régénérer", "Plus poli", "Plus décontracté" ou "Générer des titres similaires", et plus encore.
CyberAgent a conçu l'interface utilisateur spécifiquement pour que les utilisateurs n'aient pas à écrire de prompt. De cette façon, tous les utilisateurs qui ne connaissent pas l'ingénierie des prompts peuvent également bénéficier de la puissance de l'IA.
L'extension peut également générer des en-têtes attrayants pour des sections individuelles du blog, que les auteurs peuvent demander en sélectionnant le texte approprié pour un en-tête.
Le code permettant de générer un titre avec l'API Prompt inclut un prompt initial et un prompt utilisateur. Le prompt initial fournit le contexte et les instructions pour obtenir un type de résultat particulier, tandis que les prompts utilisateur demandent au modèle d'interagir avec ce que l'utilisateur écrit. Pour en savoir plus sur leur code, consultez Déployer l'assistance par l'IA.
Générer les paragraphes suivants
L'extension aide les blogueurs à surmonter le syndrome de la page blanche en générant les paragraphes suivants en fonction du texte sélectionné. Avec le contexte du paragraphe précédent, l'IA rédige une suite du paragraphe, ce qui permet aux auteurs de maintenir leur flux créatif.
Améliorer et modifier le texte
Gemini Nano analyse le texte sélectionné et peut suggérer des améliorations. Les utilisateurs peuvent régénérer les améliorations avec des notes supplémentaires sur le ton et le choix de la langue pour rendre la copie "plus mignonne" ou "plus simple".
Déployer l'assistance par l'IA
CyberAgent a divisé le code de son extension en trois étapes : création de session, déclencheur et prompt de modèle.
Tout d'abord, ils vérifient auprès du navigateur que l'IA intégrée est disponible et compatible. Si c'est le cas, ils créent une session avec les paramètres par défaut.
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;
}
Chaque fonctionnalité est associée à une fonction d'assistance déclenchée par l'utilisateur. Une fois déclenchée, lorsque l'utilisateur clique sur le bouton approprié, il met à jour la session en conséquence.
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,
});
}
Une fois la session mise à jour, ils invitent le modèle en fonction de la fonction. Par exemple, voici le code permettant de générer un titre et de le régénérer avec un ton plus formel.
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);
...
}
Avantages de l'IA intégrée
L'IA intégrée est un type d'IA côté client, ce qui signifie que l'inférence se produit sur l'appareil de l'utilisateur. CyberAgent a choisi d'utiliser des API d'IA intégrées avec Gemini Nano en raison des avantages convaincants qu'elle offre aux développeurs d'applications et aux utilisateurs.
Les principaux avantages sur lesquels CyberAgent s'est concentré sont les suivants :
- Sécurité et confidentialité
- Coût
- Réactivité et fiabilité
- Facilité de développement
Sécurité et confidentialité
La possibilité d'exécuter des modèles d'IA directement sur l'appareil de l'utilisateur sans transmettre de données à des serveurs externes est primordiale. Les brouillons de blog ne sont pas destinés à être vus par le public. Par conséquent, CyberAgent ne souhaite pas envoyer ces brouillons à un serveur tiers.
L'IA intégrée télécharge Gemini Nano sur les appareils des utilisateurs, ce qui élimine le besoin d'envoyer et de recevoir des données depuis des serveurs. Cela est particulièrement utile lors de la rédaction, car les brouillons peuvent inclure des informations confidentielles ou des expressions involontaires. L'IA intégrée conserve le contenu d'origine et le contenu généré en local au lieu de l'envoyer à un serveur, ce qui peut améliorer la sécurité et protéger la confidentialité du contenu.
Économies
L'un des principaux avantages de l'utilisation de l'IA intégrée est que le navigateur inclut Gemini Nano et que les API sont sans frais. Aucun coût supplémentaire ou caché n'est facturé.
L'IA intégrée réduit considérablement les coûts de serveur et peut supprimer complètement les coûts associés à l'inférence de l'IA. Cette solution peut être rapidement mise à l'échelle pour une large base d'utilisateurs et permet aux utilisateurs d'envoyer des prompts consécutifs pour affiner les résultats sans entraîner de frais supplémentaires.
Réactivité et fiabilité
L'IA intégrée fournit des temps de réponse rapides et cohérents, indépendamment des conditions réseau. Cela a permis aux utilisateurs de générer du contenu à plusieurs reprises, ce qui leur permet d'essayer de nouvelles idées et de créer rapidement un résultat final satisfaisant.
Facilité de développement
L'IA intégrée de Chrome simplifie le processus de développement en fournissant une API facilement disponible. Les développeurs bénéficient de la facilité de création de fonctionnalités optimisées par l'IA pour leur application.
Gemini Nano et les API d'IA intégrées sont installés dans Chrome. Aucune configuration ni gestion de modèle supplémentaire n'est donc nécessaire. Les API utilisent JavaScript, comme les autres API de navigateur, et ne nécessitent aucune expertise en machine learning.
Relever les défis pour obtenir de meilleurs résultats
L'expérience de CyberAgent avec l'API Prompt a permis de tirer des leçons précieuses sur les nuances de l'utilisation des LLM côté client.
- Réponses incohérentes : comme les autres LLM, Gemini Nano ne garantit pas des résultats identiques pour le même prompt. CyberAgent a rencontré des réponses dans des formats inattendus (tels que Markdown et JSON non valide). Même avec des instructions, il est possible que les résultats varient considérablement. Lorsque vous implémentez une application ou une extension Chrome avec l'IA intégrée, il peut être utile d'ajouter une solution de contournement pour vous assurer que le résultat est toujours au bon format.
- Limite de jetons : la gestion de l'utilisation des jetons est essentielle. CyberAgent a utilisé des propriétés et des méthodes telles que
contextUsage,contextWindowetmeasureContextUsage()pour gérer les sessions, maintenir le contexte et réduire la consommation de jetons. Cela était particulièrement important lors de l'affinage des titres. - Contraintes de taille du modèle : comme le modèle est téléchargé et réside sur l'appareil de l'utilisateur, il est beaucoup plus petit qu'un modèle basé sur un serveur. Cela signifie qu'il est essentiel de fournir un contexte suffisant dans le prompt pour obtenir des résultats satisfaisants, en particulier pour la synthèse. En savoir plus sur la compréhension des tailles de LLM.
CyberAgent souligne que, bien que les modèles côté client ne soient pas encore universellement disponibles sur tous les navigateurs et appareils, et que les modèles plus petits présentent des limites, ils peuvent toujours offrir des performances impressionnantes pour des tâches spécifiques. La possibilité d'itérer rapidement et d'expérimenter sans coûts côté serveur en fait un outil précieux.
Ils conseillent de trouver un équilibre, en reconnaissant qu'il est difficile d'obtenir des réponses parfaites avec n'importe quelle IA, qu'elle soit côté serveur ou côté client. Enfin, ils envisagent un avenir où une approche hybride, combinant les avantages de l'IA côté serveur et côté client, offrira un potentiel encore plus grand.
Perspectives
L'exploration de l'IA intégrée par CyberAgent illustre les possibilités intéressantes d'intégrations d'IA transparentes pour améliorer l'expérience utilisateur. L'extension conçue pour fonctionner avec Ameba Blog montre comment ces technologies peuvent être appliquées de manière pratique pour résoudre des problèmes concrets, offrant ainsi des leçons précieuses à la communauté plus large des développeurs Web.
À mesure que la technologie mûrit et que la compatibilité avec les navigateurs et les appareils s'étend, nous nous attendons à voir des applications encore plus innovantes de l'IA intégrée et d'autres formes d'IA côté client.
Ressources
- En savoir plus sur l'API Prompt
- Commencer à utiliser les API intégrées dans Chrome
- Étude de cas de CyberAgent sur l'IA Web, qui couvre le même sujet.
- Regarder L'avenir de l'IA est maintenant, les études de cas de CyberAgent sur l'IA côté client
Remerciements
Merci aux blogueurs d'Ameba, ao, Nodoka, Erin, Chiaki, et socchi, qui ont fourni des commentaires et contribué à améliorer l'extension. Merci à Thomas Steiner, Alexandra Klepper et Sebastian Benz pour leur aide à la rédaction et à la relecture de cet article de blog.