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.
196 lines
7.2 KiB
196 lines
7.2 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">Al Models</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">
|
|
<button>새로고침</button>
|
|
</div>
|
|
<table class="model-table">
|
|
<thead>
|
|
<tr>
|
|
<th>번호</th>
|
|
<th>Al Model 역할</th>
|
|
<th>현재 버전</th>
|
|
<th>변경</th>
|
|
<th>업데이트</th>
|
|
<th>삭제</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>객체 탐지/분류</td>
|
|
<td>0.1</td>
|
|
<td>
|
|
<input type="file" id="file-upload-1" class="hidden-file-input"/>
|
|
<label for="file-upload-1" class="btn-browse">찾아보기</label>
|
|
</td>
|
|
<td>
|
|
<button class="btn-action">시작</button>
|
|
</td>
|
|
<td>
|
|
<button class="btn-delete">삭제</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td>사람 얼굴/인상착의 인식</td>
|
|
<td>0.1</td>
|
|
<td>
|
|
<input type="file" id="file-upload-2" class="hidden-file-input"/>
|
|
<label for="file-upload-2" class="btn-browse">찾아보기</label>
|
|
</td>
|
|
<td>
|
|
<button class="btn-action">시작</button>
|
|
</td>
|
|
<td>
|
|
<button class="btn-delete">삭제</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>3</td>
|
|
<td>이상행동(쓰러짐, 폭행) 감지</td>
|
|
<td>0.1</td>
|
|
<td>
|
|
<input type="file" id="file-upload-3" class="hidden-file-input"/>
|
|
<label for="file-upload-3" class="btn-browse">찾아보기</label>
|
|
</td>
|
|
<td>
|
|
<button class="btn-action">시작</button>
|
|
</td>
|
|
<td>
|
|
<button class="btn-delete">삭제</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>4</td>
|
|
<td>집합 군중 위험 인식</td>
|
|
<td>0.1</td>
|
|
<td>
|
|
<input type="file" id="file-upload-4" class="hidden-file-input"/>
|
|
<label for="file-upload-4" class="btn-browse">찾아보기</label>
|
|
</td>
|
|
<td>
|
|
<button class="btn-action">시작</button>
|
|
</td>
|
|
<td>
|
|
<button class="btn-delete">삭제</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>5</td>
|
|
<td>화재(불꽃, 연기) 감지</td>
|
|
<td></td>
|
|
<td>
|
|
<input type="file" id="file-upload-5" class="hidden-file-input"/>
|
|
<label for="file-upload-5" class="btn-browse">찾아보기</label>
|
|
</td>
|
|
<td>
|
|
<button class="btn-action">시작</button>
|
|
</td>
|
|
<td>
|
|
<button class="btn-delete">삭제</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>6</td>
|
|
<td>차량 번호판/차종 인식</td>
|
|
<td></td>
|
|
<td>
|
|
<input type="file" id="file-upload-6" class="hidden-file-input"/>
|
|
<label for="file-upload-6" class="btn-browse">찾아보기</label>
|
|
</td>
|
|
<td>
|
|
<button class="btn-action">시작</button>
|
|
</td>
|
|
<td>
|
|
<button class="btn-delete">삭제</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>7</td>
|
|
<td>영상내 얼굴 비식별화</td>
|
|
<td></td>
|
|
<td>
|
|
<input type="file" id="file-upload-7" class="hidden-file-input"/>
|
|
<label for="file-upload-7" class="btn-browse">찾아보기</label>
|
|
</td>
|
|
<td>
|
|
<button class="btn-action">시작</button>
|
|
</td>
|
|
<td>
|
|
<button class="btn-delete">삭제</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html> |