จดจำลายมือของผู้ใช้

Handwrite Recognition API ช่วยให้คุณจดจำข้อความจากการป้อนข้อมูลด้วยลายมือได้แบบเรียลไทม์

Christian Liebel
Thomas Steiner

Handwrite Recognition API คืออะไร

Handwrite Recognition API ช่วยให้คุณสามารถแปลงการเขียนด้วยลายมือ (หมึก) จากผู้ใช้เป็นข้อความ ระบบปฏิบัติการบางระบบรวม API ดังกล่าวไว้นานแล้ว และความสามารถใหม่นี้ก็ช่วยให้เว็บแอปสามารถ ในที่สุดก็ใช้ฟังก์ชันนี้ได้ Conversion จะเกิดขึ้นในอุปกรณ์ของผู้ใช้โดยตรง ซึ่งทำได้แม้กระทั่ง ในโหมดออฟไลน์ โดยไม่ต้องเพิ่มไลบรารีหรือบริการของบุคคลที่สาม

API นี้ใช้วิธีการที่เรียกว่า "ออนไลน์" หรือการจดจำที่แทบจะเป็นระบบ เรียลไทม์ ซึ่งหมายความว่า ระบบจะจดจำอินพุตที่เขียนด้วยลายมือขณะที่ผู้ใช้วาดด้วยลายมือโดยบันทึกและวิเคราะห์ซิงเกิล เส้น ต่างจาก "ออฟไลน์" เช่น Optical Character Recognition (OCR) โดยที่ มีเพียงผลิตภัณฑ์ปลายทางเท่านั้นที่เป็นที่รู้จัก อัลกอริทึมออนไลน์สามารถให้ความแม่นยำในระดับที่สูงขึ้นเนื่องจาก สัญญาณเพิ่มเติม เช่น ลำดับเวลาและแรงดันของเส้นหมึกแต่ละเส้น

กรณีการใช้งานที่แนะนำสำหรับ API การรู้จำลายมือ

ตัวอย่างการใช้งานมีดังนี้

  • แอปพลิเคชันสำหรับจดโน้ตที่ผู้ใช้ต้องจดบันทึกด้วยลายมือและให้ระบบแปล เป็นข้อความได้
  • แอปพลิเคชันฟอร์มที่ผู้ใช้สามารถใช้การป้อนข้อมูลด้วยลายมือหรือนิ้วได้เนื่องด้วยข้อจำกัดด้านเวลา
  • เกมที่ต้องมีการเติมตัวอักษรหรือตัวเลข เช่น อักษรไขว้ ฮันแมน หรือซูโดกุ

สถานะปัจจุบัน

API การจดจำลายมือมีให้บริการจาก (Chromium 99)

วิธีใช้ API การรู้จำลายมือ

การตรวจหาฟีเจอร์

ตรวจหาการรองรับเบราว์เซอร์โดยตรวจหาการมีอยู่ของเมธอด createHandwritingRecognizer() ในออบเจ็กต์ตัวนำทาง

if ('createHandwritingRecognizer' in navigator) {
  // 🎉 The Handwriting Recognition API is supported!
}

แนวคิดหลัก

Handwrite Recognition API จะแปลงการป้อนข้อมูลด้วยลายมือเป็นข้อความ โดยไม่คำนึงถึงวิธีการป้อนข้อมูล (เมาส์ การแตะ ปากกา) API มี 4 เอนทิตีหลักดังนี้

  1. จุดแสดงถึงตำแหน่งของตัวชี้ในช่วงเวลาหนึ่งๆ
  2. โรคหลอดเลือดสมองประกอบด้วยจุดอย่างน้อย 1 จุด การบันทึกเส้นโครงร่างจะเริ่มขึ้นเมื่อผู้ใช้วาง ตัวชี้ลง (เช่น คลิกปุ่มหลักของเมาส์ หรือแตะหน้าจอด้วยปากกา หรือ นิ้ว) และจะสิ้นสุดเมื่อยกตัวชี้ขึ้น
  3. ภาพวาดประกอบด้วยเส้นอย่างน้อย 1 เส้น ซึ่งการรับรู้จริงจะเกิดขึ้นในระดับนี้
  4. โปรแกรมรู้จำได้รับการกำหนดค่าด้วยภาษาสำหรับป้อนข้อมูลที่ต้องการ ใช้เพื่อสร้างอินสแตนซ์ ของภาพวาดที่ใช้การกำหนดค่าเครื่องมือรู้จำ

