Kullanıcılarınızın el yazısını tanıma

El Yazısı Tanıma API'si, el yazısı girişlerinden gelen metinleri daha anında tanımanıza olanak tanır.

Christian Liebel
Thomas Steiner

El Yazısı Tanıma API'si nedir?

El Yazısı Recognition API, kullanıcılarınızın el yazılarını (mürekkep) metne dönüştürmenizi sağlar. Bazı işletim sistemlerinde bu tür API'ler uzun süredir bulunmaktadır ve bu yeni özellikle, web uygulamalarınız artık bu işlevi kullanın. Dönüşüm doğrudan kullanıcının cihazında gerçekleşir. çevrimdışı modda, üçüncü taraf kitaplığı veya hizmeti eklemeden.

Bu API, "çevrimiçi" denen şeyi uygular veya neredeyse gerçek zamanlı tanıma Bu, el yazısıyla yazılmış girdi, kullanıcı tek bir el yazısı yakalayıp analiz ederek onu çizerken kulaç. "Çevrimdışı"nın aksine gibi optik karakter tanıma (OCR) gibi işlemler yardımcı olduğu için çevrimiçi algoritmalar sayesinde daha yüksek doğruluk oranı elde edebilir. tek tek mürekkep darbelerinin zamansal sırası ve basıncı gibi ek sinyaller.

El Yazısı Tanıma API'si için önerilen kullanım alanları

Örnek kullanımlar şunları içerir:

  • Kullanıcıların el yazısı notlarını yakalayıp çevirmek istediği not alma uygulamaları metne dönüştürürler.
  • Kullanıcıların zaman kısıtlamaları nedeniyle kalem veya parmakla giriş yapabileceği form uygulamaları.
  • Kare bulmaca, hangman veya sudoku gibi harf veya rakam girilmesini gerektiren oyunlar.

Mevcut durum

El Yazısı Recognition API'yi (Chromium 99) bulabilirsiniz.

El Yazısı Tanıma API'sini kullanma

Özellik algılama

createHandwritingRecognizer() yönteminin olup olmadığını kontrol ederek tarayıcı desteğini tespit edin gezinme nesnesinde:

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

Temel kavramlar

El Yazısı Tanıma API'si, giriş yönteminden bağımsız olarak el yazısıyla yapılan girişleri metne dönüştürür (fare, dokunma, kalem). API'nin dört ana varlığı vardır:

  1. Nokta, işaretçinin belirli bir zamanda bulunduğu yeri temsil eder.
  2. Çizgi bir veya daha fazla noktadan oluşur. Çizginin kaydı, kullanıcı aşağı işaretçiyi basılı tutun (ör. birincil fare düğmesini tıklar veya ekrana kalemiyle dokunduğunda ya da parmak) ve işaretçi tekrar yukarı alındığında sona erer.
  3. Çizim bir veya daha fazla çizgiden oluşur. Asıl tanıma işlemi bu düzeyde gerçekleşir.
  4. Tanımlayıcı, beklenen giriş diliyle yapılandırılır. Örnek oluşturmak için kullanılır tanıyıcı yapılandırması uygulanmış bir çizim.

Bu kavramlar, özel arayüzler ve sözlükler olarak uygulanmıştır. Kısa süre içinde bu konuya değineceğim.

El Yazısı Recognition API'nin temel öğeleri: Bir veya daha fazla nokta bir çizgi oluşturur, bir veya daha fazla çizgi ise tanıyıcının oluşturduğu bir çizimi oluşturur. Asıl tanıma işlemi çizim düzeyinde gerçekleşir.

Tanıyıcı oluşturma

El yazısıyla yazılmış girdideki metni tanımak için bir navigator.createHandwritingRecognizer() çağrısı yaparak ve kısıtlamaları ileterek HandwritingRecognizer . Kısıtlamalar, kullanılması gereken el yazısı tanıma modelini belirler. Şu anda tercihe göre bir dil listesi belirtebilirsiniz:

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

Bu yöntem, HandwritingRecognizer isteğinizi yerine getirebilir. Aksi takdirde, verilen taahhüdü bir hata ile reddeder ve el yazısı tanıma özelliği kullanılamaz. Bu nedenle, anahtar kelimeleri tanıyıcının belirli tanıma özelliklerini desteklemesini sağlayın.

Sorgu tanıyıcı desteği

navigator.queryHandwritingRecognizerSupport() numaralı telefonu arayarak hedef platformun mevcut olup olmadığını kontrol edebilirsiniz kullanmayı düşündüğünüz el yazısı tanıma özelliklerini destekler. Aşağıdaki örnekte, geliştirici:

  • İngilizce metinleri algılamak istiyor
  • mevcut olduğunda alternatif, daha az olası tahminler alma
  • Segmentasyon sonucuna, yani puanlar ve karakterler dahil, tanınan karakterlere erişim elde edebilir küçük vuruşlar
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

