التشغيل السريع: التعرف على الحبر الرقمي باستخدام واجهة برمجة تطبيقات REST ل Ink Recognizer وJavaScript

  • مقالة

ملاحظة

انتهت معاينة واجهة برمجة تطبيقات Ink Recognizer في 26 أغسطس 2020. إذا كان لديك موارد Ink Recognizer موجودة، يمكنك الاستمرار في استخدامها حتى يتم إيقاف الخدمة بالكامل في 31 يناير 2021.

استخدم هذا التشغيل السريع لبدء استخدام واجهة برمجة تطبيقات Ink Recognizer على ضغطات الحبر الرقمي. يرسل تطبيق JavaScript هذا طلب API يحتوي على بيانات ضغطة الحبر بتنسيق JSON، ويعرض الاستجابة.

في حين أن هذا التطبيق مكتوب بلغة Javascript ويعمل في مستعرض الويب الخاص بك، فإن واجهة برمجة التطبيقات هي خدمة ويب RESTful متوافقة مع معظم لغات البرمجة.

عادة ما تقوم باستدعاء واجهة برمجة التطبيقات من تطبيق الكتابة بالحبر الرقمي. يرسل هذا التشغيل السريع بيانات ضغطة الحبر للعينة المكتوبة بخط اليد التالية من ملف JSON.

صورة لنص مكتوب بخط اليد

يمكن إيجاد التعليمة البرمجية المصدر لهذه البداية السريعة على GitHub.

المتطلبات الأساسية

  • متصفح ويب
  • يمكن العثور على مثال بيانات ضغطة الحبر لهذا التشغيل السريع على GitHub.

إنشاء مورد Ink Recognizer

ملاحظة

تستخدم نقاط النهاية للموارد التي تم إنشاؤها بعد 1 يوليو 2019 تنسيق المجال الفرعي المخصص الموضح أدناه. لمزيد من المعلومات وقائمة كاملة بنقاط الانتهاء الإقليمية، راجع أسماء النطاقات الفرعية المخصصة للخدمات المعرفية.

يتم تمثيل خدمات Azure المعرفية بواسطة موارد Azure التي تشترك فيها. إنشاء مورد ل Ink Recognizer باستخدام مدخل Microsoft Azure.

بعد إنشاء مورد، احصل على نقطة النهاية والمفتاح عن طريق فتح المورد الخاص بك على مدخل Microsoft Azure، والنقر فوق البدء السريع.

إنشاء متغيرين للبيئة:

  • INK_RECOGNITION_SUBSCRIPTION_KEY - مفتاح الاشتراك لمصادقة طلباتك.

  • INK_RECOGNITION_ENDPOINT - نقطة النهاية لموردك. سيبدو هكذا:
    https://<your-custom-subdomain>.api.cognitive.microsoft.com

إنشاء تطبيق جديد

  1. في IDE أو المحرر المفضل لديك، قم بإنشاء ملف جديد .html . ثم أضف HTML الأساسي إليه للتعليمات البرمجية التي سنضيفها لاحقا.

    <!DOCTYPE html>
<html>

    <head>
        <script type="text/javascript">
        </script>
    </head>

    <body>
    </body>

</html>

  2. ضمن العلامة <body> ، أضف html التالي:

    1. منطقتين نصيتين لعرض طلب JSON والاستجابة.
    2. زر لاستدعاء الدالة recognizeInk() التي سيتم إنشاؤها لاحقا.
    <!-- <body>-->
    <h2>Send a request to the Ink Recognition API</h2>
    <p>Request:</p>
    <textarea id="request" style="width:800px;height:300px"></textarea>
    <p>Response:</p>
    <textarea id="response" style="width:800px;height:300px"></textarea>
    <br>
    <button type="button" onclick="recognizeInk()">Recognize Ink</button>
<!--</body>-->

تحميل مثال بيانات JSON

  1. ضمن العلامة <script> ، قم بإنشاء متغير ل sampleJson. ثم قم بإنشاء دالة JavaScript المسماة openFile() التي تفتح مستكشف الملفات حتى تتمكن من تحديد ملف JSON الخاص بك. Recognize ink عند النقر فوق الزر، سيستدعي هذه الدالة ويبدأ في قراءة الملف.

  2. استخدم دالة FileReader كائن onload() لمعالجة الملف بشكل غير متزامن.

    1. استبدل أي \n أو \r أحرف في الملف بسلسلة فارغة.
    2. استخدم JSON.parse() لتحويل النص إلى JSON صالح
    3. request تحديث مربع النص في التطبيق. استخدم JSON.stringify() لتنسيق سلسلة JSON.
    var sampleJson = "";