แนวคิดเหล่านี้จะนำมาใช้เป็นอินเทอร์เฟซและพจนานุกรมเฉพาะ ซึ่งผมจะพูดถึงในเร็วๆ นี้

เอนทิตีหลักของ API การจดจำลายมือ: จุดอย่างน้อย 1 จุดเขียนเส้นโครงร่าง เส้นอย่างน้อย 1 เส้นสำหรับเขียนภาพวาดที่เครื่องมือรู้จำสร้างขึ้น การจดจำจริงจะเกิดขึ้นในระดับภาพวาด

การสร้างโปรแกรมรู้จำ

หากต้องการจดจำข้อความจากการป้อนข้อมูลด้วยลายมือ คุณจะต้องมีตัวอย่าง HandwritingRecognizer โดยการเรียกใช้ navigator.createHandwritingRecognizer() และข้อจำกัดในการส่ง กับโมเดลนั้น ข้อจำกัดจะกำหนดโมเดลการจดจำลายมือที่ควรใช้ ขณะนี้คุณ สามารถระบุรายชื่อภาษาตามลำดับที่ต้องการ ดังนี้

const recognizer = await navigator.createHandwritingRecognizer({
  languages: ['en'],
});

เมธอดจะแสดงการแปลงแบบมีสัญญาพร้อมอินสแตนซ์ HandwritingRecognizer เมื่อ สามารถตอบสนองคำขอของคุณได้ มิฉะนั้น ระบบจะปฏิเสธสัญญาพร้อมข้อผิดพลาด และ และการจดจำลายมือจะไม่สามารถใช้ได้ ด้วยเหตุนี้ คุณอาจต้องการค้นหา โดยจะรองรับฟีเจอร์การจดจำบางอย่างก่อน

การรองรับโปรแกรมจดจำการค้นหา

เมื่อโทรหา navigator.queryHandwritingRecognizerSupport() คุณสามารถตรวจสอบว่าแพลตฟอร์มเป้าหมายหรือไม่ จะสนับสนุนคุณลักษณะการจดจำลายมือที่คุณตั้งใจจะใช้ ในตัวอย่างต่อไปนี้ พารามิเตอร์ นักพัฒนาซอฟต์แวร์:

  • ต้องการตรวจหาข้อความภาษาอังกฤษ
  • รับการคาดคะเนแบบอื่น ๆ มีโอกาสน้อย หากมี
  • รับสิทธิ์เข้าถึงผลการแบ่งกลุ่ม ซึ่งก็คืออักขระที่เป็นที่รู้จัก รวมถึงจุดและ เส้นที่ประกอบขึ้นเป็น
const { languages, alternatives, segmentationResults } =
  await navigator.queryHandwritingRecognizerSupport({
    languages: ['en'],
    alternatives: true,
    segmentationResult: true,
  });

console.log(languages); // true or false
console.log(alternatives); // true or false
console.log(segmentationResult); // true or false

เมธอดจะแสดงการแปลงคำสัญญาด้วยออบเจ็กต์ผลลัพธ์ หากเบราว์เซอร์สนับสนุนฟีเจอร์นี้ ที่นักพัฒนาซอฟต์แวร์ระบุไว้ ค่าจะตั้งไว้เป็น true มิเช่นนั้น ระบบจะตั้งค่าเป็น false คุณสามารถใช้ข้อมูลนี้เพื่อเปิดหรือปิดใช้ฟีเจอร์บางอย่างภายในแอปพลิเคชันของคุณ หรือ ให้ปรับคำค้นหาแล้วส่งคำค้นหาใหม่

