เที่ยวทิพย์ง่ายๆ แค่ส่งรูปให้ LINE Chatbot ก็วาร์ปไปได้ทั่วโลก!

สวัสดีครับ ช่วงนี้ก็ยังเดินทางไปท่องเที่ยวไม่ได้เนอะ ทำให้เทรนด์การ #เที่ยวทิพย์ กลายเป็นหนึ่งในกิจกรรมสุดฮิตของชาวโซเชียล เห็นเพื่อนๆหลายคนก็ขุดรูปที่เคยไปเที่ยวที่ต่างๆมาโพสต์กัน แต่วันนี้ผมจะพาทุกคนไปเที่ยวทิพย์ชนิดที่ว่าวาร์ปไปที่ไหนก็ได้ในโลกผ่าน LINE Chatbot กันครับ!

API พาเที่ยวทิพย์

Remove bg เป็นเว็บไซต์ที่ให้บริการตัดฉากหลัง (Background) ออกจากตัวแบบ ซึ่งเราสามารถอัพโหลดรูปบุคคล, สัตว์ หรือสิ่งของก็ได้ ตัวระบบก็เมพสุดๆสามารถตัดได้เนียนกริ๊บ (เข้าใจว่ามี AI ด้วย) เจ๋งมากๆครับ ที่สำคัญเค้าให้บริการผ่าน API ด้วย

Unsplash เว็บไซต์สำหรับดึงรูปสวยๆจากตากล้องเทพๆที่ใจดีให้เราใช้ได้แบบฟรีๆ (License แบบ Creative Commons Zero) จริงๆเว็ปหารูปสวยๆมีเยอะ แต่ส่วนตัวผมชอบ Unsplash เป็นพิเศษ แถมดึงรูปได้ผ่าน API อีก สวยยวดไปเลย!

Requirement

วิธีการเที่ยวทิพย์ของเราก็คือเราจะมี Steps ประมาณนี้

• สร้าง LINE Chatbot ไว้รับรูปของเรา (จะเป็นรูป Selfie ง่ายๆหรือจะใส่เสื้อหนาวจัดเต็มก็ได้ แต่ให้เห็นตัวแบบชัดๆ) 😎
• จากนั้นเรียก Unsplash API เพื่อดึงรูปสถานที่ท่องเที่ยวที่เราอยากจะไป 🏞 🗽
• และสุดท้ายเรียกใช้ Remove bg API ในการตัดฉากหลังของรูปเราและเอารูปสถานที่ท่องเที่ยวมาใส่แทน 😎 🏞🗽

ขั้นตอนการพัฒนา

ผมเลือกใช้ Cloud Functions for Firebaseในการจัดการ Webhook และฝากรูปทั้งหมดไว้ที่ Cloud Storage for Firebase ขั้นตอนหลักๆจะมีดังนี้ครับ

1. สร้าง LINE Chatbot ด้วย Cloud Functions
2. เปิดใช้งาน Cloud Storage for Firebase
3. สมัครเข้าใช้งาน Remove bg API
4. พัฒนาระบบอัพโหลดรูปขึ้น Cloud Storage for Firebase
5. จัดการ Webhook, เรียกใช้ Remove bg กับ Unsplash API และส่งผลลัพธ์กลับไปหาผู้ใช้

1. สร้าง LINE Chatbot ด้วย Cloud Functions

สำหรับใครที่ยังไม่เคยพัฒนา LINE Chatbot ด้วย Cloud Functions for Firebase ให้ทำตามขั้นตอนของบทความนี้ (ข้อ 1 และ 2 ก็พอครับ)

2. เปิดใช้งาน Cloud Storage for Firebase

2.1 ในหน้าโปรเจค Firebase ไปที่เมนูชื่อ Storage ที่อยู่ทางซ้ายมือและกดปุ่ม Get started

2.2 Popup ของ Default ของ Security Rules จะแสดงขึ้นมา แล้วก็ให้เรากด Next ไป

