Pubblicato il 28 aprile 2025, ultimo aggiornamento il 21 maggio 2025
La rapida evoluzione dell'AI sta aprendo nuove frontiere per le applicazioni web, in particolare con l'avvento delle funzionalità on-device. Scopri in che modo CyberAgent, una delle principali società 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 di lavorare con l'AI integrata, le sfide che hanno dovuto affrontare e informazioni preziose per altri sviluppatori che utilizzano l'AI integrata.
Che cos'è l'API Prompt?
| Spiegazione | Web | Estensioni | Stato di Chrome | Intenzione |
|---|---|---|---|---|
| GitHub |  Prova dell'origine |
 Chrome 138 |
Visualizza | Intenzione di sperimentare |
| GitHub | Prova dell'origine per i parametri di campionamento |
Chrome 148 |
Visualizza | Intenzione di sperimentare |
L'API Prompt aiuta gli sviluppatori a utilizzare un modello linguistico di grandi dimensioni per aggiungere funzionalità di AI direttamente nelle loro app. Definendo prompt personalizzati, le app possono eseguire attività come l'estrazione dei dati, la generazione di contenuti e le risposte personalizzate. In Chrome, l'API Prompt esegue l'inferenza lato client con Gemini Nano. Questa elaborazione locale, indipendentemente dal modello utilizzato, migliora la privacy dei dati e la velocità di risposta. Qualunque sia il modello utilizzato, la velocità di risposta del client.
Assistenza dell'AI per gli autori di Ameba Blog
CyberAgent ha riconosciuto un problema comune per gli autori: il processo spesso lungo di creazione di contenuti coinvolgenti, in particolare i titoli. Hanno ipotizzato che l'integrazione di funzioni basate sull'AI nell'interfaccia di creazione dei blog potesse migliorare significativamente la qualità e l'efficienza della creazione di contenuti. Il loro obiettivo era fornire strumenti che fornissero ispirazione e aiutassero i blogger a creare contenuti coinvolgenti.
CyberAgent ha sviluppato un'estensione di Chrome con l'API Prompt. Questa estensione fornisce una suite di funzionalità basate sull'AI progettate per aiutare gli autori di Ameba Blog a generare titoli e intestazioni, paragrafi successivi e miglioramenti generali della copia.
CyberAgent voleva la flessibilità delle funzionalità, il che ha portato direttamente all'API Prompt. Grazie alle infinite possibilità offerte da un'unica API, CyberAgent è stata in grado di determinare esattamente cosa avrebbe funzionato meglio e sarebbe stato più utile per gli autori di Ameba.
CyberAgent ha testato l'estensione con un numero selezionato di blogger, che hanno fornito informazioni preziose sull'utilità delle funzioni offerte. Il feedback ha aiutato CyberAgent a identificare applicazioni migliori per l'assistenza dell'AI e a perfezionare il design dell'estensione. In base ai risultati e ai feedback positivi, CyberAgent prevede di rilasciare questa funzionalità in futuro, portando la potenza dell'AI lato client direttamente alla sua community di blogger.
Diamo un'occhiata più da vicino a queste funzionalità.
Scrivere titoli e intestazioni migliori
L'estensione genera più suggerimenti per i titoli, in base all'intero contenuto del blog. Gli autori dei blog possono perfezionare ulteriormente questi suggerimenti con opzioni che includono: "Rigenera", "Più educato", "Più informale" o "Genera titoli simili" e altro ancora.
CyberAgent ha progettato l'interfaccia utente in modo specifico in modo che gli utenti non debbano scrivere alcun prompt. In questo modo, anche gli utenti che non hanno familiarità con l'ingegneria dei prompt possono usufruire della potenza dell'AI.
L'estensione può anche generare intestazioni coinvolgenti 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 contesto e istruzioni per ottenere un tipo specifico di output, mentre i prompt utente chiedono al modello di interagire con ciò che l'utente scrive. Scopri di più sul codice in Eseguire il deployment dell'assistenza dell'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'AI redige una continuazione 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 sulla scelta del tono e della lingua per rendere la copia "più carina" o "più semplice".
Eseguire il deployment dell'assistenza dell'AI
CyberAgent ha suddiviso il codice dell'estensione in tre passaggi: creazione della sessione, trigger e prompt del modello.
Innanzitutto, controllano con il browser che l'AI integrata sia disponibile e supportata. In caso affermativo, creano 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 helper attivata dall'utente. Una volta attivata, quando l'utente fa clic sul pulsante pertinente, la sessione viene aggiornata 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 aver aggiornato la sessione, il modello viene richiesto in base alla funzione. Ad esempio, ecco il codice per generare un titolo e rigenerare un titolo 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);
...
}
I vantaggi dell'AI integrata
L'AI integrata è un tipo di AI lato client, il che significa che l'inferenza avviene sul dispositivo dell'utente. CyberAgent ha scelto di utilizzare le API AI integrate con Gemini Nano per i vantaggi interessanti che offre sia agli sviluppatori di applicazioni sia agli utenti.
I principali vantaggi su cui si è concentrata CyberAgent includono:
- Sicurezza e privacy
- Costo
- Reattività e affidabilità
- Facilità di sviluppo
Sicurezza e privacy
La possibilità di eseguire modelli di AI direttamente sul dispositivo dell'utente senza trasmettere dati a server esterni è fondamentale. Le bozze dei blog non sono destinate al pubblico e, 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. Questa funzionalità è particolarmente utile durante la scrittura, in quanto le bozze potrebbero includere informazioni riservate o espressioni non intenzionali. L'AI integrata mantiene i contenuti originali e generati in locale anziché inviarli a un server, il che può migliorare la sicurezza e proteggere la privacy dei contenuti.
Risparmi sui costi
Un vantaggio importante dell'utilizzo dell'AI integrata è che il browser include Gemini Nano e le API sono senza costi. Non ci sono costi aggiuntivi o nascosti.
L'AI integrata riduce significativamente i costi del server e può eliminare completamente i costi associati all'inferenza dell'AI. Questa soluzione potrebbe essere rapidamente scalabile a una base di utenti di grandi dimensioni e consente agli utenti di inviare prompt consecutivi per perfezionare gli output senza incorrere in costi aggiuntivi.
Reattività e affidabilità
L'AI integrata fornisce tempi di risposta rapidi e coerenti, indipendentemente dalle condizioni di rete. Ciò ha consentito agli utenti di generare contenuti più e più volte, il che rende molto più facile 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 facilmente disponibile. Gli sviluppatori traggono vantaggio dalla facilità di creazione di funzionalità basate sull'AI per la loro applicazione.
Gemini Nano e le API AI integrate sono installate in Chrome, quindi non è necessaria alcuna configurazione aggiuntiva o gestione dei modelli. Le API utilizzano JavaScript, come altre API del browser, e non richiedono competenze nel machine learning.
Superare 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 riscontrato risposte in formati imprevisti (come Markdown e JSON non validi). Anche con le istruzioni, è possibile che i risultati varino notevolmente. Quando implementi un'applicazione o un'estensione di Chrome con l'AI integrata, potrebbe 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
contextUsage,contextWindowemeasureContextUsage()per gestire le sessioni, mantenere il contesto e ridurre il consumo di token. Questo è stato particolarmente importante per perfezionare i titoli. - Vincoli di dimensione del modello: poiché il modello viene scaricato e risiede sul dispositivo dell'utente, è notevolmente più piccolo di un modello basato su server. Ciò significa che è fondamentale fornire un contesto sufficiente all'interno del prompt per ottenere risultati soddisfacenti, soprattutto per la riepilogo. Scopri di più su come comprendere le dimensioni degli LLM.
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 straordinarie per attività specifiche. La possibilità di eseguire rapidamente iterazioni e sperimentare senza costi lato server lo rende uno strumento prezioso.
Consigliano di trovare un equilibrio, riconoscendo che è difficile ottenere risposte perfette con qualsiasi AI, sia lato server che lato client. Infine, prevedono un futuro in cui un approccio ibrido, che combini i punti di forza dell'AI lato server e lato client, sbloccherà un potenziale ancora maggiore.
Prospettive future
L'esplorazione dell'AI integrata da parte di CyberAgent mostra le entusiasmanti possibilità di integrazioni di AI senza interruzioni per migliorare le esperienze utente. La loro estensione creata per funzionare con Ameba Blog dimostra come queste tecnologie possano essere applicate in modo pratico per risolvere problemi reali, offrendo lezioni preziose per la community di sviluppo web più ampia.
Man mano che la tecnologia matura e il supporto per browser e dispositivi si espande, prevediamo di vedere applicazioni ancora più innovative di AI integrata e altre forme di AI lato client.
Risorse
- Scopri di più sull'API Prompt
- Inizia a utilizzare le API integrate su Chrome
- Il case study di CyberAgent su Web AI, che tratta lo stesso argomento.
- Guarda Il futuro dell'AI è ora, i case study di CyberAgent sull'AI 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 stesura e nella revisione di questo post del blog.