chatbot meetup#2

1. Serverless Solution
- Kitti Tuyman –
2018-11-11

2. หัวข้อ
1.Serverless solution
2.เทคนิคต่าง ๆ ในการทําแชทบอท
 การทําแชทบอทหาโรงพยาบาลที่ใกล้ที่สุด บอกระยะทาง แผนที่ ค่ารถ taxi พร้อม
สมการการคํานวณหาระยะทางจากค่าละจิจูด ลองจิจูด พร้อมสูตรคํานวณค่า taxi
 การทําแชทบอททายภาพ ว่าสถานที่นี้คืออะไร พร้อมบอก location ,ทายภาพ
บุคคลดัง , แกะข้อความบนภาพมาตอบ
 เทคนิคการแกะ message json ของ dialogflow
 การทําแชทบอทแปลภาษา สามารถ detect ว่าพิมพ์ภาษาอะไรแล้วแปลตรงข้าม
 การทํา webhook line beacon แบบง่าย ๆ

3. ปัญหาที่มักจะพบเมื่อเริ่มทํา chatbot
ปัญหาสําหรับคนเริ่มต้น –>เขียนโปรแกรมไม่เป็น /ไม่มี server

4. เขียนโปรแกรมไม่เป็นและไม่มี server
“มีเครื่องมือสร้างแชทบอทหลาย
แพลตฟอร์มมาก ที่สามารถใช้งานได้ฟรี
แต่วันนี้ที่จะแนะนํามีอยู่ 2 ตัว คือ
Dialogflow และ Abdul”

5. Dialogflow (by google)
ข้อดี
O ทําครั้งเดียว สามารถใช้ได้หลายแพลตฟอร์ม Line ,messenger
,webchat และ google assistant(พูดคุยด้วยเสียง)
O สามารถทํา Pattern การพูดได้ เช่น ถามไปแล้วรอคําตอบให้ได้ครบก่อน
ค่อยประมวลผล เช่น ถามชื่อ รอตอบเมื่อตอบแล้ว ถามนามสกุล
O Hybrid (Rule-based and ML)
O เร็ว ฟรี ไม่ต้องมี server เป็นของตัวเองก็ทําแชทบอทได้
O ฯลฯ

6. Dialogflow
ข้อจํากัด
O การเก็บ log ค่อนข้างยาก
O การใช้งาน external api ที่ไม่ใช่ของ google มีค่าใช้จ่าย
O การเขียน webhook ค่อนข้างยาก สําหรับคนเริ่มต้น

7. Abdul ( by Nectec)
ข้อดี
O ภาษาไทย ใช้งานง่าย เร็ว ฟรี มีฟังก์ชั่นค่อนข้างครบถ้วน
O Function 1-1
O Log , Push message , Multicast
O รองรับ JSON,RSS,PHP,IMAGE
O รองรับ Line Beacon
O สามารถดึง variable บางตัวมาใช้งานได้
O ฯลฯ

8. Abdul
ข้อจํากัด
O ยังไม่สามารถทํา Pattern การพูดคุยแบบตรงๆ เหมือน
Dialogflow ได้
O ยังไม่สามารถรองรับการทําหลายแพลตฟอร์มเท่ากับ Dialogflow

9. “ ในเมื่อมีข้อดีไม่เหมือนกัน จับมารวมกัน
เลยได้ไหม จะได้ข้อดีหลายๆอย่าง คําตอบ
คือ ได้ จึงเป็นที่มาของ
Serverless Solution ”

10. Dialogflow + Abdul
สิ่งที่จะได้
O Log ( line user id, message )
O Function 1-1 ,Push , multicast
O แชทบอทหลายแพลตฟอร์ม
O รองรับการเขียนโปรแกรมเพิ่มเติมในอนาคต ผ่าน Abdul
O ความสะดวก สามารถเพิ่มข้อมูลที่ dialogflow หรือ abdul ก็ได้
แบ่งงานกันทําได้
O ฯลฯ

