Vytvorte si vlastného chatbota
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
Chatbot Lenka
Viem, že nie všade sa dá chatbot zmysluplne aplikovať. Pred časom som ale vytvoril jednoduchú aplikáciu, ktorá ako chatbot môže dávať zmysel.
Má zmysel hlasový asistent?
Má dnes na Slovensku zmysel hlasový asistent? Pre koho je toto zariadenie určené a ako ho vlastne využiť? Práve týmto témam sa venuje tento článok.
Čo je chatbot?
Dnes som sa pozrel na to, čo v skutočnosti je chatbot. Dôležité je ale popísať aj to, čo chatbot nie je, alebo čo nemusí byť. Viac v mojom blogu.