Firebase ve ML Kit ile Görsel üzerindeki metinlerin tanınması – CodeLab

Google’ın I/O 18 etkinliğinde Mobil uygulamalar icin ML Kit API’yı duyurmasının ardından, etkinlik sitesinde ML Kit ile alistirmalar yapabileceğimiz ornek projeler duyuruldu. Bu yazıda, ilgimi çeken Recognize text in images with ML Kit for Firebase: iOS codelab alistirmasi uzerinden giderek, yorumlarımı paylasacagim.

Yukarida paylastigim site uzerinden codelab adimlarini takip ettiginizde size Google tarafından hazirlanmis proje klasörünü indirmenizi isteniyor. Klasor içersinde iki adet proje yer alıyor. Ilki final, ikincisi ise starter. Starter proje ile ilerleyip, talimatları adim adim takip edecegiz.

Projeyi indirdikten sonra Xcode 9 ve uzerin versiyonlardan birinde acmalisiniz. Kirimizi ile işaretli ve henüz projede eksik olan GoogleService-Info.plist dosyasını farkedeceksiniz. Bu dosya Firebase ile projemiz arasındaki tanımları içeren dosya olacak. Bu dosyayı oluşturmak ve mobil uygulamamızla birlikte calisacak Firebase projesini oluşturmak icin Firebase Console‘a gidiyoruz ve Proje Ekle ile kendimize ML Kit Codelab adinda bir proje oluşturuyoruz.

Screen Shot 2018-05-19 at 23.36.44

Projemiz icin anasayfa hazırlandıktan sonra, Firebase’i hangi uygulama icin kullanacaksak entegrasyon icin verilen öneriyi takip ediyoruz. Yani bu ekranda iOS seçerek ilerliyoruz.

Screen Shot 2018-05-19 at 23.47.51

Codelab adiminda da yazdigi gibi burada iOS Paket ismi olarak com.google.firebase.codelab.mlkit yaziyoruz ve diger kisimlari boş bırakarak devam ediyoruz.  

Screen Shot 2018-05-20 at 00.02.43

Bu bilgiler sonunda, iOS projemiz icin Firebase ayarlarimizi içeren GoogleService-Info.plist dosyasını indiriyoruz.

Screen Shot 2018-05-20 at 00.11.42.png

Firebase Core kütüphanesi ve ML Kit kütüphanelerini iOS projemize Cocoapods ile alıyoruz. Bilgisayarinizda cocoapods kurulu degilse, sudo gem install cocoapods komutu ile yükleyebilirsiniz.

Screen Shot 2018-05-20 at 00.15.08

Cocoapods yükledikten sonra, terminal uzerinden projenizdeki ana dizinin içerisine gidip, pod init komutunu calistirmalisiniz. Bu komutla birlikte, bulunduğunuz dizinde projenizde kullanacaginiz yani bagimli oldugunuz pod’lari – kütüphanelerini- ekleyeceğiniz bir Podfile oluştuğunu goreceksiniz.

 

 

Screen Shot 2018-05-20 at 00.34.55

Podfile’i herhangi bir text editor ile açıp; use frameworks keywordu sonrasına Firebase Core, ML Vision ve ML Vision Text Model pod’larini almak icin aşağıdaki 3 satırı  ekliyoruz ve pod’lari almak icin yine terminal uzeriden pod install komutunu calistiriyoruz.

Screen Shot 2018-05-20 at 01.55.55
Source : Google

Bu komut tamamlandiginda, starter projemiz ve bagimli oldugumuz pod kütüphanelerini içeren bir workspace dosyası oluşturmuş olacak. xcworkspace uzantılı dosyayi çift tiklayarak Xcode ile açıyoruz.

Screen Shot 2018-05-20 at 02.12.53
pod install komutu sonrası projemizin klasör görünümü

Projemizi yeni bağımlılıkları ile birlikte calistirip seçtiğimiz herhangi bir simülatöre gönderiyoruz.  Scroll uzerinde iki farklı resimi görüntüleyebiliyoruz ve Find Text ve Find Text (Cloud) butonlarının arkasına henüz herhangi bir kod yazmadık.

