CVAuto：存取标记对错的框，光标上框及关键点和连线等高亮、其它框只显示半透明框，优化 UI 和代码

TommyLemon · TommyLemon · commit 9488d2f550c0 · 2025-07-22T00:18:08.000+08:00
diff --git a/APIJSON-Java-Server/APIJSONBoot-MultiDataSource/src/main/resources/static/cv/apijson/JSONResponse.js b/APIJSON-Java-Server/APIJSONBoot-MultiDataSource/src/main/resources/static/cv/apijson/JSONResponse.js
@@ -2462,7 +2462,7 @@ var JSONResponse = {
     return item.bbox || item.box || item
   },
   getScore: function (item) {
-    return item.score || item.probability || item.possibility || item.feasibility || item.eventuality || item.odds || item.prob || item.possib || item.feasib || item.eventual;
+    return item.score || item.confidence || item.probability || item.possibility || item.feasibility || item.eventuality || item.odds || item.conf || item.prob || item.possib || item.feasib || item.eventual;
   },
 
   drawDetections: function(canvas, detection, options, img, ctx) {
@@ -2485,11 +2485,11 @@ var JSONResponse = {
     ctx.textBaseline = 'top';
 
     const placedLabels = [];
-    const rotateBoxes = options.rotateBoxes || false;
-    const rotateText = options.rotateText || false;
-    const showLabelBackground = options.labelBackground || false;
-    const hoverBoxId = options.hoverBoxId || null;
-    const visiblePaths = options.visiblePaths || null;
+    const rotateBoxes = options.rotateBoxes;
+    const rotateText = options.rotateText;
+    const showLabelBackground = options.labelBackground;
+    const hoverBoxId = options.hoverBoxId;
+    const visiblePaths = options.visiblePaths;
     const stage = options.stage;
     const isDiff = stage === 'diff';
     const markable = options.markable || stage !== 'before';
@@ -2504,7 +2504,7 @@ var JSONResponse = {
     // Draw bboxes
     var bboxes = JSONResponse.getBboxes(detection) || []
     bboxes?.forEach((item, index) => {
-      const isHovered = item.id === hoverBoxId;
+      const isHovered = index === hoverBoxId;
       const visible = ! visiblePaths || visiblePaths.length <= 0 || visiblePaths.includes(item.path || item.id);
       if (! visible) {
         return;
@@ -2527,9 +2527,9 @@ var JSONResponse = {
       }
 
       const [r, g, b, a] = color || [0, 255, 0, 255];
-      const rgba = `rgba(${r}, ${g}, ${b}, ${Math.min(0.5, a / 255)})`;
+      const rgba = `rgba(${r}, ${g}, ${b}, ${hoverBoxId != null || ! isHovered ? 0.3 : Math.min(0.5, a < 1 ? a : a / 255)})`;
 
-      const reversedRgba = `rgba(${255 - r}, ${255 - g}, ${255 - b}`; // , 0.2`; // ${1 - a/255})`;
+      const reversedRgba = `rgba(${255 - r}, ${255 - g}, ${255 - b}`, ${isHovered || hoverBoxId == null ? 1 : 0.3})`;
       // const luma = 0.299 * r + 0.587 * g + 0.114 * b;
       const backgroundFill = rgba; // 还是有些看不清 luma > 186 ? 'rgba(0, 0, 0, 0.5)' : 'rgba(255, 255, 255, 0.5)';
 
@@ -2548,6 +2548,10 @@ var JSONResponse = {
         ctx.restore();
       }
 
+      if (hoverBoxId != null && ! isHovered) {
+        return
+      }
+
       // Label
       const label = (isDiff ? (item['@before'] ? '- ' : '+ ') : '') + `${item.ocr || item.label || ''}-${item.id || ''} ${((JSONResponse.getScore(item) || 0)*100).toFixed(0)}%${angle == 0 ? '' : ' ' + Math.round(angle) + '°'}`;
       // ctx.font = 'bold 36px';
@@ -2618,7 +2622,11 @@ var JSONResponse = {
     // Draw lines
     var lines = JSONResponse.getLines(detection);
     if (lines instanceof Array) {
-      lines?.forEach((item) => {
+      lines?.forEach((item, index) => {
+        if (isRoot && hoverBoxId != null && index != hoverBoxId) {
+          return;
+        }
+
         var [x, y, w, h, d] = JSONResponse.getXYWHD(item);
         const isRate = Math.abs(x) < 1 && Math.abs(y) < 1 && Math.abs(w) < 1 && Math.abs(h) < 1;
         x = isRate ? x*width : x*xRate;
@@ -2651,7 +2659,11 @@ var JSONResponse = {
     // Draw points
     var points = JSONResponse.getPoints(detection);
     if (points instanceof Array) {
-      points?.forEach((item) => {
+      points?.forEach((item, index) => {
+        if (isRoot && hoverBoxId != null && index != hoverBoxId) {
+          return;
+        }
+
         var [x, y, w, h, d] = JSONResponse.getXYWHD(item);
         const isRate = Math.abs(x) < 1 && Math.abs(y) < 1 && Math.abs(w) < 1 && Math.abs(h) < 1;
         x = isRate ? x*width : x*xRate;
@@ -2681,10 +2693,19 @@ var JSONResponse = {
     // Draw polygons
     var polygons = JSONResponse.getPolygons(detection);
     if (polygons instanceof Array) {
-      polygons.forEach((item, i) => {
+      polygons.forEach((item, index) => {
+        if (isRoot && hoverBoxId != null && index != hoverBoxId) {
+          return;
+        }
+
         var points = JSONResponse.getPoints(item) || item;
         if (points instanceof Array) {
           const color = item.color || detection.color || detection.bbox?.color;
+          if (color != null && color.length >= 3) {
+            var alpha = color[3] || 0.5;
+            color[3] = alpha <= 1 ? alpha : alpha/255;
+          }
+
           const rgba = color == null || color.length < 3 ? null : `rgba(${color.join(',')})`;
           if (rgba != null) {
             ctx.fillStyle = rgba;
diff --git a/APIJSON-Java-Server/APIJSONBoot-MultiDataSource/src/main/resources/static/cv/index.html b/APIJSON-Java-Server/APIJSONBoot-MultiDataSource/src/main/resources/static/cv/index.html
@@ -494,15 +494,15 @@
                         </div>
 
                         <div id="vAllContainer" v-show="isRandomListShow || isRandomSubListShow" style="width: 100%; margin-top: 40px; position: absolute; background-color: rgba(255, 255, 255, 0.5); display: flex; flex-direction: column;" @click="detection.isShowNum = ! detection.isShowNum">
-                            <div id="vAllAfterTitle" style="padding: 0; position: absolute; width: 100%; height: 25px;" >
+                            <div id="vAllAfterTitle" style="background-color: rgba(255, 255, 255, 0.5); padding: 0; position: absolute; width: 100%; height: 25px;" >
                                 <a style="font-size: small; font-weight: bold; color: black">本次: </a>
                                 <a style="font-size: small; margin-left: -6px">{{ detection.isShowNum ? '正确(图' + detection.afterImgCorrect + ' 框' + detection.afterAllCorrect + ') 误报(图' + detection.afterImgWrong + ' 框' + detection.afterAllWrong + ') 漏检(图' + detection.afterImgMiss + ' 框' + detection.afterAllMiss + ')' : '召回(图' + detection.afterImgRecallStr + ' 框' + detection.afterAllRecallStr + ')% 精确(图' + detection.afterImgPrecisionStr + ' 框' + detection.afterAllPrecisionStr + ')% F1(图' + detection.afterImgF1Str + ' 框' + detection.afterAllF1Str + ')%' }} </a>
                             </div>
-                            <div id="vAllDiffTitle" style="padding: 0; position: absolute; width: 100%; height: 25px; margin-top: 25px" >
+                            <div id="vAllDiffTitle" style="background-color: rgba(255, 255, 255, 0.5); padding: 0; position: absolute; width: 100%; height: 25px; margin-top: 25px" >
                                 <a style="font-size: small; font-weight: bold; color: black">差异: </a>
                                 <a style="font-size: small; margin-left: -6px">{{ detection.isShowNum ? '正确(图' + detection.diffImgCorrectStr + ' 框' + detection.diffAllCorrectStr + ') 误报(图' + detection.diffImgWrongStr + ' 框' + detection.diffAllWrongStr + ') 漏检(图' + detection.diffImgMissStr + ' 框' + detection.diffAllMissStr + ')' : '召回(图' + detection.diffImgRecallStr + ' 框' + detection.diffAllRecallStr + ')% 精确(图' + detection.diffImgPrecisionStr + ' 框' + detection.diffAllPrecisionStr + ')% F1(图' + detection.diffImgF1Str + ' 框' + detection.diffAllF1Str + ')%' }} </a>
                             </div>
-                            <div id="vAllBeforeTitle" style="padding: 0; position: absolute; width: 100%; height: 25px; margin-top: 50px" >
+                            <div id="vAllBeforeTitle" style="background-color: rgba(255, 255, 255, 0.5); padding: 0; position: absolute; width: 100%; height: 25px; margin-top: 50px" >
                                 <a style="font-size: small; font-weight: bold; color: black">之前: </a>
                                 <a style="font-size: small; margin-left: -6px">{{ detection.isShowNum ? '正确(图' + detection.beforeImgCorrect + ' 框' + detection.beforeAllCorrect + ') 误报(图' + detection.beforeImgWrong + ' 框' + detection.beforeAllWrong + ') 漏检(图' + detection.beforeImgMiss + ' 框' + detection.beforeAllMiss + ')' : '召回(图' + detection.beforeImgRecallStr + ' 框' + detection.beforeAllRecallStr + ')% 精确(图' + detection.beforeImgPrecisionStr + ' 框' + detection.beforeAllPrecisionStr + ')% F1(图' + detection.beforeImgF1Str + ' 框' + detection.beforeAllF1Str + ')%' }} </a>
                             </div>
@@ -511,7 +511,7 @@
                         <input id="vRandomKeyPath" v-show="isRandomListShow || isRandomSubListShow" v-model="((currentRemoteItem || {}).Document || {}).path" style="width: 100%; text-align: center; margin-top: 115px; background-color: rgba(255, 255, 255, 0.5); border: #DDD 1px solid; border-radius: 2px"  @keyup="doOnKeyUp(event, 'randomKeyPath', false, {'path': vRandomKeyPath.value})" placeholder="image: 图片的 JSON key 路径，以 / 分隔，转义特殊字符 / 等" />
 
                         <!-- 临时生成的配置子项 -->
-                        <ul v-show="isRandomSubListShow" class="historys" style="width: 100%;height: 100%; background-color: transparent; overflow: hidden;overflow-y: scroll; padding-bottom: 150px">
+                        <ul v-show="isRandomSubListShow" class="historys" style="width: 100%;height: 100%; background-color: transparent; overflow: hidden;overflow-y: scroll; padding-bottom: 215px">
                             <li style="width: 100%; background-color: white; " v-for="(item, index) in randomSubs" :id="'randomSubItem' + index" >
                                 <img id="vRandomSubImg" :src="(item.Random || {}).img || 'img/add_light.png'" style="height: 90px; min-width: 90px" @click="onClickAddRandom(currentRandomIndex, index)">
 
@@ -542,7 +542,7 @@
                         </div>
 
                         <!-- 持久化存储的配置项 -->
-                        <ul v-show="isRandomListShow" class="historys" style="width: 100%;height: 100%; background-color: transparent;overflow: hidden;overflow-y: scroll;padding-bottom: 150px">
+                        <ul v-show="isRandomListShow" class="historys" style="width: 100%;height: 100%; background-color: transparent;overflow: hidden;overflow-y: scroll;padding-bottom: 215px">
                             <li style="width: 100%; display: inline-flex; background-color: rgba(255, 255, 255, 0.5)" v-for="(item, index) in randoms"  :id="'randomItem' + index" >
                                 <img id="vRandomImg" :src="(item.Random || {}).img || 'img/add_light.png'" style="height: 90px; min-width: 90px; background-color: rgba(255, 255, 255, 0.5); position: relative" @click="onClickAddRandom(index)" @load="var target = $event.target || {}; (item.Random || {}).width = target.naturalWidth; (item.Random || {}).height = target.naturalHeight">
 
diff --git a/APIJSON-Java-Server/APIJSONBoot-MultiDataSource/src/main/resources/static/cv/js/main.js b/APIJSON-Java-Server/APIJSONBoot-MultiDataSource/src/main/resources/static/cv/js/main.js
