app

2 months ago · a479fe3d98
commit a479fe3d98
21 changed files with 8200 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,30 @@
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 node_modules
 .DS_Store
 dist
 dist-ssr
 coverage
 *.local
 /cypress/videos/
 /cypress/screenshots/
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
 *.tsbuildinfo
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,3 @@
 {
  "recommendations": ["Vue.volar"]
 }
--- a/README.md
+++ b/README.md
@ -0,0 +1,38 @@
 # AIsentinel
 This template should help get you started developing with Vue 3 in Vite.
 ## Recommended IDE Setup
 [VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
 ## Recommended Browser Setup
 - Chromium-based browsers (Chrome, Edge, Brave, etc.):
  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) 
  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
 - Firefox:
  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
 ## Customize configuration
 See [Vite Configuration Reference](https://vite.dev/config/).
 ## Project Setup
 ```sh
 npm install
 ```
 ### Compile and Hot-Reload for Development
 ```sh
 npm run dev
 ```
 ### Compile and Minify for Production
 ```sh
 npm run build
 ```
--- a/index.html
+++ b/index.html
@ -0,0 +1,22 @@
 <!DOCTYPE html>
 <html lang="ru">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Анализатор здоровья полей</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" 
          integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" 
          crossorigin=""/>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Arial', sans-serif;
        }
    </style>
 </head>
 <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
 </body>
 </html>
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,8 @@
 {
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,28 @@
 {
  "name": "aisentinel",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "engines": {
    "node": "^20.19.0 || >=22.12.0"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.12.2",
    "leaflet": "^1.9.4",
    "vue": "^3.5.22"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.14",
    "@vitejs/plugin-vue": "^6.0.1",
    "autoprefixer": "^10.4.21",
    "postcss": "^8.5.6",
    "tailwindcss": "^4.1.14",
    "vite": "^7.1.7",
    "vite-plugin-vue-devtools": "^8.0.2"
  }
 }
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/server/package-lock.json
+++ b/server/package-lock.json
--- a/server/package.json
+++ b/server/package.json
@ -0,0 +1,22 @@
 {
  "name": "field-health-backend",
  "version": "1.0.0",
  "description": "Backend for field health analysis using satellite imagery",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  "dependencies": {
    "axios": "^1.6.0",
    "canvas": "^3.2.0",
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "geotiff": "^2.0.7",
    "multer": "^2.0.2",
    "turf": "^3.0.14"
  },
  "devDependencies": {
    "nodemon": "^3.0.1"
  }
 }
--- a/server/routes/ndvi.js
+++ b/server/routes/ndvi.js
@ -0,0 +1,103 @@
 import express from 'express';
 import axios from 'axios';
 import { getSentinelData, calculateNDVI, generateFieldPatternNDVI } from '../utils/sentinel.js';
 const router = express.Router();
 // Analyze field health
 router.post('/analyze', async (req, res) => {
  try {
    const { polygon, date } = req.body;
    if (!polygon || !polygon.coordinates) {
      return res.status(400).json({ error: 'Polygon coordinates are required' });
    }
    console.log('Analyzing polygon:', polygon.coordinates[0].length, 'points');
    // Получаем спутниковые данные
    const satelliteData = await getSentinelData(polygon, date);
    // Вычисляем NDVI
    const ndviResult = await calculateNDVI(satelliteData);
    // Генерируем статистику
    const stats = generateNDVIStats(ndviResult.ndviValues);
    // Для демонстрации используем сгенерированное изображение с паттернами
    const demoImage = generateFieldPatternNDVI(400, 400);
    res.json({
      success: true,
      data: {
        ndviImage: demoImage, // Используем демо изображение
        stats: stats,
        date: satelliteData.date || new Date().toISOString().split('T')[0],
        area: calculateArea(polygon),
        polygon: polygon // Сохраняем полигон для истории
      }
    });
  } catch (error) {
    console.error('Error in NDVI analysis:', error);
    res.status(500).json({ 
      error: 'Analysis failed', 
      message: error.message 
    });
  }
 });
 // Остальные функции остаются без изменений...
 // Generate NDVI statistics
 function generateNDVIStats(ndviValues) {
  const validValues = ndviValues.filter(v => !isNaN(v) && v >= -1 && v <= 1);
  if (validValues.length === 0) {
    return {
      mean: 0,
      min: 0,
      max: 0,
      healthy: 0,
      moderate: 0,
      poor: 0
    };
  }
  const mean = validValues.reduce((a, b) => a + b, 0) / validValues.length;
  const min = Math.min(...validValues);
  const max = Math.max(...validValues);
  // Categorize vegetation health
  const healthy = validValues.filter(v => v > 0.6).length / validValues.length * 100;
  const moderate = validValues.filter(v => v > 0.3 && v <= 0.6).length / validValues.length * 100;
  const poor = validValues.filter(v => v <= 0.3).length / validValues.length * 100;
  return {
    mean: parseFloat(mean.toFixed(3)),
    min: parseFloat(min.toFixed(3)),
    max: parseFloat(max.toFixed(3)),
    healthy: parseFloat(healthy.toFixed(1)),
    moderate: parseFloat(moderate.toFixed(1)),
    poor: parseFloat(poor.toFixed(1))
  };
 }
 // Calculate area in hectares (simplified)
 function calculateArea(polygon) {
  const coords = polygon.coordinates[0];
  let area = 0;
  for (let i = 0; i < coords.length - 1; i++) {
    const [x1, y1] = coords[i];
    const [x2, y2] = coords[i + 1];
    area += (x1 * y2 - x2 * y1);
  }
  area = Math.abs(area) / 2;
  // Convert to hectares (approximate)
  const areaHectares = area * 10000;
  return parseFloat(areaHectares.toFixed(2));
 }
 export default router;
--- a/server/server.js
+++ b/server/server.js
@ -0,0 +1,28 @@
 import express, { json, urlencoded } from 'express';
 import cors from 'cors';
 import ndviRoutes from './routes/ndvi.js';
 const app = express();
 const PORT = process.env.PORT || 3000;
 app.use(cors());
 app.use(json({ limit: '50mb' }));
 app.use(urlencoded({ extended: true, limit: '50mb' }));
 app.use('/api/ndvi', ndviRoutes);
 app.get('/api/health', (req, res) => {
    res.json({ status: 'OK', message: 'Работаю!' });
 });
 app.use((error, req, res, next) => {
    console.error('Ошибка:', error);
    res.status(500).json({
        error: 'Internal server error',
        message: error.message
    });
 });
 app.listen(PORT, () => {
    console.log(`Сервер работает на порту ${PORT}`);
 });
--- a/server/utils/sentinel.js
+++ b/server/utils/sentinel.js
@ -0,0 +1,231 @@
 import { createCanvas } from 'canvas';
 import axios from 'axios';
 class SentinelHubService {
  constructor() {
    this.baseUrl = 'https://services.sentinel-hub.com/ogc/wms';
    this.instanceId = process.env.SENTINEL_INSTANCE_ID;
  }
  async getData(polygon, date = null) {
    // Генерируем mock данные для демонстрации
    const bbox = this.getBoundingBox(polygon);
    return {
      redBand: this.generateMockBandData(bbox, 0.1, 0.3),
      nirBand: this.generateMockBandData(bbox, 0.4, 0.8),
      date: date || new Date().toISOString().split('T')[0],
      bbox: bbox
    };
  }
  getBoundingBox(polygon) {
    const coords = polygon.coordinates[0];
    const lats = coords.map(coord => coord[1]);
    const lons = coords.map(coord => coord[0]);
    return {
      minLon: Math.min(...lons),
      minLat: Math.min(...lats),
      maxLon: Math.max(...lons),
      maxLat: Math.max(...lats)
    };
  }
  generateMockBandData(bbox, min, max) {
    // Генерируем mock растровые данные
    const width = 200;
    const height = 200;
    const data = [];
    // Создаем паттерн для более реалистичных данных
    for (let y = 0; y < height; y++) {
      const row = [];
      for (let x = 0; x < width; x++) {
        // Создаем паттерн с некоторой пространственной корреляцией
        const baseValue = min + Math.random() * (max - min);
        // Добавляем некоторые паттерны
        const pattern1 = Math.sin(x * 0.1) * 0.1;
        const pattern2 = Math.cos(y * 0.1) * 0.1;
        const noise = (Math.random() - 0.5) * 0.2;
        const value = Math.max(min, Math.min(max, baseValue + pattern1 + pattern2 + noise));
        row.push(value);
      }
      data.push(row);
    }
    return {
      data: data,
      width: width,
      height: height,
      bbox: bbox
    };
  }
 }
 const sentinelService = new SentinelHubService();
 export async function getSentinelData(polygon, date) {
  return await sentinelService.getData(polygon, date);
 }
 export async function calculateNDVI(satelliteData) {
  const { redBand, nirBand } = satelliteData;
  const ndviValues = [];
  // Создаем canvas для генерации изображения
  const canvas = createCanvas(redBand.width, redBand.height);
  const ctx = canvas.getContext('2d');
  // Создаем ImageData для манипуляций с пикселями
  const imageData = ctx.createImageData(redBand.width, redBand.height);
  for (let y = 0; y < redBand.height; y++) {
    for (let x = 0; x < redBand.width; x++) {
      const nir = nirBand.data[y][x];
      const red = redBand.data[y][x];
      // Calculate NDVI
      let ndvi = (nir - red) / (nir + red);
      // Обрабатываем случаи деления на ноль
      if (isNaN(ndvi) || !isFinite(ndvi)) {
        ndvi = -1;
      }
      ndviValues.push(ndvi);
      // Convert NDVI to color
      const color = ndviToColor(ndvi);
      const index = (y * redBand.width + x) * 4;
      imageData.data[index] = color[0];     // R
      imageData.data[index + 1] = color[1]; // G
      imageData.data[index + 2] = color[2]; // B
      imageData.data[index + 3] = color[3]; // A
    }
  }
  // Применяем ImageData к canvas
  ctx.putImageData(imageData, 0, 0);
  // Конвертируем в base64
  const ndviImage = canvas.toDataURL('image/png');
  return { 
    ndviValues, 
    ndviImage,
    width: redBand.width,
    height: redBand.height,
    bbox: redBand.bbox
  };
 }
 function ndviToColor(ndvi) {
  // Convert NDVI value to RGBA color
  if (ndvi < -0.2) return [140, 140, 140, 200];   // Gray - water/clouds
  if (ndvi < 0) return [210, 180, 140, 200];      // Tan - soil
  if (ndvi < 0.1) return [255, 255, 200, 200];    // Light yellow - very sparse
  if (ndvi < 0.3) return [255, 255, 0, 200];      // Yellow - sparse vegetation
  if (ndvi < 0.6) return [0, 255, 0, 200];        // Green - moderate vegetation
  return [0, 100, 0, 200];                        // Dark green - dense vegetation
 }
 // Альтернативная функция для генерации градиентного изображения
 export function generateGradientNDVI(width, height) {
  const canvas = createCanvas(width, height);
  const ctx = canvas.getContext('2d');
  // Создаем горизонтальный градиент
  const gradient = ctx.createLinearGradient(0, 0, width, 0);
  gradient.addColorStop(0.0, '#8C8C8C');    // Вода/Облака
  gradient.addColorStop(0.2, '#D2B48C');    // Почва
  gradient.addColorStop(0.4, '#FFFF00');    // Слабая растительность
  gradient.addColorStop(0.7, '#00FF00');    // Умеренная растительность
  gradient.addColorStop(1.0, '#006400');    // Густая растительность
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, width, height);
  // Добавляем вертикальные вариации
  const verticalGradient = ctx.createLinearGradient(0, 0, 0, height);
  verticalGradient.addColorStop(0, 'rgba(255,255,255,0.3)');
  verticalGradient.addColorStop(1, 'rgba(0,0,0,0.3)');
  ctx.fillStyle = verticalGradient;
  ctx.fillRect(0, 0, width, height);
  // Добавляем некоторые паттерны для реалистичности
  ctx.fillStyle = 'rgba(0,0,0,0.1)';
  for (let i = 0; i < 50; i++) {
    const x = Math.random() * width;
    const y = Math.random() * height;
    const size = Math.random() * 10 + 5;
    ctx.beginPath();
    ctx.arc(x, y, size, 0, Math.PI * 2);
    ctx.fill();
  }
  return canvas.toDataURL('image/png');
 }
 // Функция для создания паттернов поля
 export function generateFieldPatternNDVI(width, height) {
  const canvas = createCanvas(width, height);
  const ctx = canvas.getContext('2d');
  // Заливаем базовым цветом (умеренная растительность)
  ctx.fillStyle = '#00FF00';
  ctx.fillRect(0, 0, width, height);
  // Добавляем полосы разной растительности
  const stripeHeight = height / 8;
  for (let i = 0; i < 8; i++) {
    const y = i * stripeHeight;
    if (i % 4 === 0) {
      // Густая растительность
      ctx.fillStyle = '#006400';
    } else if (i % 4 === 2) {
      // Слабая растительность
      ctx.fillStyle = '#FFFF00';
    } else {
      // Умеренная растительность
      ctx.fillStyle = '#00FF00';
    }
    ctx.fillRect(0, y, width, stripeHeight);
  }
  // Добавляем случайные пятна проблемных зон
  ctx.fillStyle = '#D2B48C';
  for (let i = 0; i < 15; i++) {
    const x = Math.random() * width;
    const y = Math.random() * height;
    const size = Math.random() * 20 + 10;
    ctx.beginPath();
    ctx.arc(x, y, size, 0, Math.PI * 2);
    ctx.fill();
  }
  // Добавляем водные объекты
  ctx.fillStyle = '#8C8C8C';
  for (let i = 0; i < 3; i++) {
    const x = Math.random() * width * 0.8;
    const y = Math.random() * height * 0.8;
    const w = Math.random() * 30 + 20;
    const h = Math.random() * 30 + 20;
    ctx.fillRect(x, y, w, h);
  }
  return canvas.toDataURL('image/png');
 }
 export default {
  getSentinelData,
  calculateNDVI,
  generateGradientNDVI,
  generateFieldPatternNDVI
 };
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,82 @@
 <template>
  <div id="app">
    <header class="header">
      <div class="container">
        <h1>🌱 Анализатор здоровья полей</h1>
        <p>AI-анализ состояния сельскохозяйственных культур по спутниковым снимкам</p>
      </div>
    </header>
    <main class="main">
      <div class="container">
        <div class="layout">
          <div class="map-section">
            <MapComponent 
              @area-selected="handleAreaSelected"
              :analysis-result="analysisResult"
              :is-loading="isLoading"
            />
          </div>
          <div class="dashboard-section">
            <Dashboard 
              :stats="analysisResult?.stats"
              :date="analysisResult?.date"
              :area="analysisResult?.area"
              :is-loading="isLoading"
            />
          </div>
        </div>
      </div>
    </main>
    <footer class="footer">
      <div class="container">
        <p>© 2024 Field Health Analyzer. Хакатон проект.</p>
      </div>
    </footer>
  </div>
 </template>
 <script>
 import MapComponent from './components/MapComponent.vue';
 import Dashboard from './components/Dashboard.vue';
 import axios from 'axios';
 const API_BASE = 'http://localhost:3000/api';
 export default {
  name: 'App',
  components: {
    MapComponent,
    Dashboard
  },
  data() {
    return {
      analysisResult: null,
      isLoading: false
    };
  },
  methods: {
    async handleAreaSelected(polygon) {
      this.isLoading = true;
      try {
        const response = await axios.post(`${API_BASE}/ndvi/analyze`, {
          polygon: polygon,
          date: new Date().toISOString().split('T')[0]
        });
        if (response.data.success) {
          this.analysisResult = response.data.data;
        }
      } catch (error) {
        console.error('Error analyzing area:', error);
        alert('Ошибка при анализе области. Попробуйте еще раз.');
      } finally {
        this.isLoading = false;
      }
    }
  }
 };
 </script>
