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, 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 auxquels ils ont été confrontés et des insights intéressants pour les autres développeurs qui utilisent l'IA intégrée.
Qu'est-ce que l'API Prompt ?
| Vidéo explicative | Web | Extensions | État de Chrome | Intent |
|---|---|---|---|---|
| GitHub |  Dans EPP |
 Chrome 137 bêta |
Afficher | Intent to Experiment |
L'API Prompt aide les développeurs à utiliser de grands modèles de langage 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 des inférences 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 IA pour les auteurs de blogs Ameba
CyberAgent a identifié un problème courant pour les auteurs: le processus souvent long et fastidieux de création de contenus attrayants, en particulier de 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 considérablement améliorer la qualité et l'efficacité de la création de contenu. Son objectif était de fournir des outils qui inspirent et aident ses 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 titres, des paragraphes ultérieurs et des améliorations générales de la copie.
CyberAgent souhaitait une 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 d'Ameba.
CyberAgent a testé l'extension avec un nombre restreint de blogueurs, qui ont fourni des insights précieux 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. Compte tenu des résultats et des commentaires positifs, CyberAgent prévoit de lancer cette fonctionnalité à l'avenir, afin de mettre 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 titres
L'extension génère plusieurs suggestions de titres, en fonction du contenu complet du blog. Les rédacteurs de blogs peuvent affiner ces suggestions avec des options telles que "Générer à nouveau", "Plus poli", "Plus décontracté" ou "Générer des titres similaires", etc.
CyberAgent a conçu l'interface utilisateur spécifiquement pour que les utilisateurs n'aient pas à écrire d'invite. Ainsi, tous les utilisateurs qui ne connaissent pas l'ingénierie des requêtes peuvent également profiter de la puissance de l'IA.
L'extension peut également générer des titres attrayants pour des sections spécifiques du blog, que les auteurs peuvent demander en sélectionnant le texte approprié pour 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 nécessaires pour obtenir un type de sortie particulier, tandis que les requêtes de l'utilisateur demandent au modèle d'interagir avec ce qu'il écrit. Pour en savoir plus sur son code, consultez Déploiement de l'assistance basée sur l'IA.
Générer les paragraphes suivants
L'extension aide les blogueurs à surmonter le syndrome de la page blanche en générant des paragraphes ultérieurs en fonction du texte sélectionné. Avec le contexte du paragraphe précédent, l'IA rédige la 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 générer à nouveau les améliorations avec des notes supplémentaires sur le ton et le choix de la langue pour rendre le texte "plus concis" 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 invite de modèle.
Ils vérifient d'abord auprès du navigateur que l'IA intégrée est disponible et compatible. Si oui, elles 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é dispose d'une fonction d'assistance déclenchée par l'utilisateur. Une fois déclenché, 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 appellent le modèle en fonction de la fonction. Par exemple, voici le code permettant de générer un titre et de le générer à nouveau 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'il offre aux développeurs d'applications et aux utilisateurs.
Voici les principaux avantages que CyberAgent a mis en avant:
- 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. 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 à partir de serveurs. Cela est particulièrement utile lorsque vous rédigez, 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é des contenus.
É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 ni cachés ne sont facturés.
L'IA intégrée réduit considérablement les coûts des serveurs et peut supprimer complètement les coûts associés à l'inférence par IA. Cette solution peut être rapidement évolutive pour une grande base d'utilisateurs et permet aux utilisateurs 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 cohérents et rapides, indépendamment des conditions du réseau. Cela leur a permis de générer du contenu à plusieurs reprises, ce qui leur a permis de tester de nouvelles idées plus facilement 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é 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. Aucune configuration ni gestion de modèle supplémentaire n'est donc requise. Les API utilisent JavaScript, comme les autres API de navigateur, et ne nécessitent aucune expertise en machine learning.
Gérer les défis pour obtenir de meilleurs résultats
Le parcours de CyberAgent avec l'API Prompt a fourni des enseignements précieux sur les subtilités de l'utilisation des LLM côté client.
- Réponses incohérentes: comme les autres LLM, Gemini Nano ne garantit pas des sorties identiques pour la même requête. CyberAgent a rencontré des réponses dans des formats inattendus (par exemple, Markdown et JSON non valide). Même avec des instructions, les résultats peuvent varier considérablement. Lorsque vous implémentez une application ou une extension Chrome avec une IA intégrée, il peut être utile d'ajouter une solution de contournement pour vous assurer que la sortie est toujours au bon format.
- Limite de jetons: la gestion de l'utilisation des jetons est essentielle. CyberAgent utilisait des propriétés et des méthodes telles que
inputUsage,inputQuotaetmeasureInputUsage()pour gérer les sessions, conserver 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 stocké sur l'appareil de l'utilisateur, il est beaucoup plus petit qu'un modèle basé sur un serveur. Par conséquent, il est essentiel de fournir suffisamment de contexte dans l'invite pour obtenir des résultats satisfaisants, en particulier pour la synthèse. Découvrez comment comprendre les tailles de LLM.
CyberAgent souligne que, bien que les modèles côté client ne soient pas encore disponibles pour 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 rapides et de tester sans frais côté serveur en fait un outil précieux.
Il recommande de trouver un équilibre, en reconnaissant que les réponses parfaites sont difficiles à obtenir avec n'importe quelle IA, qu'elle soit côté serveur ou côté client. Enfin, ils entrevoient un avenir où une approche hybride, combinant les forces de l'IA côté serveur et côté client, permettra de libérer un potentiel encore plus important.
Perspectives
L'exploration de l'IA intégrée par CyberAgent met en avant les possibilités intéressantes d'intégrations fluides de l'IA pour améliorer les expériences 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 des enseignements précieux à la communauté de développement Web plus large.
À mesure que la technologie mûrit et que la compatibilité avec les navigateurs et les appareils s'étend, nous nous attendons à voir encore plus d'applications 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 aborde ce même sujet.
- Regardez L'avenir de l'IA est maintenant, des études de cas de CyberAgent sur l'IA côté client.
Remerciements
Merci aux blogueurs 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 révision de cet article de blog.