Визуализация Свертки (CNN Convolution Visualizer)

Интерактивное веб-приложение для демонстрации работы сверточных слоев (Convolutional Layers) в нейронных сетях. Приложение визуализирует процесс прохождения ядра (фильтра) по изображению, выполняет математические расчеты в реальном времени и использует Google Gemini AI для объяснения смысла каждой операции простым языком.

🌟 Возможности

• Интерактивная визуализация: Наглядное отображение входной матрицы (изображения), ядра свертки и выходной карты признаков (Feature Map).
• Различные фильтры: Встроенные пресеты классических ядер компьютерного зрения:
  • Обнаружение границ (вертикальные/горизонтальные).
  • Повышение резкости (Sharpen).
  • Размытие (Box Blur).
  • Тождественное преобразование (Identity).
• Математика в деталях: Пошаговое отображение операции скалярного произведения (Dot Product) для каждого пикселя.
• AI-Объяснения: Интеграция с Google Gemini API для получения интуитивных объяснений того, почему конкретный участок изображения дал такой результат свертки (например, "здесь обнаружен резкий перепад яркости").
• Анимация: Автоматический режим прохода фильтра по изображению.
• "Липкое" выделение: Удобный UX, позволяющий взаимодействовать с результатами без потери контекста при движении мыши.

🛠 Технологический стек

• Frontend: React 19, TypeScript
• Стилизация: Tailwind CSS
• AI: Google Gemini SDK (@google/genai)
• Сборка: Vite / ES Modules

🚀 Установка и запуск

Следуйте этой инструкции, чтобы запустить проект локально.

Предварительные требования

1. Node.js (версия 18 или выше).
2. API Key от Google Gemini (получить бесплатно можно в Google AI Studio).

Шаги установки

1. Клонируйте репозиторий:

   git clone https://github.com/your-username/cnn-visualizer.git
   cd cnn-visualizer

2. Установите зависимости:

   npm install

3. Настройка переменных окружения:

   Для работы AI-функций необходимо предоставить API ключ.

   Если вы используете Vite: Создайте файл .env в корне проекта:

   VITE_API_KEY=ваш_ключ_здесь

   (Примечание: В коде используется process.env.API_KEY, убедитесь, что ваш сборщик настроен на его замену, либо используйте define в конфиге Vite).

4. Запуск в режиме разработки:

   npm run dev

5. Откройте приложение: Перейдите по ссылке в терминале (обычно http://localhost:5173).

🤖 Как использовать

1. Выберите фильтр: Используйте кнопки в верхней панели (например, "Вертикальные границы").
2. Исследуйте:
   • Наведите курсор на любую ячейку в правой матрице ("ВЫХОД").
   • Слева подсветятся соответствующие ячейки "ВХОДА" (Receptive Field).
   • Внизу отобразится панель "Математика шага" с детальным расчетом.
3. Анимация: Нажмите кнопку "Анимация", чтобы увидеть автоматический проход фильтра.
4. Спросите AI: Выделите интересующий вас пиксель результата и нажмите кнопку "Объяснить этот шаг". Искусственный интеллект проанализирует входные данные и фильтр, чтобы объяснить результат.

🧩 Структура проекта

• src/App.tsx - Главный компонент приложения и управление состоянием.
• src/components/
  • Grid.tsx - Компонент для отрисовки матриц с тепловой картой.
  • MathPanel.tsx - Визуализация математических вычислений.
• src/services/geminiService.ts - Клиент для взаимодействия с Google Gemini API.
• src/constants.ts - Определение входного изображения и пресетов ядер.

📄 Лицензия

Этот проект распространяется под лицензией MIT.

---

Создано с помощью React и Google Gemini.