अपने उपयोगकर्ताओं की हैंडराइटिंग को पहचानें

हैंडराइटिंग की पहचान करने वाला एपीआई, आपको हाथ से लिखे गए इनपुट के टेक्स्ट को रीयल टाइम में ही पहचानने की सुविधा देता है.

Christian Liebel

Thomas Steiner

Handwriting Recognition API क्या है?

हैंडराइटिंग की पहचान करने वाले एपीआई की मदद से, उपयोगकर्ताओं की हैंडराइटिंग (स्याही) को टेक्स्ट में बदला जा सकता है. कुछ ऑपरेटिंग सिस्टम में, ऐसे एपीआई लंबे समय से शा��िल हैं. इस नई सुविधा की मदद से, आपके वेब ऐप्लिकेशन आखिरकार इस सुविधा का इस्तेमाल कर सकते हैं. कन्वर्ज़न सीधे उपयोगकर्ता के डिवाइस पर होता है. यह ऑफ़लाइन मोड में भी काम करता है. इसके लिए, तीसरे पक्ष की लाइब्रेरी या सेवाओं को जोड़ने की ज़रूरत नहीं होती.

यह एपीआई, "ऑन-लाइन" या करीब-करीब रीयल-टाइम में पहचान करने की सुविधा देता है. इसका मतलब है कि उपयोगकर्ता जब लिख रहा होता है, तब ही लिखाई को पहचान लिया जाता है. इसके लिए, एक-एक स्ट्रोक को कैप्चर करके उसका विश्लेषण किया जाता है. ऑप्टिकल कैरेक्टर रिकग्निशन (ओसीआर) जैसी "ऑफ़-लाइन" प्रोसेस से ठीक उलट, जहां सिर्फ़ असली प्रॉडक्ट के बारे में जानकारी मिलती है उसके उलट, ऑन-लाइन एल्गोरिदम ज़्यादा सटीक नतीजे दे सकते हैं. ऐसा, टेंपोरल क्रम और अलग-अलग इंक स्ट्रोक के दबाव जैसे अन्य सिग्नल की वजह से होता है.

लिखावट की पहचान करने वाले एपीआई के इस्तेमाल के सुझाए गए उदाहरण

इसका इस्तेमाल इन कामों के लिए किया जा सकता है:

• नोट लेने वाले ऐसे ऐप्लिकेशन जिनमें उपयोगकर्ता हाथ से लिखे नोट कैप्चर करना चाहते हैं और उनका टेक्स्ट में अनुवाद कराना चाहते हैं.
• Forms के ऐसे ऐप्लिकेशन जिनमें समय की कमी की वजह से, पेन या उंगलियों से इनपुट करने की सुविधा का इस्तेमाल किया जा सकता है.
• ऐसे गेम जिनमें अक्षर या संख्याएं भरनी होती हैं, जैसे कि क्रॉसवर्ड, हैंगमैन या सुडोकू.

मौजूदा स्थिति

लिखावट की पहचान करने वाला एपीआई, Chromium 99 से उपलब्�� है.

लिखावट की पहचान करने वाले एपीआई का इस्तेमाल करने का तरीका

सुविधा की पहचान

नेविगेटर ऑब्जेक्ट पर createHandwritingRecognizer() तरीके के मौजूद होने की जांच करके, ब्राउज़र के साथ काम करने की सुविधा का पता लगाएं:

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

मुख्य कॉन्सेप्ट

हैंडराइटिंग की पहचान करने वाला एपीआई, हाथ से लिखे गए इनपुट को टेक्स्ट में बदलता है. भले ही, इनपुट का कोई भी तरीका (माउस, टच, पेन) हो. एपीआई में चार मुख्य इकाइयां होती हैं:

