Nhận dạng chữ viết tay của người dùng

API Nhận dạng chữ viết tay cho phép bạn nhận dạng văn bản từ dữ liệu đầu vào viết tay ngay khi dữ liệu đó xuất hiện.

Christian Liebel

Thomas Steiner

Handwriting Recognition API (API Nhận dạng chữ viết tay) là gì?

API Nhận dạng chữ viết tay cho phép bạn chuyển đổi chữ viết tay (mực) của người dùng thành văn bản. Một số hệ điều hành từ lâu đã có các API như vậy và với khả năng mới này, các ứng dụng web của bạn cuối cùng cũng có thể sử dụng chức năng này. Quá trình chuyển đổi diễn ra ngay trên thiết bị của người dùng, hoạt động ngay cả ở chế độ ngoại tuyến mà không cần thêm bất kỳ thư viện hoặc dịch vụ nào của bên thứ ba.

API này triển khai tính năng nhận dạng được gọi là "trực tuyến" hoặc gần như theo thời gian thực. Điều này có nghĩa là dữ liệu đầu vào viết tay được nhận dạng trong khi người dùng đang vẽ bằng cách chụp và phân tích từng nét vẽ. Trái ngược với các quy trình "ngoại tuyến" như Nhận dạng ký tự quang học (OCR), trong đó chỉ biết sản phẩm cuối, thuật toán trực tuyến có thể cung cấp độ chính xác cao hơn do các tín hiệu bổ sung như trình tự thời gian và áp lực của từng nét mực.

Các trường hợp sử dụng được đề xuất cho API Nhận dạng chữ viết tay

Sau đây là một số ví dụ về cách sử dụng:

• Ứng dụng ghi chú mà người dùng muốn chụp ảnh ghi chú viết tay và dịch chúng thành văn bản.
• Biểu mẫu các ứng dụng mà người dùng có thể sử dụng phương thức nhập bằng bút hoặc ngón tay do hạn chế về thời gian.
• Các trò chơi yêu cầu điền chữ cái hoặc số, chẳng hạn như ô chữ, treo người hoặc sudoku.

Trạng thái hiện tại

API Nhận dạng chữ viết tay được cung cấp từ (Chromium 99).

Cách sử dụng API Nhận dạng chữ viết tay

Phát hiện tính năng

Phát hiện tính năng hỗ trợ trình duyệt bằng cách kiểm tra sự tồn tại của phương thức createHandwritingRecognizer() trên đối tượng trình điều hướng:

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

Các khái niệm cốt lõi

API Nhận dạng chữ viết tay chuyển đổi dữ liệu nhập bằng chữ viết tay thành văn bản, bất kể phương thức nhập (chuột, cảm ứng, bút). API này có 4 thực thể chính:

1. Điểm đại diện cho vị trí con trỏ tại một thời điểm cụ thể.
2. Một nét vẽ bao gồm một hoặc nhiều điểm. Quá trình ghi lại một nét vẽ bắt đầu khi người dùng đặt con trỏ xuống (tức là nhấp vào nút chuột chính hoặc chạm vào màn hình bằng bút hoặc ngón tay) và kết thúc khi họ nâng con trỏ lên.
3. Bản vẽ bao gồm một hoặc nhiều nét vẽ. Quá trình nhận dạng thực tế diễn ra ở cấp này.
4. Trình nhận dạng được định cấu hình bằng ngôn ngữ nhập dự kiến. Phương thức này dùng để tạo một thực thể của bản vẽ có áp dụng cấu hình trình nhận dạng.

Các khái niệm này được triển khai dưới dạng các giao diện và từ điển cụ thể mà tôi sẽ đề cập ngay sau đây.

Tạo trình nhận dạng

Để nhận dạng văn bản từ dữ liệu đầu vào viết tay, bạn cần lấy một thực thể của HandwritingRecognizer bằng cách gọi navigator.createHandwritingRecognizer() và truyền các quy tắc ràng buộc vào thực thể đó. Các quy tắc ràng buộc xác định mô hình nhận dạng chữ viết tay cần sử dụng. Hiện tại, bạn có thể chỉ định danh sách ngôn ngữ theo thứ tự ưu tiên:

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

Thận trọng: Cách triển khai hiện tại trên ChromeOS chỉ có thể nhận dạng một ngôn ngữ tại một thời điểm. Ứng dụng này chỉ hỗ trợ tiếng Anh (en) và mô hình cử chỉ (zxx-x-gesture) để nhận dạng các cử chỉ như gạch ngang từ.

