basketballcantho/remote-sensing
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add thêm thành phần của api server

Browse Source
This commit is contained in:
Victor Phan
2025-12-12 20:10:19 +07:00
parent c60dea728f
commit 57fbdede1b
1 changed files with 543 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
training_interface.html
+543
View File
@@ -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>