From 57dca0fc0ffb2c2893ff4d6c2cea28226dbe5887 Mon Sep 17 00:00:00 2001
From: LynnL4 <lht856@foxmail.com>
Date: Tue, 12 Sep 2023 16:48:46 +0800
Subject: [PATCH] feat: preview support classification model

---
 .../setup/process/components/preview.vue      | 122 ++++++++++--------
 1 file changed, 69 insertions(+), 53 deletions(-)

diff --git a/src/views/setup/process/components/preview.vue b/src/views/setup/process/components/preview.vue
index b7a4ffa..3ad58ab 100644
--- a/src/views/setup/process/components/preview.vue
+++ b/src/views/setup/process/components/preview.vue
@@ -50,62 +50,78 @@ const classes = computed(() => deviceStore.currentModel?.classes || []);
 const length = computed(() => classes.value.length);
 
 const onInvoke = (data: any) => {
-  if (!data?.boxes || !data?.image) {
-    return
-  }
-  const boxes = data.boxes;
-  const image = data.image;
-  img.onload = () => {
-    if (!canvas.value) return
-    const ctx = canvas.value?.getContext('2d')
-    if (!ctx) return
-
-    canvas.value.width = img.height;
-    canvas.value.height = img.width;
-    ctx.drawImage(img, 0, 0, img.width, img.height);
-    for (let i = 0; i < boxes.length; i += 1) {
-      const rect = boxes[i];
-      if (rect?.length === 6) {
-        const x = rect[0];
-        const y = rect[1];
-        const w = rect[2];
-        const h = rect[3];
-        const score = rect[4];
-        const tar = parseInt(rect[5], 10);
-        const color = COLORS[x % COLORS.length];
-        let tarStr = ''
-        if (classes.value && tar < length.value) {
-          tarStr = classes.value[tar]
-        } else {
-          tarStr = tar.toString()
+  if (data?.image) {
+    const image = data.image;
+    img.onload = () => {
+      if (!canvas.value) return;
+      const ctx = canvas.value?.getContext('2d');
+      if (!ctx) return;
+
+      canvas.value.width = img.height;
+      canvas.value.height = img.width;
+      ctx.drawImage(img, 0, 0, img.width, img.height);
+      if (data?.boxes) {
+        const boxes = data.boxes;
+        for (let i = 0; i < boxes.length; i += 1) {
+          const rect = boxes[i];
+          if (rect?.length === 6) {
+            const x = rect[0];
+            const y = rect[1];
+            const w = rect[2];
+            const h = rect[3];
+            const score = rect[4];
+            const tar = parseInt(rect[5], 10);
+            const color = COLORS[x % COLORS.length];
+            let tarStr = '';
+            if (classes.value && tar < length.value) {
+              tarStr = classes.value[tar];
+            } else {
+              tarStr = tar.toString();
+            }
+            ctx.strokeStyle = color;
+            ctx.lineWidth = 2;
+            ctx.strokeRect(x - w / 2, y - h / 2, w, h);
+            ctx.fillStyle = color;
+            ctx.fillRect(x - w / 2, y - h / 2 - 12, w, 12);
+            ctx.font = 'bold 12px arial';
+            ctx.fillStyle = '#ffffff';
+            ctx.fillText(`${tarStr}: ${score}`, x - w / 2 + 5, y - h / 2 - 2);
+          }
         }
-        ctx.strokeStyle = color;
-        ctx.lineWidth = 2;
-        ctx.strokeRect(
-          x - w / 2,
-          y - h / 2,
-          w,
-          h
-        );
-        ctx.fillStyle = color;
-        ctx.fillRect(
-          x - w / 2,
-          y - h / 2 - 12,
-          w,
-          12
-        );
-        ctx.font = 'bold 12px arial';
-        ctx.fillStyle = '#ffffff';
-        ctx.fillText(
-          `${tarStr}: ${score}`,
-          x - w / 2 + 5,
-          y - h / 2 - 2
-        );
       }
-    }
-  };
+      if (data?.classes) {
+        const tagets = data.classes;
+        for (let i = 0; i < tagets.length; i += 1) {
+          const tar = tagets[i][1];
+          const score = tagets[i][0];
+          let tarStr = '';
+          if (classes.value && tar < length.value) {
+            tarStr = classes.value[tar];
+          } else {
+            tarStr = tar.toString();
+          }
+          ctx.globalAlpha = 0.3;
+          ctx.fillStyle = COLORS[tar % COLORS.length];
+          ctx.fillRect(
+            (canvas.value!.width / tagets.length) * i,
+            0,
+            (canvas.value!.width / tagets.length) * (i + 1),
+            canvas.value!.height / 10
+          );
+          ctx.globalAlpha = 1;
+          ctx.font = `bold ${canvas.value!.height / 16}px arial`;
+          ctx.fillStyle = '#ffffff';
+          ctx.fillText(
+            `${tarStr}: ${score}`,
+            (canvas.value!.width / tagets.length) * i,
+            canvas.value!.height / 16
+          );
+        }
+      }
+    };
 
-  img.src = `data:image/jpg;base64,${image}`;
+    img.src = `data:image/jpg;base64,${image}`;
+  }
 }
 
 const handelRefresh = async (connectStatus: DEVICESTATUS) => {