Hugging Face's logo

Spaces:
ZaiVerse
/
image-classifier
Running

App Files Community
ZaiVerse commited on
Commit
d53536b
·
verified ·
1 Parent(s): 309e8ef

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +65 -4
index.html CHANGED
@@ -3,20 +3,81 @@
3
  <head>
4
  <meta charset="utf-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>Image Classifier</title>
7
  <style>
8
  body { font-family: Arial, sans-serif; text-align: center; padding: 50px; background-color: #f4f4f9; }
9
- .container { background: white; padding: 30px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); display: inline-block; }
10
  input { margin: 20px 0; }
 
 
 
11
  </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
  </head>
13
  <body>
14
  <div class="container">
15
  <h1>My Image Classifier AI</h1>
16
  <p>Upload an image to test the model.</p>
17
- <input type="file" accept="image/*" />
18
  <br>
19
- <button onclick="alert('Model loading features coming soon!')">Classify Image</button>
 
 
 
 
20
  </div>
21
  </body>
22
  </html>
 
3
  <head>
4
  <meta charset="utf-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Image Classifier AI</title>
7
  <style>
8
  body { font-family: Arial, sans-serif; text-align: center; padding: 50px; background-color: #f4f4f9; }
9
+ .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; }
10
  input { margin: 20px 0; }
11
+ img { max-width: 100%; max-height: 250px; margin-top: 15px; display: none; border-radius: 5px; }
12
+ #status { font-weight: bold; color: #555; margin-top: 15px; }
13
+ #result { margin-top: 15px; font-size: 18px; color: green; font-weight: bold; }
14
  </style>
15
+ <!-- Transformers.js AI Library -->
16
+ <script type="module">
17
+ import { pipeline } from 'https://jsdelivr.net';
18
+
19
+ let classifier;
20
+ const statusDiv = document.getElementById('status');
21
+ const resultDiv = document.getElementById('result');
22
+ const fileInput = document.getElementById('file-input');
23
+ const imagePreview = document.getElementById('image-preview');
24
+
25
+ async function init() {
26
+ statusDiv.innerText = "Loading AI Model... Please wait...";
27
+ classifier = await pipeline('image-classification', 'Xenova/vit-base-patch16-224');
28
+ statusDiv.innerText = "AI Model Ready! Upload an image.";
29
+ }
30
+
31
+ fileInput.addEventListener('change', (e) => {
32
+ const file = e.target.files[0];
33
+ if (!file) return;
34
+
35
+ const reader = new FileReader();
36
+ reader.onload = function(event) {
37
+ imagePreview.src = event.target.result;
38
+ imagePreview.style.display = 'block';
39
+ resultDiv.innerText = "";
40
+ }
41
+ reader.readAsDataURL(file);
42
+ });
43
+
44
+ window.classifyImage = async function() {
45
+ if (!classifier) {
46
+ alert("Model is still loading, please wait!");
47
+ return;
48
+ }
49
+ if (!imagePreview.src || imagePreview.style.display === 'none') {
50
+ alert("Please upload an image first!");
51
+ return;
52
+ }
53
+
54
+ statusDiv.innerText = "Analyzing image...";
55
+ resultDiv.innerText = "";
56
+
57
+ try {
58
+ const results = await classifier(imagePreview.src);
59
+ statusDiv.innerText = "Analysis complete!";
60
+ resultDiv.innerText = `Result: ${results[0].label} (${Math.round(results[0].score * 100)}%)`;
61
+ } catch (error) {
62
+ statusDiv.innerText = "Error analyzing image.";
63
+ console.error(error);
64
+ }
65
+ }
66
+
67
+ init();
68
+ </script>
69
  </head>
70
  <body>
71
  <div class="container">
72
  <h1>My Image Classifier AI</h1>
73
  <p>Upload an image to test the model.</p>
74
+ <input type="file" id="file-input" accept="image/*" />
75
  <br>
76
+ <img id="image-preview" src="" alt="Preview" />
77
+ <br>
78
+ <div id="status">Initializing...</div>
79
+ <button onclick="classifyImage()">Classify Image</button>
80
+ <div id="result"></div>
81
  </div>
82
  </body>
83
  </html>