How to Perform Image Regression with ml5JS?

Last Updated : 28 Aug, 2024

Imagine you have a photo, and you want to predict a continuous value from that image like estimating the brightness or calculating an age based on someone's face. That's what image regression is all about. Today, we're going to explore how you can perform image regression using a pre-trained model in ml5.js.

We’ll be using the MobileNet model, a neural network pre-trained on a huge dataset of images. This means it already knows a lot about different objects, making it an excellent starting point for our project.

Approach

In this approach, p5.js and ml5.js work together to streamline the process of identifying objects in an uploaded image. p5.js handles the visual elements and user interactions on the web page, such as displaying the uploaded image and setting up the interface for uploading. It simplifies drawing the image and managing how it appears on the page. ml5.js is responsible for the machine learning part as it integrates with the MobileNet model to analyze the image and generate predictions about what is depicted. The library simplifies using this model and presenting the top predictions along with confidence scores. Together, these tools enable users to easily upload an image, get real-time insights about it, and view the results in a user-friendly way.

Example: This example shows the implementation of the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Image Regression with Pre-Trained Model</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id='loader'>
        <p></p>
    </div>
    <h1>Image Regression Example</h1>
    <input type="file" id="imageInput" accept="image/*">
    <div id='image_div'>
        <img id="image" src="" 
             alt="Selected Image"
             style="display: none;">
    </div>
    <p id="result"></p>

    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/ml5.min.js"></script>
    <script src="script.js"></script>
</body>

</html>

CSS

body {
    font-family: Arial, sans-serif;
    text-align:center;
    margin-top: 50px;
    border:dashed 2px gray;
}
#image_div{
   display:flex;
   justify-content:center;
   align-items:center;

}
img {
    max-width: 200px;
 margin-top: 50px;
}
#loader{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    display:none;
    
    
}
#loader p{

      height:80px;
      width:80px;
      border-top:none;
      border-left:solid 5px green;
      border-radius:50%;
      animation:spin 1s infinite;
    
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
#result {
    font-size: 1.2em;
    font-weight: bold;
}

JavaScript

let classifier;
let imgElement = document.getElementById("image");
let inputElement = document.getElementById("imageInput");
let loader = document.getElementById("loader");
function setup() {
  // Load the pre-trained MobileNet model
  classifier = ml5.imageClassifier("MobileNet", modelReady);

  // Handle image input change
  inputElement.addEventListener("change", handleImageUpload);
}

function modelReady() {
  console.log("Model Loaded!");
}

function handleImageUpload(event) {
  const reader = new FileReader();
  reader.onload = function (event) {
    imgElement.src = event.target.result;
    imgElement.style.display = "block";
    loader.style.display = "block";
    classifier.classify(imgElement, gotResult);
  };
  reader.readAsDataURL(event.target.files[0]);
}

function gotResult(error, results) {
  if (error) {
    console.error(error);
    return;
  }
  // Display the top 3 predictions with confidence scores
  const resultElement = document.getElementById("result");
  resultElement.innerHTML = "";
  results.slice(0, 3).forEach((result) => {
    resultElement.innerHTML += `Prediction: 
     ${result.label} with confidence ${(
      result.confidence * 100
    ).toFixed(2)}%<br>`;
    loader.style.display = "none";
  });
}

// Initialize the setup when the document is ready
window.addEventListener("DOMContentLoaded", setup);

Output:

How to Plot the Linear Regression in R

kartikjaat5765

Improve

Article Tags :

How to Perform Image Regression with ml5JS?

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?