cơ bản hoàn tát các chức năng chính
This commit is contained in:
Victor Phan
+935
@@ -0,0 +1,935 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user