Reconnaître l'écriture manuscrite des utilisateurs

L'API de reconnaissance d'écriture manuscrite vous permet de reconnaître du texte à partir d'une saisie manuscrite en temps réel.

Christian Liebel

Thomas Steiner

Qu'est-ce que l'API de reconnaissance d'écriture manuscrite ?

L'API de reconnaissance de l'écriture manuscrite vous permet de convertir l'écriture manuscrite (encre) de vos utilisateurs en texte. Certains systèmes d'exploitation incluent depuis longtemps de telles API. Avec cette nouvelle fonctionnalité, vos applications Web peuvent enfin utiliser cette fonctionnalité. La conversion a lieu directement sur l'appareil de l'utilisateur, en mode hors connexion, sans ajouter de bibliothèques ni de services tiers.

Cette API implémente ce que l'on appelle "en ligne" ou de la reconnaissance en temps quasi réel. Cela signifie que saisie manuscrite est reconnue pendant que l'utilisateur la dessine en capturant et en analysant l'unique coups de pouce. À l'inverse d'une connexion "hors ligne" telles que la reconnaissance optique des caractères (OCR), seul le produit final est connu, les algorithmes en ligne peuvent fournir un niveau de précision plus élevé grâce des signaux supplémentaires tels que la séquence temporelle et la pression des traits d'encre individuels.

Cas d'utilisation suggérés pour l'API de reconnaissance d'écriture manuscrite

Exemples d'utilisation:

• Applications de prise de notes dans lesquelles les utilisateurs souhaitent prendre des notes manuscrites et les faire traduire en texte.
• Applications Forms dans lesquelles les utilisateurs peuvent utiliser la saisie au stylo ou avec le doigt pour des contraintes de temps.
• Jeux qui nécessitent de saisir des lettres ou des chiffres, tels que les mots croisés, le pendu ou le sudoku.

État actuel

L'API de reconnaissance de l'écriture manuscrite est disponible sur (Chromium 99).

Utiliser l'API de reconnaissance d'écriture manuscrite

Détection de caractéristiques

Détectez la compatibilité des navigateurs en vérifiant l'existence de la méthode createHandwritingRecognizer(). sur l'objet "navigateur" :

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

Concepts fondamentaux

L'API HandWrite Recognition convertit les saisies manuscrites en texte, quel que soit le mode de saisie. (souris, toucher, stylet). L'API comporte quatre entités principales:

