From d19abe838a1509707cf5cf364d7d0dff3aeaafec Mon Sep 17 00:00:00 2001 From: dongjin kim Date: Wed, 12 Nov 2025 18:59:07 +0900 Subject: [PATCH] Remove delete button in empty ai file. --- public/app.js | 67 +++++++++++++++++++++++++++++++++++------------- public/style.css | 7 ++++- 2 files changed, 55 insertions(+), 19 deletions(-) diff --git a/public/app.js b/public/app.js index 807de34..683aa0a 100644 --- a/public/app.js +++ b/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)}` - + ` x=${it.x.toFixed(3)} y=${it.y.toFixed(3)}` - + ` w=${it.w.toFixed(3)} h=${it.h.toFixed(3)}` - + ` resv=${it.resv}` + `#${i} cls=${it.cls} tid=${it.tid} tag=${it.tag}` // prob, resv 대신 tid, tag 사용 + + ` x=${x.toFixed(3)} y=${y.toFixed(3)}` + + ` w=${w.toFixed(3)} h=${h.toFixed(3)}` ); }); 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)}` - + ` x=${it.x.toFixed(3)} y=${it.y.toFixed(3)}` - + ` w=${it.w.toFixed(3)} h=${it.h.toFixed(3)}` - + ` resv=${it.resv}` + `#${i} cls=${it.cls} tid=${it.tid} tag=${it.tag}` // prob, resv 대신 tid, tag 사용 + + ` x=${x.toFixed(3)} y=${y.toFixed(3)}` + + ` w=${w.toFixed(3)} h=${h.toFixed(3)}` ); }); 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)}` - + ` x=${it.x.toFixed(3)} y=${it.y.toFixed(3)}` - + ` w=${it.w.toFixed(3)} h=${it.h.toFixed(3)}` - + ` resv=${it.resv}` + `#${i} cls=${it.cls} tid=${it.tid} tag=${it.tag}` // prob, resv 대신 tid, tag 사용 + + ` x=${x.toFixed(3)} y=${y.toFixed(3)}` + + ` w=${w.toFixed(3)} h=${h.toFixed(3)}` ); - const boxLeft = (it.x * ratio) + offsetX; - const boxTop = (it.y * ratio) + offsetY; - const boxWidth = it.w * ratio; - const boxHeight = it.h * ratio; + + // 계산된 x, y, w, h를 사용하여 박스 위치 계산 + const boxLeft = (x * ratio) + offsetX; + 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(); -}); +}); \ No newline at end of file diff --git a/public/style.css b/public/style.css index a5f7a79..51583a0 100644 --- a/public/style.css +++ b/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; /* 테두리 포함 크기 계산 */ } -/**/ \ No newline at end of file + +/* [추가] 요소 숨기기 위한 유틸리티 클래스 */ +.hidden { + display: none; +} \ No newline at end of file