Bygg en AI-Powered Chatbot

Sep 11, 2025
hvordan
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.
[1. 3]

Artificial Intelligence (AI) gjør at vi kan skape nye måter å se på eksisterende problemer, fra å revurdere miljømessige strategier til hvordan vi lærer. Dine prosjekter - enten apper, nettsteder eller spill - kan utnytte AI for å gjøre dem mer engasjerende, enklere å bruke og ha mer verdifulle resultater. En slik metode innebærer å lage en naturpråklig chatbot for å hjelpe brukerne med å samhandle med nettstedet ditt.

Hvis du vil opprette din første chatbot, bruker vi Googles nye dialogflow-verktøysett. Det utnytter kraftig maskinlæring, samt tale-til-tekst. Det kan inkorporeres rett inn på nettstedet ditt som en widget eller tilpasset dine behov.

Hvis du er i ferd med å planlegge et nytt nettsted, trenger du råd om alt fra det ideelle Nettstedbygger til hvilken Web Hosting. Tjenesten å velge, så sjekk ut våre guider. Opprette et nytt designsystem? Lagre det sikkert i skylagring Så det er tilgjengelig for hele ditt lag. Nå på hvordan å lage en chatbot ...

01. Opprett en konto

Gå til dialogflow.com. og opprett din konto. Logg inn og godta tillatelsene for å aktivere dialogflyten for å få tilgang til kontoen din.

02. Lag en agent

Dialogflow bruker begrepet 'agent' for å representere forekomster av din AI. Tenk på agenten som den virtuelle intelligensen du skaper. Du kan ha mange agenter som jobber for deg, hver med sin egen personlighet og formål.

Klikk på knappen 'Opprett agent' og skriv inn et navn for din agent: 'Hal 9000'.

03. Opprett en hensikt

Først må du opprette en hensikt. Vi definerer "intensjonen" i brukerens innganger. Klikk på "Opprett hensikt" og navngi den "åpne dører". Trykk på 'Lagre'.

04. Tren AI for denne hensikten

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'.

Trene AI for en hensikt ved å gi setninger som en bruker kan bruke

Tren AI for denne hensikten ved å gi setninger som en bruker kan bruke. NLP AI vil bruke disse og avledede variasjoner for å trene agenten. Legg til følgende treningsfraser i vinduet "Treningsfraser" og legg til så mange av dine egne som du vil:

  • 'Åpne Pod Bay Doors, Hal.'
  • "Åpne dørene."
  • «La meg inn, Hal!»

05. Legg svar

Deretter må du legge til noen svar som agenten vil svare med. Du skriver inn disse i vinduet "Svars". Prøv noen som dette:

  • "Jeg er redd jeg kan ikke gjøre det, Dave."
  • "Jeg kan ikke gjøre det akkurat nå."

Trykk deretter på "Legg til svar" og "Lagre" opp på toppen igjen. Du vil se varsler om at agenten blir trent og så er den klar.

06. Test ut chatbot

På høyre side av skjermen er et testverktøy. Chatbot vil bruke Googles tale-til-tekst-tjeneste for å oversette stemmen din til tekst hvis du prøver det ut. Du bør se resultatene av forespørselen din og svaret som AI-agenten er valgt. Veldig kult!

07. Opprett og bruk en enhet

Enheter er konsepter som kan defineres og gjenbrukes i agentens svar som variabler. La oss trene AI til å forstå når en bruker uttrykker en følelse, og bruk det i svaret på brukeren.

På venstre meny klikker du på "Enheter". Skriv 'følelser' for navnet på din nye enhet. Hold 'Define Synonymer' sjekket. Klikk i tabellen under og skriv 'sint' som den første følelsen. Deretter klikker du til høyre for det og legg til synonymer som "Mad", "opprørt", og så videre. Deretter legger du til en annen oppføring for 'redd' og bruk synonymer 'redd' '' skremt ', etc., som du liker. Trykk på "Lagre" når du er ferdig.

Dette har nå trent agenten til å forstå at "sint" og "redd" er følelser en bruker kan kommunisere. Alle synonymer er variasjoner som kan oppstå. AI vil også generere noen.

08. Opprett en ny hensikt

Nå skal vi skape en ny hensikt å bruke "følelsesenhetens enhet vi har opprettet. Ring denne hensikten 'følelser' og klikk på "Lagre".

Neste legg til nye treningsfraser som "du skremmer meg", "du gjør meg gal", og "Jeg er veldig sint," ved hjelp av variasjoner av sint og skremte søkeord. Dette vil trene agenten for å forstå de ulike måtene som en bruker kan uttrykke denne følelsesmessige utsagnet.

Du vil legge merke til at systemet fremhever de skremte og sint ordene for deg. Det er allerede flagget disse som enheter. Det har også lagt til en oppføring i vinduet "Handlinger og parametere". Dette gjør at du kan bruke disse enhetene i dine svar også.

09. Legg til et svar med den nye "følelsesenhetens enhet

