CODEWITHSUNDEEP
progressive-web-appsweb-componenttensorflow.jsvaadin-router
Arup Sarkar
Arup Sarkar

Reputation: 951

Update html element from Javascript in Web Component

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/[email protected]/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)

Upvotes: 0

Views: 186

Answers (0)

Related Questions