Costruisci un chatbot AI-Powered

Sep 11, 2025
Come si fa
An illustration showing an android with an electronic brain in front of a globe marked with symbols indicated technological advancement, such as binary code, molecules and communications relays.

L'intelligenza artificiale (AI) ci consente di creare nuovi modi di esaminare i problemi esistenti, dalla ripensamento delle strategie ambientali di ripensamento a come impariamo. I tuoi progetti - se app, siti Web o giochi - possono sfruttare AI per renderli più coinvolti, più facili da usare e avere risultati più preziosi. Uno di questi metodi prevede la creazione di un chatbot in lingua naturale per aiutare gli utenti interagire con il tuo sito.

Per creare il tuo primo chatbot, utilizzeremo il nuovo set di strumenti di dialogo di Google. Imbraca potente apprendimento automatico e discorso a testo. Può essere incorporato direttamente nel tuo sito web come widget o personalizzato per le tue esigenze.

Se sei in procinto di pianificare un nuovo sito, avrai bisogno di consigli su tutto, dall'ideale Builder del sito web a cui web hosting Servizio da scegliere, quindi dai un'occhiata alle nostre guide. Creare un nuovo sistema di progettazione? Salvalo in modo sicuro in deposito cloud. Quindi è accessibile a tutta la tua squadra. Ora su come creare un chatbot ...

01. Creare un account

Vai a dialogflow.com. e crea il tuo account. Accedi e accetta le autorizzazioni per abilitare il dialogo di avere accesso al tuo account.

02. Creare un agente

Dialogflow utilizza il termine "agente" per rappresentare le istanze del tuo AI. Pensa all'agente come l'intelligenza virtuale che stai creando. Potresti avere molti agenti che lavorano per te, ognuno con la propria personalità e uno scopo.

Fare clic sul pulsante "Crea agente" e inserisci un nome per il tuo agente: 'HAL 9000'.

03. Crea un intento

Innanzitutto, è necessario creare un intento. Stiamo definendo l'intenzione degli input dell'utente. Fai clic su "Crea intenzione" e chiamalo "Apri Doors". Premi 'Salva'.

04. Allena il Ai per questo intento

An image showing the Google Dialogflow interface – in the box that's marked 'USER SAYS', it reads 'open the door hal' and in the box marked 'DEFAULT RESPONSE', it reads 'Sorry Dave. I can't do that now'.

Allena l'AI per un intento fornendo frasi che un utente potrebbe usare

Allena l'AI per questo intento fornendo frasi che un utente potrebbe utilizzare. L'AI NLP utilizzerà queste e variazioni derivate per addestrare l'agente. Aggiungi le seguenti frasi di formazione nella finestra "Frasi di allenamento" e aggiungi più di te come ti piace:

  • 'Apri le porte della baia del pod, Hal. "
  • 'Aprire le porte.'
  • "Lasciami entrare, Hal!"

05. Aggiungi risposte

Successivamente, è necessario aggiungere alcune risposte con cui l'agente risponderà. Ti inseriti nella finestra delle "risposte". Prova un po 'come questo:

  • "Ho paura di non poterlo fare, Dave."
  • 'Non posso farlo in questo momento.'

Quindi premere 'Aggiungi risposte' e 'Salva' in alto in alto. Vedrai notifiche che l'agente viene addestrato e poi è pronto.

06. Testare il chatbot

Sul lato destro dello schermo è uno strumento di test. Il chatbot utilizzerà il servizio vocale per il testo di Google per tradurre la tua voce in testo se lo provi. Dovresti vedere i risultati della tua richiesta e la risposta dell'agente AI selezionato. Molto bello!

07. Crea e usa un'entità

Le entità sono concetti che possono essere definiti e riutilizzati nelle risposte dell'agente come variabili. Alleniamo l'AI per capire quando un utente esprime un'emozione, quindi usa quella risposta all'utente.

Nel menu a sinistra, fare clic su "Entità". Digita 'emozione' per il nome della tua nuova entità. Conservare "Definisci sinonimi" controllato. Clicca nella tabella sottostante e digita 'arrabbiato' come la prima emozione. Quindi fai clic su a destra di questo e aggiungi sinonimi come "pazzo", "sconvolto", e così via. Quindi aggiungere un'altra voce per "spaventato" e utilizzare i sinonimi "paura", "terrorizzata", ecc., Che ti piace. Premi "Salva" quando finito.

Questo ora ha addestrato l'agente per capire che "arrabbiato" e "spaventato" sono emozioni che un utente può comunicare. Tutti quei sinonimi sono varianti che potrebbero verificarsi. Anche l'AI genererà alcuni.

08. Crea un nuovo intento

Ora creeremo un nuovo intento di usare l'entità 'emozione' che abbiamo creato. Chiamare questa intenzione 'emozioni' e fai clic su "Salva".

Avanti Aggiungi nuove frasi di formazione come "Mi stai spaventando", "Mi stai facendo impazzire ', e' molto arrabbiato, 'usando le variazioni di parole chiave arrabbiate e spaventate. Questo addestrare l'agente per comprendere i vari modi in cui un utente può frase in frase questa dichiarazione emotiva.

Noterai il sistema evidenzia le parole spaventate e arrabbiate per te. Sta già segnalando questi come entità. Ha anche aggiunto una voce nella finestra 'Azioni e parametri'. Ciò consente di utilizzare anche queste entità nelle tue risposte.

09. Aggiungi una risposta utilizzando la nuova entità 'emozione'

