Hugging Face's logo

Spaces:
deniztas
/
model
Running

App Files Community
deniztas commited on
Commit
47beacf
·
verified ·
1 Parent(s): 6f42edc

i want to use it with file uploading as well - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +200 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Model
3
- emoji: 🌖
4
  colorFrom: purple
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: model
3
+ emoji: 🐳
4
  colorFrom: purple
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,200 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>AI Vision Classifier</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .prediction-bar {
11
+ height: 24px;
12
+ background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
13
+ border-radius: 12px;
14
+ transition: width 0.3s ease;
15
+ }
16
+ .webcam-feed {
17
+ border-radius: 16px;
18
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
19
+ transition: all 0.3s ease;
20
+ }
21
+ .webcam-feed:hover {
22
+ transform: scale(1.02);
23
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
24
+ }
25
+ </style>
26
+ </head>
27
+ <body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen">
28
+ <div class="container mx-auto px-4 py-12">
29
+ <div class="max-w-4xl mx-auto">
30
+ <!-- Header -->
31
+ <div class="text-center mb-12">
32
+ <h1 class="text-4xl font-bold text-gray-800 mb-2">
33
+ <i class="fas fa-robot text-blue-500 mr-2"></i> AI Vision Classifier
34
+ </h1>
35
+ <p class="text-gray-600 max-w-lg mx-auto">
36
+ A real-time image classification system powered by Teachable Machine.
37
+ Point your camera at objects to see the AI's predictions.
38
+ </p>
39
+ </div>
40
+
41
+ <!-- Main Content -->
42
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
43
+ <div class="p-6 md:p-8">
44
+ <!-- Webcam Container -->
45
+ <div class="flex flex-col md:flex-row gap-8">
46
+ <div class="flex-1">
47
+ <div class="mb-4 flex justify-between items-center">
48
+ <h2 class="text-xl font-semibold text-gray-800">
49
+ <i class="fas fa-camera text-blue-500 mr-2"></i> Live Feed
50
+ </h2>
51
+ <button id="startBtn" onclick="init()" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition flex items-center">
52
+ <i class="fas fa-play mr-2"></i> Start Camera
53
+ </button>
54
+ </div>
55
+ <div id="webcam-container" class="webcam-feed bg-gray-200 w-full aspect-square flex items-center justify-center rounded-lg overflow-hidden">
56
+ <div class="text-center p-4">
57
+ <i class="fas fa-camera text-gray-400 text-4xl mb-2"></i>
58
+ <p class="text-gray-500">Camera feed will appear here</p>
59
+ </div>
60
+ </div>
61
+ </div>
62
+
63
+ <!-- Predictions Container -->
64
+ <div class="flex-1">
65
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">
66
+ <i class="fas fa-chart-bar text-purple-500 mr-2"></i> Predictions
67
+ </h2>
68
+ <div id="label-container" class="space-y-4">
69
+ <div class="bg-gray-100 p-6 rounded-lg text-center">
70
+ <i class="fas fa-lightbulb text-yellow-400 text-3xl mb-3"></i>
71
+ <p class="text-gray-600">Click "Start Camera" to begin classification</p>
72
+ <p class="text-sm text-gray-500 mt-2">The AI will analyze objects in view and display confidence levels here</p>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </div>
77
+
78
+ <!-- Instructions -->
79
+ <div class="mt-8 bg-blue-50 p-4 rounded-lg">
80
+ <h3 class="font-medium text-blue-800 mb-2 flex items-center">
81
+ <i class="fas fa-info-circle mr-2"></i> How to use
82
+ </h3>
83
+ <ol class="list-decimal list-inside text-blue-700 space-y-1 text-sm">
84
+ <li>Click "Start Camera" and allow access to your webcam</li>
85
+ <li>Point your camera at objects you've trained the model to recognize</li>
86
+ <li>View real-time predictions with confidence percentages</li>
87
+ <li>For best results, ensure good lighting and clear focus</li>
88
+ </ol>
89
+ </div>
90
+ </div>
91
+ </div>
92
+
93
+ <!-- Footer -->
94
+ <div class="mt-8 text-center text-gray-500 text-sm">
95
+ <p>Powered by Teachable Machine and TensorFlow.js</p>
96
+ </div>
97
+ </div>
98
+ </div>
99
+
100
+ <!-- Scripts -->
101
+ <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
102
+ <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@latest/dist/teachablemachine-image.min.js"></script>
103
+ <script type="text/javascript">
104
+ // the link to your model provided by Teachable Machine export panel
105
+ const URL = "https://teachablemachine.withgoogle.com/models/5bQ38_H5n/";
106
+
107
+ let model, webcam, labelContainer, maxPredictions;
108
+ let isRunning = false;
109
+
110
+ // Load the image model and setup the webcam
111
+ async function init() {
112
+ if (isRunning) return;
113
+
114
+ const startBtn = document.getElementById('startBtn');
115
+ startBtn.disabled = true;
116
+ startBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Initializing...';
117
+
118
+ try {
119
+ const modelURL = URL + "model.json";
120
+ const metadataURL = URL + "metadata.json";
121
+
122
+ // load the model and metadata
123
+ model = await tmImage.load(modelURL, metadataURL);
124
+ maxPredictions = model.getTotalClasses();
125
+
126
+ // Setup webcam
127
+ const flip = true; // whether to flip the webcam
128
+ webcam = new tmImage.Webcam(400, 400, flip); // increased resolution
129
+ await webcam.setup(); // request access to the webcam
130
+ await webcam.play();
131
+
132
+ // Update UI
133
+ const webcamContainer = document.getElementById('webcam-container');
134
+ webcamContainer.innerHTML = '';
135
+ webcamContainer.appendChild(webcam.canvas);
136
+ webcam.canvas.classList.add('webcam-feed', 'w-full', 'h-full');
137
+
138
+ // Setup predictions container
139
+ labelContainer = document.getElementById('label-container');
140
+ labelContainer.innerHTML = '';
141
+ for (let i = 0; i < maxPredictions; i++) {
142
+ const predictionElement = document.createElement('div');
143
+ predictionElement.className = 'prediction-item';
144
+ labelContainer.appendChild(predictionElement);
145
+ }
146
+
147
+ startBtn.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Running';
148
+ startBtn.classList.remove('bg-blue-500', 'hover:bg-blue-600');
149
+ startBtn.classList.add('bg-green-500', 'hover:bg-green-600');
150
+
151
+ isRunning = true;
152
+ window.requestAnimationFrame(loop);
153
+ } catch (error) {
154
+ console.error('Error initializing:', error);
155
+ labelContainer.innerHTML = `
156
+ <div class="bg-red-50 p-4 rounded-lg text-red-700">
157
+ <i class="fas fa-exclamation-triangle mr-2"></i>
158
+ Error: ${error.message}
159
+ </div>
160
+ `;
161
+ startBtn.disabled = false;
162
+ startBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Try Again';
163
+ }
164
+ }
165
+
166
+ async function loop() {
167
+ if (!isRunning) return;
168
+
169
+ webcam.update(); // update the webcam frame
170
+ await predict();
171
+ window.requestAnimationFrame(loop);
172
+ }
173
+
174
+ // run the webcam image through the image model
175
+ async function predict() {
176
+ if (!isRunning) return;
177
+
178
+ // predict can take in an image, video or canvas html element
179
+ const prediction = await model.predict(webcam.canvas);
180
+
181
+ for (let i = 0; i < maxPredictions; i++) {
182
+ const probability = prediction[i].probability.toFixed(2);
183
+ const percentage = Math.round(probability * 100);
184
+
185
+ const predictionElement = labelContainer.childNodes[i];
186
+ predictionElement.className = 'prediction-item mb-4';
187
+ predictionElement.innerHTML = `
188
+ <div class="flex justify-between items-center mb-1">
189
+ <span class="font-medium text-gray-700">${prediction[i].className}</span>
190
+ <span class="text-sm font-semibold ${percentage > 70 ? 'text-green-600' : percentage > 40 ? 'text-yellow-600' : 'text-gray-600'}">
191
+ ${percentage}%
192
+ </span>
193
+ </div>
194
+ <div class="prediction-bar" style="width: ${percentage}%"></div>
195
+ `;
196
+ }
197
+ }
198
+ </script>
199
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=deniztas/model" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
200
+ </html>