Vytvorte si vlastneho chatbota

13.12.2021

chatbot

Dnes vytvoríme jednoduchého chatbota. Pôjde v podstate o web stránku, ktorá sa bude správať ako chatbot. Všetko sa pokúsim zrozumiteľne vysvetliť, preto verím, že to zvládnete aj bez programátorských skúseností. Ak však aspoň trošku poznáte HTML, CSS prípadne JavaScript bude to pre vás určite malina.

Mimochodom, takto bude vyzerať náš výsledný chatbot:

Ak si aj napriek môjmu ubezpečeniu netrúfate, chatbota urobiť sami, ale nejakého toho bota by ste na svoj web chceli, stačí ak mi napíšete. Chatbota vám rád pripravím podľa vašich požiadaviek.

Editor kódu

Skôr než začneme, budete potrebovať nejaký editor - program v ktorom chatbota vytvoríme. Ak ste programátor, tak určite máte svoje obľúbené IDE. Ak programátor nie ste, vystačíte si s tým najjednoduchším editorom textu, ktorý na počítači máte. Môže to byť aplikácia "Poznamkový blok" - bežná výbava Windows, resp. „TextEdit" bežná výbava Macu. Ak ste na Macu a rozhodli ste sa pre TextEdit, tak v jeho nastavení si zaškrtnite položku „Zobraziť HTML ako HTML Kód, a nie ako formátovaný text“ štandardne to takto nastavené nie je.

Ak chcete mať z písania kódu trošku lepší zážitok, odporúčam stiahnuť si napríklad Sublimetext. Tento program je dostupný aj pre Windows aj pre Mac. Je to malý a rýchly editor, ktorý vám kód bude prehľadne vyfarbovať. Vďaka tomu bude všetko zrozumiteľnejšie.

Hlavička stránky

Ak ste si svoj editor už vybrali, môžeme sa pustiť do kódovania. Vytvorme si prázdny súbor, ktorý nazveme index.html. Do súboru nakopírujte nasledovný 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</title>
   </head>
   <body>
   </body>
</html>

Čo sme to vlastne do súboru vložili? Ide o kód, ktorý obsahuje takmer každá html web stránka. Kód hovorí prehliadaču, že stránka bude v slovenčine, nájdete tu názov stranky a pár ďalších vecí, ktoré ale pre tento článok nie sú dôležité.
Doležité však sú značky <body>náš kód</body>, pretože primárne medzi ne budeme písať náš kód.

HTML kód chatbota

Medzi vyššie spomínané značky "body" vložte nasledujúci kód:

<div class="container">
   <div id="chat">
      <div class="msg bot">
      Ahoj, ja som chatbot Anička.
      </div>
   </div>
   <form id="myForm">
      <input id="myInput" type="text" />
   </form>
</div>

Značky, o ktorých píšem voláme „tágy“. Vačšina html tágov existuje vo dvojici - začiatočný otvárací tag a koncový uzatvárací tag. Ukončovací tág obsahuje lomítko. Reálny obsah, ktorý zobrazujú prehliadače a môžeme ho vidieť na stránke, sa potom vkladá medzi takéto tágy. V našom prípade to je úvodná hlaska chatbota "Ahoj, ja som chatbot Anička."

Čo sme to ale do našeho súboru vložili? Tento kód vytvoril 4 veci.

Vytvoril kontajner <div class="container">v ktorom bude chat prebiehať. Tento kontajner si môžete predstaviť ako nejaký hárok papiera.
Na tento hárok papiera sme si akoby nakreslili štvorec to je element: <div id="chat"> . Do tohoto štvorca budeme ukladať jednotlivé správy.
Kód obsahuje aj úvodnú správu chatbota. Mimochodom túto správu môžete ľubovoľne upraviť.
Posledná vec, ktorú v kóde nájdete je formulár. Toto je miesto kam budeme písať naše správy pre chatbota.

V tagoch môžete vidieť parametre ako "class" a "id". Tieto služia na presné označenie jednotlivých elementov resp. skupín elementov. Keď budeme potrebovať dať príkaz konkretne len jednému elementu, vdaka parametru "id" ho budeme vedieť pesne adresovať.

Ak by ste sa teraz súbor index.html otvorili, už by ste vo vašom prehliadači videli úvodnú hlášku chatbota. Stránka by však ako chatbot ešte nevyzerala. Vzhľad vyriešime v ďalšom kroku.

CSS Štýly chatbota

Teraz do nášho kódu vložíme tzv. "CSS štýly". Ide o niečo, čo dá webu farby, fonty a iné dizajnové prvky. Tieto štýly sa nevkladajú do <body> elementu, ale do hlavičky stránky. Konkrétne do elementu <head>. Štýlom sa viac venovať nebudeme, lebo by to bolo na samostatný kurz. Zatiaľ si ich do stránky len vložíme. Nasledujúci kód vložíme hneď pred koncový tág </head>.

