LOgIC AppS eN FuNCTIONS André Obelink …...MICROSOFT Cognitive Services • Language Met deze set...

Serverless integration: LOgIC AppS eN FuNCTIONS

Steef-Jan Wiggers

6

MICROSOFT

Cognitive Services

André Obelink

Op het eerste gezicht lijkt dit allemaal best eenvoudig te realiseren. Je koppelt immers je agenda aan Cortana of een of andere culinaire website biedt zijn API aan. Maar wanneer je een stap verder kijkt en je gaat afvragen hoe Alexa of Siri nu precies weet wat jij vraagt dan wordt het wel ingewikkeld. Je hebt verschillende stemmen, verschil-lende intonaties, verschillende emoties en ook nog eens ontelbare manieren waarop je een vraag kunt formuleren. Bij de verwerking en interpretatie van deze informatie komt duidelijk kunstmatige intel-ligentie in beeld. Het is bijzonder interessant te weten hoe dit onder de motorkap allemaal werkt, maar het is minstens zo interessant en nuttig te weten hoe je deze technologie in je eigen software zou kun-nen toepassen.

In dit artikel stel ik jullie voor aan een aantal cognitieve diensten die Microsoft aanbiedt aan softwareontwikkelaars. De Microsoft Cogni-tive Services zijn een set van API’s, SDK’s en cloud services waar-mee je jouw applicaties een stuk intelligenter kunt maken. Je kunt hierbij denken aan gezichts- of voorwerpherkenning in foto’s of zelfs het herkennen van gezichten in foto’s en bepalen welke emotie dit gezicht uitstraalt. Daarnaast zijn er services ten behoeve van taal en spraakherkenning. Op de achtergrond speelt, zoals eerder gezegd, kunstmatige intelligentie en machine learning een grote rol. Het feit dat veel services slimmer worden naarmate ze meer en meer gebruikt worden, geven deze diensten nog meer meerwaarde dan ze initieel al hebben.

Microsoft maakt met Cognitive Services kunstmatige intelligentie dus beschikbaar voor iedereen. Volgens hen is dit nu mogelijk doordat drie elementen nu samenkomen: de computerkracht die Cloud com-puting biedt, de ontwikkeling van algoritmes en machine learning en als laatste de beschikbaarheid van grote hoeveelheden data. Hier kan men zich ook wel wat bij voorstellen.De cognitive services zijn beschikbaar als een API die je vanuit je applicatie kunt aanroepen. Per API die je wilt gebruiken moet je zoge-naamde ‘secret keys’ hebben. De meeste API’s kennen een probeer-versie die je toestaan om een bepaald aantal calls per maand te doen. Het is daarom verstandig om jouw API keys voor jezelf te houden. Daarnaast zijn sommige API’s is de probeerversie ook wat beperkt qua mogelijkheden. Om serieus met deze services aan de slag te gaan, moet je over een Microsoft-account en een Azure abonnement beschikken. Voor alleen wat testen hoef je niet een Azure abonnement te hebben.

Zodra de betaalde versies van de API’s beschikbaar komen, wordt dit gezien als een extra dienst in je Azure portal. Deze API-abonnementen hangen dus aan jouw Azure subscription. Je kunt hier instellen dat je gebruik wilt maken van de probeer- of betaalde versie, je kunt het aantal calls zien en vanuit hier heb je natuurlijk ook toegang tot je secret keys. In bovenstaande schermafbeelding zie je een voorbeeld van een Computer Vision API die ik, naast een Face API, heb aange-maakt onder de naam MarYorComputerVisionApi.

API-deelgebIedenDe beschikbare API’s zijn grofweg onder te verdelen in een vijftal deel-gebieden: Vision, Speech, Language, Knowledge en Search.• VisionGeavanceerde beeldverwerkingsalgoritmen helpen je door informatie te retourneren over gezichten, afbeeldingen en emoties. Voorbeelden zijn: Computer Vision API, Emotion API, Video API of de reeds ee-rder genoemde Face API. De Face API biedt als functionaliteit dat het gezichten in foto’s kan herkennen en vaststellen of twee gezichten tot dezelfde persoon behoren. De Computer Vision API werken we later in dit artikel uit als codevoorbeeld.• SpeechMet de Speech API’s kun je gesproken taal in je software verwerken. Voorbeelden zijn: Custom Speech Service, Translator Speech API, Bing Speech API of Speaker Recognition API. Met de laatste API kun je bijvoorbeeld automatisch een gebruiker herkennen op basis van zijn of haar stem.

