Coloriage interactif

résumé

Application interactive pour sélectionner des images et colorier des zones spécifiques.

invite

Créez une application de coloriage interactive simple avec les fonctionnalités suivantes :

### Présentation du projet
- Une application permettant aux utilisateurs de sélectionner des images et de colorier des zones distinctes.
- Support des formats d'image courants tels que JPEG et PNG.

### Conception et flux UI/UX
- **Première Écran** :
  - Afficher un bouton bien visible avec l’étiquette "Sélectionner une image depuis l’ordinateur".
  - Au clic, ouvrir un explorateur de fichiers pour sélectionner une image.
- **Après sélection de l'image** :
  - Afficher un aperçu centré de l'image sélectionnée.
  - Afficher un bouton en dessous avec l’étiquette "Commencer à colorier".
- **Écran de démarrage du coloriage** :
  - Analyser l'image pour détecter au moins deux zones à colorier, affichant l'image en plein écran avec les contours détectés.
  - **Coin supérieur gauche** :
    - Bouton "Retour" : Permet de revenir à la sélection de l'image avec une confirmation.
    - Bouton "Sauvegarder" : Télécharge l'image coloriée.
  - **Coin supérieur droit** :
    - Un grand cercle rouge indiquant la couleur sélectionnée actuellement, par défaut un bleu vif.
    - Au clic, ouvrir une palette en plein écran avec 24 couleurs vibrantes disposées en cercle ; la palette se ferme après sélection d'une couleur.

### Fonctionnalité principale et logique
- Implémenter la détection des contours pour identifier les zones à colorier.
- Permettre le remplissage au clic/tap pour colorier dans les limites avec la couleur sélectionnée.
- Assurer la prise en charge des formats d'image tels que JPEG et PNG pour un coloriage fiable.

### Bonnes pratiques
- Afficher le message "Oups ! Nous n’avons pas trouvé de zones à colorier sur cette image. Veuillez essayer une autre image avec des contours plus nets." si moins de deux zones sont détectées.
- Garantir une navigation intuitive avec confirmation lors d’actions telles que le retour.
- Maintenir un design interactif et réactif avec des transitions fluides entre les écrans.

invite originale

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

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

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

temps de réponse: 67.00 sec.

jetons de résultat: 5,770

coût: $0.08902500