Pubblicato: 28 aprile 2025, ultimo aggiornamento: 21 maggio 2025
La rapida evoluzione dell'AI sta aprendo nuove frontiere per le applicazioni web, in particolare con l'avvento delle funzionalità sul dispositivo. Scopri come 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 | Visualizza | Intenzione di sperimentare |
L'API Prompt aiuta gli sviluppatori a utilizzare modelli linguistici di grandi dimensioni per aggiungere funzionalità di AI direttamente nelle loro app. Definendo prompt personalizzati, le app possono eseguire attività come l'estrazione di 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 cliente.
Assistenza AI per gli autori di Ameba Blog
CyberAgent ha riconosciuto un problema comune per gli autori: il processo spesso lungo di creazione di contenuti accattivanti, in particolare i titoli. Hanno ipotizzato che l'integrazione di funzioni basate sull'AI nell'interfaccia di creazione dei blog potrebbe migliorare significativamente la qualità e l'efficienza della creazione di contenuti. Il loro obiettivo era fornire strumenti che offrissero ispirazione e aiutassero i blogger a creare contenuti coinvolgenti.
CyberAgent ha sviluppato un'estensione 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 del testo.
CyberAgent voleva flessibilità delle funzionalità, il che ha portato direttamente all'API Prompt. Grazie alle infinite possibilità offerte da un'unica API, CyberAgent è riuscita a 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 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 nella 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ù formale", "Più informale" o "Genera titoli simili" e altro ancora.
CyberAgent ha progettato l'interfaccia utente in modo specifico per evitare che gli utenti debbano scrivere qualsiasi prompt. In questo modo, anche gli utenti che non hanno familiarità con l'ingegneria dei prompt possono sfruttare la potenza dell'AI.
L'estensione può anche generare titoli accattivanti per le singole sezioni del blog, che gli autori possono richiedere selezionando il testo pertinente per un titolo.
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 particolare tipo di output, mentre i prompt dell'utente chiedono al modello di interagire con ciò che scrive l'utente. Scopri di più sul loro codice in Implementare l'assistenza dell'AI.
Generare i 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 crea 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 su tono e scelta della lingua per rendere il testo "più carino" o "più semplice".
Esegui il deployment dell'assistenza dell'AI
CyberAgent ha suddiviso il codice dell'estensione in tre passaggi: creazione della sessione, trigger 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 assistenza 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 l'aggiornamento della sessione, il modello viene richiesto in base alla funzione. Ad esempio, ecco 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);
...
}
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 che 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 a essere viste dal 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 possono includere informazioni riservate o espressioni non intenzionali. 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'AI integrata riduce significativamente i costi del server e può eliminare completamente i costi associati all'inferenza dell'AI. Questa soluzione può essere rapidamente scalata 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 garantisce tempi di risposta rapidi e costanti, indipendentemente dalle condizioni di rete. In questo modo, gli utenti possono 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 creare 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 del modello. 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 i modelli 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 (ad esempio Markdown e JSON non valido). Anche con le istruzioni, è possibile che i risultati varino notevolmente. Quando implementi un'applicazione o un'estensione Chrome con AI integrata, potrebbe essere utile aggiungere una soluzione alternativa per assicurarsi 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. - Vincoli di dimensione del modello: poiché il modello viene scaricato e risiede 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, soprattutto per il riepilogo. Scopri di più su come comprendere le dimensioni dei LLM.
CyberAgent sottolinea che, sebbene i modelli lato client non siano ancora disponibili universalmente su tutti i browser e dispositivi e i modelli più piccoli abbiano dei limiti, possono comunque offrire prestazioni eccezionali per attività specifiche. La possibilità di iterare rapidamente 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, vedono un futuro in cui un approccio ibrido, che combini i punti di forza dell'AI lato server e lato client, aprirà un potenziale ancora maggiore.
Prospettive future
L'esplorazione dell'AI integrata da parte di CyberAgent mostra le entusiasmanti possibilità di integrazioni dell'AI senza interruzioni per migliorare le esperienze utente. La loro estensione creata per funzionare con Ameba Blog dimostra come queste tecnologie possano essere applicate praticamente per risolvere problemi reali, offrendo lezioni preziose per la più ampia community di sviluppo web.
Man mano che la tecnologia matura e il supporto per browser e dispositivi si espande, prevediamo di vedere applicazioni ancora più innovative dell'AI integrata e di altre forme di AI lato client.
Risorse
- Scopri di più sull'API Prompt
- Iniziare a utilizzare le API integrate in Chrome
- Case study di CyberAgent sull'IA web, che tratta lo stesso argomento.
- Guarda The future of AI is now, i casi di studio 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 l'aiuto nella stesura e nella revisione di questo post del blog.