มาทำให้ Line ที่คุณใช้ทุกวันให้เป็นวุ้นแปลภาษากันเถอะ

เกริ่นก่อนนะครับที่เกิดบทความชุดนี้มาเพราะผมประสบปัญหาแปลภาษาอังกฤษได้งูๆปลาๆ ไม่แน่ใจว่าแปลถูกไหม หรืออยากสื่อสารก็ไม่รู้ว่าพูดถูกไหม ผมเลยสร้างบอทที่เปรียบเสมือนกินวุ้นแปลภาษาผ่าน Line ขึ้นมา

ทำไมต้อง Line เอาง่ายๆเลยนะครับเป็นช่องทางที่ต่อบอทเข้ากับ Webhook ง่ายที่สุดในโลกแล้วหล่ะมั้งสำหรับผมไม่ต้องทำเรื่องอะไรเลยเปิดได้ทันที

ส่วนเจ้า Open AI ทุกคนน่าจะรู้จักกันดีอยู่แล้วว่ามันคืออะไรมันคือองกรค์ที่สร้าง AI ขึ้นมาซึ่งในบทความนี้เราจะมาใช้ Model gpt-4o

Flow การทำงาน

อธิบาย Flow การทำงานก่อนจะคล้ายๆในรูป

1. ผู้ใช้งานคุยกับบอทผ่าน Line
2. Webhook รับ Event จาก Line
   2.1 จากนั้นทำการ Loading Line (มันคือ Feature ที่จะให้ความรู้สึกว่ากำลังจะมีคนตอบ เข้าไปดูได้ที่ Line)
   2.2 เตรียมพร้อมให้ Chat GPT รู้ว่ากำลังจะทำอะไร และให้รู้จักชื่อเราด้วยผ่านตัว Display Name
3. จากนั้นก็กระจายไปตามชนิดของข้อความ
   3.1 ถ้าเป็น Text ก็ปั้น Text เข้ากับ Prompt ของคนนั้นๆแล้วส่งหา Open AI แล้ว Reply กลับไปหาผู้ใช้
   3.2 ถ้าเป็น Image ก็ไป Get Content จาก Line จากนั้นปั้น Image เข้ากับ Promt แล้ว Reply กลับไปหาผู้ใช้งาน จะเห็นว่ายังไม่ได้ให้เข้า AI เดียวไปเล่าต่อด้านล่างว่าเพราะอะไรถึงยังไม่เอาเข้า
   3.3 ถ้าเป็น Audio ก็ไป Get Content จาก Line จากนั้นส่งเข้า Transcriptions เป็น Feature ของทาง Open AI ที่แกะเสียงให้ออกมาเป็น Text จากนั้น จะปั้น Prompt ใหม่เองเพราะจะให้มันแปลภาษาอย่างเดียว โดยไม่เก็บ History ไว้

รูปอ้างอิง 2.1 เป็นรูป Loading Line ให้ความรูปสึกไม่เคว้งคว้าง

รูปอ้างอิง 3.2 ที่ไม่ให้บอทตอบทันทีเพราะว่า ไม่อยากให้มันตอบมั่วงั้นจะเปลืองเงินโดยเปล่าประโยชน์ เช่นตัวอย่างผมส่ง รูปดอกแล้ว ถึงค่อยถามไปว่าคือดอกอะไร มันจะได้ตอบมาถูกต้องตามที่เราอยากรู้

รูปอ้างอิง 3.3 ส่วนตัวนี้เป็นตัวอย่างของการ Audio เดียว วีดีโอให้รับชมด้านล่าง

สิ่งที่ต้องเตรียมสำหรับบทความนี้

• Line OA หรือ Line Messaging API
• เปิดบัญชี OpenAI พร้อมผูกบัตรให้เรียบร้อยไม่จำเป็นต้องเปิด Chat GPT
• Golang ลงในเครื่องให้พร้อม
• VSCode ขาดไม่ได้แต่ใครถนัดอันไหนก็ใช้อันนั้น 5555
• ngrok ถ้าใครใช้ตัวอื่นก็ได้ใช้ได้ครับ
• (optional) และจะมีการ Deploy ขึ้นที่ AWS Lambda

จริงๆขั้นตอนการจัดเตรียม Line และ Open AI ผมเคยเขียนไว้แล้ว ดูได้ที่นี่

ต่อมามาดูหน้าตาของ Code กัน มาอธิบายส่วนสำคัญเป็นจุดๆ

Set ENV ให้เรียบร้อย

OPENAI_API_KEY : Key ที่เอาได้จาก Open AI
CHANNEL_ID : Client ID เอาได้จาก Line
CHANNEL_SECRET : Secret ที่เอาได้จาก Line
PORT : อันนี้ Port อะไรก็ได้ในเครื่องที่จะไม่ชนในเครื่อง
USE_LAMBDA : ถ้าใคร Run ใน Local ปรับเป็น false

Source Code ทั้งหมด

ด้านบนคือ Source Code ทั้งหมดมาอธิบายเป็นส่วนๆกันดีกว่ามาไล่เป็น Event ไป

เป็น Webhook รับ Event ถ้าเข้าเงื่อนไขก็จะทำการ Loading Line บรรทัดที่ 139 และ การเตรียม Prompt บรรทัดที่ 140

อันนี้คือ Function Loading ของ Line สูงสุดอยู่ที่ 60 วิ จริงๆใส่ยาวๆก็ได้แต่ผมใส่ 20 วิ ถ้าเสร็จก่อนมันก็จะหายไป

