Microsoft’a ait emotion detected ( duygu tespit ) servisini kullanarak basit bir app geliştirdim. Bu servisin nasıl kullanılacağı konusunda kaynak olarak orjinal sitesi yeterli aslında ama istedim ki türkçe olarakta bir kaynak olsun elimizde. Bunu bir makaleye çevirelim dursun kenarda ihtiyacı olan arkadaşlara lazım olur. Tüm api kullanımlarında olduğu gibi bir key üreterek başlıyoruz işe. Onu şu linkten yapıyoruz.
Artık basit uygulamamızı geliştirmeye hazırız. Bir PHP sayfamız olsun ve buraya bir resim upload edelim. Upload ettiğimiz bu resmi Emotion API’ye işleme verelim ve bize bu resmin yansıttığı duyguyu oranları ile beraber versin. Formumuzun bulunduğu sayfa ( index.php )
1 2 3 | <input type="file" class="upload" name="image" id="image" /> <div id="upload_status"></div> <div id="result"></div> |
Standart HTML taglarını yazmıyorum siz bir standart HTML sayfası içerisine bunları yazıp CSS ile de stil verebilirsiniz. Sonra bu upload işlemini gerçekleştirecek Javascript ve PHP kodlarını yazalım. Javascript ve upload yanyana pek anlam verememiş olabilirsiniz ? olsun bir önemi yok. Sadece bir button ile formu post etmek yerine seçer seçmez resmi change event ile post edip arka planda upload işlemini yaptıracağız. Bir fark yok. Ancak javascript kodlarımızı biraz açıklayacağım makale sonunda çünkü resim upload edildikten sonra arka planda upload ettiğimiz resmi emotion apiye gönderiyoruz ve işleme sokup sonucunu JSON datası olarak alıyoruz. Javascript kodlarımız ;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | $(function () { $('input[type="file"]').on("change", function () { var img = $('#image')[0]; var data = new FormData(); var allowed_types = [".png", ".jpg", ".gif", ".GIF", ".JPG", ".PNG"]; var ext = img.files[0].name.substring(img.files[0].name.length - 4, img.files[0].name.length).toLowerCase(); if (allowed_types.indexOf(ext) != -1) { data.append('image[]', img.files[0]); } else { img.files[0] = null; $('#upload_status').html('Dosya tipi desteklenmiyor.').css('color', '#990000').fadeIn(); return false; } $.ajax({ data: data, contentType: false, processData: false, type: 'POST', dataType: 'json', url: 'proccess.php', beforeSend: function () { $('#upload_status').css('color', '#0f4c87').html('Yükleniyor..').fadeIn(); }, success: function (response) { if (response.status == 'ok') { $('#upload_status').html('Yüklendi !').css('color', '#0f4c87').fadeIn(); var up_image = response.data; $.ajax({ url: "https://api.projectoxford.ai/emotion/v1.0/recognize", beforeSend: function (xhrObj) { // Request headers xhrObj.setRequestHeader("Content-Type", "application/json"); xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", "xxxxxxxxxxxxxxxxxxxxxx"); $('#upload_status').html('Analiz ediliyor...').css('color', '#0f4c87').fadeIn(); }, type: "POST", data: '{ "url": "./uploads/'+up_image+'" }', dataType: 'json', }) .done(function (data) { $('#upload_status').fadeOut(); var html = ''; html += '<img src="./uploads/'+up_image+'" style="clear:both; margin-top:20px; margin-bottom:20px; width:'+response.w+'px; position:relative;" />' html += '<h4>Analiz Sonucu</h4>'; html += '<span class="result_val"><b>Öfke :</b> '+data[0].scores.anger+'</span>'; html += '<span class="result_val"><b>Aşağılama :</b>'+data[0].scores.contempt+'</span>'; html += '<span class="result_val"><b>Tiksinti :</b>'+data[0].scores.disgust+'</span>'; html += '<span class="result_val"><b>Korku :</b>'+data[0].scores.fear+'</span>'; html += '<span class="result_val"><b>Mutluluk :</b>'+data[0].scores.happiness+'</span>'; html += '<span class="result_val"><b>Nötr :</b>'+data[0].scores.neutral+'</span>'; html += '<span class="result_val"><b>Üzüntü :</b>'+data[0].scores.sadness+'</span>'; html += '<span class="result_val"><b>Sürpriz :</b>'+data[0].scores.surprise+'</span>'; $('#result').html(html).fadeIn(); /* * anger / öfke * contempt / aşağılama * disgust / tiksinti * fear / korku * happiness / mutluluk * neutral / nötr * sadness / üzüntü * surprise / sürpriz */ }) .fail(function () { $('#upload_status').html('Analiz Tamamlanamadı !').css('color', '#0f4c87').fadeIn(); }); } else if (response.status == 'not_supported') { $('#upload_status').css('color', '#990000').html('Sadece resim yükleyebilirsiniz !').fadeIn(); } else { $('#upload_status').css('color', '#990000').html('Yüklenemedi !').fadeIn(); } } }); }); }); |
Sonrasında da bu javascript kodlarımız ile gönderdiğimiz dataları işleyen PHP kodlarımızı verelim. ( proccess.php )
1 2 3 4 5 6 7 8 9 10 11 12 13 | $res = false; $tmp_name = $_FILES ['image'] ["tmp_name"][0]; list($width, $height) = getimagesize($tmp_name); if (exif_imagetype($tmp_name) != IMAGETYPE_GIF && exif_imagetype($tmp_name) != IMAGETYPE_JPEG && exif_imagetype($tmp_name) != IMAGETYPE_PNG) { // kontrol hatalı return array('status' => 'not_supported'); } else { $name = $_FILES ['image'] ["name"][0]; $res = move_uploaded_file($tmp_name, './uploads/' . $name); if ($res) { echo json_encode(array('status' => 'ok', 'data' => $newname, 'w'=>$width)); } else { echo json_encode(array('status' => 'error')); } |
Şimdi yukarıdaki kodları açıklayalım biraz. Bir HTML file input var. 2 adette durumu göstermek için divlerimiz var. HTML file input ile resmi seçer seçmez javascript kodlarımızda da göreceğiniz üzere change event içerisinde bir takım kodlar çalıştırıyoruz. Burada yüklemek üzere seçilen dosyanın resim mi olduğunu kontrol ettiriyoruz ve eğer resim değil ise upload_status divimiz içerisine dosya tipi desteklenmiyor yazıyoruz. Aksi halde uygun olarak kabul edilip oluşturduğumuz FormData(); nesnemizin içerisine append ediyoruz ve ajax isteği oluşturarak process.php sayfasına gönderiyoruz. Ajax isteğimizin beforeSend kısmında yükleniyor yazıyoruz. Bu çok önemli değil ama işlemi takip edebilmemiz açısından yazılması iyi olur.
Sonra success kısmında ise esas işleme geçiş için biletimiz olmuş oluyor. Yani resim yüklenmiş Emotion API’ye gönderilmeye hazır konumdadır. Div içerisine yüklendi uyarısını verip Emotion API’ye bir ajax isteği oluşturuyoruz. ( https://api.projectoxford.ai/emotion/v1.0/recognize ) Bu linke resmimizi iletiyoruz. ( { “url”: “./uploads/’+up_image+’” } ). Ancak beforeSend kısmında header oluşturuyoruz ve makalemizin başında verdiğim linkten oluşturduğumuz keyi header olarak Emotion API’ye gönderiyoruz. Aynı şekilde header kısmında content type application/json olarak belirtiyoruz burası da önemli. Sonra bize ( done event ) JSON olarak resmin analizini geri döndürüyor. Bunu da ekrana yazdırıyoruz ;
data[0].scores.anger
şeklinde.
Sonuç
Dönen değere konsoldan baktığımızda içerisinde tespit edilen duygular olarak oldukça fazla seçenek var. Hepsini ayrı ayrı yazdırabiliriz ekrana. Ya da en yoğun olan duyguyu yazdırabiliriz. Diğer verdiği duygular ise şöyle ;
/*
* anger / öfke
* contempt / aşağılama
* disgust / tiksinti
* fear / korku
* happiness / mutluluk
* neutral / nötr
* sadness / üzüntü
* surprise / sürpriz
*/
Mantıklı selfie gönderin derim 1-2 defa bir yüz ifadesi bulunmayan saçma sapan resimler göndermiştim hata döndürmüştü bana ? Yani gönderdiğiniz resmin bir yüz ifadesi olup olmadığını da ayırıyor bu servis ? Anlamadığınız kısımları sorabilirsiniz.
