Create LINE Chatbot to extract audio files in Thai with Google Speech-to-Text API

ใน Codelab นี้คุณจะได้เรียนรู้การสร้าง LINE Chatbot ร่วมกับการใช้ Google Speech-to-Text API เพื่อให้ Chatbot รับคำสั่งด้วยเสียงจากผู้ใช้ (ภาษาไทย)และใช้ Google Speech-to-Text API ในการแกะข้อความออกมาจากไฟล์เสียงที่ได้รับ

Google Speech-to-Text API ตัวนี้เป็น Cloud Service ของ Google ที่รองรับไฟล์เสียงมากถึง 125 ภาษาซึ่งเราจะส่งเป็น Local file หรือจะเอาไฟล์ขึ้น Cloud Storage เพื่อทำการประมวลผลก็ได้ โดยเราจะต้องทำการแปลงไฟล์ให้เป็น .wav ก่อนด้วย ZAMZAR API

สิ่งที่คุณจะได้เรียนรู้

การสร้าง LINE Chatbot
การสร้างโปรเจคใน Firebase
การติดตั้ง Firebase CLI และ Cloud Functions for Firebase
จัดการ Webhook โดยใช้ Cloud Functions
เรียกใช้งาน Google Speech-to-Text และ ZAMZAR API เพื่อใช้ในการประมวลผล

สิ่งที่คุณต้องเตรียมพร้อมก่อนเริ่ม Codelab

แอปพลิเคชัน LINE (สมาร์ทโฟน) ที่ Sign in พร้อมใช้งาน
บัญชี Google เช่น Gmail
Web browser (Desktop หรือ Mobile)
IDE หรือ Text Editor เช่น VS Code, Sublime หรือ Atom
Terminal สำหรับการ Run คำสั่งต่างๆ

สร้าง LINE Official Account

จุดเริ่มต้นของการพัฒนา LINE Chatbot คือคุณจะต้องสร้าง LINE OA(LINE Official Account) และเปิดใช้งาน Messaging API

เข้าไปที่ https://manager.line.biz แล้วเลือก Log in with LINE account(สีเขียว) เพื่อเข้าสู่ระบบ

เข้าสู่ระบบด้วยบัญชี LINE ของคุณให้เรียบร้อย
กดสร้าง LINE OA จากปุ่ม Create LINE official account สำหรับผู้ทีสร้าง LINE OA ครั้งแรก หรือกด Create new ทางด้านซ้ายสำหรับผู้ที่เคยสร้าง LINE OA แล้ว

ให้ระบุข้อมูลต่างๆลงไปในฟอร์ม แล้วกด ตกลง

จากนั้นให้ยืนยันรายละเอียดในการสร้าง LINE OA เป็นอันเสร็จสิ้น

เปิดใช้งาน Messaging API

หลังจากที่เรามี LINE OA เรียบร้อยแล้ว ขั้นตอนนี้จะพาทุกคนไปเพิ่มความสามารถให้ LINE OA ของเรากลายเป็น LINE Chatbot ได้

เข้าไปที่ https://manager.line.biz ในกรณีที่เรามีบัญชี LINE OA ที่สร้างไว้แล้ว หน้านี้จะแสดงบัญชี LINE OA ต่างๆที่เรามี ก็ให้เรากดเลือกบัญชี LINE OA ที่เราต้องการ

ให้เราไปทีเมนู Settings > Messaging API แล้วให้กดปุ่ม Enable Messaging API

หากเป็นการ Enable Messaging API ครั้งแรกของบัญชี LINE Business ID จะเจอหน้าให้ลงทะเบียน Developer info ก็ให้กรอก ชื่อ และ อีเมล

จากนั้นให้สร้าง Provider ใหม่ หรือเลือก Provider เดิมกรณีที่เคยสร้างไปแล้ว

ระบุ URL ของ Privacy Policy และ Terms of Use (ถ้ามี) หากยังไม่มีก็สามารถกดปุ่ม ok ข้ามไปได้

ยืนยันการเปิดใช้งาน Messaging API ด้วยการกด Ok

เมื่อเจอหน้านี้ ก็แปลว่าคุณได้เปิดใช้งาน Messaging API ให้กับบัญชี LINE OA เรียบร้อยแล้ว

เพิ่ม Chatbot เป็นเพื่อนและตั้งค่า Channel

ขั้นตอนนี้เราจะเข้าไปใช้งาน LINE Developers Console ซึ่งเป็นเว็บไซต์สำหรับการบริหารจัดการ LINE Chatbot(LINE OA ที่เปิดใช้งาน Messaging API แล้ว) ในส่วนของนักพัฒนา

