互动涂色应用
详情
概要
一个简单的互动涂色应用,可选择图像、上色并保存作品。
提示
创建一个简单的互动涂色应用(英文)。 概述 - 显示来自特定图像的缩略图选择。 - 允许用户选择图像、上色并保存他们的作品。 首屏 - 显示易于导航的小型缩略图: 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