Application de coloriage interactif

résumé

Une application interactive pour colorier des images en contour.

invite

Créez une application de coloriage interactif où les utilisateurs peuvent colorier des images à contours.

Fonctionnalités principales :
- Écran de sélection d'image : Affiche des miniatures faciles à naviguer des images fournies, cliquables pour la sélection.
- Écran de coloriage : Affiche l'image sélectionnée en plein écran en mode vertical. Les commandes en haut à gauche incluent :
  - Un bouton 'Retour' avec une boîte de confirmation : 'Êtes-vous sûr de vouloir revenir en arrière ?'
  - Un bouton 'Enregistrer' pour télécharger l'image coloriée au format PNG.
  En haut à droite, se trouve :
  - Un grand cercle rouge indiquant la couleur sélectionnée actuellement (par défaut, c'est du bleu vif).
  - En cliquant sur le cercle, une palette plein écran s'ouvre avec 24 options de couleurs vibrantes disposées en petits cercles.
- Interaction de coloriage : Détecte les limites des zones de l'image pour remplir de couleur. Les utilisateurs peuvent cliquer ou taper sur une zone pour la remplir avec la couleur sélectionnée.

Bonnes pratiques :
- Assurez une interface intuitive avec des boutons clairement étiquetés.
- Optimisez le traitement d'image pour une détection rapide des limites durant le coloriage.
- Offrez une expérience fluide lors du passage entre la sélection de couleur et la peinture. Cette application encourage la créativité et propose une expérience simple, engageante et satisfaisante pour les amateurs de coloriage numérique.

invite originale

Create a simple interactive coloring application:
First screen:
- Display thumbnails of the provided 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:
- 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: How should users confirm when they click the 'Back' button?
A: A simple 'Are you sure you want to go back?' prompt.

Q: What specific file format should the colored image be saved as?
A: PNG format.

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

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

temps de réponse: 105.07 sec.

jetons de résultat: 8,866

coût: $0.13516800