--- a/src/components/Dashboard.vue
+++ b/src/components/Dashboard.vue
@ -0,0 +1,397 @@
 <template>
  <div class="dashboard">
    <div class="dashboard-header">
      <h2>📊 Анализ здоровья поля</h2>
      <p v-if="!stats">Выберите область на карте для анализа</p>
    </div>
    <div v-if="isLoading" class="loading">
      <div class="spinner"></div>
      <p>Идет анализ данных...</p>
    </div>
    <div v-else-if="stats" class="dashboard-content">
      <div class="info-cards">
        <div class="info-card">
          <div class="card-icon">📅</div>
          <div class="card-content">
            <h3>Дата анализа</h3>
            <p>{{ date }}</p>
          </div>
        </div>
        <div class="info-card">
          <div class="card-icon">📐</div>
          <div class="card-content">
            <h3>Площадь поля</h3>
            <p>{{ area }} га</p>
          </div>
        </div>
        <div class="info-card">
          <div class="card-icon">📈</div>
          <div class="card-content">
            <h3>Средний NDVI</h3>
            <p :class="getNDVIClass(stats.mean)">{{ stats.mean }}</p>
          </div>
        </div>
      </div>
      <div class="stats-section">
        <h3>Статистика растительности</h3>
        <div class="health-stats">
          <div class="health-item good">
            <div class="health-bar">
              <div 
                class="health-fill" 
                :style="{ width: stats.healthy + '%' }"
              ></div>
            </div>
            <div class="health-label">
              <span>Здоровая</span>
              <span>{{ stats.healthy }}%</span>
            </div>
          </div>
          <div class="health-item moderate">
            <div class="health-bar">
              <div 
                class="health-fill" 
                :style="{ width: stats.moderate + '%' }"
              ></div>
            </div>
            <div class="health-label">
              <span>Умеренная</span>
              <span>{{ stats.moderate }}%</span>
            </div>
          </div>
          <div class="health-item poor">
            <div class="health-bar">
              <div 
                class="health-fill" 
                :style="{ width: stats.poor + '%' }"
              ></div>
            </div>
            <div class="health-label">
              <span>Слабая</span>
              <span>{{ stats.poor }}%</span>
            </div>
          </div>
        </div>
      </div>
      <div class="ndvi-info">
        <h3>Интерпретация NDVI</h3>
        <div class="ndvi-scale">
          <div class="scale-item" v-for="item in ndviScale" :key="item.label">
            <div class="scale-color" :style="{ background: item.color }"></div>
            <span class="scale-label">{{ item.label }}</span>
            <span class="scale-range">{{ item.range }}</span>
          </div>
        </div>
      </div>
      <div class="recommendations" v-if="stats">
        <h3>Рекомендации</h3>
        <div class="recommendation-list">
          <div 
            v-for="rec in getRecommendations()" 
            :key="rec.text"
            class="recommendation-item"
          >
            <span class="rec-icon">{{ rec.icon }}</span>
            <span>{{ rec.text }}</span>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="empty-state">
      <div class="empty-icon">🌾</div>
      <h3>Начните анализ</h3>
      <p>Нарисуйте полигон на карте, чтобы проанализировать здоровье растительности</p>
    </div>
  </div>
 </template>
 <script>
 export default {
  name: 'Dashboard',
  props: {
    stats: Object,
    date: String,
    area: Number,
    isLoading: Boolean
  },
  data() {
    return {
      ndviScale: [
        { label: 'Густая растительность', range: '0.6 - 1.0', color: '#006400' },
        { label: 'Умеренная растительность', range: '0.3 - 0.6', color: '#00FF00' },
        { label: 'Слабая растительность', range: '0.1 - 0.3', color: '#FFFF00' },
        { label: 'Почва', range: '0.0 - 0.1', color: '#D2B48C' },
        { label: 'Вода/Облака', range: '-1.0 - 0.0', color: '#8C8C8C' }
      ]
    };
  },
  methods: {
    getNDVIClass(ndvi) {
      if (ndvi > 0.6) return 'ndvi-good';
      if (ndvi > 0.3) return 'ndvi-moderate';
      return 'ndvi-poor';
    },
    getRecommendations() {
      if (!this.stats) return [];
      const recommendations = [];
      if (this.stats.poor > 30) {
        recommendations.push({
          icon: '💧',
          text: 'Рекомендуется дополнительный полив проблемных зон'
        });
      }
      if (this.stats.mean < 0.4) {
        recommendations.push({
          icon: '🌱',
          text: 'Рассмотрите внесение удобрений для улучшения вегетации'
        });
      }
      if (this.stats.healthy > 70) {
        recommendations.push({
          icon: '✅',
          text: 'Состояние поля отличное, продолжайте текущий уход'
        });
      } else {
        recommendations.push({
          icon: '🔍',
          text: 'Рекомендуется детальный осмотр проблемных участков'
        });
      }
      return recommendations;
    }
  }
 };
 </script>
 <style scoped>
 .dashboard {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  height: fit-content;
 }
 .dashboard-header h2 {
  margin: 0 0 8px 0;
  color: #2c3e50;
 }
 .dashboard-header p {
  margin: 0;
  color: #7f8c8d;
 }
 .loading {
  text-align: center;
  padding: 40px 0;
 }
 .spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 2s linear infinite;
  margin: 0 auto 16px;
 }
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
 }
 .info-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
  margin: 20px 0;
 }
 .info-card {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #3498db;
  display: flex;
  align-items: center;
  gap: 12px;
 }
 .card-icon {
  font-size: 24px;
 }
 .card-content h3 {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: #7f8c8d;
 }
 .card-content p {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  color: #2c3e50;
 }
 .ndvi-good { color: #27ae60; }
 .ndvi-moderate { color: #f39c12; }
 .ndvi-poor { color: #e74c3c; }
 .stats-section {
  margin: 25px 0;
 }
 .stats-section h3 {
  margin-bottom: 15px;
  color: #2c3e50;
 }
 .health-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
 }
 .health-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
 }
 .health-bar {
  height: 8px;
  background: #ecf0f1;
  border-radius: 4px;
  overflow: hidden;
 }
 .health-fill {
  height: 100%;
  transition: width 0.5s ease;
 }
 .health-item.good .health-fill { background: #27ae60; }
 .health-item.moderate .health-fill { background: #f39c12; }
 .health-item.poor .health-fill { background: #e74c3c; }
 .health-label {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
 }
 .ndvi-info {
  margin: 25px 0;
 }
 .ndvi-info h3 {
  margin-bottom: 15px;
  color: #2c3e50;
 }
 .ndvi-scale {
  display: flex;
  flex-direction: column;
  gap: 8px;
 }
 .scale-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
 }
 .scale-color {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  border: 1px solid #ddd;
 }
 .scale-label {
  flex: 1;
  font-size: 14px;
 }
 .scale-range {
  font-size: 12px;
  color: #7f8c8d;
 }
 .recommendations {
  margin-top: 25px;
 }
 .recommendations h3 {
  margin-bottom: 15px;
  color: #2c3e50;
 }
 .recommendation-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
 }
 .recommendation-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #e8f4fd;
  border-radius: 6px;
  border-left: 4px solid #3498db;
 }
 .rec-icon {
  font-size: 18px;
 }
 .empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #7f8c8d;
 }
 .empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
 }
 .empty-state h3 {
  margin: 0 0 8px 0;
  color: #2c3e50;
 }
 .empty-state p {
  margin: 0;
  line-height: 1.5;
 }
