Victor Phan
569 lines
21 KiB
HTML
569 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>NDVI Time Series Analysis</title>
|
|
|
|
<!-- Leaflet CSS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css" />
|
|
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
|
|
padding: 20px;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
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, #2ecc71 0%, #27ae60 100%);
|
|
color: white;
|
|
padding: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 2.5em;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.nav-buttons {
|
|
background: white;
|
|
padding: 15px;
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
border-bottom: 2px solid #e0e0e0;
|
|
}
|
|
|
|
.nav-btn {
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 1em;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
}
|
|
|
|
.content {
|
|
padding: 30px;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 30px;
|
|
}
|
|
|
|
.section {
|
|
background: #f8f9fa;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.section h2 {
|
|
color: #27ae60;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.btn {
|
|
padding: 12px 30px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
font-size: 1em;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
|
|
color: white;
|
|
}
|
|
|
|
.btn-success {
|
|
background: #28a745;
|
|
color: white;
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
#map {
|
|
height: 400px;
|
|
border-radius: 10px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
#chartContainer {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 15px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: white;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
border-left: 4px solid #27ae60;
|
|
}
|
|
|
|
.stat-card h3 {
|
|
color: #666;
|
|
font-size: 0.9em;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.stat-card p {
|
|
color: #27ae60;
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.loading {
|
|
text-align: center;
|
|
padding: 20px;
|
|
color: #666;
|
|
}
|
|
|
|
.alert {
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.alert-info {
|
|
background: #d1ecf1;
|
|
border-left: 4px solid #0c5460;
|
|
color: #0c5460;
|
|
}
|
|
|
|
.alert-warning {
|
|
background: #fff3cd;
|
|
border-left: 4px solid #856404;
|
|
color: #856404;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>🌿 NDVI Time Series Analysis</h1>
|
|
<p>Phân tích chỉ số thực vật theo thời gian từ dữ liệu Sentinel-2</p>
|
|
</div>
|
|
|
|
<div style="background: white; padding: 15px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; border-bottom: 2px solid #e0e0e0;">
|
|
<a href="/" style="padding: 10px 20px; background: #667eea; color: white; border-radius: 8px; text-decoration: none; font-weight: 600;">🏠 Trang Chủ</a>
|
|
<a href="/training" style="padding: 10px 20px; background: #f093fb; color: white; border-radius: 8px; text-decoration: none; font-weight: 600;">🎓 Training</a>
|
|
<a href="/prediction" style="padding: 10px 20px; background: #4facfe; color: white; border-radius: 8px; text-decoration: none; font-weight: 600;">🗺️ Prediction</a>
|
|
<a href="/batch" style="padding: 10px 20px; background: #764ba2; color: white; border-radius: 8px; text-decoration: none; font-weight: 600;">🚀 Batch Processing</a>
|
|
<a href="/ndvi" style="padding: 10px 20px; background: #2ecc71; color: white; border-radius: 8px; text-decoration: none; font-weight: 600;">🌿 NDVI Analysis (Active)</a>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<!-- Configuration Section -->
|
|
<div class="section">
|
|
<h2>⚙️ Cấu hình phân tích</h2>
|
|
|
|
<div class="form-group">
|
|
<label>Bbox (vẽ trên bản đồ hoặc nhập thủ công):</label>
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
|
|
<input type="number" id="minLon" placeholder="Min Longitude" step="0.0001" value="105.8">
|
|
<input type="number" id="minLat" placeholder="Min Latitude" step="0.0001" value="9.4">
|
|
<input type="number" id="maxLon" placeholder="Max Longitude" step="0.0001" value="106.0">
|
|
<input type="number" id="maxLat" placeholder="Max Latitude" step="0.0001" value="9.6">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Khoảng thời gian:</label>
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
|
|
<input type="date" id="startDate" value="2023-01-01">
|
|
<input type="date" id="endDate" value="2023-12-31">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="maxCloudCover">Cloud Cover tối đa (%):</label>
|
|
<input type="number" id="maxCloudCover" value="30" min="0" max="100">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="resolution">Độ phân giải (m):</label>
|
|
<select id="resolution">
|
|
<option value="10">10m (chi tiết cao)</option>
|
|
<option value="20" selected>20m (cân bằng)</option>
|
|
<option value="60">60m (nhanh)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="alert alert-info">
|
|
<strong>💡 Lưu ý:</strong> NDVI = (NIR - Red) / (NIR + Red)<br>
|
|
Giá trị từ -1 đến 1. Giá trị cao = thực vật xanh tốt.
|
|
</div>
|
|
|
|
<button class="btn btn-primary" onclick="calculateNDVI()" id="calculateBtn">
|
|
📊 Tính NDVI Time Series
|
|
</button>
|
|
|
|
<!-- Map for selecting bbox -->
|
|
<div id="map"></div>
|
|
</div>
|
|
|
|
<!-- Results Section -->
|
|
<div class="section">
|
|
<h2>📈 Kết quả phân tích</h2>
|
|
|
|
<div id="loadingIndicator" style="display: none;" class="loading">
|
|
<p>⏳ Đang tải dữ liệu và tính toán NDVI...</p>
|
|
<div style="margin-top: 10px;">
|
|
<div style="width: 100%; height: 20px; background: #e0e0e0; border-radius: 10px; overflow: hidden;">
|
|
<div id="progressBar" style="width: 0%; height: 100%; background: linear-gradient(90deg, #2ecc71, #27ae60); transition: width 0.3s;"></div>
|
|
</div>
|
|
<p id="progressText" style="margin-top: 5px; font-size: 0.9em;"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="resultsContainer" style="display: none;">
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<h3>Số lượng ảnh</h3>
|
|
<p id="statImages">-</p>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>NDVI trung bình</h3>
|
|
<p id="statAvgNDVI">-</p>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>NDVI min</h3>
|
|
<p id="statMinNDVI">-</p>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>NDVI max</h3>
|
|
<p id="statMaxNDVI">-</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 20px;">
|
|
<button class="btn btn-success" onclick="downloadData()">
|
|
💾 Download CSV
|
|
</button>
|
|
<button class="btn btn-primary" onclick="downloadChart()" style="margin-left: 10px;">
|
|
📸 Download Chart (PNG)
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="errorContainer" style="display: none;" class="alert alert-warning">
|
|
<strong>⚠️ Lỗi:</strong> <span id="errorMessage"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chart Section -->
|
|
<div id="chartContainer" style="display: none;">
|
|
<h2 style="color: #27ae60; margin-bottom: 20px;">📊 NDVI Time Series</h2>
|
|
<canvas id="ndviChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
|
|
|
<script>
|
|
let map, drawnItems, drawControl;
|
|
let ndviData = null;
|
|
let ndviChart = null;
|
|
|
|
// Initialize map
|
|
function initMap() {
|
|
map = L.map('map').setView([9.5, 105.9], 9);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap contributors'
|
|
}).addTo(map);
|
|
|
|
drawnItems = new L.FeatureGroup();
|
|
map.addLayer(drawnItems);
|
|
|
|
drawControl = new L.Control.Draw({
|
|
draw: {
|
|
rectangle: true,
|
|
polygon: false,
|
|
circle: false,
|
|
marker: false,
|
|
polyline: false,
|
|
circlemarker: false
|
|
},
|
|
edit: {
|
|
featureGroup: drawnItems,
|
|
remove: true
|
|
}
|
|
});
|
|
map.addControl(drawControl);
|
|
|
|
map.on(L.Draw.Event.CREATED, function(event) {
|
|
drawnItems.clearLayers();
|
|
const layer = event.layer;
|
|
drawnItems.addLayer(layer);
|
|
|
|
const bounds = layer.getBounds();
|
|
document.getElementById('minLon').value = bounds.getWest().toFixed(4);
|
|
document.getElementById('minLat').value = bounds.getSouth().toFixed(4);
|
|
document.getElementById('maxLon').value = bounds.getEast().toFixed(4);
|
|
document.getElementById('maxLat').value = bounds.getNorth().toFixed(4);
|
|
});
|
|
}
|
|
|
|
// Calculate NDVI time series
|
|
async function calculateNDVI() {
|
|
const minLon = parseFloat(document.getElementById('minLon').value);
|
|
const minLat = parseFloat(document.getElementById('minLat').value);
|
|
const maxLon = parseFloat(document.getElementById('maxLon').value);
|
|
const maxLat = parseFloat(document.getElementById('maxLat').value);
|
|
const startDate = document.getElementById('startDate').value;
|
|
const endDate = document.getElementById('endDate').value;
|
|
const maxCloudCover = parseInt(document.getElementById('maxCloudCover').value);
|
|
const resolution = parseInt(document.getElementById('resolution').value);
|
|
|
|
// Validate inputs
|
|
if (isNaN(minLon) || isNaN(minLat) || isNaN(maxLon) || isNaN(maxLat)) {
|
|
showError('Vui lòng nhập đầy đủ tọa độ bbox!');
|
|
return;
|
|
}
|
|
|
|
if (!startDate || !endDate) {
|
|
showError('Vui lòng chọn khoảng thời gian!');
|
|
return;
|
|
}
|
|
|
|
// Show loading
|
|
document.getElementById('loadingIndicator').style.display = 'block';
|
|
document.getElementById('resultsContainer').style.display = 'none';
|
|
document.getElementById('chartContainer').style.display = 'none';
|
|
document.getElementById('errorContainer').style.display = 'none';
|
|
document.getElementById('calculateBtn').disabled = true;
|
|
|
|
const config = {
|
|
bbox: [minLon, minLat, maxLon, maxLat],
|
|
start_date: startDate,
|
|
end_date: endDate,
|
|
max_cloud_cover: maxCloudCover,
|
|
resolution: resolution
|
|
};
|
|
|
|
try {
|
|
const response = await fetch('/api/ndvi/timeseries', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(config)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (response.ok) {
|
|
ndviData = result;
|
|
displayResults(result);
|
|
} else {
|
|
throw new Error(result.detail || 'Lỗi khi tính NDVI');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error calculating NDVI:', error);
|
|
showError(error.message);
|
|
} finally {
|
|
document.getElementById('loadingIndicator').style.display = 'none';
|
|
document.getElementById('calculateBtn').disabled = false;
|
|
}
|
|
}
|
|
|
|
// Display results
|
|
function displayResults(data) {
|
|
document.getElementById('resultsContainer').style.display = 'block';
|
|
document.getElementById('chartContainer').style.display = 'block';
|
|
|
|
// Update stats
|
|
document.getElementById('statImages').textContent = data.n_images;
|
|
document.getElementById('statAvgNDVI').textContent = data.mean_ndvi.toFixed(3);
|
|
document.getElementById('statMinNDVI').textContent = data.min_ndvi.toFixed(3);
|
|
document.getElementById('statMaxNDVI').textContent = data.max_ndvi.toFixed(3);
|
|
|
|
// Create chart
|
|
createChart(data);
|
|
}
|
|
|
|
// Create NDVI time series chart
|
|
function createChart(data) {
|
|
const ctx = document.getElementById('ndviChart').getContext('2d');
|
|
|
|
// Destroy existing chart if any
|
|
if (ndviChart) {
|
|
ndviChart.destroy();
|
|
}
|
|
|
|
const dates = data.timeseries.map(item => new Date(item.date).toLocaleDateString('vi-VN'));
|
|
const ndviValues = data.timeseries.map(item => item.ndvi);
|
|
|
|
ndviChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: dates,
|
|
datasets: [{
|
|
label: 'NDVI',
|
|
data: ndviValues,
|
|
borderColor: '#27ae60',
|
|
backgroundColor: 'rgba(46, 204, 113, 0.1)',
|
|
borderWidth: 2,
|
|
fill: true,
|
|
tension: 0.4,
|
|
pointRadius: 4,
|
|
pointHoverRadius: 6,
|
|
pointBackgroundColor: '#27ae60',
|
|
pointBorderColor: '#fff',
|
|
pointBorderWidth: 2
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: true,
|
|
plugins: {
|
|
title: {
|
|
display: true,
|
|
text: 'NDVI Time Series - Biến động chỉ số thực vật theo thời gian',
|
|
font: {
|
|
size: 16,
|
|
weight: 'bold'
|
|
}
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'top'
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
return `NDVI: ${context.parsed.y.toFixed(3)}`;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: false,
|
|
title: {
|
|
display: true,
|
|
text: 'NDVI Value'
|
|
},
|
|
grid: {
|
|
color: 'rgba(0, 0, 0, 0.05)'
|
|
}
|
|
},
|
|
x: {
|
|
title: {
|
|
display: true,
|
|
text: 'Ngày'
|
|
},
|
|
grid: {
|
|
display: false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Download data as CSV
|
|
function downloadData() {
|
|
if (!ndviData) return;
|
|
|
|
let csv = 'Date,NDVI\n';
|
|
ndviData.timeseries.forEach(item => {
|
|
csv += `${item.date},${item.ndvi}\n`;
|
|
});
|
|
|
|
const blob = new Blob([csv], { type: 'text/csv' });
|
|
const url = window.URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `ndvi_timeseries_${new Date().toISOString().split('T')[0]}.csv`;
|
|
a.click();
|
|
window.URL.revokeObjectURL(url);
|
|
}
|
|
|
|
// Download chart as PNG
|
|
function downloadChart() {
|
|
if (!ndviChart) return;
|
|
|
|
const url = ndviChart.toBase64Image();
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `ndvi_chart_${new Date().toISOString().split('T')[0]}.png`;
|
|
a.click();
|
|
}
|
|
|
|
// Show error message
|
|
function showError(message) {
|
|
document.getElementById('errorContainer').style.display = 'block';
|
|
document.getElementById('errorMessage').textContent = message;
|
|
}
|
|
|
|
// Initialize on page load
|
|
window.onload = function() {
|
|
initMap();
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|