add thêm thành phần của api server
This commit is contained in:
Victor Phan
@@ -0,0 +1,543 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="vi">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Land Classification Training Interface</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
padding: 20px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: white;
|
||||||
|
border-radius: 20px;
|
||||||
|
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 30px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header h1 {
|
||||||
|
font-size: 2.5em;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header p {
|
||||||
|
opacity: 0.9;
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
padding: 20px;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section h2 {
|
||||||
|
color: #667eea;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input, .form-group select {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
border: 2px solid #e0e0e0;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 1em;
|
||||||
|
transition: border-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input:focus, .form-group select:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #667eea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 12px 30px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: #6c757d;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger {
|
||||||
|
background: #dc3545;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-box {
|
||||||
|
padding: 20px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
border-left: 5px solid #667eea;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-box.success {
|
||||||
|
border-left-color: #28a745;
|
||||||
|
background: #d4edda;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-box.error {
|
||||||
|
border-left-color: #dc3545;
|
||||||
|
background: #f8d7da;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-box.training {
|
||||||
|
border-left-color: #ffc107;
|
||||||
|
background: #fff3cd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
height: 30px;
|
||||||
|
background: #e0e0e0;
|
||||||
|
border-radius: 15px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
||||||
|
transition: width 0.3s;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: white;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preset-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preset-btn {
|
||||||
|
padding: 8px 15px;
|
||||||
|
background: white;
|
||||||
|
border: 2px solid #667eea;
|
||||||
|
color: #667eea;
|
||||||
|
border-radius: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preset-btn:hover {
|
||||||
|
background: #667eea;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
background: #e3f2fd;
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
border-left: 4px solid #2196f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.model-list {
|
||||||
|
max-height: 400px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.model-item {
|
||||||
|
background: white;
|
||||||
|
padding: 15px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.model-item h3 {
|
||||||
|
color: #667eea;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.model-item p {
|
||||||
|
margin: 5px 0;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="header">
|
||||||
|
<h1>🌍 Land Classification Training</h1>
|
||||||
|
<p>Giao diện training model phân loại đất từ ảnh vệ tinh</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<!-- Status Section -->
|
||||||
|
<div class="section">
|
||||||
|
<h2>📊 Trạng Thái Training</h2>
|
||||||
|
<div id="statusBox" class="status-box">
|
||||||
|
<p><strong>Trạng thái:</strong> <span id="statusText">Chưa bắt đầu</span></p>
|
||||||
|
<p><strong>Tiến độ:</strong> <span id="progressText">-</span></p>
|
||||||
|
<div id="progressBar" class="progress" style="display: none;">
|
||||||
|
<div class="progress-bar" style="width: 0%;">0%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Configuration Section -->
|
||||||
|
<div class="section">
|
||||||
|
<h2>⚙️ Cấu Hình Training</h2>
|
||||||
|
|
||||||
|
<div class="info">
|
||||||
|
<strong>💡 Lựa chọn nhanh:</strong> Chọn một trong các preset bên dưới hoặc tùy chỉnh thủ công
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="preset-buttons" id="presetButtons">
|
||||||
|
<!-- Preset buttons will be inserted here -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form id="trainingForm">
|
||||||
|
<h3 style="margin-bottom: 15px; color: #667eea;">📍 Khu Vực (Bounding Box)</h3>
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Min Longitude:</label>
|
||||||
|
<input type="number" step="0.1" id="minLon" value="105.6" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Min Latitude:</label>
|
||||||
|
<input type="number" step="0.1" id="minLat" value="9.3" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Max Longitude:</label>
|
||||||
|
<input type="number" step="0.1" id="maxLon" value="106.2" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Max Latitude:</label>
|
||||||
|
<input type="number" step="0.1" id="maxLat" value="9.8" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 style="margin: 20px 0 15px; color: #667eea;">📅 Thời Gian</h3>
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Ngày bắt đầu:</label>
|
||||||
|
<input type="date" id="startDate" value="2023-03-01" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Ngày kết thúc:</label>
|
||||||
|
<input type="date" id="endDate" value="2023-05-31" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 style="margin: 20px 0 15px; color: #667eea;">🛰️ Dữ Liệu Vệ Tinh</h3>
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Số scenes tối đa:</label>
|
||||||
|
<input type="number" id="maxScenes" value="12" min="1" max="100" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Cloud cover (%):</label>
|
||||||
|
<input type="number" id="cloudCover" value="30" min="0" max="100" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Độ phân giải (m):</label>
|
||||||
|
<select id="resolution" required>
|
||||||
|
<option value="10">10m (Chính xác cao)</option>
|
||||||
|
<option value="20" selected>20m (Cân bằng)</option>
|
||||||
|
<option value="30">30m (Nhanh)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 style="margin: 20px 0 15px; color: #667eea;">🤖 Model Parameters</h3>
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>N Estimators:</label>
|
||||||
|
<input type="number" id="nEstimators" value="100" min="10" max="1000" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Max Depth:</label>
|
||||||
|
<input type="number" id="maxDepth" value="20" min="1" max="50" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Learning Rate:</label>
|
||||||
|
<input type="number" step="0.01" id="learningRate" value="0.1" min="0.01" max="1" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Use GPU:</label>
|
||||||
|
<select id="useGpu" required>
|
||||||
|
<option value="true" selected>Có (RTX 4060)</option>
|
||||||
|
<option value="false">Không (CPU)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-top: 30px; text-align: center;">
|
||||||
|
<button type="submit" class="btn btn-primary" id="startBtn">
|
||||||
|
🚀 Bắt Đầu Training
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-danger" id="stopBtn" style="display: none;">
|
||||||
|
⏹️ Dừng Training
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Models List Section -->
|
||||||
|
<div class="section">
|
||||||
|
<h2>📦 Danh Sách Models Đã Train</h2>
|
||||||
|
<button class="btn btn-secondary" onclick="loadModels()">🔄 Refresh</button>
|
||||||
|
<div id="modelsList" class="model-list" style="margin-top: 15px;">
|
||||||
|
<p>Đang tải...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const API_BASE = 'http://localhost:8000/api';
|
||||||
|
let statusInterval = null;
|
||||||
|
|
||||||
|
// Load presets on page load
|
||||||
|
window.onload = async () => {
|
||||||
|
await loadPresets();
|
||||||
|
await loadModels();
|
||||||
|
checkStatus();
|
||||||
|
};
|
||||||
|
|
||||||
|
// Load preset configurations
|
||||||
|
async function loadPresets() {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE}/config/presets`);
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
const container = document.getElementById('presetButtons');
|
||||||
|
container.innerHTML = '';
|
||||||
|
|
||||||
|
data.presets.forEach(preset => {
|
||||||
|
const btn = document.createElement('button');
|
||||||
|
btn.className = 'preset-btn';
|
||||||
|
btn.textContent = preset.name;
|
||||||
|
btn.onclick = () => applyPreset(preset.config);
|
||||||
|
container.appendChild(btn);
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading presets:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply preset configuration
|
||||||
|
function applyPreset(config) {
|
||||||
|
document.getElementById('minLon').value = config.min_lon;
|
||||||
|
document.getElementById('minLat').value = config.min_lat;
|
||||||
|
document.getElementById('maxLon').value = config.max_lon;
|
||||||
|
document.getElementById('maxLat').value = config.max_lat;
|
||||||
|
document.getElementById('startDate').value = config.start_date;
|
||||||
|
document.getElementById('endDate').value = config.end_date;
|
||||||
|
document.getElementById('maxScenes').value = config.max_scenes;
|
||||||
|
document.getElementById('cloudCover').value = config.cloud_cover;
|
||||||
|
document.getElementById('resolution').value = config.resolution;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle form submission
|
||||||
|
document.getElementById('trainingForm').onsubmit = async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
min_lon: parseFloat(document.getElementById('minLon').value),
|
||||||
|
min_lat: parseFloat(document.getElementById('minLat').value),
|
||||||
|
max_lon: parseFloat(document.getElementById('maxLon').value),
|
||||||
|
max_lat: parseFloat(document.getElementById('maxLat').value),
|
||||||
|
start_date: document.getElementById('startDate').value,
|
||||||
|
end_date: document.getElementById('endDate').value,
|
||||||
|
max_scenes: parseInt(document.getElementById('maxScenes').value),
|
||||||
|
cloud_cover: parseInt(document.getElementById('cloudCover').value),
|
||||||
|
resolution: parseInt(document.getElementById('resolution').value),
|
||||||
|
n_estimators: parseInt(document.getElementById('nEstimators').value),
|
||||||
|
max_depth: parseInt(document.getElementById('maxDepth').value),
|
||||||
|
learning_rate: parseFloat(document.getElementById('learningRate').value),
|
||||||
|
use_gpu: document.getElementById('useGpu').value === 'true'
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE}/training/start`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {'Content-Type': 'application/json'},
|
||||||
|
body: JSON.stringify(config)
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const error = await response.json();
|
||||||
|
alert('Lỗi: ' + error.detail);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
alert(result.message);
|
||||||
|
|
||||||
|
// Start monitoring status
|
||||||
|
if (statusInterval) clearInterval(statusInterval);
|
||||||
|
statusInterval = setInterval(checkStatus, 2000);
|
||||||
|
|
||||||
|
document.getElementById('startBtn').style.display = 'none';
|
||||||
|
document.getElementById('stopBtn').style.display = 'inline-block';
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
alert('Lỗi kết nối: ' + error.message);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Stop training
|
||||||
|
document.getElementById('stopBtn').onclick = async () => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE}/training/stop`, {method: 'POST'});
|
||||||
|
const result = await response.json();
|
||||||
|
alert(result.message);
|
||||||
|
checkStatus();
|
||||||
|
} catch (error) {
|
||||||
|
alert('Lỗi: ' + error.message);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Check training status
|
||||||
|
async function checkStatus() {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE}/training/status`);
|
||||||
|
const status = await response.json();
|
||||||
|
|
||||||
|
const statusBox = document.getElementById('statusBox');
|
||||||
|
const statusText = document.getElementById('statusText');
|
||||||
|
const progressText = document.getElementById('progressText');
|
||||||
|
|
||||||
|
statusText.textContent = status.is_training ? 'Đang training...' :
|
||||||
|
(status.error ? 'Lỗi' : (status.result ? 'Hoàn thành' : 'Chờ'));
|
||||||
|
progressText.textContent = status.progress || '-';
|
||||||
|
|
||||||
|
// Update status box styling
|
||||||
|
statusBox.className = 'status-box';
|
||||||
|
if (status.is_training) {
|
||||||
|
statusBox.classList.add('training');
|
||||||
|
} else if (status.error) {
|
||||||
|
statusBox.classList.add('error');
|
||||||
|
} else if (status.result) {
|
||||||
|
statusBox.classList.add('success');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show/hide buttons
|
||||||
|
if (status.is_training) {
|
||||||
|
document.getElementById('startBtn').style.display = 'none';
|
||||||
|
document.getElementById('stopBtn').style.display = 'inline-block';
|
||||||
|
} else {
|
||||||
|
document.getElementById('startBtn').style.display = 'inline-block';
|
||||||
|
document.getElementById('stopBtn').style.display = 'none';
|
||||||
|
|
||||||
|
if (statusInterval) {
|
||||||
|
clearInterval(statusInterval);
|
||||||
|
statusInterval = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (status.result) {
|
||||||
|
await loadModels();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error checking status:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load models list
|
||||||
|
async function loadModels() {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE}/models/list`);
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
const container = document.getElementById('modelsList');
|
||||||
|
|
||||||
|
if (data.models.length === 0) {
|
||||||
|
container.innerHTML = '<p>Chưa có model nào</p>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
container.innerHTML = '';
|
||||||
|
data.models.forEach(model => {
|
||||||
|
const item = document.createElement('div');
|
||||||
|
item.className = 'model-item';
|
||||||
|
item.innerHTML = `
|
||||||
|
<h3>📦 ${model.filename}</h3>
|
||||||
|
<p><strong>Tạo lúc:</strong> ${new Date(model.created).toLocaleString('vi-VN')}</p>
|
||||||
|
<p><strong>Kích thước:</strong> ${model.size_mb} MB</p>
|
||||||
|
${model.info.train_accuracy ? `<p><strong>Train Accuracy:</strong> ${(model.info.train_accuracy * 100).toFixed(2)}%</p>` : ''}
|
||||||
|
${model.info.test_accuracy ? `<p><strong>Test Accuracy:</strong> ${(model.info.test_accuracy * 100).toFixed(2)}%</p>` : ''}
|
||||||
|
`;
|
||||||
|
container.appendChild(item);
|
||||||
|
});
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading models:', error);
|
||||||
|
document.getElementById('modelsList').innerHTML = '<p>Lỗi khi tải danh sách models</p>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user