feat: different (random) colors per label group (#3)

- feat: different (random) colors per label group (23a7073e74dd24194470c41520494f9d92fca6db)


Co-authored-by: Joshua <[email protected]>

index.html

@@ -41,12 +41,11 @@
         background-color: #4f46e5;
       }
       .overlay {
-        background-color: rgba(255, 255, 0, 0.3);
-        border: 2px solid #fbbf24;
+        border: 2px solid var(--overlay-color);
         transition: background-color 0.2s;
       }
       .overlay:hover {
-        background-color: rgba(255, 255, 0, 0.7);
+        background-color: rgba(var(--overlay-color-rgb), 0.7);
       }
     </style>
   </head>
@@ -336,17 +335,17 @@
           doclingOutput.textContent = fullText;
 
           // Parse loc tags and create overlays
-          const locRegex = /<loc_(\d+)>/g;
-          const locMatches = [];
+          const tagRegex = /<(\w+)><loc_(\d+)><loc_(\d+)><loc_(\d+)><loc_(\d+)>/g;
+          const overlays = [];
           let match;
-          while ((match = locRegex.exec(fullText)) !== null) {
-            locMatches.push(parseInt(match[1]));
+          while ((match = tagRegex.exec(fullText)) !== null) {
+            const tagType = match[1];
+            const locs = [parseInt(match[2]), parseInt(match[3]), parseInt(match[4]), parseInt(match[5])];
+            overlays.push({ tagType, locs });
           }
-          const overlays = [];
-          for (let i = 0; i < locMatches.length; i += 4) {
-            if (i + 3 < locMatches.length) {
-              overlays.push(locMatches.slice(i, i + 4));
-            }
+          const colorMap = {};
+          function getRandomColor() {
+            return `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
           }
           const imgRect = imagePreview.getBoundingClientRect();
           const containerRect = imagePreviewContainer.getBoundingClientRect();
@@ -354,13 +353,18 @@
           const imageOffsetTop = imgRect.top - containerRect.top;
           const scaleX = imgRect.width / currentImageWidth;
           const scaleY = imgRect.height / currentImageHeight;
-          overlays.forEach(([leftLoc, topLoc, rightLoc, bottomLoc]) => {
+          overlays.forEach(({ tagType, locs }) => {
+            const color = colorMap[tagType] || (colorMap[tagType] = getRandomColor());
+            const [leftLoc, topLoc, rightLoc, bottomLoc] = locs;
             const left = imageOffsetLeft + (leftLoc / 500) * currentImageWidth * scaleX;
             const top = imageOffsetTop + (topLoc / 500) * currentImageHeight * scaleY;
             const width = ((rightLoc - leftLoc) / 500) * currentImageWidth * scaleX;
             const height = ((bottomLoc - topLoc) / 500) * currentImageHeight * scaleY;
             const overlay = document.createElement("div");
             overlay.className = "overlay";
+            overlay.style.setProperty('--overlay-color', color);
+            const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+            overlay.style.setProperty('--overlay-color-rgb', `${rgbMatch[1]},${rgbMatch[2]},${rgbMatch[3]}`);
             overlay.style.position = "absolute";
             overlay.style.left = left + "px";
             overlay.style.top = top + "px";