| <!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> |
|
|
