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

7 months ago
<!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>