Jak zrobić losowanie obrazka w chatbotcie? [Chatfuel i Dialogflow] cz.2

Losowanie obrazka w Dialogflow

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):

Losowanie obrazka w Dialogflow

 

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 obrazka w Dialogflow

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:

Losowanie obrazka w Dialogflow

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

Losowanie obrazka w Dialogflow

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: