Bot Kosakata Bahasa Inggris dengan Cloud API yang Berbasis Machine Learning

Seorang siswa SMP yang baru saja menyelesaikan ujian tengah semester, mendapat nilai yang jelek untuk mata pelajaran bahasa Inggris. Ia berkata pada dirinya sendiri “Pada akhirnya, hambatan bahasa akan terselesaikan oleh teknologi, ya. Jadi tidak perlu belajar.” setelah mengatakan itu, untuk menyambut ujian akhir semester, ia memutuskan untuk membuat Bot kosakata bahasa Inggris.

Namun, tidak akan digunakan kalau nampaknya memakan waktu untuk mendaftarkan kosakata bahasa Inggris, jadi kali ini kami akan membuat Bot yang bisa melakukan pendaftaran kata-kata bahasa Inggris, penerjemahan Jepang, konfirmasi pelafalan hanya dengan memotret halaman buku pelajaran dengan smartphone dan mengirimkannya ke Bot Anda.

Maka, Bot yang dibuat menggunakan LINE Bot, Cloud API (Cloud Vision API dan Cloud Text-to-Speech API) dan Google Apps Script, seperti ilustrasi di bawah ini.

Cloud API adalah salah satu service yang ditawarkan oleh Google Cloud Platform (GCP) dan setiap fitur GCP bisa digunakan dengan mudah.

Kali ini, kami akan menggunakan Cloud Vision API dan Cloud Text-to-Speech API.

Language App dari Google App Script (GAS) digunakan.

Google App Script (yang disingkat menjadi GAS) merupakan scripting framework yang disediakan oleh Google yang memungkinkan Anda untuk mengoperasikan berbagai layanan Google yang berbasis kode JavaScript.

Jadi, Bot kosakata bahasa Inggris ini akan bisa dijalankan apabila terdapat 4 fungsi seperti di bawah ini.

  1. Fungsi untuk Membuat Pertanyaan

2. Fungsi Pertanyaan


3. Fungsi Audio Playback

4. Fungsi Jawaban

Selanjutnya kami akan melanjutkan ke pembahasan implementasi dari keempat langkah di bawah ini.

1. Membuat LINE Bot dengan GAS

2. Ekstraksi kosakata bahasa Inggris di Cloud Vision API

3. Menerjemahkan kosakata bahasa Inggris kemudian menyimpannya di Spreadsheet

4. Memperoleh data audio dengan Cloud Text-to-Speech API

5. Mengimplementasi setiap fungsi Bot kosakata Bahasa Inggris

1. Membuat LINE Bot dengan GAS

GAS yang digunakan saat ini adalah framework yang sangat cocok untuk pengembangan Bot.

Ia memiliki afinitas tinggi dari layanan Google lainnya, dan tidak perlu menyiapkan server untuk Bot, atau Anda juga bisa menggunakan spreadsheet sebagai basis data sederhana.

Pertama, kami akan menjelaskan mengenai pengaturan LINE Bot

1.1. Pengaturan LINE Developers

LINE Bot dikembangkan menggunakan LINE Messaging API.

Kemudian, di LINE Developers, atur informasi yang diperlukan seperti nama bot dan gambar ikon, dan cobalah untuk membuat channel baru. ChannelID dan token yang diperlukan untuk menggunakan LINE Messaging API.

Login dahulu ke LINE Developers, kemudian klik “Buat Channel Baru

Kali ini pilih bagian yang tengah karena saat ini yang digunakan adalah Messaging API.

Daftarkan informasi apa saja yang diperlukan.

Setelah menyetujui semua ketentuan dari LINE, buat channel dan terbitkan token.

Ubah pengaturan transmisi Webhook ke "Gunakan".

Ubah pengaturan automatic reply menjadi “Jangan gunakan”. Sampai disini, pengaturan LINE Developers sudah selesai.

1.2. Meng-coding di GAS

Selanjutnya, kami akan membuat badan Bot. Sebagai percobaan, kirim pesan berisi “頑張れ”, dan apabila muncul balasan “僕、頑張るよ!” maka Bot sudah dibuat dengan baik dan benar. Pertama-tama, buatlah spreadsheet di folder yang dikehendaki di Drive.

Pilih “Tools” > “Script Editor” dari menu Spreadsheet.

Jika script editor sudah terbuka, bukalah “File” > “Property Project”, simpanlah token akses yang diterbitkan oleh LINE developers dengan nama CHANNEL_ACCESS_TOKEN di tab “Script Properties”.

Kemudian dilanjutkan dengan coding untuk badan Bot itu sendiri.

Jika Anda menambahkan bot ke teman atau mengirim pesan ke bot, data acara akan dikirim ke URL webhook yang akan Anda daftarkan nanti.

Tentukan doPost () untuk menerima data acara.

function doPost(e) {

var json = JSON.parse(e.postData.contents);

json.events.forEach(function (event) {

var eventType = event.type;

var replyToken = event.replyToken;

var messages = [];

if(eventType == "message") {

var messageId = event.message.id;

var messageType = event.message.type;

if(messageType == "text") {

var userMessage = event.message.text;

switch(userMessage) {

case "頑張れ":

messages.push({"type": "text", "text": "僕、頑張るよ!"});

break;

default:

messages.push({"type": "text", "text": "・・・"});

break;

}

}

}

sendReplyMessage(replyToken, messages);

});

}

function sendReplyMessage(replyToken, messages){

var json = {

"replyToken": replyToken,

"messages": messages,

}

var payload = JSON.stringify(json);

var url = "https://api.line.me/v2/bot/message/reply";

var headers = {

"Authorization": "Bearer " + getScriptProperty("CHANNEL_ACCESS_TOKEN"),

"Content-Type": "application/json; charset=UTF-8",

};

var options = {

"method" : "post",

"headers" : headers,

"payload" : payload,

};

return UrlFetchApp.fetch(url, options);

}

function getScriptProperty(key){

return PropertiesService.getScriptProperties().getProperty(key);

}

Setelah menulis kode, pilih Publish > "Deploy as a web application"

Ubah "Users who can access the application" menjadi "Everyone (including anonymous users)"

Tetapkan dan publikasikan URL aplikasi.

Terakhir, kembali ke LINE Developers, daftarkan URL web aplikasi yang sudah diterbitkan di atas ke Webhook URL.

Apabila muncul pop-up seperti di atas, maka pengaturan dasar Anda sudah selesai.

1.3. Mencoba Jalankan di LINE

Kali ini mari mencoba untuk menjalankan di LINE.

Dari aplikasi LINE di smartphone, pilih “Add Friends” > “QR Code”, lalu QR Code yang muncul di halaman LINE Developers tersebut dibaca dan tidak lama akan menjadi teman. Lalu, ketik “頑張れ

Berhasil! Ini mudah sekali seperti satu scene dalam film, bukan? Sekarang pengaturan basis LINE Bot Anda sudah selesai.

2. Mengekstrak Kosakata Bahasa Inggris dengan Cloud Vision API

Mari kita mulai menggunakan Cloud API. Kita mulai dari Cloud Vision API terlebih dahulu.

Cloud Vision API merupakan API yang mampu mendeteksi informasi yang terkandung dalam gambar dengan menganalisis gambar yang ditransmisikan dan gambar di Cloud Storage menggunakan model machine learning.

Fungsi yang disiapkan untuk analisis adalah sebagai berikut.

Tipe Fungsi:

LABEL_DETECTION

TEXT_DETECTION

DOCUMENT_TEXT_DETECTION

SAFE_SEARCH_DETECTION

FACE_DETECTION

LANDMARK_DETECTION

LOGO_DETECTION

IMAGE_PROPERTIES

WEB_DETECTION

CROP_HINTS

OBJECT_LOCALIZATION

Kali ini, kami menggunakan TEXT_DETECTION dan mencoba mendeteksi karakter termasuk gambar.

2.1. Pengaktifan API

Untuk bisa menggunakan Cloud Vision API, perlu untuk mengaktifkan API di GCP. Di GCP Console Menu, pilihlah “API and Service” > “Library”.

Kalau dicari di search bar, akan muncul “Cloud Vision API”, kemudian klik “Cloud Vision API” tersebut.

