|
|
|
|
<!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>
|
|
|
|
|
<img id="frame" alt="video frame">
|
|
|
|
|
<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-abnorm" name="current-model" value="ABNORM">
|
|
|
|
|
<label for="model-abnorm" 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-fire" name="current-model" value="FIRE">
|
|
|
|
|
<label for="model-fire" 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-deid" name="current-model" value="DEID">
|
|
|
|
|
<label for="model-deid" 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>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>Al Model 역할</th>
|
|
|
|
|
<th>파일명</th> <th>현재 버전</th>
|
|
|
|
|
<th>삭제</th>
|
|
|
|
|
</tr>
|
|
|
|
|
<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="FACE">
|
|
|
|
|
<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>
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
<script src="app.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
