인터랙티브 색칠 앱
세부 정보
요약
사용자가 이미지를 선택하고 색칠할 영역을 채울 수 있는 앱.
프롬프트
다음 기능을 갖춘 간단한 인터랙티브 색칠 애플리케이션을 만드세요: ### 프로젝트 개요 - 사용자가 이미지를 선택하고 각기 다른 영역에 색칠할 수 있는 애플리케이션입니다. - JPEG, PNG 등 일반 이미지 포맷을 지원합니다. ### UI/UX 디자인 및 흐름 - **첫 번째 화면**: - “컴퓨터에서 이미지 선택”이라는 레이블의 눈에 띄는 버튼을 표시합니다. - 버튼 클릭 시 파일 탐색기가 열려 이미지 선택이 가능합니다. - **이미지 선택 후**: - 화면 중앙에 선택한 이미지의 미리보기를 표시합니다. - 그 아래에 “색칠 시작” 버튼을 표시합니다. - **색칠 시작 화면**: - 이미지에서 최소 두 개의 색칠 가능한 영역을 감지하여, 감지된 경계와 함께 전체 화면에 이미지를 표시합니다. - **좌측 상단**: - “뒤로” 버튼: 확인 후 이미지 선택 화면으로 돌아갑니다. - “저장” 버튼: 색칠된 이미지를 다운로드합니다. - **우측 상단**: - 현재 선택된 색상을 나타내는 큰 빨간 원 (기본은 밝은 파랑). - 클릭 시 24가지 선명한 색상이 원형으로 배열된 전체 화면 팔레트를 열고, 색상 선택 후 닫힙니다. ### 주요 기능 및 로직 - 색칠 가능한 영역을 식별하기 위해 경계 감지를 구현합니다. - 선택된 색상으로 경계 내 색칠 상호작용을 위한 터치/클릭 채우기를 허용합니다. - JPEG 및 PNG 형식과 같이 신뢰할 수 있는 색칠 처리를 위해 이미지 형식을 지원합니다. ### 모범 사례 - 색칠 가능한 영역이 두 개 미만인 경우 "앗! 이 이미지에서 색칠할 영역을 찾을 수 없습니다. 더 선명한 외곽선의 다른 이미지를 시도해 주세요."라는 메시지를 표시합니다. - ‘뒤로 가기’와 같은 동작에 대해 확인 절차를 포함한 직관적인 네비게이션을 제공합니다. - 화면 전환이 원활한 인터랙티브하고 반응성 높은 디자인을 유지합니다.
원본 프롬프트
Create a simple interactive coloring application: First screen: - Display a prominent button labeled "Select Image from Computer." - 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 image selection after confirmation. - "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 types of images should the application support for coloring? A: JPEG, PNG, etc. Q: Do you have a specific design in mind for the layout of the color palette? A: Circular layout with vibrant colors
생성 비용 요약
모델 이름: claude-3-7-sonnet-latest
응답 시간: 67.00 sec.
결과 토큰: 5,770
비용: $0.08902500