เริ่มวาดภาพ

ภายในแอปพลิเคชันของคุณ คุณควรจัดเตรียมพื้นที่ให้ผู้ใช้ป้อนข้อมูลด้วยลายมือ รายการ สำหรับเหตุผลด้านประสิทธิภาพ เราแนะนำให้ใช้วิธีนี้โดยให้ Canvas ผลลัพธ์ที่แน่นอน การใช้งานของส่วนนี้อยู่นอกขอบเขตของบทความนี้ แต่คุณสามารถดูที่การสาธิต เพื่อดูว่าจะทําได้อย่างไร

หากต้องการเริ่มภาพวาดใหม่ ให้ใช้เมธอด startDrawing() ในการจดจำ เมธอดนี้ใช้เวลา ที่มีคำแนะนำต่างๆ ในการปรับแต่งอัลกอริทึมการจดจำอย่างละเอียด คำใบ้ทั้งหมดเป็นตัวเลือก:

  • ประเภทข้อความที่ป้อน ได้แก่ ข้อความ อีเมล ตัวเลข หรืออักขระเดี่ยว (recognitionType)
  • ประเภทของอุปกรณ์อินพุต ได้แก่ การป้อนข้อมูลด้วยเมาส์ การแตะ หรือปากกา (inputType)
  • ข้อความก่อนหน้า (textContext)
  • จำนวนการคาดการณ์ทางเลือกที่มีแนวโน้มน้อยกว่าที่ควรแสดงผล (alternatives)
  • รายการอักขระที่ระบุตัวผู้ใช้ได้ ("กราฟ") ซึ่งผู้ใช้มีแนวโน้มที่จะป้อนมากที่สุด (graphemeSet)

Handwrite Recognition API สามารถทำงานได้ดีกับ เหตุการณ์ชี้ซึ่งให้ อินเทอร์เฟซนามธรรมสำหรับใช้อินพุตจากอุปกรณ์ชี้ตำแหน่งใดๆ อาร์กิวเมนต์เหตุการณ์ของตัวชี้ประกอบด้วย ประเภทของตัวชี้ที่ใช้อยู่ ซึ่งหมายความว่าคุณจะใช้เหตุการณ์ของตัวชี้เพื่อระบุประเภทอินพุตได้ โดยอัตโนมัติ ในตัวอย่างต่อไปนี้ จะมีภาพวาดสำหรับการจดจำลายมือโดยอัตโนมัติ สร้างขึ้นเมื่อเกิดเหตุการณ์ pointerdown ครั้งแรกในพื้นที่สำหรับการเขียนด้วยลายมือ ตามที่ pointerType อาจว่างเปล่าหรือตั้งเป็นค่าที่เป็นกรรมสิทธิ์ ผมจึงได้แนะนำการตรวจสอบความสอดคล้อง ให้ตรวจสอบว่ามีการตั้งค่าที่รองรับเฉพาะค่าที่รองรับสำหรับประเภทอินพุตของภาพวาดเท่านั้น

let drawing;
let activeStroke;

canvas.addEventListener('pointerdown', (event) => {
  if (!drawing) {
    drawing = recognizer.startDrawing({
      recognitionType: 'text', // email, number, per-character
      inputType: ['mouse', 'touch', 'pen'].find((type) => type === event.pointerType),
      textContext: 'Hello, ',
      alternatives: 2,
      graphemeSet: ['f', 'i', 'z', 'b', 'u'], // for a fizz buzz entry form
    });
  }
  startStroke(event);
});

เพิ่มเส้น

เหตุการณ์ pointerdown ยังเป็นที่ที่เหมาะสมสำหรับการเริ่มเส้นโครงร่างใหม่อีกด้วย โดยสร้างมิติข้อมูล HandwritingStroke นอกจากนี้คุณควรจัดเก็บเวลาปัจจุบันเป็นจุดอ้างอิงสำหรับ ประเด็นต่อๆ ไปที่เพิ่มเข้ามา ได้แก่