1. Un point représente l'emplacement du pointeur à un moment donné.
2. Un trait se compose d'un ou de plusieurs points. L'enregistrement d'un trait commence lorsque l'utilisateur place le pointeur vers le bas (par exemple, lorsqu'il clique sur le bouton principal de la souris, ou qu'il touche l'écran avec le stylet ou un doigt) et se termine lorsqu'elles remontent le pointeur.
3. Un dessin se compose d'un ou de plusieurs traits. La reconnaissance proprement dite a lieu à ce niveau.
4. Le reconnu est configuré avec la langue de saisie attendue. Il permet de créer une instance d'un dessin avec la configuration de reconnaissance appliquée.

Ces concepts sont implémentés sous la forme d'interfaces et de dictionnaires spécifiques, que nous aborderons plus tard.

Créer un programme de reconnaissance

Pour reconnaître du texte à partir d'une entrée manuscrite, vous devez obtenir l'instance d'une HandwritingRecognizer en appelant navigator.createHandwritingRecognizer() et en transmettant des contraintes avec lui. Les contraintes déterminent le modèle de reconnaissance de l'écriture manuscrite à utiliser. Actuellement, vous vous pouvez indiquer une liste de langues par ordre de préférence:

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

Attention:L'implémentation actuelle sur ChromeOS ne peut reconnaître qu'une seule langue à la fois. Il n'accepte que l'anglais (en) et le modèle de geste (zxx-x-gesture) pour reconnaître des gestes tels que barrer des mots.

La méthode renvoie une promesse résolue avec l'instance de HandwritingRecognizer lorsque la méthode le navigateur peut répondre à votre demande. Sinon, il rejette la promesse avec une erreur, et la reconnaissance de l'écriture manuscrite ne sera pas disponible. C'est pourquoi vous pouvez interroger la prise en charge de certaines fonctions de reconnaissance par le programme.

Compatibilité avec le programme de reconnaissance d'interrogations

En appelant navigator.queryHandwritingRecognizerSupport(), vous pouvez vérifier si la plate-forme cible prend en charge les fonctionnalités de reconnaissance de l'écriture manuscrite que vous souhaitez utiliser. Dans l'exemple suivant, développeur:

• souhaite détecter du texte en anglais
• obtenir des prédictions alternatives moins probables lorsqu'elles sont disponibles
• accéder au résultat de la segmentation, c'est-à-dire aux caractères reconnus, y compris les points et traits qui les composent

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

La méthode renvoie une promesse résolue avec un objet de résultat. Si le navigateur est compatible avec la fonctionnalité spécifiée par le développeur, sa valeur sera définie sur true. Sinon, il sera défini sur false. Vous pouvez utiliser ces informations pour activer ou désactiver certaines fonctionnalités de votre application, ou pour ajuster votre requête et en envoyer une nouvelle.

Remarque:En raison de problèmes liés au fingerprinting, vous ne pouvez pas demander la liste des fonctionnalités compatibles, telles que langues spécifiques, et le navigateur peut demander l'autorisation de l'utilisateur ou refuser complètement votre demande si vous envoyez trop de requêtes de caractéristiques.

Commencer un dessin

Dans votre application, proposez une zone de saisie dans laquelle l'utilisateur écrit ses notes à la main. les entrées correspondantes. Pour des raisons de performances, il est recommandé de mettre en œuvre ce mécanisme à l'aide d'une objet canevas. Le mot clé exact l'implémentation de cette partie n'entre pas dans le cadre de cet article, mais vous pouvez consulter la démonstration pour voir comment faire.

Pour commencer un nouveau dessin, appelez la méthode startDrawing() dans le programme de reconnaissance. Cette méthode utilise un contenant différentes indications pour affiner l'algorithme de reconnaissance. Tous les conseils sont facultatifs:

• Type de texte saisi: texte, adresses e-mail, chiffres ou caractère individuel (recognitionType)
• Type de périphérique d'entrée: souris, écran tactile ou stylet (inputType)
• Le texte qui précède (textContext)
• Nombre de prédictions moins probables à renvoyer (alternatives)
• Une liste de caractères identifiables par l'utilisateur ("graphemes") que l'utilisateur est le plus susceptible de saisir (graphemeSet)

L'API de reconnaissance de l'écriture manuscrite fonctionne bien avec Les événements de pointeur, qui fournissent une interface abstraite pour consommer l'entrée de n'importe quel périphérique de pointage. Les arguments d'événement de pointeur contiennent le type de pointeur utilisé. Cela signifie que vous pouvez utiliser des événements de pointeur pour déterminer le type d'entrée automatiquement. Dans l'exemple suivant, le dessin destiné à la reconnaissance de l'écriture manuscrite est automatiquement créé à la première occurrence d'un événement pointerdown dans la zone d'écriture manuscrite. En tant que pointerType peut être vide ou défini sur une valeur propriétaire, j'ai introduit une vérification de cohérence pour assurez-vous que seules des valeurs acceptées sont définies pour le type d'entrée du dessin.

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

Attention:L'implémentation actuelle sur ChromeOS n'est pas compatible avec les jeux de graphèmes mais ils sont ignorés sans notification.

Ajouter un trait

L'événement pointerdown est également le bon endroit pour commencer un nouveau trait. Pour ce faire, créez Instance de HandwritingStroke. De plus, vous devez stocker l'heure actuelle comme point de référence les points suivants y ont été ajoutés:

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

Ajouter un point

Après avoir créé le trait, vous devez y ajouter directement le premier point. Au fur et à mesure que vous ajouterez par la suite, il est judicieux d'implémenter la logique de création de points dans une méthode distincte. Dans Dans l'exemple suivant, la méthode addPoint() calcule le temps écoulé à partir de l'horodatage de référence. Les informations temporelles sont facultatives, mais peuvent améliorer la qualité de la reconnaissance. Ensuite, il lit le X et coordonnées Y à partir de l'événement de pointeur et ajoute le point au trait actuel.

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

Le gestionnaire d'événements pointermove est appelé lorsque le pointeur est déplacé à l'écran. Ces points doivent également être ajoutés au trait. L'événement peut également être déclenché si le pointeur ne se trouve pas dans une "bas" état actuel, par exemple lorsque vous déplacez le curseur sur l'écran sans appuyer sur la souris . Le gestionnaire d'événements de l'exemple suivant vérifie si un trait actif existe et ajoute le nouveau point.

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

Reconnaître du texte

Lorsque l'utilisateur soulève à nouveau le pointeur, vous pouvez ajouter le trait à votre dessin en appelant la méthode addStroke(). L'exemple suivant réinitialise également activeStroke. pointermove gestionnaire n'ajoutera pas de points au trait terminé.

Remarque:Si nécessaire, vous pouvez également utiliser la méthode getStrokes() du dessin pour afficher tous les traits, et la méthode removeStroke() pour en supprimer une en particulier du dessin.

Ensuite, il est temps de reconnaître l'entrée utilisateur en appelant la méthode getPrediction() au niveau de la un dessin. La reconnaissance prend généralement moins de quelques centaines de millisecondes. Vous pouvez donc exécuter des prédictions si nécessaire. L'exemple suivant exécute une nouvelle prédiction après chaque trait terminé.

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

Cette méthode renvoie une promesse qui se résout avec un tableau de prédictions classées par leur de probabilité. Le nombre d'éléments dépend de la valeur que vous avez transmise à l'indice alternatives. Toi pourrait utiliser ce tableau pour présenter à l'utilisateur un choix de correspondances possibles et lui demander de sélectionner une . Sinon, vous pouvez simplement choisir la prédiction la plus probable. à titre d'exemple.

L'objet de prédiction contient le texte reconnu et un résultat de segmentation facultatif, que je dans la section suivante.

Insights détaillés avec résultats de segmentation

S'il est compatible avec la plate-forme cible, l'objet de prédiction peut également contenir un résultat de segmentation. Il s'agit d'un tableau contenant tous les segments d'écriture manuscrite reconnus, une combinaison des caractère identifiant l'utilisateur (grapheme), ainsi que sa position dans le texte reconnu (beginIndex, endIndex), et des traits et des points qui l'ont créée.

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

Vous pouvez utiliser ces informations pour retrouver les graphèmes reconnus sur la toile.

Reconnaissance totale

Une fois la reconnaissance terminée, vous pouvez libérer des ressources en appelant la méthode clear() au niveau de HandwritingDrawing et la méthode finish() sur HandwritingRecognizer:

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

Démo

Le composant Web <handwriting-textarea> implémente une amélioration progressive, commande d'édition capable d'écrire à la main de la reconnaissance vocale. Cliquez sur le bouton dans l'angle inférieur droit de la commande d'édition pour activer le mode dessin. Une fois le dessin terminé, le composant Web lance automatiquement reconnaissance et rajoutez le texte reconnu à la commande d'édition. Si la fonction de reconnaissance de l'écriture manuscrite L'API n'est pas du tout compatible ou la plate-forme n'est pas compatible avec les fonctionnalités demandées, le bouton "Modifier" sera masquée. Toutefois, la commande de modification de base reste utilisable en tant que <textarea>.

Le composant Web propose des propriétés et des attributs permettant de définir le comportement de reconnaissance à partir de à l'extérieur, y compris languages et recognitiontype. Vous pouvez définir le contenu de la commande via la Attribut value:

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

Pour être informé des modifications apportées à la valeur, vous pouvez écouter l'événement input.

Vous pouvez essayer le composant en suivant cette démonstration sur Glitch. N'oubliez pas non plus de consulter code source. Pour utiliser la commande l'obtenir auprès de npm.

Sécurité et autorisations

L'équipe Chromium a conçu et mis en œuvre l'API de reconnaissance de l'écriture manuscrite en suivant les principes fondamentaux définies dans la section Contrôler l'accès à des fonctionnalités puissantes de plate-forme Web, y compris les règles le contrôle, la transparence et l'ergonomie.

Contrôle des utilisateurs

L'utilisateur ne peut pas désactiver l'API de reconnaissance d'écriture manuscrite. Il n'est disponible que pour les sites Web distribués via HTTPS et ne peuvent être appelés qu'à partir du contexte de navigation de premier niveau.

Transparence

L'activation de la reconnaissance de l'écriture manuscrite n'est pas indiquée. Pour empêcher le fingerprinting, le navigateur met en œuvre des contre-mesures, comme afficher une invite d'autorisation auprès de l'utilisateur lorsqu'il détecte d'éventuels abus.

Persistance des autorisations

Actuellement, l'API HandWrite Recognition n'affiche aucune invite d'autorisation. Ainsi, l'autorisation n'a pas besoin d'être conservée de quelque manière que ce soit.

Commentaires

L'équipe Chromium souhaite connaître votre avis sur votre expérience avec l'API de reconnaissance de l'écriture manuscrite.

Présentez-nous la conception de l'API

Y a-t-il un aspect de l'API qui ne fonctionne pas comme prévu ? Ou manque-t-il des méthodes ou les propriétés dont vous avez besoin pour mettre en œuvre votre idée ? Vous avez une question ou un commentaire sur la sécurité ? Signalez un problème de spécification dans le dépôt GitHub correspondant ou ajoutez vos commentaires à un problème existant.

Signaler un problème d'implémentation

Avez-vous détecté un bug dans l'implémentation de Chromium ? Ou l'implémentation est-elle différente des spécifications ? Signalez un bug sur new.crbug.com. Veillez à inclure autant de détails que possible, des instructions simples pour le reproduire et saisissez Blink>Handwriting dans la zone Composants. Glitch est idéal pour partager des répétitions rapidement et facilement.

Apportez votre soutien à l'API

Prévoyez-vous d'utiliser l'API de reconnaissance d'écriture manuscrite ? Votre assistance publique aide l'équipe Chromium hiérarchisent les fonctionnalités et montre aux autres fournisseurs de navigateurs à quel point il est essentiel de les prendre en charge.

Expliquez comment vous prévoyez de l'utiliser dans le fil de discussion du discours de WiCG. Envoyer un tweet à @ChromiumDev en utilisant le hashtag #HandwritingRecognition et n'hésitez pas à nous dire où et comment vous l'utilisez.

Liens utiles

• Vidéo explicative
• Brouillon de la spécification
• Dépôt GitHub
• ChromeStatus
• Bug Chromium
• Examen TAG
• Intention de prototypage
• Thread WebKit-Dev
• Position des normes de Mozilla

Remerciements

Cet article a été lu par Joe Medley, Honglin Yu et Jiewei Qian. Image héros de Samir Bouaked sur Unsplash.