small changes

content_quality_tool_public/static/css/attr-extraction.css

@@ -15,21 +15,21 @@
     --zebra: #fafbfc;
 }
 
-* { box-sizing: border-box; }
+/* * { box-sizing: border-box; } */
 html, body { height: 100%; }
 body {
     margin: 0;
-    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
+    /* font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji"; */
     color: var(--text);
     background: #ffffff; /* White background */
     letter-spacing: .2px;
 }
 
-.container { max-width: 1200px; margin: 24px auto 80px; padding: 0 20px; }
+.container { max-width: 1200px; margin: 24px auto 80px; padding: 0 20px; font-size: 12px; }
 
 header.hero { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; margin-bottom: 20px; }
 .title { display: flex; align-items: center; gap: 14px; }
-.title-logo { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--brand), var(--accent)); display: grid; place-items: center; box-shadow: var(--shadow); }
+.title-logo { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--brand), var(--text)); display: grid; place-items: center; box-shadow: var(--shadow); }
 .title-logo svg { filter: drop-shadow(0 2px 6px rgba(0,0,0,.15)); }
 h1 { font-size: 1.6rem; margin: 0; letter-spacing: .3px; }
 .sub { color: var(--muted); font-size: .95rem; margin-top: 4px; }
@@ -70,7 +70,7 @@ button:hover { transform: translateY(-1px); border-color: #cbd5e1; }
 .list { display: grid; gap: 12px; }
 .product { display: grid; grid-template-columns: 64px 1fr 1fr auto; gap: 12px; align-items: start; padding: 10px; border-radius: 12px; background: #ffffff; border: 1px solid var(--border); cursor: pointer; }
 .product:hover { border-color: var(--row-hover); }
-.product.selected { outline: 2px solid var(--accent); box-shadow: 0 0 0 3px rgba(20,184,166,.15); }
+.product.selected { outline: 2px solid var(--text); box-shadow: 0 0 0 3px rgba(20,184,166,.15); }
 
 .thumb { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; position: relative; background: #f3f4f6; border:1px solid var(--border); }
 .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@@ -93,8 +93,8 @@ input[type="checkbox"] { width: 18px; height: 18px; }
 .chip { background: var(--chip); border: 1px solid var(--border); border-radius: 999px; padding: 6px 9px; font-size: .86rem; display: inline-flex; gap: 8px; align-items: center; color: #1f2937; }
 .chip .k { color:#475569; }
 .chip .v { color:#111827; font-weight:600; }
-.chip.new { outline: 2px solid var(--accent); box-shadow: 0 0 0 3px rgba(20,184,166,.15); }
-.chip.new::after { content: 'NEW'; margin-left: 6px; font-size: .68rem; background: var(--accent); color: #07221f; padding: 3px 6px; border-radius: 999px; font-weight: 900; letter-spacing:.4px; }
+.chip.new { outline: 2px solid var(--text); box-shadow: 0 0 0 3px rgba(20,184,166,.15); }
+/* .chip.new::after { content: 'NEW'; margin-left: 6px; font-size: .68rem; background: var(--text); color: #07221f; padding: 3px 6px; border-radius: 999px; font-weight: 900; letter-spacing:.4px; } */
 
 /* Table layout */
 .table-wrap { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
@@ -112,7 +112,7 @@ td.thumb-cell { width: 60px; }
 
 /* Detail rows for table */
 .detail-row td { background:#ffffff; }
-.detail-content { padding: 10px 6px; border-left: 4px solid var(--accent); border-radius: 8px; background:#f8fafc; }
+.detail-content { padding: 10px 6px; border-left: 4px solid var(--text); border-radius: 8px; background:#f8fafc; }
 .detail-content .section-title { display:flex; align-items:center; gap:10px; margin: 6px 0 8px; color: var(--muted); }
 .summary {
     display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px;
@@ -219,7 +219,7 @@ td.thumb-cell { width: 60px; }
 /* 
 /* General layout */
 .attribute-selectors {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
     max-width: none;
     margin: 5px auto;
     padding: 15px;
@@ -243,7 +243,7 @@ td.thumb-cell { width: 60px; }
 
 /* Attribute group block */
 .attribute-chip-group {
-    margin-bottom: 25px;
+    margin-bottom: 15px;
 }
 
 /* Attribute headers */
@@ -251,7 +251,7 @@ td.thumb-cell { width: 60px; }
     font-size: 1em;
     font-weight: 500;
     color: #555;
-    margin-bottom: 10px;
+    margin-bottom: 5px;
 }
 
 /* Chips container layout */

content_quality_tool_public/static/js/attr-extraction.js

@@ -94,7 +94,7 @@ let selectedIds = new Set();
 let selectedProductsWithAttributes = [];
 let selectedAttributes = new Array();
 const lastSeen = new Map(); // per-product memory for NEW highlighting (product_id -> maps)
-let layoutMode = 'cards'; // 'cards' | 'table'
+let layoutMode = 'table'; // 'cards' | 'table'
 
 // --- Helpers ---
 const $ = (sel) => document.querySelector(sel);
@@ -938,7 +938,7 @@ document.getElementById('uploadStart').addEventListener('click', startUpload);
 
 // --- Pagination state ---
 let page = 1;
-let pageSize = 5; // default rows per page
+let pageSize = 50; // default rows per page
 
 function totalPages() {
   return Math.max(1, Math.ceil(PRODUCT_BASE.length / pageSize));

content_quality_tool_public/templates/product-attributes.html

@@ -326,6 +326,7 @@ $(document).ready(function () {
     });
 
     var API_DATA = []
+    let product_types = [];
     
     
     document.addEventListener('DOMContentLoaded', function () {