W poprzednim wpisie z tej serii opisałem w jaki sposób zrealizować funkcjonalność losowania obrazka w Chatfuel. Możemy ją wykorzystać m.in. do losowania nagród/rabatów czy do rozrywkowej części bota. W dzisiejszym wpisie pokażę Wam, jak zaimplementować losowanie w Dialogflow, narzędziu Google, do przetwarzania języka naturalnego oraz do tworzenia botów.
O samym Dialogflow wspominałem już w kilku artykułach na blogu (odsyłam np. do wprowadzenia). Dziś czas na zaimplementowanie losowania obrazku w Dialogflow.
Dla przypomnienia proces będzie wyglądał następująco:
- użytkownik zobaczy przycisk, po kliknięciu, którego przejdzie do etapu losowania
- losowanie będzie polegało na wyświetleniu użytkownikowi jednego z 3 zdefiniowanych wcześniej obrazków
Rozpoczęcie losowania
Aby pokazać Wam proces losowania obrazka dodam najpierw element, który pojawi się, gdy użytkownik będzie chciał podjąć próbę losowania. Zgodnie z założeniami ze wstępu będzie to przycisk, wyświetlony w podobny sposób, jak to miało miejsce w poprzednim poście.
Element, który za chwilę dodamy będzie odpowiedzią bota na rozpoznany Intent. A czym jest Intent w Dialogflow? Agent Dialogflow jest zbiorem Intentów, a każdy z nich jest potencjalną częścią konwersacji. Intent z reguły ma zdefiniowane w sobie tzw. frazy treningowe, na podstawie których silnik rozumienia języka naturalnego potrafi przyporządkować wiadomość od użytkownika do Intentu.
Tutaj przypomnę w jaki sposób procesowana jest wiadomość w Dialogflow:
Ok, teraz do rzeczy. Tworzymy intent o nazwie Start, który uruchomiony będzie na frazy Start, Rozpocznij, itp. (aby było spójnie z przykładem z poprzedniego wpisu). Odpowiedź ustawimy tylko na platformę Facebook Messenger (założyliśmy, że robimy odpowiednik bota z Chatfuel):
W ten sposób stworzyliśmy intent, który reaguje na frazy typu start, rozpocznij i wyświetlać będzie początek procesu losowania – wiadomość oraz przycisk, rozpoczynający losowanie:
Losowanie
Aby zaimplementować funkcję losowania dodajemy intent, nazywamy go Gift drawing i uzupełniamy mu frazy treningowe na te wskazane, jako payload we wcześniej dodanym przycisku. W naszym przypadku jest to Losuj. Dzięki temu sprawimy, że użytkownik trafi do odpowiedniego intentu po kliknięciu we wcześniej zdefiniowany przycisk.
Jeśli chcemy, aby ktoś omyłkowo nie wszedł w intent „Gift drawing”, możemy wprowadzić kontekst, który będzie dbał o to, że ten intent będzie procesowany tyko w przypadku wcześniejszego odpalenia intentu „Start”. (ale temat kontekstu pozostawiam na inny wpis)
Po dodaniu fraz treningowych intent powinien wyglądać mniej więcej tak:
I teraz najaważniejsza rzecz: fulfillment.
Fulfillment to funkcjonalność, która powoduje, że gdy Dialogflow poprawnie dopasuje intent do wypowiedzi użytkownika, wysłane zostanie zapytanie do zewnętrznego serwera, które przeprocesuje w dodatkowy sposób intent. Kiedy może to być przydatne? Gdy chcemy np. zapisać użytkownika do zewnętrznego systemu lub gdy chcemy zapisać informacje do bazy danych. W naszym przypadku wykorzystam tę funkcjonalność do losowania obrazka i generowania odpowiedzi na podstawie wylosowanego elementu.
Aby włączyć tę opcję przechodzimy do konfiguracji intentu, przechodzimy do sekcji Fulfillment i włączamy opcję: Enable webhook call for this intent
Fulfillment
Aby przejść do edycji, klikamy w zakładkę Fulfillment i w ten sposób przejdziemy do edycji kodu, który będzie wykonany, gdy fulfillment jest włączony. Na potrzeby wpisu, skorzystamy z trybu Inline Editor, który jest domyślnie włączony. Co on oznacza? Że kod, który napiszemy będzie osadzony w usłudze Google, a my możemy go edytować z poziomu Dialogflow. Inną opcją jest implementacji endpoint’a na własnym serwerze, ale to jest poza zakresem tego wpisu.
Poniżej macie gotowy skrypt, który losuje spośród zdefiniowanych 3 obrazków i wyświetla użytkownikowi wylosowany element. Jeśli chcecie ściągnąć gotowy plik to odsyłam do repozytorium na GitHubie.
'use strict';
const functions = require('firebase-functions');
const {WebhookClient, Image } = require('dialogflow-fulfillment');
const {Card, Suggestion} = require('dialogflow-fulfillment');
process.env.DEBUG = 'dialogflow:debug'; // enables lib debugging statements
exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => {
const agent = new WebhookClient({ request, response });
const images = [
'https://images.unsplash.com/photo-1485827404703-89b55fcc595e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
'https://images.unsplash.com/photo-1527430253228-e93688616381?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60',
'https://images.unsplash.com/photo-1525338078858-d762b5e32f2c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'
];
console.log('Dialogflow Request headers: ' + JSON.stringify(request.headers));
console.log('Dialogflow Request body: ' + JSON.stringify(request.body));</pre>
function drawingHandler(agent) {
agent.add(`Drawing!`);
var imageUrl = getRandomImageUrl();
agent.add(new Image(imageUrl));
}
function getRandomImageUrl(){
return images[Math.floor(Math.random() * images.length)];
}
let intentMap = new Map();
intentMap.set('Gift drawing', drawingHandler);
agent.handleRequest(intentMap);
});
Teraz kilka słów wyjaśnienia o co właściwie chodzi w powyższym kodzie:
- linia 12-16: stworzenie tablicy, która przetrzymuje adresy do obrazków, spośród których chcemy losować
- linia 20-25: metoda, która uruchomiona będzie, gdy Dialogflow rozpozna intent Gift drawing. Co ona robi? pobiera z wcześniej zdefiniowanej tablicy losowy url do obrazka i zwraca obrazek, jako odpowiedź
- linia 32: przypisanie metody, która ma być uruchomiona w odpowiedzi na rozpoznanie intentu Gift drawing
Ten prosty kod spowoduje, że za każdym razem uruchamiana będzie metoda drawingHandler i w rezultacie użytkownik otrzyma wylosowany obrazek jako odpowiedź.
PS. Aby kod zadziałał musimy przekopiować zawartość pliku do Inline Editor’a oraz kliknać „Deploy” i poczekać na aktualizację kodu
Test
Aby nie być gołosłownym, wypadałoby pokazać, że funkcjonalność rzeczywiście działa. Po kliknięciu w przycisk „Losuj” otrzymywać będziemy losowy obrazek:
