创建一个简单的互动着色应用。

项目概述
- 开发一个应用，允许用户选择一张图片，并在其中互动地为不同区域上色。

界面设计和流程
- 第一屏：
  - 显示一个标有“选择图片”的显著按钮。
  - 点击后打开文件浏览器，让用户选择或在移动设备上拍摄一张图片。
- 图片选择后：
  - 在屏幕中央显示所选图片的预览。
  - 在预览下面显示一个标有“开始着色”的按钮。
- 点击“开始着色”后：
  - 解析图片以检测至少两个可着色的区域。
  - 如果检测成功，则以全屏显示图片及检测到的边界。

核心功能和逻辑
- 图片解析：
  - 使用自动检测识别图片中可上色的区域。
- 着色交互：
  - 允许用户在区域内点击以填充所选颜色。
  - 保持默认颜色设置，当前颜色以一个大的红色圆圈表示。

最佳实践
- 错误处理：
  - 如果检测到可着色区域少于2个，则显示错误信息：“哎呀！我们无法在此图片中找到可着色的区域。请尝试使用轮廓更清晰的另一张图片。”
- 导航：
  - 在左上角实现一个“返回”按钮，返回到第一屏。
  - 包括一个“保存”按钮用于下载已着色的图片。
- 颜色调板：
  - 创建一个全屏调板，包含24种鲜艳的颜色以圆形排列，包括红色、绿色、蓝色、黄色等。
  - 选择颜色后允许关闭调板。

Create a simple interactive coloring application:

First screen:
- Display a prominent button labeled "Select Image" (select/take photo if on mobile).
- 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 first screen.
- "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 kind of images should the application support?
A: any kind of images

Q: Should the color palette have any specific colors or just vibrant ones?
A: Include red, green, blue, yellow, etc.