Phương thức này trả về một lời hứa phân giải bằng một thực thể của HandwritingRecognizer khi trình duyệt có thể thực hiện yêu cầu của bạn. Nếu không, tính năng này sẽ từ chối lời hứa do có lỗi và tính năng nhận dạng chữ viết tay sẽ không hoạt động. Vì lý do này, trước tiên, bạn nên truy vấn khả năng hỗ trợ của trình nhận dạng cho các tính năng nhận dạng cụ thể.

Truy vấn tính năng hỗ trợ nhận dạng

Bằng cách gọi navigator.queryHandwritingRecognizerSupport(), bạn có thể kiểm tra xem nền tảng mục tiêu có hỗ trợ các tính năng nhận dạng chữ viết tay mà bạn dự định sử dụng hay không. Trong ví dụ sau, nhà phát triển:

• muốn phát hiện văn bản bằng tiếng Anh
• nhận được các dự đoán thay thế, ít có khả năng xảy ra hơn (nếu có)
• có quyền truy cập vào kết quả phân đoạn, tức là các ký tự được nhận dạng, bao gồm cả các điểm và nét tạo nên các ký tự đó

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

Phương thức này trả về một giải pháp hứa hẹn bằng đối tượng kết quả. Nếu trình duyệt hỗ trợ tính năng mà nhà phát triển chỉ định, thì giá trị của tính năng đó sẽ được đặt thành true. Nếu không, giá trị này sẽ được đặt thành false. Bạn có thể sử dụng thông tin này để bật hoặc tắt một số tính năng nhất định trong ứng dụng, hoặc để điều chỉnh truy vấn và gửi một truy vấn mới.

Lưu ý: Do lo ngại về việc tạo vân tay số, nên bạn không thể yêu cầu danh sách các tính năng được hỗ trợ, chẳng hạn như ngôn ngữ cụ thể. Đồng thời, trình duyệt có thể yêu cầu sự cho phép của người dùng hoặc từ chối hoàn toàn yêu cầu của bạn nếu bạn gửi quá nhiều truy vấn về tính năng.

Bắt đầu vẽ

Trong ứng dụng, bạn nên cung cấp một khu vực nhập để người dùng nhập bằng chữ viết tay. Vì lý do hiệu suất, bạn nên triển khai tính năng này bằng cách sử dụng đối tượng canvas. Việc triển khai chính xác phần này nằm ngoài phạm vi của bài viết này, nhưng bạn có thể tham khảo bản minh hoạ để xem cách thực hiện.

Để bắt đầu một bản vẽ mới, hãy gọi phương thức startDrawing() trên trình nhận dạng. Phương thức này lấy một đối tượng chứa nhiều gợi ý để tinh chỉnh thuật toán nhận dạng. Tất cả gợi ý đều không bắt buộc:

• Loại văn bản sẽ được nhập: văn bản, địa chỉ email, số hoặc một ký tự cá nhân (recognitionType)
• Loại thiết bị đầu vào: chuột, cảm ứng hoặc nhập bằng bút (inputType)
• Văn bản ở trước (textContext)
• Số lượng dự đoán thay thế ít có khả năng xảy ra hơn cần được trả về (alternatives)
• Danh sách các ký tự có thể nhận dạng người dùng ("biểu đồ") mà người dùng có nhiều khả năng sẽ nhập nhất (graphemeSet)

API Nhận dạng chữ viết tay hoạt động tốt với Sự kiện con trỏ, cung cấp giao diện trừu tượng để sử dụng dữ liệu đầu vào từ bất kỳ thiết bị trỏ nào. Các đối số sự kiện con trỏ chứa loại con trỏ đang được sử dụng. Điều này có nghĩa là bạn có thể sử dụng các sự kiện con trỏ để tự động xác định loại dữ liệu đầu vào. Trong ví dụ sau, bản vẽ để nhận dạng chữ viết tay được tự động tạo trong lần đầu tiên sự kiện pointerdown trên khu vực viết tay. Vì pointerType có thể trống hoặc được đặt thành một giá trị độc quyền, nên tôi đã giới thiệu một tính năng kiểm tra tính nhất quán để đảm bảo chỉ đặt các giá trị được hỗ trợ cho loại dữ liệu đầu vào của bản vẽ.

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);
});

Thận trọng: Quy trình triển khai hiện tại trên ChromeOS chưa hỗ trợ các tập hợp grapheme, do đó các tập hợp này sẽ tự động bị bỏ qua.

Thêm nét vẽ

Sự kiện pointerdown cũng là nơi thích hợp để bắt đầu một nét vẽ mới. Để làm như vậy, hãy tạo một bản sao mới của HandwritingStroke. Ngoài ra, bạn nên lưu trữ thời gian hiện tại làm điểm tham chiếu cho các điểm tiếp theo được thêm vào:

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

