Vytvorte si chatbota 2

18.02.2022
chatbot
Vytvorte si chatbota 2

V predchádzajúcom článku som vám ukázal, ako si pomerne jednoducho môžete vytvoriť vlastného chatbota. Tento je síce funkčný, ale zmysel veľmi nedáva. Dnes sa pokúsim ukázať, ako si vytvoriť chatbota, ktorý už naozaj bude dávať zmysel.

Prvá verzia chatbota "Aničky" mala viac nedostatkov. Tým najzásadnejším je to, ako chatbot spracováva zadaný text. Tento sa len porovnával s nejakým očakávaným reťazcom. Stačila akákoľvek malá chyba a text sa správne nevyhodnotil. Ak by ste takéhoto chatbota skutočne chceli použiť na svojom webe, museli by ste presne zadefinovať všetky možné otázky a ich varianty so všetkými možnými gramatickými chybami. Zároveň by ste museli zohľadniť malé a veľké písmená a pod. Toto by bolo veľmi pracné.

Sú dva spôsoby ako tento problém riešiť. Prvou možnosťou je vylepšiť analýzu zadaného textu tak, aby chatbot správne vyhodnocoval to, na čo sa ho pýtame. Zároveň je ale potrebné zabezpečiť, aby chatbot vedel aj odpovedať na všetky zadané otázky. Druhou a jednoduchšou možnosťou je upraviť chatbota tak, aby bolo možné opýtať sa ho len na to, čo vie odpovedať, a takým spôsobom, ktorému bude chatbot vždy rozumieť.
Zvolíme si tú jednoduchšiu druhú možnosť. Chatbota upravíme tak, že otázky bude užívateľ klásť prostredníctvom tlačidiel s dopredu zadefinovanými otázkami.

chatbot

Čo budeme na vytvorenie chatbota potrebovať? Opäť to bude nejaký editor. Viac o tom, aký editor použiť som písal v predchádzajúcom článku. Rovnako ako naposledy, na vytvorenie chatbota použijeme HTML, CSS a JavaScript. Aby som úplných začiatočníkov nejako nezmiatol, nebudem používať žiadnu externú knižnicu. Aj z toho dôvodu, bude dnes toho Javascripu trošku viac. Netreba sa toho ale báť, opäť sa pokúsim kód zrozumiteľne popísať a vysvetliť.

HTML kód

Vo zvolenom editore si vytvorte prázdny súbor s názvom index.html. Do súboru index.html nakopírujte tento kód:


<html lang="sk">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Chatbot Anička 2</title>
      <link rel="stylesheet" href="style.css"/>
   </head>
   <body>
      <div class="container">
      <div id="chat"></div>
      <div id="buttons"> </div>
      </div>
   </body>
</html>

Aké sú rozdiely oproti prvej verzii? Tentokrát už do kódu nevkladám CSS štýly priamo. Keďže ich už je o niečo viac, vložil som ich do samostatného súboru s názvom style.css. Aby sa tieto štýly v našej stránke použili, musíme si tento súbor do aplikácie vložiť. To som urobil prostredníctvom tágu link:
<link rel="stylesheet" href="style.css"/> Tento sa vkladá do hlavičky stránky, teda medzi tágy: <head> </head>

Aj JavaScriptu bude tentokrát trochu viac. Z toho dôvodu si aj ten uložíme do samostatného súboru s názvom main.js. Tento som do našej aplikácie vložil prostredníctvom tágu script:
<script src="main.js"/></script>Tento kód nájdete tesne pred uzatváracim tágom </body>

Okrem vloženého scriptu v "body" elemente nájdeme kontajner, v ktorom bude chat prebiehať. V tomto kontajneri sú už len dva bloky. Do prvého bloku budeme vkladať správy prebiehajúceho chatu.
<div id="chat"></div> V druhom bloku sa budú objavovať tlačidlá, ktoré budeme používať na komunikáciu s chatbotom.
<div id="buttons"> </div>

Ako som vyššie popísal, nechceme, aby užívateľ mohol klásť akékoľvek otázky. Preto v kóde tentokrát už nenájdete formulár.
Možno ste si tiež všimli, že HTML kód neobsahuje ani úvodnú správu. Túto do kódu vložíme prostredníctvom JavaScriptu. Keďže JavaScript máme v samostatnom súbore, môžeme takto všetky správy, ktoré chatbot napíše, upravovať len v tomto jednom súbore. Do index.html už potom nebude potrebné zasahovať.

CSS štýly chatbota

Teraz si do aplikácie vložíme CSS štýly, ktoré sú zodpovedné za vzhľad aplikácie. Keďže všetky informácie o farbách a veľkostiach nevkladáme priamo do index.html, môžete si súbor so štýlmi stiahnuť style.css.
Je dôležité, aby súbor style.css bol v tej istej zložke ako index.html. Ak si teraz otvoríte súbor index.html v prehliadači, uvidíte len farebné pozadie. Správy a tlačidlá budú chýbať. Obsah stránky totiž bude zabezpečovať JavaScript, ktorý doplníme v nasledovnom kroku.

