Remove delete button in empty ai file.

public/app.js

@@ -59,16 +59,20 @@ document.addEventListener('DOMContentLoaded', () => {
 
                     const fileCell = row.querySelector('.model-filename');
                     const versionCell = row.querySelector('.model-version');
+                    const deleteButton = row.querySelector('.btn-delete'); // [수정] 삭제 버튼 선택
 
                     if (modelData) {
                         // 일치하는 파일이 있으면, 파일명과 버전 업데이트
                         if (fileCell) fileCell.textContent = modelData.file;
                         if (versionCell) versionCell.textContent = modelData.version;
+                        // [수정] 삭제 버튼 표시
+                        if (deleteButton) deleteButton.classList.remove('hidden');
                     } else {
                         // 일치하는 파일이 없으면, 기본값 '-'으로 설정
-                        // (HTML의 v1.0 플레이스홀더를 덮어씀)
                         if (fileCell) fileCell.textContent = '-';
                         if (versionCell) versionCell.textContent = '-';
+                        // [수정] 삭제 버튼 숨김
+                        if (deleteButton) deleteButton.classList.add('hidden');
                     }
                 });
             })
@@ -323,40 +327,57 @@ document.addEventListener('DOMContentLoaded', () => {
         }
 
         // Detections 표시 함수
+// Detections 표시 함수 (수정됨)
         function showDetections(meta) {
             const items = meta.items || [];
             let lines = [];
             lines.push(`DET ch=${meta.ch} seq=${meta.seq} ts=${meta.ts_us} cnt=${items.length}`);
             bboxContainerEl.innerHTML = "";
+
             if (!imgEl || !lastFrameMeta) {
+                // [수정됨] x1,y1,x2,y2 형식에 맞게 텍스트 로그 수정
                 items.forEach((it, i) => {
+                     // x1, y1, x2, y2 -> x, y, w, h
+                     const x = it.x1;
+                     const y = it.y1;
+                     const w = it.x2 - it.x1;
+                     const h = it.y2 - it.y1;
+
                      lines.push(
-                        `#${i} cls=${it.cls} prob=${it.prob.toFixed(3)}`
+                        `#${i} cls=${it.cls} tid=${it.tid} tag=${it.tag}` // prob, resv 대신 tid, tag 사용
-                        + ` x=${it.x.toFixed(3)} y=${it.y.toFixed(3)}`
+                        + ` x=${x.toFixed(3)} y=${y.toFixed(3)}`
-                        + ` w=${it.w.toFixed(3)} h=${it.h.toFixed(3)}`
+                        + ` w=${w.toFixed(3)} h=${h.toFixed(3)}`
-                        + ` resv=${it.resv}`
                     );
                 });
                 detListEl.textContent = lines.join("\n");
                 return;
             }
+
             updateBboxContainerPosition();
             const imgWidth = imgEl.clientWidth;
             const imgHeight = imgEl.clientHeight;
             const frameWidth = lastFrameMeta.w;
             const frameHeight = lastFrameMeta.h;
+
             if (frameWidth === 0 || frameHeight === 0 || imgWidth === 0 || imgHeight === 0) {
+                // [수정됨] x1,y1,x2,y2 형식에 맞게 텍스트 로그 수정
                 items.forEach((it, i) => {
+                     // x1, y1, x2, y2 -> x, y, w, h
+                     const x = it.x1;
+                     const y = it.y1;
+                     const w = it.x2 - it.x1;
+                     const h = it.y2 - it.y1;
+
                      lines.push(
-                        `#${i} cls=${it.cls} prob=${it.prob.toFixed(3)}`
+                        `#${i} cls=${it.cls} tid=${it.tid} tag=${it.tag}` // prob, resv 대신 tid, tag 사용
-                        + ` x=${it.x.toFixed(3)} y=${it.y.toFixed(3)}`
+                        + ` x=${x.toFixed(3)} y=${y.toFixed(3)}`
-                        + ` w=${it.w.toFixed(3)} h=${it.h.toFixed(3)}`
+                        + ` w=${w.toFixed(3)} h=${h.toFixed(3)}`
-                        + ` resv=${it.resv}`
                     );
                 });
                 detListEl.textContent = lines.join("\n");
                 return;
             }
+
             const widthRatio = imgWidth / frameWidth;
             const heightRatio = imgHeight / frameHeight;
             const ratio = Math.min(widthRatio, heightRatio);
@@ -364,17 +385,27 @@ document.addEventListener('DOMContentLoaded', () => {
             const videoDisplayHeight = frameHeight * ratio;
             const offsetX = (imgWidth - videoDisplayWidth) / 2;
             const offsetY = (imgHeight - videoDisplayHeight) / 2;
+
+            // [수정됨] x1,y1,x2,y2 형식에 맞게 텍스트 로그 및 박스 계산 수정
             items.forEach((it, i) => {
+                // x1, y1, x2, y2 -> x, y, w, h
+                const x = it.x1;
+                const y = it.y1;
+                const w = it.x2 - it.x1;
+                const h = it.y2 - it.y1;
+
                 lines.push(
-                    `#${i} cls=${it.cls} prob=${it.prob.toFixed(3)}`
+                    `#${i} cls=${it.cls} tid=${it.tid} tag=${it.tag}` // prob, resv 대신 tid, tag 사용
-                    + ` x=${it.x.toFixed(3)} y=${it.y.toFixed(3)}`
+                    + ` x=${x.toFixed(3)} y=${y.toFixed(3)}`
-                    + ` w=${it.w.toFixed(3)} h=${it.h.toFixed(3)}`
+                    + ` w=${w.toFixed(3)} h=${h.toFixed(3)}`
-                    + ` resv=${it.resv}`
                 );
-                const boxLeft = (it.x * ratio) + offsetX;
+
-                const boxTop = (it.y * ratio) + offsetY;
+                // 계산된 x, y, w, h를 사용하여 박스 위치 계산
-                const boxWidth = it.w * ratio;
+                const boxLeft = (x * ratio) + offsetX;
-                const boxHeight = it.h * ratio;
+                const boxTop = (y * ratio) + offsetY;
+                const boxWidth = w * ratio;
+                const boxHeight = h * ratio;
+
                 const bbox = document.createElement('div');
                 bbox.className = 'bbox';
                 bbox.style.left = `${boxLeft}px`;
@@ -441,4 +472,4 @@ document.addEventListener('DOMContentLoaded', () => {
     // ========== 페이지 로드 시 모델 목록 즉시 로드 ==========
     loadModelList();
 
-});
+});

public/style.css

@@ -331,6 +331,7 @@ main {
 
 .model-table th {
     background-color: #f9f9f9;
+    text-align: center; /* [수정] 헤더 중앙 정렬 */
 }
 
 /* [수정됨] nth-child 선택자 수정 (컬럼 1, 4 중앙 정렬) */
@@ -376,4 +377,8 @@ main {
     border: 2px solid red; /* 요청된 빨간색 테두리 */
     box-sizing: border-box; /* 테두리 포함 크기 계산 */
 }
-/*<!--2025.11.12 16:22-->*/
+
+/* [추가] 요소 숨기기 위한 유틸리티 클래스 */
+.hidden {
+    display: none;
+}