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 | /* Custom styles for the chemical label analyzer */ | |
| #dropZone { | |
| transition: all 0.3s ease; | |
| } | |
| #dropZone.drag-over { | |
| border-color: #818cf8; | |
| background-color: rgba(99, 102, 241, 0.1); | |
| } | |
| .annotation-box { | |
| position: absolute; | |
| border: 2px solid #818cf8; | |
| background-color: rgba(99, 102, 241, 0.2); | |
| cursor: move; | |
| z-index: 10; | |
| } | |
| .annotation-box:hover { | |
| background-color: rgba(99, 102, 241, 0.3); | |
| } | |
| .annotation-box.selected { | |
| border-color: #f472b6; | |
| background-color: rgba(244, 114, 182, 0.3); | |
| } | |
| .annotation-label { | |
| position: absolute; | |
| top: -24px; | |
| left: 0; | |
| padding: 2px 6px; | |
| background-color: #4b5563; | |
| color: white; | |
| font-size: 0.75rem; | |
| border-radius: 4px 4px 0 0; | |
| pointer-events: none; | |
| } | |
| /* Custom scrollbar for detected fields */ | |
| #detectedFields::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| #detectedFields::-webkit-scrollbar-track { | |
| background: #4b5563; | |
| border-radius: 3px; | |
| } | |
| #detectedFields::-webkit-scrollbar-thumb { | |
| background: #818cf8; | |
| border-radius: 3px; | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| #imagePreviewContainer { | |
| margin-bottom: 1rem; | |
| } | |
| } |