11. วิธีการเชื่อมระหว่าง Dialogflow+ abdul
O เข้าไปที่ https://developers.line.me/

12. วิธีการเชื่อมระหว่าง Dialogflow+ abdul

13. วิธีการเชื่อมระหว่าง Dialogflow+ abdul
เข้าไปที่ https://abdul.in.th/abdul
Create bot
Line token

14. วิธีการเชื่อมระหว่าง Dialogflow+ abdul

15. วิธีการเชื่อมระหว่าง Dialogflow+ abdul
เข้าไปที่ https://dialogflow.com

16. วิธีการเชื่อมระหว่าง Dialogflow+ abdul

17. วิธีการเชื่อมระหว่าง Dialogflow+ abdul

18. วิธีการเชื่อมระหว่าง Dialogflow+ abdul

19. วิธีการเชื่อมระหว่าง Dialogflow+ abdul

20. วิธีการเชื่อมระหว่าง Dialogflow+ abdul

21. วิธีการเชื่อมระหว่าง Dialogflow+ abdul

22. วิธีการเชื่อมระหว่าง Dialogflow+ abdul

23. วิธีการเชื่อมระหว่าง Dialogflow+ abdul

24. วิธีการเชื่อมระหว่าง Dialogflow+ abdul

25. วิธีการเชื่อมระหว่าง Dialogflow+ abdul

26. วิธีการเชื่อมระหว่าง Dialogflow+ abdul

27. วิธีการเชื่อมระหว่าง Dialogflow+ abdul

28. วิธีการเชื่อมระหว่าง Dialogflow+ abdul

29. วิธีการเชื่อมระหว่าง Dialogflow+ abdul

30. วิธีการเชื่อมระหว่าง Dialogflow+ abdul

31. วิธีการเชื่อมระหว่าง Dialogflow+ abdul

32. วิธีการเชื่อมระหว่าง Dialogflow+ abdul
บทความต่างๆ

33. เทคนิคต่างๆ

34. จากเทคนิคข้างบน เราสามารถนํามาใช้ได้หลายแบบ
Dialogflow + Abdul
Dialogflow + webhook + Abdul
Dialogflow + webhook
Line message api + Abdul

35. การรับส่งข้อมูลจาก dialogflow
ผ่าน webhook
เป็นข้อมูลแบบ JSON

