feat: AI 서버 관리 페이지 Phase 2 고급 기능 구현
🤖 모델 관리 고도화: - 모델 다운로드: 인기 모델들 원클릭 설치 (llama, qwen, gemma, codellama, mistral) - 모델 삭제: 확인 모달과 함께 안전한 삭제 기능 - 사용 가능한 모델 목록: 태그별 분류 (chat, code, lightweight 등) - 모델 상세 정보: 설명, 크기, 용도별 태그 표시 �� 실시간 시스템 모니터링: - CPU/메모리/디스크/GPU 사용률 원형 프로그레스바 - 색상 코딩: 사용률에 따른 시각적 구분 (녹색/주황/빨강) - 실시간 업데이트: 30초마다 자동 새로고침 - 시스템 리소스 상세 정보 (코어 수, 용량, 온도 등) 🎨 고급 UI/UX: - 모달 창: 부드러운 애니메이션과 블러 효과 - 원형 프로그레스바: CSS 기반 실시간 업데이트 - 반응형 디자인: 모바일 최적화 - 태그 시스템: 모델 분류 및 시각화 🔧 새 API 엔드포인트: - POST /admin/models/download - 모델 다운로드 - DELETE /admin/models/{model_name} - 모델 삭제 - GET /admin/models/available - 다운로드 가능한 모델 목록 - GET /admin/system/stats - 시스템 리소스 사용률 수정된 파일: - server/main.py: Phase 2 API 엔드포인트 추가 - test_admin.py: 테스트 모드 Phase 2 기능 추가 - templates/admin.html: 시스템 모니터링 섹션, 모달 창 추가 - static/admin.css: 모니터링 차트, 모달 스타일 추가 - static/admin.js: Phase 2 기능 JavaScript 구현
This commit is contained in:
Hyungi Ahn
@@ -82,6 +82,9 @@
|
||||
<button class="btn btn-primary" onclick="refreshModels()">
|
||||
<i class="fas fa-sync"></i> Refresh
|
||||
</button>
|
||||
<button class="btn btn-success" onclick="openModelDownload()">
|
||||
<i class="fas fa-download"></i> Download Model
|
||||
</button>
|
||||
</div>
|
||||
<div class="models-table">
|
||||
<table>
|
||||
@@ -104,6 +107,74 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- System Monitoring (Phase 2) -->
|
||||
<section class="dashboard-section">
|
||||
<h2><i class="fas fa-chart-line"></i> System Monitoring</h2>
|
||||
<div class="monitoring-container">
|
||||
<div class="monitoring-grid">
|
||||
<div class="monitor-card">
|
||||
<div class="card-header">
|
||||
<i class="fas fa-microchip"></i>
|
||||
<h3>CPU Usage</h3>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="progress-circle" id="cpu-progress">
|
||||
<span class="progress-text" id="cpu-text">--</span>
|
||||
</div>
|
||||
<div class="monitor-details">
|
||||
<span id="cpu-cores">-- cores</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="monitor-card">
|
||||
<div class="card-header">
|
||||
<i class="fas fa-memory"></i>
|
||||
<h3>Memory Usage</h3>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="progress-circle" id="memory-progress">
|
||||
<span class="progress-text" id="memory-text">--</span>
|
||||
</div>
|
||||
<div class="monitor-details">
|
||||
<span id="memory-details">-- / -- GB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="monitor-card">
|
||||
<div class="card-header">
|
||||
<i class="fas fa-hdd"></i>
|
||||
<h3>Disk Usage</h3>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="progress-circle" id="disk-progress">
|
||||
<span class="progress-text" id="disk-text">--</span>
|
||||
</div>
|
||||
<div class="monitor-details">
|
||||
<span id="disk-details">-- / -- GB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="monitor-card">
|
||||
<div class="card-header">
|
||||
<i class="fas fa-thermometer-half"></i>
|
||||
<h3>GPU Status</h3>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="progress-circle" id="gpu-progress">
|
||||
<span class="progress-text" id="gpu-text">--</span>
|
||||
</div>
|
||||
<div class="monitor-details">
|
||||
<span id="gpu-details">No GPU detected</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- API Key Management -->
|
||||
<section class="dashboard-section">
|
||||
<h2><i class="fas fa-key"></i> API Key Management</h2>
|
||||
@@ -121,6 +192,46 @@
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Model Download Modal -->
|
||||
<div id="model-download-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3><i class="fas fa-download"></i> Download Model</h3>
|
||||
<button class="close-btn" onclick="closeModal('model-download-modal')">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="available-models-list">
|
||||
<div class="loading">Loading available models...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Model Delete Confirmation Modal -->
|
||||
<div id="model-delete-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3><i class="fas fa-trash"></i> Delete Model</h3>
|
||||
<button class="close-btn" onclick="closeModal('model-delete-modal')">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Are you sure you want to delete this model?</p>
|
||||
<div class="model-delete-info">
|
||||
<strong id="delete-model-name">Model Name</strong>
|
||||
<p>This action cannot be undone.</p>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button class="btn btn-danger" id="confirm-delete-btn">
|
||||
<i class="fas fa-trash"></i> Delete
|
||||
</button>
|
||||
<button class="btn btn-secondary" onclick="closeModal('model-delete-modal')">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="/static/admin.js"></script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user