Pubblicato: 28 aprile 2025, ultimo aggiornamento: 21 maggio 2025
La rapida evoluzione dell'IA sta aprendo nuove frontiere per le applicazioni web, soprattutto con l'avvento delle funzionalità on-device. Scopri come CyberAgent, una delle principali società di internet giapponesi, utilizza l'AI integrata di Chrome e l'API Prompt per migliorare l'esperienza di blogging sulla sua piattaforma, Ameba Blog.
Condividiamo i loro obiettivi, i vantaggi del lavoro con l'IA integrata, le sfide che hanno dovuto affrontare e informazioni preziose per altri sviluppatori che utilizzano l'IA integrata.
Che cos'è l'API Prompt?
| Spiegazione | Web | Estensioni | Stato di Chrome | Intenzione |
|---|---|---|---|---|
| GitHub |  In EPP |
 Chrome 137 beta |
Visualizza | Intento di partecipare all'esperimento |
L'API Prompt aiuta gli sviluppatori a utilizzare un gran numero di modelli linguistici per aggiungere funzionalità di IA direttamente nelle loro app. Definendo prompt personalizzati, le app possono eseguire attività come l'estrazione di dati, la generazione di contenuti e risposte personalizzate. In Chrome, l'API Prompt esegue l'inferenza lato client con Gemini Nano. Questo trattamento locale, indipendentemente dal modello utilizzato, migliora la privacy dei dati e la velocità di risposta. Qualsiasi sia il modello utilizzato, la velocità di risposta del cliente.
Assistenza AI per gli autori di Ameba Blog
CyberAgent ha individuato un problema comune per gli autori: la procedura spesso lunga e complessa per creare contenuti coinvolgenti, in particolare i titoli. Hanno ipotizzato che l'integrazione di funzioni basate sull'IA nell'interfaccia di creazione dei blog potrebbe migliorare notevolmente la qualità e l'efficienza della creazione di contenuti. Il loro obiettivo era fornire strumenti che ispirassero e aiutassero i loro blogger a creare contenuti coinvolgenti.
CyberAgent ha sviluppato un'estensione di Chrome con l'API Prompt. Questa estensione offre una suite di funzionalità basate sull'IA progettate per aiutare gli autori di Ameba Blog a generare titoli e intestazioni, paragrafi successivi e miglioramenti generali del testo.
CyberAgent voleva flessibilità delle funzionalità, il che lo ha portato direttamente all'API Prompt. Grazie a infinite possibilità in un'unica API, CyberAgent è stato in grado di determinare esattamente cosa funziona meglio ed è più utile per gli autori di Ameba.
CyberAgent ha testato l'estensione con un numero selezionato di blogger, che hanno fornito informazioni preziose sulla praticità delle funzioni offerte. I feedback hanno aiutato CyberAgent a identificare applicazioni migliori per l'assistenza AI e a perfezionare il design dell'estensione. In base ai risultati e ai feedback positivi, in futuro CyberAgent intende rilasciare questa funzionalità, offrendo la potenza dell'AI lato client direttamente alla propria community di blogger.
Diamo un'occhiata più da vicino a queste funzionalità.
Scrivere titoli e intestazioni migliori
L'estensione genera più suggerimenti per il titolo, in base al contenuto completo del blog. I blogger possono perfezionare ulteriormente questi suggerimenti, con opzioni tra cui "Rigenera", "Più educato", "Più informale" o "Genera titoli simili" e altro ancora.
CyberAgent ha progettato l'interfaccia utente in modo specifico per fare in modo che gli utenti non debbano scrivere alcun prompt. In questo modo, anche gli utenti che non hanno dimestichezza con la progettazione di prompt possono usufruire della potenza dell'IA.
L'estensione può anche generare intestazioni accattivanti per le singole sezioni del blog, che gli autori possono richiedere selezionando il testo pertinente per un'intestazione.
Il codice per generare un titolo con l'API Prompt include un prompt iniziale e un prompt utente. Il prompt iniziale fornisce il contesto e le istruzioni per ottenere un determinato tipo di output, mentre i prompt dell'utente richiedono al modello di interagire con ciò che scrive l'utente. Scopri di più sul loro codice in Eseguire il deployment dell'assistenza AI.
Generare paragrafi successivi
L'estensione aiuta i blogger a superare il blocco dello scrittore generando paragrafi successivi in base al testo selezionato. Con il contesto del paragrafo precedente, l'IA redige una bozza di prosecuzione del paragrafo, consentendo agli autori di mantenere il flusso creativo.
Migliorare e modificare il testo
Gemini Nano analizza il testo selezionato e può suggerire miglioramenti. Gli utenti possono rigenerare i miglioramenti con note aggiuntive sul tono e sulla scelta della lingua per rendere la copia "più accattivante" o "più semplice".
Esegui il deployment dell'assistenza dell'IA
CyberAgent ha suddiviso il codice dell'estensione in tre passaggi: creazione della sessione, attivatore e richiesta del modello.
Innanzitutto, controllano con il browser che l'AI integrata sia disponibile e supportata. In caso affermativo, viene creata una sessione con i parametri predefiniti.
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;
}
Ogni funzionalità ha una funzione di supporto attivata dall'utente. Una volta attivata, quando l'utente fa clic sul pulsante pertinente, aggiorna la sessione di conseguenza.
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,
});
}
Dopo l'aggiornamento della sessione, viene richiesto il modello in base alla funzione. Ad esempio, di seguito è riportato il codice per generare un titolo e rigenerarlo con un tono più formale.
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);
...
}
Vantaggi dell'IA integrata
L'IA integrata è un tipo di IA lato client, il che significa che la deduzione avviene sul dispositivo dell'utente. CyberAgent ha scelto di utilizzare le API di IA integrate con Gemini Nano per i vantaggi convincenti che offre sia agli sviluppatori di applicazioni sia agli utenti.
I vantaggi principali su cui si è concentrato CyberAgent includono:
- Sicurezza e privacy
- Costo
- Reattività e affidabilità
- Facilità di sviluppo
Sicurezza e privacy
La possibilità di eseguire i modelli di IA direttamente sul dispositivo dell'utente senza trasmettere dati a server esterni è fondamentale. Le bozze dei blog non sono destinate al pubblico, pertanto CyberAgent non vuole inviarle a un server di terze parti.
L'AI integrata scarica Gemini Nano sui dispositivi degli utenti, eliminando la necessità di inviare e ricevere dati dai server. Questo è particolarmente utile quando scrivi, poiché le bozze possono includere informazioni riservate o espressioni indesiderate. L'AI integrata mantiene i contenuti originali e generati a livello locale anziché inviarli a un server, il che può migliorare la sicurezza e proteggere la privacy dei contenuti.
Risparmi sui costi
Uno dei principali vantaggi dell'utilizzo dell'AI integrata è che il browser include Gemini Nano e le API sono senza costi. Non sono previsti costi aggiuntivi o nascosti.
L'IA integrata riduce notevolmente i costi dei server e può eliminare completamente i costi associati all'inferenza IA. Questa soluzione può essere scalata rapidamente per una base di utenti di grandi dimensioni e consente agli utenti di inviare prompt consecutivi per perfezionare i risultati senza costi aggiuntivi.
Reattività e affidabilità
L'AI integrata offre tempi di risposta rapidi e coerenti, indipendentemente dalle condizioni della rete. In questo modo, gli utenti hanno potuto generare contenuti più volte, il che ha reso molto più facile per loro provare nuove idee e creare rapidamente un risultato finale soddisfacente.
Facilità di sviluppo
L'AI integrata di Chrome semplifica il processo di sviluppo fornendo un'API subito disponibile. Gli sviluppatori beneficiano della semplicità con cui creare funzionalità basate sull'IA per la loro applicazione.
Gemini Nano e le API di IA integrate sono installati in Chrome, quindi non è necessaria alcuna configurazione o gestione aggiuntiva dei modelli. Le API utilizzano JavaScript, come altre API del browser, e non richiedono alcuna competenza in materia di machine learning.
Gestire le sfide per ottenere risultati migliori
Il percorso di CyberAgent con l'API Prompt ha fornito lezioni preziose sulle sfumature del lavoro con gli LLM lato client.
- Risposte incoerenti: come altri LLM, Gemini Nano non garantisce output identici per lo stesso prompt. CyberAgent ha rilevato risposte in formati imprevisti (ad esempio Markdown e JSON non valido). Anche con le istruzioni, è possibile che i risultati variino notevolmente. Quando implementi un'applicazione o un'estensione di Chrome con IA integrata, può essere utile aggiungere una soluzione alternativa per assicurarti che l'output sia sempre nel formato corretto.
- Limite di token: la gestione dell'utilizzo dei token è fondamentale. CyberAgent ha utilizzato proprietà e metodi come
inputUsage,inputQuotaemeasureInputUsage()per gestire le sessioni, mantenere il contesto e ridurre il consumo di token. Questo è stato particolarmente importante per perfezionare i titoli. - Limiti di dimensioni del modello: poiché il modello viene scaricato e si trova sul dispositivo dell'utente, è molto più piccolo di un modello basato su server. Ciò significa che è fondamentale fornire un contesto sufficiente all'interno del prompt per ottenere risultati soddisfacenti, in particolare per il riepilogo. Scopri di più su come comprendere le dimensioni degli annunci adattabili della rete di ricerca.
CyberAgent sottolinea che, sebbene i modelli lato client non siano ancora disponibili universalmente su tutti i browser e i dispositivi e i modelli più piccoli abbiano limitazioni, possono comunque offrire prestazioni impressionanti per attività specifiche. La possibilità di eseguire l'iterazione rapidamente e di fare esperimenti senza costi lato server lo rende uno strumento prezioso.
Consigliano di trovare un equilibrio, riconoscendo che è difficile ottenere risposte perfette con qualsiasi IA, sia lato server che lato client. Infine, prevedono un futuro in cui un approccio ibrido, che combina i punti di forza dell'IA lato server e lato client, sbloccherà un potenziale ancora maggiore.
Prospettive future
L'esplorazione dell'IA integrata da parte di CyberAgent mette in evidenza le interessanti possibili di integrazioni dell'IA senza interruzioni per migliorare le esperienze utente. La loro estensione creata per funzionare con Ameba Blog dimostra come queste tecnologie possono essere applicate in modo pratico per risolvere problemi reali, offrendo lezioni preziose per la community di sviluppo web più ampia.
Con la maturazione della tecnologia e l'ampliamento del supporto per browser e dispositivi, prevediamo di vedere applicazioni ancora più innovative dell'IA integrata e di altre forme di IA lato client.
Risorse
- Scopri di più sull'API Prompt
- Iniziare a utilizzare le API integrate su Chrome
- Il case study di CyberAgent sull'AI web, che tratta lo stesso argomento.
- Guarda Il futuro dell'IA è ora, i case study di CyberAgent sull'IA lato client
Ringraziamenti
Grazie ai blogger di Ameba, ao, Nodoka, Erin, Chiaki e socchi, che hanno fornito feedback e contribuito a migliorare l'estensione. Grazie a Thomas Steiner, Alexandra Klepper e Sebastian Benz per il loro aiuto nella scrittura e nella revisione di questo post del blog.