|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Fruit Recognition</title> |
|
</head> |
|
<body> |
|
<h1>Fruit Recognition</h1> |
|
<input type="file" id="inputImage" accept="image/*"> |
|
<button onclick="submitImage()">Predict</button> |
|
<p id="result"></p> |
|
|
|
<script> |
|
async function submitImage() { |
|
const inputImage = document.getElementById("inputImage"); |
|
const resultElement = document.getElementById("result"); |
|
|
|
if (inputImage.files.length > 0) { |
|
const formData = new FormData(); |
|
formData.append("file", inputImage.files[0]); |
|
|
|
try { |
|
const response = await fetch("/predict/", { |
|
method: "POST", |
|
body: formData, |
|
}); |
|
|
|
if (response.ok) { |
|
const data = await response.json(); |
|
resultElement.innerText = `Predicted class: ${data.predicted_class}`; |
|
} else { |
|
const error = await response.json(); |
|
resultElement.innerText = `Error: ${error.error}`; |
|
} |
|
} catch (error) { |
|
resultElement.innerText = `Error: ${error.message}`; |
|
} |
|
} else { |
|
resultElement.innerText = "Please select an image."; |
|
} |
|
} |
|
</script> |
|
</body> |
|
</html> |
|
|