<style>
body {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: Arial, sans-serif;
   font-size: 16px;
   line-height: 20px;
   color: #666;
   background-color: #e5dcd7;
}
.container {
   width: 320px;
   margin: 0 auto;
}
#chat {
   width: 100%;
   display: flex;
   flex-direction: column;
   padding: 20px 0 0 0;
}
.msg {
   padding: 10px;
   margin-bottom: 10px;
   max-width: 250px;
   width: fit-content;
   border: 1px solid #666;
   border-radius: 12px;
}
.bot {
   background-color: #fff;
   color: #666;
   align-self: flex-start;
}
.user {
   background-color: #4a9ba9;
   color: #fff;
   align-self: flex-end;
}
input {
   width: 100%;
   padding: 8px;
   border: 1px solid #666;
   border-radius: 12px;
   font-size: 16px;
}
input {
   outline: none;
}
</style>

Ak otvoríte súbor index.html teraz, už uvidíte niečo čo sa na chatbota už začína podobať.
Keďže ale potrebujeme, aby nám chatbot aj odpovedal na naše správy, budeme potrebovať ešte jednu technológiu, tou bude "JavaScript".

JavaScript pre chatbota

Nasledujúci kód vložíme na koniec "body" elementu. Teda hneď pred uzatvárací tag </body>:

<script>
document
.getElementById("myForm")
.addEventListener("submit", function (e) {
   e.preventDefault();
   var question = document.getElementById("myInput").value;
   showMessage("user", question);
   createAnswer(question);
   document.getElementById("myInput").value = "";
});

function createAnswer(q) {
   var answer = "";
   if (q == "Ahoj") {
      answer = "Ahoj";
   } else if (q == "Ako sa máš?") {
      answer = "Super";
   }
   // sem vlož svoju odpoveď

   else {
      // táto odpoveď sa zobrazí ak bot nevie reagovať:
      answer = "Je mi ľúto, ale na takéto otázky nesmiem reagovať.";
   }
   showMessage("bot", answer);
}
function showMessage(who, text) {
   document.getElementById("chat").innerHTML +=
   "<div class='msg " + who + "'>  " + text + "</div>  ";
}
</script>

Ak si teraz znovu načítate vašu stranku, chatbot už bude fungovať.
Keď napísete „Ahoj“ chatbot vám slušne odzdraví. Ak sa ho opýtate "Ako sa máš?" rovnako dokáže reagovať. Na akúkoľvek inú otázku vám však len tajomne odpíše, že o téme nesmie hovoriť.
Skôr ale než ukážem ako chatbota naučíme nové odpovede, krátko vysvetlím, čo vlastne ten vložený script robí.

Keď správu odošleme, tak script vytiahne náš text napísaný do Inputu s parametrom id="myInput" a vloží ho do premennej "question".
Premennú "question" - teda náš text, vypíšeme pomocou funkcie "showMessage".
Následne spustíme funkciu "createAnswer". V tejto funkcii sa náš text vyhodnotí a pripraví sa príslušná odpoveď. Ak premenná "question" obsahuje „Ahoj“ tak chatbot vloží do premennej text "Ahoj". Premenná "answer" sa následne cez už spomínanú funkciu "showMessage" vypíše do našeho chatu.

Ak chceme chatbota naučiť nové odpovede, urobíme to tak, že tieto doplníme do funkcie "createAnswer".
Teraz naučme "Aničku" reagovať na otázku koľko máš rokov. Do kódu hneď pod poznámku "//sem vlož svoju odpoveď" vložíme nasledujúci kód:

else if (q == "Koľko máš rokov?") {
   answer = "Dámam sa takéto otázky nekladú.";
}

Každú daľšiu odpoveď doplníme rovnakým spôsobom.
Teraz si už môžete vymyslieť vlastné otázky a odpovede a tak chatbota naučiť, čo len budete chcieť.

Áno, takýto chatbot je veľmi jednoduchý a má veľa obmedzení. Mojim cieľom však nebolo naprogramovať nejakú umelú inteligenciu. Chcel som len ukázať, že chatbot je po stránke frontendu (tej časti programu, ktorú vidíme na displeji) relatívne jednoduchý program.

Ak sa vám nechce chatbota skladať podľa uvedeného postupu, prikladám aj link kde si ho možete stiahnuť. chatbot-anicka.zip
Chatbota si tiež môžete vyskúšať na tejto stránke Chatbot Anna.

Ďalšie články