🎨 ML Color Analysis

Интеллектуальное веб-приложение для анализа цветов на изображениях с использованием машинного обучения. Поддерживает 10 различных сценариев извлечения и анализа цветовой информации.

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

10 сценариев анализа:

1. Доминирующий цвет и палитра — извлечение главного цвета и палитры из 5-8 цветов с распределением
2. Цвет субъекта — определение цвета главного объекта с отсечением фона (с использованием ML-сегментации)
3. Контрастный текст — подбор цвета текста с гарантированным контрастом по стандартам WCAG (AA/AAA)
4. Акцент по сцене — умный выбор акцентного цвета на основе классификации сцены (пляж → оранжевый)
5. Цвет объекта — извлечение цвета конкретных объектов (яблоко, банан) с помощью детекции COCO-SSD
6. Портретный тон кожи — определение тона кожи на портретах с подбором комплементарного акцента
7. Анализ фона — работа с градиентами и однотонными фонами, подбор текста
8. Бренд-палитра — привязка извлечённых цветов к фирменной палитре (∆E в LAB)
9. Ролевая палитра — автоматическое создание палитры для дизайнеров (Primary/Secondary/Muted/Dark/Light)
10. Именование цветов — присвоение человеческих названий цветам ("Teal Blue", "Coral Pink")

Технологические особенности:

• 🧠 ML модели: MobileNet, COCO-SSD для классификации и детекции объектов
• 🎨 Цветовой анализ: node-vibrant, culori для работы с цветовыми пространствами
• ♿ WCAG контраст: проверка доступности текста
• 💾 История: локальное хранение результатов в IndexedDB
• ⚡ Кэширование: результаты кэшируются на сервере

🛠️ Технологии

Frontend:

• Nuxt 4 + Vue 3 + TypeScript
• Nuxt UI (Tailwind CSS компоненты)
• VueUse для composables
• IndexedDB для локального хранения

Backend:

• Nitro server (встроенный в Nuxt)
• TensorFlow.js + ML модели
• Sharp для обработки изображений
• node-vibrant для извлечения палитры
• culori для работы с цветовыми моделями (LAB, LCH)

ML Models:

• @tensorflow-models/mobilenet — классификация сцен
• @tensorflow-models/coco-ssd — детекция объектов
• node-vibrant — извлечение палитры

📦 Установка

Требования

• Node.js 18+
• npm

Установка зависимостей

npm install

🚀 Запуск

Development сервер

Запуск на http://localhost:3000:

npm run dev

Production build

# Сборка
npm run build

# Предпросмотр production сборки
npm run preview

Docker

# Сборка и запуск через Docker Compose
docker-compose up -d

# Остановка
docker-compose down

Приложение будет доступно на http://localhost:3000

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

ml_lab2/
├── app/
│   ├── app.vue                  # Главный компонент
│   ├── components/              # Vue компоненты
│   │   ├── ImageUploader.vue    # Загрузка изображений
│   │   ├── ImageCarousel.vue    # История результатов
│   │   ├── ResultCard.vue       # Карточка результата
│   │   └── ScenarioSelector.vue # Выбор сценария
│   ├── composables/             # Vue composables
│   │   ├── useColorAnalysis.ts  # API анализа
│   │   └── useImageHistory.ts   # История в IndexedDB
│   ├── types/                   # TypeScript типы
│   └── utils/
│       └── indexedDB.ts         # Работа с IndexedDB
├── server/
│   ├── api/
│   │   └── color/
│   │       └── analyze.post.ts  # API endpoint анализа
│   ├── plugins/
│   │   ├── warmup-models.ts     # Предзагрузка ML моделей
│   │   └── clear-cache.server.ts
│   └── utils/
│       ├── cache.ts             # Кэширование результатов
│       └── scenarios/           # Реализация 10 сценариев
│           ├── scenario1.ts     # Доминирующий цвет
│           ├── scenario2.ts     # Цвет субъекта
│           ├── scenario3.ts     # Контрастный текст
│           ├── scenario4.ts     # Акцент по сцене
│           ├── scenario5.ts     # Цвет объекта
│           ├── scenario6.ts     # Портретный тон
│           ├── scenario7.ts     # Анализ фона
│           ├── scenario8.ts     # Бренд-палитра
│           ├── scenario9.ts     # Ролевая палитра
│           └── scenario10.ts    # Именование цветов
├── docker-compose.yml
├── Dockerfile
├── nuxt.config.ts
└── package.json

🎯 Использование

1. Загрузите изображение через drag & drop или выбор файла
2. Выберите сценарий анализа из списка (1-10)
3. Нажмите "Анализировать" — результат появится в истории
4. Просмотр истории — все результаты сохраняются локально и доступны в карусели

Примеры сценариев:

• Сценарий 1: Загрузите фото моря → получите доминантную бирюзу и палитру
• Сценарий 3: Загрузите любое изображение → получите оптимальный цвет текста с контрастом
• Сценарий 5: Загрузите натюрморт → получите цвета для каждого фрукта
• Сценарий 6: Загрузите портрет → получите тон кожи и комплементарный акцент

🔧 Конфигурация

Кэширование

Результаты кэшируются в ./.data/color-cache (файловая система). Для очистки:

rm -rf .data/color-cache

ML модели

Модели загружаются при старте сервера (warm-up) в server/plugins/warmup-models.ts. Для отключения удалите или закомментируйте плагин.

📊 API

POST /api/color/analyze

Анализ изображения с выбранным сценарием.

Request:

• Content-Type: multipart/form-data
• image: File — изображение для анализа
• scenario: number — ID сценария (1-10)

Response:

{
  "success": true,
  "scenario": 1,
  "result": {
    "dominantColor": "#2F8FAF",
    "palette": [
      { "hex": "#2F8FAF", "rgb": [47, 143, 175], "population": 4500 }
    ]
  },
  "processingTime": 1234,
  "cached": false
}

🐛 Отладка

# Логи сервера
NODE_ENV=development npm run dev

# Проверка здоровья ML моделей
curl http://localhost:3000/api/health/models

👨‍💻 Разработка

Создано как учебный проект для демонстрации возможностей ML в веб-приложениях.

Связанные технологии:

• Nuxt 4 — фреймворк
• TensorFlow.js — ML модели
• Sharp — обработка изображений
• node-vibrant — извлечение палитры
• culori — работа с цветами

---

Примечание: Для продакшена рекомендуется использовать @tensorflow/tfjs-node вместо @tensorflow/tfjs для значительного ускорения инференса.