Spaces:
Running
Running
File size: 3,261 Bytes
3e4784f 309e8ef d53536b 309e8ef d53536b 309e8ef d53536b 309e8ef d53536b 309e8ef d53536b 309e8ef d53536b 309e8ef 3e4784f | 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 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | <!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Classifier AI</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; padding: 50px; background-color: #f4f4f9; }
.container { background: white; padding: 30px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); display: inline-block; max-width: 400px; }
input { margin: 20px 0; }
img { max-width: 100%; max-height: 250px; margin-top: 15px; display: none; border-radius: 5px; }
#status { font-weight: bold; color: #555; margin-top: 15px; }
#result { margin-top: 15px; font-size: 18px; color: green; font-weight: bold; }
</style>
<!-- Transformers.js AI Library -->
<script type="module">
import { pipeline } from 'https://jsdelivr.net';
let classifier;
const statusDiv = document.getElementById('status');
const resultDiv = document.getElementById('result');
const fileInput = document.getElementById('file-input');
const imagePreview = document.getElementById('image-preview');
async function init() {
statusDiv.innerText = "Loading AI Model... Please wait...";
classifier = await pipeline('image-classification', 'Xenova/vit-base-patch16-224');
statusDiv.innerText = "AI Model Ready! Upload an image.";
}
fileInput.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function(event) {
imagePreview.src = event.target.result;
imagePreview.style.display = 'block';
resultDiv.innerText = "";
}
reader.readAsDataURL(file);
});
window.classifyImage = async function() {
if (!classifier) {
alert("Model is still loading, please wait!");
return;
}
if (!imagePreview.src || imagePreview.style.display === 'none') {
alert("Please upload an image first!");
return;
}
statusDiv.innerText = "Analyzing image...";
resultDiv.innerText = "";
try {
const results = await classifier(imagePreview.src);
statusDiv.innerText = "Analysis complete!";
resultDiv.innerText = `Result: ${results[0].label} (${Math.round(results[0].score * 100)}%)`;
} catch (error) {
statusDiv.innerText = "Error analyzing image.";
console.error(error);
}
}
init();
</script>
</head>
<body>
<div class="container">
<h1>My Image Classifier AI</h1>
<p>Upload an image to test the model.</p>
<input type="file" id="file-input" accept="image/*" />
<br>
<img id="image-preview" src="" alt="Preview" />
<br>
<div id="status">Initializing...</div>
<button onclick="classifyImage()">Classify Image</button>
<div id="result"></div>
</div>
</body>
</html>
|