インタラクティブなお絵かき

概要

画像を選んで色を塗り、作品を保存できるシンプルなお絵かきアプリ。

プロンプト

英語でシンプルなインタラクティブなお絵かきアプリを作成してください。

概要
- 特定の画像からサムネイルを表示します。
- ユーザーが画像を選んで色を塗り、作品を保存できるようにします。

最初の画面
- 以下の画像の小さくて使いやすいサムネイルを表示します:
  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