I Svarsvinduet legger du til nye svar som bruker denne nye enheten. Legg merke til "$" for å betegne "$ følelsesenhetens enhet. Prøv å legge til disse svarene:

  • "Jeg beklager at du føler deg $ følelser, Dave."
  • "Følelse av $ følelser er et menneskelig svar, Dave."

Klikk på "Legg til svar" og trykk på "Lagre" -knappen øverst på skjermen for å lagre hele hensikten.

10. Test din chatbot på nytt

Prøv å si eller skrive følgende setninger i testverktøyet.

  • "Du gjør meg veldig sint Hal."
  • "Du er freaking meg ut."

Legg merke til hvordan det reagerte med å bruke "redd" med den andre? Det brukte vårt synonym, "freaked out" å vite at vi mente redd. Veldig kult.

Du er velkommen til å leke med dette, så vel som å legge til noen flere hensikter og svar som du liker, og så legger vi til dette på en nettside.

11. Aktiver webintegrasjon

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

Hvis du klikker på Web Demo, vil du vise en kodeutklippet du kan bruke til å slippe widgeten til ditt eget nettsted

Hvis du vil legge den til på nettsiden din, klikker du på "Integrations" på venstre meny. Deretter klikker du på "web demo" -boksen for å slå det alternativet på.

En popup vises som viser deg en direkte kobling, slik at du kan bruke til å teste integrasjonen ut med en gang. Det vil også vise en kodeutklipp som du kan bruke til å slippe widgeten til ditt eget nettsted. Kopier den kastet til utklippstavlen, slik at du kan lime den inn i nettstedet ditt.

12. Opprett en grunnleggende nettside og legg til stikketten

Opprett en grunnleggende HMTL-side og ta med den kodestrømmen neste. Prøv følgende kode og last den opp til serveren din eller kjør den på din lokale server. Bytt ut snippeten nedenfor med den du kopierte fra dialogflaten din: 

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; net - ai chatbot & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; iframe
    tillate = "mikrofonen;" bredde = "350" høyde = "430" src = "https://console.dialogflow.com/api-client/demo/embedded/bbd27d04-5546-4b62-85a5-c373575a33aa" & gt;
& lt; / iframe & gt;
& lt; / body & gt;
& lt; / html & gt;

Denne artikkelen ble opprinnelig publisert i utgave 312 i Net, verdens bestselgende magasin for webdesignere og utviklere. Kjøp utgave 312. eller Abonner på netto .

Keen for å lære mer om hvordan du kan ta med AI til dine nettsteder og apper?

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

Generer, den prisbelønte konferansen for webdesignere, returnerer til NYC den 24-25 april! For å bestille billetter, besøk www.generateconf.com

Ivrige etter å lære mer om hvordan du kan ta med AI i designene dine? Josh Clark, grunnlegger av stort medium, vil gi sin keynote 'AI er ditt nye designmateriale' på generere New York 25. april, der han vil lære deg å bruke maskingenerert innhold, innsikt og samhandling som et designmateriale i ditt daglige arbeid.

Generer New York Runs fra april 24-25 - Få dine billetter nå !

Relaterte artikler:

  • En guide til Googles skyvisjon
  • 7 store teknologiske trender i 2019 som designere trenger å vite
  • Vil designere bli erstattet av roboter?

hvordan - Mest populære artikler

Hvordan lage 3D Gress

hvordan Sep 11, 2025

[1. 3] 3D Gress kan opprettes på en rekke forskjellige måter og er en viktig ressurs for ethvert naturmiljø eller gjenvinning a..

Affinity Designer: Slik bruker du Pixel Persona

hvordan Sep 11, 2025

[1. 3] Affinity Designer er et populært vektor redigeringsverktøy for Mac, Windows og Nå iPad. . Appen er smart ..

Opprett et enkelt fargediagram

hvordan Sep 11, 2025

Komme til grep med fargeteori kan virke litt for mye som å lære matematikk eller vitenskap. Du kan føle at du bare vil være kreativ og uttrykke deg selv, ikke trene beregni..

Master broverktøyet

hvordan Sep 11, 2025

[1. 3] Hva er broverktøyet? Hvis du er ny på CGI, er det altfor mange verktøy å velge mellom i et svimlende utva..

Hvordan lage tegneseriefigurer i kino 4d

hvordan Sep 11, 2025

[1. 3] Med adventen av mobilspill og indie videospill , det har vært en stor tilstrømning av illustratører og an..

Slik bruker du digitale verktøy for å lage et håndtegnet utseende

hvordan Sep 11, 2025

[1. 3] Redigering og illustrerer digitalt gir mye mening, spesielt for kommersielle illustrasjonsprosjekter. I fjor begynte jeg f�..

Hvordan velge riktig prototypingsverktøy

hvordan Sep 11, 2025

[1. 3] Prototyping er kanskje en av de viktigste delene av webdesignprosessen. Ved å bygge A. Nettsted protot..

Dokument dine designsystemer med Fractal

hvordan Sep 11, 2025

[1. 3] Har du lyst på å lære mer om designsystemer? Så ikke gå glipp av senior ui ingeniør Mina Markh..

Kategorier