Victor Phan
936 lines
32 KiB
HTML
936 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dashboard - Land Classification System</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.header {
|
|
background: white;
|
|
padding: 25px;
|
|
border-radius: 15px;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
|
margin-bottom: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.header h1 {
|
|
color: #667eea;
|
|
font-size: 2.5em;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.header p {
|
|
color: #666;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.nav-tabs {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
background: white;
|
|
padding: 15px;
|
|
border-radius: 15px;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.nav-tab {
|
|
flex: 1;
|
|
padding: 15px 25px;
|
|
background: #f5f5f5;
|
|
border: none;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
font-size: 1.1em;
|
|
font-weight: 600;
|
|
transition: all 0.3s;
|
|
color: #666;
|
|
}
|
|
|
|
.nav-tab:hover {
|
|
background: #e0e0e0;
|
|
}
|
|
|
|
.nav-tab.active {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
|
|
}
|
|
|
|
.tab-content {
|
|
display: none;
|
|
}
|
|
|
|
.tab-content.active {
|
|
display: block;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: white;
|
|
padding: 25px;
|
|
border-radius: 15px;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.stat-card .icon {
|
|
font-size: 3em;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.stat-card .value {
|
|
font-size: 2.5em;
|
|
font-weight: bold;
|
|
color: #667eea;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.stat-card .label {
|
|
color: #666;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.chart-container {
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 15px;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.chart-container h3 {
|
|
margin-bottom: 20px;
|
|
color: #333;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.chart-wrapper {
|
|
position: relative;
|
|
height: 400px;
|
|
}
|
|
|
|
canvas {
|
|
max-height: 100%;
|
|
}
|
|
|
|
.batch-queue {
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 15px;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.batch-item {
|
|
padding: 20px;
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 10px;
|
|
margin-bottom: 15px;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.batch-item:hover {
|
|
border-color: #667eea;
|
|
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
|
|
}
|
|
|
|
.batch-item.running {
|
|
border-color: #4caf50;
|
|
background: #f1f8f4;
|
|
}
|
|
|
|
.batch-item.completed {
|
|
border-color: #2196f3;
|
|
background: #e3f2fd;
|
|
}
|
|
|
|
.batch-item.failed {
|
|
border-color: #f44336;
|
|
background: #ffebee;
|
|
}
|
|
|
|
.batch-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.batch-name {
|
|
font-size: 1.2em;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.batch-status {
|
|
padding: 8px 16px;
|
|
border-radius: 20px;
|
|
font-weight: 600;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.batch-status.queued {
|
|
background: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
|
|
.batch-status.running {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
}
|
|
|
|
.batch-status.completed {
|
|
background: #cce5ff;
|
|
color: #004085;
|
|
}
|
|
|
|
.batch-status.failed {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 8px;
|
|
background: #e0e0e0;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
|
transition: width 0.3s;
|
|
}
|
|
|
|
.btn {
|
|
padding: 12px 30px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-size: 1em;
|
|
font-weight: 600;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 7px 20px rgba(102, 126, 234, 0.6);
|
|
}
|
|
|
|
.btn-danger {
|
|
background: #f44336;
|
|
color: white;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background: #d32f2f;
|
|
}
|
|
|
|
.btn-success {
|
|
background: #4caf50;
|
|
color: white;
|
|
}
|
|
|
|
.btn-success:hover {
|
|
background: #45a049;
|
|
}
|
|
|
|
.export-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.file-upload {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.file-upload input[type="file"] {
|
|
display: none;
|
|
}
|
|
|
|
.file-upload label {
|
|
display: inline-block;
|
|
padding: 12px 30px;
|
|
background: #667eea;
|
|
color: white;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.file-upload label:hover {
|
|
background: #5568d3;
|
|
}
|
|
|
|
.loading {
|
|
text-align: center;
|
|
padding: 40px;
|
|
color: #666;
|
|
}
|
|
|
|
.loading::after {
|
|
content: '...';
|
|
animation: loading 1.5s infinite;
|
|
}
|
|
|
|
@keyframes loading {
|
|
0%, 20% { content: '.'; }
|
|
40% { content: '..'; }
|
|
60%, 100% { content: '...'; }
|
|
}
|
|
|
|
.model-selector {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.model-selector select {
|
|
width: 100%;
|
|
padding: 12px;
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 8px;
|
|
font-size: 1em;
|
|
background: white;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.model-selector select:focus {
|
|
outline: none;
|
|
border-color: #667eea;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>📊 Dashboard - Land Classification System</h1>
|
|
<p>Tổng quan hệ thống phân loại đất từ xa</p>
|
|
</div>
|
|
|
|
<div class="nav-tabs">
|
|
<button class="nav-tab active" onclick="switchTab('overview')">📈 Tổng Quan</button>
|
|
<button class="nav-tab" onclick="switchTab('trends')">📊 Accuracy Trends</button>
|
|
<button class="nav-tab" onclick="switchTab('batch')">🔄 Batch Processing</button>
|
|
</div>
|
|
|
|
<!-- Tab: Tổng Quan -->
|
|
<div id="overview" class="tab-content active">
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="icon">🤖</div>
|
|
<div class="value" id="totalModels">-</div>
|
|
<div class="label">Models Trained</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="icon">🗺️</div>
|
|
<div class="value" id="totalPredictions">-</div>
|
|
<div class="label">Predictions Generated</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="icon">📄</div>
|
|
<div class="value" id="totalReports">-</div>
|
|
<div class="label">Reports Created</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="icon">✅</div>
|
|
<div class="value" id="latestAccuracy">-</div>
|
|
<div class="label">Latest Model Accuracy</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chart-container">
|
|
<h3>📊 Phân bố các lớp đất (Model mới nhất)</h3>
|
|
<div class="model-selector">
|
|
<select id="modelSelect" onchange="loadClassDistribution()">
|
|
<option value="">Chọn model...</option>
|
|
</select>
|
|
</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="classDistChart"></canvas>
|
|
</div>
|
|
<div class="export-buttons">
|
|
<button class="btn btn-primary" onclick="exportChart('classDistChart', 'class-distribution.png')">
|
|
💾 Export PNG
|
|
</button>
|
|
<button class="btn btn-success" onclick="exportChartPDF('classDistChart', 'class-distribution.pdf')">
|
|
📄 Export PDF
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab: Accuracy Trends -->
|
|
<div id="trends" class="tab-content">
|
|
<div class="chart-container">
|
|
<h3>📈 Accuracy Trends Over Time</h3>
|
|
<div class="chart-wrapper">
|
|
<canvas id="accuracyTrendChart"></canvas>
|
|
</div>
|
|
<div class="export-buttons">
|
|
<button class="btn btn-primary" onclick="exportChart('accuracyTrendChart', 'accuracy-trends.png')">
|
|
💾 Export PNG
|
|
</button>
|
|
<button class="btn btn-success" onclick="exportChartPDF('accuracyTrendChart', 'accuracy-trends.pdf')">
|
|
📄 Export PDF
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chart-container">
|
|
<h3>📊 F1-Score Comparison</h3>
|
|
<div class="chart-wrapper">
|
|
<canvas id="f1ScoreChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab: Batch Processing -->
|
|
<div id="batch" class="tab-content">
|
|
<div class="batch-queue">
|
|
<h3>🔄 Batch Prediction Queue</h3>
|
|
|
|
<div class="file-upload">
|
|
<label for="csvFile">📁 Upload CSV File</label>
|
|
<input type="file" id="csvFile" accept=".csv" onchange="handleCSVUpload(event)">
|
|
<p style="margin-top: 10px; color: #666;">
|
|
Format CSV: name,min_lon,min_lat,max_lon,max_lat
|
|
</p>
|
|
</div>
|
|
|
|
<div class="model-selector">
|
|
<select id="batchModelSelect">
|
|
<option value="">Chọn model để predict...</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button class="btn btn-primary" onclick="startBatchPrediction()" style="margin-bottom: 30px;">
|
|
🚀 Start Batch Prediction
|
|
</button>
|
|
|
|
<h4 style="margin: 20px 0;">Queue Status</h4>
|
|
<div class="stats-grid" style="margin-bottom: 30px;">
|
|
<div class="stat-card">
|
|
<div class="value" id="queuedJobs">0</div>
|
|
<div class="label">⏳ Queued</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="value" id="runningJobs">0</div>
|
|
<div class="label">▶️ Running</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="value" id="completedJobs">0</div>
|
|
<div class="label">✅ Completed</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="value" id="failedJobs">0</div>
|
|
<div class="label">❌ Failed</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 style="margin: 20px 0;">Active Jobs</h4>
|
|
<div id="batchJobs">
|
|
<p class="loading">Đang tải dữ liệu</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
|
|
|
|
<script>
|
|
let charts = {};
|
|
let batchItems = [];
|
|
let refreshInterval = null;
|
|
|
|
// Tab switching
|
|
function switchTab(tabName) {
|
|
// Update tab buttons
|
|
document.querySelectorAll('.nav-tab').forEach(tab => {
|
|
tab.classList.remove('active');
|
|
});
|
|
event.target.classList.add('active');
|
|
|
|
// Update tab content
|
|
document.querySelectorAll('.tab-content').forEach(content => {
|
|
content.classList.remove('active');
|
|
});
|
|
document.getElementById(tabName).classList.add('active');
|
|
|
|
// Load data for the active tab
|
|
if (tabName === 'overview') {
|
|
loadDashboardStats();
|
|
} else if (tabName === 'trends') {
|
|
loadAccuracyTrends();
|
|
} else if (tabName === 'batch') {
|
|
loadBatchStatus();
|
|
startBatchRefresh();
|
|
} else {
|
|
stopBatchRefresh();
|
|
}
|
|
}
|
|
|
|
// Load dashboard statistics
|
|
async function loadDashboardStats() {
|
|
try {
|
|
const response = await fetch('/api/dashboard/statistics');
|
|
const data = await response.json();
|
|
|
|
document.getElementById('totalModels').textContent = data.models.total;
|
|
document.getElementById('totalPredictions').textContent = data.predictions.total;
|
|
document.getElementById('totalReports').textContent = data.reports.total;
|
|
|
|
if (data.models.latest && data.models.latest.metrics) {
|
|
const accuracy = (data.models.latest.metrics.accuracy * 100).toFixed(2);
|
|
document.getElementById('latestAccuracy').textContent = accuracy + '%';
|
|
}
|
|
|
|
// Load models for selector
|
|
await loadModelsList();
|
|
} catch (error) {
|
|
console.error('Error loading dashboard stats:', error);
|
|
}
|
|
}
|
|
|
|
// Load models list
|
|
async function loadModelsList() {
|
|
try {
|
|
const response = await fetch('/api/models/list');
|
|
const data = await response.json();
|
|
|
|
const modelSelect = document.getElementById('modelSelect');
|
|
const batchModelSelect = document.getElementById('batchModelSelect');
|
|
|
|
modelSelect.innerHTML = '<option value="">Chọn model...</option>';
|
|
batchModelSelect.innerHTML = '<option value="">Chọn model...</option>';
|
|
|
|
data.models.forEach(model => {
|
|
const option = document.createElement('option');
|
|
option.value = model.filename;
|
|
option.textContent = `${model.filename} (${model.created})`;
|
|
modelSelect.appendChild(option.cloneNode(true));
|
|
batchModelSelect.appendChild(option);
|
|
});
|
|
|
|
// Auto-select latest model
|
|
if (data.models.length > 0) {
|
|
modelSelect.value = data.models[0].filename;
|
|
await loadClassDistribution();
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading models:', error);
|
|
}
|
|
}
|
|
|
|
// Load class distribution
|
|
async function loadClassDistribution() {
|
|
const modelFilename = document.getElementById('modelSelect').value;
|
|
if (!modelFilename) return;
|
|
|
|
try {
|
|
const response = await fetch(`/api/dashboard/class-distribution/${modelFilename}`);
|
|
const data = await response.json();
|
|
|
|
const labels = Object.keys(data.class_distribution);
|
|
const values = Object.values(data.class_distribution);
|
|
|
|
if (charts.classDistChart) {
|
|
charts.classDistChart.destroy();
|
|
}
|
|
|
|
const ctx = document.getElementById('classDistChart').getContext('2d');
|
|
charts.classDistChart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 'Số lượng mẫu',
|
|
data: values,
|
|
backgroundColor: [
|
|
'rgba(102, 126, 234, 0.7)',
|
|
'rgba(118, 75, 162, 0.7)',
|
|
'rgba(76, 175, 80, 0.7)',
|
|
'rgba(244, 67, 54, 0.7)',
|
|
'rgba(33, 150, 243, 0.7)',
|
|
'rgba(255, 193, 7, 0.7)',
|
|
],
|
|
borderColor: [
|
|
'rgba(102, 126, 234, 1)',
|
|
'rgba(118, 75, 162, 1)',
|
|
'rgba(76, 175, 80, 1)',
|
|
'rgba(244, 67, 54, 1)',
|
|
'rgba(33, 150, 243, 1)',
|
|
'rgba(255, 193, 7, 1)',
|
|
],
|
|
borderWidth: 2
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: `Tổng: ${data.total_samples} mẫu`
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
}
|
|
}
|
|
});
|
|
} catch (error) {
|
|
console.error('Error loading class distribution:', error);
|
|
}
|
|
}
|
|
|
|
// Load accuracy trends
|
|
async function loadAccuracyTrends() {
|
|
try {
|
|
const response = await fetch('/api/dashboard/accuracy-trends');
|
|
const data = await response.json();
|
|
|
|
if (data.trends.length === 0) {
|
|
return;
|
|
}
|
|
|
|
// Prepare data
|
|
const labels = data.trends.map(d => new Date(d.date).toLocaleDateString('vi-VN'));
|
|
const accuracies = data.trends.map(d => d.accuracy * 100);
|
|
const f1Scores = data.trends.map(d => d.f1_score * 100);
|
|
const precisions = data.trends.map(d => d.precision * 100);
|
|
const recalls = data.trends.map(d => d.recall * 100);
|
|
|
|
// Accuracy Trend Chart
|
|
if (charts.accuracyTrendChart) {
|
|
charts.accuracyTrendChart.destroy();
|
|
}
|
|
|
|
const ctx1 = document.getElementById('accuracyTrendChart').getContext('2d');
|
|
charts.accuracyTrendChart = new Chart(ctx1, {
|
|
type: 'line',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [
|
|
{
|
|
label: 'Accuracy (%)',
|
|
data: accuracies,
|
|
borderColor: 'rgba(102, 126, 234, 1)',
|
|
backgroundColor: 'rgba(102, 126, 234, 0.1)',
|
|
fill: true,
|
|
tension: 0.4
|
|
},
|
|
{
|
|
label: 'Precision (%)',
|
|
data: precisions,
|
|
borderColor: 'rgba(76, 175, 80, 1)',
|
|
backgroundColor: 'rgba(76, 175, 80, 0.1)',
|
|
fill: false,
|
|
tension: 0.4
|
|
},
|
|
{
|
|
label: 'Recall (%)',
|
|
data: recalls,
|
|
borderColor: 'rgba(244, 67, 54, 1)',
|
|
backgroundColor: 'rgba(244, 67, 54, 0.1)',
|
|
fill: false,
|
|
tension: 0.4
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: true,
|
|
position: 'top'
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
max: 100,
|
|
ticks: {
|
|
callback: function(value) {
|
|
return value + '%';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// F1-Score Chart
|
|
if (charts.f1ScoreChart) {
|
|
charts.f1ScoreChart.destroy();
|
|
}
|
|
|
|
const ctx2 = document.getElementById('f1ScoreChart').getContext('2d');
|
|
charts.f1ScoreChart = new Chart(ctx2, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 'F1-Score (%)',
|
|
data: f1Scores,
|
|
backgroundColor: 'rgba(118, 75, 162, 0.7)',
|
|
borderColor: 'rgba(118, 75, 162, 1)',
|
|
borderWidth: 2
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
max: 100,
|
|
ticks: {
|
|
callback: function(value) {
|
|
return value + '%';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
} catch (error) {
|
|
console.error('Error loading accuracy trends:', error);
|
|
}
|
|
}
|
|
|
|
// Export chart as PNG
|
|
function exportChart(chartId, filename) {
|
|
const canvas = document.getElementById(chartId);
|
|
const url = canvas.toDataURL('image/png');
|
|
const link = document.createElement('a');
|
|
link.download = filename;
|
|
link.href = url;
|
|
link.click();
|
|
}
|
|
|
|
// Export chart as PDF
|
|
function exportChartPDF(chartId, filename) {
|
|
const canvas = document.getElementById(chartId);
|
|
const imgData = canvas.toDataURL('image/png');
|
|
|
|
const { jsPDF } = window.jspdf;
|
|
const pdf = new jsPDF({
|
|
orientation: 'landscape',
|
|
unit: 'px',
|
|
format: [canvas.width, canvas.height]
|
|
});
|
|
|
|
pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height);
|
|
pdf.save(filename);
|
|
}
|
|
|
|
// Handle CSV upload
|
|
function handleCSVUpload(event) {
|
|
const file = event.target.files[0];
|
|
if (!file) return;
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
const text = e.target.result;
|
|
parseCSV(text);
|
|
};
|
|
reader.readAsText(file);
|
|
}
|
|
|
|
// Parse CSV
|
|
function parseCSV(text) {
|
|
const lines = text.trim().split('\n');
|
|
batchItems = [];
|
|
|
|
// Skip header
|
|
for (let i = 1; i < lines.length; i++) {
|
|
const parts = lines[i].split(',');
|
|
if (parts.length >= 5) {
|
|
batchItems.push({
|
|
name: parts[0].trim(),
|
|
min_lon: parseFloat(parts[1]),
|
|
min_lat: parseFloat(parts[2]),
|
|
max_lon: parseFloat(parts[3]),
|
|
max_lat: parseFloat(parts[4]),
|
|
start_date: parts[5]?.trim() || "2023-03-01",
|
|
end_date: parts[6]?.trim() || "2023-05-31",
|
|
max_scenes: parseInt(parts[7]) || 12,
|
|
cloud_cover: parseInt(parts[8]) || 30,
|
|
resolution: parseInt(parts[9]) || 20
|
|
});
|
|
}
|
|
}
|
|
|
|
alert(`✅ Đã tải ${batchItems.length} khu vực từ CSV`);
|
|
}
|
|
|
|
// Start batch prediction
|
|
async function startBatchPrediction() {
|
|
const modelFilename = document.getElementById('batchModelSelect').value;
|
|
|
|
if (!modelFilename) {
|
|
alert('❌ Vui lòng chọn model');
|
|
return;
|
|
}
|
|
|
|
if (batchItems.length === 0) {
|
|
alert('❌ Vui lòng upload file CSV trước');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/batch/start', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
model_filename: modelFilename,
|
|
items: batchItems,
|
|
auto_retry: true,
|
|
max_retries: 3
|
|
})
|
|
});
|
|
|
|
const result = await response.json();
|
|
alert(`✅ ${result.message}`);
|
|
|
|
// Refresh batch status
|
|
loadBatchStatus();
|
|
} catch (error) {
|
|
console.error('Error starting batch:', error);
|
|
alert('❌ Lỗi khi bắt đầu batch prediction');
|
|
}
|
|
}
|
|
|
|
// Load batch status
|
|
async function loadBatchStatus() {
|
|
try {
|
|
const response = await fetch('/api/batch/status');
|
|
const data = await response.json();
|
|
|
|
// Update counters
|
|
document.getElementById('queuedJobs').textContent = data.queue.queued;
|
|
document.getElementById('runningJobs').textContent = data.queue.running;
|
|
document.getElementById('completedJobs').textContent = data.queue.completed;
|
|
document.getElementById('failedJobs').textContent = data.queue.failed;
|
|
|
|
// Display jobs
|
|
const jobsContainer = document.getElementById('batchJobs');
|
|
jobsContainer.innerHTML = '';
|
|
|
|
// Combine all jobs
|
|
const allJobs = [
|
|
...data.jobs.running,
|
|
...data.jobs.queued,
|
|
...data.jobs.recent_completed,
|
|
...data.jobs.recent_failed
|
|
];
|
|
|
|
if (allJobs.length === 0) {
|
|
jobsContainer.innerHTML = '<p style="text-align: center; color: #666;">Chưa có job nào</p>';
|
|
return;
|
|
}
|
|
|
|
allJobs.forEach(job => {
|
|
const jobElement = document.createElement('div');
|
|
jobElement.className = `batch-item ${job.status}`;
|
|
|
|
const progress = job.progress || 0;
|
|
const errorMsg = job.error ? `<p style="color: #f44336; margin-top: 10px;">⚠️ ${job.error}</p>` : '';
|
|
|
|
jobElement.innerHTML = `
|
|
<div class="batch-header">
|
|
<div class="batch-name">${job.name}</div>
|
|
<div class="batch-status ${job.status}">${job.status.toUpperCase()}</div>
|
|
</div>
|
|
<p style="color: #666; margin: 5px 0;">Job ID: ${job.job_id}</p>
|
|
<p style="color: #666; margin: 5px 0;">
|
|
📍 [${job.config.min_lon.toFixed(2)}, ${job.config.min_lat.toFixed(2)}] →
|
|
[${job.config.max_lon.toFixed(2)}, ${job.config.max_lat.toFixed(2)}]
|
|
</p>
|
|
${job.retries > 0 ? `<p style="color: #ff9800; margin: 5px 0;">🔄 Retries: ${job.retries}/${job.max_retries}</p>` : ''}
|
|
${errorMsg}
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: ${progress}%"></div>
|
|
</div>
|
|
`;
|
|
|
|
jobsContainer.appendChild(jobElement);
|
|
});
|
|
} catch (error) {
|
|
console.error('Error loading batch status:', error);
|
|
}
|
|
}
|
|
|
|
// Auto-refresh batch status
|
|
function startBatchRefresh() {
|
|
if (refreshInterval) return;
|
|
refreshInterval = setInterval(loadBatchStatus, 3000);
|
|
}
|
|
|
|
function stopBatchRefresh() {
|
|
if (refreshInterval) {
|
|
clearInterval(refreshInterval);
|
|
refreshInterval = null;
|
|
}
|
|
}
|
|
|
|
// Initialize on page load
|
|
window.onload = function() {
|
|
loadDashboardStats();
|
|
};
|
|
|
|
// Cleanup on page unload
|
|
window.onbeforeunload = function() {
|
|
stopBatchRefresh();
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|