function startStroke(event) {
  activeStroke = {
    stroke: new HandwritingStroke(),
    startTime: Date.now(),
  };
  addPoint(event);
}

เพิ่มจุด

หลังจากที่สร้างเส้นโครงร่าง คุณควรเพิ่มจุดแรกลงในเส้นโครงร่างโดยตรง เนื่องจากคุณจะเพิ่ม คะแนนในภายหลัง คุณควรนำตรรกะการสร้างจุดไปใช้อีกวิธีการหนึ่ง ใน ตัวอย่างต่อไปนี้ เมธอด addPoint() จะคำนวณเวลาที่ผ่านไปจากการประทับเวลาอ้างอิง ข้อมูลนี้เป็นข้อมูลที่ไม่บังคับ แต่สามารถปรับปรุงคุณภาพการจดจำได้ จากนั้นอ่านตัวอักษร X และ พิกัด Y จากเหตุการณ์ของตัวชี้และเพิ่มจุดลงในเส้นโครงร่างปัจจุบัน

function addPoint(event) {
  const timeElapsed = Date.now() - activeStroke.startTime;
  activeStroke.stroke.addPoint({
    x: event.offsetX,
    y: event.offsetY,
    t: timeElapsed,
  });
}

ระบบจะเรียกเครื่องจัดการเหตุการณ์ pointermove เมื่อมีการย้ายตัวชี้ผ่านหน้าจอ คะแนนเหล่านั้น จะต้องมีการเพิ่มลงในเส้นโครงร่างด้วย เหตุการณ์สามารถเกิดขึ้นได้เช่นกันหากตัวชี้ไม่ได้อยู่ใน "ลง" เช่น เมื่อเลื่อนเคอร์เซอร์ผ่านหน้าจอโดยไม่ต้องกดเมาส์ เครื่องจัดการเหตุการณ์จากตัวอย่างต่อไปนี้จะตรวจสอบว่ามีเส้นโครงร่างที่ใช้งานอยู่หรือไม่ และเพิ่มฟังก์ชัน ให้กำหนดประเด็นใหม่

canvas.addEventListener('pointermove', (event) => {
  if (activeStroke) {
    addPoint(event);
  }
});

จดจำข้อความ

เมื่อผู้ใช้ยกตัวชี้อีกครั้ง คุณสามารถเพิ่มเส้นในภาพวาดของคุณได้โดยเรียกใช้ addStroke() วิธี ตัวอย่างต่อไปนี้จะรีเซ็ต activeStroke ด้วย ดังนั้น pointermove ตัวแฮนเดิลจะไม่เพิ่มจุดลงในเส้นโครงร่างที่เสร็จแล้ว

ต่อไปก็ถึงเวลาที่จะจดจำข้อมูลของผู้ใช้ด้วยการเรียกใช้เมธอด getPrediction() ใน ภาพวาด โดยปกติการจดจำจะใช้เวลาน้อยกว่า 2-3 มิลลิวินาที คุณจึงเรียกใช้ซ้ำๆ ได้ การคาดคะเนหากจำเป็น ตัวอย่างต่อไปนี้เรียกใช้การคาดการณ์ใหม่หลังจากแต่ละเส้นเสร็จสมบูรณ์

canvas.addEventListener('pointerup', async (event) => {
  drawing.addStroke(activeStroke.stroke);
  activeStroke = null;

  const [mostLikelyPrediction, ...lessLikelyAlternatives] = await drawing.getPrediction();
  if (mostLikelyPrediction) {
    console.log(mostLikelyPrediction.text);
  }
  lessLikelyAlternatives?.forEach((alternative) => console.log(alternative.text));
});