เข้าไปที่ https://developers.line.biz/console/
ให้กดเลือก Provider ที่ต้องการ

เราจะพบกับบัญชี LINE OA ที่เราได้เปิดใช้งาน Messaging API ไว้ ซึ่งในที่นี้เราจะเรียกมันว่า Channel(Channel จะเปรียบเสมือน Chatbot หรือ App) ก็ให้กดเลือก Channel ที่ต้องการ

ให้ไปที่ Tab ชื่อ Messaging API และทำการแสกน QR code ด้วยแอป LINE เพื่อเพิ่ม Chatbot เป็นเพื่อน

ให้ปิด Auto-reply messages เนื่องจากฟีเจอร์นี้จะเป็น default การตอบกลับของ Chatbot ซึ่งไม่จำเป็นต้องใช้ฟีเจอร์นี้

กลับมาที่ Channel ที่เราสร้างใน Tab ชื่อ Messaging API ตรงส่วนของ Channel access token ให้กดปุ่ม Issue

ก่อนจะไปเริ่มพัฒนาเราต้องการ API Key เพื่อเอาไว้เข้าใช้งาน ZAMZAR API ก่อน อันดับแรกสุดให้ไป Sign up สมัครเข้าใช้งานที่ https://developers.zamzar.com/signup?plan=test

พอสมัครเรียบร้อยแล้วให้ทำการ Login และให้เราไปที่ Your Account > Account Details เพื่อทำการ Copy API Key เอาไว้ใช้เรียก API โดยมี Free tier ในการแปลงเดือนละ 100 ไฟล์

เบื้องหลังของ Chatbot ตัวนี้ เราจะใช้บริการ Cloud Functions for Firebaseในการจัดการ Webhook

สร้างโปรเจคใน Firebase

ให้ Sign in ใน Firebase console ด้วย Google account
ในหน้า Firebase console ให้คลิก Add project จากนั้นตั้งชื่อโปรเจคตามต้องการ

เมื่อกด Continue แล้วให้ข้ามการตั้งค่า Google Analytics ไป เพราะคุณจะไม่ได้ใช้มันในโปรเจคนี้

เปลี่ยนแพลนจาก Spark ไปเป็น Blaze (Pay as you go)

เนื่องจาก Cloud Functions for Firebase มีเงื่อนไขว่า หากต้องการไป request ตัว APIs ที่อยู่ภายนอก Google คุณจำเป็นจะต้องใช้ Blaze plan(เราจะต้องไปเรียก Messaging API ของ LINE)

หลังจากสร้าง Firebase Project เสร็จแล้วเราจะได้ Project ใน Google Cloud Platform ด้วยให้เราไปทำการเปิดใช้งาน Speech-to-Text ที่นี่ https://console.cloud.google.com/apis/library/speech.googleapis.com
กดปุ่ม Enable เพื่อเปิดใช้งาน

การติดตั้ง Firebase CLI

Firebase CLI เป็นเครื่องมือที่จำเป็นสำหรับการ deploy ตัวฟังก์ชันที่เราพัฒนาขึ้น อีกทั้งยังสามารถจำลองการทำงานฟังก์ชัน(Emulate) ภายในเครื่องที่เราพัฒนาอยู่(Locally) ได้

เปิด Terminal ขึ้นมาแล้ว run คำสั่ง

npm install -g firebase-tools

ตรวจสอบว่า Firebase CLI ได้ติดตั้งเรียบร้อยแล้วโดย run คำสั่ง (หากสำเร็จจะเห็นเลขเวอร์ชัน)

firebase --version

Initialize โปรเจค

รันคำสั่งนี้ จากนั้นตัว browser จะเปิดขึ้นมาให้เราเข้าสู้ระบบด้วย Google account เดียวกันกับที่สร้างโปรดจคใน Firebase

firebase login

สร้างโฟลเดอร์เปล่า(ตัวอย่างโฟลเดอร์ชื่อ bot) แล้วให้ shell เข้าไปในนั้น

mkdir speechToTextBot
cd speechToTextBot

เมื่อเข้ามาในโฟลเดอร์แล้ว ให้ Initial โปรเจคด้วยคำสั่ง

firebase init functions

เลือก Use an existing project จากนั้นจะเห็นเชื่อโปรเจคที่เราสร้างไว้ ให้เลือก speech-to-text-chatbot และทำการกด enter

