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 nhập viết tay khi nó xảy ra.

Christian Liebel

Thomas Steiner

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 đã bao gồm những API như vậy từ lâu. Với chức năng mới này, các ứng dụng web của bạn cuối cùng có thể sử dụng chức năng này. Quá trình chuyển đổi diễn ra trực tiếp 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 được gọi là "trực tuyến" hoặc nhận dạng gần như theo thời gian thực. Điều này có nghĩa là dữ liệu nhập bằng tay sẽ được nhận dạng trong khi người dùng vẽ nó bằng cách ghi lại và phân tích từng nét. 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 đề 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 ghi chú viết tay và yêu cầu dịch ghi chú 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 chính

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

1. Điểm đại diện cho vị trí của con trỏ tại một thời điểm cụ thể.
2. Nét vẽ bao gồm một hoặc nhiều điểm. Quá trình ghi 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 trở lại.
3. Bản vẽ bao gồm một hoặc nhiều nét vẽ. Quá trình ghi nhận thực tế diễn ra ở cấp độ này.
4. Trình nhận dạng được định cấu hình với ngôn ngữ nhập dự kiến. Thuộc tính này dùng để tạo một bản sao 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 có một thực thể của HandwritingRecognizer bằng cách gọi navigator.createHandwritingRecognizer() và truyền các điều kiện ràng buộc vào đó. Các quy tắc ràng buộc xác định mô hình nhận dạng chữ viết tay sẽ được 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'],
});

Phương thức này sẽ trả về 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 hỗ trợ trình 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 đị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ụm từ gợi ý thay thế, ít có khả năng xảy ra (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 chúng

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 do nhà phát triển chỉ định, thì giá trị của trình duyệt sẽ được đặt thành true. Nếu không, giá trị này sẽ được thiết lập 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 truy vấn mới.

Bắt đầu vẽ

Trong ứng dụng của mình, bạn nên cung cấp một khu vực nhập dữ liệu nơi người dùng thực hiện các thao tác viết tay. Vì lý do liên quan đến hiệu suất, bạn nên triển khai phương thức này với sự trợ giúp của đố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 sẽ sử dụng 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 ý là 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 phương thức nhập bằng bút (inputType)
• Văn bản ở trước (textContext)
• Số lượng cụm từ gợi ý thay thế ít có khả năng đượ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 nhập từ mọi thiết bị trỏ. 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 giá trị độc quyền, nên tôi đã triển khai quy trình 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ê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. Để thực hiện việc này, hãy tạo một thực thể 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ì sau này bạn sẽ thêm nhiều điểm hơn, 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 tạm thời là không bắt buộc, nhưng có thể cải thiện chất lượng nhận dạng. Sau đó, ứng dụng sẽ đọc toạ độ X và Y từ sự kiện con trỏ rồi 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 nâng lên 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ó một nét vẽ đang hoạt động nào không và thêm điểm mới vào đó.

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

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

Khi người dùng nâng con trỏ lên lại, 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 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.

Tiếp theo, đã đến lúc nhận dạng hoạt động đầ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 hứa hẹn sẽ phân giải bằng một loạt các dự đoán được sắp xếp theo khả năng có thể xảy ra. Số lượng phần tử phụ thuộc vào giá trị bạn đã chuyển đến gợi ý alternatives. Bạn có thể sử dụng mảng này để hiển thị cho người dùng các lựa chọn về các kết quả phù hợp và cho phép họ chọn một tuỳ 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ề nội dung này trong phần sau.

Thông tin chi tiết kèm theo kết quả về 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, kết hợp giữa ký tự có thể nhận dạng người dùng được nhận dạng (grapheme) cùng với vị trí của ký tự đó trong văn bản được nhận dạng (beginIndex, endIndex), cũng như các nét và điểm tạo ra đoạn mã đó.

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ể dùng thông tin này để theo dõi lại các đồ thị được nhận dạng trên canvas.

Nhận dạng toàn bộ

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 chức năng điều khiển chỉnh sửa được nâng cao dần có khả năng nhận dạng chữ viết tay. Khi nhấp vào nút ở góc dưới bên phải của chế độ đ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, chế độ điều khiển chỉnh sửa cơ bản vẫn có thể dùng làm <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 languages và recognitiontype. Bạn có thể đặt nội dung của chế độ đ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 qua bản minh hoạ này trên Glitch. Bạn cũng nên xem mã nguồn. Để sử dụng chế độ điều khiển này trong ứng dụng, hãy lấy chế độ này từ npm.

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

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. Lệnh 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 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 sai trái có thể xảy ra.

Khả năng lưu trữ cố định quyền

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

Ý kiến phản hồi

Nhóm Chromium muốn nghe về 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

Có điều gì về API không hoạt động như bạn mong đợi không? Hay có phương thức hoặc thuộc tính nào bị thiếu để triển khai ý tưởng không? Bạn có câu hỏi hoặc nhận xét về mô hình bảo mật này? 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 sự cố về triển khai

Bạn có phát hiện lỗi trong quá trình 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? Báo cáo lỗi tại new.crbug.com. Hãy nhớ cung cấp nhiều thông tin chi tiết nhất có thể, các hướng dẫn đơn giản để tái tạo và nhập Blink>Handwriting vào hộp Thành phần. Glitch rất hữu ích khi chia sẻ các bản dựng lại nhanh chóng và dễ dàng.

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

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

Chia sẻ cách bạn dự định sử dụng tài khoản này trên chuỗi bài thuyết trình về WICG. Gửi một bài đăng đến @ChromiumDev kèm theo hashtag #HandwritingRecognition và cho chúng tôi biết bạn đang sử dụng hashtag đó ở đâu và bằng cách nào.

Các Liên kết Hữu dụng

• Người 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-Dev
• Vị trí tiêu chuẩn của Mozilla

Xác nhận

Bài viết này do Joe Medley, Honglin Yu và Jiewei Qian đánh giá. Hình ảnh chính của Samir Bouaked trên Unsplash.