Publié le 28 avril 2025, dernière mise à jour le 21 mai 2025
L'évolution rapide de l'IA ouvre de nouvelles perspectives aux applications Web, en particulier avec l'avènement des fonctionnalités sur l'appareil. Découvrez comment CyberAgent, l'une des principales entreprises japonaises spécialisées dans Internet, 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 travailler avec 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 ?
| Explication | Web | Extensions | État de Chrome | Intent |
|---|---|---|---|---|
| GitHub | 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 requêtes personnalisées, 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é des réponses. Quelle que soit la vitesse de réponse du client.
Assistance IA pour les auteurs de blogs Ameba
CyberAgent a identifié un point faible courant pour les auteurs : le processus souvent chronophage de création de contenus attrayants, 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 blogs 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 des contenus attrayants.
CyberAgent a développé une extension Chrome avec l'API Prompt. Cette extension fournit une suite de fonctionnalités basées sur l'IA conçues pour aider les rédacteurs du blog Ameba à générer des titres et des en-têtes, des paragraphes suivants et des améliorations générales du texte.
CyberAgent souhaitait bénéficier de la flexibilité des fonctionnalités, ce qui l'a directement conduit à 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 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 la praticité des fonctions proposées. Les commentaires ont aidé CyberAgent à identifier de meilleures applications pour l'assistance de l'IA et à affiner la conception de l'extension. Grâce aux résultats et aux commentaires positifs, CyberAgent prévoit de lancer cette fonctionnalité à l'avenir, en offrant la puissance de l'IA côté client directement à 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 rédacteurs de blogs peuvent affiner davantage ces suggestions grâce à des options telles que "Régénérer", "Plus poli", "Plus décontracté" ou "Générer des titres similaires", et bien d'autres.
CyberAgent a conçu l'UI spécifiquement pour que les utilisateurs n'aient pas à écrire de requête. Ainsi, les utilisateurs qui ne connaissent pas l'ingénierie des requêtes peuvent également bénéficier de la puissance de l'IA.
L'extension peut également générer des titres accrocheurs pour les différentes sections du blog. Les auteurs peuvent en faire la demande en sélectionnant le texte correspondant à un titre.
Le code permettant de générer un titre avec l'API Prompt inclut une invite initiale et une invite utilisateur. La requête initiale fournit le contexte et les instructions pour obtenir un type de résultat particulier, tandis que les requêtes 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 IA.
Générer des paragraphes suivants
L'extension aide les blogueurs à surmonter le syndrome de la page blanche en générant des paragraphes supplémentaires en fonction du texte sélectionné. En s'appuyant sur le contexte du paragraphe précédent, l'IA rédige la suite du paragraphe, ce qui permet aux auteurs de maintenir leur élan 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 le texte "plus mignon" ou "plus simple".
Déployer l'assistance par l'IA
CyberAgent a divisé son code d'extension en trois étapes : création de session, déclencheur et requête 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 correspondant, 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 intéressants qu'il offre aux développeurs d'applications et aux utilisateurs.
Voici les principaux avantages sur lesquels CyberAgent s'est concentré :
- Sécurité et confidentialité
- Coût
- Réactivité et fiabilité
- Facilité de développement
Sécurité et confidentialité
Il est essentiel de pouvoir exécuter des modèles d'IA directement sur l'appareil de l'utilisateur sans transmettre de données à des serveurs externes. Les brouillons de blogs ne sont pas destinés à être vus par le public. C'est pourquoi CyberAgent ne souhaite pas les envoyer à 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. C'est particulièrement utile lorsque vous écrivez, car les brouillons peuvent inclure des informations confidentielles ou des expressions involontaires. L'IA intégrée conserve le contenu d'origine et généré en local au lieu de l'envoyer à un serveur, ce qui peut renforcer 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. Aucuns frais supplémentaires ou cachés ne sont facturés.
L'IA intégrée réduit considérablement les coûts de serveur et peut éliminer complètement les coûts associés à l'inférence de l'IA. Cette solution peut être rapidement étendue à une large base d'utilisateurs et leur permet d'envoyer des requêtes consécutives pour affiner les résultats sans frais supplémentaires.
Réactivité et fiabilité
L'IA intégrée offre des temps de réponse rapides et constants, indépendamment des conditions du réseau. Cela permet aux utilisateurs de générer du contenu encore et encore, 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 à Chrome simplifie le processus de développement en fournissant une API facilement disponible. Les développeurs apprécient la facilité avec laquelle ils peuvent créer des 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. Vous n'avez donc pas besoin de configurer ou de gérer des modèles supplémentaires. 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
Le parcours de CyberAgent avec l'API Prompt a permis de tirer de précieux enseignements 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 la même requête. 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 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 : il est essentiel de gérer l'utilisation des jetons. CyberAgent a utilisé des propriétés et des méthodes telles que
inputUsage,inputQuotaetmeasureInputUsage()pour gérer les sessions, maintenir le contexte et réduire la consommation de jetons. Cela était particulièrement important pour affiner les 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. Il est donc essentiel de fournir suffisamment de contexte dans la requête 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 disponibles de manière universelle sur tous les navigateurs et appareils, et que les modèles plus petits présentent des limites, ils peuvent tout de même offrir des performances impressionnantes pour des tâches spécifiques. La possibilité d'effectuer des itérations rapidement et d'expérimenter sans frais 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 atouts de l'IA côté serveur et côté client, permettra de libérer 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 fluides pour améliorer l'expérience utilisateur. Leur 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 de précieux enseignements à la communauté des développeurs Web au sens large.
À mesure que la technologie mûrit et que la compatibilité avec les navigateurs et les appareils s'étend, nous nous attendons à voir apparaître 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 sur Chrome
- Étude de cas de CyberAgent sur l'IA Web, qui aborde ce même sujet.
- Regardez L'avenir de l'IA est déjà là, 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 dans la rédaction et la relecture de cet article de blog.