Kunstmatige intelligentie is absoluut niet iets van de afgelopen jaren, maar staat momenteel wel sterk in de belangstelling. Het is niet voor niets dat grote bedrijven zoals Google, Amazon, Apple en Microsoft nu veel tijd, geld en energie steken in allerlei ontwikkelingen rondom Artificial Intel-ligence (AI). Denk alleen maar eens aan alle spraakassistenten die onze huiskamer betreden. Google Assistent, Siri, Alexa en Cortana maken al deel uit van ontzettend veel huishoudens. Het ophoesten van een recept van een appeltaart, het voorlezen van het weerbericht, het aandoen van verlichting, je waarschuwen dat je naar de tandarts moet… allerlei handige handelingen die je met je stem kan besturen.

CLOUD

WEB

SQL

DELPHI

BIG DATA

ALM

GENERAL

magazine voor software development 7

SOFTWARE DEVELOPMENT NETWORK






SOFTWARE DEVELOPMENT NETWORK BEELDMERK

FULL-COLOUR

SOFTWARE DEVELOPMENT NETWORK DIVISIES

CONFERENCE

MAGAZINE

EVENTS

.NET

.NL

DELPHI

5 0 c y a a n1 0 0 g e e l

5 0 z w a r t1 5 c y a a n

SOFTWARE DEVELOPMENT NETWORK SOFTWARE DEVELOPMENT NETWORK


F I G U R E 1








FULL-COLOUR


CONFERENCE

MAGAZINE

EVENTS

.NET

.NL

DELPHI

5 0 c y a a n1 0 0 g e e l

5 0 z w a r t1 5 c y a a n



8

| | | | | | | | | | | | | | | | | | | | | | |Serverless integration:

LOgIC AppS eN FuNCTIONS

nn

nn

nn

nn

nn

nn

nn








FULL-COLOUR


CONFERENCE

MAGAZINE

EVENTS

.NET

.NL

DELPHI

5 0 c y a a n1 0 0 g e e l

5 0 z w a r t1 5 c y a a n



8

| | | | | | | | | | | | | | | | | | | | | | |MICROSOFT

Cognitive Services

nn

nn

nn

nn

nn

nn

nn

• LanguageMet deze set van API’s kun je natuurlijke taal verwerken, bepalen welke onderwerpen worden besprokenen en eventueel het senti-ment van de tekst. Hiermee kun je dus ook begrijpen wat gebruikers bijvoorbeeld met een vraag bedoelen. Voorbeelden zijn Language Understanding Intelligent Service (LUIS), Bing Spell Check API, Text Analytics API of de Translator Tekst API. Je zou LUIS kunnen gebruiken om een language model te maken die begrijpt of je de lamp boven de eettafel aan/of uit wilt doen of jouw bureaulamp of de lamp in de keuken.• KnowledgeVerwerk complexe informatie en data om zodoende intelligente aan-bevelingen te doen of om bijvoorbeeld semantisch te kunnen zoeken. Enkele API’s die tot deze groep behoren zijn: Recommendations API, Knowledge Exploration Service, Entity Linking Intelligence Service API, Academic Knowledge API, QnA Maker API en de Custom Deci-sion Service.• SearchGebruik Microsofts zoekmachine Bing binnen je eigen applicaties. Voorbeelden zijn: Bing Autosuggest API, Bing Image Search API, Bing News Search API, Bing Video Search API, Bing Web Search API, Bing Custom Search en Bing Entity Search API.

Nu je overzicht hebt gekregen van een groot aantal API’s die Micro-soft nu beschikbaar heeft gemaakt, wordt het de hoogste tijd om eens te kijken hoe je ze binnen je software aanroept. De verschillende Cognitive Services zijn erg divers, dus ook de toepassing ervan. Toch komen ze qua gebruik en implementatie aardig overeen. We gaan nu een voorbeeld uitwerken in C# die gebruik maakt van de Computer Vision API, maar dit had eigenlijk dus elke andere API kunnen zijn.

de ComPuter VIsIon API AAnroePenZorg dat je een Computer Vision API hebt aangemaakt en in het bezit bent van een secret key. Een logische stap daarna is om de documentatie van de API te bekijken. Hier worden alle operaties en mogelijke parameters uitgelegd. Ook heb je vanuit hier toegang tot de API testing console, waarmee je de API eenvoudig online al kunt aanroepen. Ik heb een link naar deze pagina opgenomen aan het einde van dit artikel. De Computer Vision API bevat (momenteel) de volgende operaties:• AnalyzeImage-POST• DescribeImage-POST• GetHandwrittenTextOperationResult-GET• GetThumbnail-POST• ListDomainSpecificModels-GET• OCR-POST• RecognizeDomainSpecificContent-POST• RecognizeHandwrittenTekst-POST• TagImage-POST

Elke operatie kent zijn eigen eindpunt met eventueel een aantal parameters. De opbouw van zo’n eindunt, de zogenaamde Request URI, gaat eigenlijk altijd via een standaard stramien:

https://[location].api.cognitive.microsoft.com/[api-name]/[version]/[operation]?[parameters]

In dit template kun je de volgende blokken onderscheiden:• location: de locatie waar je API wilt aanroepen, bijvoorbeeld ‘westus’ of ‘westeurope’• api-name: de naam van de API. In het geval van de Computer Vision Api is dat ‘vision’• version: de versie van de API. Nu is dat doorgaans altijd ‘v1.0’ • operation: de operatie die je wilt gebruiken, bijvoorbeeld ‘analyze’ of ‘describe’• parameters: afhankelijk van de operatie kan men ook een of meerdere parameters meegeven. In het geval van de operatie ‘analyze’ kun je hierbij denken aan dat je een lijst met categorieën en/of de hoofdkleur van een afbeelding terug wilt krijgen.

In ons voorbeeld waarbij we de Computer Vision API aan willen roepen kan het eindpunt of Uri er als volgt uit zien:

https://westeurope.api.cognitive.microsoft.com/vision/v1.0/analyze?visualFeatures=Categories

We maken een simpele applicatie waarmee we een afbeelding op de lokale PC kunnen selecteren, deze vervolgens aanbieden aan de API en het resultaat tonen. De userinterface stel niets voor, een knop (selectImageFilePathButton) om een bestand te selecteren en twee tekstvakken. In de eerste (imageFilePathTextBox) wordt de geselect-eerde bestandsnaam getoond en in het tweede (jsonResultTextBox) het resultaat na de aanroep van de API.

Laten we beginnen met code die wel noodzakelijk is, maar niet direct gerelateerd is aan het aanroepen van de API.

private async void selectImageFilePathButton_Click(object

sender, EventArgs e)

{

var imageFilePath = GetImageFilePath();

imageFilePathTextBox.Text = imageFilePath;

F I G U R E 2

magazine voor software development 9

var json = await GetAnalyzeImageResult(imageFilePath);

jsonResultTextBox.Text = FormatJson(json);

}

private static string GetImageFilePath()

{

var openFileDialog = new OpenFileDialog()

{

Filter = “jpg files (*.jpg)|*.jpg|All files (*.*)|*.*”

};

if (openFileDialog.ShowDialog() == DialogResult.OK)

{

return openFileDialog.FileName;

}

return string.Empty;

}

In het selectImageFilePathButton_Click() event wordt allereerst de bestandsnaam bepaald door het tonen van een OpenFileDialog. Wanneer de gebruiker een bestand heeft geselecteerd wordt de bestandsnaam in het tekstvak getoond. Niets bijzonders; het wordt pas echt interessant op de regel waar we de GetAnalyzeImage Result() methode gaan aanroepen. Laten we deze methode eens nader bekijken.

