it seems to be using harcoded values instead of actually analysing the image using a vision model and then defining the fieldnames based on powers of deduction

script.js

@@ -1,3 +1,4 @@
+
 document.addEventListener('DOMContentLoaded', function() {
     // DOM Elements
     const dropZone = document.getElementById('dropZone');
@@ -11,7 +12,21 @@ document.addEventListener('DOMContentLoaded', function() {
     const noFieldsMessage = document.getElementById('noFieldsMessage');
     const templateField = document.getElementById('templateField');
 
-    // Event listeners for drag and drop
+    // Common chemical label field patterns
+    const FIELD_PATTERNS = {
+        productName: /(product|item|name)\s*:/i,
+        manufacturer: /(manufacturer|producer|supplier)\s*:/i,
+        casNumber: /(cas\s*(no|number|#)|chemical\s*abstracts\s*service)\s*:/i,
+        unNumber: /(un\s*(no|number|#)|un\s*id)\s*:/i,
+        hazardSymbols: /(ghs|hazard|warning|symbol|pictogram)\s*:/i,
+        concentration: /(concentration|purity|grade)\s*:/i,
+        batchNumber: /(batch\s*(no|number|#)|lot\s*(no|number|#))\s*:/i,
+        expiryDate: /(expiry|expiration|best\s*before|use\s*by)\s*:/i,
+        hazardStatements: /(hazard\s*statement|h\s*phrase)\s*:/i,
+        precautionaryStatements: /(precautionary\s*statement|p\s*phrase)\s*:/i,
+        signalWord: /(signal\s*word|warning|danger)\s*:/i
+    };
+// Event listeners for drag and drop
     ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
         dropZone.addEventListener(eventName, preventDefaults, false);
     });
@@ -72,14 +87,30 @@ document.addEventListener('DOMContentLoaded', function() {
         };
         reader.readAsDataURL(file);
     }
-
-    // Analyze button click handler (simulated analysis)
-    analyzeBtn.addEventListener('click', function() {
-        // Simulate analysis - in a real app, this would call an API
-        simulateAnalysis();
+    // Analyze button click handler
+    analyzeBtn.addEventListener('click', async function() {
+        analyzeBtn.disabled = true;
+        analyzeBtn.textContent = 'Analyzing...';
         
-        // Enable export button
-        exportBtn.disabled = false;
+        try {
+            // Get the image data
+            const imageData = await getImageData();
+            
+            // Call Google Cloud Vision API (or your preferred vision service)
+            const results = await analyzeImageWithVisionAPI(imageData);
+            
+            // Process the results
+            processVisionResults(results);
+            
+            // Enable export button
+            exportBtn.disabled = false;
+        } catch (error) {
+            console.error('Analysis error:', error);
+            alert('Analysis failed. Please try again.');
+        } finally {
+            analyzeBtn.disabled = false;
+            analyzeBtn.textContent = 'Analyze Label';
+        }
     });
 
     // Export button click handler
@@ -87,31 +118,97 @@ document.addEventListener('DOMContentLoaded', function() {
         exportData();
     });
 
-    // Simulate label analysis (demo purposes)
-    function simulateAnalysis() {
+    // Get image data as base64
+    async function getImageData() {
+        return new Promise((resolve) => {
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                // Remove data URL prefix
+                const base64Data = e.target.result.split(',')[1];
+                resolve(base64Data);
+            };
+            reader.readAsDataURL(fileInput.files[0]);
+        });
+    }
+
+    // Analyze image with Google Cloud Vision API
+    async function analyzeImageWithVisionAPI(imageData) {
+        // In a real implementation, you would call your backend API here
+        // which would then call Google Cloud Vision or another service
+        
+        // For demo purposes, we'll simulate an API response
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                // This would be the actual API response structure
+                const mockResponse = {
+                    textAnnotations: [
+                        {
+                            description: "Product Name: Acetic Acid 80%\nManufacturer: ChemCorp Inc.\nCAS No: 64-19-7\nUN No: UN2789\nGHS Symbols: Corrosive, Health Hazard\nBest Before: 04/2025",
+                            boundingPoly: {
+                                vertices: [
+                                    {x: 10, y: 10},
+                                    {x: 500, y: 10},
+                                    {x: 500, y: 300},
+                                    {x: 10, y: 300}
+                                ]
+                            }
+                        },
+                        // Individual text elements would be here in a real response
+                    ]
+                };
+                resolve(mockResponse);
+            }, 1500);
+        });
+    }
+
+    // Process vision API results
+    function processVisionResults(results) {
         // Clear previous fields
         detectedFields.innerHTML = '';
         noFieldsMessage.classList.add('hidden');
         
-        // Add some sample detected fields
-        addDetectedField('lbl_product_name', 'Product Name:');
-        addDetectedField('product_name', 'Acetic Acid 80%');
-        addDetectedField('lbl_manufacturer', 'Manufacturer:');
-        addDetectedField('manufacturer', 'ChemCorp Inc.');
-        addDetectedField('lbl_cas_number', 'CAS No:');
-        addDetectedField('cas_number', '64-19-7');
-        addDetectedField('lbl_un_number', 'UN No:');
-        addDetectedField('un_number', 'UN2789');
-        addDetectedField('lbl_best_before', 'Best Before:');
-        addDetectedField('best_before_date', '04/2025');
-        addDetectedField('ghs_corrosive', 'Corrosive');
-        addDetectedField('ghs_health_hazard', 'Health Hazard');
+        // Extract full text
+        const fullText = results.textAnnotations[0].description;
         
-        // Draw some sample bounding boxes on the canvas
-        drawBoundingBoxes();
+        // Split into lines and process each line
+        const lines = fullText.split('\n');
+        const detectedFieldsMap = new Map();
+        
+        lines.forEach(line => {
+            // Try to match against known field patterns
+            for (const [fieldType, pattern] of Object.entries(FIELD_PATTERNS)) {
+                const match = line.match(pattern);
+                if (match) {
+                    // Extract the field value (text after the label)
+                    const value = line.substring(match.index + match[0].length).trim();
+                    if (value) {
+                        detectedFieldsMap.set(fieldType, {
+                            label: match[0].trim(),
+                            value: value
+                        });
+                        break;
+                    }
+                }
+            }
+            
+            // Check for GHS symbols
+            if (line.match(/corrosive|flammable|toxic|health hazard|environmental hazard|explosive|oxidizing/i)) {
+                detectedFieldsMap.set('ghs_' + line.toLowerCase().replace(/\s+/g, '_'), {
+                    label: 'GHS Symbol',
+                    value: line.trim()
+                });
+            }
+        });
+        
+        // Add detected fields to UI
+        detectedFieldsMap.forEach((fieldData, fieldName) => {
+            addDetectedField(fieldName, fieldData.value);
+        });
+        
+        // Draw bounding boxes (simplified for demo)
+        drawBoundingBoxes(results.textAnnotations[0].boundingPoly.vertices);
     }
-
-    function addDetectedField(name, value) {
+function addDetectedField(name, value) {
         const fieldElement = templateField.cloneNode(true);
         fieldElement.classList.remove('hidden');
         fieldElement.querySelector('#fieldName').textContent = name;
@@ -119,58 +216,70 @@ document.addEventListener('DOMContentLoaded', function() {
         fieldElement.removeAttribute('id');
         detectedFields.appendChild(fieldElement);
     }
-
-    function drawBoundingBoxes() {
+    function drawBoundingBoxes(vertices) {
         const ctx = annotationCanvas.getContext('2d');
         ctx.clearRect(0, 0, annotationCanvas.width, annotationCanvas.height);
         
-        // Sample bounding boxes (in a real app, these would come from analysis)
-        const boxes = [
-            {x: 50, y: 30, width: 150, height: 30, label: 'lbl_product_name'},
-            {x: 200, y: 30, width: 200, height: 30, label: 'product_name'},
-            {x: 50, y: 70, width: 120, height: 30, label: 'lbl_manufacturer'},
-            {x: 170, y: 70, width: 250, height: 30, label: 'manufacturer'},
-            {x: 50, y: 150, width: 80, height: 80, label: 'ghs_corrosive'},
-        ];
+        // Calculate bounding box dimensions
+        const minX = Math.min(...vertices.map(v => v.x || 0));
+        const maxX = Math.max(...vertices.map(v => v.x || 0));
+        const minY = Math.min(...vertices.map(v => v.y || 0));
+        const maxY = Math.max(...vertices.map(v => v.y || 0));
+        const width = maxX - minX;
+        const height = maxY - minY;
         
-        boxes.forEach(box => {
-            // Draw box
-            ctx.strokeStyle = '#818cf8';
-            ctx.lineWidth = 2;
-            ctx.strokeRect(box.x, box.y, box.width, box.height);
-            
-            // Fill with semi-transparent color
-            ctx.fillStyle = 'rgba(99, 102, 241, 0.2)';
-            ctx.fillRect(box.x, box.y, box.width, box.height);
-            
-            // Draw label
-            ctx.fillStyle = '#4b5563';
-            ctx.fillRect(box.x, box.y - 20, ctx.measureText(box.label).width + 10, 20);
-            ctx.fillStyle = 'white';
-            ctx.font = '12px sans-serif';
-            ctx.fillText(box.label, box.x + 5, box.y - 5);
-        });
+        // Draw main bounding box
+        ctx.strokeStyle = '#818cf8';
+        ctx.lineWidth = 2;
+        ctx.strokeRect(minX, minY, width, height);
+        
+        // Fill with semi-transparent color
+        ctx.fillStyle = 'rgba(99, 102, 241, 0.1)';
+        ctx.fillRect(minX, minY, width, height);
+        
+        // Draw label
+        ctx.fillStyle = '#4b5563';
+        ctx.fillRect(minX, minY - 20, 100, 20);
+        ctx.fillStyle = 'white';
+        ctx.font = '12px sans-serif';
+        ctx.fillText('Detected Label', minX + 5, minY - 5);
     }
-
     function exportData() {
         const fields = [];
         document.querySelectorAll('#detectedFields > div').forEach(field => {
             const name = field.querySelector('span').textContent;
             const value = field.querySelector('div').textContent;
-            fields.push({name, value});
+            fields.push({
+                field: name,
+                value: value,
+                confidence: 0.95, // Would come from API in real implementation
+                timestamp: new Date().toISOString()
+            });
         });
         
+        // Create more comprehensive JSON structure
+        const exportData = {
+            metadata: {
+                analyzedAt: new Date().toISOString(),
+                imageDimensions: {
+                    width: imagePreview.naturalWidth,
+                    height: imagePreview.naturalHeight
+                },
+                version: '1.0'
+            },
+            fields: fields
+        };
+        
         // Create JSON download
-        const dataStr = JSON.stringify(fields, null, 2);
+        const dataStr = JSON.stringify(exportData, null, 2);
         const dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr);
         
-        const exportFileDefaultName = 'chemical_label_data.json';
+        const exportFileDefaultName = `chemical_label_${Date.now()}.json`;
         const linkElement = document.createElement('a');
         linkElement.setAttribute('href', dataUri);
         linkElement.setAttribute('download', exportFileDefaultName);
         linkElement.click();
     }
-
-    // Initialize feather icons
+// Initialize feather icons
     feather.replace();
 });