การทำ Optical Character Recognition (OCR) บนเว็บไซต์สำหรับเอาไว้แปลการ์ตูน ด้วย Google API

Comdet Phaudphut
Sep 5, 2018 · 4 min read

ช่วงนี้ติดการเสพการ์ตูนจาก Webtoon มาก ๆ ขนาดที่ต้องตามไปดูสปอยการ์ตูนจากเว็บต้นฉบับภาษานั้น ๆ กันเลยทีเดียว แต่ก็ติดปัญหาในเรื่องการอ่านภาษาเกาหลี ภาษาจีนไม่ออกนี่แหละ ครั้นเราจะใช้ Google Translate แปลมันก็ไม่ได้ เพราะการ์ตูนมันเป็นรูปภาพ มันไม่ใช่ Text ที่จะ copy แล้ววางเป็นข้อความได้ แต่ก็ไม่ลดละความพยายามในการอยากอ่าน ฮ่า ๆ ในเมื่อเป็นภาพก็ต้องแกะออกมาเป็นข้อความผ่าน วิธีที่เขาเรียกกันว่า Optical Character Recognition หรือ OCR นั่นเอง สมัยก่อน ๆ ที่ยังไม่มี Machine Learning แล้วก็พวก Deep Learning นะ กว่าจะแกะตัวอักษรได้มานี่มีวิธีการยุ่งยากพอสมควร (เคยพยายามที่จะเขียนเป็นภาษาไทย แต่ก็ได้ accuracy ไม่ดีพอ) แต่ยุคสมัยนี้เรามี Google เรามี Api แล้ว เรื่องพวกนี้ก็แค่ส่งภาพเข้าไปทาง Api ก็ได้ออกมาเป็นข้อความแล้ว ถ้าแปลภาษาเราก็แค่ส่งข้อความเข้า Google Translate ก็จบ รวม ๆ กันออกมากลายเป็น Chrome Extension อย่างที่เห็นใน Video ด้านล่างนี้แหละ

เดี๋ยววันนี้เราจะมาตามรอยกันดูว่า Extension ด้านบนนี่ทำอย่างไร

Google Vision API

