"blocked by CORS policy" error, Take input locally rather than webcam in teachable machine code

Question

From the teachable machine export, I copied javascript code and it takes its input from the webcam to give produced results. I want to provide an input image from my device but facing an issue as my code is not giving any output.

This is my code

<div>Teachable Machine Image Model</div>
<button type="button" onclick="init()">Start</button>
<div id="label-container"></div>

<!-- Add the file input element -->
<input type="file" id="file-input" accept="image/*"/>

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script>
<script type="text/javascript">
  // More API functions here:
  // https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image

  // the link to your model provided by Teachable Machine export panel
  const URL = "https://teachablemachine.withgoogle.com/models/Kk5_BUYCy/";

  let model, fileInput, labelContainer, maxPredictions;

  // Load the image model and setup the file input element
  async function init() {
    console.log("inside init")
    const modelURL = URL + "model.json";
    const metadataURL = URL + "metadata.json";

    // load the model and metadata
    // Refer to tmImage.loadFromFiles() in the API to support files from a file picker
    // or files from your local hard drive
    // Note: the pose library adds "tmImage" object to your window (window.tmImage)
    model = await tmImage.load(modelURL, metadataURL);
    maxPredictions = model.getTotalClasses();

    // Replace the webcam object with the file input element
    // webcam = new tmImage.Webcam(200, 200, flip);
    fileInput = document.getElementById("file-input")
    fileInput.addEventListener("change", predict(fileInput));

    labelContainer = document.getElementById("label-container");
    for (let i = 0; i < maxPredictions; i++) { // and class labels
      labelContainer.appendChild(document.createElement("div"));
    }
  }

  async function predict(fileInput) {
    console.log("inside predict")
    try {
        // Get the file from the file input element
        const file = fileInput.files[0];
        // Load the image
        const image = await tmImage.load(URL + file);
        // Predict the class
        const prediction = await model.predict(fileinput);
        for (let i = 0; i < maxPredictions; i++) {
            const classPrediction =
                prediction[i].className + ": " + prediction[i].probability.toFixed(2);
            labelContainer.childNodes[i].innerHTML = classPrediction;
        }
        
    } catch (error) {
        console.log(error)
    }
    
  }
</script>

Getting error: Access to fetch at 'https://teachablemachine.withgoogle.com/models/Kk5_BUYCy/%5Bobject%20File%5D' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

"blocked by CORS policy" error, Take input locally rather than webcam in teachable machine code

0 Answers0