Sunday 31 December 2017

Tutorial Membuat Web Deteksi Wajah dengan Cognitive Service menggunakan JavaScript dan PHP

Halo teman-teman, sudah lama rasanya menulis artikel lagi. Maklum punya kesibukan dan ketertarikan pada hal lain, tentu saja beberapa hal tersebut akan saya bagikan disini.
Salah satunya adalah mengenai web deteksi wajah dengan menggunakan microsoft cognitive service.

Sebelum membahas tentang apa itu cognitive service, ada baiknya kita berbicara tentang AI atau Artificial Intelligence atau dalam bahasa Indonesia disebut Kecerdasan Buatan. Mengapa? karena konsep dari deteksi wajah adalah salah satu aplikasi dari AI itu sendiri, menurut wikipedia dijelaskan bahwa AI merupakan kecerdasan entitas ilmiah. Menurut mas Puja Pramudya sebagai Technology Director dari Radya Labs Teknologi bahwa AI merupakan suatu cabang dari ilmu komputer yang bertujuan untuk menyelesaikan pekerjaan yang biasanya hanya mampu dilakukan manusia. Secara umum, konteks yang dapat disentuh oleh AI di antaranya adalah Learning, Reasoning, Perception, Language dan Problem Solving. Dalam konteks AI Terapan, kita tidak terlalu dipusingkan oleh algoritma suatu program untuk menyentuh konteks-konteks di atas, karena yang benar-benar membahas cara kerja AI itu sendiri biasanya oleh researcher. Adapun di sini kita hanya menggunakan konsep AI yang tinggal kita pakai untuk tujuan tertentu. Dalam hal ini saya menggunakan suatu layanan dari Microsoft Azure, di dalamnya ada salah satu AI terapan bernama Cognitive Services. Sebenarnya ada banyak hal dalam Cognitive Services seperti di bawah ini.


Namun dalam hal ini saya akan membahas tentang Face Recognition atau deteksi wajah. Saya asumsikan anda telah mengerti tentang layanan Microsoft Azure karena kita akan menggunakan layanan Cognitive Service dalam betuk API di Azure. Jika anda belum paham, anda bisa mencoba searching tentang bagaimana membuat akun di Azure. Adapun kegunaan dari deteksi wajah ini cukup luas dan masih dapat berkembang. Misalnya untuk kebutuhan aplikasi anda yang mengharuskan pengguna mengupload foto wajah, atau sistem verifikasi wajah di dalam KTP atau sebagai sistem absensi (dengan penyesuaian) ataupun sebagai smart cctv yang mampu mengenali wajah seseorang (dengan penyesuaian). Adapun contoh nyata yang mungkin kita temukan sehari-hari seperti fitur tag pada facebook, filter pada snapchat atau instagram, ataupun ada aplikasi-aplikasi smartphone  di bidang olah gambar (image editor).

Baiklah langsung saja kita mulai, jadi pada Portal Azure anda bisa ikuti langkah-langkah berikut ini.

1. Pilih New, pilih menu new resource atau create a new resource pada portal azure anda.

2. Pilih AI + Cognitive Services lalu Pilih Face API atau anda juga dapat mengetikkan kata kunci Face API pada kolom pencarian.

3. Isikan form seperti Nama resource, Jenis subscription, Location sampai Pricing Tier dan jangan lupa centang pernyataan I confirm ... Lalu Pilih Create. Setelah menunggu proses building resource, anda dapat merefresh portal azure anda dan memilih resource Face API yang baru saja anda buat. Dalam hal ini nama resource saya adalah face-cogs.
 

4. Cari Endpoint dan Keys. Endpoint adalah url yang akan kita gunakan sebagai server yang menerima request dari kita, dapat ditemukan dalam tab Overview. Sedangkan Keys adalah kode keamanan yang sifatnya privat dan dapat ditemukan di tab Keys. Untuk keys dapat digunakan salah satunya saja. Untuk Endpoint URL dan Key selanjutnya akan digunakan pada proses koding.


5. Buat Kode JavaScript dan PHP. Sebenarnya ketika anda sudah memiliki endpoint dan key, maka anda dapat menggunakannya dengan macam-macam metode. Anda dapat menggunakan bahasa C#, .NET, PHP ataupun JS dan lainnya. Dalam hal ini saya menggunakan Javascript untuk mengirim perintah dan menerima respon, sedangkan PHP akan digunakan untuk memanipulasi foto yaitu menggambar suatu bujur sangkar di foto dengan data yang didapatkan dari respon.
Singkat saja berikut adalah kode yang diperlukan.

JavaScript index.html



PHP box.php


Pada kode di atas dapat disesuaikan beberapa parameter atau atribut wajah yang di minta diantaranya adalah age,gender,headPose,smile,facialHair,glasses,emotion,hair,makeup,occlusion,accessories,blur,exposure,noise pada file index.html ataupun warna bujur sangkarnya yang semula kuning dengan kode rgb 255,255,0 dapat diubah sesuai keinginan anda.
Demo: http://fajarb.cf/cogs/

Sekian yang dapat saya sampaikan, saya harap artikel ini dapat membatu pemahaman dan pengetahuan anda dan dapat anda aplikasikan oleh diri anda sendiri.