Интерактивное раскрашивание

краткое описание

Интерактивное приложение для выбора и раскрашивания изображений.

промпт

Создайте простое интерактивное приложение для раскрашивания с следующими функциями:

### Обзор проекта
- Приложение, позволяющее пользователям выбирать изображения и раскрашивать отдельные области.
- Поддержка таких форматов изображений, как JPEG и PNG.

### Дизайн и поток UI/UX
- **Первый экран**:
  - Отобразите заметную кнопку с надписью "Выбрать изображение с компьютера".
  - При нажатии открыть файловый браузер для выбора изображения.
- **После выбора изображения**:
  - Показать предпросмотр выбранного изображения по центру экрана.
  - Отобразить кнопку с надписью "Начать раскрашивание" ниже изображения.
- **Экран раскрашивания**:
  - Проанализировать изображение для обнаружения как минимум двух областей для раскрашивания, отобразив изображение на весь экран с видимыми границами.
  - **В левом верхнем углу**:
    - Кнопка "Назад": Возвращает к выбору изображения с подтверждением.
    - Кнопка "Сохранить": Скачивает раскрашенное изображение.
  - **В правом верхнем углу**:
    - Большой красный круг, указывающий на текущий выбранный цвет (по умолчанию ярко-синий).
    - При нажатии открыть полноэкранную палитру с 24 яркими цветами, расположенными по кругу; палитра закрывается после выбора цвета.

### Основной функционал и логика
- Реализовать обнаружение границ для определения областей раскрашивания.
- Обеспечить возможность закрашивания по нажатию в пределах границ выбранным цветом.
- Поддерживать форматы изображений JPEG и PNG для надежного раскрашивания.

### Лучшие практики
- При обнаружении менее двух областей показывать сообщение "Упс! На этом изображении не найдено областей для раскрашивания. Попробуйте другое изображение с более четкими контурами.".
- Обеспечить интуитивно понятную навигацию с подтверждением действий, таких как возврат.
- Поддерживать интерактивный и отзывчивый дизайн с плавными переходами между экранами.

оригинальный промпт

Create a simple interactive coloring application:

First screen:
- Display a prominent button labeled "Select Image from Computer."
- Upon clicking, open file browser to let the user select an image.

After selecting an image:
- Show a preview of the chosen image centered on the screen.
- Below the preview, display a button labeled "Start Coloring."

After clicking "Start Coloring":
- Attempt to parse the image to detect at least two distinct areas suitable for coloring.
- If successful, display the image fullscreen vertically with detected boundaries.

Top-left corner:
- "Back" button: returns to image selection after confirmation.
- "Save" button: downloads the colored image.

Top-right corner:
- Large red circle indicating the current selected color (default bright blue).
- On click, open fullscreen palette with 24 vibrant colors arranged in circles. Close palette upon selection.

Coloring interaction:
- Detect boundaries automatically.
- On tap/click within boundaries, fill the area with the selected color.

Error handling:
- If fewer than two colorable areas are detected, display an error message:
  "Oops! We couldn't find areas to color in this image. Please try another image with clearer outlines."

Q: What types of images should the application support for coloring?
A: JPEG, PNG, etc.

Q: Do you have a specific design in mind for the layout of the color palette?
A: Circular layout with vibrant colors

стоимость генерации

название модели: claude-3-7-sonnet-latest

время ответа: 67.00 sec.

токены результата: 5,770

стоимость: $0.08902500