Hızlı Başlangıç: Mürekkep Tanıma REST API'sini ve JavaScript'i kullanarak dijital mürekkep tanıma

Makale
08/24/2020

Not

Mürekkep Tanıma API'si önizlemesini 26 Ağustos 2020'de sona erdirdi. Mevcut Mürekkep Tanıma kaynaklarınız varsa, hizmet 31 Ocak 2021'de tamamen kullanımdan kaldırılıncaya kadar bunları kullanmaya devam edebilirsiniz.

Dijital mürekkep vuruşlarında Mürekkep Tanıma API'sini kullanmaya başlamak için bu hızlı başlangıcı kullanın. Bu JavaScript uygulaması JSON biçimli mürekkep vuruşu verilerini içeren bir API isteği gönderir ve yanıtı görüntüler.

Bu uygulama Javascript ile yazılmış ve web tarayıcınızda çalıştırılıyor olsa da, API çoğu programlama diliyle uyumlu bir RESTful web hizmetidir.

Normalde API'yi bir dijital mürekkep oluşturma uygulamasından çağırırsınız. Bu hızlı başlangıç, bir JSON dosyasından aşağıdaki el yazısı örneği için mürekkep vuruşu verilerini gönderir.

el yazısı metin görüntüsü

Bu hızlı başlangıcın kaynak kodu GitHub'da bulunabilir.

Önkoşullar

Web tarayıcısı
Bu hızlı başlangıç için örnek mürekkep vuruşu verileri GitHub'da bulunabilir.

Mürekkep Tanıma kaynağı oluşturma

Not

1 Temmuz 2019'da oluşturulan kaynakların uç noktaları aşağıda gösterilen özel alt etki alanı biçimini kullanır. Daha fazla bilgi ve bölgesel uç noktaların tam listesi için bkz. Bilişsel Hizmetler için özel alt etki alanı adları.

Azure Bilişsel Hizmetler, abone olduğunuz Azure kaynaklarıyla temsil edilir. Azure portal kullanarak Mürekkep Tanıma için bir kaynak oluşturun.

Kaynak oluşturduktan sonra, Azure portal kaynağınızı açıp Hızlı başlangıç'a tıklayarak uç noktanızı ve anahtarınızı alın.

İki ortam değişkeni oluşturun:

INK_RECOGNITION_SUBSCRIPTION_KEY - İsteklerinizin kimliğini doğrulamak için abonelik anahtarı.
INK_RECOGNITION_ENDPOINT - Kaynağınız için uç nokta. Şu şekilde görünür:
https://<your-custom-subdomain>.api.cognitive.microsoft.com

Yeni uygulama oluşturma

Sık kullandığınız IDE veya düzenleyicide yeni .html bir dosya oluşturun. Ardından daha sonra ekleyeceğimiz kod için temel HTML ekleyin.
```
<!DOCTYPE html>
<html>

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

    <body>
    </body>

</html>
```

etiketine <body> aşağıdaki html'yi ekleyin:

JSON isteğini ve yanıtını görüntülemek için iki metin alanı.
daha sonra oluşturulacak işlevi çağırmak recognizeInk() için bir düğme.

<!-- <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>-->

Örnek JSON verilerini yükleme

etiketinde <script> sampleJson için bir değişken oluşturun. Ardından, JSON dosyanızı seçebilmeniz için dosya gezginini açan adlı openFile() bir JavaScript işlevi oluşturun. Düğmeye Recognize ink tıklandığında bu işlev çağrılır ve dosyayı okumaya başlar.

Dosyayı zaman uyumsuz olarak işlemek için nesnenin FileReaderonload() işlevini kullanın.

Dosyadaki veya \n\r karakterlerini boş bir dizeyle değiştirin.
Metni geçerli JSON'a dönüştürmek için kullanın JSON.parse()
Uygulamadaki request metin kutusunu güncelleştirin. JSON dizesini biçimlendirmek için kullanın JSON.stringify() .

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

Mürekkep Tanıma API'sine istek gönderme

etiketinde <script> adlı recognizeInk()bir işlev oluşturun. Bu işlev daha sonra API'yi çağıracak ve sayfayı yanıtla güncelleştirecektir. Aşağıdaki adımlardan kodu bu işleve ekleyin.

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

Uç nokta URL'niz, abonelik anahtarınız ve örnek JSON'unuz için değişkenler oluşturun. Ardından API isteğini göndermek için bir XMLHttpRequest nesne oluşturun.

// 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();

Nesnesi için XMLHttpRequest return işlevini oluşturun. Bu işlev, API yanıtını başarılı bir istekten ayrıştıracak ve uygulamada görüntüleyecek.

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

İstek nesnesi için hata işlevini oluşturun. Bu işlev hatayı konsola günlüğe kaydeder.

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

İstek nesnesinin onreadystatechange özelliği için bir işlev oluşturun. İstek nesnesinin hazır olma durumu değiştiğinde, yukarıdaki dönüş ve hata işlevleri uygulanır.

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

API isteğini gönderin. Abonelik anahtarınızı üst bilgisine Ocp-Apim-Subscription-Key ekleyin ve content-typeapplication/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));
};

Uygulamayı çalıştırma ve yanıtı görüntüleme

Bu uygulama web tarayıcınızda çalıştırılabilir. Başarılı bir yanıt JSON biçiminde döndürülür. JSON yanıtını GitHub'da da bulabilirsiniz:

Sonraki adımlar

REST API başvurusu

Mürekkep Tanıma API'sinin dijital mürekkep oluşturma uygulamasında nasıl çalıştığını görmek için GitHub'da aşağıdaki örnek uygulamalara göz atın: