บทนำ
- ผู้ใช้ Canva สามารถปลดปล่อยความคิดสร้างสรรค์และเพิ่มภาพวาดแบบกำหนดเองลงในงานออกแบบได้ผ่านเครื่องมือ Draw ใหม่
- เนื่องจากเส้นหรือรูปทรงง่าย ๆ ที่ผู้ใช้วาดด้วยเมาส์หรือแทร็กแพดอาจไม่แม่นยำ จึงได้พัฒนาฟีเจอร์ Shape Assist ขึ้นมาเพื่อช่วยแก้ปัญหานี้
- Shape Assist ใช้แมชชีนเลิร์นนิง (ML) เพื่อแปลงลายเส้นที่ไม่เสถียรให้เป็นเวกเตอร์กราฟิกที่เรียบลื่น
ข้อพิจารณาด้านการออกแบบ
- ระหว่างการพัฒนาฟีเจอร์นี้ ได้ให้ความสำคัญสูงสุดกับเวลาแฝงของการจำแนก เพื่อให้ประสบการณ์ใช้งานทั้งรวดเร็วและแม่นยำ
- มีการปรับใช้โซลูชันภายในเบราว์เซอร์ เพื่อรองรับการรู้จำรูปทรงและช่วยวาดแบบเรียลไทม์
- ไม่จำเป็นต้องเชื่อมต่ออินเทอร์เน็ต จึงยังคงเข้าถึงได้แม้อยู่ในสถานการณ์ออฟไลน์
การเก็บรวบรวมข้อมูล
- พื้นฐานของโมเดล ML ที่ประสบความสำเร็จคือการเก็บข้อมูล และมีการรวบรวมข้อมูลภาพวาดจากผู้ใช้ที่หลากหลาย
- มีการบันทึกเส้นที่ผู้ใช้วาดเป็นลำดับของพิกัด x และ y เพื่อสร้างชุดข้อมูลที่ครอบคลุมรูปแบบและความแปรผันที่หลากหลาย
- การบันทึกข้อมูลด้วยพิกัดช่วยให้มีความยืดหยุ่นทั้งในการเตรียมข้อมูลล่วงหน้าและการใช้เทคนิคเพิ่มพูนข้อมูลที่หลากหลาย
การออกแบบและการฝึกโมเดล
- มีการออกแบบโมเดล ML ให้ทำงานฝั่งไคลเอนต์ได้ โดยไม่ส่งผลเสียต่อเวลาโหลดหน้า
- มีการทดลองใช้ RNN ที่รับพิกัดโดยตรงแทน CNN เพื่อลดขนาดโมเดลให้เล็กที่สุด
- มีการปรับไฮเปอร์พารามิเตอร์หลายแบบเพื่อระบุคุณสมบัติที่เหมาะสมที่สุดของโมเดล
- มีการกำหนดจำนวนจุดที่แทนแต่ละรูปทรงให้คงที่ เพื่อคำนึงถึงความแตกต่างของความเร็วในการวาดของผู้ใช้
- มีการดัดแปลงอัลกอริทึม Ramer-Douglas-Peucker (RDP) เพื่อลดจำนวนจุดโดยยังคงรักษารายละเอียดสำคัญไว้
ข้อพิจารณาด้านการปรับใช้
- โมเดลมีขนาดเล็กและคำนวณไม่ซับซ้อน จึงสามารถประมวลผลทั้งหมดภายในแอปพลิเคชันฝั่งไคลเอนต์ได้
- ฟีเจอร์นี้ทำงานแบบออฟไลน์ได้อย่างสมบูรณ์โดยไม่ต้องเชื่อมต่อกับเซิร์ฟเวอร์
สถาปัตยกรรมของโมเดล
- โมเดลประกอบด้วย LSTM หนึ่งเลเยอร์ และ Gemm (เลเยอร์แบบหนาแน่นหรือ fully connected)
- โมเดลมีขนาดประมาณ 250 กิโลไบต์ และถูกนำไปใช้งานบนไคลเอนต์ด้วยการเขียน Typescript โดยตรง
การแทนที่รูปทรง
- หลังจากตัดสินได้ว่ารูปทรงที่ผู้ใช้วาดคืออะไร จะใช้แนวทาง template matching เพื่อจัดแนวการแสดงผลแบบเวกเตอร์กราฟิกกับเส้นทางภาพวาดของผู้ใช้ให้ตรงกันอย่างแม่นยำ
บทสรุป
- รู้สึกยินดีอย่างยิ่งที่ได้แบ่งปันฟีเจอร์ Shape Assist นี้กับผู้ใช้ทั่วโลก และหวังว่าทั้งนักออกแบบมืออาชีพและผู้ที่ชอบขีดเขียนเล่นจะสนุกกับฟีเจอร์นี้
ความเห็นของ GN⁺
ประเด็นสำคัญที่สุดของบทความนี้คือ Canva ได้พัฒนาฟีเจอร์ Shape Assist ที่ใช้โมเดลแมชชีนเลิร์นนิงซึ่งทำงานภายในเบราว์เซอร์ เพื่อจดจำรูปทรงที่ผู้ใช้วาดได้อย่างแม่นยำและแปลงให้เป็นเวกเตอร์กราฟิกที่เรียบลื่น ฟีเจอร์นี้ให้ฟีดแบ็กแก่ผู้ใช้ได้ทันทีและใช้งานได้แม้ไม่มีการเชื่อมต่ออินเทอร์เน็ต จึงช่วยเพิ่มการเข้าถึงได้อย่างมาก เหตุผลที่บทความนี้น่าสนใจคือมันแสดงให้เห็นว่าความก้าวหน้าทางเทคโนโลยีสามารถทำให้งานสร้างสรรค์ง่ายขึ้นและสนุกยิ่งขึ้นได้อย่างไร
1 ความคิดเห็น
ความคิดเห็นบน Hacker News
แทนที่จะใช้ RNN อัลกอริทึม "$1 unistroke recognizer" เป็นวิธีแก้ปัญหาที่เรียบง่ายและสง่างามกว่า
วิศวกรของ ASML, TSMC และบริษัทอื่น ๆ ยิงเลเซอร์ใส่ตะกั่วเหลวทุกวันเพื่อสร้างแสงที่มีความยาวคลื่นสั้นอย่างสุดขั้ว เพื่อผลิตชิปที่เล็กลงและมีประสิทธิภาพดีขึ้น
แม้แต่ตอนวาดเส้นตรงด้วยเมาส์หรือแทร็กแพด ก็ยังกลายเป็นรูปทรงที่ไม่สม่ำเสมอได้ง่าย
สนใจว่า Canva ใช้ไลบรารีอะไรในการวาดเส้น
ประทับใจกับฟังก์ชันทำเส้นโค้งให้เรียบตอนวาดเส้นอิสระใน Macromedia Flash เมื่อกว่า 20 ปีก่อน
มีการกล่าวถึงการพัฒนาต่อยอดอัลกอริทึม Ramer-Douglas-Peucker (RDP)
เวอร์ชัน "ลายเส้นสั่นแบบขีดเขียน" ที่ดูเหมือนวาดด้วยมืออาจมีเสน่ห์มากกว่ากราฟิกเวกเตอร์ที่เรียบลื่น
เมื่อทำฟีเจอร์แบบนี้ ควรให้ผู้ใช้เลือกได้และทำให้สถานะการเปิดใช้งานชัดเจน
ฝึกโมเดลให้จดจำรูปทรงที่กำหนดไว้ล่วงหน้า 9 แบบ
อยากให้ฟีเจอร์นี้เป็นโอเพนซอร์ส