Интерактивная раскраска

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

Простое приложение для раскрашивания ручных рисунков яркими цветами.

промпт

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

Первый экран
1. Отображение миниатюр: Покажи миниатюры предоставленных изображений для удобства навигации:
   - Изображение 1: [Зоопарковые животные](https://img.freepik.com/free-vector/hand-drawn-zoo-animals-illustration_23-2151199715.jpg)
   - Изображение 2: [Вторые зоопарковые животные](https://img.freepik.com/free-vector/hand-drawn-zoo-animals-illustration_23-2151199718.jpg)
   - Изображение 3: [Лев и жираф](https://img.freepik.com/premium-vector/lion-giraffe-hand-drawn_185029-508.jpg)
   - Изображение 4: [Контур совы](https://img.freepik.com/free-vector/hand-drawn-owl-outline-illustration_23-2149277379.jpg)
   - Изображение 5: [Контур лисы](https://img.freepik.com/free-vector/hand-drawn-fox-outline-illustration_23-2149272718.jpg)
   - Изображение 6: [Контур льва](https://img.freepik.com/free-vector/hand-drawn-lion-outline-illustration_23-2149285355.jpg)
   - Изображение 7: [Контур пингвина](https://img.freepik.com/free-vector/hand-drawn-penguin-outline-illustration_23-2150582038.jpg)
   - Изображение 8: [Эскиз жирафа](https://img.freepik.com/free-vector/animal-doodle-outline-cute-giraffe_1308-81895.jpg)

Миниатюры должны быть небольшими, но кликабельными, чтобы удобно перейти к экрану раскраски.

После выбора изображения
2. Отображение изображения: Покажи выбранное изображение на весь экран с вертикальным центрированием.

3. Функциональные кнопки:
   - Кнопка "Назад" (верхний левый угол): Показывает диалог подтверждения — "Вы уверены, что хотите вернуться? Все несохранённые изменения будут потеряны.", затем возвращается к экрану миниатюр.
   - Кнопка "Сохранить" (верхний левый угол): Сохраняет текущее раскрашенное изображение в формате PNG.
   - Палитра цветов (верхний правый угол): Отображает большой красный круг, показывающий текущий цвет; при клике открывается полноэкранная палитра из 24 ярких вариантов.

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

Цветовые решения должны создавать увлекательный пользовательский опыт с насыщенными цветами и простой интеракцией, способствуя творчеству.

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

Create a simple interactive coloring application:
First screen:
- Display thumbnails of the provided images:
  1. https://img.freepik.com/free-vector/hand-drawn-zoo-animals-illustration_23-2151199715.jpg
  2. https://img.freepik.com/free-vector/hand-drawn-zoo-animals-illustration_23-2151199718.jpg
  3. https://img.freepik.com/premium-vector/lion-giraffe-hand-drawn_185029-508.jpg
  4. https://img.freepik.com/free-vector/hand-drawn-owl-outline-illustration_23-2149277379.jpg
  5. https://img.freepik.com/free-vector/hand-drawn-fox-outline-illustration_23-2149272718.jpg
  6. https://img.freepik.com/free-vector/hand-drawn-lion-outline-illustration_23-2149285355.jpg
  7. https://img.freepik.com/free-vector/hand-drawn-penguin-outline-illustration_23-2150582038.jpg
  8. https://img.freepik.com/free-vector/animal-doodle-outline-cute-giraffe_1308-81895.jpg

- Thumbnails should be small and easy to navigate.

After selecting an image:
- Display the chosen image full-screen vertically.
- Top-left corner:
  - "Back" button: returns to image selection after confirmation dialog.
  - "Save" button: downloads the colored image.
- Top-right corner:
  - Large red circle indicating the current selected color (default is bright blue).
  - On clicking the circle, display a fullscreen palette with 24 vibrant color options arranged as small circles. After selecting a color, close the palette.

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

Q: What should the confirmation dialog say when returning to image selection?
A: Are you sure you want to go back? Any unsaved changes will be lost.

Q: What should happen when the 'Save' button is clicked?
A: Just save it in PNG format.

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

название модели: o3-mini-high

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

токены результата: 12,819

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