@media (max-width: 768px) {
  .info-cards {
    grid-template-columns: 1fr;
  }
 }
 </style>
--- a/src/components/HistoryComponent.vue
+++ b/src/components/HistoryComponent.vue
@ -0,0 +1,91 @@
 <template>
  <div class="bg-white rounded-lg shadow-lg p-6">
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-2xl font-bold text-gray-800">📋 История анализов</h2>
      <button 
        @click="$emit('clear-history')"
        class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg transition-colors"
        :disabled="history.length === 0"
      >
        Очистить историю
      </button>
    </div>
    <div v-if="history.length === 0" class="text-center py-12">
      <div class="text-6xl mb-4">📊</div>
      <h3 class="text-xl font-semibold text-gray-600 mb-2">История пуста</h3>
      <p class="text-gray-500">Выполните анализ поля, чтобы сохранить его в историю</p>
    </div>
    <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div 
        v-for="item in history" 
        :key="item.id"
        class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow bg-white"
      >
        <div class="flex justify-between items-start mb-3">
          <h3 class="font-semibold text-lg text-gray-800 truncate">{{ item.fieldName }}</h3>
          <button 
            @click="$emit('delete-history', item.id)"
            class="text-red-500 hover:text-red-700 transition-colors"
            title="Удалить"
          >
            🗑️
          </button>
        </div>
        <div class="space-y-2 text-sm text-gray-600 mb-4">
          <div class="flex justify-between">
            <span>Дата анализа:</span>
            <span class="font-medium">{{ new Date(item.date).toLocaleDateString() }}</span>
          </div>
          <div class="flex justify-between">
            <span>Площадь:</span>
            <span class="font-medium">{{ item.area }} га</span>
          </div>
          <div class="flex justify-between">
            <span>Средний NDVI:</span>
            <span :class="getNDVIClass(item.result.stats.mean)" class="font-medium">
              {{ item.result.stats.mean }}
            </span>
          </div>
        </div>
        <div class="space-y-2 mb-4">
          <div class="flex justify-between text-xs">
            <span class="text-green-600">Здоровая: {{ item.result.stats.healthy }}%</span>
            <span class="text-yellow-600">Умеренная: {{ item.result.stats.moderate }}%</span>
            <span class="text-red-600">Слабая: {{ item.result.stats.poor }}%</span>
          </div>
        </div>
        <button 
          @click="$emit('load-analysis', item)"
          class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg transition-colors flex items-center justify-center"
        >
          <span>Загрузить анализ</span>
        </button>
      </div>
    </div>
  </div>
 </template>
 <script>
 export default {
  name: 'HistoryComponent',
  props: {
    history: {
      type: Array,
      default: () => []
    }
  },
  emits: ['load-analysis', 'delete-history', 'clear-history'],
  methods: {
    getNDVIClass(ndvi) {
      if (ndvi > 0.6) return 'text-green-600';
      if (ndvi > 0.3) return 'text-yellow-600';
      return 'text-red-600';
    }
  }
 };
 </script>