36. การแกะ Package Json
<?php
header('Content-Type: application/json');
$json = file_get_contents('php://input');
$request = json_decode($json, true);
$myfile = fopen("log_json.txt", "w") or die("Unable to
open file!");
fwrite($myfile, $json);
fclose($myfile);
?>

39. $queryText = $request["queryResult"]["queryText"];
//message ที่ user พิมพ์มา
$action = $request["queryResult"]["action"]; //intent
$userId =
$request['originalDetectIntentRequest']['payload']['d
ata']['source']['userId']; // line user id

40. แชทบอท SOS หาโรงพยาบาลที่ใกล้ที่สุด
• รายชื่อรพ.ใกล้ที่สุด
5 อันดับ
• ที่อยู่ ระยะห่าง แผน
ที่ เบอร์โทร ค่ารถ
taxi
Line message
api + Abdul

42. แชทบอท Map หาสถานที่ทั่วไป
- แสดงแผนที่
- แสดงค่า taxi(ใน กทม.)
- แสดงระยะทาง
- แสดงข้อมูลสถานที่(ถ้ามี)
Abdul + API +wiki

43. แชทบอท SOS หาโรงพยาบาลที่ใกล้ที่สุด
ขั้นตอนการพัฒนาแชทบอท
O สร้างฐานข้อมูลโรงพยาบาลที่ประกอบไปด้วย ชื่อ ที่อยู่ เบอร์โทรศัทพ์ พิกัด
(ละติจูด ลองจิจูด)
O สร้าง function คํานวณค่า taxi
O สร้างแชทบอทที่เมื่อรับ event location แล้วนําพิกัดที่ได้มาคํานวณ
เปรียบเทียบกับฐานข้อมูลโรงพยาบาล โดยใช้สมการคํานวณ แล้วจึงนํารายชื่อ
โรงพยาบาลที่ใกล้ที่สุด 5 อันดับมาแสดง พร้อมคํานวณค่า taxi มาด้วย(แสดง
เฉพาะกรุงเทพและปริมณฑล)

44. สมการคํานวณระยะทาง กฏของ Spherical law of cosines:
R = earth’s radius (mean radius = 6,371km)
Δlat = lat2− lat1
Δlong = long2− long1
a = sin²(Δlat/2) +
cos(lat1).cos(lat2).sin²(Δlong/2)
c = 2.atan2(√a, √(1−a))
d = R.c
Lat1, Lon1 คือค่า latitude และ longtitud ของจุดแรก
Lat2, Lon2 คือค่า latitude และ longtitud ของจุดที่สอง
และ d คือระยะทางที่ได้มีหน่วยเป็นกิโลเมตร

45. SELECT id, (
6371 *
ACOS(COS(RADIANS($locationLatitude)) *
COS(RADIANS(lat)) *
COS(RADIANS(lng) -
RADIANS($locationLongitude)) +
SIN(RADIANS($locationLatitude)) *
SIN(RADIANS(lat )))
) AS distance ,
name,phone,lat,lng,name_e
FROM hospital
ORDER BY distance LIMIT 0, 5

46. สูตรคํานวณค่า taxi
$Minute = 10 ;
if($distance<= 1){
$Price = 35;
}else if($distance<=10){
$Price = 35 + ($distance-1)*5.5;
}else if($distance<=20){
$Price = 84.5 + ($distance-10)*6.5;
}else if($distance<=40){
$Price = 149.5 + ($distance-20)*7.5;
}else if($distance<=60){
$Price = 299.5 + ($distance-40)*8;
}else if($distance<=80){
$Price = 459.5 + ($distance-60)*9;
}else{
$Price = 639.5 + ($distance-80)*10.5;
}
$Charge = $Minute*2;
$Price1 = $Price + ceil(($Minute*2));
$taxi = " ค่าแท็กซี่ประมาณ ".ceil($Price)."-".ceil($Price1)." บาท";

47. Chatbot ทายภาพ

48. Chatbot ทายภาพ
หลักการทํางาน
เราจะใช้ Google cloud vision โดยจะส่ง URL ของภาพที่
ผู้ใช้งานส่งเข้ามาในแชทบอทของเรา เข้าไปใน Google cloud
vision แล้วเราจะได้ข้อมูลตอบกลับมาเป็น JSON เราก็แกะข้อมูล
JSON ส่งกลับมาให้ user โดย Google cloud vision
สามารถทายภาพสถานที่ว่าเป็นที่ไหน พร้อม Location ทายภาพ
บุคคล ถอด text ป้ายทะเบียนรถ หรือตัวหนังสือออกมาได้ โดยเรา
สามารถนํา text ที่ถอดได้มาใช้ google translate แปลง
กลับมาเป็นภาษาไทยได้

49. $strUrl = "https://vision.googleapis.com/v1/images:annotate?key=cloudvision_key";
$arrHeader = array();
$arrHeader[] = "Content-Type: application/json";
$objImgData = file_get_contents("https://example.com/image.jpg"); // image ที่จะส่ง
$objImgBase64 = base64_encode($objImgData);
$arrPostData = array();
$arrPostData['requests'][0]['image']['content'] = $objImgBase64;
$arrPostData['requests'][0]['features'][0]['type'] = "LABEL_DETECTION";
$arrPostData['requests'][0]['features'][0]['maxResults'] = "5";
$arrPostData['requests'][0]['features'][1]['type'] = "FACE_DETECTION";
$arrPostData['requests'][0]['features'][1]['maxResults'] = "5";
$arrPostData['requests'][0]['features'][2]['type'] = "TEXT_DETECTION";
$arrPostData['requests'][0]['features'][2]['maxResults'] = "5";
$arrPostData['requests'][0]['features'][3]['type'] = "LANDMARK_DETECTION";
$arrPostData['requests'][0]['features'][3]['maxResults'] = "5";
$arrPostData['requests'][0]['features'][4]['type'] = "LOGO_DETECTION";
$arrPostData['requests'][0]['features'][4]['maxResults'] = "5";
$arrPostData['requests'][0]['features'][5]['type'] = "IMAGE_PROPERTIES";
$arrPostData['requests'][0]['features'][5]['maxResults'] = "5";

50. $ch = curl_init();
curl_setopt($ch, CURLOPT_URL,$strUrl);
curl_setopt($ch, CURLOPT_HTTPHEADER, $arrHeader);
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($arrPostData));
curl_setopt($ch, CURLOPT_RETURNTRANSFER,true);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
$result = curl_exec($ch);
curl_close ($ch);
$request = json_decode($result, true);
$place = $request['responses'][0]['landmarkAnnotations'][0]['description'];
print $result;

52. "responses": [
{
"landmarkAnnotations": [
{
"mid": "/m/024tvh",
"description": "Wat Yai Chai Mongkhon",
"score": 0.69403875,
,
"locations": [
{
"latLng": {
"latitude": 14.397438,
"longitude": 100.524902
}

53. ],
"logoAnnotations": [
{
"description": "President
Kennedy",

54. words": [
{
"property": {
"detectedLanguages": [
{
"languageCode": "ja“
],
"text": "風林火山n"
}

55. แชทบอทแปลภาษา
พิมพ์ภาษาไหนมาก็จะรู้ เช่น พิมพ์ภาษาไทยมาว่า ฉันกําลังเดิน แชบอท
ก็จะแปลเป็นภาษาอังกฤษ ว่า I’m walking หรือพิมพ์ภาษาอังกฤษ
มาว่า I’m walking แชทบอทก็จะแปลเป็นภาษาไทยว่า ฉันกําลังเดิน
หลักการ ก็คือ ตรวจจับคําที่พิมพ์ ว่ามีอักษรภาษาใดอยู่ เช่น มีตัวอักษร
ภาษาไทย ก-ฮ หรือมีสระ วรรณยุกต์ ก็แสดงว่าเป็นภาษาไทย หรือมี
A-Z แสดงว่าเป็นภาษาอังกฤษ จากนั้นก็ใช้ library ของ
google translate ช่วยแปลให้

56. แชทบอทแปลภาษา
require_once "GoogleTranslate.php";
$word = $_REQUEST['word'];
$GT = NEW GoogleTranslate();
$word1 =preg_replace('/[[:space:]]+/', '', trim($word));
if(preg_match('/^[a-z]+$/i',$word1)){
$response = $GT->translate('en','th',$word1);
echo $response;
}else if(preg_replace("/[^ก-๙]+$/i",'',$word1)){
$response = $GT->translate('th','en',$word1);
echo $response;
}else {
$response = $GT->translate('ja','th',$word1);
echo $response;
}

57. Webhook Line Beacon
<?php
header('Content-Type: application/json');
$json = file_get_contents('php://input');
$request = json_decode($json, true);
$userId = $request['events'][0]['source']['userId'];
$Type = $request['events'][0]['beacon']['type'];
// type ของ beacon มี 2 type คือ enter และ leave

58. Webhook Line Beacon
if ($Type = 'enter') {
// เมื่อพบ user จะให้ทําอะไร
// push message
}else{
// เมื่อ use ออกจากพื้นที่ จะให้ทําอะไร
// push message
}

59. ตัวอย่าง LINE CHATBOT
BMI(BODY MASS INDEX)
หรือดัชนีมวลกาย
พัฒนาจาก Dialogflow + webhook php

60. Dialog flow BMI

62. Dialog flow BMI
INTENT BMI

65. Dialog flow BMI
INTENT BMI-CUSTOM

66. Dialog flow BMI

68. Dialogflow BMI
INTENT BMI-CUSTOM-YES

70. Dialog flow BMI

71. Dialogflow BMI
Fulfillment webhook

73. Json
Dialogflow

74. Json
Dialogflow

75. Dialogflow BMI
Webhook

76. Json Dialogflow Webhook
$json = file_get_contents('php://input');
$request = json_decode($json, true);
$queryText = $request["queryResult"]["queryText"];
$action = $request["queryResult"]["action"];
$userId =
$request['originalDetectIntentRequest']['payload']['data']['source']['userId'];
switch ($action) {
case "BMI.BMI-custom.BMI-custom-yes":
$h = $request["queryResult"]["parameters"]["height"];
$w = $request["queryResult"]["parameters"]["weight"];
$height=$h/100;
$bmi= round($w/($height*$height),2);

77. Json Dialogflow Webhook
if($bmi<=18.50){
$bmi= "ดัชนีมวลกายของคุณ คือ ".$bmi." คุณอยู่ในเกณฑ์ นํ้าหนักน้อย / ผอม โดยค่ามาตราฐานอยู่ที่ 18.5-22.9
ควรรับประทานอาหารให้มากขึ้น ทานให้ครบ 5 หมู่ และหมั่นออกกําลังกาย";
}else if($bmi>18.50 && $bmi<22.90){
$bmi= "ดัชนีมวลกายของคุณคือ ".$bmi." คุณอยู่ในเกณฑ์ปกติ (สุขภาพดี) โดยค่ามาตราฐานอยู่ที่ 18.5-22.9 ดีใจ
ด้วยครับสุขภาพคุณดีมากเลยครับ ";
}else if($bmi>23 && $bmi<24.90){
$bmi ="ดัชนีมวลกายของคุณคือ ".$bmi." คุณอยู่ในเกณฑ์ท้วม / โรคอ้วนระดับ 1 โดยค่ามาตรฐานอยู่ที่ 18.5-22.9 คุณ
ควรออกกําลังกายให้สมํ่าเสมอนะครับ เลือกทานอาหารที่มีไขมันน้อยๆ ";
}else if($bmi>25 && $bmi<29.90){
$bmi="ดัชนีมวลกายของคุณคือ ".$bmi." คุณอยู่ในเกณฑ์อ้วน / โรคอ้วนระดับ 2 โดยค่ามาตรฐานอยู่ที่ 18.5-22.9
คําแนะนํา 1. ควรควบคุมอาหารโดยลดปริมาณอาหาร 2.เคลื่อนไหวและออกกําลังกายอย่างสมํ่าเสมอ 3.ปรึกษาแพทย์ ";
}else if($bmi>30){
$bmi="ดัชนีมวลกายของคุณคือ ".$bmi." คุณอยู่ในเกณฑ์อ้วนมาก / โรคอ้วนระดับ 3 โดยค่ามาตรฐานอยู่ที่ 18.5-22.9
คุณควรพบแพทย์เพื่อขอคําปรึกษาเรื่องสุขภาพด่วนนะครับ ช่วงนี้ควรจํากัดอาหาร และออกกําลังกายให้มากๆ นะครับ";
}

78. Json Dialogflow Webhook
$curl = curl_init();
curl_setopt_array($curl, array( CURLOPT_URL =>
"https://api.line.me/v2/bot/message/push", CURLOPT_SSL_VERIFYPEER =>
false, CURLOPT_RETURNTRANSFER => true, CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10, CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "POST", CURLOPT_POSTFIELDS =>
"{rnrn "to": "$userId",rnrn "messages": [{rnrn "type":
"text",rnrn "text": "$bmi "rnrn }]rnrn}",
CURLOPT_HTTPHEADER => array( "authorization: Bearer line_token=",
"cache-control: no-cache",
"content-type: application/json",
"postman-token: 7f766920-b207-53c4-6059-6d20ceec77ea" ),
));
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);

79. หน้าจอ line chatbot BMI
Dialogflow + webhook

80. - จบแล้วครับ ขอบคุณครับ-