sửa các lỗi tại màn hình predict

prediction_interface.html

@@ -298,6 +298,7 @@
             <a href="/prediction" style="padding: 10px 20px; background: #4facfe; color: white; border-radius: 8px; text-decoration: none; font-weight: 600;">🗺️ Prediction (Active)</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</a>
+            <a href="/reports" style="padding: 10px 20px; background: #ff6b6b; color: white; border-radius: 8px; text-decoration: none; font-weight: 600;">📝 Reports</a>
         </div>
         
         <!-- Tab Navigation -->
@@ -957,6 +958,10 @@
                 const data = await response.json();
                 const select = document.getElementById('cacheSelect');
                 select.innerHTML = '<option value="">-- Không dùng cache --</option>';
+                
+                // Store cache data globally for later use
+                window.cacheFiles = data.files || [];
+                
                 if (data.files && data.files.length > 0) {
                     data.files.forEach((file, idx) => {
                         if (file.filename.startsWith('prediction_input_')) {
@@ -975,6 +980,80 @@
                 console.warn('Không thể tải danh sách cache:', e);
             }
         }
+        
+        // Apply cache preset - auto fill bbox and other params
+        function applyCachePreset() {
+            const selectValue = document.getElementById('cacheSelect').value;
+            if (!selectValue || !window.cacheFiles) return;
+            
+            // Find selected cache file
+            const cacheFile = window.cacheFiles.find(f => f.filename === selectValue);
+            if (!cacheFile || !cacheFile.metadata) {
+                console.warn('No metadata found for selected cache');
+                return;
+            }
+            
+            const meta = cacheFile.metadata;
+            
+            // Auto-fill bbox from cache
+            if (meta.bbox && meta.bbox.length === 4) {
+                const [min_lon, min_lat, max_lon, max_lat] = meta.bbox;
+                
+                // Set selectedBbox directly without drawing on map
+                selectedBbox = {
+                    min_lon: min_lon,
+                    min_lat: min_lat,
+                    max_lon: max_lon,
+                    max_lat: max_lat
+                };
+                
+                // Save to localStorage
+                localStorage.setItem('prediction_bbox', JSON.stringify(selectedBbox));
+                
+                // Draw rectangle on map to visualize
+                if (currentRectangle) {
+                    drawnItems.removeLayer(currentRectangle);
+                }
+                
+                const bounds = L.latLngBounds(
+                    [min_lat, min_lon],
+                    [max_lat, max_lon]
+                );
+                
+                currentRectangle = L.rectangle(bounds, {
+                    color: '#4facfe',
+                    weight: 3,
+                    fillOpacity: 0.2
+                });
+                
+                drawnItems.addLayer(currentRectangle);
+                map.fitBounds(bounds);
+                
+                console.log(`✅ Auto-applied bbox from cache: [${min_lon}, ${min_lat}, ${max_lon}, ${max_lat}]`);
+            }
+            
+            // Auto-fill time range if available
+            if (meta.start_date) {
+                document.getElementById('predStartDate').value = meta.start_date;
+            }
+            if (meta.end_date) {
+                document.getElementById('predEndDate').value = meta.end_date;
+            }
+            
+            // Auto-fill other params
+            if (meta.resolution) {
+                document.getElementById('predResolution').value = meta.resolution;
+            }
+            if (meta.max_scenes) {
+                document.getElementById('predMaxScenes').value = meta.max_scenes;
+            }
+            if (meta.cloud_cover) {
+                document.getElementById('predCloudCover').value = meta.cloud_cover;
+            }
+            
+            // Show notification
+            alert(`✅ Đã áp dụng cache preset!\n\nBBox: [${meta.bbox?.join(', ') || 'N/A'}]\nTime: ${meta.start_date || '?'} → ${meta.end_date || '?'}\n\nBạn có thể predict ngay mà không cần vẽ bbox!`);
+        }
 
         // Initialize on page load
         window.onload = function() {
@@ -984,6 +1063,8 @@
             loadCacheList();
             // Add event listener for model selection
             document.getElementById('modelSelect').addEventListener('change', updateModelInfo);
+            // Add event listener for cache selection
+            document.getElementById('cacheSelect').addEventListener('change', applyCachePreset);
         };
         
         // Cleanup on page unload