Spaces:
Running
Running
| <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> | |