private static async Task<string>

GetAnalyzeImageResult(string imageFilePath)

{

var byteData = GetImageAsByteArray(imageFilePath);

var requestUri = GetRequestUri();

using (var client = new HttpClient())

{

client.DefaultRequestHeaders.Add(“Ocp-Apim-Subscription-

Key”, SubscriptionKey);

using (var content = new ByteArrayContent(byteData))

{

content.Headers.ContentType = new MediaTypeHeaderValue(“ap

plication/octet-stream”);

var response = await client.PostAsync(requestUri, con-

tent);

return await response.Content.ReadAsStringAsync();

}

}

}

Deze methode krijgt het pad naar de afbeelding die we willen analyseren mee. Deze afbeelding wordt middels de methode GetImageAsByteArray() ingelezen en omgezet naar een byte-array. Vervolgens wordt met GetRequestUri() de url opgebouwd.

CLOUD

WEB

SQL

DELPHI

BIG DATA

ALM

GENERAL








FULL-COLOUR


CONFERENCE

MAGAZINE

EVENTS

.NET

.NL

DELPHI

5 0 c y a a n1 0 0 g e e l

5 0 z w a r t1 5 c y a a n



Dit is dus het eindpunt inclusief de parameters. Hier zullen we later nog in detail terugkomen. Met behulp van een HttpClient gaan we de API daadwerkelijk aanroepen. Zoals je kunt zien voegen we eerst de SubscriptionKey toe aan de headers van de client. Deze key is als een constante toegevoegd binnen het formulier. De tekst ‘jouw secret key’ moet je vervangen met de sleutel die je hebt gekregen.

private const string SubscriptionKey = “jouw secret key”;

We gaan nu de content opbouwen. De ByteArrayContent wordt aangemaakt op basis van de byte-array die we eerder hebben bepaald door het inlezen van de gekozen afbeelding. We moeten als ContentType aangeven dat het hier een ‘application/octet-stream’ betreft.Nu alle variabelen zijn bepaald en ingesteld kunnen we het bericht posten naar de API. Het bericht dat we terugkrijgen is in JSON-formaat en wordt ingelezen door de ReadAsStringAsync() methode. We hebben nu het resultaat dat we kunnen tonen in jsonResultTextBox.

Zoals eerder gezegd wordt het eindpunt bepaald in de methode GetRequestUri().

private static string GetRequestUri()

{

string uriBase = “https://westeurope.api.cognitive.

microsoft.com/vision/v1.0/analyze”;

string requestParameters = “visualFeatures=Categories,Tag

s,Description”;

return uriBase + “?” + requestParameters;

}

Met behulp van de parameter visualFeatures geven we aan welke informatie we geretourneerd willen hebben. In dit geval dus Categories, Tags en Description. Hiermee kun je zelf experimenteren. In de Categories sectie wordt ook aangegeven hoe zeker de API is van het resultaat. De Description bestaat uit een serie van sleutelwoorden die de foto beschrijven en bevat ook één zin die de foto beschrijft.Voor de volledigheid toon ik ook nog de methode GetImageAsByteArray(). De oplettende lezer zal opmerken dat, voordat het resultaat in het tekstvak wordt getoond, deze nog wordt geformatteerd door FormatJson(). In deze methode wordt de JSON netjes ingesprongen en per regel onder elkaar gezet. Het voer nu te ver om deze code te tonen, maar in het codevoorbeeld dat je van GitHub kunt downloaden kun je deze functie alsnog bekijken.

private static byte[] GetImageAsByteArray(string

imageFilePath)

{

using (var fileStream = new FileStream(imageFilePath,

FileMode.Open, FileAccess.Read))

{

using (var binaryReader = new BinaryReader(fileStream))

{

return binaryReader.ReadBytes((int)fileStream.Length);

}

}

}








FULL-COLOUR


CONFERENCE

MAGAZINE

EVENTS

.NET

.NL

DELPHI

5 0 c y a a n1 0 0 g e e l

5 0 z w a r t1 5 c y a a n



10

