feat: implement BatchReportComponent and FrameInspectorDialogComponent for visualizing batch inference results

src/src.palm.vision/history/batch-report/batch-report.component.ts

@@ -115,8 +115,7 @@ export class BatchReportComponent implements OnInit, OnChanges, OnDestroy {
     this.dialog.open(FrameInspectorDialogComponent, {
       data,
       panelClass: 'frame-inspector-panel',
-      width: '100%',
-      maxWidth: '95vw',
+      maxWidth: '90vw',
       autoFocus: false,
     });
   }

src/src.palm.vision/history/batch-report/frame-inspector-dialog.component.ts

@@ -50,6 +50,7 @@ export interface FrameInspectorData {
         </div>
       </div>
 
+
       <div class="inspector-footer">
         <span class="timing-chip">
           Inference: {{ data.frame.inference_ms | number:'1.0-0' }}&thinsp;ms
@@ -61,7 +62,7 @@ export interface FrameInspectorData {
     </div>
   `,
   styles: [`
-    :host { display: block; width: 100%; }
+    :host { display: block; }
 
     .inspector-shell {
       display: flex;
@@ -69,7 +70,6 @@ export interface FrameInspectorData {
       background: #1e272e;
       border-radius: 8px;
       overflow: hidden;
-      width: 100%;
     }
 
     .inspector-title {
@@ -86,46 +86,38 @@ export interface FrameInspectorData {
 
     .inspector-body {
       display: flex;
-      gap: 16px;
+      flex-direction: column;
+      align-items: center;
+      gap: 14px;
       padding: 16px 20px;
-      max-height: 68vh;
-      overflow: hidden;
+      overflow-y: auto;
+      max-height: 80vh;
     }
 
     .inspector-canvas {
-      flex: 1;
-      min-width: 0;
+      display: block;
       max-width: 100%;
-      max-height: 65vh;
+      max-height: 60vh;
       height: auto;
-      box-sizing: border-box;
       border-radius: 8px;
-      display: block;
       background: #111;
     }
 
     .det-list {
-      width: 168px;
-      flex-shrink: 0;
       display: flex;
-      flex-direction: column;
+      flex-wrap: wrap;
       gap: 6px;
-      overflow-y: auto;
-      max-height: 65vh;
-      padding-right: 2px;
-      scrollbar-width: thin;
-      scrollbar-color: rgba(255,255,255,0.15) transparent;
+      width: 100%;
     }
 
     .det-row {
       border-left: 3px solid;
       border-radius: 0 4px 4px 0;
-      padding: 5px 8px;
+      padding: 5px 10px;
       background: rgba(255,255,255,0.05);
       display: flex;
-      justify-content: space-between;
       align-items: center;
-      gap: 4px;
+      gap: 8px;
     }
 
     .det-class { font-size: 0.78rem; color: rgba(255,255,255,0.82); font-weight: 500; }
@@ -141,33 +133,6 @@ export interface FrameInspectorData {
       .timing-chip { font-size: 0.72rem; color: rgba(255,255,255,0.40); }
       button { color: rgba(255,255,255,0.65); border-color: rgba(255,255,255,0.20); }
     }
-
-    @media (max-width: 599px) {
-      .inspector-body {
-        flex-direction: column;
-        max-height: none;
-        overflow-y: auto;
-        padding: 12px 14px;
-        gap: 12px;
-      }
-
-      .inspector-canvas {
-        width: 100%;
-        max-height: 52vw;
-      }
-
-      .det-list {
-        width: 100%;
-        max-height: 180px;
-      }
-
-      .inspector-footer {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 8px;
-        padding: 10px 14px 14px;
-      }
-    }
   `],
 })
 export class FrameInspectorDialogComponent implements AfterViewInit {
@@ -203,13 +168,12 @@ export class FrameInspectorDialogComponent implements AfterViewInit {
 
     const img = new Image();
     img.onload = () => {
-      const containerW = canvas.parentElement?.clientWidth ?? 560;
-      const maxW = Math.min(containerW, img.naturalWidth);
+      const maxW = Math.min(img.naturalWidth, 720);
       const scale = maxW / img.naturalWidth;
       canvas.width = img.naturalWidth * scale;
       canvas.height = img.naturalHeight * scale;
-      canvas.style.width = '100%';
-      canvas.style.height = 'auto';
+      canvas.style.width = '';
+      canvas.style.height = '';
       const ctx = canvas.getContext('2d')!;
       ctx.drawImage(img, 0, 0, canvas.width, canvas.height);