--- a/src/components/MapComponent.vue
+++ b/src/components/MapComponent.vue
@ -0,0 +1,470 @@
 <template>
  <div class="map-container">
    <div class="map-controls">
      <div class="field-name-input">
        <label>Название поля:</label>
        <input
          v-model="localFieldName"
          @input="$emit('field-name-changed', localFieldName)"
          type="text"
          placeholder="Введите название поля..."
        />
      </div>
      <button 
        @click="toggleDrawing" 
        :class="['draw-btn', { active: isDrawing }]"
      >
        {{ isDrawing ? '✓ Завершить рисование' : '🖊️ Нарисовать поле' }}
      </button>
      <button 
        @click="clearMap" 
        class="clear-btn"
        :disabled="!hasPolygon"
      >
        🗑️ Очистить
      </button>
    </div>
    <div id="map" ref="mapContainer" class="map"></div>
    <div v-if="isLoading" class="loading-overlay">
      <div class="spinner"></div>
      <p>Анализ спутниковых данных...</p>
    </div>
    <div class="legend">
      <h4>Легенда NDVI</h4>
      <div class="legend-items">
        <div v-for="item in legendItems" :key="item.label" class="legend-item">
          <div class="color-box" :style="{ backgroundColor: item.color }"></div>
          <span>{{ item.label }}</span>
        </div>
      </div>
    </div>
  </div>
 </template>
 <script>
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 // Исправление для иконок маркеров
 delete L.Icon.Default.prototype._getIconUrl;
 L.Icon.Default.mergeOptions({
  iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png',
  iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
 });
 export default {
  name: 'MapComponent',
  emits: ['areaSelected', 'field-name-changed'],
  props: {
    analysisResult: Object,
    isLoading: Boolean,
    fieldName: String
  },
  data() {
    return {
      map: null,
      drawnItems: null,
      isDrawing: false,
      hasPolygon: false,
      currentPolygon: null,
      localFieldName: '',
      ndviOverlay: null,
      ndviImageLayer: null,
      legendItems: [
        { label: 'Вода/Облака', color: '#8C8C8C' },
        { label: 'Почва', color: '#D2B48C' },
        { label: 'Слабая растительность', color: '#FFFF00' },
        { label: 'Умеренная растительность', color: '#00FF00' },
        { label: 'Густая растительность', color: '#006400' }
      ]
    };
  },
  watch: {
    fieldName(newVal) {
      this.localFieldName = newVal;
    },
    analysisResult(newResult) {
      if (newResult && newResult.ndviImage && this.currentPolygon) {
        this.displayNDVIResults(newResult);
      }
    }
  },
  mounted() {
    this.localFieldName = this.fieldName;
    this.$nextTick(() => {
      this.initMap();
    });
  },
  methods: {
    initMap() {
      // Центрируем карту на сельскохозяйственных регионах России
      this.map = L.map(this.$refs.mapContainer).setView([51.6755, 39.2084], 5);
      // Добавление базового слоя
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        maxZoom: 19
      }).addTo(this.map);
      // Инициализация слоя для рисования
      this.drawnItems = new L.FeatureGroup();
      this.map.addLayer(this.drawnItems);
      // Слой для NDVI overlay
      this.ndviOverlay = L.layerGroup().addTo(this.map);
      setTimeout(() => {
        this.map.invalidateSize();
      }, 100);
    },
    displayNDVIResults(result) {
      // Очищаем предыдущие результаты
      if (this.ndviImageLayer) {
        this.ndviOverlay.removeLayer(this.ndviImageLayer);
      }
      if (result.ndviImage && this.currentPolygon) {
        // Получаем bounds из текущего полигона
        const bounds = this.currentPolygon.getBounds();
        // Создаем маску для ограничения изображения полигоном
        this.createNDVIOverlay(result.ndviImage, bounds);
        console.log('NDVI overlay добавлен на карту в пределах полигона');
      }
    },
    createNDVIOverlay(imageUrl, bounds) {
      // Создаем временный элемент для загрузки изображения
      const img = new Image();
      img.onload = () => {
        // Создаем canvas для маскирования
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = img.width;
        canvas.height = img.height;
        // Рисуем изображение
        ctx.drawImage(img, 0, 0);
        // Создаем маску в форме полигона
        ctx.globalCompositeOperation = 'destination-in';
        ctx.fillStyle = 'black';
        ctx.beginPath();
        // Преобразуем координаты полигона в координаты canvas
        const polyBounds = this.currentPolygon.getBounds();
        const polyPoints = this.currentPolygon.getLatLngs()[0];
        polyPoints.forEach((latlng, index) => {
          const x = ((latlng.lng - polyBounds.getWest()) / (polyBounds.getEast() - polyBounds.getWest())) * canvas.width;
          const y = canvas.height - ((latlng.lat - polyBounds.getSouth()) / (polyBounds.getNorth() - polyBounds.getSouth())) * canvas.height;
          if (index === 0) {
            ctx.moveTo(x, y);
          } else {
            ctx.lineTo(x, y);
          }
        });
        ctx.closePath();
        ctx.fill();
        // Создаем Data URL для маскированного изображения
        const maskedImageUrl = canvas.toDataURL('image/png');
        // Добавляем маскированное изображение на карту
        this.ndviImageLayer = L.imageOverlay(maskedImageUrl, bounds, {
          opacity: 0.7,
          interactive: false
        }).addTo(this.ndviOverlay);
      };
      img.src = imageUrl;
    },
    toggleDrawing() {
      if (this.isDrawing) {
        this.finishDrawing();
      } else {
        this.startDrawing();
      }
    },
    startDrawing() {
      this.isDrawing = true;
      this.map.dragging.disable();
      this.map.getContainer().style.cursor = 'crosshair';
      // Очищаем предыдущий полигон и результаты
      this.clearNDVIResults();
      if (this.currentPolygon) {
        this.drawnItems.removeLayer(this.currentPolygon);
      }
      // Создаем новый полигон
      this.currentPolygon = L.polygon([], {
        color: '#3388ff',
        fillColor: '#3388ff',
        fillOpacity: 0.2,
        weight: 3
      }).addTo(this.drawnItems);
      this.map.on('click', this.handleMapClick);
    },
    finishDrawing() {
      this.isDrawing = false;
      this.map.dragging.enable();
      this.map.getContainer().style.cursor = '';
      this.map.off('click', this.handleMapClick);
      if (this.currentPolygon) {
        const latlngs = this.currentPolygon.getLatLngs()[0];
        // Проверяем, что полигон имеет достаточно точек
        if (latlngs.length >= 3) {
          // Замыкаем полигон
          latlngs.push(latlngs[0]);
          this.currentPolygon.setLatLngs([latlngs]);
          const coordinates = this.getPolygonCoordinates(this.currentPolygon);
          this.$emit('areaSelected', coordinates);
          // Центрируем карту на нарисованном полигоне
          this.map.fitBounds(this.currentPolygon.getBounds());
        } else {
          alert('Пожалуйста, нарисуйте полигон как минимум с 3 точками');
          this.drawnItems.removeLayer(this.currentPolygon);
          this.currentPolygon = null;
        }
      }
    },
    handleMapClick(e) {
      if (this.currentPolygon) {
        const latlngs = this.currentPolygon.getLatLngs()[0];
        latlngs.push(e.latlng);
        this.currentPolygon.setLatLngs([latlngs]);
        this.hasPolygon = true;
      }
    },
    getPolygonCoordinates(polygon) {
      const latlngs = polygon.getLatLngs()[0];
      const coordinates = latlngs.map(latlng => [latlng.lng, latlng.lat]);
      return {
        type: 'Polygon',
        coordinates: [coordinates]
      };
    },
    clearNDVIResults() {
      if (this.ndviOverlay) {
        this.ndviOverlay.clearLayers();
      }
      this.ndviImageLayer = null;
    },
    clearMap() {
      if (this.drawnItems) {
        this.drawnItems.clearLayers();
      }
      this.clearNDVIResults();
      this.currentPolygon = null;
      this.hasPolygon = false;
      this.isDrawing = false;
      this.map.off('click', this.handleMapClick);
      this.map.getContainer().style.cursor = '';
      this.map.dragging.enable();
      // Возвращаем карту к исходному виду
      this.map.setView([51.6755, 39.2084], 5);
    }
  },
  beforeUnmount() {
    if (this.map) {
      this.map.remove();
    }
  }
 };
 </script>
 <style scoped>
 .map-container {
  position: relative;
  height: 600px;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  background: white;
 }
 .map {
  height: 100%;
  width: 100%;
  min-height: 500px;
 }
 .map-controls {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: white;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  min-width: 250px;
 }
 .field-name-input {
  display: flex;
  flex-direction: column;
  gap: 5px;
 }
 .field-name-input label {
  font-weight: 600;
  color: #333;
  font-size: 14px;
 }
 .field-name-input input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
 }
 .field-name-input input:focus {
  outline: none;
  border-color: #3388ff;
 }
 .draw-btn, .clear-btn {
  padding: 10px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
  font-weight: 500;
 }
 .draw-btn {
  background: #4CAF50;
  color: white;
 }
 .draw-btn.active {
  background: #2196F3;
 }
 .draw-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
 }
 .clear-btn {
  background: #f44336;
  color: white;
 }
 .clear-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
 }
 .clear-btn:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
 }
 .loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,255,255,0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 999;
 }
 .spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 2s linear infinite;
 }
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
 }
 .legend {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: white;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 1000;
  max-width: 250px;
 }
 .legend h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
 }
 .legend-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
 }
 .legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
 }
 .color-box {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 3px;
  flex-shrink: 0;
 }
 .legend-item span {
  color: #666;
  line-height: 1.3;
 }
 </style>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,5 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 import './styles/main.css';
 createApp(App).mount('#app');
