Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Trichome Tracker - Cannabis Harvest Advisor</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%); | |
| } | |
| .file-upload { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .file-upload input { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| margin: 0; | |
| padding: 0; | |
| font-size: 20px; | |
| cursor: pointer; | |
| opacity: 0; | |
| height: 100%; | |
| } | |
| .trichome-stage { | |
| transition: all 0.3s ease; | |
| } | |
| .trichome-stage:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <i class="fas fa-cannabis text-3xl"></i> | |
| <h1 class="text-2xl font-bold">Trichome Tracker</h1> | |
| </div> | |
| <nav> | |
| <ul class="flex space-x-6"> | |
| <li><a href="#" class="hover:underline">Home</a></li> | |
| <li><a href="#" class="hover:underline">Guide</a></li> | |
| <li><a href="#" class="hover:underline">About</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-3">Cannabis Trichome Analyzer</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> | |
| Upload a clear photo of your cannabis plant's trichomes and get personalized harvesting advice based on their maturity stage. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <!-- Upload Section --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Upload Your Trichome Photo</h3> | |
| <p class="text-gray-600">For best results, use a macro lens or jeweler's loupe to capture clear trichome images.</p> | |
| </div> | |
| <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"> | |
| <i class="fas fa-cloud-upload-alt text-5xl text-green-500 mb-4"></i> | |
| <p class="text-gray-600 mb-4">Drag & drop your photo here or click to browse</p> | |
| <button class="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-6 rounded-full transition duration-300"> | |
| Select Image | |
| </button> | |
| <input type="file" id="trichomePhoto" accept="image/*" class="hidden"> | |
| </div> | |
| <div id="imagePreview" class="hidden mb-6"> | |
| <h4 class="font-medium text-gray-700 mb-2">Your Photo:</h4> | |
| <img id="previewImage" src="#" alt="Preview" class="max-w-full h-auto rounded-lg shadow"> | |
| </div> | |
| <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"> | |
| <i class="fas fa-search"></i> | |
| <span>Analyze Trichomes</span> | |
| </button> | |
| <div id="loadingIndicator" class="hidden mt-4 text-center"> | |
| <div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-green-500 mb-2"></div> | |
| <p class="text-gray-600">Analyzing your trichomes...</p> | |
| </div> | |
| </div> | |
| <!-- Results Section --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Harvesting Advice</h3> | |
| <div id="initialState" class="text-center py-12"> | |
| <i class="fas fa-leaf text-5xl text-gray-300 mb-4"></i> | |
| <p class="text-gray-500">Upload and analyze a trichome photo to get personalized harvesting recommendations.</p> | |
| </div> | |
| <div id="resultsContainer" class="hidden"> | |
| <div class="mb-6"> | |
| <h4 class="font-medium text-gray-700 mb-2">Trichome Maturity Analysis:</h4> | |
| <div class="bg-gray-100 rounded-lg p-4"> | |
| <div id="maturityResult" class="text-lg font-medium text-gray-800"></div> | |
| <div id="confidenceLevel" class="text-sm text-gray-600 mt-1"></div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-medium text-gray-700 mb-3">Trichome Stages Detected:</h4> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <div class="trichome-stage bg-white rounded-lg p-3 border border-gray-200 text-center"> | |
| <div class="h-16 w-16 mx-auto mb-2 bg-blue-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-circle text-blue-400"></i> | |
| </div> | |
| <p class="text-xs font-medium">Clear</p> | |
| <p id="clearPercent" class="text-sm font-bold">0%</p> | |
| </div> | |
| <div class="trichome-stage bg-white rounded-lg p-3 border border-gray-200 text-center"> | |
| <div class="h-16 w-16 mx-auto mb-2 bg-yellow-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-circle text-yellow-400"></i> | |
| </div> | |
| <p class="text-xs font-medium">Cloudy</p> | |
| <p id="cloudyPercent" class="text-sm font-bold">0%</p> | |
| </div> | |
| <div class="trichome-stage bg-white rounded-lg p-3 border border-gray-200 text-center"> | |
| <div class="h-16 w-16 mx-auto mb-2 bg-amber-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-circle text-amber-600"></i> | |
| </div> | |
| <p class="text-xs font-medium">Amber</p> | |
| <p id="amberPercent" class="text-sm font-bold">0%</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-medium text-gray-700 mb-2">Recommended Action:</h4> | |
| <div id="recommendation" class="bg-green-50 border-l-4 border-green-500 p-4 rounded"> | |
| <p class="text-gray-800"></p> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-2">Harvesting Tips:</h4> | |
| <div id="harvestTips" class="space-y-2"> | |
| <!-- Tips will be inserted here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Trichome Guide --> | |
| <div class="mt-16 bg-white rounded-xl shadow-md p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Understanding Trichome Stages</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="border rounded-lg p-4 hover:shadow-md transition duration-300"> | |
| <div class="flex items-center mb-3"> | |
| <div class="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-circle text-blue-400"></i> | |
| </div> | |
| <h4 class="font-medium">Clear Trichomes</h4> | |
| </div> | |
| <p class="text-gray-600 text-sm">The plant is still developing THC and other cannabinoids. Harvesting now will result in lower potency.</p> | |
| </div> | |
| <div class="border rounded-lg p-4 hover:shadow-md transition duration-300"> | |
| <div class="flex items-center mb-3"> | |
| <div class="h-10 w-10 bg-yellow-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-circle text-yellow-400"></i> | |
| </div> | |
| <h4 class="font-medium">Cloudy Trichomes</h4> | |
| </div> | |
| <p class="text-gray-600 text-sm">Peak THC levels. Harvest now for more cerebral, energetic effects. Ideal for sativa strains.</p> | |
| </div> | |
| <div class="border rounded-lg p-4 hover:shadow-md transition duration-300"> | |
| <div class="flex items-center mb-3"> | |
| <div class="h-10 w-10 bg-amber-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-circle text-amber-600"></i> | |
| </div> | |
| <h4 class="font-medium">Amber Trichomes</h4> | |
| </div> | |
| <p class="text-gray-600 text-sm">THC converting to CBN. More sedative effects. Ideal for indica strains or pain relief.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8 mt-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Trichome Tracker</h4> | |
| <p class="text-gray-400">Helping growers achieve the perfect harvest through trichome analysis and AI technology.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Trichome Guide</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Harvesting Tips</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Connect</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook text-xl"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400"> | |
| <p>© 2023 Trichome Tracker. For educational purposes only.</p> | |
| <p class="text-xs mt-2">Always comply with local laws regarding cannabis cultivation.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Elements | |
| const fileInput = document.getElementById('trichomePhoto'); | |
| const imagePreview = document.getElementById('imagePreview'); | |
| const previewImage = document.getElementById('previewImage'); | |
| const analyzeBtn = document.getElementById('analyzeBtn'); | |
| const loadingIndicator = document.getElementById('loadingIndicator'); | |
| const initialState = document.getElementById('initialState'); | |
| const resultsContainer = document.getElementById('resultsContainer'); | |
| // File upload handling | |
| fileInput.addEventListener('change', function(e) { | |
| if (e.target.files.length) { | |
| const file = e.target.files[0]; | |
| const reader = new FileReader(); | |
| reader.onload = function(event) { | |
| previewImage.src = event.target.result; | |
| imagePreview.classList.remove('hidden'); | |
| analyzeBtn.classList.remove('hidden'); | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| }); | |
| // Drag and drop functionality | |
| const uploadArea = document.querySelector('.file-upload'); | |
| uploadArea.addEventListener('dragover', (e) => { | |
| e.preventDefault(); | |
| uploadArea.classList.add('border-green-500', 'bg-green-100'); | |
| }); | |
| uploadArea.addEventListener('dragleave', () => { | |
| uploadArea.classList.remove('border-green-500', 'bg-green-100'); | |
| }); | |
| uploadArea.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| uploadArea.classList.remove('border-green-500', 'bg-green-100'); | |
| if (e.dataTransfer.files.length) { | |
| fileInput.files = e.dataTransfer.files; | |
| const event = new Event('change'); | |
| fileInput.dispatchEvent(event); | |
| } | |
| }); | |
| // Analyze button click | |
| analyzeBtn.addEventListener('click', function() { | |
| if (!fileInput.files.length) { | |
| alert('Please select an image first'); | |
| return; | |
| } | |
| // Show loading indicator | |
| loadingIndicator.classList.remove('hidden'); | |
| analyzeBtn.disabled = true; | |
| // Simulate API call with timeout | |
| setTimeout(function() { | |
| analyzeTrichomes(); | |
| // Hide loading and show results | |
| loadingIndicator.classList.add('hidden'); | |
| initialState.classList.add('hidden'); | |
| resultsContainer.classList.remove('hidden'); | |
| analyzeBtn.disabled = false; | |
| }, 2000); | |
| }); | |
| // Function to simulate trichome analysis | |
| function analyzeTrichomes() { | |
| // In a real app, this would call an AI API like Imagga | |
| // For demo purposes, we'll generate random results | |
| // Generate random percentages (summing to 100) | |
| const clear = Math.floor(Math.random() * 40); | |
| const cloudy = Math.floor(Math.random() * (100 - clear)); | |
| const amber = 100 - clear - cloudy; | |
| // Update the UI with the generated data | |
| document.getElementById('clearPercent').textContent = clear + '%'; | |
| document.getElementById('cloudyPercent').textContent = cloudy + '%'; | |
| document.getElementById('amberPercent').textContent = amber + '%'; | |
| // Determine maturity stage and recommendation | |
| let maturity, recommendation, tips = []; | |
| const confidence = (90 + Math.floor(Math.random() * 10)) + '% confidence'; | |
| if (amber > 50) { | |
| maturity = "Late Harvest Stage"; | |
| recommendation = "Your plant is at peak ripeness with mostly amber trichomes. Harvest now for maximum sedative effects."; | |
| tips = [ | |
| "Flush plants with plain water for 7-10 days before harvest", | |
| "Harvest in the morning after lights on", | |
| "Consider a 48-hour dark period before harvest" | |
| ]; | |
| } else if (cloudy > 50) { | |
| maturity = "Peak Harvest Stage"; | |
| recommendation = "Your plant has mostly cloudy trichomes, indicating peak THC levels. Harvest now for energetic, cerebral effects."; | |
| tips = [ | |
| "Check trichomes daily as they can change quickly", | |
| "Harvest upper buds first if lower ones need more time", | |
| "Maintain proper humidity during final days" | |
| ]; | |
| } else if (clear > 50) { | |
| maturity = "Early Development Stage"; | |
| recommendation = "Your plant is still developing with mostly clear trichomes. Wait 1-2 weeks and check again."; | |
| tips = [ | |
| "Continue normal feeding schedule", | |
| "Monitor trichomes every 3-4 days", | |
| "Ensure proper light distance to prevent bleaching" | |
| ]; | |
| } else { | |
| // Mixed stage | |
| maturity = "Transition Stage"; | |
| recommendation = "Your plant has a mix of trichome colors. For balanced effects, wait until you see about 20-30% amber trichomes."; | |
| tips = [ | |
| "Check trichomes daily for changes", | |
| "Consider harvesting in stages for different effects", | |
| "Reduce nitrogen in your nutrient mix" | |
| ]; | |
| } | |
| // Update the results | |
| document.getElementById('maturityResult').textContent = maturity; | |
| document.getElementById('confidenceLevel').textContent = confidence; | |
| document.querySelector('#recommendation p').textContent = recommendation; | |
| // Add tips | |
| const tipsContainer = document.getElementById('harvestTips'); | |
| tipsContainer.innerHTML = ''; | |
| tips.forEach(tip => { | |
| const tipElement = document.createElement('div'); | |
| tipElement.className = 'flex items-start'; | |
| tipElement.innerHTML = ` | |
| <i class="fas fa-lightbulb text-yellow-500 mt-1 mr-2"></i> | |
| <p class="text-gray-700">${tip}</p> | |
| `; | |
| tipsContainer.appendChild(tipElement); | |
| }); | |
| } | |
| // For demo purposes, simulate a click on the analyze button after 3 seconds | |
| // This would be removed in production | |
| setTimeout(() => { | |
| // Create a mock file for demo | |
| const mockFile = new File([""], "demo_trichomes.jpg"); | |
| const dataTransfer = new DataTransfer(); | |
| dataTransfer.items.add(mockFile); | |
| fileInput.files = dataTransfer.files; | |
| // Set a demo image | |
| 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"; | |
| imagePreview.classList.remove('hidden'); | |
| analyzeBtn.classList.remove('hidden'); | |
| // Trigger analysis | |
| analyzeBtn.click(); | |
| }, 3000); | |
| }); | |
| </script> | |
| <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> | |
| </html> |