“tags”: [

{ “name”: “water”, “confidence”: 0.99997103214263916 },

{ “name”: “outdoor”, “confidence”: 0.99797040224075317 },

{ “name”: “sky”, “confidence”: 0.99212568998336792 },

{ “name”: “shore”, “confidence”: 0.764807403087616 },

{ “name”: “nature”, “confidence”: 0.75505912303924561 },

{ “name”: “ocean”, “confidence”: 0.65932834148406982 }

sAmenVAttendIn dit artikel heb ik je laten kennis maken met Microsoft Cognitive Services en één API in het bijzonder: de Computer Vision API. De functionaliteit die deze Cognitive Services aanbieden zijn zeer geschikt om je applicaties slimmer te maken en de implementatie van de ben-odigde logica vergt weinig code. De mogelijkheden en toepassingen zijn eindeloos. Ik nodig je van harte uit om hiermee aan de slag te gaan!

gerelAteerde lInks• Codevoorbeeldhttps://github.com/obelink/MicrosoftCognitiveServicesComputerVi-sionDemo

• Overizchtallecognitiveserviceshttps://azure.microsoft.com/nl-nl/services/cognitive-services

• ComputerVisionAPIdocumentatiehttps://azure.microsoft.com/nl-nl/services/cognitive-services/com-puter-vision

| | | | | | | | | | | | | | | | | | | | | | |MICROSOFT

Cognitive Services

nn

nn

nn

nn

nn

nn

nn

Met relatief weinig code kun je de API vanuit C# of Visual Basic .NET aanroepen en het resultaat bekijken. Maar welk resultaat krijg je nu feitelijk terug? Laten we de proef op de som nemen.

de ComPuter VIsIon API In ACtIeWanneer we onze applicatie gaan testen, kunnen we dus vaststellen hoe slim de Computer Vision API Analyze methode nu eigenlijk is. Ik heb een groot aantal foto’s getest en ik ben echt onder de indruk van de kwaliteit van de geretourneerde data. Ik schrijf dit artikel vanuit mijn vakantieverblijf in Florida en heb gisteren onderstaande foto gemaakt:

We hebben aangegeven dat we een drietal informatieblokken gere-tourneerd willen hebben: Categories, Tags en Description. We krijgen echter altijd ook een sectie Captions terug. Laten we met de laatste beginnen:

“captions”: [

{

“text”: “a couple of people that are standing in front of

a body of water”,

“confidence”: 0.95049971721239168

}

De API is 95% zeker over het resultaat en we moeten hem nageven, de omschrijving klopt ook erg goed. Ook de sleutelwoorden zijn bijna allemaal relevant, hoewel er ook een aantal via associatie zijn toege-voegd en niet direct zijn herkend.

“description”: {

“tags”: [

“water”, “outdoor”, “ocean”, “man”, “beach”, “body”,

“standing”, “front”, “bird”, “pier”, “people”, “cou-

ple”,

“board”, “boat”, “large”, “umbrella”, “flying”, “sur-

fing”,

“rocky”, “dock”, “walking”, “group”, “white”, “riding”

],

En als laatste wil ik nog inzoomen op de Tags-sectie. Deze Tags zijn eigenlijk allemaal relevant.

AndrÉ obelInk

André Obelink is senior software engineer en eigenaar van MarYor | software & consultancy B.V. Hij is al jaren actief in de nationale- en internationale developer community als spreker en auteur van artikelen en boeken. Daarnaast is hij één van de mensen achter VBcentral.nl. Voor zijn inzet en bijdragen aan de developers community is hij vanaf 2006 elf jaar op rij onderscheiden met een Microsoft MVP award. Zijn blog vind je op: http://www.obelink.com

CLOUD

WEB

SQL

DELPHI

BIG DATA

ALM

GENERAL

F I G U R E 3

LOgIC AppS eN FuNCTIONS André Obelink …...MICROSOFT Cognitive Services • Language Met deze set...

Documents

Transcript of LOgIC AppS eN FuNCTIONS André Obelink …...MICROSOFT Cognitive Services • Language Met deze set...