changes for ocr and visuals

content_quality_tool_public/static/css/attr-extraction.css

@@ -402,4 +402,8 @@ td{
 #mandatory-attributes {
     min-width: 200px;
     width: auto !important; /* Override inline style */
+}
+
+.select2-container--default .select2-selection--multiple .select2-selection__clear{
+    color: red;
 }

content_quality_tool_public/static/js/attr-extraction.js

@@ -125,8 +125,9 @@ function renderChips(container, obj, memoryMap) {
     const chip = el('span', 'chip');
     const kEl = el('span', 'k'); kEl.textContent = k + ':';
     // console.log("v",v);
-    const vEl = el('span', 'v'); vEl.textContent = ' ' + String(v[0].value)  +' (' +String(v[0].source) + ')';
+    const vEl = el('span', 'v'); vEl.textContent = ' ' + String(v[0]?.value)  +' (' +String(v[0]?.source) + ')';
     chip.appendChild(kEl); chip.appendChild(vEl);
+    console.log("k",k);
     const was = memoryMap.get(k);
     if (was === undefined || was !== v) chip.classList.add('new');
     container.appendChild(chip);
@@ -206,9 +207,10 @@ function createProductCard(p) {
     const lbl = el('span'); lbl.textContent = 'Select Product';
     right.appendChild(cb); right.appendChild(lbl);
 
+    
     // --- Dynamic Attribute Selects ---
     const attrContainer = el('div', 'attribute-selectors');
-
+if(p.product_type_details.length > 0){
     // Find all mandatory and non-mandatory attributes for this product
     const mandatoryAttributes = p.product_type_details?.filter(a => a.is_mandatory === 'Yes') || [];
     const optionalAttributes = p.product_type_details?.filter(a => a.is_mandatory !== 'Yes') || [];
@@ -280,12 +282,16 @@ function createProductCard(p) {
         // For simplicity, we assume the data from PRODUCT_BASE already includes selected attributes if a selection exists
         // (which it won't in this case, so they default to all/empty)
     }
+    }
 
     const inline = el('div', 'attr-inline');
     inline.dataset.pid = p.item_id; // use item_id for mapping
-
+    
     row.appendChild(left); row.appendChild(mid);
+    if(p.product_type_details.length > 0){
+        console.log("IN ");
         row.appendChild(attrContainer); // Append the new attribute selectors container
+    }    
     row.appendChild(right);
     // if (p.mandatoryAttributes && p.mandatoryAttributes.length > 0) { 
       // const hr = el('hr');
@@ -578,14 +584,15 @@ function renderProductsTable(items = getCurrentSlice()) {
             detailCell.appendChild(attrContainer);
             detailRow.appendChild(detailCell);
 
-
-            // 3. TOGGLE BUTTON (in the main row)
-            const tdAttr = document.createElement('td'); 
-            const toggleButton = document.createElement('button');
-            toggleButton.textContent = 'Configure';
-            toggleButton.classList.add('btn', 'btn-sm', 'btn-info', 'attribute-toggle-btn');
-            tdAttr.appendChild(toggleButton);
-            tr.appendChild(tdAttr);
+            if(p.product_type_details.length > 0){
+                // 3. TOGGLE BUTTON (in the main row)
+                const tdAttr = document.createElement('td'); 
+                const toggleButton = document.createElement('button');
+                toggleButton.textContent = 'Configure';
+                toggleButton.classList.add('btn', 'btn-sm', 'btn-info', 'attribute-toggle-btn');
+                tdAttr.appendChild(toggleButton);
+                tr.appendChild(tdAttr);
+            
 
 
             // 4. EVENT LISTENERS
@@ -614,6 +621,10 @@ function renderProductsTable(items = getCurrentSlice()) {
                     cb.dispatchEvent(new Event('change')); 
                 } 
             });
+            }else{
+                const tdAttr = document.createElement('td'); 
+                tr.appendChild(tdAttr);
+            }
             
             // 5. Append Rows to TBODY
             tbody.appendChild(tr);
@@ -646,7 +657,7 @@ function renderInlineForCards() {
         
         const res = findApiResultForProduct(p, idx, api);
         const pid = p.item_id;
-        if (!lastSeen.has(pid)) lastSeen.set(pid, { mandatory: new Map(), additional: new Map() });
+        if (!lastSeen.has(pid)) lastSeen.set(pid, { mandatory: new Map(), additional: new Map(), ocr_results: new Map(), visual_results: new Map() });
         const mem = lastSeen.get(pid);
 
         // Build sections
@@ -655,16 +666,28 @@ function renderInlineForCards() {
         const addTitle = el('div', 'section-title'); addTitle.innerHTML = '<strong>Additional</strong>';
         const addChips = el('div', 'chips');
 
+        const addOcr = el('div', 'section-title'); addOcr.innerHTML = '<strong>Additional</strong>';
+        const ocrChips = el('div', 'chips');
+        const addVisual = el('div', 'section-title'); addVisual.innerHTML = '<strong>Additional</strong>';
+        const visualChips = el('div', 'chips');
+        
+
         const mandCount = renderChips(manChips, res?.mandatory || {}, mem.mandatory);
         const addCount = renderChips(addChips, res?.additional || {}, mem.additional);
+        const ocrCount = renderChips(ocrChips, res?.ocr_results || {}, mem?.ocr_results);
+        const visualCount = renderChips(visualChips, res?.visual_results || {}, mem?.visual_results);
 
         const counts = el('div'); counts.style.display = 'flex'; counts.style.gap = '8px'; counts.style.margin = '8px 0 0';
         const c1 = el('span', 'pill'); c1.textContent = `Mandatory: ${mandCount}`;
         const c2 = el('span', 'pill'); c2.textContent = `Additional: ${addCount}`;
-        counts.appendChild(c1); counts.appendChild(c2);
+        const c3 = el('span', 'pill'); c3.textContent = `OCR: ${ocrCount}`;
+        const c4 = el('span', 'pill'); c4.textContent = `Visuals: ${visualCount}`;
+        counts.appendChild(c1); counts.appendChild(c2);  counts.appendChild(c3);  counts.appendChild(c4);
 
         inline.appendChild(manTitle); inline.appendChild(manChips);
         inline.appendChild(addTitle); inline.appendChild(addChips);
+        inline.appendChild(addOcr); inline.appendChild(ocrChips);
+        inline.appendChild(addVisual); inline.appendChild(visualChips);
         inline.appendChild(counts);
     });
 
@@ -690,7 +713,7 @@ function renderInlineForTable() {
         
         const res = findApiResultForProduct(p, idx, api);
         const pid = p.item_id;
-        if (!lastSeen.has(pid)) lastSeen.set(pid, { mandatory: new Map(), additional: new Map() });
+        if (!lastSeen.has(pid)) lastSeen.set(pid, { mandatory: new Map(), additional: new Map(), ocr_results: new Map(), visual_results: new Map() });
         const mem = lastSeen.get(pid);
 
         const tbody = table.querySelector('tbody');
@@ -707,17 +730,27 @@ function renderInlineForTable() {
         const manChips = el('div', 'chips');
         const addTitle = el('div', 'section-title'); addTitle.innerHTML = '<strong>Additional</strong>';
         const addChips = el('div', 'chips');
+        const addOcr = el('div', 'section-title'); addOcr.innerHTML = '<strong>Ocr</strong>';
+        const ocrChips = el('div', 'chips');
+        const addVisuals = el('div', 'section-title'); addVisuals.innerHTML = '<strong>Visuals</strong>';
+        const visualsChips = el('div', 'chips');
 
         const mandCount = renderChips(manChips, res?.mandatory || {}, mem.mandatory);
         const addCount = renderChips(addChips, res?.additional || {}, mem.additional);
+        const ocrCount = renderChips(ocrChips, res?.ocr_results || {}, mem.ocr_results);
+        const visualCount = renderChips(visualsChips, res?.visual_results || {}, mem.visual_results);
 
         const counts = el('div'); counts.style.display = 'flex'; counts.style.gap = '8px'; counts.style.margin = '8px 0 0';
         const c1 = el('span', 'pill'); c1.textContent = `Mandatory: ${mandCount}`;
         const c2 = el('span', 'pill'); c2.textContent = `Additional: ${addCount}`;
-        counts.appendChild(c1); counts.appendChild(c2);
+        const c3 = el('span', 'pill'); c3.textContent = `Ocr: ${ocrCount}`;
+        const c4 = el('span', 'pill'); c4.textContent = `Visuals: ${visualCount}`;
+        counts.appendChild(c1); counts.appendChild(c2); counts.appendChild(c3); counts.appendChild(c4);
 
         content.appendChild(manTitle); content.appendChild(manChips);
         content.appendChild(addTitle); content.appendChild(addChips);
+        content.appendChild(addOcr); content.appendChild(ocrChips);
+        content.appendChild(addVisuals); content.appendChild(visualsChips);
         content.appendChild(counts);
         td.appendChild(content); detail.appendChild(td);
 

content_quality_tool_public/templates/product-attributes.html

@@ -60,7 +60,8 @@
                 <div class="container-fluid"> <!--begin::Row-->
                     <div class="row">
                         <div class="col-sm-6">
-                            <h3 class="mb-0">🏷️ Product Attributes</h3>
+                            <h3 class="mb-0">🏷️ Product Attributes &nbsp;<span><a href="{{ MEDIA_URL }} ../examples/product_attribute_template.xlsx" download><i class="bi bi-download"></i></a></span></h3> 
+                            
                         </div>
                         <div class="col-sm-6">
                             <ol class="breadcrumb float-sm-end">