Klik “Aktifkan”.

Sama seperti sebelumnya, mari kita aktifkan "Cloud Text-to-Speech API". Kini pengaturan GCP sudah selesai.

2.2. Membuat Tautan ke Proyek GCP

Selanjutnya, kembali ke script editor GAS, pilih "Resources" > "Cloud Platform Project" dari menu, dan tautkan GAS ke proyek GCP yang memungkinkan API diaktifkan.

2.3. Otorisasi untuk Menggunakan Cloud API

Untuk menggunakan Cloud API dari GAS, kali ini yang akan digunakan adalah otorisasi Oauth.

API bisa digunakan dengan mudah dengan memperoleh setting Scope di manifest file dan mengirim token yang sudah didapat dengan ScriptApp.getOAuthToken () saat diminta.

Mula-mula, kita atur Scope

Jika Anda memilih "View"> "Display Manifest File", appsscript.js akan ditampilkan. Tambahkan Scope seperti yang ditunjukkan di bawah ini.


"oauthScopes": [

"https://www.googleapis.com/auth/script.external_request",

"https://www.googleapis.com/auth/documents",

"https://www.googleapis.com/auth/spreadsheets",

"https://www.googleapis.com/auth/drive",

"https://www.googleapis.com/auth/cloud-vision",

"https://www.googleapis.com/auth/cloud-platform"

]

Setelah itu, jika Anda menggunakan CloudAPI, Anda cukup mengatur token di header Authorization Bearer.

2.4. Mengekstrak Teks dari Gambar dengan Cloud Vision API

Mari kita gunakan Cloud Vision API untuk mengekstrak karakter dari gambar.

Dapatkan data gambar yang dikirim ke layar LINE Talk seperti di bawah ini, kirimkan ke Cloud Vision API, dan cobalah untuk mengakses informasi teks yang termasuk dalam gambar.

■ Dapatkan data gambar yang dikirim ke layar LINE Talk


function getLineImageData(messageId) {





var url = "https://api.line.me/v2/bot/message/" + messageId + "/content/";



var headers = {

"Content-Type": "application/json; charset=UTF-8",

"Authorization": "Bearer " + getScriptProperty("CHANNEL_ACCESS_TOKEN"),

};

var options = {

"method" : "get",

"headers" : headers,

};

return UrlFetchApp.fetch(url, options).getContent();


}

■ Ekstrak Data Text dari Gambar di Vision API

function getOcrText(image) {


var b64 = Utilities.base64Encode(image);

var json = {

"requests": [{

"image": { content: b64},

"features": {

"type": 'TEXT_DETECTION',

"maxResults": 1

}

}]

}


var payload = JSON.stringify(json);

var url = "https://vision.googleapis.com/v1/images:annotate";

var headers = {

"Authorization": "Bearer " + ScriptApp.getOAuthToken(),

"Content-Type": "application/json; charset=UTF-8",

};


var options = {

"method" : "post",

"headers" : headers,

"payload" : payload,

};

return UrlFetchApp.fetch(url, options).getContentText();

}

Kemudian mari kita mengirim gambar, memecah string karakter yang diekstraksi dari gambar menjadi kosakata bahasa Inggris, dan menampilkannya.

Nampaknya berjalan dengan baik.

Pembahasan selanjutnya, adalah tentang biaya yang membuat semua orang penasaran. Biayanya tertera dalam tabel di bawah ini. Namun hanya deteksi teks yang digunakan saat ini saja yang disebutkan.

3. Menerjemahkan Kosakata Bahasa Inggris dan Menyimpan ke Spreadsheet

Selanjutnya, kami akan menerjemahkan kosakata bahasa Inggris.

Berbicara tentang terjemahan, Cloud Translation API memang solusinya, tetapi kali ini kami akan menggunakan GAS LanguageApp yang mudah dan gratis.

3.1. Menerjemahkan di GAS LanguageApp.translate

LanguageApp.translate ini sangat mudah digunakan, dan jika Anda mengatur teks bahasa target dan kode bahasa sebelum dan sesudah terjemahan, teks yang diterjemahkan akan dikembalikan ke teks yang sudah diterjemahkan.