JavaScript

V tej istej zložke, v ktorej máme súbor index.html a style.css, si teraz vytvorte prázdny súbor s názvom main.js. Do tohoto súboru nakopírujte nasledujúci kód:


function showMessage(who, text) {
   document.getElementById("chat").innerHTML +=
   "<div class='msg " + who + "'>  " + text + "</div>  ";
}

function showNewButtons(buttons) {
   document.getElementById("buttons").innerHTML = "";
   buttons.forEach(function (button) {
      document.getElementById("buttons").innerHTML +=
         `
         <div class="btn" onclick="buttonPressed('` +
         button +
         `')">` +
         button +
         `</div>
         `;
      });
}    

function createAnswer(q) {
   var answer = "";
   var newButtons = [];
   if (q == "start") {
       answer = "Ahoj, ja som chatbot Anička.";
       newButtons = ["Otváracia doba", "Telefón"];
   } else if (q == "Otváracia doba") {
       answer = "Sme otvorený každý pracovný deň od 8:00 do 17:00.";
       newButtons = ["Telefón"];
   } else if (q == "Telefón") {
      answer = "Naše telefónne číslo je: 123 456 789";
      newButtons = ["Otváracia doba"];
   }

   // sem vlož svoju odpoveď

   showMessage("bot", answer);
   showNewButtons(newButtons);
}


function buttonPressed(question) {
   showMessage("user", question);
   createAnswer(question);
}

// úvodna správa
createAnswer("start");

Ak si teraz znovu načítate vašu stránku, zobrazí sa úvodná správa a chatbot bude reagovať na stlačenie tlačidiel.
Vložený kód obsahuje 4 funkcie:

  • showMessage táto funkcia je rovnaká ako v predchádzajucej verzii chatbota. Jej úlohou je vypísať správu. Robí to tak, že do elementu s id "chat" vloží text a označí či je správa od robota alebo od užívateľa. Preto má táto funkcia dva vstupné parametre "who" a "text".
  • showNewButtons táto funkcia vykresľuje na stránke tlačidlá. Najskôr vymaže existujúce tlačidlá tým, že do elementu s id "buttons" vloží len "".
    Následne tento istý element v cykle naplní zadefinovanými tlačidlami. Vstupným parametrom tejto funkcie je pole (zoznam) tlačidiel.
  • createAnswer táto funkcia zabezpečuje správanie chatbota. Teda vyhodnocuje to, čo sa má vypísať, keď sa zatlačí niektoré tlačidlo. Do tejto funkcie budeme vkladať svoje vlastné odpovede.
    Po tom, čo funkcia vyhodnotí, aké tlačidlo bolo stlačené, zavolá a naplní dve predchádzajúce funkcie. Vďaka tomu vykreslíme novú správu a nový zoznam tlačidiel.
  • buttonPressed úlohou tejto funkcie je zabezpečiť, aby reagovali tlačidlá. Na každom tlačidle je umiestnené volanie tejto funkcie. Funkcia samotná už len volá predchádzajúce funkcie. Prostredníctvom "showMessage" sa vypíše text z tlačidla na obrazovku ako správa. Zavolanie funkcie "createAnswer" vyhodnotí správu odoslanú tlačidlom.

Na poslednom riadku nájdeme zavolanie funkcie "createAnswer" s parametrom "start". Tento riadok zabezpečí to, že sa vypíše úvodná správa.

Vlastné odpovede a tlačidlá

Nové odpovede naučíme robota tak, že budeme upravovať funkciu "createAnswer". Ukážeme si to na príklade.
Povedzme, že chatbota chceme naučiť adresu predajne. Najskôr upravíme úvodnú správu tak, že do zoznamu tlačidiel pridáme položku "Adresa".


if (q == "start") {
   answer = "Ahoj, ja som chatbot Anička.";
   newButtons = ["Otváracia doba", "Telefón", "Adresa"];
}

Potom do zoznamu reakcií vložíme kód, ktorý zabezpečí vypísanie adresy.


else if (q == "Adresa") {
   answer = "Adresa predajne je Horná 1, Bratislava";
   newButtons = ["Otváracia doba","Telefón"];
}

Tento kód vložíme na miesto označené poznámkou // sem vlož svoju odpoveď. Okrem samotnej odpovede, kód obsahuje aj vlastný zoznam tlačidiel. Je vhodné, aby nejaké tlačidlá obsahovala každá odpoveď. Ak by sme tlačidlá k odpovedi nepridali, užívateľ by nemal ako reagovať. Mimochodom, tento zoznam uzatvorený v hranatých zátvorkách sa nazýva "pole".

Podobnými úpravami si už môžete nakonfigurovať chatbota podľa vašich požiadaviek a vytvárať rozsiahle rozhodovacie stromy.

Ak by ste nechceli skladať chatbota podľa môjho postupu, môžete si hotového chatbota priamo stiahnuť: chatbot-anicka-2.zip
Chatbota si môžete vyskúšať na tejto stránke Chatbot Anna 2.


Ďalšie články