วิธีนี้จะส่งคืนสัญญาที่แก้ไขด้วยอาร์เรย์ของการคาดการณ์ที่เรียงตาม แนวโน้ม จํานวนองค์ประกอบขึ้นอยู่กับค่าที่คุณส่งไปยังคําแนะนํา alternatives คุณ สามารถใช้อาร์เรย์นี้เพื่อแสดงตัวเลือกของรายการที่ตรงกันที่เป็นไปได้แก่ผู้ใช้ และให้ผู้ใช้เลือก ตัวเลือก อีกวิธีหนึ่งคือ ใช้การคาดการณ์ที่เป็นไปได้มากที่สุด ซึ่งก็คือสิ่งที่เราทำใน

ออบเจ็กต์การคาดคะเนมีข้อความที่รู้จักและผลลัพธ์การแบ่งกลุ่มซึ่งฉันจะเลือก พูดคุยในหัวข้อต่อไปนี้

ข้อมูลเชิงลึกโดยละเอียดพร้อมผลลัพธ์ของการแบ่งกลุ่ม

หากแพลตฟอร์มเป้าหมายรองรับ ออบเจ็กต์การคาดการณ์ก็มีผลลัพธ์การแบ่งกลุ่มได้เช่นกัน นี่คืออาร์เรย์ที่มีกลุ่มการเขียนด้วยลายมือที่รู้จักทั้งหมด ซึ่งเป็นการผสมผสานระหว่าง อักขระที่ระบุตัวบุคคลนั้นได้ (grapheme) รวมถึงตำแหน่งของอักขระในข้อความที่รู้จัก (beginIndex, endIndex) รวมถึงเส้นและจุดที่สร้าง

if (mostLikelyPrediction.segmentationResult) {
  mostLikelyPrediction.segmentationResult.forEach(
    ({ grapheme, beginIndex, endIndex, drawingSegments }) => {
      console.log(grapheme, beginIndex, endIndex);
      drawingSegments.forEach(({ strokeIndex, beginPointIndex, endPointIndex }) => {
        console.log(strokeIndex, beginPointIndex, endPointIndex);
      });
    },
  );
}

คุณสามารถใช้ข้อมูลนี้เพื่อติดตามกราฟที่รู้จักบนผืนผ้าใบอีกครั้ง

สี่เหลี่ยมต่างๆ จะวาดรอบกราฟแต่ละแบบที่รู้จัก

จดจำเสร็จสมบูรณ์

หลังจากการจดจำเสร็จสมบูรณ์ คุณสามารถเพิ่มพื้นที่ว่างได้โดยเรียกใช้เมธอด clear() ใน HandwritingDrawing และวิธีการ finish() ใน HandwritingRecognizer:

drawing.clear();
recognizer.finish();

สาธิต

คอมโพเนนต์เว็บ <handwriting-textarea> จะใช้ ปรับปรุงอย่างต่อเนื่อง การควบคุมการแก้ไขสามารถเขียนด้วยลายมือได้ การจดจำ การคลิกปุ่มที่มุมขวาล่างของตัวควบคุมการแก้ไขจะเป็นการเปิดใช้งาน โหมดการวาด เมื่อคุณวาดเสร็จแล้ว คอมโพเนนต์เว็บจะเริ่มต้น การจดจำและเพิ่มข้อความที่รู้จักกลับไปยังตัวควบคุมการแก้ไข หากการจดจำลายมือ ไม่รองรับ API เลย หรือแพลตฟอร์มไม่รองรับฟีเจอร์ที่ขอ ปุ่มแก้ไข จะถูกซ่อน แต่การควบคุมการแก้ไขพื้นฐานจะยังคงใช้งานได้ในฐานะ <textarea>

คอมโพเนนต์เว็บมีพร็อพเพอร์ตี้และแอตทริบิวต์เพื่อกำหนดพฤติกรรมการจดจำจาก ภายนอก รวมถึง languages และ recognitiontype คุณสามารถตั้งค่าเนื้อหาของการควบคุมผ่านทาง แอตทริบิวต์ value:

<handwriting-textarea languages="en" recognitiontype="text" value="Hello"></handwriting-textarea>