1. पॉइंट से पता चलता है कि किसी खास समय पर पॉइंटर कहां था.
2. स्ट्रोक में एक या उससे ज़्यादा पॉइंट होते हैं. स्ट्रोक की रिकॉर्डिंग तब शुरू होती है, जब उपयोगकर्ता कर्सर को नीचे रखता है. जैसे, माउस के प्राइमरी बटन पर क्लिक करना या स्क्रीन को अपनी उंगली या पैंसिल से छूना. यह रिकॉर्डिंग तब खत्म होती है, जब उपयोगकर्ता कर्सर को फिर से ऊपर ले जाता है.
3. ड्रॉइंग में एक ���ा एक से ज़्यादा स्ट्रोक होते हैं. असल पहचान इस लेवल पर होती है.
4. आवाज़ पहचानने की सुविधा को, इनपुट भाषा के हिसाब से कॉन्फ़िगर किया गया है. इसका इस्तेमाल आइडेंटिफ़ायर कॉन्फ़िगरेशन के लागू किए जाने वाले ड्रॉइंग का इंस्टेंस बनाने में किया जाता है.

इन कॉन्सेप्ट को खास इंटरफ़ेस और डिक्शनरी के तौर पर लागू किया जाता है. इनके बारे में हम जल्द ही बताएंगे.

आइडेंटिफ़ायर बनाना

हाथ से लिखे गए इनपुट से टेक्स्ट की पहचान करने के लिए, आपको navigator.createHandwritingRecognizer() को कॉल करके और उसमें कंस्ट्रेंट पास करके, HandwritingRecognizer का एक इंस्टेंस पाना होगा. पाबंदियों से यह तय होता है कि लिखावट की पहचान करने के लिए किस मॉडल का इस्तेमाल किया जाना चाहिए. फ़िलहाल, अपनी पसंद के हिसाब से भाषाओं की सूची बनाई जा सकती है:

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 पर सेट हो जाएगा. इस जानकारी का इस्तेमाल करके, अपने ऐप्लिकेशन में कुछ सुविधाओं को चालू या बंद किया जा सकता है. इसके अलावा, अपनी क्वेरी में बदलाव करके नई क्वेरी भी भेजी जा सकती है.

ड्रॉइंग बनाना शुरू करें

आपको अपने ऐप्लिकेशन में एक इनपुट एरिया उपलब्ध कराना चाहिए, जहां उपयोगकर्ता अपनी लिखावट में जानकारी डाल सके. परफ़ॉर्मेंस की वजह से, हमारा सुझाव है कि इसे कैनवस ऑब्जेक्ट की मदद से लागू करें. इस हिस्से को लागू करने की सटीक जानकारी, इस लेख के दायरे में नहीं आती. हालांकि, इसे पूरा करने का तरीका जानने के लिए, डेमो का इस्तेमाल किया जा सकता है.

नई ड्रॉइंग शुरू करने के लिए, आइडेंटिफ़ायर पर startDrawing() तरीके को कॉल करें. यह तरीका पहचान के एल्गोरिदम को बेहतर बनाने के लिए, अलग-अलग संकेतों वाले ऑब्जेक्ट को लेता है. सभी संकेत ज़रूरी नहीं हैं:

• डाला जा रहा टेक्स्ट किस तरह का है: टेक्स्ट, ईमेल पते, नंबर या कोई एक वर्ण (recognitionType)
• इनपुट डिवाइस का टाइप: माउस, टच या पेन इनपुट (inputType)
• पिछला टेक्स्ट (textContext)
• दिखाए जाने वाले वैकल्पिक अनुमानों की संख्या (alternatives)
• उपयोगकर्ता की पहचान करने वाले उन वर्णों ("ग्राफ़िम") की सूची जिन्हें उपयोगकर्ता डाल सकता है (graphemeSet)