อันนี้เป็นการเตรียม Prompt สำหรับ User นั้นๆโดยจะใช้ userID เป็น Key แล้วเก็บไว้ในตัวแปร Global ที่อยู่ใน Local แลัจะเห็นว่าไป Get Profile Line มาด้วยเพื่อที่จะให้บอทรู้ว่าเราชื่ออะไร

จากรูปด้านบนจะเห็นว่าผมใช้ system , user, assistant มาดูว่ามันคืออะไร

• system : จะให้ตัว AI เราเปรียบเสมือนเป็นใครเขาจะได้สวมบทบาทถูก
• user : เป็นคำถามหรือคำบอกเล่าจาก user ที่ต้องการบอกหรือถามอะไรกับ AI
• assistant : เป็นคำตอบที่ได้จากตัว AI

โดยจะเห็นจาก Code ว่าผมปั้น prompt ต่างๆเหมือนกันหมดยกเว้นชื่อที่ไม่เหมือนกัน

มาดูที่ Event Text กันครับ

จากนั้นมาดูที่ Event ที่เป็น Text ก่อนดีกว่า

จากรูปเมื่อ Event ที่เป็น Text เข้ามาก็จะมีการปั้นโยน Prompt เข้า Function GenerateChatResponse และ Save History เพื่อต่อประโยคสนทนาไว้ที่ บรรทัดที่ 193,194 และ Reply ข้อความที่ได้จาก AI กลับไป

นี้คือ Function GenerateChatResponse

จากรูปคือจะเห็นว่าเราส่ง History + New Prompt ทั้งหมดเข้า Open AI โดยผมเลือกเป็น Model 4-o จากนั้นเราก็จะได้ Response ไว้สำหรับ Reply กลับไปหา User

มาดูที่ Event Image กันครับ

จากนั้นมาดูที่ Event Image กัน

จากรูปจะเห็นว่า ไป Get แค่ Content แล้วแปลงเป็น Base64 แล้วก็ Save History ของคนๆนั้นไว้ โดยจะยังไม่ส่งไปที่ AI และตอน Reply ให้อ้างอิงว่าจากรูปให้ช่วยอะไร

หน้าตาจะออกมาประมาณนี้

และจะเข้า Event Text อีกรอบเพื่อตอบคำถามีรูปที่ทำแบบนี้เพราะว่าถ้าให้บอทตอบเลยมันไม่รู้ว่าเราต้องการอะไรจากรูปจริงๆมันจะตอบเราอาจจะตรงใจหรือไม่ตรงใจก็ได้ เพราะการให้ AI ประมวลทุกครั้งมีค่าใช้จ่าย

มาดูที่ Event Audio กันครับ

จะเป็น Event ของ Audio

จากรูปเมื่อเข้ามาก็จะไป Get Content จาก Line ก่อนจากนั้นจะมีไปเก็บ File ที่ Local ผมเก็บไว้ที่ /tmp/… จากนั้นเข้า Function TramscribeVoice ก็จะค่าคืนออกมาเป็น Text และผมก็มีการปั้น Prompt ใหม่ทุกครั้งเพราะผมจะให้มันแปลภาษาเฉยๆไม่ได้ต้องการให้มันบวมเพราะยิ่งข้อมูลเยอะการเรียก AI แต่ละครั้งราคาก็จะสูงขึ้น

อันนี้คือ Highlight ของงานจะเห็นว่า ผมจะบอกสิ่งที่อยากได้ และ ตัวอย่าง Output ที่ต้องการสำคัญมากๆเอาไปใช้ได้กับทุกเรื่องเลยในการให้ AI มันเข้าใจสิ่งที่เราต้องการ

อันนี้เป็น Funtion การแปลงเสียงไปเป็น Text โดยผมใช้ Open AI Model : whisper-1

จบไปแล้วในส่วนของการอธิบาย Code มาดูของส่วน Deploy Lambda กัน

อันนี้คือ File serverless.yml

GOARCH=arm64 GOOS=linux  CGO_ENABLED=0 go build -tags lambda.norpc -ldflags="-s -w" -o bootstrap .
sudo npm i serverless-dotenv-plugin serverless-prune-plugin
serverless deploy

• จากนั้นผมจะทำการ Build
• serverless-dotenv-plugin : ให้มันอ่าน ENV ของเราได้
• serverless-prune-plugin : ให้ Lambda มันเก็ย Version ไว้สูงสุดกี่ Version
• ผมเก็บไว้แค่ 3 ถ้าไม่ใส่ Deploy 100 ทีมีเป็น 100 Version เลยทีเดียว
• จากนั้นผมก็ deploy

ส่วนถ้าใครไม่เคยใช้ AWS แล้วอยากลอง Test

go mod tidy
go run main.go
ngrok http {{port}}

ได้ Endpoint มาก็เอาไปใส่ใน Line ได้เหมือนกัน

ตัวอย่างการใช้เสียงผ่าน Line

ตัวอยากการส่งรูปเข้า Line

จบไปแล้วกับบทความการทำวุ้นแปลภาษาหวังว่าจะมีประโยชน์ไม่มากก็น้อยในการเป็นแนวทางเพื่อไปพัฒนาให้ดียิ่งขึ้น AI กำลังมาพวกเราก็ต้องปรับตัวให้เข้ากับยุค AI เช่นกันอย่าไปกลัวมันครับ รอติดตามผลงานใหม่ผมได้เรื่อยๆนะครับ Good Luck