This code combines html image maps with the coco object detection model to enable automatic image detection and linking.

Object-maps.html

<!-- Load TensorFlow.js. This is required to use coco-ssd model. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"> </script>
<!-- Load the coco-ssd model. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"> </script>

<!-- Replace this with your image. Make sure CORS settings allow reading the image! -->
<img id="img" width=400 height=400 usemap="#workmap" src="./YOUR_NAME.png"/>



<!-- Place your code in the script tag below. You can also use an external .js file -->
<script>
  const img = document.getElementById('img');
  const map = document.createElement("map");
  map.name = "workmap";

  // Load the model.
  cocoSsd.load().then(model => {
    // detect objects in the image.
    model.detect(img).then(predictions => {
      for (let i=0; i < predictions.length; i++){
        const area = document.createElement("area");
        area.shape = "rect"
        area.coords = predictions[i].bbox.join(',')
        area.href=`https://en.wikipedia.org/wiki/${predictions[i].class}`
        map.appendChild(area)
      }
      img.setAttribute("usemap", `#${map.name}`);
      img.parentNode.insertBefore(map, img);
      console.log("Done!")
   });
  });
 
</script>