हैंडराइटिंग की पहचान करने वाला एपीआई, Pointer इवेंट के साथ बेहतर तरीके से काम करता है. यह किसी भी पॉइंटिंग डिवाइस से इनपुट इस्तेमाल करने के लिए, एक ऐब्स्ट्रैक्ट इंटरफ़ेस उपलब्ध कराता है. पॉइंटर इवेंट के आर्ग्युमेंट में, इस्तेमाल किए जा रहे पॉइंटर का टाइप शामिल होता है. इसका मतलब है कि अपने-आप इनपुट टाइप तय करने के लिए, पॉइंटर इवेंट का इस्तेमाल किया जा सकता है. नीचे दिए गए उदाहरण में, लिखावट की पहचान करने के लिए ड्रॉइंग, हैंडराइटिंग एरिया में 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() तरीके को कॉ�� करें. आम तौर पर, पहचान करने की सुविधा कुछ सौ मिलीसेकंड से कम समय लेती है. इसलिए, ज़रूरत पड़ने पर आप बार-बार अनुमान लगा सकते हैं. नीचे दिए गए उदाहरण में, हर स्ट्रोक के पूरा होने के बाद नया अनुमान लगाया जाता है.

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

इस जानकारी का इस्तेमाल करके, कैनवस पर पहचाने गए ग्राफ़ेम को फिर से ट्रैक किया जा सकता है.

पहचान की पुष्टि करना

पहचान की प्रक्रिया पूरी होने के बाद, संसाधनों को मुफ़्त में इस्तेमाल किया जा सकेगा. इसके लिए, HandwritingDrawing पर clear() तरीके को कॉल करें और HandwritingRecognizer पर finish() तरीके का इस्तेमाल करें:

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

डेमो

वेब कॉम्पोनेंट <handwriting-textarea>, बदलाव करने के लिए एक ऐसा कंट्रोल लागू करता है जो धीरे-धीरे बेहतर होता जाता है. यह कंट्रोल, लिखावट की पहचान करने की सुविधा देता है. बदलाव करने के कंट्रोल के सबसे नीचे दाएं कोने में मौजूद बटन पर क्लिक करके, ड्रॉइंग मोड चालू किया जा सकता है. ड्रॉइंग पूरी करने के बाद, वेब कॉम्पोनेंट अपने-आप टेक्स्ट की पहचान करने की प्रोसेस शुरू कर देगा और पहचाने गए टेक्स्ट को, बदलाव करने वाले कंट्रोल में वापस जोड़ देगा. अगर आपके डिवाइस पर, लिखावट पहचानने वाले एपीआई का इस्तेमाल नहीं किया जा सकता या प्लैटफ़ॉर्म पर अनुरोध की गई सुविधाएं काम नहीं करती हैं, तो 'बदलाव करें' बटन नहीं दिखेगा. हालांकि, बदलाव करने के बुनियादी कंट्रोल का इस्तेमाल <textarea> के तौर पर किया जा सकता है.

वेब कॉम्पोनेंट, languages और recognitiontype के साथ-साथ, बाहर से पहचान करने के व्यवहार को तय करने के लिए प्रॉपर्टी और एट्रिब्यूट उपलब्ध कराता है. value एट्रिब्यूट की मदद से, कंट्रोल का कॉन्टेंट सेट किया जा सकता है:

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

वैल्यू में हुए किसी भी बदलाव के बारे में जानने के लिए, input इवेंट को सुना जा सकता है.

Glitch पर इस डेमो का इस्तेमाल करके, कॉम्पोनेंट को आज़माया जा सकता है. साथ ही, सोर्स कोड को भी देखना न भूलें. अपने ऐप्लिकेशन में कंट्रोल का इस्तेमाल करने के लिए, इसे npm से लें.

सुरक्षा और अनुमतियां

Chromium टीम ने वेब प्लैटफ़ॉर्म की बेहतर सुविधाओं का ऐक्सेस कंट्रोल करना में बताए गए मुख्य सिद्धांतों का इस्तेमाल करके, लिखावट पहचानने वाले एपीआई को डिज़ाइन और लागू किया है. इन सिद्धांतों में, उपयोगकर्ता कंट्रोल, पारदर्शिता, और काम करने के तरीके शामिल हैं.

