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

update chức năng ndvi time seriese

Browse Source
This commit is contained in:
Victor Phan
2025-12-22 07:20:41 +07:00
parent 46da481029
commit f3ff5d81a6
12 changed files with 3558 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ndvi_interface.html
+568
View File
@@ -0,0 +1,568 @@
<!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>