Victor Phan
1092 lines
48 KiB
HTML
Executable File
1092 lines
48 KiB
HTML
Executable File
<!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 Predicts</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;
|
|
}
|
|
|
|
.region-filter-btn {
|
|
padding: 3px 10px;
|
|
background: #e0e0e0;
|
|
color: #666;
|
|
border: none;
|
|
border-radius: 15px;
|
|
font-size: 0.85em;
|
|
cursor: pointer;
|
|
transition: background 0.2s, color 0.2s;
|
|
}
|
|
|
|
.region-filter-btn.active {
|
|
background: #27ae60;
|
|
color: white;
|
|
}
|
|
|
|
#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 Predicts</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 Predicts (Active)</a>
|
|
<a href="/reports" style="padding: 10px 20px; background: #ff6b6b; color: white; border-radius: 8px; text-decoration: none; font-weight: 600;">📝 Reports</a>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<!-- Configuration Section -->
|
|
<div class="section">
|
|
<h2>⚙️ Cấu hình dự đoán NDVI</h2>
|
|
|
|
<div class="form-group">
|
|
<label>🎯 Chế độ:</label>
|
|
<div style="display: flex; gap: 10px; margin-bottom: 10px;">
|
|
<button type="button" class="btn btn-sm" id="btnHistoricalMode" onclick="switchMode('historical')" style="padding: 8px 20px; background: #667eea; color: white; border: none; border-radius: 5px;">📊 Phân tích lịch sử</button>
|
|
<button type="button" class="btn btn-sm" id="btnForecastMode" onclick="switchMode('forecast')" style="padding: 8px 20px; background: #ccc; color: #666; border: none; border-radius: 5px;">🔮 Dự đoán tương lai</button>
|
|
</div>
|
|
<div id="modeDescription" style="font-size: 0.85em; color: #666; margin-top: 5px;">📊 Sử dụng ML model để phân tích NDVI từ dữ liệu vệ tinh lịch sử</div>
|
|
</div>
|
|
|
|
<div class="form-group" id="modelSelectGroup">
|
|
<label for="modelSelect">🤖 Chọn Model (tùy chọn):</label>
|
|
<select id="modelSelect" class="form-control">
|
|
<option value="">Đang tải models...</option>
|
|
</select>
|
|
<small style="color: #666; font-size: 0.85em;">💡 Chọn model để tăng độ chính xác với land-type-specific forecasting</small>
|
|
</div>
|
|
|
|
<div class="form-group" id="historicalMonthsGroup" style="display: none;">
|
|
<label for="historicalMonths">📅 Số tháng lịch sử để tính pattern:</label>
|
|
<input type="number" id="historicalMonths" value="12" min="6" max="36" step="3">
|
|
<small style="color: #666;">⚠️ Khuyến nghị 12-18 tháng. Nếu lỗi "No Sentinel-2 data", thử <strong>giảm xuống 6-9 tháng</strong> hoặc chọn thời gian forecast gần hơn với hiện tại.</small>
|
|
</div>
|
|
|
|
<!-- Province Selection -->
|
|
<div class="form-group">
|
|
<label>🗺️ Chọn tỉnh thành nhanh:</label>
|
|
<div style="display: flex; gap: 10px; margin-bottom: 10px;">
|
|
<button type="button" class="btn btn-sm" id="btn63Provinces" onclick="switchProvinceList('63')" style="padding: 5px 15px; background: #667eea; color: white; border: none; border-radius: 5px;">63 tỉnh</button>
|
|
<button type="button" class="btn btn-sm" id="btn32Provinces" onclick="switchProvinceList('32')" style="padding: 5px 15px; background: #ccc; color: #666; border: none; border-radius: 5px;">32 tỉnh (mới)</button>
|
|
<span id="provinceListMode" style="align-self: center; font-size: 0.9em; color: #666;">Danh sách: 63 tỉnh</span>
|
|
</div>
|
|
|
|
<!-- Region Filters -->
|
|
<div id="regionFilterContainer" style="display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px;">
|
|
<button type="button" class="region-filter-btn active" data-region="all">Tất cả</button>
|
|
</div>
|
|
|
|
<select id="provinceSelect" style="width: 100%; padding: 10px; border: 2px solid #e0e0e0; border-radius: 5px;">
|
|
<option value="">-- Chọn tỉnh thành --</option>
|
|
</select>
|
|
<div id="provinceDisplay" style="margin-top: 5px; color: #667eea; font-weight: 600;"></div>
|
|
</div>
|
|
|
|
<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 id="bboxDisplay" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label id="timePeriodLabel">Khoảng thời gian:</label>
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
|
|
<input type="date" id="startDate" value="2024-01-01">
|
|
<input type="date" id="endDate" value="2024-12-31">
|
|
</div>
|
|
<small id="timeHint" style="color: #666; font-size: 0.85em;">📅 Chọn thời gian trong quá khứ</small>
|
|
</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="maxScenes">Số lượng ảnh tối đa:</label>
|
|
<input type="number" id="maxScenes" value="12" min="1" max="50">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="samplePoints">Số điểm mẫu để dự đoán:</label>
|
|
<input type="number" id="samplePoints" value="500" min="100" max="5000" step="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" id="methodAlert">
|
|
<strong>🤖 Phương pháp:</strong> Sử dụng ML model để phân tích NDVI từ dữ liệu vệ tinh<br>
|
|
<strong>💡 Lưu ý:</strong> Model extract features từ Sentinel-2, sau đó phân tích NDVI theo thời gian.<br>
|
|
<strong>📊 Dữ liệu:</strong> Cần dữ liệu vệ tinh lịch sử để tính toán.
|
|
</div>
|
|
|
|
<button class="btn btn-primary" onclick="executeAnalysis()" id="calculateBtn">
|
|
📊 Phân tích 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>
|
|
<div style="background: white; padding: 20px; border-radius: 10px;">
|
|
<canvas id="ndviChart"></canvas>
|
|
</div>
|
|
|
|
<!-- Chart as Image Preview -->
|
|
<div id="chartImageContainer" style="margin-top: 20px; display: none;">
|
|
<h3 style="color: #27ae60; margin-bottom: 10px;">📸 Chart Preview (Image)</h3>
|
|
<img id="chartImage" style="width: 100%; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Leaflet JS -->
|
|
<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, currentRectangle;
|
|
let ndviData = null;
|
|
let ndviChart = null;
|
|
let availableModels = [];
|
|
let allProvinces = {};
|
|
let allProvincesMerged = {};
|
|
let currentProvinceName = '';
|
|
let currentProvinceMode = '63';
|
|
let currentRegionFilter = 'all';
|
|
let currentAnalysisMode = 'historical';
|
|
|
|
// Check if date range goes into the future
|
|
function isFutureRange(startDate, endDate) {
|
|
if (!startDate || !endDate) return false;
|
|
const today = new Date();
|
|
today.setHours(0, 0, 0, 0);
|
|
const start = new Date(startDate);
|
|
const end = new Date(endDate);
|
|
return start > today || end > today;
|
|
}
|
|
|
|
// Switch between historical and forecast mode
|
|
function switchMode(mode) {
|
|
currentAnalysisMode = mode;
|
|
|
|
const btnHistorical = document.getElementById('btnHistoricalMode');
|
|
const btnForecast = document.getElementById('btnForecastMode');
|
|
const modeDesc = document.getElementById('modeDescription');
|
|
const modelGroup = document.getElementById('modelSelectGroup');
|
|
const historicalGroup = document.getElementById('historicalMonthsGroup');
|
|
const methodAlert = document.getElementById('methodAlert');
|
|
const calculateBtn = document.getElementById('calculateBtn');
|
|
const timeLabel = document.getElementById('timePeriodLabel');
|
|
const timeHint = document.getElementById('timeHint');
|
|
|
|
if (mode === 'historical') {
|
|
btnHistorical.style.background = '#667eea';
|
|
btnHistorical.style.color = 'white';
|
|
btnForecast.style.background = '#ccc';
|
|
btnForecast.style.color = '#666';
|
|
|
|
modeDesc.textContent = '📊 Sử dụng ML model để phân tích NDVI từ dữ liệu vệ tinh lịch sử';
|
|
modelGroup.style.display = 'block';
|
|
historicalGroup.style.display = 'none';
|
|
|
|
methodAlert.innerHTML = '<strong>🤖 Phương pháp:</strong> Sử dụng ML model để phân tích NDVI từ dữ liệu vệ tinh<br>' +
|
|
'<strong>💡 Lưu ý:</strong> Model extract features từ Sentinel-2, sau đó phân tích NDVI theo thời gian.<br>' +
|
|
'<strong>📊 Dữ liệu:</strong> Cần dữ liệu vệ tinh lịch sử để tính toán.';
|
|
|
|
calculateBtn.innerHTML = '📊 Phân tích NDVI Time Series';
|
|
timeLabel.textContent = 'Khoảng thời gian phân tích:';
|
|
timeHint.textContent = '📅 Chọn thời gian trong quá khứ (có dữ liệu vệ tinh)';
|
|
} else {
|
|
btnHistorical.style.background = '#ccc';
|
|
btnHistorical.style.color = '#666';
|
|
btnForecast.style.background = '#27ae60';
|
|
btnForecast.style.color = 'white';
|
|
|
|
modeDesc.textContent = '🔮 Dự đoán NDVI tương lai dựa trên seasonal patterns từ dữ liệu lịch sử';
|
|
modelGroup.style.display = 'block';
|
|
historicalGroup.style.display = 'block';
|
|
|
|
methodAlert.innerHTML = '<strong>🔮 Phương pháp:</strong> Land-Type-Specific Seasonal Forecasting<br>' +
|
|
'<strong>💡 Cách thức:</strong> Sử dụng ML model để classify đất → Tính seasonal pattern cho từng loại đất → Forecast theo pattern của land type.<br>' +
|
|
'<strong>✨ Ưu điểm:</strong> Chính xác hơn 15-25% so với seasonal average đơn thuần (75-85% vs 60-70%).<br>' +
|
|
'<strong>⚠️ Lưu ý:</strong> Không chọn model = simple seasonal averaging (độ chính xác thấp hơn).';
|
|
|
|
calculateBtn.innerHTML = '🔮 Dự đoán NDVI Tương Lai';
|
|
timeLabel.textContent = 'Khoảng thời gian dự đoán:';
|
|
timeHint.textContent = '🔮 Có thể chọn bất kỳ thời gian nào (kể cả tương lai)';
|
|
}
|
|
}
|
|
|
|
// Execute analysis based on current mode
|
|
async function executeAnalysis() {
|
|
const startDate = document.getElementById('startDate').value;
|
|
const endDate = document.getElementById('endDate').value;
|
|
|
|
if (!startDate || !endDate) {
|
|
showError('Vui lòng chọn khoảng thời gian!');
|
|
return;
|
|
}
|
|
|
|
// If user picks a future range while in historical mode, switch to forecast automatically
|
|
if (currentAnalysisMode === 'historical' && isFutureRange(startDate, endDate)) {
|
|
switchMode('forecast');
|
|
const methodAlert = document.getElementById('methodAlert');
|
|
methodAlert.innerHTML = '<strong>🔄 Đã chuyển sang chế độ Dự đoán tương lai</strong><br>' +
|
|
'Khoảng thời gian nằm trong tương lai, hệ thống tự dùng mô hình forecast để tránh lỗi "No Sentinel-2 data".';
|
|
document.getElementById('errorContainer').style.display = 'none';
|
|
await forecastNDVI();
|
|
return;
|
|
}
|
|
|
|
if (currentAnalysisMode === 'historical') {
|
|
await predictNDVI();
|
|
} else {
|
|
await forecastNDVI();
|
|
}
|
|
}
|
|
|
|
// Load available models
|
|
async function loadModels() {
|
|
try {
|
|
const response = await fetch('/api/models/list');
|
|
const data = await response.json();
|
|
availableModels = data.models || [];
|
|
|
|
const modelSelect = document.getElementById('modelSelect');
|
|
modelSelect.innerHTML = '<option value="">-- Chọn model --</option>';
|
|
|
|
availableModels.forEach(model => {
|
|
const option = document.createElement('option');
|
|
option.value = model.filename;
|
|
option.textContent = `${model.filename} (${model.feature_mode || 'unknown'} mode, ${model.accuracy}% accuracy)`;
|
|
modelSelect.appendChild(option);
|
|
});
|
|
} catch (error) {
|
|
console.error('Error loading models:', error);
|
|
document.getElementById('modelSelect').innerHTML = '<option value="">Lỗi tải models</option>';
|
|
}
|
|
}
|
|
|
|
// 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);
|
|
});
|
|
}
|
|
|
|
// Forecast NDVI for future dates
|
|
async function forecastNDVI() {
|
|
const modelFilename = document.getElementById('modelSelect').value;
|
|
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 historicalMonths = parseInt(document.getElementById('historicalMonths').value);
|
|
const resolution = parseInt(document.getElementById('resolution').value);
|
|
const maxCloudCover = parseInt(document.getElementById('maxCloudCover').value);
|
|
const samplePoints = parseInt(document.getElementById('samplePoints').value);
|
|
|
|
// Validate inputs
|
|
if (isNaN(minLon) || isNaN(minLat) || isNaN(maxLon) || isNaN(maxLat)) {
|
|
showError('Vui lòng nhập đầy đủ tọa độ bbox!');
|
|
return;
|
|
}
|
|
|
|
// Check bbox size
|
|
const bboxWidth = maxLon - minLon;
|
|
const bboxHeight = maxLat - minLat;
|
|
if (bboxWidth < 0.01 || bboxHeight < 0.01) {
|
|
showError('⚠️ Bbox quá nhỏ! Vui lòng chọn khu vực lớn hơn (ít nhất 0.01 độ). Bbox nhỏ có thể không có đủ điểm hợp lệ để phân tích.');
|
|
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],
|
|
forecast_start_date: startDate,
|
|
forecast_end_date: endDate,
|
|
historical_months: historicalMonths,
|
|
resolution: resolution,
|
|
max_cloud_cover: maxCloudCover,
|
|
model_filename: modelFilename || null,
|
|
sample_points: samplePoints
|
|
};
|
|
|
|
try {
|
|
const response = await fetch('/api/ndvi/forecast', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(config)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (response.ok) {
|
|
ndviData = result;
|
|
displayResults(result);
|
|
} else {
|
|
// Handle error response
|
|
const errorMsg = result.detail || result.message || JSON.stringify(result);
|
|
showError(errorMsg);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error forecasting NDVI:', error);
|
|
// More helpful error message for network/parsing errors
|
|
const errorMsg = error.message || error.toString();
|
|
showError(`Lỗi kết nối hoặc xử lý: ${errorMsg}. Vui lòng kiểm tra console để biết chi tiết.`);
|
|
} finally {
|
|
document.getElementById('loadingIndicator').style.display = 'none';
|
|
document.getElementById('calculateBtn').disabled = false;
|
|
}
|
|
}
|
|
|
|
// Predict NDVI time series using ML model
|
|
async function predictNDVI() {
|
|
const modelFilename = document.getElementById('modelSelect').value;
|
|
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 maxScenes = parseInt(document.getElementById('maxScenes').value);
|
|
const samplePoints = parseInt(document.getElementById('samplePoints').value);
|
|
const resolution = parseInt(document.getElementById('resolution').value);
|
|
|
|
// Validate inputs
|
|
if (!modelFilename) {
|
|
showError('Vui lòng chọn model để dự đoán!');
|
|
return;
|
|
}
|
|
|
|
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 = {
|
|
model_filename: modelFilename,
|
|
bbox: [minLon, minLat, maxLon, maxLat],
|
|
start_date: startDate,
|
|
end_date: endDate,
|
|
max_cloud_cover: maxCloudCover,
|
|
max_scenes: maxScenes,
|
|
resolution: resolution,
|
|
sample_points: samplePoints,
|
|
use_gpu: false
|
|
};
|
|
|
|
try {
|
|
const response = await fetch('/api/ndvi/predict-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 dự đoán NDVI');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error predicting NDVI:', error);
|
|
showError(error.message);
|
|
} finally {
|
|
document.getElementById('loadingIndicator').style.display = 'none';
|
|
document.getElementById('calculateBtn').disabled = false;
|
|
}
|
|
}
|
|
|
|
// Display results
|
|
function displayResults(data) {
|
|
console.log('Displaying results:', data);
|
|
document.getElementById('resultsContainer').style.display = 'block';
|
|
document.getElementById('chartContainer').style.display = 'block';
|
|
|
|
// Update stats - handle both n_images (historical) and n_forecast_points (forecast)
|
|
const nImages = data.n_images || data.n_forecast_points || 0;
|
|
const safeStat = (val) => (val === undefined || val === null || Number.isNaN(val) ? '-' : Number(val).toFixed(3));
|
|
document.getElementById('statImages').textContent = nImages;
|
|
document.getElementById('statAvgNDVI').textContent = safeStat(data.mean_ndvi);
|
|
document.getElementById('statMinNDVI').textContent = safeStat(data.min_ndvi);
|
|
document.getElementById('statMaxNDVI').textContent = safeStat(data.max_ndvi);
|
|
|
|
// 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();
|
|
}
|
|
|
|
if (!data.timeseries || data.timeseries.length === 0) {
|
|
showError('Không có dữ liệu để vẽ biểu đồ.');
|
|
return;
|
|
}
|
|
|
|
const pickValue = (item, keys) => {
|
|
for (const key of keys) {
|
|
const val = item[key];
|
|
if (val !== undefined && val !== null && !Number.isNaN(val)) {
|
|
return Number(val);
|
|
}
|
|
}
|
|
return null;
|
|
};
|
|
|
|
// Format dates with more detail (dd/MM/yyyy)
|
|
const dates = data.timeseries.map(item => {
|
|
const d = new Date(item.date);
|
|
const day = d.getDate().toString().padStart(2, '0');
|
|
const month = (d.getMonth() + 1).toString().padStart(2, '0');
|
|
const year = d.getFullYear();
|
|
return `${day}/${month}/${year}`;
|
|
});
|
|
const ndviValues = data.timeseries.map(item => pickValue(item, ['mean_ndvi', 'ndvi_mean', 'ndvi']));
|
|
const minValues = data.timeseries.map(item => pickValue(item, ['min_ndvi', 'ndvi_min']));
|
|
const maxValues = data.timeseries.map(item => pickValue(item, ['max_ndvi', 'ndvi_max']));
|
|
|
|
ndviChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: dates,
|
|
datasets: [{
|
|
label: 'NDVI Mean',
|
|
data: ndviValues,
|
|
borderColor: '#27ae60',
|
|
backgroundColor: 'rgba(46, 204, 113, 0.2)',
|
|
borderWidth: 3,
|
|
fill: true,
|
|
tension: 0.4,
|
|
pointRadius: 5,
|
|
pointHoverRadius: 8,
|
|
pointBackgroundColor: '#27ae60',
|
|
pointBorderColor: '#fff',
|
|
pointBorderWidth: 2
|
|
}, {
|
|
label: 'NDVI Min',
|
|
data: minValues,
|
|
borderColor: '#e74c3c',
|
|
backgroundColor: 'rgba(231, 76, 60, 0.1)',
|
|
borderWidth: 2,
|
|
borderDash: [5, 5],
|
|
fill: false,
|
|
tension: 0.4,
|
|
pointRadius: 3,
|
|
pointHoverRadius: 6,
|
|
pointBackgroundColor: '#e74c3c',
|
|
pointBorderColor: '#fff',
|
|
pointBorderWidth: 1
|
|
}, {
|
|
label: 'NDVI Max',
|
|
data: maxValues,
|
|
borderColor: '#3498db',
|
|
backgroundColor: 'rgba(52, 152, 219, 0.1)',
|
|
borderWidth: 2,
|
|
borderDash: [5, 5],
|
|
fill: false,
|
|
tension: 0.4,
|
|
pointRadius: 3,
|
|
pointHoverRadius: 6,
|
|
pointBackgroundColor: '#3498db',
|
|
pointBorderColor: '#fff',
|
|
pointBorderWidth: 1
|
|
}]
|
|
},
|
|
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: true,
|
|
color: 'rgba(0, 0, 0, 0.05)'
|
|
},
|
|
ticks: {
|
|
maxRotation: 45,
|
|
minRotation: 45,
|
|
autoSkip: true,
|
|
maxTicksLimit: 20,
|
|
font: {
|
|
size: 10
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Convert chart to image and display
|
|
setTimeout(() => {
|
|
const chartImage = document.getElementById('chartImage');
|
|
const chartImageContainer = document.getElementById('chartImageContainer');
|
|
chartImage.src = ndviChart.toBase64Image();
|
|
chartImageContainer.style.display = 'block';
|
|
}, 500);
|
|
}
|
|
|
|
// Load provinces list
|
|
async function loadProvinces() {
|
|
try {
|
|
const [response63, response32] = await Promise.all([
|
|
fetch('/api/provinces/by-region'),
|
|
fetch('/api/provinces-32/by-region')
|
|
]);
|
|
|
|
allProvinces = await response63.json();
|
|
allProvincesMerged = await response32.json();
|
|
|
|
populateProvinceSelect(currentRegionFilter);
|
|
populateRegionButtons();
|
|
} catch (error) {
|
|
console.error('Error loading provinces:', error);
|
|
}
|
|
}
|
|
|
|
// Switch between 63 and 32 province lists
|
|
function switchProvinceList(mode) {
|
|
currentProvinceMode = mode;
|
|
|
|
const btn63 = document.getElementById('btn63Provinces');
|
|
const btn32 = document.getElementById('btn32Provinces');
|
|
const modeLabel = document.getElementById('provinceListMode');
|
|
|
|
if (mode === '63') {
|
|
btn63.style.background = '#667eea';
|
|
btn63.style.color = 'white';
|
|
btn32.style.background = '#ccc';
|
|
btn32.style.color = '#666';
|
|
modeLabel.textContent = 'Danh sách: 63 tỉnh';
|
|
} else {
|
|
btn63.style.background = '#ccc';
|
|
btn63.style.color = '#666';
|
|
btn32.style.background = '#667eea';
|
|
btn32.style.color = 'white';
|
|
modeLabel.textContent = 'Danh sách: 32 tỉnh (sáp nhập)';
|
|
}
|
|
|
|
populateRegionButtons();
|
|
populateProvinceSelect();
|
|
}
|
|
|
|
// Populate province select dropdown
|
|
function populateProvinceSelect(filterRegion = 'all') {
|
|
const select = document.getElementById('provinceSelect');
|
|
select.innerHTML = '<option value="">-- Chọn tỉnh thành --</option>';
|
|
|
|
const provinceData = currentProvinceMode === '63' ? allProvinces : allProvincesMerged;
|
|
const regions = Object.keys(provinceData);
|
|
|
|
regions.forEach(region => {
|
|
if (filterRegion !== 'all' && region !== filterRegion) return;
|
|
|
|
const optgroup = document.createElement('optgroup');
|
|
optgroup.label = region;
|
|
|
|
provinceData[region].forEach(prov => {
|
|
const option = document.createElement('option');
|
|
option.value = prov.name;
|
|
option.textContent = prov.name;
|
|
option.dataset.bbox = JSON.stringify(prov.bbox);
|
|
optgroup.appendChild(option);
|
|
});
|
|
|
|
select.appendChild(optgroup);
|
|
});
|
|
}
|
|
|
|
// Handle province selection
|
|
function onProvinceSelect(event) {
|
|
const select = event.target;
|
|
const selectedOption = select.options[select.selectedIndex];
|
|
|
|
if (!selectedOption.value) return;
|
|
|
|
const provinceName = selectedOption.value;
|
|
const bbox = JSON.parse(selectedOption.dataset.bbox);
|
|
|
|
currentProvinceName = provinceName;
|
|
|
|
// Update bbox inputs
|
|
document.getElementById('minLon').value = bbox[0];
|
|
document.getElementById('minLat').value = bbox[1];
|
|
document.getElementById('maxLon').value = bbox[2];
|
|
document.getElementById('maxLat').value = bbox[3];
|
|
|
|
// Update displays
|
|
document.getElementById('bboxDisplay').textContent =
|
|
`Lon: ${bbox[0]} → ${bbox[2]}, Lat: ${bbox[1]} → ${bbox[3]}`;
|
|
document.getElementById('provinceDisplay').textContent = `📍 ${provinceName}`;
|
|
|
|
// Draw rectangle on map
|
|
const bounds = [[bbox[1], bbox[0]], [bbox[3], bbox[2]]];
|
|
|
|
if (currentRectangle) {
|
|
drawnItems.removeLayer(currentRectangle);
|
|
}
|
|
|
|
currentRectangle = L.rectangle(bounds, {
|
|
color: '#27ae60',
|
|
weight: 3,
|
|
fillOpacity: 0.2
|
|
});
|
|
drawnItems.addLayer(currentRectangle);
|
|
map.fitBounds(bounds, { padding: [50, 50] });
|
|
}
|
|
|
|
// Populate region filter buttons
|
|
function populateRegionButtons() {
|
|
const container = document.getElementById('regionFilterContainer');
|
|
const allButton = container.querySelector('[data-region="all"]');
|
|
container.innerHTML = '';
|
|
container.appendChild(allButton);
|
|
|
|
const provinceData = currentProvinceMode === '63' ? allProvinces : allProvincesMerged;
|
|
const regions = Object.keys(provinceData);
|
|
|
|
regions.forEach(region => {
|
|
const button = document.createElement('button');
|
|
button.type = 'button';
|
|
button.className = 'region-filter-btn';
|
|
button.dataset.region = region;
|
|
button.textContent = region;
|
|
if (region === currentRegionFilter) {
|
|
button.classList.add('active');
|
|
}
|
|
container.appendChild(button);
|
|
});
|
|
|
|
// Re-apply active state for "Tất cả"
|
|
if (currentRegionFilter === 'all') {
|
|
allButton.classList.add('active');
|
|
} else {
|
|
allButton.classList.remove('active');
|
|
}
|
|
|
|
setupRegionFilters();
|
|
}
|
|
|
|
// Setup region filter event listeners
|
|
function setupRegionFilters() {
|
|
const filterButtons = document.querySelectorAll('.region-filter-btn');
|
|
|
|
filterButtons.forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
filterButtons.forEach(b => b.classList.remove('active'));
|
|
this.classList.add('active');
|
|
currentRegionFilter = this.dataset.region;
|
|
populateProvinceSelect(currentRegionFilter);
|
|
});
|
|
});
|
|
}
|
|
|
|
// Initialize on page load
|
|
window.onload = function() {
|
|
initMap();
|
|
loadModels();
|
|
loadProvinces();
|
|
|
|
document.getElementById('provinceSelect').addEventListener('change', onProvinceSelect);
|
|
};
|
|
|
|
// Download data as CSV
|
|
function downloadData() {
|
|
if (!ndviData) return;
|
|
|
|
let csv = 'Date,Mean_NDVI,Min_NDVI,Max_NDVI,Std_NDVI,Valid_Points\n';
|
|
ndviData.timeseries.forEach(item => {
|
|
csv += `${item.date},${item.mean_ndvi},${item.min_ndvi},${item.max_ndvi},${item.std_ndvi},${item.n_valid_points}\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;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|