analyse an image which contains regulatory data and ghs symbols and everytihng else that is on a chemical label and put bounding boxes around everything and give them fieldnames that make sense, or come from a provided list of fieldnames, so when you see "Best Before: 04/2025" you would create two fieldnames, lbl_best_before_date which contains "Best Before:" and best_before_date which contains "04/2025" and so on.. basically everything on the label needs either a static label name ( starting with lbl_ ) or it's a variable name. I can provide the list of fieldnames and suffixes and prefixes if needed.
0580361 verified | <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ChemLabel Vision Analyzer</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col"> | |
| <custom-navbar></custom-navbar> | |
| <main class="flex-grow container mx-auto px-4 py-8"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h1 class="text-3xl font-bold mb-6 text-indigo-400">Chemical Label Analyzer</h1> | |
| <p class="text-gray-300 mb-8">Upload a chemical label image to identify and extract regulatory data, GHS symbols, and other label information.</p> | |
| <div class="bg-gray-800 rounded-lg p-6 mb-8 shadow-lg"> | |
| <div class="flex flex-col md:flex-row gap-6"> | |
| <div class="flex-1"> | |
| <div class="border-2 border-dashed border-gray-600 rounded-lg p-4 mb-4 h-64 flex items-center justify-center" id="dropZone"> | |
| <div class="text-center"> | |
| <i data-feather="upload-cloud" class="w-12 h-12 mx-auto text-gray-400 mb-2"></i> | |
| <p class="text-gray-300">Drag & drop your chemical label image here</p> | |
| <p class="text-gray-400 text-sm mt-2">or</p> | |
| <input type="file" id="fileInput" accept="image/*" class="hidden"> | |
| <button onclick="document.getElementById('fileInput').click()" class="mt-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-md text-white">Select File</button> | |
| </div> | |
| </div> | |
| <div class="relative hidden" id="imagePreviewContainer"> | |
| <img id="imagePreview" class="max-w-full rounded-lg" alt="Preview"> | |
| <canvas id="annotationCanvas" class="absolute top-0 left-0 w-full h-full"></canvas> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="bg-gray-700 rounded-lg p-4 h-64 overflow-y-auto"> | |
| <h3 class="text-lg font-semibold mb-3 text-indigo-300">Detected Fields</h3> | |
| <div class="space-y-2" id="detectedFields"> | |
| <div class="bg-gray-600 rounded p-2 hidden" id="templateField"> | |
| <div class="flex justify-between items-start"> | |
| <div class="flex-1"> | |
| <span class="font-mono text-sm text-indigo-200" id="fieldName">field_name</span> | |
| <div class="text-gray-200" id="fieldValue">Field value</div> | |
| </div> | |
| <button class="text-gray-400 hover:text-red-400" onclick="this.parentElement.parentElement.remove()"> | |
| <i data-feather="x" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <p class="text-gray-400 italic" id="noFieldsMessage">No fields detected yet. Upload an image to begin analysis.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button id="analyzeBtn" class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 rounded-md text-white font-medium disabled:opacity-50" disabled> | |
| Analyze Label | |
| </button> | |
| <button id="exportBtn" class="ml-4 px-6 py-3 bg-gray-600 hover:bg-gray-700 rounded-md text-white font-medium disabled:opacity-50" disabled> | |
| Export Data | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-6 shadow-lg"> | |
| <h2 class="text-xl font-bold mb-4 text-indigo-300">Common Field Examples</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="bg-gray-700 p-3 rounded"> | |
| <h3 class="font-semibold text-gray-200 mb-1">Product Information</h3> | |
| <ul class="text-gray-300 text-sm space-y-1"> | |
| <li><span class="font-mono text-indigo-200">lbl_product_name</span>: "Product Name:"</li> | |
| <li><span class="font-mono text-indigo-200">product_name</span>: "Acetic Acid"</li> | |
| <li><span class="font-mono text-indigo-200">lbl_manufacturer</span>: "Manufactured by:"</li> | |
| <li><span class="font-mono text-indigo-200">manufacturer</span>: "ChemCorp Inc."</li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-700 p-3 rounded"> | |
| <h3 class="font-semibold text-gray-200 mb-1">Dates</h3> | |
| <ul class="text-gray-300 text-sm space-y-1"> | |
| <li><span class="font-mono text-indigo-200">lbl_best_before</span>: "Best Before:"</li> | |
| <li><span class="font-mono text-indigo-200">best_before_date</span>: "04/2025"</li> | |
| <li><span class="font-mono text-indigo-200">lbl_manufacture_date</span>: "Manufactured on:"</li> | |
| <li><span class="font-mono text-indigo-200">manufacture_date</span>: "01/2023"</li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-700 p-3 rounded"> | |
| <h3 class="font-semibold text-gray-200 mb-1">GHS Symbols</h3> | |
| <ul class="text-gray-300 text-sm space-y-1"> | |
| <li><span class="font-mono text-indigo-200">ghs_flame</span>: "Flammable"</li> | |
| <li><span class="font-mono text-indigo-200">ghs_corrosive</span>: "Corrosive"</li> | |
| <li><span class="font-mono text-indigo-200">ghs_toxic</span>: "Toxic"</li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-700 p-3 rounded"> | |
| <h3 class="font-semibold text-gray-200 mb-1">Regulatory Info</h3> | |
| <ul class="text-gray-300 text-sm space-y-1"> | |
| <li><span class="font-mono text-indigo-200">lbl_cas_number</span>: "CAS Number:"</li> | |
| <li><span class="font-mono text-indigo-200">cas_number</span>: "64-19-7"</li> | |
| <li><span class="font-mono text-indigo-200">lbl_un_number</span>: "UN Number:"</li> | |
| <li><span class="font-mono text-indigo-200">un_number</span>: "UN2789"</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |