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.
219 lines
11 KiB
219 lines
11 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 style="display:flex; align-items:center;">
|
|
<span style="color:#fff; font-weight:bold; margin-right:20px; font-size:1.2rem;">AI Mission Camera Console</span>
|
|
<button id="tab-video" class="tab-button active">Mission View</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" style="padding:0; background:#333;">
|
|
|
|
<div class="mission-container">
|
|
<aside class="sidebar-nav">
|
|
<div class="nav-item active" data-model="OBJDET">
|
|
<div class="nav-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path fill="currentColor" d="M80-140v-320h320v320H80Zm80-80h160v-160H160v160Zm60-340 220-360 220 360H220Zm142-80h156l-78-126-78 126ZM863-42 757-148q-21 14-45.5 21t-51.5 7q-75 0-127.5-52.5T480-300q0-75 52.5-127.5T660-480q75 0 127.5 52.5T840-300q0 26-7 50.5T813-204L919-98l-56 56ZM660-200q42 0 71-29t29-71q0-42-29-71t-71-29q-42 0-71 29t-29 71q0 42 29 71t71 29ZM320-380Zm120-260Z"/></svg>
|
|
</div>
|
|
<span>객체 탐지</span>
|
|
</div>
|
|
<div class="nav-item" data-model="FIRE">
|
|
<div class="nav-icon">
|
|
<svg viewBox="0 0 24 24"><path fill="currentColor" d="M19.48 12.35c-1.57-4.08-7.16-4.3-5.81-10.23c.1-.44-.37-.78-.75-.55C9.29 3.71 6.68 8 8.87 13.62c.18.46-.36.89-.75.59c-1.81-1.37-2-3.34-1.84-4.75c.06-.52-.62-.77-.91-.34C4.69 10.16 4 11.84 4 14.37c.38 5.6 5.11 7.32 6.81 7.54c2.43.31 5.06-.14 6.95-1.87c2.98-2.73 2.82-6.21 1.72-7.69z"/></svg>
|
|
</div>
|
|
<span>화재 감지</span>
|
|
</div>
|
|
<div class="nav-item" data-model="CROWD">
|
|
<div class="nav-icon">
|
|
<svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 5.5c1.1 0 2-.9 2-2s-.9-2-2-2s-2 .9-2 2s.9 2 2 2zM5.8 14h12.4c1.3 0 2.4-.8 2.8-2L23 6l-1.7-.5l-1.2 3.6l-1.3-1c.2-.5.2-1.1.2-1.7c0-2.8-2.2-5-5-5S9 3.6 9 6.4c0 .5.1 1.1.2 1.6l-1.2 1l-1.3-3.7L5 5.8l2 6.1c.4 1.3 1.5 2.1 2.8 2.1zM11 16v6h2v-6h-2z"/></svg>
|
|
</div>
|
|
<span>군중 위험</span>
|
|
</div>
|
|
<div class="nav-item" data-model="FACEATTR">
|
|
<div class="nav-icon">
|
|
<svg viewBox="0 0 24 24"><path fill="currentColor" d="M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25s1.25-.56 1.25-1.25s-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25s1.25-.56 1.25-1.25s-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8c0-.29.02-.58.05-.86c2.36-1.05 4.23-2.98 5.21-5.37c1.12 2.66 3.04 4.81 5.48 6.02c.09.28.16.57.16.87c-2.9 0-5.51 1.54-7.02 3.86c1.23.94 2.76 1.48 4.42 1.48z"/></svg>
|
|
</div>
|
|
<span>얼굴 인식</span>
|
|
</div>
|
|
<div class="nav-item" data-model="ABNORM">
|
|
<div class="nav-icon">
|
|
<svg viewBox="0 0 24 24"><path fill="currentColor" d="M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2s-2 .9-2 2s.9 2 2 2zM9.8 8.9L7 23h2.1l1.8-8l2.1 2v6h2v-7.5l-2.1-2l.6-3C14.8 12 16.8 13 19 13v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1c-.3 0-.5.1-.8.1L6 8.3V13h2V9.6l1.8-.7z"/></svg>
|
|
<span style="position:absolute; right:10px; top:10px; font-weight:bold;">?</span>
|
|
</div>
|
|
<span>이상 행동</span>
|
|
</div>
|
|
<div class="nav-item" data-model="LPR">
|
|
<div class="nav-icon">
|
|
<svg viewBox="0 0 24 24"><path fill="currentColor" d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.85 7h10.29l1.08 3.11H5.77L6.85 7zM19 17H5v-5h14v5z"/><circle cx="7.5" cy="14.5" r="1.5"/><circle cx="16.5" cy="14.5" r="1.5"/></svg>
|
|
</div>
|
|
<span>차량 인식</span>
|
|
</div>
|
|
<div class="nav-item" data-model="VIPTRACK">
|
|
<div class="nav-icon">
|
|
<svg viewBox="0 0 24 24"><path fill="currentColor" d="M5 5h4V3H3v6h2V5zm10-2v2h4v4h2V3h-6zm4 14h-4v2h6v-6h-2v4zM5 19v-4H3v6h6v-2H5zM12 7a5 5 0 1 0 5 5a5 5 0 0 0-5-5zm0 8a3 3 0 1 1 3-3a3 3 0 0 1-3 3z"/></svg>
|
|
</div>
|
|
<span>관심 인물</span>
|
|
</div>
|
|
</aside>
|
|
|
|
<div class="mission-center">
|
|
<div class="filter-bar" id="filter-bar">
|
|
<label class="filter-check"><input type="checkbox" checked> all</label>
|
|
<span class="v-line">|</span>
|
|
<label class="filter-check"><input type="checkbox" checked> waiting...</label>
|
|
</div>
|
|
|
|
<div class="video-stage">
|
|
<div class="video-placeholder-text"></div>
|
|
<canvas id="frame"></canvas>
|
|
<div id="bbox-container"></div>
|
|
</div>
|
|
|
|
<div class="mission-footer">
|
|
<div class="status-left">
|
|
<span id="connection-status" class="conn-active">접속됨</span>
|
|
<span class="v-line">|</span>
|
|
<span id="connection-msg">영상 수신 중</span>
|
|
</div>
|
|
<div class="status-right" style="display:flex; align-items:center;">
|
|
<span id="resolution-display">-</span>
|
|
<span id="fps-display">0 FPS</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="mission-right">
|
|
<div class="right-header">
|
|
<span class="active">Summary</span>
|
|
<span>Log</span>
|
|
</div>
|
|
<div class="summary-content" id="summary-list">
|
|
<div class="summary-row">
|
|
<span class="label">Waiting...</span>
|
|
<span class="count">-</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</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>
|
|
|
|
<!--//2025-12-04 15:13--> |