So first of all you are using:
      .resizeBilinear(tf.browser.fromPixels(document.querySelector("img4")[0]), [
        224,
        224
      ], true)

Here you are using document.querySelector when you should be using document.getElementById as img4 is an id. Currently you are not sending any pixels to tf.browser.fromPixels.
Secondly, once you fix that, the images you are using are not hosted correctly for CORS Access. You will then see you will get a canvas tainted issue which you need to fix by using CORS on the server/CDN that hosts the images to allow access from other domains. Glitch.com offers a CDN for free that actually sets the headers correctly and then on your  tag you just need to set the crossorigin attribute to force it to use that.
See my glitch demo here for object detection for the index.html page that uses an image:

  
      

      glitch.com
  

  
    

Glitch Code Editor ･ﾟ✧

  Simple, powerful, free tools to create and use millions of apps.


  

  
    
    
  

  


Then it should have a chance to work!
PS for more information on CORS see my reply here:
  
    
    
    Use custom model with tfjs-tflite CORS issue TF.js
  
  
    The tfjs-tflite library allows you to run TFLite models on the web. 
Example: 
const tfliteModel = await tflite.loadTFLiteModel('url/to/your/model.tflite');

or 
const objectDetector = await tflite.ObjectDetector.create(
    "https://storage.googleapis.com/tfhub-lite-models/tensorflow/lite-model/ssd_mobilenet_v1/1/metadata/2.tflite"
);

I’m currently working on a simple Object Detection example, which works fine for the example models that are stored on Google Cloud, but I couldn’t get it to wor…