Thêm một điểm

Sau khi tạo nét vẽ, bạn nên thêm trực tiếp điểm đầu tiên vào nét vẽ đó. Vì bạn sẽ thêm nhiều điểm hơn sau này, nên bạn nên triển khai logic tạo điểm trong một phương thức riêng. Trong ví dụ sau, phương thức addPoint() tính toán thời gian đã trôi qua từ dấu thời gian tham chiếu. Thông tin theo thời gian là không bắt buộc nhưng có thể cải thiện chất lượng nhận dạng. Sau đó, lớp này sẽ đọc toạ độ X và Y từ sự kiện con trỏ và thêm điểm vào nét vẽ hiện tại.

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

Trình xử lý sự kiện pointermove được gọi khi con trỏ di chuyển trên màn hình. Bạn cũng cần thêm những điểm đó vào nét vẽ. Sự kiện cũng có thể được kích hoạt nếu con trỏ không ở trạng thái "xuống", chẳng hạn như khi di chuyển con trỏ trên màn hình mà không nhấn nút chuột. Trình xử lý sự kiện trong ví dụ sau sẽ kiểm tra xem có nét vẽ đang hoạt động hay không và thêm điểm mới vào nét vẽ đó.

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

Nhận dạng văn bản

Khi người dùng nhấc con trỏ lên một lần nữa, bạn có thể thêm nét vẽ vào bản vẽ bằng cách gọi phương thức addStroke(). Ví dụ sau đây cũng đặt lại activeStroke, vì vậy, trình xử lý pointermove sẽ không thêm điểm vào nét vẽ đã hoàn tất.

Lưu ý: Nếu cần, bạn cũng có thể sử dụng phương thức getStrokes() của bản vẽ để liệt kê tất cả các nét vẽ và phương thức removeStroke() để xoá một nét vẽ cụ thể khỏi bản vẽ.

Tiếp theo, đã đến lúc nhận dạng dữ liệu đầu vào của người dùng bằng cách gọi phương thức getPrediction() trên bản vẽ. Quá trình nhận dạng thường mất chưa đến vài trăm mili giây, vì vậy, bạn có thể liên tục chạy các dự đoán nếu cần. Ví dụ sau đây chạy một thông tin dự đoán mới sau mỗi lần vẽ xong nét vẽ.

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));
});

Phương thức này trả về một lời hứa phân giải bằng một mảng các dự đoán được sắp xếp theo khả năng xảy ra. Số lượng phần tử phụ thuộc vào giá trị bạn đã truyền vào gợi ý alternatives. Bạn có thể sử dụng mảng này để cho người dùng lựa chọn các kết quả trùng khớp có thể có và yêu cầu họ chọn một lựa chọn. Ngoài ra, bạn có thể chỉ cần sử dụng dự đoán có khả năng cao nhất, đó là những gì tôi sẽ làm trong ví dụ này.

Đối tượng dự đoán chứa văn bản được nhận dạng và kết quả phân đoạn không bắt buộc. Tôi sẽ thảo luận về đối tượng này trong phần sau.

Thông tin chi tiết chi tiết kèm theo kết quả phân đoạn

Nếu được nền tảng mục tiêu hỗ trợ, đối tượng dự đoán cũng có thể chứa kết quả phân đoạn. Đây là một mảng chứa tất cả các đoạn chữ viết tay được nhận dạng, một tổ hợp của ký tự được nhận dạng mà người dùng có thể xác định (grapheme) cùng với vị trí của ký tự đó trong văn bản được nhận dạng (beginIndex, endIndex) và các nét vẽ và điểm tạo ra ký tự đó.

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);
      });
    },
  );
}

Bạn có thể sử dụng thông tin này để theo dõi lại các ký tự được nhận dạng trên canvas.

Nhận dạng hoàn chỉnh

Sau khi quá trình nhận dạng hoàn tất, bạn có thể giải phóng tài nguyên bằng cách gọi phương thức clear() trên HandwritingDrawing và phương thức finish() trên HandwritingRecognizer:

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

Bản minh hoạ

