How to register tensorflow JS into MTA

[Kevin_Hunter]

Hi all,

Im not a developer but trying to learn the hard way! Im trying to write an MTA application that uses TensorflowJS but how do I register the module ???

Im using business application studio and executed npm install @tensorflow/tfjs @tensorflow-models/handpose and it has downloaded the modules into the node_modules folder and added them as dependencies in my package.json file.

I added the following code to my Component.js file

 jQuery.myUniqueNamespace = { registerExternalLib: function(oShim) { if (sap.ui.loader && sap.ui.loader.config) { // official API since 1.56 sap.ui.loader.config({ shim: oShim }); } else { // internal API before 1.56 jQuery.sap.registerModuleShims(oShim); } }}; 
  
jQuery.myUniqueNamespace.registerExternalLib({ "sap/custom/plugins/gesturecontrol/node_modules/@tensorflow/tfjs/dist/tf": { "amd": true, "export": "tf" }}); 
  
jQuery.myUniqueNamespace.registerExternalLib({ "sap/custom/plugins/gesturecontrol/node_modules/@tensorflow-models/handpose/dist/handpose": { "amd": true, "export": "handpose" }}); 
  

I also added the following in my controller

sap.ui.define([ 'jquery.sap.global', "sap/dm/dme/podfoundation/controller/PluginViewController", "sap/ui/model/json/JSONModel", "sap/custom/plugins/gesturecontrol/node_modules/@tensorflow/tfjs/dist/tf", "sap/custom/plugins/gesturecontrol/node_modules/@tensorflow-models/handpose/dist/handpose"], function (jQuery, PluginViewController, JSONModel, tf, handpose) { "use strict";
  
 sap.ui.define([ 'jquery.sap.global', "sap/dm/dme/podfoundation/controller/PluginViewController", "sap/ui/model/json/JSONModel", "sap/custom/plugins/gesturecontrol/node_modules/@tensorflow/tfjs/dist/tf", "sap/custom/plugins/gesturecontrol/node_modules/@tensorflow-models/handpose/dist/handpose"], function (jQuery, PluginViewController, JSONModel, tf, handpose) { "use strict"; 
  

When I test the code it throws a not found error

Uncaught (in promise) Error: failed to load 'sap/custom/plugins/gesturecontrol/node_modules/@tensorflow/tfjs/dist/tf.js'

Am i referencing the file location properly ? should I be loading it in a different way ?

I successfully built the app in a standalone ui5 app where I load the library in the index.html file with

<code><script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>

but since the MTA app doesnt have an index.html file Im lost.

Any help is gratefully received.

Thanks

Kevin

[WouterLemaire]

Hi,

You have to copy tensorflow js into your ui5 app like in this example https://blogs.sap.com/2017/04/30/how-to-include-third-party-libraries-modules-in-sapui5/

Kr, Wouter

[Kevin_Hunter]

I tried using this method and it doesnt appear to work.

If i look at the source files in chrome tools I can see tensorflow now which I couldn't before

I have added this code:

I have a button on my GUI that calls a startVideo function

  startVideo: async function(){
            var that=this
            const model =  await handpose.load();
            setInterval(() => {that.findHand(model);},50);
        },

however this throws an error as handpose is undefined.

This is exactly the same was I do it in my working standalone UI5 app .

Do I need to declare handpose somehow ??

Thanks

Kevin

[WouterLemaire]

Hi Kevin, this is normal in ui5. You have to give it another name in the define like handposelib and then use handpose in your code.

kr, Wouter

[Kevin_Hunter]

Thanks Wouter,

I gave it a try and it didn't make any difference , I still get the not defined error.

    "sap/custom/plugins/gesturecontrol/gesturecontrol/libs/tf.min",
    "sap/custom/plugins/gesturecontrol/gesturecontrol/libs/handpose"
], function (jQuery, PluginViewController, JSONModel, tf_lib, handpose_lib) {
    "use strict";

Thanks

Kevin