louiecerv/html_javascript_python_CNN_webapp
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Cat vs. Dog Image Classifier</title>7 <script src="https://cdn.jsdelivr.net/npm/@xenova/transformers"></script>8 <style>9 body {10 font-family: Arial, sans-serif;11 text-align: center;12 margin: 50px;13 }14 img {15 max-width: 300px;16 margin: 20px;17 }18 </style>19</head>20<body>21 <h1>Cat vs. Dog Image Classifier</h1>22 <input type="file" id="imageUploader" accept="image/*">23 <br>24 <img id="uploadedImage" style="display: none;" />25 <br>26 <button onclick="predictImage()">Predict</button>27 <h2 id="result"></h2>28 29 <script>30 let model;31 async function loadModel() {32 model = await transformers.pipeline('image-classification', 'louiecerv/cats_dogs_recognition_tf_cnn');33 console.log("Model loaded successfully");34 }35 loadModel();36 37 document.getElementById('imageUploader').addEventListener('change', function(event) {38 const file = event.target.files[0];39 if (file) {40 const reader = new FileReader();41 reader.onload = function(e) {42 const imgElement = document.getElementById('uploadedImage');43 imgElement.src = e.target.result;44 imgElement.style.display = 'block';45 };46 reader.readAsDataURL(file);47 }48 });49 50 async function predictImage() {51 const imgElement = document.getElementById('uploadedImage');52 if (!imgElement.src) {53 alert("Please upload an image first.");54 return;55 }56 57 const predictions = await model(imgElement);58 const topPrediction = predictions[0];59 60 document.getElementById('result').innerText = `Prediction: ${topPrediction.label} (Confidence: ${(topPrediction.score * 100).toFixed(2)}%)`;61 }62 </script>63</body>64</html>65