Image Processing Using Microsoft Azure Computer Vi...

Technology Blogs by Members

Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!

898

SAP Managed Tags:
Machine Learning,
SAPUI5

Machine Learning is not new to us now. It helps the system\code 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:

SAP Web IDE account

Microsoft Azure account (https://azure.microsoft.com/en-in/free/)

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

<!DOCTYPE html >

<html>

	<head>

		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

		<meta charset="UTF-8">

		<title>Microsoft ML with SAPUI5</title>

		<script

			id="sap-ui-bootstrap"

			src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"

			data-sap-ui-theme="sap_bluecrystal"

			data-sap-ui-libs="sap.m"

			data-sap-ui-compatVersion="edge"

			data-sap-ui-preload="async"

		    data-sap-ui-resourceroots='{"sapml.microsoftml": "./"}'>

		</script>

        

		<script>

			sap.ui.getCore().attachInit(function () {

					sap.ui.xmlview({

				viewName: "sapml.microsoftml.view.App"

			}).placeAt("content");

		    });

		</script>

	</head>

	<body class="sapUiBody" id="content">

	</body>

</html>

App.view.xml

<mvc:View displayBlock="true" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout"

	controllerName="sapml.microsoftml.controller.App">

	<App>

		<pages>

			<Page title="Microsoft Machine Learning\ Computer Vision"

				icon="https://cpgeneralstore.blob.core.windows.net/icons/cognitiveservicescomputervision.png">

				<subHeader height="150px">

					<Toolbar>

						<l:HorizontalLayout class="sapUiSmallMargin">

							<Image class="sapUiSmallMarginEnd" src="https://cpgeneralstore.blob.core.windows.net/icons/cognitiveservicescomputervision.png"

								densityAware="true" width="100px" height="100px" alignItems="Start"></Image>

						</l:HorizontalLayout>

						<FlexBox height="50px" width="90%" alignItems="End" justifyContent="End">

						</FlexBox>

					</Toolbar>

				</subHeader>

				<content>

					<Panel expandable="true" expanded="false" headerText="Computer Vision" width="auto" class="sapUiResponsiveMargin">

						<content>

							<l:VerticalLayout width="100%">

								<Label text='Image' level="H3" class="sapUiSmallMarginEnd" design="Bold"/>

								<Input id="imgInput" type="Text" placeholder="Enter Image URL ..."/>

								<Button text="Magic" icon="sap-icon://activate" width="150px" press="onClick"/>

								<Text id="output" class="sapUiSmallMarginEnd"/>

								<Text id="celebrity" class="sapUiSmallMarginEnd"/>

								<Text id="landmark" class="sapUiSmallMarginEnd"/>

								<Text id="responseTextArea" class="sapUiSmallMarginEnd"/>

								<Image id="dispImage" class="sapUiSmallMarginEnd" width="100%" height="100%" densityAware="true" alignItems="Start"></Image>

							</l:VerticalLayout>

						</content>

					</Panel>

				</content>

			</Page>

		</pages>

	</App>

</mvc:View>

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 this with your subscription key>;



			// 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/56f91f2...

Happy Learning....!