You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
420 lines
17 KiB
420 lines
17 KiB
// app.js
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
// =================================================
|
|
// 0. 로그아웃 로직 (추가됨)
|
|
// =================================================
|
|
const logoutBtn = document.getElementById('logout-button');
|
|
if (logoutBtn) {
|
|
logoutBtn.addEventListener('click', () => {
|
|
if (confirm('정말로 로그아웃 하시겠습니까?')) {
|
|
// 로그인 페이지(루트)로 이동
|
|
window.location.href = '/';
|
|
}
|
|
});
|
|
}
|
|
|
|
// =================================================
|
|
// 1. 탭 전환 로직
|
|
// =================================================
|
|
const tabVideo = document.getElementById('tab-video');
|
|
const tabModels = document.getElementById('tab-models');
|
|
const contentVideo = document.getElementById('content-video');
|
|
const contentModels = document.getElementById('content-models');
|
|
|
|
if (tabVideo && tabModels) {
|
|
tabVideo.addEventListener('click', () => {
|
|
tabVideo.classList.add('active');
|
|
tabModels.classList.remove('active');
|
|
contentVideo.classList.add('active');
|
|
contentModels.classList.remove('active');
|
|
});
|
|
|
|
tabModels.addEventListener('click', () => {
|
|
tabModels.classList.add('active');
|
|
tabVideo.classList.remove('active');
|
|
contentModels.classList.add('active');
|
|
contentVideo.classList.remove('active');
|
|
loadModelList();
|
|
loadPoiList();
|
|
});
|
|
}
|
|
|
|
// =================================================
|
|
// 2. AI 모델 관리 로직
|
|
// =================================================
|
|
function loadModelList() {
|
|
const tableBody = document.querySelector('.model-table tbody');
|
|
if (!tableBody) return;
|
|
fetch('/list-models').then(r=>r.json()).then(models=>{
|
|
tableBody.querySelectorAll('tr[data-role]').forEach(row => {
|
|
const role = row.dataset.role;
|
|
const d = models[role];
|
|
const f = row.querySelector('.model-filename');
|
|
const v = row.querySelector('.model-version');
|
|
const btn = row.querySelector('.btn-delete');
|
|
if(d){ f.textContent=d.file; v.textContent=d.version; btn.classList.remove('hidden'); }
|
|
else { f.textContent='-'; v.textContent='-'; btn.classList.add('hidden'); }
|
|
});
|
|
});
|
|
}
|
|
|
|
const modelTableBody = document.querySelector('.model-table tbody');
|
|
if(modelTableBody) {
|
|
modelTableBody.addEventListener('click', (e) => {
|
|
if(e.target.classList.contains('btn-delete')) {
|
|
const row = e.target.closest('tr');
|
|
const filename = row.querySelector('.model-filename').textContent;
|
|
if(filename && filename !== '-') deleteModelFile(filename);
|
|
}
|
|
});
|
|
}
|
|
|
|
function deleteModelFile(filename) {
|
|
if (!confirm(`정말로 이 모델 파일(${filename})을 삭제하시겠습니까?`)) return;
|
|
fetch('/delete-model', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({filename: filename})
|
|
}).then(res => res.json()).then(data => {
|
|
if (data.status === 'success') { alert('삭제되었습니다.'); loadModelList(); }
|
|
else { alert(`삭제 실패: ${data.message}`); }
|
|
});
|
|
}
|
|
|
|
const globalUploadBtn = document.getElementById('global-upload-button');
|
|
const globalFileInput = document.getElementById('global-file-input');
|
|
const fileNameDisplay = document.getElementById('file-name-display');
|
|
const refreshButton = document.querySelector('.refresh-button');
|
|
|
|
if (globalFileInput) {
|
|
globalFileInput.addEventListener('change', () => {
|
|
fileNameDisplay.textContent = globalFileInput.files.length > 0 ? globalFileInput.files[0].name : '선택된 파일 없음';
|
|
});
|
|
}
|
|
if (globalUploadBtn) {
|
|
globalUploadBtn.addEventListener('click', () => {
|
|
if (!globalFileInput.files.length) return alert('파일을 선택해주세요.');
|
|
const formData = new FormData();
|
|
formData.append('modelFile', globalFileInput.files[0]);
|
|
fetch('/upload-model', { method: 'POST', body: formData })
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.status === 'success') { alert('업로드 성공'); globalFileInput.value=''; fileNameDisplay.textContent='선택된 파일 없음'; loadModelList(); }
|
|
else { alert(`실패: ${data.message}`); }
|
|
});
|
|
});
|
|
}
|
|
if (refreshButton) refreshButton.addEventListener('click', loadModelList);
|
|
|
|
|
|
// =================================================
|
|
// 3. 관심 인물(POI) 관리 로직
|
|
// =================================================
|
|
const poiTableBody = document.querySelector('#poi-table tbody');
|
|
const poiEmptyMsg = document.getElementById('poi-empty-msg');
|
|
const btnPoiRegister = document.getElementById('btn-poi-register');
|
|
const btnPoiRefresh = document.getElementById('btn-poi-refresh');
|
|
|
|
// 모달 및 뷰어 요소
|
|
const poiModal = document.getElementById('poi-modal');
|
|
const poiNameInput = document.getElementById('poi-name-input');
|
|
const btnModalConfirm = document.getElementById('btn-modal-confirm');
|
|
const btnModalCancel = document.getElementById('btn-modal-cancel');
|
|
|
|
const imageViewerModal = document.getElementById('image-viewer-modal');
|
|
const fullImage = document.getElementById('full-image');
|
|
const closeViewerBtn = document.querySelector('.close-viewer');
|
|
|
|
// POI 목록 로드
|
|
function loadPoiList() {
|
|
if (!poiTableBody) return;
|
|
|
|
fetch('/poi/list')
|
|
.then(res => res.json())
|
|
.then(list => {
|
|
poiTableBody.innerHTML = '';
|
|
|
|
if (!list || list.length === 0) {
|
|
poiEmptyMsg.classList.remove('hidden');
|
|
poiTableBody.parentElement.classList.add('hidden');
|
|
} else {
|
|
poiEmptyMsg.classList.add('hidden');
|
|
poiTableBody.parentElement.classList.remove('hidden');
|
|
|
|
list.forEach((item, index) => {
|
|
const tr = document.createElement('tr');
|
|
|
|
let previewHtml = '-';
|
|
if (item.images && item.images.length > 0) {
|
|
const imagesHtml = item.images.map(imgName => {
|
|
const imgSrc = `/poi-images/${item.name}/${imgName}`;
|
|
return `
|
|
<div class="preview-item">
|
|
<img src="${imgSrc}" class="poi-preview" onclick="openImageViewer('${imgSrc}')" title="클릭하여 확대">
|
|
<button class="btn-delete-small" onclick="deletePoiImage('${item.name}', '${imgName}')">삭제</button>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
previewHtml = `<div class="preview-container">${imagesHtml}</div>`;
|
|
}
|
|
|
|
const fileInputId = `poi-file-${item.name}`;
|
|
|
|
tr.innerHTML = `
|
|
<td>${index + 1}</td>
|
|
<td>
|
|
<span style="font-weight:bold; font-size:1.1rem; margin-right:10px;">${item.name}</span>
|
|
<button class="btn-delete-small" onclick="deletePoi('${item.name}')">삭제</button>
|
|
</td>
|
|
<td>${previewHtml}</td>
|
|
<td>
|
|
<input type="file" id="${fileInputId}" class="hidden" accept=".jpg,.jpeg,.png" multiple onchange="uploadPoiImage('${item.name}', this)">
|
|
<label for="${fileInputId}" class="btn-browse" style="background:#fff; color:#333; border:1px solid #ccc;">찾아보기</label>
|
|
</td>
|
|
`;
|
|
poiTableBody.appendChild(tr);
|
|
});
|
|
}
|
|
})
|
|
.catch(err => console.error('POI Load Error:', err));
|
|
}
|
|
|
|
// [전역 함수] 이미지 뷰어 열기
|
|
window.openImageViewer = function(src) {
|
|
if (fullImage && imageViewerModal) {
|
|
fullImage.src = src;
|
|
imageViewerModal.classList.remove('hidden');
|
|
}
|
|
};
|
|
|
|
// 뷰어 닫기 로직
|
|
if (closeViewerBtn) {
|
|
closeViewerBtn.addEventListener('click', () => {
|
|
imageViewerModal.classList.add('hidden');
|
|
});
|
|
}
|
|
window.addEventListener('click', (e) => {
|
|
if (e.target === imageViewerModal) {
|
|
imageViewerModal.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
|
|
// [전역 함수] 인물 전체 삭제
|
|
window.deletePoi = function(name) {
|
|
if (!confirm(`관심인물 '${name}'을(를) 완전히 삭제하시겠습니까?\n등록된 모든 이미지가 함께 삭제됩니다.`)) return;
|
|
|
|
fetch('/poi/delete', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name })
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.status === 'success') loadPoiList();
|
|
else alert('삭제 실패');
|
|
});
|
|
};
|
|
|
|
// [전역 함수] 특정 이미지만 삭제
|
|
window.deletePoiImage = function(name, imageName) {
|
|
if (!confirm(`해당 이미지를 삭제하시겠습니까?`)) return;
|
|
|
|
fetch('/poi/delete-image', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name, imageName })
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.status === 'success') loadPoiList();
|
|
else alert('이미지 삭제 실패');
|
|
});
|
|
};
|
|
|
|
// [수정됨] 다중 파일 업로드 처리
|
|
window.uploadPoiImage = function(name, input) {
|
|
if (!input.files || input.files.length === 0) return;
|
|
|
|
const formData = new FormData();
|
|
formData.append('poiName', name);
|
|
|
|
// 선택된 모든 파일을 formData에 추가
|
|
for (let i = 0; i < input.files.length; i++) {
|
|
const file = input.files[i];
|
|
const ext = file.name.split('.').pop().toLowerCase();
|
|
|
|
if (!['jpg', 'jpeg', 'png'].includes(ext)) {
|
|
alert(`'${file.name}'은(는) 허용되지 않는 파일 형식입니다. (jpg, png만 가능)`);
|
|
input.value = '';
|
|
return;
|
|
}
|
|
|
|
formData.append('poiFile', file);
|
|
}
|
|
|
|
fetch('/poi/upload-image', { method: 'POST', body: formData })
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.status === 'success') {
|
|
alert('이미지 등록 완료');
|
|
loadPoiList();
|
|
} else {
|
|
alert('업로드 실패: ' + (data.message || '오류'));
|
|
}
|
|
})
|
|
.catch(() => alert('오류 발생'));
|
|
|
|
input.value = '';
|
|
};
|
|
|
|
|
|
// 이벤트 리스너
|
|
if (btnPoiRefresh) btnPoiRefresh.addEventListener('click', loadPoiList);
|
|
|
|
if (btnPoiRegister) {
|
|
btnPoiRegister.addEventListener('click', () => {
|
|
poiNameInput.value = '';
|
|
poiModal.classList.remove('hidden');
|
|
});
|
|
}
|
|
|
|
if (btnModalCancel) {
|
|
btnModalCancel.addEventListener('click', () => {
|
|
poiModal.classList.add('hidden');
|
|
});
|
|
}
|
|
|
|
if (btnModalConfirm) {
|
|
btnModalConfirm.addEventListener('click', () => {
|
|
const name = poiNameInput.value.trim();
|
|
if (!name) return alert('이름을 입력하세요.');
|
|
const regex = /^[a-zA-Z0-9]+$/;
|
|
if (!regex.test(name)) return alert('영문과 숫자만 입력 가능합니다.');
|
|
|
|
fetch('/poi/register', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name })
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.status === 'success') {
|
|
poiModal.classList.add('hidden');
|
|
loadPoiList();
|
|
} else {
|
|
alert(data.message || '등록 실패');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// =================================================
|
|
// 4. 비디오 & 웹소켓 (기존 기능)
|
|
// =================================================
|
|
const uri = "ws://10.10.11.246:8765";
|
|
const canvasEl = document.getElementById("frame");
|
|
const statusEl = document.getElementById("status");
|
|
const detListEl = document.getElementById("det-list");
|
|
const bboxContainerEl = document.getElementById("bbox-container");
|
|
const modelContainerEl = document.getElementById("current-model-container");
|
|
const modelDisplayEl = document.getElementById("current-model-display");
|
|
const fpsDisplayEl = document.getElementById("fps-display");
|
|
let ctx = null;
|
|
|
|
if (canvasEl) ctx = canvasEl.getContext('2d');
|
|
let frameCount = 0;
|
|
let lastFpsCheckTime = performance.now();
|
|
let lastFrameMeta = null;
|
|
|
|
function connect() {
|
|
const ws = new WebSocket(uri);
|
|
ws.binaryType = "arraybuffer";
|
|
ws.onopen = () => { statusEl.textContent = "연결됨"; statusEl.className = "status"; };
|
|
ws.onclose = () => { statusEl.textContent = "연결 종료. 재접속..."; statusEl.className = "status err"; setTimeout(connect, 2000); };
|
|
ws.onmessage = (event) => {
|
|
const data = event.data;
|
|
if (typeof data === "string") {
|
|
try {
|
|
const meta = JSON.parse(data);
|
|
if (meta.type === "frame") {
|
|
lastFrameMeta = meta;
|
|
document.getElementById("frame-info").textContent = ` | FRAME ${meta.w}x${meta.h}`;
|
|
} else if (meta.type === "det") {
|
|
showDetections(meta);
|
|
}
|
|
} catch(e){}
|
|
} else if (data instanceof ArrayBuffer && lastFrameMeta) {
|
|
frameCount++;
|
|
const now = performance.now();
|
|
if (now - lastFpsCheckTime >= 1000) {
|
|
fpsDisplayEl.textContent = `${Math.round(frameCount * 1000 / (now - lastFpsCheckTime))} FPS`;
|
|
frameCount = 0;
|
|
lastFpsCheckTime = now;
|
|
}
|
|
const blob = new Blob([data], {type: "image/jpeg"});
|
|
createImageBitmap(blob).then(bmp => {
|
|
canvasEl.width = canvasEl.clientWidth;
|
|
canvasEl.height = canvasEl.clientHeight;
|
|
const r = Math.min(canvasEl.width / bmp.width, canvasEl.height / bmp.height);
|
|
const dw = bmp.width * r;
|
|
const dh = bmp.height * r;
|
|
const dx = (canvasEl.width - dw) / 2;
|
|
const dy = (canvasEl.height - dh) / 2;
|
|
ctx.clearRect(0,0,canvasEl.width, canvasEl.height);
|
|
ctx.drawImage(bmp, dx, dy, dw, dh);
|
|
bmp.close();
|
|
updateBboxContainerPosition();
|
|
});
|
|
}
|
|
};
|
|
}
|
|
|
|
function showDetections(meta) {
|
|
bboxContainerEl.innerHTML = "";
|
|
const items = meta.items || [];
|
|
let lines = [];
|
|
items.forEach((it, i) => {
|
|
lines.push(`#${i} cls=${it.cls} score=${it.conf || 0}`);
|
|
});
|
|
detListEl.textContent = lines.join("\n");
|
|
}
|
|
|
|
function updateBboxContainerPosition() {
|
|
if (!canvasEl || !bboxContainerEl) return;
|
|
bboxContainerEl.style.top = canvasEl.offsetTop + 'px';
|
|
bboxContainerEl.style.left = canvasEl.offsetLeft + 'px';
|
|
bboxContainerEl.style.width = canvasEl.offsetWidth + 'px';
|
|
bboxContainerEl.style.height = canvasEl.offsetHeight + 'px';
|
|
}
|
|
|
|
if (modelContainerEl) {
|
|
modelContainerEl.addEventListener('change', (e) => {
|
|
if(e.target.name === 'current-model') {
|
|
updateModelDisplay();
|
|
fetch('/set-model', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({model: e.target.value})
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function updateModelDisplay() {
|
|
if(!modelContainerEl || !modelDisplayEl) return;
|
|
const checked = modelContainerEl.querySelector('input:checked');
|
|
if(checked) {
|
|
const label = modelContainerEl.querySelector(`label[for="${checked.id}"]`);
|
|
modelDisplayEl.textContent = label ? label.textContent : checked.value;
|
|
}
|
|
}
|
|
|
|
updateModelDisplay();
|
|
if (canvasEl) connect();
|
|
window.addEventListener('resize', updateBboxContainerPosition);
|
|
loadPoiList();
|
|
loadModelList();
|
|
}); |