File size: 2,150 Bytes
88c01c8 59ff5b7 88c01c8 59ff5b7 88c01c8 59ff5b7 88c01c8 59ff5b7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<!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>
|