Then you will be able to search for the SAP Leonardo Machine Learning - Functional Services, then click on the package found.
Click on Artifacts, then click on the Image Classification API.
Now click on the Overview tab.
Note: the term inference refers to the application phase (scoring) an existing model (as opposed to the training or inception phase) and sync for synchronous.
As displayed on the screen, the sandbox URL for the Image Classification API where we need to append the API resource:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.table,sap.ui.unified"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("demotable2");
var app = new sap.m.App({initialPage:"idDemoTable2"});
var page = sap.ui.view({id:"idDemoTable2", viewName:"demotable2.DemoTable2", type:sap.ui.core.mvc.ViewType.JS});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
sap.ui.jsview("demotable2.DemoTable2", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf demotable2.DemoTable2
*/
getControllerName : function() {
return "demotable2.DemoTable2";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf demotable2.DemoTable2
*/
createContent : function(oController) {
var oTable = new sap.ui.table.Table("tableId",{
title: "Product Details",
visibleRowCount:5,
editable:false
});
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text:"Product ID"}),
visible: true,
template: new sap.ui.commons.TextView({text:"{products>ProductId}"})
}) );
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text:"Product Name"}),
visible: true,
template: new sap.ui.commons.TextView({text:"{products>ProductName}"})
}) );
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text:"Product Count"}),
visible: true,
template: new sap.ui.commons.TextView({text:"{products>ProductCount}"})
}) );
oTable.bindRows("products>/d/results");
//Create a form to Update the Product
var oLayout = new sap.ui.layout.form.SimpleForm("formId",{
title: "Product Maintainance",
content: [
new sap.ui.commons.Label({text: "Product ID"}),
new sap.ui.commons.TextField({
id: 'ProductId',
width: '200px',
value:'{singleproduct>/d/ProductId}',
editable: false
}),
new sap.ui.commons.Label({text: "Product Name"}),
new sap.ui.commons.TextField({
id: 'ProductName',
width: '200px',
value:'{singleproduct>/d/ProductName}',
editable: false
}),
new sap.ui.commons.Label({text: "Product Count"}),
new sap.ui.commons.TextField({
id: 'ProductCount',
width: '200px',
value:'{singleproduct>/d/ProductCount}'
}),
new sap.ui.commons.Label({text: ""}),
new sap.ui.commons.Button({
text: "Save",
width: '100px',
press: function() {
oController.update()
}
})
]
});
//Create a file uploader form
var oUploadLayout = new sap.ui.layout.form.SimpleForm("uploadformId",{
//title: "Product Maintainance",
content: [
new sap.ui.unified.FileUploader("fileUploader",{
width: "400px",
tooltip: "Upload your image",
placeholder: "Upload a product image to search...",
fileType: ["jpg", "png"],
maximumFileSize: 2,
uploadOnChange: false,
multiple: true,
buttonText: "Browse",
additionalData: "abc=123&test=456",
}),
new sap.ui.commons.Label({text: ""}),
new sap.ui.commons.Button({
text: "Search",
width: '150px',
height: '50px',
press: function() {
oController.onUpload()
}
})
]
});
var ele = [oTable,oLayout,oUploadLayout];
return ele;
}
});
sap.ui.controller("demotable2.DemoTable2", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf demotable2.DemoTable2
*/
onInit: function() {
//use your ODATA URL of the app here
var sUrl = "http://x.y.z.w:port/sap/opu/odata/sap/ZML_SRV/ProductSet";
var oModel = sap.ui.model.json.JSONModel(sUrl);
console.log(oModel);
sap.ui.getCore().setModel(oModel,'products');
},
onAfterRendering: function() {
$("#formId").hide();
},
mode: 0,
showform: function(){
this.mode="showform";
$("#formId").slideDown(function() {
})
},
onUpload: function(){
var SingleID="";
var oFileUploader = sap.ui.getCore().byId("fileUploader");
if (!oFileUploader.getValue()) {
sap.m.MessageToast.show("Choose a file first");
}
var that = this;
var f = document.querySelector('input[type="file"]').files[0];
//Create form object and append file to the same
var data = new FormData();
data.append('files', document.getElementById("fileUploader-fu").files[0], document.getElementById(
"fileUploader-fu").files[0].name);
var xhr = new XMLHttpRequest();
xhr.addEventListener("readystatechange", function() {
if (this.readyState === 4) {
var vjson = JSON.parse(this.responseText);
//set the model for the UI5 table to populate product classification results
var oModel1 = new sap.ui.model.json.JSONModel();
oModel1.setData(vjson.predictions[0]);
that.getView().setModel(oModel1);
var label = vjson.predictions[0].results[0].label;
var score = vjson.predictions[0].results[0].score;
}
var ProductImage=vjson.predictions[0].results[0].label;
new sap.ui.commons.MessageBox.confirm("The uploaded product is "+ProductImage+".Do you want to update the product count?",rCallAlertBack, "Confirmation");
function rCallAlertBack(rValue) {
if(rValue) //If User presses ‘Ok’
{
$("#uploadformId").hide();
//mapped the retrieved value with the product ID for demo purpose ,we could write a simple logic to retrive the product ID from the Odata table as well
SingleID=0;
if (ProductImage =='printer'){
SingleID=2;
}
else if(ProductImage =='notebook'){
SingleID=1;
}
else if(ProductImage =='hard disc'){
SingleID=99;
}
else if(ProductImage =='reflex camera'){
SingleID=98;
}
else if(ProductImage =='mouse'){
SingleID=3;
}
else{
SingleID=0;
alert("Product "+ProductImage+" not found in the SAP");
}
//Get the single product details , use the ODATA URL
var sUrl2 = "http://x.y.z:port/sap/opu/odata/sap/ZML_SRV/ProductSet("+SingleID+")";
var oModel2 = new sap.ui.model.json.JSONModel(sUrl2);
console.log(oModel2);
sap.ui.getCore().setModel(oModel2,'singleproduct');
$("#formId").slideDown(function() {
})
return false;
}
else // If the user presses ‘Cancel’
{
sap.ui.commons.MessageBox.alert("You are refussed to edit the product count",'',"Notification");
}
}
});
xhr.open("POST", "https://sandbox.api.sap.com/ml/imageclassifier/inference_sync");
xhr.setRequestHeader("apikey", "enter your api key which you have got from step 2");
xhr.setRequestHeader("accept", "application/json");
xhr.send(data);
},
update: function(){
this.mode = 'update';
var productid = sap.ui.getCore().byId("ProductId").getValue();
var productname = sap.ui.getCore().byId("ProductName").getValue();
var productcount = sap.ui.getCore().byId("ProductCount").getValue();
var sUrl = "http://x.y.z:port/sap/opu/odata/sap/ZML_SRV/";
var oModels = new sap.ui.model.odata.v2.ODataModel(sUrl);
var newData = {
"ProductId" : productid,
"ProductName" : productname,
"ProductCount" : productcount
}
OData.request({
requestUri : "proxy/http/x.y.z:port/sap/opu/odata/sap/ZML_SRV/ProductSet",
method : "GET",
headers : {
"X-Requested-With" : "XMLHttpRequest",
"Content-Type" : "application/atom+xml; charset=utf-8",
"DataServiceVersion" : "2.0",
}
},function(data,request) {
var id = $("#id").val();
OData.request({
requestUri : "proxy/http/x.y.z:port/sap/opu/odata/sap/ZML_SRV/ProductSet("+productid+")",
method : "PUT",
headers : {
"X-Requested-With" : "XMLHttpRequest",
"Content-Type" : "application/atom+xml; charset=utf-8",
"DataServiceVersion" : "2.0",
"Accept": "application/xml"
},
data:newData
},function(data,request) {
alert("Update Success");
location.reload(true);
}, function(err) {
alert("Update Failed");
});
}, function(err) {
var request = err.request;
var response = err.response;
alert("Error in Get — Request " + request + " Response " + response);
});
}
});
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
6 | |
6 | |
5 | |
4 | |
3 | |
3 | |
3 | |
3 | |
3 | |
2 |