|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Image Recognition</title> |
|
|
</head> |
|
|
<body> |
|
|
<h1>Image Recognition App</h1> |
|
|
<input type="file" id="imageUpload" accept="image/*"> |
|
|
<button onclick="sendImage()">Predict</button> |
|
|
<h3>Predictions:</h3> |
|
|
<ul id="predictions"></ul> |
|
|
|
|
|
<script> |
|
|
async function sendImage() { |
|
|
const fileInput = document.getElementById("imageUpload"); |
|
|
const file = fileInput.files[0]; |
|
|
if (!file) return alert("Please upload an image."); |
|
|
|
|
|
const formData = new FormData(); |
|
|
formData.append("file", file); |
|
|
|
|
|
const response = await fetch("https://huggingface.co/spaces/ThalesPy/ImageIA/resolve/main/app.py", { |
|
|
method: "POST", |
|
|
body: formData, |
|
|
}); |
|
|
|
|
|
const predictions = await response.json(); |
|
|
const predictionsList = document.getElementById("predictions"); |
|
|
predictionsList.innerHTML = ""; |
|
|
predictions.forEach(prediction => { |
|
|
const listItem = document.createElement("li"); |
|
|
listItem.textContent = `${prediction.label}: ${Math.round(prediction.probability * 100)}%`; |
|
|
predictionsList.appendChild(listItem); |
|
|
}); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
