Merhabalar,
Bu yazımızda, Power Platform ürün ailesi, SharePoint Online ve Azure Cognitive Services bileşenlerinden Face API servislerini kullanarak basit bir “Mutluluk Analizi” uygulaması yapacağız. Uygulama fikir analizi aşaması genel olarak düşünüldüğünden dilerseniz kurum içinde dilerseniz organizasyonunuzda dilerseniz de bireysel olarak kullanabilirsiniz.
Uygulama ekranı görüntüsü:
Giriş
Başlamadan evvel kullanılan servisleri ve bileşenleri kısaca tanıyalım isterim.
Power Apps
Power Apps, Power Platform ürün ailesinin bir bileşeni olarak form tabanlı uygulamalar geliştirmek için kullanılan bir yazılım servisidir. Uygulama ekranlarını ve Power Automate’de geliştirilen iş akışımızdan gelen verileri Power Apps ekranında işleyip ekrana basacağız.
Power Automate
Yukarıda Power Apps açıklamasını yazarken de belirttiğim üzere, Power Automate kullanarak otomatik, manuel, belirli bir zamanda çalışan veya UI test işlemleri için iş akışları oluşturmanıza yarayan bir Power Platform ürün ailesi bileşenidir. Power Automate ürününü Cognitive Services bileşenlerinden Face API servisine bağlanıp, veri işleme,dönüştürme ve Power Apps e bu sonuç setini göndermek için kullanacağız.
SharePoint Online
SharePoint Online, intranet siteleri oluşturma, gruplar kurma, doküman paylaşma işlemlerini yürüttüğünüz bir portal çözümüdür. Bu uygulamada kullanım amacı, Power Apps ile çekilen selfie resimlerinin bir resim kütüphanesi bileşeninde saklamak içindir.
Cognitive Services – Face API
Bilişsel Servisler olarak Türkçeye çevirisi yapılan Cognitive Services bir Azure servisidir. Kullanıma hazır makine öğrenmesi ve yapay zeka çözümlerini barındırır. Cognitive Services bir API katmanı sağlar ve siz buraya veri gönderip sonuç seti alırsınız. Herhangi ekstra bir makine öğrenmesi algoritması oluşturmanıza veya kullanmanıza gerek kalmaz. Uygulamalarınızda yapay zeka çözümlerini hızlıca implemente etmek isterseniz Cognitive Services gibi hazır çözümler size hız kazandırır. Biz bu uygulamada Cognitive Services bileşenlerinden olan “Face API” kullanıyor olacağız. Face API ile çekilen selfie fotoğraflarının analizini yapacak, istediğimiz, ihtiyacımız olan verileri çekecek ve uygulamamızda bu verileri anlamlı bir şekilde göstereceğiz.
Uygulamamızda kullanılan bileşenleri tanıttığımıza göre uygulama geliştirme adımlarından bahsetelim.
- Face API – Cognitive Services kurulumu ve anahtar ile endpoint bilgilerinin oluşturulması
- SharePoint Online resim kütüphanesinin oluşturulması ve özel alanların eklenmesi
- Power Automate ile iş akışının geliştirilmesi
- Power Apps ile uygulamanın geliştirilmesi ve bağlantıların uygulanması
O hâlde, anlatımımıza Face API entegrasyonu ile başlayabiliriz
1-Face API – Cognitive Services kurulumu ve anahtarların oluşturulması
Face API için Azure hesabınıza erişmeniz gerekmektedir (https://portal.azure.com)
Hesabınıza eriştikten sonra arama alanına “Cognitive Services” yazınız. Sonuçların listelendiği alt kısımda yer alan aynı isimli bileşene tıklayınız.
Yeni açılan sayfada “+ Add” ifadesine tıklayınız
Bu adımdan sonra açılan yeni sayfada, Face API adlı bileşenimizi seçeceğiz.
Eğer Face API adlı bileşeni göremiyorsanız, Cognitive Services alanında “See More” linkine tıklamanız gerekecektir.
Yeni sayfada bileşenlerden “Face” adlı hizmeti bulup seçiniz.
Face API ye tıkladığınızda sizi servisi oluşturabileceğiniz ekrana getirecektir. Bu ekranda önce “Create” diyerek servisi oluşturalım:
Üyelik modeliniz de dahil olmak üzere tüm bilgilerinizi giriniz. “Instance” yazan yere özel bir isim verebilirsiniz.
“Pricing Tier” yazan yerde servisi kullanırken nasıl faturalandırılacağını görebilirsiniz. Geliştirme aşamasında “Free” olarak belirtilen ücretsiz modeli seçebilirsiniz.
Hizmetinizin oluşması 1-2 dakika alabilir(veya daha kısa da sürebilir!). Hizmet kurulumu tamamlandıktan sonra hizmetinize erişip servis bağlantısı için API endpoint ve anahtar bilgilerini almanız gerekmektedir.
Azure Face API hizmetinizde “Keys and Endpoint” menü alanına erişiniz. Bu alandaki bilgileri kullanarak servislerde ve yazılımlarınızda gerekli ihtiyaç duyulan bilgileri bulabilirsiniz.
“Show Keys” düğmesine tıklayarak varsayılan olarak sizin için oluşturulan anahtarları görüntüleyebilirsiniz. 1 adet anahtar ve “ENDPOINT” yazan alandaki bilgiyi alıp bir kenara not ediniz. Power Automate ile iş akışımızı oluşturduğumuzda bu bilgileri tanımlayacağız.
2-SharePoint Online doküman kütüphanesinin oluşturulması ve özel alanların eklenmesi
Şimdi de sıra, selfie çekimi sonrası resimlerin nereye kaydedileceğini belirtmeye ve uygulamaya geldi.
Çekilen resimleri SharePoint Online üzerinde yer alan bir doküman kütüphanesine kaydetmemiz gerekecek. Bu işlem için SharePoint Online lisansınızın olduğunu varsayarak, doküman kütüphanesi oluşturma işlemlerine başlayalım isterim.
SharePoint online hizmetinize ulaşınız. Portal isimlendirmeleri https://{isim}.sharepoint.com olarak belirtilir.
Portalınıza ulaşıp “Site İçeriği”ne giriniz (örneğin: https://iberpoint.sharepoint.com/_layouts/15/viewlsts.aspx?view=14 ) veya portalınızın sağ üst kısmında yer alan çark ikonuna tıklayarak da ulaşabilirsiniz.
Site içeriğine geldiğinizde (admin veya gerekli yetkilere sahip olduğunuzu düşünerek) yeni bir doküman kütüphanesi ekleyiniz. “Yeni” menüsünden “Belge Kitaplığı”nı seçiniz
Hemen sağ bölümde bir pencere açılacaktır, belge kitaplığı/doküman kütüphanesi bileşenine bir isim veriniz. Uygulamada kullandığımız isim “Selfies” olacaktır ancak isimlendirmeyi dilediğiniz gibi verebilirsiniz.
Kitaplığımız oluştuktan sonra aşağıdaki gibi bir görünüme kavuşturmamız gerekecek. Bu yüzden birkaç adet özel kolon ekleyeceğiz
| Kolon ismi | Tipi |
| Fotograf | Köprü veya Resim(resim seçili olmalı) |
| Durum | Tek satır metin |
| Yas | Sayı |
| Cinsiyet | Tek satır metin |
Eklenmesi gereken kolon isimleri ve tiplerini yukarıdaki tabloda belirttim. Bu kolon isimlerini Power Automate de kullanarak, oluşturduğumuz doküman kütüphanesi/belge kitaplığını veriler ile dolduracağız.
3-Power Automate ile iş akışının geliştirilmesi
Belki de en çok uğraştıracak olan, işin bu kısmı olacaktır. Vakit kaybetmeden hemen iş akışımıza başlıyoruz.
Power Automate hesabınız var ise, https://flow.microsoft.com adresine ulaşıp Flow umudu oluşturmaya başlıyoruz.
Öncelikle iş akış tipini seçeceğiz. Bu uygulama bir PowerApps uygulaması olduğundan “Instant” iş akışı kullanmamız daha doğru olacaktır.
Instant iş akışını oluşturmak için;
Power Automate sol menüsünden Create->Instant Flow seçeceğini seçmeli ve PowerApps i tetikleyici olarak belirtmeliyiz
İş akışına bir isim vererek “Create” düğmesine basınız. (Türkçe kullanıyorsanız “Oluştur” diye geçmektedir)
Bu adım ilk başlangıcımız olacaktır. Power Automate Instant iş akışı uygulamalarında ilk aşama her zaman bir tetikleyiciye aittir. Yâni, bir olay tetiklenmeden iş akışı çalışmaz. İş akışımızı tetiklettirerek çalışmasını sağlayacak olan Power Apps üzerinden bu iş akışının başlatılması olacaktır.
Power Apps bu uygulamanın en son adımı olduğundan ötürü bir sonraki bölümde konuyu irdeliyor olacağız.
Power Apps tetikleyicimizden sonra çalışmasını istediğimiz aksiyonumuz “Compose” ve “Create File(SharePoint Online)” aksiyonları olacaktır.
İki aksiyonu birlikte açıklamak gerekiyor.
Öncelikli olarak “Create file” aksiyonumuza bilgi doldurmamız gerekmektedir.
1- Site Adres bilgisini giriniz
2-Daha önce oluşturduğumuz belge kitaplığımızı “Folder Path” alanında seçiniz (benim ortamımda “Selfies” olarak anılmaktadır)
3-FileName olarak Power Apps’e sorunuz:
bir alanda iken “Ask in PowerApps” seçeneğine basarsanız PowerApps de bu iş akışını kullanırken parametre göndermek zorundasınız.
4-FileName için PowerApps’den bu bilgiyi alacağımızı belirttik.
5-File Content konusu biraz karışık. Onun için basit bir şekilde ifade etmeye özen göstereceğim.
“Ask In PowerApps” dediğimizde ilgili alanda bir adet ifade oluşturulur. Bu ifadenin yazım şekli şu şekilde olur: {Aksiyon ismi}_{bilgi istenen alanın ismi}
Aksiyon ismi yazan yer bizim iş akışına eklediğimiz aksiyon yani adımlardır. “Create File” ve “Compose” birer aksiyondur. Dolayısıyla da birer adımdır. Eğer PowerApps e sorun dediyseniz ve isimlerini yeniden adlandırmadıysanız, ilgili alanın alacağı değer “Createfile_FileName” veya “Compose_FileName” olacaktır.
FileName için PowerApps den gelen değeri kullanacağız ama File Content için dosya oluşturma işlemi yapmamız gerekiyor. Bu yüzden, FileContent alanını doldururken öncelikle “Ask in PowerApps” seçeneğiniz seçiniz ve ilgili ifadenin oluşturulduğundan emin olduktan sonra siliniz.
Merak etmeyin! İlgili ifade silinmedi 🙂
Power Automate ile çalışmanın en güzel tarafı da budur. Bir parametreyi tanımlarken silip daha sonra yeniden kullanabiliyorsunuz. Parametrenin kullanıldığı aksiyon/adım ı silmediğiniz müddetçe bu geçerli olacaktır.
Ardından, Compose aksiyonuna geri dönün ve aşağıdaki gibi bir ifadeyi tanımlayınız. Expression ve Dynamic Content tablarını kullanmadıysanız şunu belirtelim: Expression ile önceden tanımlı methodları kullanıyorsunuz, örneğin: int(string) gibi (int, string bir ifadeyi sayıya dönüştüren methoddur). Dynamic Content ile de ilgili seçili alanda kullanabileceğiniz parametrik ifadeler yer alır, “Ask in PowerApps” buna dahildir.
Compose aksiyonunda tanımlayacağımız ifade şu şekildedir:
dataUriToBinary(triggerBody()['Createfile_FileContent'])
“Compose” aksiyonumuzda “Create File” aksiyonundaki bir parametreyi kullandık ve bunu bir dosya olarak dönüştürmesini sağladık.
Şimdi tekrar “Create File” aksiyonuna gidip “Compose” aksiyonunda dönecek olan “Outputs” parametresini ekleyelim.
“Create File” aksiyonunda son durum bu şekilde olmalıdır.
Power Apps de kamera kullanarak bir resim çektiğimizde SharePoint Online’da bu bir resim dosyasına dönüşecek ve bu şekilde kayıt olacaktır. Burada gerçekleştirdiğimiz işlem tam anlamıyla budur.
Sonraki aşamaya geçelim: HTTP çağrısı
HTTP çağrısını bu uygulamayı anlatmaya başladığımızda belirttiğimiz ilk adımdır. Yeni, Cognitive Services – Face API oluşturma adımı.
Bir kenara anahtar ve endpoint bilgilerini kaydetmenizi istemiştik. Endpoint bilgisini belirtmemiz gerekmeyecek belki ama yine de not almanızda fayda vardı.
URI olarak ise, Cognitive Services-Face API yi hangi coğrafik alanda oluşturduysanız onu vermeniz gerekecektir. Face API için kullanılabilecek diğer coğrafik bölgeleri paylaşmam gerekirse:
Australia East - australiaeast.api.cognitive.microsoft.com Brazil South - brazilsouth.api.cognitive.microsoft.com Canada Central - canadacentral.api.cognitive.microsoft.com Central India - centralindia.api.cognitive.microsoft.com Central US - centralus.api.cognitive.microsoft.com East Asia - eastasia.api.cognitive.microsoft.com East US - eastus.api.cognitive.microsoft.com East US 2 - eastus2.api.cognitive.microsoft.com France Central - francecentral.api.cognitive.microsoft.com Japan East - japaneast.api.cognitive.microsoft.com Japan West - japanwest.api.cognitive.microsoft.com Korea Central - koreacentral.api.cognitive.microsoft.com North Central US - northcentralus.api.cognitive.microsoft.com North Europe - northeurope.api.cognitive.microsoft.com South Africa North - southafricanorth.api.cognitive.microsoft.com South Central US - southcentralus.api.cognitive.microsoft.com Southeast Asia - southeastasia.api.cognitive.microsoft.com UK South - uksouth.api.cognitive.microsoft.com West Central US - westcentralus.api.cognitive.microsoft.com West Europe - westeurope.api.cognitive.microsoft.com West US - westus.api.cognitive.microsoft.com West US 2 - westus2.api.cognitive.microsoft.com UAE North - uaenorth.api.cognitive.microsoft.com
Biz kaynağımızı West Europe(Batı Avrupa) lokasyonunda oluşturduk.
Anahtarınızı “Ocp-Apim-Subscription-Key” olarak girdisini sağladığımız alanın karşısına giriniz.
“Content-Type” olarak gönderdiğimiz başlık bilgisi ise “application/octet-stream” olacak.
“application/octet-stream” gönderme sebebimiz bir binary formatında dosyayı Cognitive Services Face API servisine post etmemizden dolayıdır. Face API, imaj dosyası işleyen bir servistir dolayısıyla göndermemiz gereken veri bir binary formatında resim dosyası olmalıdır.
Body kısmında ise “Outputs” parametresini gönderme sebebimiz, “Compose” aksiyonunda dosya içeriğini binary formatına dönüştürdüğümüz içindir. Body alanı bir dosya içeriği kabul eder ve bu veriye göre Face API görüntü işleme çalışmasını yapabilir.
HTTP çağrımızda doldurmamız gereken en önemli kısımlardan birisi de “Queries” bölümüdür. Bu alanda, Cognitive Services-Face API servisine yapacağımız HTTP çağrılarında almak istediğimiz yüz tanımlamalarını belirleyebiliyoruz.
Örneğin;
Yaş, Cinsiyet, Duygu seti, gülüş şekli, saç vb. birçok parametre gönderebiliriz.
Bizim istediğimiz veriler age, gender, emotion olacağından ötürü bu 3 veriyi dahil edebilirsiniz ama ekstra bilgilere de ihtiyaç duyarsanız “,” virgül ile ayırıp ekleyebilirsiniz.
HTTP çağrısından sonraki adım, bu çağrıdan dönecek verilerin değişkenlere atanarak farklı aksiyonlarda kullanılmasını sağlamak olacaktır. Bu yüzden “Parse JSON” aksiyonunu iş akışımıza ekliyoruz.
“Content” alanı bir önceki aksiyonumuz olan HTTP çağrımızdan dönen içerik olacaktır. HTTP çağrısından veri JSON formatında döneceğinden ötürü “Schema” alanında HTTP Çağrısında kullanılan şemayı belirtmemiz gerekiyor. Bunun sağlamasını yapmak istiyorsanız, HTTP çağrısına kadar iş akışınızı çalıştırabilir ve dönen değeri “Generate from sample” düğmesine tıklayarak ekleyebilirsiniz. Bu düğmedeki fonksiyoneline şu şekilde çalışır: Siz örnek bir JSON şeması eklediğinizde bu onu tip ayıracına kadar parçalar ve genel kullanılabilir bir şema koduna dönüştürür.
Kullanmak isterseniz diye JSON şemamı paylaşıyorum:
{
"type": "array",
"items": {
"type": "object",
"properties": {
"faceId": {
"type": "string"
},
"faceRectangle": {
"type": "object",
"properties": {
"top": {
"type": "number"
},
"left": {
"type": "number"
},
"width": {
"type": "number"
},
"height": {
"type": "number"
}
}
},
"faceAttributes": {
"type": "object",
"properties": {
"smile": {
"type": "number"
},
"gender": {
"type": "string"
},
"age": {
"type": "number"
},
"emotion": {
"type": "object",
"properties": {
"anger": {
"type": "number"
},
"contempt": {
"type": "number"
},
"disgust": {
"type": "number"
},
"fear": {
"type": "number"
},
"happiness": {
"type": "number"
},
"neutral": {
"type": "number"
},
"sadness": {
"type": "number"
},
"surprise": {
"type": "number"
}
}
},
"hair": {
"type": "object",
"properties": {
"bald": {
"type": "number"
},
"invisible": {
"type": "boolean"
},
"hairColor": {
"type": "array",
"items": {
"type": "object",
"properties": {
"color": {
"type": "string"
},
"confidence": {
"type": "number"
}
},
"required": [
"color",
"confidence"
]
}
}
}
}
}
}
},
"required": [
"faceId",
"faceRectangle",
"faceAttributes"
]
}
}
“Parse JSON” tanımlandıktan sonra JSON içerisinde kullanılan tüm özelliklere(property) erişebilmektesiniz.
Şimdilik bu konuyu bekletelim ve sonraki adımımıza geçelim: Değişken tanımlama
Power Automate’de kullanacağımız ve Power Apps’e geri döndüreceğimiz birkaç adet dönüş değeri olacaktır. Bu değerleri döndürmeden önce onlar ile işlem yapmamız gerekmektedir. Bu işlemler genelde bir değişken tanımlayıp değerini bu değişkenlere atama şeklinde olur.
Örnek vermemiz gerekirse;
GenderVariableSetting olarak ismini değiştirdiğimiz bir “Initialize Variable” aksiyonu ekledik. Bu değişkenin amacı, Power Automate’de JSON olarak dönen özelliklerden cinsiyet ile ilgili olan alanı seçerek değişkenin kendisine atama yöntemi olacaktır. Power Automate içerisinde parametresel olarak kullanmak için “GenderVar” değeri tanımladık. Bu değerin bir metinsel ifade içereceğini de belirttik. Dikkat ettiyseniz “Value” kısmını boş bıraktık. Çünkü, buna ihtiyacımız yok. Değerini az önce belirttiğimiz üzere daha sonradan atayacağız.
Yukarıda yaptığımız gibi sonraki adımımız değişken tanımlaması olacak. New Step(Yeni Adım) diyerek “Initialize Variable” aratınız ve iş akışınıza ekleyiniz.
Bu yöntemi kullanarak 11 adet değişken tanımlayacağız. Değişkenlerin tam listesine aşağıdan ulaşabilirsiniz:
| Aksiyon Başlığı | İsmi | Tipi |
| GenderVariableSetting | GenderVar | String |
| AgeVariableSetting | AgeVar | Float |
| StatusVariableSharePointList | StatusVar | String |
| AngerVariableSetting | AngerVar | Float |
| ContemptVariableSetting | ContemptVar | Float |
| DisgustVariableSetting | DisgustVar | Float |
| FearVariableSetting | FearVar | Float |
| HappinessVariableSetting | HappinessVar | Float |
| NeutralVariableSetting | NeutralVar | Float |
| SadnessVariableSetting | SadnessVar | Float |
| SurpriseVariableSetting | SurpriseVar | Float |
Aşağıda iş akışımızdan bir ekran görüntüsü mevcuttur. Adım adım değişkenlerin tanımlanmasına örnek gösterebiliriz. Sıralama önemli değil ancak ilgili değişkenleri tanımladığınızdan emin olunuz. Duygu setleri ile ilgili de değişkenler tanımladığımızı gözlemlediğinize göre bu konuyu da açmamız gerekmektedir. Cognitive Services – Face API kullandığınızda yüz bilgilerinin yanı sıra yüz hatları ile ilişkilendirilen duygu yoğunlukları da tanımlanır. Bu duygular 8 adettir:
1. Anger- Kızgınlık
2. Contempt-Alaycılık,Horgörme,Aşağılama
3. Disgust-Bıkkınlık,İğrenme
4. Fear-Korku,Endişe
5. Happiness-Mutluluk,Sevinç
6. Neutral-Normal,Nötr
7. Sadness-Mutsuzluk,Neşesiz
8. Surprise-Şaşkınlık
Bu bilgiler Face API üzerinden geldiğine göre bu verileri de dahil etmemiz ve işlememiz gerekmektedir. Bu yüzden her bir duygu için de birer değişken tanımladık.
Şimdi bu oluşturduğumuz değişkenlere veri atama işlemleri gerçekleştireceğiz. Face API üzerinden dönen veriler bir dizi şeklinde bize ulaştığından bir sonraki adımımızda “Apply to Each” aksiyonu eklememiz gerekmektedir.
“Apply to Each” aksiyonunu, eğer elinizde birden fazla veri seti mevcut ise, bir dizi eleman gibi kullanmak gerekmektedir. Bu aksiyonumuz bir konteyner görevi de görmektedir. Bir dizi elemanın içeriği arasında döndüğünüzde ekstradan aksiyonlar belirleyebiliyorsunuz. Bu bağlamda, “Apply For Each” aksiyonumuzun içeriğine “Parse JSON” aksiyonumuzdan dönen veri setini kullanacağız ve kullanıcının duygu, yaş, cinsiyet, durum bilgisine ulaşıp, bir önceki adımımızda oluşturduğumuz değişkenlerimize veri atama işlemini gerçekleştireceğiz
2 adet örnek inceleyelim: Cinsiyet bilgisi ve Şaşkınlık duygusu
1- Cinsiyet bilgisinin iş akışı
Yukarıda açıklamamda “Parse JSON” dan dönen veri setinden bahsetmiştim. “Apply to Each” aksiyonunda parametre olarak eklenen “Body” ifadesi “Parse JSON” aksiyonumuzdan dönen veri setimizdir. Bu veri seti, Face API den dönen verilerin bilgisini içerir. “GenderVar” diye daha önceden oluşturduğumuz bir değişkenimiz mevcuttu. Değişkenleri önceden tanımlayıp, veri setinden ihtiyacımız olan veri olarak (bu durumda “gender” bilgisi) “Parse JSON” dan ilgili veriyi çekiyoruz. “Body” içerisinde döndüğümüz için alakalı veriyi ilgili değişkenimize aktarıyoruz.
Şimdi de bir duygu değişkeni üzerinde yapılan işlemleri anlatalım. Burada 2 farklı iş aksiyonu tanımlayacağız.
2- Şaşkınlık duygusu bilgisinin çekilmesi, ilgili değişkene atanması ve kondisyonel olarak veri döndürme iş akışı
Yukarıda ekran görüntüsü olarak paylaştığım iş akışında, ilk adım olarak öncelikle “Parse JSON” dan çekilen “surprise” bilgisinin “SurpriseVar” değişkenimize atamasını gerçekleştiriyoruz.
Sonraki adımımız ise Power Apps ile alakalı. Biz uygulamamızda duygu değeri “0” olmayan verileri çekip göstermeliyiz. Face API’nin döndürdüğü verileri analiz ettiğimizde eğer bir duygunun değeri “0” ise, çekilen resimde o duyguya dair hiçbir izlenim elde edilememiştir ve kullanılmayacaktır.
Face API’den dönen örnek bir veri seti:
"emotion": {
"anger": 0,
"contempt": 0.053,
"disgust": 0,
"fear": 0,
"happiness": 0.062,
"neutral": 0.884,
"sadness": 0,
"surprise": 0
}Yukarıda belirtilen veri setimizde, “0” olan değerlerde herhangi bir duygu belirlenememiştir. Küsuratlı sayılarda ise, toplamı 1 değerini geçmeyecek şekilde duygular arasında paylaşıldığını gözlemleyebilirsiniz.
Şimdi bizim de burada kurguladığımız yapı, eğer ilgili duygu “0” değerine eşit değilse “StatusVar” olarak ifade edilen ortak bir durum değişkenine atamasını gerçekleştiriyoruz.
“StatusVar” değişkenimizde veriler bir metin olarak yazılacaktır. Metin değerleri de duyguları ifade eder. Değişkenin değeri boşluk ile ayrılarak atanacaktır. Yukarıda örnek olarak belirtilen Face API çıktısını bu kapsamda değerlendirecek olursak; “StatusVar” değişkenimizde Türkçe olarak “Alaycı Mutluluk Normal” değeri atanacaktır. Daha sonra bu atanan verilerin nasıl ve nereye kaydedildiğine değineceğiz.
Genel olarak bu alandaki iş akışımız şu şekildedir:
Bir sonraki adımımız, veri atama işlemini gerçekleştirdiğimiz değişkenlerimizi kullanarak SharePoint Online belge kitaplığı/doküman kütüphanesinde bulunan özel kolonlara veri kaydetme işlemi olacaktır.
Bu işlem için “Update file properties” aksiyonu kullanılacaktır.
Site adresi ve doküman kütüphanesi adresini kendi ortamınıza göre ayarlayabilirsiniz.
ItemId değeri “Create File” adlı SharePoint Online aksiyonunda gelen verimizdir ve yüklenen dosyanın ID bilgisini içerir. Biz bu ID değerini kullanarak dosyanın özel kolonlarını güncelleriz.
Başlık bilgisini kullanmadığımız için boş bıraktık.
Durum bilgisine daha önceden oluşturduğumuz aralarında boşluk olacak şekilde birden fazla değer içeren “StatusVar” isimli metinsel değişkenimizi atamaktayız.
Yas bilgisine de (Face API üzerinden gelmekte olup) “AgeVar” isimli değişkenimizi atamaktayız.
Cinsiyet bilgisinde dönecek değere göre Türkçeleştirme yaptık. Face API den gelen değer ne ise koşullu/kondisyonel olarak bir ifade tanımlıyoruz:
if(equals(variables('GenderVar'),'male'),'Erkek','Kadın')Eğer Face API servisine gönderdiğimiz ve “selfie” olarak çektiğimiz resmimizde bizi “male” olarak tanıdıysa “Erkek”, değilse de “Kadın” olarak işaretleyip “Cinsiyet” özel kolonuna bu değeri atıyoruz.
Son adımımız artık bu dönen değerleri Power Apps’e göndermek olacak. Power Apps in için özel olarak bir aksiyonumuz mevcut: “Respond to a Power App or Flow”
Bu aksiyon sonucu Power Apps’e gönderilecek olan her bir değerin tanımlamasını aşağıdaki tabloda bulabilirsiniz. Detaylı açıklamayı akabinde yapacağım.
| Ad | Değer | Açıklama |
| gender | GenderVar | Cinsiyet bilgisi bu değerde tutulmaktadır. “GenderVar” isimli değişken atanır. |
| age | int(variables(‘AgeVar’)) | Yaş bilgisi bu değerde tutulmaktadır. “AgeVar” isimli değişken tam sayıya dönüştürülerek kullanılır. |
| anger | float(variables(‘AngerVar’)) | Kızgınlık bilgisi bu değerde tutulmaktadır. “AngerVar” isimli değişken ondalıklı sayıya dönüştürülerek kullanılır |
| contempt | float(variables(‘ContemptVar’)) | Alaycılık bilgisi bu değerde tutulmaktadır. “ContemptVar” isimli değişken ondalıklı sayıya dönüştürülerek kullanılır. |
| disgust | float(variables(‘DisgustVar’)) | Bıkkınlık bilgisi bu değerde tutulmaktadır. “DisgustVar” isimli değişken ondalıklı sayıya dönüştürülerek kullanılır. |
| fear | float(variables(‘FearVar’)) | Endişe bilgisi bu değerde tutulmaktadır. “FearVar” isimli değişken ondalıklı sayıya dönüştürülerek kullanılır. |
| happiness | float(variables(‘HappinessVar’)) | Mutluluk bilgisi bu değerde tutulmaktadır. “HappinessVar” isimli değişken ondalıklı sayıya dönüştürülerek kullanılır. |
| neutral | float(variables(‘NeutralVar’)) | Normal, Nötr bilgisi bu değerde tutulmaktadır. “NeutralVar” isimli değişken ondalıklı sayıya dönüştürülerek kullanılır. |
| sadness | float(variables(‘SadnessVar’)) | Mutsuzluk bilgisi bu değerde tutulmaktadır. “SadnessVar” isimli değişken ondalıklı sayıya dönüştürülerek kullanılır. |
| surprise | float(variables(‘SurpriseVar’)) | Şaşkınlık bilgisi bu değerde tutulmaktadır. “SurpriseVar” isimli değişken ondalıklı sayıya dönüştürülerek kullanılır. |
| status | StatusVar | Durum bilgisi bu değerde tutulmaktadır. “StatusVar” isimli değişken metinsel olarak birden fazla değer tutar. |
Duygu ifadeleri gösteren değişkenlerimizde float fonksiyonunu kullanmamızın sebebi ilgili değerin ondalıklı olarak dönmesini sağlamak içindir. Bu konu ile ilgili Power Apps üzerinde işlemler yapacağız ama genel olarak ondalıklı olarak belirtmemizin sebebi yüzdelik dilim için ondalıklı, küsuratlı bir rakama ihtiyacımız olduğundandır.
Yaş bilgisi için de tam bir sayıya ihtiyaç duyacağımızdan int fonksiyonunu kullandık.
Cinsiyet ve Durum bilgileri metinsel ifadeler olduklarından herhangi bir metinsel işleme sokmadık.
Power Automate ile alakalı olarak yapacaklarımız bu kadardı. Bu uygulamanın belki de en zorlayan tarafı da iş akışının tasarlanmasıdır.
İş akışımızın genel görünümünü aşağıda paylaştım.
4- Power Apps ile uygulamanın geliştirilmesi ve bağlantıların uygulanması
https://make.powerapps.com adresinden Power Apps Editörünü açınız
Yeni bir Canvas uygulaması oluşturmak üzere sol menüden “Create” ve açılan yeni sayfada da “Canvas app from blank” seçiniz.
Uygulamanıza bir isim verip oluşturun.
Bu uygulamada 2 adet ekranımız olacaktır: Anasayfa ve Kamera sayfaları
Her iki sayfaya da geçmeden evvel, projede kullanılacak Ses, İmaj dosyalarını da paylaşalım. Bu dosyaları uygulamanız açıkken, File menüsünden Media seçerek erişip yükleyebilirsiniz.
İmaj Dosyalarımız:
| İmaj | Açıklama |
 | Kızgınlık duygusunu belirten imajımız |
 | Bıkkınlık duygusunu belirten imajımız |
 | Endişe duygusunu belirten imajımız |
 | Normal, Nötr duygusunu belirten imajımız |
 | Mutsuzluk duygusunu belirten imajımız |
 | Şaşkınlık duygusunu belirten imajımız |
 | Alaycılık duygusunu belirten imajımız |
 | Mutluluk duygusunu belirten imajımız |
 | Kamera düğmesi için kullanılacak imajımız |
 | Selfie çeken erkek imajımız |
 | Selfie çeken bayan imajımız |
 | Kullanıcının cinsiyetini(Erkek) belirten imajımız |
 | Kullanıcının cinsiyetini(Kadın) belirten imajımız |
Ses Dosyamız:
| Ses | Açıklama |
| Kameraya basarken çıkacak olan ses İndirmek için tıkla |
Şimdi de ekranlarımızı tasarlamaya başlayalım. Önceliğimiz Kamera ekranının tasarlanması
Kamera ekranımızda yer alacak kontrollerimiz
1 adet Button (transparan arka plan, kenarlık ve üzerine gelince, tıklanınca efektlerinin transparan olarak ayarlanması)
1 adet Camera
1 adet Image (Media klasörüne yüklediğiniz kamera ikonu)
1 adet Audio (Media klasörüne yüklediğiniz ses dosyası. gizlenmiş olarak belirtilecek.)
Yukarıdaki ekran görüntüsü Kamera ekranının nasıl olması gerektiği ile ilgilidir.
Sayfanın herhangi bir yerine Audio kontrolü ekleyip “Visible” değerini “false” olarak belirtiniz. Arka planda çalışma yapısı ile ilgili olarak da Audio kontrolünü bir düğmeye bağlamak için aşağıdaki gibi bir koşullu kod yazmak gerekir:
Böylelikle, her button tıklandığında Audio otomatik çalışacaktır.
Button transparan idir ancak kamera imajının üstünde bulunmaktadır (Kontrolleri birbirinin üstüne veya altına gelecek şekilde ayarlayabilmektesiniz)
Kamera düğmesine yönelik olarak işlemimiz, duygu imajlarını barındıran koleksiyon oluşturma ve Power Automate de yer alan iş akışımıza bağlantı kurup çalıştırmaktır ve dönen değerleri belirlemektir.
Button kontrolüne bir iş akışı bağlamak isterseniz, ilgili nesneyi seçip Action menüsünden Power Automate e tıklamanız akabinde seçeceğiniz iş akışı ile bağlamanız gerekecektir.
Dikkat! Her iş akışı bağlama işleminde ilgili nesneye yazdığınız tüm kodlar silinip Power Automate bağlantı kodu yazılır. Bu sebep ile, bir iş akışına bağlamadan evvel kodlarınızı kopyalayınız.
İlgili kamera düğmesine yazılan kodlar aşağıda tam olarak verilmiştir.
Set(ButtonShow, false );
Navigate(Home);
Set(CapturedImage,Camera1.Stream);
Set(FileName,(Text(Now(),"[$-en-US]yyyy-mm-dd--hh-mm-ss" & ".jpg")));
Set(AllUserDataCollection,UserPhoto.Run(FileName,CapturedImage));
ClearCollect(EmotionsList,
{
Name: "Kızgın",
Tag: "anger",
Image: 'anger-smiley',
Value: AllUserDataCollection.anger * 100
},
{
Name: "Alaycı",
Tag: "contempt",
Image: 'contempt-smiley',
Value: AllUserDataCollection.contempt * 100
},
{
Name: "Normal",
Tag: "neutral",
Image: 'neutral-smiley',
Value: AllUserDataCollection.neutral * 100
},
{
Name: "Şaşkın",
Tag: "surprise",
Image: 'surprise-smiley',
Value: AllUserDataCollection.surprise * 100
},
{
Name: "Mutlu",
Tag: "happiness",
Image: 'happiness-smiley',
Value: AllUserDataCollection.happiness * 100
},
{
Name: "Bıkkın",
Tag: "disgust",
Image: 'disgust-smiley',
Value: AllUserDataCollection.disgust * 100
},
{
Name: "Endişeli",
Tag: "fear",
Image: 'fear-smiley',
Value: AllUserDataCollection.fear * 100
},
{
Name: "Mutsuz",
Tag: "sadness",
Image: 'sadness-smiley',
Value: AllUserDataCollection.sadness * 100
}
);
Set(ButtonShow, true );
Set(ShowEmotionData,true);ButtonShow değişkenimizi button üzerine tıklanınca ortaya çıkan renkli kutucuk tasarım problemini(button kontrolü kullanılmasından ötürü) gizle/göster mantalitesiyle çalıştırmamız. Akabinde, anasayfamız olan “Home” sayfasına yönlendirerek analizlerimizi ekranda göstermek istediğimizi belirtiyoruz. Anasayfaya yönlendirsek dahi, yönlendirme işleminden sonra uygulanan tüm kodlar bitişe kadar çalıştırılmaktadır.
ButtonShow değişkeni ilgili kamera düğmesinin Visible özelliğinde belirtilir
Ardından, Power Automate in kullanması için 2 adet değişken tanımlamaktayız: CapturedImage ve FileName
CapturedImage, kamera kontrolünün çekeceği resim dosyasını ifade etmek için belirtilmektedir. FileName ise üzerinde tarih/saat işlemi yapılarak benzersiz bir imaj ismi alması sağlanmaktadır.
AllUserDataCollection, oluşturduğumuz iş akışından dönecek olan veri setini ifade eder. Hatırlarsanız, iş akışının son adımında Power Apps’e döndürülecek birkaç adet değişken tanımlamıştık:
Artık bu değişkenlere ve içeriklerine AllUserDataCollection kullanarak erişebileceğiz. Örneğin; AllUserDataCollection.gender gibi.. AllUserDataCollection, Set fonksiyonu ile birlikte oluşturulmuştur ve isteğe bağlı olarak herhangi bir isim de verilebilir. Bu ismi kullanma mecburiyetiniz yoktur.
Bu adımdan sonra bir adet koleksiyon(Collection) oluşturuyoruz. ClearCollect ile birlikte kullanma sebebimiz her gönderilen istekte koleksiyonun içeriğini temizlemesini istediğimiz içindir. Bunu yapmak istemiyorsanız direkt “Collect” ifadesini de kullanabilmektesiniz.
EmotionsList ile birlikte tüm duygulara ait bir mini veri seti oluşturuyoruz. İçerisinde Name(Türkçe ismi), Tag(İngilizce ismi), Image(Media klasörüne yüklediğiniz imajlar) ve Value ifadelerini barındırır. Dikkat ettiyseniz “Value” özelliğinde duyguya ait değeri 100 ile çarpıyoruz. Bunun sebebi Face API’nin bize toplam değeri “1” olarak getirmesinden kaynaklanıyor. 100 ile çarparak yüzdelik birimini öğrenebilmekteyiz.
Şimdi de Anasayfa olarak belirttiğimiz “Home” sayfamızı tasarlayalım.
Sayfaya eklenecek kontroller ve ne iş yapacaklarına dair bilgilendirmeleri aşağıdaki tabloda listeledim.Ancak bölüm bölüm açıklamakta fayda olduğunu düşünüyorum.
O zaman sol bölümde yer alacak kontroller ile başlayalım:
| Kontrol Adı | Yapacağı işlem | Kod? |
| Rectangle | Kırmızı renkli bir bölüm oluşturur. | YOK |
| Label | Saat bilgisini tutar | Text özelliğine “timeTop” yazılır. Bu bir değişkendir ve gizli kontrol olan Timer kontrolünde bu değişkenimizin verisini sürekli güncelleriz. |
| Label | İsim bilgisini tutar | Text özelliğine “User().FullName” yazılır. |
| Image | Kullanıcının profil resmini tutar | Border Radius özelliği 86 yapılır ve Image özelliğine “User().Image” yazılır. |
Orta bölümde yer alacak kontroller:
| Kontrol Adı | Yapacağı işlem | Kod? |
| Rectangle | Mavi renkli bir bölüm oluşturur. | YOK |
| Label | “Sen de Selfie çeksene!” yazılı metini içerir. | Text özelliğine solda belirtilen metin yazılır. |
| Image | Selfie çeken erkek resmini içerir | Image özelliğine ‘selfie-male’ yazılır. |
| Image | Selfie çeken bayan resmini içerir | Image özelliğine selfie yazılır. |
| Button | Kamera sayfasını açan düğme | OnSelect olayına Navigate(Camera) yazılır. |
Sağ bölümde yer alacak kontroller:
| Kontrol Adı | Yapacağı işlem | Kod? |
| Label | “Analizlerim” yazılı metni içerir. | Text özelliğine soldaki metin içeriği yazılır. |
| Label | “Cinsiyetim” yazılı metini içerir. | Text özelliğine soldaki metin içeriği yazılır. |
| Label | “Tahmini Yaşım” yazılı metini içerir. | Text özelliğine soldaki metin içeriği yazılır. |
| Label | “Mutluluk Durumum” yazılı metini içerir. | Text özelliğine soldaki metin içeriği yazılır. |
| Label | Power Automate iş akışından gelen yaş bilgisini içerir. | Text özelliğine “AllUserDataCollection.age” yazılır. |
| Image | Power Automate iş akışından gelen cinsiyet bilgisine göre Erkek-Kadın imajını gösterir. | Image özelliğine “If(AllUserDataCollection.gender=”male”,’male-gender’,AllUserDataCollection.gender=”female”,’female-gender’)” yazılır. |
| Gallery | 1 imaj ve 2 label’dan oluşur. İmajda gülücük ikonları, ve label kontrollerinde ise İkon adı ile yüzdelik oranını içerir. | Gallery kontrolünün Items özelliğine “Filter(Sort(EmotionsList,Value,Descending),Value<>0)” yazılır. Gallery içerisindeki imaj seçilerek Image özelliği ThisItem.Image olarak yazılır. |
Gizlenmiş kontrol:
Timer kontrolü. Saat bilgisini 100 ms sürede yenileyerek ekrana basar.
Duration özelliği 100 olarak güncellenir.
OnTimerStart olayına da aşağıdaki kod yazılır.
Set(timeTop,Text(Now(),"[$-en-US]hh:mm:ss"))
Bu kodu da yazdıktan sonra anasayfa fonksiyonelliğini de tamamlamış olmaktayız.
Buraya kadar tüm yazılanları uyguladığınız sizi tebrik etmeden geçemeyeceğim 👏
TEST İŞLEMİ
Şimdi geldik test etmeye 😀
Power Apps uygulamasını File->Save diyerek kaydedin ve ardından Publish düğmesine tıklayınız. Bu uygulamanın son hâlini güncelleyecektir ve yükleyecektir.
Ardından, https://make.powerapps.com adresine erişip ilgili uygulamanıza tıklayınız.
Test işleminde uygulanacak adımları aşağıda belirtmek istiyorum:
| 1- Anasayfada Kamerayı Aç butonuna tıklanır. |  |
| 2- Kamera sayfasında iken kamera düğmesine basılır. |  |
| 3- Verilerin ekrana gelip gelmediği kontrol edilir. |  |
| 4- Power Automate sistemine erişilip iş akışının başarılı bir şekilde çalışıp çalışmadığı kontrol edilir. |  |
| 5- SharePoint Online’da bulunan belge kitaplığına erişilip selfie imajlarının yüklenip yüklenmediği ve özel kolonların doldurulup doldurulmadığı kontrol edilir. |  |
Tüm testler başarılı bir şekilde yapıldıysa Power Apps + Power Automate + SharePoint Online + Azure Cognitive Services Face API kullanarak geliştirdiğimiz bu basit uygulamamız başarılı bir şekilde uygulanmış oldu 🙂
Hızlı başlangıç için
Hem Power Apps uygulamasını hem de Power Automate iş akışına dair dosyaları GitHub hesabımda (https://github.com/iberpoint/MutlulukAnalizi) paylaştım.
Dileyen olursa indirip deneyebilir.
Eğer kurumunuzda benzer bir uygulama geliştirme düşünceniz olursa benimle LinkedIn hesabımdan iletişime geçebilirsiniz.
Okuduğunuz için çok teşekkür ederim 😊
Bu konuyla ilgili sorularınızı alt kısımda bulunan yorumlar alanını kullanarak sorabilirsiniz.
Referanslar:
www.mshowto.org
TAGs:Cognitive (Bilişsel) Servisler, Power Automate, PowerApps
