e102ce6db9
- 웹 기반 관리 대시보드 추가 (/admin) - 시스템 상태 모니터링 (AI 서버, Ollama, 활성 모델, API 호출) - 모델 관리 기능 (목록 조회, 테스트, 새로고침) - API 키 관리 시스템 (생성, 조회, 삭제) - 반응형 UI/UX 디자인 (모바일 지원) - 테스트 모드 서버 (test_admin.py) 추가 - 보안: API 키 기반 인증, 키 마스킹 - 실시간 업데이트 (30초 자동 새로고침) 구현 파일: - templates/admin.html: 관리 페이지 HTML - static/admin.css: 관리 페이지 스타일 - static/admin.js: 관리 페이지 JavaScript - server/main.py: 관리 API 엔드포인트 추가 - test_admin.py: 맥북프로 테스트용 서버 - README.md: 관리 페이지 문서 업데이트
128 lines
5.2 KiB
HTML
128 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AI Server Admin Dashboard</title>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
<link href="/static/admin.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="admin-layout">
|
|
<!-- Header -->
|
|
<header class="admin-header">
|
|
<div class="header-content">
|
|
<h1><i class="fas fa-robot"></i> AI Server Admin</h1>
|
|
<div class="header-info">
|
|
<span class="server-status online">
|
|
<i class="fas fa-circle"></i> Online
|
|
</span>
|
|
<span class="current-time" id="current-time"></span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="admin-main">
|
|
<!-- System Status Dashboard -->
|
|
<section class="dashboard-section">
|
|
<h2><i class="fas fa-tachometer-alt"></i> System Status</h2>
|
|
<div class="status-grid">
|
|
<div class="status-card">
|
|
<div class="card-header">
|
|
<i class="fas fa-server"></i>
|
|
<h3>AI Server</h3>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="status-value" id="server-status">Loading...</div>
|
|
<div class="status-detail">Port: {{ server_port }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status-card">
|
|
<div class="card-header">
|
|
<i class="fas fa-brain"></i>
|
|
<h3>Ollama</h3>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="status-value" id="ollama-status">Loading...</div>
|
|
<div class="status-detail" id="ollama-host">{{ ollama_host }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status-card">
|
|
<div class="card-header">
|
|
<i class="fas fa-microchip"></i>
|
|
<h3>Active Model</h3>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="status-value" id="active-model">Loading...</div>
|
|
<div class="status-detail">Base Model</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status-card">
|
|
<div class="card-header">
|
|
<i class="fas fa-chart-line"></i>
|
|
<h3>API Calls</h3>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="status-value" id="api-calls">Loading...</div>
|
|
<div class="status-detail">Today</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Model Management -->
|
|
<section class="dashboard-section">
|
|
<h2><i class="fas fa-cogs"></i> Model Management</h2>
|
|
<div class="models-container">
|
|
<div class="models-header">
|
|
<button class="btn btn-primary" onclick="refreshModels()">
|
|
<i class="fas fa-sync"></i> Refresh
|
|
</button>
|
|
</div>
|
|
<div class="models-table">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Model Name</th>
|
|
<th>Size</th>
|
|
<th>Status</th>
|
|
<th>Last Used</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="models-tbody">
|
|
<tr>
|
|
<td colspan="5" class="loading">Loading models...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- API Key Management -->
|
|
<section class="dashboard-section">
|
|
<h2><i class="fas fa-key"></i> API Key Management</h2>
|
|
<div class="api-keys-container">
|
|
<div class="api-keys-header">
|
|
<button class="btn btn-success" onclick="generateApiKey()">
|
|
<i class="fas fa-plus"></i> Generate New Key
|
|
</button>
|
|
</div>
|
|
<div class="api-keys-list" id="api-keys-list">
|
|
<div class="loading">Loading API keys...</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="/static/admin.js"></script>
|
|
</body>
|
|
</html>
|