Nella finestra delle risposte, aggiungi nuove risposte che utilizzano questa nuova entità. Nota il '$' per indicare l'entità '$ emozione'. Prova ad aggiungere queste risposte:

  • "Mi dispiace che tu stia sentendo $ emozione, Dave."
  • 'Sentirsi $ emozione è una risposta umana, Dave ".

Fai clic su "Aggiungi risposta" e premere il pulsante "Salva" nella parte superiore dello schermo per salvare l'intero intento.

10. Prova di nuovo il tuo chatbot

Prova a dire o digitare le seguenti frasi nello strumento di test.

  • "Mi stai facendo arrabbiare molto. '
  • "Mi stai spaventando."

Nota come ha risposto usando 'spaventato' con il secondo? Ha usato il sinonimo del sinonimo, "impazzito" per sapere che intendevamo spaventati. Molto bello

Sentiti libero di giocare con questo così come aggiungere altri intenti e risposte che ti piacciono e poi aggiungeremo questo a una pagina web.

11. Attivare l'integrazione Web

An image showing Google Dialogflow's pop-up featuring a direct link and embeddable HTML snippet for a created chatbot.

Facendo clic su Web Demo visualizzerà uno snippet di codice che è possibile utilizzare per rilasciare il widget nel proprio sito web

Per aggiungerlo alla pagina Web, fai clic su "Integrations" sul menu a sinistra. Quindi fare clic sulla casella "Web Demo" per attivare questa opzione.

Apparirà un pop-up che mostra un collegamento diretto in modo da poter utilizzare per testare la tua integrazione subito. Mostra anche uno snippet di codice che è possibile utilizzare per rilasciare il widget nel proprio sito Web. Copia che snippet negli appunti in modo da poterlo incollare nel tuo sito.

12. Creare una pagina Web di base e aggiungi lo snippet

Creare una pagina HMTL di base e includi questo snippet di codice prossimo. Prova il seguente codice e caricarlo sul tuo server o eseguilo sul tuo server locale. Sostituisci lo snippet qui sotto con quello che hai copiato dal tuo Agente di dialogo: 

 & lt ;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; Titolo & GT; NET - AI CATBOT & LT; / Titolo & GT;
& lt; / head & gt;
& lt; corpo e GT;
& lt; IFRAME
    Allow = "Microfono;" larghezza = "350" altezza = "430" src = "https://console.dialogflow.com/api-client/demo/embedded/bbd27d04-5546-4b62-85546-4b62-85a5-C373575A33AA" & GT;
& lt; / iframe & gt;
& lt; / corpo e GT;
& lt; / html & gt;

Questo articolo è stato originariamente pubblicato in emissione 312 di NET, la rivista best-seller del mondo per i web designer e sviluppatori. Acquista il problema 312. o Iscriviti a Rete. .

Attenuto a saperne di più su come puoi portare AI ai tuoi siti e app?

An image promoting generate New York 2019 from April 24th -25th and speaker Josh Clark's keynote 'AI is your new design material'.

Generare, la premiata Conferenza vincente per i web designer, ritorna a New York il 24 aprile! Per prenotare i biglietti visitare www.generateconf.com

Desideroso di saperne di più su come puoi portare AI nei tuoi disegni? Josh Clark, fondatore di Big Medium, darà il suo keynote 'Ai è il tuo nuovo materiale di design "a Genera New York il 25 aprile, in cui ti insegnerà a utilizzare contenuti generati dalla macchina, intuizione e interazione come materiale di progettazione in il tuo lavoro quotidiano.

Generare New York da corsa dal 24 al 25 aprile - Ottieni i tuoi biglietti ora !

Articoli Correlati:

  • Una guida alla visione cloud di Google
  • 7 Enormi tendenze tecniche nel 2019 che i progettisti devono sapere
  • I designer saranno sostituiti dai robot?

Come si fa - Articoli più popolari

Adobe Fresco Tutorial: crea un ritratto nell'app di pittura

Come si fa Sep 11, 2025

(Immagine di immagine: Phil Galloway) Per questo tutorial Adobe Affresco, creerò un ritratto vibrante ed emotivo, mo..

Crea quantità specifiche stili e layouts

Come si fa Sep 11, 2025

In questo tutorial daremo un'occhiata ai modi di cambiare gli stili di elementi di CSS, oltre a styling apparentemente i loro gen..

Costruisci una pagina di atterraggio a schermo animato a schermo animato

Come si fa Sep 11, 2025

La tua pagina di destinazione è un elemento cruciale nel tuo Layout del sito web . È la prima reale opportunità..

Come creare Personaggi dei cartoni animati Furry

Come si fa Sep 11, 2025

Pagina 1 di 2: Pagina 1 Pagina 1 Pagina 2 Design del personagg..

Crea immagini 3D interattive con tre.js

Come si fa Sep 11, 2025

Questo tutorial WebGL dimostra come creare una simulazione ambientale 3D che mostra ciò che accade al mondo come livelli di CO2 ..

Groom Una creatura irresistibilmente pelosa

Come si fa Sep 11, 2025

Pagina 1 di 3: Pagina 1 Pagina 1 Pagina ..

Crea straordinarie trame piastrellabili in Blender

Come si fa Sep 11, 2025

Pagina 1 di 2: Pagina 1 Pagina 1 Pagina ..

Fai una GIF animata in Photoshop

Come si fa Sep 11, 2025

Adobe sta lanciando una nuova serie di tutorial video oggi chiamato lo rendono ora, il che mira a delineare come creare specifici progetti di progettazione utilizzando vari Nuvola cre..

Categorie