Run html with script in appinventor (Teachable machine / tensorflow.js)

Artificial Intelligence
14

Had a play with this today, and got it working. Used Taifun's Image extension to resize, and Juan Antonio's Base64 extension for base64 conversion. Credits to both :wink: Tested with companion (2.62u) on Android 12 real device.

Tested on a few office objects and got some interesting returns (image of smartphone returned meatcleaver ....), but it is working...

tmWVS.aia (57.0 KB)

HTML 
<!DOCTYPE html>
<html>
  <head>
    <!-- Load the latest version of TensorFlow.js -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet"></script>
  </head>

  <body>
    <!-- Add an image that we will use to test -->
    <img id="img" src=""/>
    
    <script>
    var wvs = window.AppInventor.getWebViewString();
    document.getElementById("img").src = "data:image/jpeg;base64," + wvs;
    </script>

    <!-- Load tm script after the content of the page -->
    <script>
    
    setTimeout(() => {
    
    let net;
	async function app() {
	// Load the model.
	net = await mobilenet.load();
	// Make a prediction through the model on our image.
	const imgEl = document.getElementById('img');
	const result = await net.classify(imgEl);
	// return result via webviewstring
	window.AppInventor.setWebViewString(JSON.stringify(result));	
	}
	app();
	
	}, 300);
	
    </script>
  </body>
</html>
3 Likes