2.3 เลือก Location ของ Cloud Storage ที่ต้องการ แล้วกด Done

3. สมัครเข้าใช้งาน Remove bg API

ทำการ Sign up ได้ที่นี่โดยจะมีฟรีเครดิตให้สามารถเรียกใช้ API ได้ 50 ครั้งต่อเดือน

เมื่อ Sign up เรียบร้อยแล้วให้ทำการสร้าง API Key เก็บไว้ เพื่อใช้ในการเรียก API

4. พัฒนาระบบอัพโหลดรูปขึ้น Cloud Storage for Firebase

ในโฟลเดอร์ functions ของโปรเจคที่เราได้เตรียมไว้(ขั้นตอนที่ 1) ให้เปิดไฟล์ package.json ขึ้นมา แล้วเพิ่ม dependency ชื่อ axios และ uuid-v4 เข้าไปครับ

"dependencies": {
   "firebase-admin": "^9.9.0",
   "firebase-functions": "^3.14.1",
   "axios": "^0.21.1",
   "uuid-v4": "^0.1.0"
}

จากนั้นให้เปิดไฟล์ index.js ขึ้นมา แล้ว import dependencies ต่างๆที่ต้องใช้

const functions = require('firebase-functions')
// สำหรับการเข้าถึง Cloud Storage
const admin = require("firebase-admin");
admin.initializeApp();
// สำหรับ network requests
const axios = require('axios');
// สำหรับสร้าง public url ใน Cloud Storage
const UUID = require("uuid-v4");
// สำหรับจัดการไฟล์
const path = require("path");
const os = require("os");
const fs = require("fs");

ต่อมาก็สร้างฟังก์ชัน uploadImage() โดยฟังก์ชันนี้จะทำหน้าที่ในการอัพโหลดรูปไปยัง Cloud Storage for Firebase บริการฝากไฟล์ที่ให้พื้นที่ฟรีๆถึง 5 GB แน่ะ

const uploadImage = async (event, imgLocalFile, filename) => {
   const uuid = UUID();
   const bucket = admin.storage().bucket();
   const file = await bucket.upload(imgLocalFile, {
      // กำหนด path ในการเก็บไฟล์แยกเป็นแต่ละ userId
      destination: `photos/${event.source.userId}/${filename}`,
      metadata: {
         cacheControl: 'no-cache',
         metadata: {
            firebaseStorageDownloadTokens: uuid
         }
      }
   });
const prefix = `https://firebasestorage.googleapis.com/v0/b/${bucket.name}/o`;
   const suffix = `alt=media&token=${uuid}`;
   
   // ส่งคืนค่า public url ของรูปออกไป   
   return `${prefix}/${encodeURIComponent(file[0].name)}?${suffix}`;
};

5. จัดการ Webhook, เรียกใช้ Remove bg กับ Unsplash API และส่งผลลัพธ์กลับไปหาผู้ใช้

ในไฟล์ index.js ให้เราสร้างฟังก์ชันใหม่ชื่อ LineWebhook() เพื่อรับ Webhook event ที่ถูกส่งออกมาจากไลน์ ซึ่งเราจะสนใจเฉพาะกรณีที่ผู้ใช้อัพโหลดรูปเข้ามาเท่านั้น

const LINE_MESSAGING_API = "https://api.line.me/v2/bot";
const LINE_CONTENT_API = "https://api-data.line.me/v2/bot/message";
const UNSPLASH_API = "https://source.unsplash.com/1600x900/?";
const REMOVE_BG_API = "https://api.remove.bg/v1.0/removebg";
// เมืองท่องเที่ยวชื่อดังที่เราอยากจะไปเที่ยวทิพย์
const CITIES = ["Paris", "London", "Newyork", "Tokyo", "Osaka", "Seoul", "Taipei", "Bangkok"]
const LINE_HEADER = {
   "Content-Type": "application/json",
   Authorization: "Bearer xxxxx"
};
exports.LineWebhook = functions.https.onRequest(async (req, res) =>{
   const event = req.body.events[0];
   if (event.type === 'message' && event.message.type === 'image') {
      const city = randomItem(CITIES);
      const url = await uploadAndProcessImg(event, city);
      await reply(event.replyToken, city,
         {
            type: "image",
            originalContentUrl: url,
            previewImageUrl: url
         });
   }
   return res.end();
});
function randomItem(items) {
   return items[Math.floor(Math.random() * items.length)];
}

