CrowlKit - Google Vision

Libraries toevoegen

De volgende libaries moeten aanwezig zijn in de head van je app/pagina:

<script src="https://cdn.publihub.media/lib/app.js"></script>
<script src="https://cdn.publihub.media/lib/crowl.vision.js"></script>
<link rel="stylesheet" href="https://cdn.publihub.media/css/app.css">

Image Recognition activeren

Voeg het onderstaande element toe aan je app of pagina:

<app-eye key="jouw-api-key" id="oog" src="https://cdn.publihub.media/demos/app/couple.jpg" showimage></app-eye>

De volgende attributen zijn noodzakelijk:

  • key: jouw API-toegangssleutel.
  • src: een absolute url (een adres) van een internetafbeelding
  • id: een uniek id voor het element. Zonder een uniek id kan je de image recognition-gegevens niet opvragen!

Het volgende attribuut is optioneel:

  • showimage: Voeg je dit attribuut toe, dan wordt de afbeelding ook getoond in de pagina. Laat je het weg, dan kan je wel de gegevens opvragen, maar dan zie je de afbeelding niet. 

Ontvangen gegevens opvragen

In de app-ready-functie kan je de herkende gegevens opvragen. Je hebt toegang tot de volgende gegevens:

  • emotions: als er gezichten in de foto aanwezig zijn, kan je de herkende gevoelens opvragen
  • colors: een lijst van de meest voorkomende kleuren in hex en rgb.
  • fetcherror: als er iets is foutgelopen, dan krijg je te zien wat er fout ging.
  • crophints: waar kan je de afbeelding het best bijsnijden.
  • tags: een aantal tags of herkende labels
  • perspective: het perspectief van de afbeelding.
  • facepositions: de positie van alle herkende gezichten in de afbeelding
  • text: als de foto tekst bevat, kan je zowel de taal als de volledige tekst opvragen
   app.ready(function(){
        id("oog").after("emotions").do(function(data){
            terminal(data.detail);
        });

        id("oog").after("colors").do(function(data){
            terminal(data.detail);
        });

        id("oog").after("fetcherror").do(function(data){
            terminal(data.detail);
        });

        id("oog").after("crophints").do(function(data){
            terminal(data.detail);
        });

        id("oog").after("tags").do(function(data){
            terminal(data.detail);
        });

        id("oog").after("perspective").do(function(data){
            terminal(data.detail);
        });

        id("oog").after("facepositions").do(function(data){
            terminal(data.detail);
        });

        id("oog").after("text").do(function(data){
            terminal(data.detail.language);
            terminal(data.detail.text);
        });
    });

Helpfuncties

Naast het opvragen van gegevens kan je nog een aantal helpfuncties activeren:

  • colorlist: een lijst van de meest voorkomende kleuren in een reeks kleurselectoren weergeven
  • cropimage: de afbeelding bijsnijden en in een ander element weergeven. 
  • getfaces: elk gezicht uitknippen en in een ander element weergeven.
  • drawFaceBoundingBoxes: alle herkende gezichten omkaderen in de originele afbeelding. 
  • emotions: een lijst van alle herkende dominante emoties in gezichten
  • emotionstatistics: de meest voorkomende emoties

colorlist()

Voeg een element toe aan je pagina en geef het een bepaald uniek id:

<app-part id="colorlist"></app-part>

Pas nu de app-ready-code aan:

id("oog").after("colors").do(function(data){
    colorlist(data.detail, "hex", id("colorlist"));
});

Je geeft de functie colorlist() drie parameters mee:

  1. de ontvangen gegevens, in dit geval data.detail
  2. de hex- of rgb-waarden uit de ontvangen gegevens.
  3. het element waarin je de kleuren wil weergeven. 

cropimage()

Voeg een element toe aan de pagina met een bepaald uniek id:

<app-part id="cropresult"></app-part>

Pas nu de app-ready-functie aan:

id("oog").after("crophints").do(function(data){
    cropimage(data.detail, id("oog").feature("src"), id("cropresult"));
});

Je geeft de functie croptimage() drie parameters mee:

  1. de ontvangen gegevens, in dit geval data.detail
  2. de bronafbeelding, die vraag je op door de eigenschap "src" van het element met id "oog" op te vragen: id("oog").feature("src")
  3. het element waarin je de bijgesneden foto wil tonen, in dit geval id("cropresult")

getfaces()

Voeg een element toe met een uniek id:

<app-part id="imglist"></app-part>

Pas nu de app-ready-functie aan:

id("oog").after("facepositions").do(function(data){
    getfaces(data.detail, id("oog").feature("src"), id("imglist"));
});

Je kan de functie getfaces() 3 verplichte en 2 optionele parameters meegeven:

  1. de ontvangen gegevens, in dit geval data.detail
  2. de bronafbeelding, die vraag je op door de eigenschap "src" van het element met id "oog" op te vragen: id("oog").feature("src")
  3. het element waarin je de bijgesneden foto wil tonen, in dit geval id("imglist")
  4. de breedte (optioneel)
  5. de hoogte (optioneel)

drawFaceBoundingBoxes()

Pas de app-ready-functie aan:

id("oog").after("facepositions").do(function(data){
   drawFaceBoundingBoxes(data.detail, id("oog"));
});

De functie drawFaceBoundingBoxes() heeft 2 verplichte parameters:

  1. de ontvangen gegevens, in dit geval data.detail
  2. het element waarvoor we de image recognition hebben "aangevraagd", nl. id("oog")

Gevoelens in gezichten herkennen: ruwe data, emotions(), emotionstatistics()

Voor elk herkend gezicht kan je de "herkende" gevoelens opvragen:

Deze dame is duidelijk heel blij.

Hoe vraag je die gegevens op en wat kan je er mee doen? Je kan de ontvangen gegevens bijvoorbeeld tonen in de terminal:

id("oog").after("emotions").do(function(data){
    terminal(data.detail);
});

Als je de gegevens van de eerste persoon wil opvragen, schrijf je data.detail[0]. Het cijfer 0 kan je ophogen. De tweede persoon zal dus data.detail[1] zijn. 

id("oog").after("emotions").do(function(data){
    terminal(data.detail[0]);
});

Je kan ook vragen om een overzicht te krijgen van de meest dominante gevoelens per herkend "gevoel"/gezicht, door de data door te geven aan de helpfunctie emotions(data.detail): 

id("oog").after("emotions").do(function(data){
    terminal(emotions(data.detail));
});

Je krijgt nu een overzicht in deze aard: 

{"person2":"joy"}

Met de helpfunctie emotionstatistics(data.detail)krijg je een lijst van hoe vaak elk gevoel voorkomt in een afbeelding:

id("oog").after("emotions").do(function(data){
    terminal(emotionstatistics(data.detail));
});

Het resultaat ziet er dan bijvoorbeeld als volgt uit:

{"joy":1}

Je kan nu met de resultaten iets gaan doen:

id("oog").after("emotions").do(function(data){
    var result = emotionstatistics(data.detail);
    if ("joy" in result) {
        appalert("Er is " + result.joy + " aantal gelukkige personen in deze afbeelding");
    }
});
Volgende pagina