उपयोगकर्ता कंट्रोल

उपयोगकर्ता, हैंडराइटिंग की पहचान करने वाले एपीआई को बंद नहीं कर सकता. यह सिर्फ़ एचटीटीपीएस के ज़रिए डिलीवर की जाने वाली वेबसाइटों के लिए उपलब्ध है. साथ ही, इसे सिर्फ़ टॉप-लेवल ब्राउज़िंग कॉन्टेक्स्ट से कॉल किया जा सकता है.

पारदर्शिता

हैंडराइटिंग की पहचान करने की सुविधा चालू होने पर, इसकी कोई जानकारी नहीं मिलती. फ़िंगरप्रिंटिंग को रोकने के लिए, ब्राउज़र कई तरह के उपाय करता है. जैसे, संभावित गलत इस्तेमाल का पता चलने पर, उपयोगकर्ता को अनुमति का अनुरोध दिखाना.

अनुमति का जारी रहना

फ़िलहाल, लिखावट की पहचान करने वाला एपीआई, अनुमति से जुड़ा कोई अनुरोध नहीं दिखाता है. इसलिए, अनुमति को किसी भी तरह से बनाए रखने की ज़रूरत नहीं होती.

सुझाव/राय दें या शिकायत करें

Chromium की टीम, लिखावट पहचानने वाले एपीआई के साथ आपके अनुभवों के बारे में जानना चाहती है.

हमें एपीआई के डिज़ाइन के बारे में बताएं

क्या एपीआई में कुछ ऐसा है जो आप���� ����������द के मुताबिक काम नहीं करता? क्या आपके आइडिया को लागू करने के लिए, कोई तरीका या प्रॉपर्टी मौजूद नहीं है? क्या आपका सुरक्षा मॉडल के बारे में कोई सवाल या टिप्पणी है? उससे जुड़े GitHub repo पर, खास समस्या की शिकायत करें या किसी मौजूदा समस्या में अपने सुझाव जोड़ें.

लागू करने से जुड़ी समस्या की शिकायत करना

क्या आपको Chromium को लागू करने में कोई गड़बड़ी मिली? या क्या इसे लागू करने का तरीका, खास जानकारी से अलग है? new.crbug.com पर बग की शिकायत करें. ज़्यादा से ज़्यादा जानकारी शामिल करना न भूलें, फिर से बनाने के आसान निर्देश दें और कॉम्पोनेंट बॉक्स में Blink>Handwriting डालें. Glitch, तुरंत और आसानी से समस्या की जानकारी शेयर करने के लिए बहुत अच्छा है.

एपीआई के लिए सहायता दिखाना

क्या आपको हैंडराइटिंग की पहचान करने वाला एपीआई इस्तेमाल करना है? सार्वजनिक तौर पर सहायता करने से, Chromium टीम को सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, इससे ब्राउज़र के अन्य वेंडर को यह पता चलता है कि इन सुविधाओं को उपलब्ध कराना कितना ज़रूरी है.

WICG के Discourse थ्रेड पर बताएं कि आपको इसका इस्तेमाल कैसे करना है. #HandwritingRecognition हैशटैग का इस्तेमाल करके, @ChromiumDev को ट्वीट करें और हमें बताएं कि इसका इस्तेमाल कहां और कैसे किया जा रहा है.

सहायक लिंक्स

• एक्सप्लेनर
• स्पेक्ट ड्राफ़्ट
• GitHub का डेटा स्टोर
• ChromeStatus
• Chromium में गड़बड़ी
• टैग की समीक्षा
• प्रोटोटाइप बनाने का मकसद
• WebKit-Dev थ्रेड
• Mozilla के स्टैंडर्ड की स्थिति

धन्यवाद

इस दस्तावेज़ की समीक्षा जो मेडली, हॉन्गलिन यू, और ज़िएवी कियान ने की है.