ถัดไปจะมีตัวเลือกภาษา 2 ตัวคือ JavaScript และ TypeScript โดยตัวอย่างนี้ให้เลือก JavaScript
จากนั้นมันจะถามว่าจะให้ติดตั้ง ESLint ไหม ตรงนี้แนะนำให้ตอบ N ไปก่อน(สำหรับมือใหม่)
สุดท้ายมันจะถามว่าจะให้ติดตั้ง dependencies เลยไหมก็ให้ตอบว่า Y ไป

เพิ่ม Dependencies ที่จำเป็นสำหรับโปรเจคนี้

เปิดไฟล์ package.json ขี้นมา
เพิ่ม dependency ชื่อ axios และ openai เข้าไปครับ

"dependencies": {
    "axios": "^1.3.6",
    "firebase-admin": "^11.7.0",
    "firebase-functions": "^4.3.1","@google-cloud/speech": "^5.1.0"
}

ในโฟลเดอร์ที่เราสร้างมา ให้เรา shell เข้าไปต่อในโฟลเดอร์ชื่อ functions จากนั้นสั่ง Install ตัว dependencies ที่เพิ่มเข้ามาใหม่ใน terminal ด้วยคำสั่ง

npm install

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

const functions = require("firebase-functions");
const axios = require('axios');
const FormData = require('form-data');
const speech = require('@google-cloud/speech');

// สำหรับจัดการไฟล์
const path = require("path");
const os = require("os");
const fs = require("fs");

// Instantiates a client
const client = new speech.SpeechClient();

// LINE API
const LINE_MESSAGING_API = "https://api.line.me/v2/bot";
const LINE_CONTENT_API = "https://api-data.line.me/v2/bot/message";
const LINE_HEADER = {
    "Content-Type": "application/json",
    Authorization: "Bearer XXXXX"
};

// ZAMZAR API สำหรับแปลงไฟล์เสียงเป็น .wav
const ZAMZAR_API_KEY = "YYYYYYYY";
const ZAMZAR_CREATE_JOB_API = "https://api.zamzar.com/v1/jobs";
const ZAMZAR_DOWNLOAD_API = "https://api.zamzar.com/v1/files";
const ZAMZAR_HEADER = {
    "Content-Type": "multipart/form-data"
};

โดย ZAMZAR API หลักๆที่เราจะเรียกใช้เพื่อแปลงไฟล์จะมีอยู่ทั้งหมด 3 ตัวด้วยกันได้แก่

Starting a job for a local file เป็น POST API ที่ให้เราส่งไฟล์จากเครื่องเพื่อทำการแปลง (แต่ API ตัวนี้จะยังไม่คืนไฟล์ผลลัพธ์กลับมาทันที)
Retrieving a job เป็น GET API ที่ให้เราตรวจสอบสถานะของการแปลงไฟล์ (Job ข้อที่ 1)
Retrieving the content of a file เป็น GET API ที่ให้เราทำการ Download ไฟล์ผลลัพธ์ที่เราต้องการ

โดยวิธีการพัฒนาให้มาที่ไฟล์เดิม index.js และสร้างฟังก์ชันตาม code ด้านล่างนี้

const createConvertJobToWAV = async (audioLocalFile) => {
    var bodyFormData = new FormData();
    bodyFormData.append('target_format', 'wav');
    bodyFormData.append('source_file', fs.createReadStream(audioLocalFile));

    return await axios({
        method: "post",
        url: ZAMZAR_CREATE_JOB_API,
        headers: ZAMZAR_HEADER,
        data: bodyFormData,
            auth: {
            username: ZAMZAR_API_KEY
        }
    });
}

const isConvertJobSuccess = async (jobId) => {
    return await axios({
        method: "get",
        url: `${ZAMZAR_CREATE_JOB_API}/${jobId}`,
        auth: {
            username: ZAMZAR_API_KEY
        }
    });
}

const downloadWAVFile = async (targetFileId) => {
    return await axios({
        method: "get",
        url: `${ZAMZAR_DOWNLOAD_API}/${targetFileId}/content`, responseType: "arraybuffer", auth: {
                username: ZAMZAR_API_KEY
            }
        });
}

const convertAndDownloadWAVFile = async (m4aLocalFile) => {
    const resultFromConvertFile = await createConvertJobToWAV(m4aLocalFile);

    // เนื่องจาการแปลงไฟล์จะเป็น Job ซึ่งมันจะไม่คืนผลลัพธ์กลับมาในทันที เราเลยต้องทำการ
    // Sleep Chatbot เราประมาน 5 วิ ก่อนที่จะไปดึงผลลัพธ์ได้
    await new Promise(r => setTimeout(r, 5000));

    const resultFromChecking = await isConvertJobSuccess(resultFromConvertFile.data.id);
    return await downloadWAVFile(resultFromChecking.data.target_files[0].id);
}

