Image Processing Using Microsoft Azure Computer Vision API in SAP UI5

Image Processing Using Microsoft Azure Computer Vision API in SAP UI5: Machine Learning is not new to us now. It helps the systemcode by providing an ability to make decisions based on prior experience and learnings.

In this blog, I will be sharing the steps to use the Microsoft Azure Computer Vision API within SAP UI5.

To go ahead with it we need few pre-requisites:

1. SAP Web IDE account
2. Microsoft Azure account (https://azure.microsoft.com/en-in/free/)
3. Understanding of SAP UI5/Javascript/Jquery

We will start with creating our UI5 application.

SAP UI5 application project structure looks like above.

Below is the code of each file

• index.html

• App.view.xml

• App.controller.js

sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/m/MessageToast", "jquery.sap.global" ], function(Controller, MessageToast) { "use strict"; return Controller.extend("sapml.microsoftml.controller.App", { onInit: function() { // set mock model MessageToast.show("Welcome Guest"); }, onClick: function() { // set mock model var url = this.getView().byId("imgInput").getValue(); MessageToast.show("Searching " + url); var view = this.getView(); view.byId("responseTextArea").setText(""); view.byId("output").setText(""); view.byId("celebrity").setText(""); view.byId("landmark").setText(""); view.byId("dispImage").setSrc(""); // Replace the subscriptionKey string value with your valid subscription key. var subscriptionKey = ; // Replace or verify the region. // // You must use the same region in your REST API call as you used to obtain your subscription keys. // For example, if you obtained your subscription keys from the westus region, replace // "westcentralus" in the URI below with "westus". // // NOTE: Free trial subscription keys are generated in the westcentralus region, so if you are using // a free trial subscription key, you should not need to change this region. var uriBase = "https://westcentralus.api.cognitive.microsoft.com/vision/v1.0/analyze"; // Request parameters. var params = { "visualFeatures": "Categories,Description,Color", "details": "", "language": "en" }; // Display the image. var sourceImageUrl = url; // Perform the REST API call. $.ajax({ url: uriBase + "?" + $.param(params), // Request headers. beforeSend: function(xhrObj) { xhrObj.setRequestHeader("Content-Type", "application/json"); xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", subscriptionKey); }, type: "POST", // Request body. data: '{"url": ' + '"' + sourceImageUrl + '"}' }) .done(function(data) { // Show formatted JSON on webpage. var jsonModel = JSON.stringify(data, null, 2); var description = JSON.parse(jsonModel); view.byId("output").setText(description.description.captions[0].text); view.byId("dispImage").setSrc(view.byId("imgInput").getValue()); if (JSON.stringify(description).indexOf("celebrities") > -1) { view.byId("celebrity").setText("Celebrity: " + description.categories[0].detail.celebrities[0].name); } if (JSON.stringify(description).indexOf("landmarks") > -1) { view.byId("landmark").setText("LandMark: " + description.categories[0].detail.landmarks[0].name); } }) .fail(function(jqXHR, textStatus, errorThrown) { // Display error message. var errorString = (errorThrown === "") ? "Error. " : errorThrown + " (" + jqXHR.status + "): "; errorString += (jqXHR.responseText === "") ? "" : jQuery.parseJSON(jqXHR.responseText).message; alert(errorString); }); } }); });

Make sure you change the highlighted text in App.controller.js file with the API subscription key provided to you after creating an account with Microsoft Azure:

That’s it…! Now our SAP UI5 Image processing application is ready. Let us see how it works.

The initial page of the application looks like below:

You need to provide the URL of the image available over the internet in the Input Box and click on the button available below.

Lets us check for the Tajmahal image and see what the application returns in the output

The highlighted text is the output for the URL of image entered in the Input box. As we can see our application is correctly predicting the contents of the image. Looks cool right?

Let’s check with something else.

And here it is… Our application correctly identifies the celebrity figure also.

Here is few more screenshot of output with different images.

So we can conclude that it’s easy and pretty cool to start with image processing in SAP UI5. To learn more about this and other different ML services you need to make your hands dirty with coding. You can refer the below link to the API Sheet for this service.

https://westus.dev.cognitive.microsoft.com/docs/services/56f91f2d778daf23d8ec6739/operations/56f91f2e778daf14a499e1fa

Happy Learning….!