SAP Leonardo Machine Learning CodeJam @ Accenture Liquid Studio (Netherlands)

On Wednesday 10^th of April we had our 3^rd SAP CodeJam at the Accenture Liquid Studio in Utrecht (Netherlands). The topic was focused on SAP Leonardo Machine Learning. In total we had 27 participants working, collaborating and struggling ?. It was also a pleasure to have Abdel again as a host.

Abdel started to explain how easy it actually is to host a CodeJam. Basically you select a topic, choose possible dates and send the request to sapcodejam@sap.com. In just 6 weeks all can be organized! Following 30 minutes we had a deepdive into SAP Leonardo Machine Learning.

The hands-on content was perfectly explained by Abdel in next tutorials:

https://developers.sap.com/group.cp-mlf-rest.html (part 1)
https://developers.sap.com/group.cp-mlf-retrain.html (part 2)

During the first part we setup our account and service instance on Cloud Foundry. We also got familiar with several ML services, e.g. Face Detection & Human Detection using Postman as our REST client.

We expected that the Face Detection service would identify 2 faces…

Sending the request via Postman:

With a tiny bit of HTML the result could be displayed in the browser:

<html>
<body>
<div id="div">
<script>
var fontSize = 14;

var response = {
    "id": "cae1ff4f-bb23-4a6b-460d-a7a68b690a36",
    "predictions": [
        {
            "faces": [
                {
                    "bottom": 1402,
                    "left": 425,
                    "right": 1224,
                    "top": 603
                },
                {
                    "bottom": 1757,
                    "left": 1845,
                    "right": 2644,
                    "top": 958
                }
            ],
            "name": "IMG_05162.jpg",
            "numberOfFaces": 2
        }
    ],
    "processedTime": "2019-04-17T08:05:09.478159+00:00",
    "status": "DONE"
}

function createCanvas(oImg, items) {
    var oCanvas = document.createElement("CANVAS");
    var ctx = oCanvas.getContext("2d");

    function resizeCanvas() {
        // set the image width to the window width
        imgRatioW = oImg.naturalWidth / window.innerWidth;
        oImg.width  = window.innerWidth;
        oImg.height = oImg.naturalHeight / imgRatioW ;
        // adjust the canvas dimension
        oCanvas.width  = oImg.width;
        oCanvas.height = oImg.height;
        // get the width & height for the image / canvas
        var itemRatioW = oCanvas.width  / oImg.naturalWidth;
        var itemRatioH = oCanvas.height / oImg.naturalHeight;
        // draw the canvas
        ctx.drawImage(oImg, 0, 0, oImg.width, oImg.height);
        ctx.lineWidth="3";
        ctx.strokeStyle="red";
        ctx.fillStyle = "white";
        ctx.font = fontSize + "px Arial";
        // display the items
        for (var i = 0; i < items.length; i++) {
            var text = "Face #" + i;
            // get the box attributes
            var left = items[i].left * itemRatioW;
            var top  = items[i].top  * itemRatioH;
            var width  = (items[i].right  - items[i].left) * itemRatioW;
            var height = (items[i].bottom - items[i].top ) * itemRatioH;
            // draw the box
            ctx.strokeRect(left, top, width, height);
            // write the text with the box angle
            ctx.save();
            ctx.fillStyle = 'red';
            ctx.fillRect(left, top, ctx.measureText(text).width + ctx.lineWidth, ctx.lineWidth + fontSize);
            // write the text in the box
            ctx.fillStyle = "white";
            ctx.fillText(text, left, top + fontSize);
            ctx.restore();
        }
    }
    // call the resize function
    resizeCanvas();
    // add the event listener
    window.addEventListener('resize', resizeCanvas, false);
    return oCanvas;
}

window.onload = function() {
	for (var idx = 0; idx < response.predictions.length; idx++) {
        var items = response.predictions[idx].faces;
        var name = response.predictions[idx].name;

        var oImg = document.createElement("IMG");
        oImg.onload = function(){
            document.getElementById("div").appendChild(createCanvas(this, items));
        }
        oImg.src = name;
	}
};
</script>
</div>
</body>
</html>

During the second part we learned how to retrain a model and consume it. For more details, please refer above link as mentioned.

Not all participants were techies, but wanted to see SAP Leonardo Machine Learning in action. A CodeJam also gives the non-techies the options to explore and gain insights.

We aren’t machines and after all those learnings we definitely needed food. The Indonesian buffet was a big success during previous editions… so also this time we enjoyed again a delicious Indonesion buffet.

@Abdel Next Teched in Barcelona I’ll check if your keep your promise. So don’t forget to bring these … I’ll be looking for a SAP expert on Dutch clogs 😉

Thanks to all who joined and special thanks to Abdel!!!!

Cheerz,

Bart

1 Comment

You must be Logged on to comment or reply to a post.

s nath

April 17, 2019 at 10:03 am

A great initiative from Accenture Netherlands and SAP.

Wonderful session guys.

Would definite try to attend the next one 🙂

Event Information

SAP Leonardo Machine Learning CodeJam @ Accenture Liquid Studio (Netherlands)

Assigned Tags