互动涂色应用

概要

一个简单的互动涂色应用,可选择图像、上色并保存作品。

提示

创建一个简单的互动涂色应用(英文)。

概述
- 显示来自特定图像的缩略图选择。
- 允许用户选择图像、上色并保存他们的作品。

首屏
- 显示易于导航的小型缩略图:
  1. URL 1
  2. URL 2
  3. URL 3
  4. URL 4
  5. URL 5
  6. URL 6
  7. URL 7
  8. URL 8
- 确保缩略图清晰可辨。

图像交互
- 选择缩略图后,下载并解析 PNG 以实现上色功能。
- 以全屏垂直模式展示图像。

左上角
- 返回按钮:
  - 在返回图像选择界面前显示确认对话框。
  - 消息:'Do you want to return to the image selection?'
- 保存按钮:
  - 允许用户直接下载上色后的图像。

右上角
- 显示一个默认的大红色圆圈(明亮的蓝色)。
- 点击打开全屏调色板。

颜色选择
- 在全屏调色板中显示 24 种鲜艳的小圆颜色。
- 选择颜色并关闭调色板。

上色交互
- 检测图像边界内的区域。
- 允许在点击/轻触时以所选颜色填充区域。

调色板功能
- 在屏幕中央启动。
- 颜色选择后自动关闭。

原始提示

Create a simple interactive coloring application:

First screen:
- Display thumbnails of the provided images (take exactly that 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:
- Download and use the selected PNG to allow drawing on it, parsing contours if needed.
- 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 specific functionalities should the confirmation dialog include when clicking the 'Back' button?
A: A simple message asking if they want to return to the image selection.

Q: How should the color selection palette be displayed and dismissed?
A: On the center of screen.

生成成本概要

模型名称: claude-3-7-sonnet-latest

响应时间: 69.85 sec.

结果令牌: 6,015

成本: $0.09262200