function openFile(event) {
    var input = event.target;

    var reader = new FileReader();
    reader.onload = function(){
        sampleJson = reader.result.replace(/(\\r\\n|\\n|\\r)/gm, "");
        sampleJson = JSON.parse(sampleJson);
        document.getElementById('request').innerHTML = JSON.stringify(sampleJson, null, 2);
    };
    reader.readAsText(input.files[0]);
};

إرسال طلب إلى واجهة برمجة تطبيقات Ink Recognizer

  1. ضمن العلامة <script> ، قم بإنشاء دالة تسمى recognizeInk(). ستقوم هذه الدالة لاحقا باستدعاء واجهة برمجة التطبيقات وتحديث الصفحة بالاستجابة. أضف التعليمات البرمجية من الخطوات التالية داخل هذه الدالة.

    function recognizeInk() {
// add the code from the below steps here 
}

    1. إنشاء متغيرات لعنلام URL لنقطة النهاية ومفتاح الاشتراك ونموذج JSON. ثم قم بإنشاء كائن XMLHttpRequest لإرسال طلب واجهة برمجة التطبيقات.

      // Replace the below URL with the correct one for your subscription. 
// Your endpoint can be found in the Azure portal. For example: "https://<your-custom-subdomain>.cognitiveservices.azure.com";
var SERVER_ADDRESS = process.env["INK_RECOGNITION_ENDPOINT"];
var ENDPOINT_URL = SERVER_ADDRESS + "/inkrecognizer/v1.0-preview/recognize";
var SUBSCRIPTION_KEY = process.env["INK_RECOGNITION_SUBSCRIPTION_KEY"];
var xhttp = new XMLHttpRequest();

    2. إنشاء دالة الإرجاع للكائن XMLHttpRequest . ستقوم هذه الدالة بتحليل استجابة واجهة برمجة التطبيقات من طلب ناجح، وعرضها في التطبيق.

      function returnFunction(xhttp) {
    var response = JSON.parse(xhttp.responseText);
    console.log("Response: %s ", response);
    document.getElementById('response').innerHTML = JSON.stringify(response, null, 2);
}

    3. إنشاء دالة الخطأ لكائن الطلب. تسجل هذه الدالة الخطأ إلى وحدة التحكم.

      function errorFunction() {
    console.log("Error: %s, Detail: %s", xhttp.status, xhttp.responseText);
}

    4. إنشاء دالة لخاصية كائن onreadystatechange الطلب. عند تغيير حالة جاهزية كائن الطلب، سيتم تطبيق دالتي الإرجاع والخطأ أعلاه.

      xhttp.onreadystatechange = function () {
    if (this.readyState === 4) {
        if (this.status === 200) {
            returnFunction(xhttp);
        } else {
            errorFunction(xhttp);
        }
    }
};

    5. إرسال طلب واجهة برمجة التطبيقات. أضف مفتاح الاشتراك إلى Ocp-Apim-Subscription-Key العنوان، ثم قم بتعيين content-type إلى application/json

      xhttp.open("PUT", ENDPOINT_URL, true);
xhttp.setRequestHeader("Ocp-Apim-Subscription-Key", SUBSCRIPTION_KEY);
xhttp.setRequestHeader("content-type", "application/json");
xhttp.send(JSON.stringify(sampleJson));
};

تشغيل التطبيق وعرض الاستجابة

يمكن تشغيل هذا التطبيق داخل مستعرض الويب الخاص بك. يتم إرجاع استجابة ناجحة بتنسيق JSON. يمكنك أيضا العثور على استجابة JSON على GitHub:

الخطوات التالية

مرجع REST API

لمعرفة كيفية عمل واجهة برمجة تطبيقات التعرف على الحبر في تطبيق الكتابة بالحبر الرقمي، ألق نظرة على نماذج التطبيقات التالية على GitHub: