0

I am developing a PWA app using web components and vaadin router, this is my flow

  1. index.html (main entry to PWA app)
  2. index.html has reference to local ./js/index.js and routes
  3. index.js has references to web components for each path
  4. Each individual web components loads tensorflow js and also references local js for model train, fit and evaluate.

I am able to load tensorflow JS and my local js script in my web component, my question is how do I update the result in web component. This is my glitch link where is it working with traditional html, js and css.

Below I am putting relevant pieces of code for reference. The sequence of the code

  1. Defining template.innerHTML

  2. In the template there are 2 sections with id "canvas" and "prediction"

  3. I need to update them from "image-classifier-mlp-script.js" which is my custom JS, traditionally I would have used

    const PREDICTION_ELEMENT = document.getElementById('prediction'); const CANVAS = document.getElementById('canvas');

but I cannot do it in web component, so my question What is the best pattern to update my html element id from my custom javascript?

const template = document.createElement('template')

template.innerHTML = `

<body>
    <link rel="stylesheet" href="./css/image-classifier-mlp.css" />
    <h1>TensorFlow.js MNIST classifier</h1>
    <p>See console for even more outputs.</p>

    <section class="box">
      <h2>Input Image</h2>
      <p>Input image is a 28x28 pixel greyscale image from MNIST dataset - a real hand drawn digit!</p>
      <canvas id="canvas" width="28" height="28"></canvas>
    </section>
<section class="box">
  <h2>Prediction</h2>
  <p>Below you see what number the trained TensorFlow.js model has predicted from the input image.</p>
  <p>Red is a wrong prediction, Green is a correct one.</p>
  <p id="prediction">Training model. Please wait...</p>
</section>    

`

let initCalled = false;
let customInitCalled = false;

function loadCustomScript() {

console.log(`Before : Value of customInitCalled ${customInitCalled}`)

if(!customInitCalled) {
    const script = document.createElement('script');
    script.type = 'module';
    script.async = true;
    script.onload = function () {
        customInitCalled = true;
        console.log(`After : Value of customInitCalled ${customInitCalled}`)
    }        
    
    script.src = '/js/image-classifier-mlp-script.js'
    document.head.appendChild(script);
}
}

function loadTf() {
    console.log(`Before : Value of initCalled ${initCalled}`)
    if (!initCalled) {
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.async = true;
        script.onload = function () {
            initCalled = true;
            console.log(`After : Value of initCalled ${initCalled}`)
        }        

    
    script.src = '//cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.11.0/dist/tf.min.js'
    document.head.appendChild(script);
}        
}

class ImageClassifierMultiLayerPerception extends HTMLElement {


constructor() {
    super();
    this._shadowRoot = this.attachShadow({ 'mode': 'open' });
    this._shadowRoot.appendChild(template.content.cloneNode(true));
  }

connectedCallback() {
    console.log('mlp')
    loadTf()
    loadCustomScript()
}    
}

customElements.define('image-classifier-mlp', ImageClassifierMultiLayerPerception)
Arup Sarkar
  • 931
  • 2
  • 9
  • 17
  • I didn't take a close look at your code. Sounds to my you want Web Components **to listen to (Custom)Events** – Danny '365CSI' Engelman May 10 '22 at 18:13
  • "but I cannot do it in web component". Why not? – abraham May 11 '22 at 12:55
  • @abraham short answer I do not know the way to do it, I am reading upon the literature but not getting any answer. The following is the app structure top to bottom a) index.html references b) index.js c) index.js has routes which are web components d) one such route is image-classifier-mlp e) In that web comp I am referencing 2 JS's 1) tensorflow.js and 2) customJS and also create html template, code that I pasted above. I want to reference in customJS one of the html element defined in image-classifier-mlp web comp. Is it making sense ? – Arup Sarkar May 11 '22 at 20:32

0 Answers0