Yöntem, bir sonuç nesnesiyle çözümlenen taahhüt döndürür. Tarayıcı bu özelliği destekliyorsa geliştirici tarafından belirtildiğinde değeri true olarak ayarlanır. Aksi takdirde false olarak ayarlanır. Bu bilgileri, uygulamanızdaki belirli özellikleri etkinleştirmek veya devre dışı bırakmak için ya da sorgunuzu ayarlayabilir ve yeni bir sorgu gönderebilirsiniz.

Çizim başlat

Başvurunuzda, kullanıcının el yazısıyla yazdığı bir giriş alanı sunmalısınız. emin olun. Performansı artırmak açısından, bunu bir kanvas nesnesi. Tam bu bölümün uygulanması bu makalenin kapsamı dışındadır ancak demo bölümüne bakabilirsiniz. öğreneceğiz.

Yeni bir çizime başlamak için tanıyıcıda startDrawing() yöntemini çağırın. Bu yöntemde tanıma algoritmasında ince ayar yapmak için farklı ipuçları içeren nesne Tüm ipuçları isteğe bağlıdır:

  • Girilen metnin türü: metin, e-posta adresleri, sayılar veya tek bir karakter (recognitionType)
  • Giriş cihazının türü: fare, dokunma veya kalem girişi (inputType)
  • Önceki metin (textContext)
  • Döndürülmesi gereken daha düşük olasılıklı alternatif tahminlerin sayısı (alternatives)
  • Kullanıcının büyük olasılıkla gireceği, kullanıcının kimliğini tanımlayabilecek karakterlerin ("grafikler") listesi (graphemeSet)

El Yazısı Tanıma API'si, İşaretçi Etkinlikleri soyut arayüze sahiptir. İşaretçi etkinlik bağımsız değişkenleri, kullanılan işaretçi türünü seçin. Bu, giriş türünü belirlemek için işaretçi etkinliklerini kullanabileceğiniz anlamına gelir. otomatik olarak oluşturur. Aşağıdaki örnekte, el yazısı tanımaya yönelik çizim otomatik olarak el yazısı alanındaki bir pointerdown etkinliğinin ilk oluşumunda oluşturulur. pointerType boş olabilir veya özel bir değere ayarlanmış olabilir. çizimin giriş türü için yalnızca desteklenen değerlerin ayarlandığından emin olun.

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

Çizgi ekle

pointerdown etkinliği yeni bir çizgi başlatmak için de doğru yerdir. Bunu yapmak için yeni bir HandwritingStroke örneği. Ayrıca proje zaman çizelgesinde o anki saati referans noktası olarak sonraki noktaların eklenmesine neden olur:

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

Nokta ekleyin

Fırçayı oluşturduktan sonra ilk noktayı doğrudan eklemelisiniz. Daha fazla resim ekledikçe noktalarından sonra puan oluşturma mantığını ayrı bir yöntemle uygulamak mantıklıdır. Aşağıdaki örnekte addPoint() yöntemi, geçen süreyi referans zaman damgasından hesaplar. Zaman bilgisi isteğe bağlıdır ancak tanıma kalitesini iyileştirebilir. Ardından, X ve İşaretçi etkinliğinden Y koordinatları ve noktayı mevcut çizgiye ekler.

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

pointermove etkinlik işleyicisi, işaretçi ekran boyunca hareket ettirildiğinde çağrılır. Bu puanlar çizgiye de eklenmesi gerekir. İşaretçi "aşağı" durum (örneğin, fareye basmadan imleci ekranda hareket ettirdiğinizde) düğmesini tıklayın. Aşağıdaki örnekteki etkinlik işleyici, etkin bir çizgi olup olmadığını kontrol eder ve bir noktaya değineceğim.

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

Metni tanı

Kullanıcı işaretçiyi tekrar kaldırdığında, addStroke() yöntemini çağırın. Aşağıdaki örnek de activeStroke değerini sıfırlar, bu nedenle pointermove işleyici, tamamlanan çizgiye nokta eklemeyecek.

Şimdi sıra, getPrediction() çizim. Tanıma işlemi genellikle birkaç yüz milisaniyeden kısa sürer. Bu nedenle, istediğiniz zaman tahminlerde bulunmanızı sağlar. Aşağıdaki örnekte tamamlanan her çizgiden sonra yeni bir tahmin çalıştırılır.

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

Bu yöntem, reklamverenin isteklerine göre sıralanmış bir dizi tahminle çözülür. ihtimalini artırır. Öğe sayısı, alternatives ipucuna ilettiğiniz değere bağlıdır. Siz bu diziyi, kullanıcıya olası eşleme seçenekleri sunmak ve kullanıcının seçeneğini belirleyin. Alternatif olarak, sizin için en olası tahmin olan örneğine bakalım.

Tahmin nesnesi, tanınan metni ve isteğe bağlı bir segmentasyon sonucunu içerir. Bu segment ele alacağız.

Segmentasyon sonuçlarıyla ayrıntılı analizler

