|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Cat vs. Dog Image Classifier</title> |
|
|
<script src="https://cdn.jsdelivr.net/npm/@xenova/transformers"></script> |
|
|
<style> |
|
|
body { |
|
|
font-family: Arial, sans-serif; |
|
|
text-align: center; |
|
|
margin: 50px; |
|
|
} |
|
|
img { |
|
|
max-width: 300px; |
|
|
margin: 20px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<h1>Cat vs. Dog Image Classifier</h1> |
|
|
<input type="file" id="imageUploader" accept="image/*"> |
|
|
<br> |
|
|
<img id="uploadedImage" style="display: none;" /> |
|
|
<br> |
|
|
<button onclick="predictImage()">Predict</button> |
|
|
<h2 id="result"></h2> |
|
|
|
|
|
<script> |
|
|
let model; |
|
|
async function loadModel() { |
|
|
model = await transformers.pipeline('image-classification', 'louiecerv/cats_dogs_recognition_tf_cnn'); |
|
|
console.log("Model loaded successfully"); |
|
|
} |
|
|
loadModel(); |
|
|
|
|
|
document.getElementById('imageUploader').addEventListener('change', function(event) { |
|
|
const file = event.target.files[0]; |
|
|
if (file) { |
|
|
const reader = new FileReader(); |
|
|
reader.onload = function(e) { |
|
|
const imgElement = document.getElementById('uploadedImage'); |
|
|
imgElement.src = e.target.result; |
|
|
imgElement.style.display = 'block'; |
|
|
}; |
|
|
reader.readAsDataURL(file); |
|
|
} |
|
|
}); |
|
|
|
|
|
async function predictImage() { |
|
|
const imgElement = document.getElementById('uploadedImage'); |
|
|
if (!imgElement.src) { |
|
|
alert("Please upload an image first."); |
|
|
return; |
|
|
} |
|
|
|
|
|
const predictions = await model(imgElement); |
|
|
const topPrediction = predictions[0]; |
|
|
|
|
|
document.getElementById('result').innerText = `Prediction: ${topPrediction.label} (Confidence: ${(topPrediction.score * 100).toFixed(2)}%)`; |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