Thành phần web <handwriting-textarea> triển khai một chế độ kiểm soát chỉnh sửa được nâng cao dần, có khả năng nhận dạng chữ viết tay. Bằng cách nhấp vào nút ở góc dưới bên phải của thành phần điều khiển chỉnh sửa, bạn sẽ kích hoạt chế độ vẽ. Khi bạn hoàn tất thao tác vẽ, thành phần web sẽ tự động bắt đầu nhận dạng và thêm lại văn bản đã nhận dạng vào bộ điều khiển chỉnh sửa. Nếu API Nhận dạng chữ viết tay không được hỗ trợ hoặc nền tảng không hỗ trợ các tính năng được yêu cầu, thì nút chỉnh sửa sẽ bị ẩn. Tuy nhiên, bạn vẫn có thể sử dụng thành phần điều khiển chỉnh sửa cơ bản dưới dạng <textarea>.

Thành phần web cung cấp các thuộc tính và thuộc tính để xác định hành vi nhận dạng từ bên ngoài, bao gồm cả languages và recognitiontype. Bạn có thể đặt nội dung của thành phần điều khiển thông qua thuộc tính value:

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

Để nhận thông báo về mọi thay đổi đối với giá trị, bạn có thể theo dõi sự kiện input.

Bạn có thể thử thành phần này bằng cách sử dụng bản minh hoạ này trên Glitch. Ngoài ra, hãy nhớ xem mã nguồn. Để sử dụng thành phần điều khiển trong ứng dụng, hãy tải thành phần đó từ npm.

Tính bảo mật và quyền truy cập

Nhóm Chromium đã thiết kế và triển khai API Nhận dạng chữ viết tay theo các nguyên tắc cốt lõi đã xác định trong Kiểm soát quyền truy cập vào các tính năng nền tảng web mạnh mẽ, bao gồm cả quyền kiểm soát của người dùng, tính minh bạch và công thái học.

Quyền kiểm soát của người dùng

Người dùng không thể tắt API Nhận dạng chữ viết tay. Phương thức này chỉ dành cho các trang web được phân phối qua HTTPS và chỉ có thể được gọi từ ngữ cảnh duyệt web cấp cao nhất.

Sự minh bạch

Không có chỉ báo cho biết liệu tính năng nhận dạng chữ viết tay có đang hoạt động hay không. Để ngăn chặn việc tạo vân tay số, trình duyệt sẽ triển khai các biện pháp đối phó, chẳng hạn như hiển thị lời nhắc cấp quyền cho người dùng khi phát hiện hành vi có thể bị lợi dụng.

Quyền ổn định

API Nhận dạng chữ viết tay hiện không hiển thị lời nhắc cấp quyền nào. Do đó, bạn không cần phải duy trì quyền theo bất kỳ cách nào.

Phản hồi

Nhóm Chromium muốn biết trải nghiệm của bạn với API Nhận dạng chữ viết tay.

Cho chúng tôi biết về thiết kế API

API có hoạt động như mong đợi không? Hay có phương thức hoặc thuộc tính nào bị thiếu mà bạn cần để triển khai ý tưởng của mình không? Bạn có câu hỏi hoặc nhận xét về mô hình bảo mật không? Báo cáo vấn đề về thông số kỹ thuật trên kho lưu trữ GitHub tương ứng hoặc thêm ý kiến của bạn về vấn đề hiện có.

Báo cáo vấn đề về việc triển khai

Bạn có tìm thấy lỗi khi triển khai Chromium không? Hay cách triển khai có khác với thông số kỹ thuật không? Gửi lỗi tại new.crbug.com. Hãy nhớ cung cấp càng nhiều thông tin chi tiết càng tốt, hướng dẫn đơn giản để tái hiện lỗi và nhập Blink>Handwriting vào hộp Components (Thành phần). Glitch rất hữu ích để chia sẻ các bản tái hiện nhanh chóng và dễ dàng.

Hiện thông tin hỗ trợ về API này

Bạn có dự định sử dụng API Nhận dạng chữ viết tay không? Sự ủng hộ công khai của bạn giúp nhóm Chromium ưu tiên các tính năng và cho các nhà cung cấp trình duyệt khác thấy tầm quan trọng của việc hỗ trợ các tính năng đó.

Hãy chia sẻ cách bạn dự định sử dụng công cụ này trên luồng thảo luận Discourse của WICG. Gửi một tweet đến @ChromiumDev bằng hashtag #HandwritingRecognition và cho chúng tôi biết bạn đang sử dụng tính năng này ở đâu và như thế nào.

Liên kết Hữu ích

• Giải thích
• Bản nháp quy cách
• Kho lưu trữ GitHub
• ChromeStatus
• Lỗi Chromium
• Bài đánh giá TAG
• Ý định tạo nguyên mẫu
• Luồng nhà phát triển WebKit
• Vị trí tiêu chuẩn của Mozilla

Lời cảm ơn

Tài liệu này do Joe Medley, Honglin Yu và Jiewei Qian xem xét.