ถัดไปให้เราสร้างฟังก์ชันชื่อ uploadAndProcessImg() เพื่อใช้ในการดึงรูปของผู้ใช้ที่ส่งมาจาก LINE, เรียก Remove bg และ Unsplash API รวมไปถึงจัดการอัพโหลดรูปไปยัง Cloud Storage ด้วย

สุดท้ายก็สร้างฟังก์ชัน reply() เพื่อส่งรูปเที่ยวทิพย์กลับไปยังห้องแชท (โค้ดของไฟล์ index.js ทั้งหมดสามารถดูได้ที่นี่ครับผม)

const reply = async (replyToken, city, payload) => {
   axios({
      method: "post",
      url: `${LINE_MESSAGING_API}/message/reply`,
      headers: LINE_HEADER,
      data: JSON.stringify({
         replyToken: replyToken,
         messages: [{
            type: "text",
            text: "#เที่ยวทิพย์ Let's go to " + city
         }, payload]
      })
   });
};

จากนั้นก็สามารถทำการ Deploy ได้เบยยย

firebase deploy --only functions

เมื่อ Deploy เรียบร้อยแล้วให้เอา URL ที่มี /LineWebhook กลับไปใส่ใน LINE Developer Console ด้วยนะครับ เท่านี้ก็เป็นอันเสร็จ!

ทดสอบ

จะเที่ยวทิพย์คนเดียว หรือไปเป็นหมู่คณะก็สามารถ!

สรุป

ความอยากเที่ยวก็ทำให้เกิดไอเดียแปลกๆได้เหมือนกันเนอะ 555+ ต้องยอมรับเลยว่าตัว Remove bg API มันเมพมากจริงๆ อ้อ เสริมวิธีการทำงานกับเรื่องค่าใช้จ่ายให้อีกนิด

• Remove bg รองรับไฟล์ JPG และ PNG ที่มีตัวแบบเด่นออกมาจากฉากหลัง รูปที่เค้าแนะนำคือตัวแบบชัดไม่เบลอ, รูปไม่มืดเกินไป, มี Contrast ระหว่างตัวแบบกับฉากหลัง (ถ้าฉากหลังเรียบๆได้ก็ยิ่งดี) etc. อ่าน Spec รูปเพิ่มเติมได้ที่นี่ครับ
• ที่ให้เรียก API ได้ฟรี 50 ครั้ง/เดือน มันจะเป็นรูปขนาด Preview นะครับ (ภาพขนาดเล็กที่มีความละเอียด 25% จากภาพต้นฉบับ)
• หลังจากที่เราใช้จนหมด 50 ครั้งมันจะไปกินโควต้า Credit แทนโดย 1 รูปชนิด Preview จะใช้ 0.25 Credit เริ่มต้นเค้าก็จะมีฟรีมาให้ 1 Credit (น้อยจุง)
• ถ้าหมดอีกก็ต้องซื้อเป็น Credit เพิ่ม (ราคาแรงงงพอควร)
• หรือถ้าใครอยากได้รูปขนาดต้นฉบับ Original เลยตอนที่เรียก API ให้ระบุ size: “full” ซึ่งจะใช้ 1 Credit เต็มๆ

ประมาณนี้นะครับ หวังว่าบทความนี้จะทำให้นักพัฒนาสนุกและได้ไอเดียกลับบ้านไปต่อยอดพัฒนาบริการดีๆและแปลกใหม่โดยใช้ LINE API ถ้าถูกใจฝาก Follow ช่อง Publication ของเรา LINE Developers Thailand ด้วยนะครับบบ 😇