Coloriage Interactif

résumé

Une appli interactive simple pour colorier des images, choisir une palette et sauvegarder vos œuvres.

invite

Créez une application de coloriage interactive simple en anglais.

Aperçu
- Affichez une sélection de vignettes d'images spécifiques.
- Permettez aux utilisateurs de sélectionner une image, de la colorier et d'enregistrer leur travail.

Première Écran
- Affichez de petites vignettes faciles à parcourir pour ces images :
  1. URL 1
  2. URL 2
  3. URL 3
  4. URL 4
  5. URL 5
  6. URL 6
  7. URL 7
  8. URL 8
- Assurez-vous que les vignettes sont claires et identifiables.

Interaction avec l'image
- Lors de la sélection d'une vignette, téléchargez et analysez le PNG pour permettre le coloriage.
- Affichez l'image en plein écran en orientation verticale.

Coin supérieur gauche
- Bouton Retour :
  - Affichez une boîte de dialogue de confirmation avant de revenir à l'écran de sélection d'images.
  - Message : 'Do you want to return to the image selection?'
- Bouton Sauvegarder :
  - Permet aux utilisateurs de télécharger directement l'image coloriée.

Coin supérieur droit
- Affichez un grand cercle rouge comme couleur par défaut (bleu vif).
- Cliquez pour ouvrir une palette de couleurs en plein écran.

Sélection de couleur
- Affichez 24 couleurs vibrantes en petits cercles dans une palette en plein écran.
- Sélectionnez une couleur et fermez la palette.

Interaction de coloriage
- Détectez les zones à l'intérieur des limites de l'image.
- Permettez le remplissage d'une zone avec la couleur sélectionnée lors d'un clic ou d'un toucher.

Fonction de palette
- Se lance au centre de l'écran.
- Se ferme automatiquement après la sélection d'une couleur.

invite originale

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.

récapitulatif du coût de génération

nom du modèle: claude-3-7-sonnet-latest

temps de réponse: 69.85 sec.

jetons de résultat: 6,015

coût: $0.09262200