--- a/src/styles/main.css
+++ b/src/styles/main.css
@ -0,0 +1,90 @@
 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
 }
 body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f5f5f5;
 }
 /* Важные стили для Leaflet */
 .leaflet-container {
  height: 100%;
  width: 100%;
  font-family: inherit;
 }
 /* Исправление для тайлов */
 .leaflet-layer,
 .leaflet-control-zoom-in,
 .leaflet-control-zoom-out,
 .leaflet-control-attribution {
  font-family: inherit !important;
 }
 /* Исправление для маркеров */
 .leaflet-marker-icon {
  margin-left: -12px !important;
  margin-top: -41px !important;
 }
 .leaflet-marker-shadow {
  margin-left: -12px !important;
  margin-top: -41px !important;
 }
 .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
 }
 .header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 2rem 0;
  text-align: center;
 }
 .header h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
 }
 .header p {
  font-size: 1.1rem;
  opacity: 0.9;
 }
 .main {
  padding: 2rem 0;
 }
 .layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  align-items: start;
 }
 .footer {
  background: #2c3e50;
  color: white;
  text-align: center;
  padding: 1rem 0;
  margin-top: 2rem;
 }
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .header h1 {
    font-size: 2rem;
  }
 }
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,10 @@
 export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
 }
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,18 @@
 import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
 // https://vite.dev/config/
 export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
 })