Hedef platform tarafından destekleniyorsa tahmin nesnesi, segmentasyon sonucu da içerebilir. Bu, tanınan tüm el yazısı segmentini içeren bir dizidir. Bu segment, kullanıcı tarafından tanımlanabilir karakter (grapheme) ve tanınan metindeki konumu (beginIndex, endIndex) ve bunu oluşturan çizgilerle noktalar.

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

Zemindeki tanınan grafikleri tekrar bulmak için bu bilgileri kullanabilirsiniz.

Kutular, tanınan her bir grafiğin etrafına çizilir

Tanıma işlemini tamamla

Tanıma işlemi tamamlandıktan sonraclear() HandwritingDrawing ve HandwritingRecognizer üzerinde finish() yöntemi:

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

Demo

<handwriting-textarea> web bileşeni, kademeli olarak iyileştirildi, el yazısıyla düzenleme kontrolü teşekkür ederiz. Düzenleme kontrolünün sağ alt köşesindeki düğmeyi tıklayarak değiştirebilirsiniz. Çizimi tamamladığınızda web bileşeni, otomatik olarak ve tanınan metni düzenleme denetimine geri ekleyin. El Yazısı Tanıma özelliği, API hiç desteklenmiyor veya platform istenen özellikleri desteklemiyor, düzenle düğmesi gizlenecek. Ancak temel düzenleme kontrolü, <textarea> olarak kullanılabilir olmaya devam eder.

Web bileşeni, Search Ads 360'tan tanıma davranışını tanımlamak için languages ve recognitiontype dahil olmak üzere dışında. Denetimin içeriğini value özelliği:

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

Değerdeki herhangi bir değişiklikten haberdar olmak için input etkinliğini dinleyebilirsiniz.

Glitch'teki bu demoyu kullanarak bileşeni deneyebilirsiniz. Ayrıca şunu da kontrol etmeyi unutmayın: kaynak kodu. npm'den alın.

Güvenlik ve izinler

Chromium ekibi, el yazısı tanıma API'sini temel ilkeleri kullanarak tasarlayıp uyguladı Kullanıcı erişimi dahil olmak üzere Güçlü Web Platformu Özelliklerine Erişimi Kontrol Etme'de tanımlanmıştır kontrol, şeffaflık ve ergonomi.

Kullanıcı denetimi

El Yazısı Recognition API, kullanıcı tarafından devre dışı bırakılamaz. Yalnızca web sitelerinde kullanılabilir HTTPS ile sunulur ve yalnızca üst düzey tarama bağlamından çağrılabilir.

Şeffaflık

El yazısı tanımanın etkin olup olmadığına dair herhangi bir bilgi yoktur. Dijital parmak izini önlemek için tarayıcı tespit ettiğinde kullanıcıya izin istemi göstermek gibi karşı önlemler alır. tespit edebilirsiniz.

İzin kalıcılığı

El Yazısı Tanıma API'si şu anda herhangi bir izin istemi göstermiyor. Dolayısıyla, izin hiçbir şekilde sürdürülmesi gerekmez.

Geri bildirim

Chromium ekibi, El Yazısı Recognition API ile ilgili deneyimleriniz hakkında bilgi almak istiyor.

Bize API tasarımı hakkında bilgi verin

API'de beklediğiniz gibi çalışmayan bir şey mi var? Veya eksik yöntemler mi var? gereken özellikler veya özellikler neler olabilir? Menkul kıymetle ilgili bir sorunuz veya yorumunuz varsa modeli nedir? İlgili GitHub deposunda bir spesifikasyon sorunu bildirin veya düşüncelerinizi neden olabilir.

Uygulamayla ilgili bir sorunu bildirin

Chromium'un uygulanmasıyla ilgili bir hata buldunuz mu? Yoksa uygulama, spesifikasyondan farklı mı? new.crbug.com adresinden hata bildiriminde bulunun. Açıklamalarınızı mümkün oldukça detaylandırmaya çalışın. basit yeniden oluşturma talimatlarını uygulayın ve Bileşenler kutusuna Blink>Handwriting yazın. Glitch, hızlı ve kolay yeniden oluşturmalar paylaşmak için idealdir.

API'ye desteğinizi gösterin

El Yazısı Tanıma API'sini kullanmayı planlıyor musunuz? Herkese açık desteğiniz Chromium ekibine yardımcı olur ve diğer tarayıcı tedarikçilerine söz konusu özellikleri desteklemenin ne kadar önemli olduğunu gösterir.

Bu özelliği nasıl kullanmayı planladığınızı WICG Discourse ileti dizisinde paylaşın. Şu kullanıcıya tweet gönder: @ChromiumDev hashtag'ini kullanarak #HandwritingRecognition ve nerede ve nasıl kullandığınızı bize bildirin.

Teşekkür

Bu makale Joe Medley, Honglin Yu ve Jiewei Qian tarafından incelenmiştir. Hero görseli Samir Bouaked açık Lansmanı kaldırın.