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.
152 lines
6.7 KiB
152 lines
6.7 KiB
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dashboard - AI Drone System</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav class="tabs">
|
|
<div>
|
|
<button id="tab-video" class="tab-button active">Video</button>
|
|
<button id="tab-models" class="tab-button">Settings</button>
|
|
</div>
|
|
|
|
<button id="logout-button" class="logout-button">Logout</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<div id="content-video" class="tab-content active">
|
|
<div class="video-container">
|
|
<div class="video-player">
|
|
<div id="video-wrap">
|
|
<div id="info">
|
|
<span id="status" class="status">연결 시도 중...</span>
|
|
<span id="frame-info"></span>
|
|
</div>
|
|
<span id="current-model-display" class="video-overlay top-right hidden"></span>
|
|
<span id="fps-display" class="video-overlay bottom-right"></span>
|
|
<canvas id="frame"></canvas>
|
|
<div id="bbox-container"></div>
|
|
</div>
|
|
<div id="det-wrap">
|
|
<div id="det-title">Detections</div>
|
|
<div id="det-list"></div>
|
|
</div>
|
|
|
|
<div id="current-model-container" class="segmented-control-container">
|
|
<input type="radio" id="model-objdet" name="current-model" value="OBJDET" checked>
|
|
<label for="model-objdet" class="segmented-control-button">객체 탐지/분류</label>
|
|
|
|
<input type="radio" id="model-fire" name="current-model" value="FIRE">
|
|
<label for="model-fire" class="segmented-control-button">화재 감지</label>
|
|
|
|
<input type="radio" id="model-crowd" name="current-model" value="CROWD">
|
|
<label for="model-crowd" class="segmented-control-button">군중 위험 인식</label>
|
|
|
|
<input type="radio" id="model-deid" name="current-model" value="FACEATTR">
|
|
<label for="model-deid" class="segmented-control-button">얼굴/ 인상착의 인식</label>
|
|
|
|
<input type="radio" id="model-abnorm" name="current-model" value="ABNORM">
|
|
<label for="model-abnorm" class="segmented-control-button">이상행동 감지</label>
|
|
|
|
<input type="radio" id="model-lpr" name="current-model" value="LPR">
|
|
<label for="model-lpr" class="segmented-control-button">차량 번호판 인식</label>
|
|
|
|
<input type="radio" id="model-viptrack" name="current-model" value="VIPTRACK">
|
|
<label for="model-viptrack" class="segmented-control-button">관심인물추적</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="content-models" class="tab-content">
|
|
<div class="toolbar">
|
|
<label class="section-title">AI 모델파일 관리</label>
|
|
<input type="file" id="global-file-input" class="hidden-file-input" accept=".aiwbin">
|
|
<label for="global-file-input" class="btn-browse">찾아보기</label>
|
|
<span id="file-name-display">선택된 파일 없음</span>
|
|
<button id="global-upload-button" class="btn-action">⬆️ 업로드</button>
|
|
<button class="refresh-button">🔄 새로고침</button>
|
|
</div>
|
|
<table class="model-table">
|
|
<thead>
|
|
<tr>
|
|
<th>번호</th>
|
|
<th>AI Model 역할</th>
|
|
<th>파일명</th>
|
|
<th>현재 버전</th>
|
|
<th>삭제</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr data-role="OBJDET">
|
|
<td>1</td><td>객체 탐지/ 분류</td><td class="model-filename">-</td><td class="model-version">v1.0</td><td><button class="btn-delete">삭제</button></td>
|
|
</tr>
|
|
<tr data-role="FIRE">
|
|
<td>2</td><td>화재(불꽃, 연기) 감지</td><td class="model-filename">-</td><td class="model-version">v1.0</td><td><button class="btn-delete">삭제</button></td>
|
|
</tr>
|
|
<tr data-role="ABNORM">
|
|
<td>3</td><td>이상행동(쓰러짐, 폭행) 감지</td><td class="model-filename">-</td><td class="model-version">v1.0</td><td><button class="btn-delete">삭제</button></td>
|
|
</tr>
|
|
<tr data-role="FACEATTR">
|
|
<td>4</td><td>얼굴/ 인상착의 인식</td><td class="model-filename">-</td><td class="model-version">-</td><td><button class="btn-delete">삭제</button></td>
|
|
</tr>
|
|
<tr data-role="LPR">
|
|
<td>5</td><td>차량 번호판/ 차종 인식</td><td class="model-filename">-</td><td class="model-version">-</td><td><button class="btn-delete">삭제</button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="toolbar">
|
|
<label class="section-title">관심 인물파일 관리</label>
|
|
<div class="right-actions">
|
|
<button id="btn-poi-register" class="btn-white">등록</button>
|
|
<button id="btn-poi-refresh" class="refresh-button">🔄 새로 고침</button>
|
|
</div>
|
|
</div>
|
|
|
|
<table class="model-table" id="poi-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 10%;">번호</th>
|
|
<th style="width: 30%;">관심인물명</th>
|
|
<th style="width: 30%;">미리 보기</th>
|
|
<th style="width: 30%;">파일 등록</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
<div id="poi-empty-msg" class="empty-message hidden">
|
|
등록된 관심 인물이 없습니다
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<div id="poi-modal" class="modal hidden">
|
|
<div class="modal-content">
|
|
<h3>관심인물 등록</h3>
|
|
<div class="modal-body">
|
|
<input type="text" id="poi-name-input" placeholder="관심인물명(영문숫자만 가능)" maxlength="20">
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button id="btn-modal-confirm" class="btn-modal-confirm">확인</button>
|
|
<button id="btn-modal-cancel" class="btn-modal-cancel">취소</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="image-viewer-modal" class="modal hidden" style="background-color: rgba(0,0,0,0.9);">
|
|
<span class="close-viewer">×</span>
|
|
<img class="modal-image" id="full-image">
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html> |