LanguageApp.translate(テキスト, 翻訳前の言語コード, 翻訳後の言語コード);

3.2. Menyimpan ke Spreadsheet

Sebenarnya, menyimpan ke spreadsheet juga mudah sekali, tetapi perlu diketahui bahwa proses membaca dan menulis data di spreadsheet sangatlah lambat. Baca dan tulis sekaligus, dan usahakan untuk tidak sering-sering menjalankan SpreadsheetApp.


var ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("words");

var lastRow = ss.getLastRow();

ss.getRange(lastRow + 1, 1, words.length, words[0].length).setValues(words);


Jadi, mari kita lihat Spreadsheet.

Kata bahasa Inggris yang diekstrak dari gambar dan set terjemahan bahasa Jepangnya sudah disimpan dengan benar.

4. Memperoleh Data Audio dari Cloud Text-to-Speech API

Selanjutnya, adalah mendapatkan data suara kata-kata bahasa Inggris dengan Cloud Text-to-Speech API. Cloud Text-to-Speech merupakan layanan konversi ucapan yang membacakan teks dengan ucapan tersintesis yang sangat dekat dengan manusia. Ia mendukung lebih dari 20 bahasa dan dialek termasuk bahasa Jepang.

4.1. Memperoleh Data Audio Kata-kata Bahasa Inggris dengan Cloud Text-to-Speech API

Untuk mendapatkan data audio dari kata-kata bahasa Inggris, harus dilakukan encoding audio dan juga bahasa.

  • Mendapatkan data audio Text-to-Speech API


function getTextToSpeechData(word) {



var json = {

"audioConfig": {

"audioEncoding": "MP3",

"pitch": "0.00",

"speakingRate": "1.00"

},

"input": {

"text": word

},

"voice": {

"languageCode": "en-US",

"name": "en-US-Wavenet-D"

}

}

var payload = JSON.stringify(json);

var url = "https://texttospeech.googleapis.com/v1beta1/text:synthesize";

var headers = {

"Content-Type": "application/json; charset=UTF-8",

"Authorization": "Bearer " + ScriptApp.getOAuthToken(),

};

var options = {

"method": "post",

"headers": headers,

"payload": payload,

};

return UrlFetchApp.fetch(url, options);

}

Parameter utama yang digunakan adalah seperti di bawah ini.

4.2. Menyimpan Data Audio yang Sudah Diperoleh ke Drive

Karena mendapatkan data audio kata yang sama berulang-ulang itu suatu hal yang percuma, kami akan menyimpan data audio yang sudah diperoleh ke Drive.


var blob = Utilities.newBlob(data, contentType, fileName);



DriveApp.getFolderById(folderId).createFile(blob);


Di bawah ini adalah biaya yang dikenakan untuk penggunaan Cloud Text-to-Speech API.

WaveNet adalah audio berkualitas sangat tinggi, dan harganya sekitar 4 kali lipat dari audio standar.

Pada kesempatan ini kami menggunakan WaveNet kali ini, tetapi sepertinya cukup menggunakan yang slot gratis.

Dengan ini semua fungsi yang diperlukan dalam Bot sudah bisa dipahami.

5. Menerapkan Setiap Fungsi Bot Kata Bahasa Inggris

Sekarang, mari kita lengkapi kata bahasa Inggris Bot berdasarkan konten yang sudah kita bahas sejauh ini. Kali ini, selain pesan teks, template button, quick reply, dan LIFF juga digunakan untuk pemutaran ulang audio.

Apabila dilihat akan seperti berikut ini:

6. Kesimpulan

Bagaimana menurut Anda? Dengan Cloud API, Anda dapat dengan mudah menggabungkan berbagai fungsi ke dalam aplikasi Anda tanpa mempelajari pengetahuan tersebut secara mendalam. Selain itu, menggunakan GAS memungkinkan kami untuk memulai pengembangan Bot dengan lancar tanpa menyiapkan server web atau database. Ketika Anda ingin mencoba sesuatu dan bisa segera melakukannya, bukankan itu merupakan suatu hal yang sangat menyenangkan?