สร้างฟังก์ชันชื่อ transcribeSpeech() เพื่อไปเรียกใช้ Google Cloud Speech-to-Text โดยเราจะส่งไฟล์ .wav ที่ได้จากการแปลงในข้อก่อนหน้าเข้าไป ส่วน languageCode จะเลือกเป็น th-TH (หรือถ้าต้องการใช้ภาษาอื่นดูได้ที่นี่)

const transcribeSpeech = async (wavFilename) => {
    const audio = {
        content: fs.readFileSync(wavFilename).toString('base64'),
     };

     // The audio file's encoding, sample rate in hertz, and BCP-47 language code
    const config = {
        encoding: 'LINEAR16',
        sampleRateHertz: 16000,
        languageCode: 'th-TH',
    };

    const request = {
        audio: audio,
        config: config,
    };

    // Detects speech in the audio file
    const [response] = await client.recognize(request);
    const transcription = await response.results.map(result => result.alternatives[0].transcript).join('\n');
    console.log('Result: ', JSON.stringify(response.results));
    return transcription;
}

สุดท้ายให้เราสร้างฟังก์ชันชื่อ LineWebhook() และ reply() เพื่อรับ Webhook event ที่ถูกส่งมาจากไลน์ โดยเราจะสนใจเฉพาะกรณีที่ผู้ใช้ส่งไฟล์เสียงเข้ามา ประมวลผลต่างๆและทำการส่งผลลัพธ์กลับไปหาผู้ใช้

exports.LineWebhook = functions.https.onRequest(async (req, res) => {
    if (req.method === "POST") {
        
        const events = req.body.events;
        for (const event of events) {
           if (event.type === 'message' && event.message.type === 'audio') {
            // ดึงไฟล์เสียงของผู้ใช้ที่ส่งมาจาก LINE
            const url = `${LINE_CONTENT_API}/${event.message.id}/content`;
            const audioFile = await axios({
                method: "get",
                headers: LINE_HEADER,
                url: url,
                responseType: "arraybuffer"
            });

            // เซฟไฟล์เสียงของผู้ใช้ลงเครื่อง เนื่องจากเป็น iOS เลยได้ .m4a
            const filenameTimestamp = event.timestamp;
            const m4aLocalFile = path.join(os.tmpdir(), filenameTimestamp + ".m4a");
            fs.writeFileSync(m4aLocalFile, audioFile.data);

            // ทำการแปลงไฟล์เสียงจาก .m4a เป็น .wav
            const wavFile = await convertAndDownloadWAVFile(m4aLocalFile);

            // เซฟไฟล์เสียงที่เป็น .wav ลงเครื่อง
            const wavLocalFile = path.join(os.tmpdir(), filenameTimestamp + ".wav");
            fs.writeFileSync(wavLocalFile, wavFile.data);

            // เรียกใช้ Google Speech-to-text API
            const resultText = await transcribeSpeech(wavLocalFile);
            await reply(event.replyToken,
              [{
                "type": "sticker",
                "packageId": "6359",
                "stickerId": "11069861"
              },
              {
                "type": "text",
                "text": "Speech-to-text Result: " + resultText
              }]
            );
          }
       }
    }
    return res.end();
})

const reply = async (replyToken, payload) => {
    await axios({
        method: "post",
        url: `${LINE_MESSAGING_API}/message/reply`,
        headers: LINE_HEADER,
        data: JSON.stringify({
            replyToken: replyToken,
            messages: payload
        })
     });
};

เมื่อทุกอย่างพร้อมแล้ว ก็ deploy ฟังก์ชันผ่าน terminal ด้วยคำสั่ง

firebase deploy --only functions

ให้เอา URL /LineWebhook ไปใส่ใน LINE Developer Console

ผลลัพธ์

ยินดีด้วย! ถึงตรงนี้คุณก็มี LINE Chatbot เพื่อแกะไฟล์เสียง Speech-to-text เป็นของคุณเองแล้ว!!!

สิ่งที่คุณได้เรียนรู้ใน Codelab นี้

✅ การสร้าง LINE Chatbot
✅ การสร้างโปรเจคใน Firebase
✅ การติดตั้ง Firebase CLI และ Cloud Functions for Firebase
✅ จัดการ Webhook โดยใช้ Cloud Functions
✅ เรียกใช้งาน Google Speech-to-Text และ ZAMZAR API เพื่อใช้ในการประมวลผล

เรียนรู้เพิ่มเติม

Reference docs

บอกเราหน่อยว่า Codelab ชุดนี้เป็นอย่างไรบ้าง

Feedback form