I am requesting an image from the user's device and then I want to analyze it. I managed to create a separate code for requesting an image and a code for analyzing an image, but I can't combine them. The Teachable Machine refuses to analyze the image. Below I attach the code for requesting an image from the user and the code for analysis
HTML:
<body>
<input type="file" id="image_input" accept="image/png, image/jpg">
<div id="display_image"></div>
<script src="1.js"></script>
</body>
CSS:
body{
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-direction: column;
height: 100vh;
}
#display_image{
width: 450px;
height: 250px;
border: 1px solid black;
background-position: center;
background-size: cover;
}
JavaScript:
const image_input = document.querySelector("#image_input");
var uploaded_image = "";
image_input.addEventListener("change", function(){
const reader = new FileReader();
reader.addEventListener("load", () => {
uploaded_image = reader.result;
document.querySelector("#display_image").style.backgroundImage = `url(${uploaded_image})`;
});
reader.readAsDataURL(this.files[0]);
})
The code for analysis: (Is there a problem with the src line?)
<html>
<head>
</head>
<body>
<div>Teachable Machine Image Model</div>
<img src="" id="image" crossorigin="anonymous">
<div id="label-container"></div>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@latest/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 = "";
let model, labelContainer, maxPredictions;
let image = document.getElementById("image");
init();
// Load the image model and setup the webcam
async function 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();
// Convenience function to setup a webcam
const flip = true; // whether to flip the webcam
window.requestAnimationFrame(loop);
// append elements to the DOM
labelContainer = document.getElementById("label-container");
for (let i = 0; i < maxPredictions; i++) { // and class labels
labelContainer.appendChild(document.createElement("div"));
}
}
async function loop() {
// update the webcam frame
await predict();
window.requestAnimationFrame(loop);
}
// run the webcam image through the image model
async function predict() {
// predict can take in an image, video or canvas html element
const prediction = await model.predict(image);
for (let i = 0; i < maxPredictions; i++) {
const classPrediction =
prediction[i].className + ": " + prediction[i].probability.toFixed(2);
labelContainer.childNodes[i].innerHTML = classPrediction;
}
}
</script>
</body>
</html>
I tried to rewrite the code, try to get the src of the photo, but all to no avail. The code refuses to analyze absolutely everything.
I expected that the picture inserted by the user would be processed by a Teachable Machine.