หากต้องการทราบเกี่ยวกับการเปลี่ยนแปลงมูลค่า ให้ฟังเหตุการณ์ input

คุณลองใช้คอมโพเนนต์ได้โดยใช้การสาธิตเกี่ยวกับ Glitch และอย่าลืมดูข้อมูล ซอร์สโค้ด วิธีใช้การควบคุมใน ได้รับจาก npm

ความปลอดภัยและสิทธิ์

ทีม Chromium ได้ออกแบบและใช้งาน API การรู้จำลายมือโดยใช้หลักการสำคัญ ที่กำหนดไว้ในการควบคุมการเข้าถึงฟีเจอร์แพลตฟอร์มเว็บที่มีประสิทธิภาพ ซึ่งรวมถึงผู้ใช้ การควบคุม ความโปร่งใส และการยศาสตร์

การควบคุมของผู้ใช้

ผู้ใช้จะปิด Handwrite Recognition API ไม่ได้ ใช้ได้กับเว็บไซต์เท่านั้น แสดงผ่าน HTTPS และอาจเรียกใช้จากบริบทการเรียกดูระดับบนสุดเท่านั้น

ความโปร่งใส

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

ความต่อเนื่องของสิทธิ์

ขณะนี้ Handwrite Recognition API ไม่แสดงข้อความแจ้งสิทธิ์ ดังนั้นการอนุญาต ไม่จำเป็นต้องคงอยู่ไม่ว่าด้วยวิธีใด

ความคิดเห็น

ทีม Chromium ต้องการทราบประสบการณ์ของคุณเกี่ยวกับ Handwrite Recognition API

บอกเราเกี่ยวกับการออกแบบ API

มีบางอย่างเกี่ยวกับ API ที่ไม่ทำงานตามที่คุณคาดหวังหรือไม่ หรือมีวิธีการที่ขาดหายไป หรือผลิตภัณฑ์ได้ง่ายที่คุณจำเป็นต้องใช้เพื่อนำความคิดของคุณไปปฏิบัติ มีคำถามหรือความคิดเห็นเกี่ยวกับความปลอดภัย รุ่นอะไร แจ้งปัญหาเกี่ยวกับที่เก็บ GitHub ที่เกี่ยวข้อง หรือเพิ่มความเห็นของคุณลงใน ปัญหาที่มีอยู่

รายงานปัญหาเกี่ยวกับการติดตั้งใช้งาน

คุณพบข้อบกพร่องในการใช้งาน Chromium ไหม หรือการติดตั้งใช้งานแตกต่างจากข้อกําหนดหรือไม่ รายงานข้อบกพร่องที่ new.crbug.com อย่าลืมใส่รายละเอียดให้มากที่สุด วิธีการง่ายๆ ในการทำซ้ำ และป้อน Blink>Handwriting ในช่องคอมโพเนนต์ ภาพ Glitch เหมาะสำหรับการแชร์ซ้ำที่ง่ายและรวดเร็ว

แสดงการรองรับ API

คุณวางแผนที่จะใช้ Handwrite Recognition API ไหม การสนับสนุนแบบสาธารณะของคุณจะช่วยทีม Chromium จัดลำดับความสำคัญของฟีเจอร์และแสดงให้ผู้ให้บริการเบราว์เซอร์รายอื่นเห็นความสำคัญของการสนับสนุนเหล่านั้น

แชร์วิธีที่คุณวางแผนจะใช้ในชุดข้อความของ WICG Discourse ส่งทวีตถึง @ChromiumDev โดยใช้แฮชแท็ก #HandwritingRecognition และแจ้งให้เราทราบถึงตำแหน่งและวิธีที่คุณใช้งาน

กิตติกรรมประกาศ

บทความนี้ได้รับการตรวจสอบโดย Joe Medley, Honglin Yu และ Jiewei Qian รูปภาพหลักโดย Samir Bouaked เมื่อวันที่ หน้าจอแนะนํา