인터랙티브 컬러링 앱

요약

간단한 인터랙티브 컬러링 앱으로 이미지를 선택, 색칠 후 저장할 수 있습니다.

프롬프트

영어로 간단한 인터랙티브 컬러링 애플리케이션을 만드세요.

개요
- 특정 이미지들의 썸네일 선택을 표시합니다.
- 사용자가 이미지를 선택하고 색칠한 후 작업을 저장할 수 있도록 합니다.

첫 번째 화면
- 다음 이미지의 작고 쉽게 탐색할 수 있는 썸네일을 표시합니다:
  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