อันดับแรกก็พูดถึงพระเอกเราก่อน คือ Google Vision API นั่นเอง ซึ่งเป็นบริการด้าน Machine Learning ที่เอาไว้ Detection & Classification รูปภาพ และยังมีส่วนของ OCR แกะข้อความจากภาพให้เราเรียบร้อย ตามตัวอย่างภาพด้านล่าง (แกะไม่ครบ block ด้วยนะ :( บางที) โดยสามารถเข้าไปทดลองได้ที่ https://cloud.google.com/vision ซึ่งถ้าจะใช้ API ตัวนี้ก็จะมี rate ราคาเขียนบอกเอาไว้อยู่ด้านล่างเพจ น่าจะประมาณ 1–1000 units จะฟรีแต่มากกว่านั้นนี่สูงสุดประมาณ 3.5$ มั้งนะ แต่เราจะแอบใช้ฟรี ฮ่า ๆ

จากหน้าที่ให้ทดลองอัพรูปนี่แหละ ถ้าลอง Debug ด้วย Web developer ด ูเราจะเห็นว่ามีการร้องของผ่าน REST api ส่งรูปไปเป็น base64 encode ไปยัง Server ของ Google แล้วมันก็จะ return เป็น json กลับมา

ส่วนอันนี้เป็น response

ได้ API มาแล้วเรียบร้อย ถ้าใครอยากจะรู้รายละเอียดเพิ่มเติม ก็ไป ทดลองกันเองนะครับ ส่วนการเขียน javascript เนื่องจากผมทำเป็น chrome extension ก็น่าจะเขียนประมาณนี้

(ออกตัวไว้ก่อนนะครับ ผมเป็นประเภทที่เขียนเว็บ front end แบบ low level มาก ตามชาวบ้านเขาไม่ทัน ไม่รู้โลกมันหมุนไปถึงไหนกันแล้ว ยังเขียนได้แค่ jquery อยู่เลย พวกสไตล์การเขียนใหม่ ๆ นี่ไม่ต้องพูดถึง ฮ่า ๆ เขียนไม่เป็นอยู่แล้ว โค้ดก็ออกมาตามแบบที่เห็นนี่แหละ อย่างเละ มีทั้ง let ทั้ง var ทั้ง sync และ callback - -” ผิดบ้างก็ขออภัยนะครับ)

โค้ดด้านบนก็เป็นการ request แบบดิบ ๆ ไปที่ endpoint ตามที่แกะได้เลย โดยจะมีส่วนของ image_data เป็นข้อมูลรูปภาพที่ encode แล้ว ตัดส่วนหัว meta image/jpeg ออกไป ส่งไปเป็น json พอได้ข้อมูลมาแล้วก็ parse ออกมาเป็น json แล้วใช้ responses[0].fullTextAnnotation.text ซึ่งเป็นส่วนที่เก็บข้อความออกมาแล้ว return ผ่าน callback ไป เป็นอันเสร็จ

Google Translate API

ขั้นตอนต่อมาคือเมื่อเราได้ Text มาแล้ว ก็ทำการแปลข้อความเป็นภาษาที่เราต้องการ งานนี้ก็คงไม่พ้นการยืมมือ Google Translate API นั่นเอง โดย Google นั้นมี API การแปลให้เราเรียบร้อย โดยจะต้องเป็น google developer แบบพร้อมชำระเงิน (กรอกเลขบัตรให้ GG พร้อมตัดเงินเรียบร้อย) คราวนี้ก็เช่นเคย เราจะจิ๊กเอามาใช้แบบฟรี ๆ (เหมือนเราเปิดเว็บ google translate แปลนั่นแหละอย่าไปคิดมาก ฮ่า ๆ) แต่คราวนี้ไม่หมูเหมือนอันบนมันจะมีทริกนิดหน่อย หลักการคือ การเรียกใช้การแปลภาษานั้นจะเรียก method GET/POST ไปที่ https://translate.google.com/translate_a/single โดยห้อย parameter “q” ที่เป็น text ไป แล้วมันจะ response เป็นข้อความกลับมาโดยเอา json parse ได้ ดังภาพด้านล่าง แต่ … มันจะต้องมี parameter “tk” ซึ่งจะเป็น checksum เอาไว้เช็คความถูกต้องด้วย ถ้าค่า tk กับ q ไม่สอดคล้องกันจะ return เป็น error กลับมา (คือใช้ไม่ได้นั่นเอง) ดังนั้นเราจึงต้องทำการสร้างค่า tk นี้ขึ้นมาก่อน (นี่มันบทความ Machine learning หรือบทความ Hacking กันแน่ฟร่ะ)

โชคยังดีมาก ๆ ที่ในโลกนี้ก็มีคนเก่งและใจดีฟ้าประทานมาให้ สร้าง library สำหรับการใช้ google translate แบบฟรี ๆ มาแจกและเปิด source code บน github (https://github.com/k3rn31p4nic/google-translate-api) ทำให้ผมไม่ต้องเขียนโค้ดขึ้นมาใหม่เองหมด แต่ฟ้าก็ยังใจดีไม่พอ เนื่องจากต้นฉบับเขียนไว้เป็น NodeJS ทำให้ต้องมาเขียนเป็นแบบ JS รันผ่าน extension ได้ (นี่มึงกะจะเรียกใช้ lib อย่างเดียวเลยเร๊อะ - -” ) ก็ไปเอาส่วนการ generate token มาแล้วก็ปรับ request นิดหน่อยใช้แบบ minimal ไม่ได้เอามาทั้ง library รวม ๆ แล้วก็น่าจะได้หน้าตาพร้อมเรียกใช้งานเป็นแบบนี้ (กระบวนการ generate tk ไปดูในโค้ดเอานะ)

Chrome Extension

และส่วนสุดท้ายของเรานั่นก็คือการทำ Chrome Extension นั่นเอง โดยที่คิดไว้คือ จะทำเป็นแบบลากกรอบสี่เหลี่ยมครอบ text dialog (เหมือน video ด้านบนสุด) เพราะถ้าส่งรูปใหญ่ ๆ ไป API ของ Google จะ Detect ได้บ้างไม่ได้บ้าง แต่ถ้าส่ง Dialog ข้อความไปมันจะ Detect ตัวอักษรได้ค่อนข้างหมด ตอนแรกว่าจะเริ่มเขียน Extension ใหม่ตั้งแต่ต้น ไปโหลด Template อะไรมาหมดแล้ว แต่พอค้นไปค้นมาก็เจอผู้ใหญ่ใจดี (อีกแล้ว) ทำเอาไว้ลักษณะคล้าย ๆ กัน คือจับภาพหน้าจอแล้ว crop เอาไปโพสต์ใน pinterest โดยมีชื่อว่า PinSnapper by Chris Danford (https://github.com/chrisdanford/PinSnapper) แต่เราจะแก้โค้ดโดยลบส่วนนั้นไป เอาแค่แคปเว็บเฉพาะส่วน แล้วส่งไปเข้า API ตามที่เราวางแผนไว้ด้านบนแทน

เอาหล่ะ ผมก็ไป fork มาใส่ใน github ตัวเองเรียบร้อยแล้ว ส่วนสำคัญใน extension นี่คือส่วนการสร้าง overlay snap รูปภาพนั่นเอง ตามภาพด้านล่าง เป็นส่วนที่ทำการ Snap และหาพิกัด แล้วทำการ draw div เป็นกรอบสำหรับใส่ข้อความที่แปล เมื่อสร้าง div dialog แล้วก็จะเอารูปที่ได้พร้อมกับ coordinate return เป็น callback กลับไปเพื่อเรียกใช้ API

พอเราเรียก API ได้แล้วก็ แทรกข้อความเข้าไปเป็นอันจบพิธี ตามภาพด้านล่าง

โดยผมได้ทำส่วนการเลือกภาษาเอาไว้ด้วย (แปลเป็น Eng น่าจะอ่านง่ายกว่า ถ้าแปลเป็นไทยบางทีอ่านไม่รู้เรื่อง) เมื่อเสร็จเรียบร้อยก็น่าจะได้ประมาณนี้

จุดจบคนงก

สุดท้ายแล้วความงกทั้งหมดที่ได้สะสมมาก็พังทะลาย เพราะ ด้วยความที่ต้องการเอาลง Chrome Store ซึ่งมันต้องเสียค่าเป็น developer ในราคา 5$ ที่อุตสาห์งกแอบใช้ Free API ในตอนแรก ตอนสุดท้ายก็ได้จ่ายอยู่ดี ฮ่า ๆ

ม่ายยยยยยยย นะ 5$ ของฉัน … OK จ่ายก็ได้ … สุดท้ายก็ได้ลงใน Store แล้ววว

https://chrome.google.com/webstore/detail/snapocr/pjibeflfiekdfebnjcknejicggbcljmj/

สุดท้ายก็จบบทความลงเพียงเท่านี้ ไม่ขอรับประกัน Extension ใด ๆ ทั้งสิ้น ไม่รับรองว่าจะใช้ได้นานเท่าไหร่ มี Bug ไหม ไม่รู้ แก้เอาเอง

เอ๊ะ !!! ลืมอะไรไปนะ ……… อ๋อ ลืมแปะโค้ดนี่เอง

เรียบเรียงโดย
คมเดช เผือดผุด (ตูมตาม)
fb.com/comdet
ช่องทางเดียวเท่านั้น เล่น LINE ไม่เป็น

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade