El Yazısı Tanıma API'si, el yazısı girişlerinden gelen metinleri daha anında tanımanıza olanak tanır.
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:
- Nokta, işaretçinin belirli bir zamanda bulunduğu yeri temsil eder.
- Ç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.
- Çizim bir veya daha fazla çizgiden oluşur. Asıl tanıma işlemi bu düzeyde gerçekleşir.
- 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.
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.
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.
Yararlı Bağlantılar
- Açıklayıcı
- Spesifikasyon taslağı
- GitHub deposu
- ChromeStatus
- Chromium hatası
- TAG incelemesi
- Prototip oluşturma amacı
- WebKit-Dev ileti dizisi
- Mozilla standartları konumu
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.