Screen Shot 2018-05-20 at 11.37.12
Uygulamayi ilk defa simülatöre attigimizda.

Hadi kod yazmaya başlayalım, codelab tutorialinda olduğu gibi öncelikle görüntü üzerindeki metinleri tanımak icin Vision Api içerisinde bulunan VisionTextEditor sinifina ait bir textDetector objesi olusturacagiz. Bunu asagida yeşille işaretlediğim kod bloklarındaki satırları ornek projeye ekleyelim.

 

Screen Shot 2018-05-20 at 14.37.41

Daha sonrasında runTextRecognition metodunu textDetector’umuzun imaj uzerinde calismasini ve tanıdığı metinleri kare icine alması icin kod yazacağız. Imajimizi Vision Api’da yer alan VisionImage sinifindan bir visionImage objesi oluşturup, TextDetector objesine detect etmesi için bu objeyi veriyoruz.

Screen Shot 2018-05-21 at 08.50.31

Detect metodu sonrasında, metod callback’inde bize features ve  hata oluştuysa error değişkenlerini dönüyor ve processResult metodu ile bulunan her bir özelliği/texti VisionTextBlock olarak ele alip, bulunan metni, frame -yer- bilgisini addFrameView kullanarak imajın üzerinde gösteriyoruz.

Screen Shot 2018-05-21 at 08.50.19

Tada! Vision kütüphanesi Find Text dediğimizde bizim icin görüntü uzerinde metinleri cikardi ve bizde sonrasında bunları çerçeve içerisine alıp gösterdik. Screen Shot 2018-05-20 at 15.11.10

Fakat ilk görüntü için deneme yaptigimizda latin alfabesi kullanılmayan kelimeler için sonuç getirmediği / doğru sonuç çıkarmadığını göreceksiniz. Vision API ile cihaz üzerinde latin alfabesiyle sonuçlar üretebileceğiz. Diğer kelimelerin de tanınması için API’in Cloud özelliklerini kullanmalıyız.

Screen Shot 2018-05-21 at 09.29.18Text Recognition – Kelime tanıma – için Cloud tarafında aylık ilk 1000 kelime ücretsiz olacak sekilde kullanım yapabiliyoruz.

Spark Plan‘dan Blaze Plan‘a yani kullandığın kadar ode planına geçerek Vision Api uzerinde denemeler yapmaya baslayabilirsiniz.

Screen Shot 2018-05-22 at 00.07.51

Google Cloud uzerinden Cloud Vision API’yi aktif hale getiriyoruz.

Screen Shot 2018-05-22 at 00.23.29

Gelelim, kod kısmına: Cloud uzerinde kelime tanıma icin bu sefer VisionCloudDocumentTextDetector asagidaki sekilde tanımlıyoruz.

Screen Shot 2018-05-21 at 23.50.56

Cihaz uzerinde calismasi için yazdigimiza benzer bir sekilde detect metodu çağrımını yapıyoruz, bu sefer CloudTextDetector için.

Screen Shot 2018-05-21 at 23.51.22

Cloud uzerinde daha fazla özellik yer aldiginda tanidigi metinleri, paragraflar hatta içerisindeki kelimeler ve semboller olarak tanıyabiliyorsunuz. Asagida bu özelliklere bakarak görüntü uzerine çerçeveler çizen metodu oluşturuyoruz.

Screen Shot 2018-05-21 at 23.50.29

Ve sonuç, beklendiği gibi cihazdaki API kadar hızlı çalışmasa da kelimeleri yakalama açısından oldukça başarılı buldum. Önümüzdeki yazılarda farklı imajlarla karsilastirmali bir uygulama yapmayı düşünüyorum.

Screen Shot 2018-05-22 at 00.34.57.png

ML Kit‘in diger özellikleri ve kullanımlar icin firebase üzerindeki dokümanlardan  yararlanabilirsiniz. Yeni ve daha farklı çalısmalarda görüşmek üzere 👋

WhatsApp Image 2018-05-21 at 23.40.23

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s