Hugging Face's logo

Spaces:
chiminaca
/
trichome-indicator
Running

App Files Community
chiminaca commited on
Commit
85c1316
·
verified ·
1 Parent(s): 62cd45a

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +402 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Trichome Indicator
3
- emoji: 🏆
4
- colorFrom: red
5
- colorTo: yellow
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: trichome-indicator
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: purple
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,402 @@
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>Trichome Tracker - Cannabis Harvest Advisor</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
12
+ }
13
+ .file-upload {
14
+ position: relative;
15
+ overflow: hidden;
16
+ }
17
+ .file-upload input {
18
+ position: absolute;
19
+ top: 0;
20
+ right: 0;
21
+ margin: 0;
22
+ padding: 0;
23
+ font-size: 20px;
24
+ cursor: pointer;
25
+ opacity: 0;
26
+ height: 100%;
27
+ }
28
+ .trichome-stage {
29
+ transition: all 0.3s ease;
30
+ }
31
+ .trichome-stage:hover {
32
+ transform: scale(1.05);
33
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
34
+ }
35
+ .pulse {
36
+ animation: pulse 2s infinite;
37
+ }
38
+ @keyframes pulse {
39
+ 0% { transform: scale(1); }
40
+ 50% { transform: scale(1.05); }
41
+ 100% { transform: scale(1); }
42
+ }
43
+ </style>
44
+ </head>
45
+ <body class="bg-gray-50 min-h-screen">
46
+ <!-- Header -->
47
+ <header class="gradient-bg text-white shadow-lg">
48
+ <div class="container mx-auto px-4 py-6">
49
+ <div class="flex justify-between items-center">
50
+ <div class="flex items-center space-x-3">
51
+ <i class="fas fa-cannabis text-3xl"></i>
52
+ <h1 class="text-2xl font-bold">Trichome Tracker</h1>
53
+ </div>
54
+ <nav>
55
+ <ul class="flex space-x-6">
56
+ <li><a href="#" class="hover:underline">Home</a></li>
57
+ <li><a href="#" class="hover:underline">Guide</a></li>
58
+ <li><a href="#" class="hover:underline">About</a></li>
59
+ </ul>
60
+ </nav>
61
+ </div>
62
+ </div>
63
+ </header>
64
+
65
+ <!-- Main Content -->
66
+ <main class="container mx-auto px-4 py-8">
67
+ <div class="text-center mb-12">
68
+ <h2 class="text-3xl font-bold text-gray-800 mb-3">Cannabis Trichome Analyzer</h2>
69
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">
70
+ Upload a clear photo of your cannabis plant's trichomes and get personalized harvesting advice based on their maturity stage.
71
+ </p>
72
+ </div>
73
+
74
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
75
+ <!-- Upload Section -->
76
+ <div class="bg-white rounded-xl shadow-md p-6">
77
+ <div class="mb-6">
78
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Upload Your Trichome Photo</h3>
79
+ <p class="text-gray-600">For best results, use a macro lens or jeweler's loupe to capture clear trichome images.</p>
80
+ </div>
81
+
82
+ <div class="file-upload flex flex-col items-center justify-center border-2 border-dashed border-green-300 rounded-xl p-8 mb-6 bg-green-50">
83
+ <i class="fas fa-cloud-upload-alt text-5xl text-green-500 mb-4"></i>
84
+ <p class="text-gray-600 mb-4">Drag & drop your photo here or click to browse</p>
85
+ <button class="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-6 rounded-full transition duration-300">
86
+ Select Image
87
+ </button>
88
+ <input type="file" id="trichomePhoto" accept="image/*" class="hidden">
89
+ </div>
90
+
91
+ <div id="imagePreview" class="hidden mb-6">
92
+ <h4 class="font-medium text-gray-700 mb-2">Your Photo:</h4>
93
+ <img id="previewImage" src="#" alt="Preview" class="max-w-full h-auto rounded-lg shadow">
94
+ </div>
95
+
96
+ <button id="analyzeBtn" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center space-x-2">
97
+ <i class="fas fa-search"></i>
98
+ <span>Analyze Trichomes</span>
99
+ </button>
100
+
101
+ <div id="loadingIndicator" class="hidden mt-4 text-center">
102
+ <div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-green-500 mb-2"></div>
103
+ <p class="text-gray-600">Analyzing your trichomes...</p>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Results Section -->
108
+ <div class="bg-white rounded-xl shadow-md p-6">
109
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Harvesting Advice</h3>
110
+
111
+ <div id="initialState" class="text-center py-12">
112
+ <i class="fas fa-leaf text-5xl text-gray-300 mb-4"></i>
113
+ <p class="text-gray-500">Upload and analyze a trichome photo to get personalized harvesting recommendations.</p>
114
+ </div>
115
+
116
+ <div id="resultsContainer" class="hidden">
117
+ <div class="mb-6">
118
+ <h4 class="font-medium text-gray-700 mb-2">Trichome Maturity Analysis:</h4>
119
+ <div class="bg-gray-100 rounded-lg p-4">
120
+ <div id="maturityResult" class="text-lg font-medium text-gray-800"></div>
121
+ <div id="confidenceLevel" class="text-sm text-gray-600 mt-1"></div>
122
+ </div>
123
+ </div>
124
+
125
+ <div class="mb-6">
126
+ <h4 class="font-medium text-gray-700 mb-3">Trichome Stages Detected:</h4>
127
+ <div class="grid grid-cols-3 gap-3">
128
+ <div class="trichome-stage bg-white rounded-lg p-3 border border-gray-200 text-center">
129
+ <div class="h-16 w-16 mx-auto mb-2 bg-blue-100 rounded-full flex items-center justify-center">
130
+ <i class="fas fa-circle text-blue-400"></i>
131
+ </div>
132
+ <p class="text-xs font-medium">Clear</p>
133
+ <p id="clearPercent" class="text-sm font-bold">0%</p>
134
+ </div>
135
+ <div class="trichome-stage bg-white rounded-lg p-3 border border-gray-200 text-center">
136
+ <div class="h-16 w-16 mx-auto mb-2 bg-yellow-100 rounded-full flex items-center justify-center">
137
+ <i class="fas fa-circle text-yellow-400"></i>
138
+ </div>
139
+ <p class="text-xs font-medium">Cloudy</p>
140
+ <p id="cloudyPercent" class="text-sm font-bold">0%</p>
141
+ </div>
142
+ <div class="trichome-stage bg-white rounded-lg p-3 border border-gray-200 text-center">
143
+ <div class="h-16 w-16 mx-auto mb-2 bg-amber-100 rounded-full flex items-center justify-center">
144
+ <i class="fas fa-circle text-amber-600"></i>
145
+ </div>
146
+ <p class="text-xs font-medium">Amber</p>
147
+ <p id="amberPercent" class="text-sm font-bold">0%</p>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <div class="mb-6">
153
+ <h4 class="font-medium text-gray-700 mb-2">Recommended Action:</h4>
154
+ <div id="recommendation" class="bg-green-50 border-l-4 border-green-500 p-4 rounded">
155
+ <p class="text-gray-800"></p>
156
+ </div>
157
+ </div>
158
+
159
+ <div>
160
+ <h4 class="font-medium text-gray-700 mb-2">Harvesting Tips:</h4>
161
+ <div id="harvestTips" class="space-y-2">
162
+ <!-- Tips will be inserted here -->
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- Trichome Guide -->
170
+ <div class="mt-16 bg-white rounded-xl shadow-md p-6">
171
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Understanding Trichome Stages</h3>
172
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
173
+ <div class="border rounded-lg p-4 hover:shadow-md transition duration-300">
174
+ <div class="flex items-center mb-3">
175
+ <div class="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
176
+ <i class="fas fa-circle text-blue-400"></i>
177
+ </div>
178
+ <h4 class="font-medium">Clear Trichomes</h4>
179
+ </div>
180
+ <p class="text-gray-600 text-sm">The plant is still developing THC and other cannabinoids. Harvesting now will result in lower potency.</p>
181
+ </div>
182
+ <div class="border rounded-lg p-4 hover:shadow-md transition duration-300">
183
+ <div class="flex items-center mb-3">
184
+ <div class="h-10 w-10 bg-yellow-100 rounded-full flex items-center justify-center mr-3">
185
+ <i class="fas fa-circle text-yellow-400"></i>
186
+ </div>
187
+ <h4 class="font-medium">Cloudy Trichomes</h4>
188
+ </div>
189
+ <p class="text-gray-600 text-sm">Peak THC levels. Harvest now for more cerebral, energetic effects. Ideal for sativa strains.</p>
190
+ </div>
191
+ <div class="border rounded-lg p-4 hover:shadow-md transition duration-300">
192
+ <div class="flex items-center mb-3">
193
+ <div class="h-10 w-10 bg-amber-100 rounded-full flex items-center justify-center mr-3">
194
+ <i class="fas fa-circle text-amber-600"></i>
195
+ </div>
196
+ <h4 class="font-medium">Amber Trichomes</h4>
197
+ </div>
198
+ <p class="text-gray-600 text-sm">THC converting to CBN. More sedative effects. Ideal for indica strains or pain relief.</p>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </main>
203
+
204
+ <!-- Footer -->
205
+ <footer class="bg-gray-800 text-white py-8 mt-12">
206
+ <div class="container mx-auto px-4">
207
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
208
+ <div>
209
+ <h4 class="text-lg font-semibold mb-4">Trichome Tracker</h4>
210
+ <p class="text-gray-400">Helping growers achieve the perfect harvest through trichome analysis and AI technology.</p>
211
+ </div>
212
+ <div>
213
+ <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
214
+ <ul class="space-y-2">
215
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
216
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Trichome Guide</a></li>
217
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Harvesting Tips</a></li>
218
+ </ul>
219
+ </div>
220
+ <div>
221
+ <h4 class="text-lg font-semibold mb-4">Connect</h4>
222
+ <div class="flex space-x-4">
223
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a>
224
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram text-xl"></i></a>
225
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook text-xl"></i></a>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
230
+ <p>&copy; 2023 Trichome Tracker. For educational purposes only.</p>
231
+ <p class="text-xs mt-2">Always comply with local laws regarding cannabis cultivation.</p>
232
+ </div>
233
+ </div>
234
+ </footer>
235
+
236
+ <script>
237
+ document.addEventListener('DOMContentLoaded', function() {
238
+ // Elements
239
+ const fileInput = document.getElementById('trichomePhoto');
240
+ const imagePreview = document.getElementById('imagePreview');
241
+ const previewImage = document.getElementById('previewImage');
242
+ const analyzeBtn = document.getElementById('analyzeBtn');
243
+ const loadingIndicator = document.getElementById('loadingIndicator');
244
+ const initialState = document.getElementById('initialState');
245
+ const resultsContainer = document.getElementById('resultsContainer');
246
+
247
+ // File upload handling
248
+ fileInput.addEventListener('change', function(e) {
249
+ if (e.target.files.length) {
250
+ const file = e.target.files[0];
251
+ const reader = new FileReader();
252
+
253
+ reader.onload = function(event) {
254
+ previewImage.src = event.target.result;
255
+ imagePreview.classList.remove('hidden');
256
+ analyzeBtn.classList.remove('hidden');
257
+ };
258
+
259
+ reader.readAsDataURL(file);
260
+ }
261
+ });
262
+
263
+ // Drag and drop functionality
264
+ const uploadArea = document.querySelector('.file-upload');
265
+
266
+ uploadArea.addEventListener('dragover', (e) => {
267
+ e.preventDefault();
268
+ uploadArea.classList.add('border-green-500', 'bg-green-100');
269
+ });
270
+
271
+ uploadArea.addEventListener('dragleave', () => {
272
+ uploadArea.classList.remove('border-green-500', 'bg-green-100');
273
+ });
274
+
275
+ uploadArea.addEventListener('drop', (e) => {
276
+ e.preventDefault();
277
+ uploadArea.classList.remove('border-green-500', 'bg-green-100');
278
+
279
+ if (e.dataTransfer.files.length) {
280
+ fileInput.files = e.dataTransfer.files;
281
+ const event = new Event('change');
282
+ fileInput.dispatchEvent(event);
283
+ }
284
+ });
285
+
286
+ // Analyze button click
287
+ analyzeBtn.addEventListener('click', function() {
288
+ if (!fileInput.files.length) {
289
+ alert('Please select an image first');
290
+ return;
291
+ }
292
+
293
+ // Show loading indicator
294
+ loadingIndicator.classList.remove('hidden');
295
+ analyzeBtn.disabled = true;
296
+
297
+ // Simulate API call with timeout
298
+ setTimeout(function() {
299
+ analyzeTrichomes();
300
+
301
+ // Hide loading and show results
302
+ loadingIndicator.classList.add('hidden');
303
+ initialState.classList.add('hidden');
304
+ resultsContainer.classList.remove('hidden');
305
+ analyzeBtn.disabled = false;
306
+ }, 2000);
307
+ });
308
+
309
+ // Function to simulate trichome analysis
310
+ function analyzeTrichomes() {
311
+ // In a real app, this would call an AI API like Imagga
312
+ // For demo purposes, we'll generate random results
313
+
314
+ // Generate random percentages (summing to 100)
315
+ const clear = Math.floor(Math.random() * 40);
316
+ const cloudy = Math.floor(Math.random() * (100 - clear));
317
+ const amber = 100 - clear - cloudy;
318
+
319
+ // Update the UI with the generated data
320
+ document.getElementById('clearPercent').textContent = clear + '%';
321
+ document.getElementById('cloudyPercent').textContent = cloudy + '%';
322
+ document.getElementById('amberPercent').textContent = amber + '%';
323
+
324
+ // Determine maturity stage and recommendation
325
+ let maturity, recommendation, tips = [];
326
+ const confidence = (90 + Math.floor(Math.random() * 10)) + '% confidence';
327
+
328
+ if (amber > 50) {
329
+ maturity = "Late Harvest Stage";
330
+ recommendation = "Your plant is at peak ripeness with mostly amber trichomes. Harvest now for maximum sedative effects.";
331
+ tips = [
332
+ "Flush plants with plain water for 7-10 days before harvest",
333
+ "Harvest in the morning after lights on",
334
+ "Consider a 48-hour dark period before harvest"
335
+ ];
336
+ } else if (cloudy > 50) {
337
+ maturity = "Peak Harvest Stage";
338
+ recommendation = "Your plant has mostly cloudy trichomes, indicating peak THC levels. Harvest now for energetic, cerebral effects.";
339
+ tips = [
340
+ "Check trichomes daily as they can change quickly",
341
+ "Harvest upper buds first if lower ones need more time",
342
+ "Maintain proper humidity during final days"
343
+ ];
344
+ } else if (clear > 50) {
345
+ maturity = "Early Development Stage";
346
+ recommendation = "Your plant is still developing with mostly clear trichomes. Wait 1-2 weeks and check again.";
347
+ tips = [
348
+ "Continue normal feeding schedule",
349
+ "Monitor trichomes every 3-4 days",
350
+ "Ensure proper light distance to prevent bleaching"
351
+ ];
352
+ } else {
353
+ // Mixed stage
354
+ maturity = "Transition Stage";
355
+ recommendation = "Your plant has a mix of trichome colors. For balanced effects, wait until you see about 20-30% amber trichomes.";
356
+ tips = [
357
+ "Check trichomes daily for changes",
358
+ "Consider harvesting in stages for different effects",
359
+ "Reduce nitrogen in your nutrient mix"
360
+ ];
361
+ }
362
+
363
+ // Update the results
364
+ document.getElementById('maturityResult').textContent = maturity;
365
+ document.getElementById('confidenceLevel').textContent = confidence;
366
+ document.querySelector('#recommendation p').textContent = recommendation;
367
+
368
+ // Add tips
369
+ const tipsContainer = document.getElementById('harvestTips');
370
+ tipsContainer.innerHTML = '';
371
+ tips.forEach(tip => {
372
+ const tipElement = document.createElement('div');
373
+ tipElement.className = 'flex items-start';
374
+ tipElement.innerHTML = `
375
+ <i class="fas fa-lightbulb text-yellow-500 mt-1 mr-2"></i>
376
+ <p class="text-gray-700">${tip}</p>
377
+ `;
378
+ tipsContainer.appendChild(tipElement);
379
+ });
380
+ }
381
+
382
+ // For demo purposes, simulate a click on the analyze button after 3 seconds
383
+ // This would be removed in production
384
+ setTimeout(() => {
385
+ // Create a mock file for demo
386
+ const mockFile = new File([""], "demo_trichomes.jpg");
387
+ const dataTransfer = new DataTransfer();
388
+ dataTransfer.items.add(mockFile);
389
+ fileInput.files = dataTransfer.files;
390
+
391
+ // Set a demo image
392
+ previewImage.src = "https://images.unsplash.com/photo-1605236453806-6ff36851237e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80";
393
+ imagePreview.classList.remove('hidden');
394
+ analyzeBtn.classList.remove('hidden');
395
+
396
+ // Trigger analysis
397
+ analyzeBtn.click();
398
+ }, 3000);
399
+ });
400
+ </script>
401
+ <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=chiminaca/trichome-indicator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
402
+ </html>
prompts.txt ADDED
File without changes