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

Présentation du projet
Développez une application qui permet aux utilisateurs de colorier des zones d'une image de manière interactive. L'utilisateur sélectionne ou capture une image, et l'application la traite pour activer le remplissage dans les zones détectées.

Conception UI/UX et déroulement
1. Écran d'accueil : Affichez un bouton 'Sélectionner l'image' bien visible. En cliquant dessus, ouvrez un explorateur de fichiers pour choisir une image.
2. Après sélection de l'image : Affichez un aperçu centré de l'image sélectionnée avec un bouton 'Commencer à colorier' en dessous.
3. Écran de coloriage : Après avoir cliqué sur 'Commencer à colorier', analysez l'image pour détecter les zones à colorier. Utilisez une mise en page verticale en plein écran avec les contrôles suivants :
   - En haut à gauche : un bouton 'Retour' pour revenir à l'écran d'accueil et un bouton 'Enregistrer' pour télécharger l'image coloriée.
   - En haut à droite : un grand cercle indiquant la couleur sélectionnée, par défaut bleu vif. En appuyant sur le cercle, une palette de 24 couleurs vives s'affiche en plein écran.

Fonctionnalités principales et logique
- Détectez au moins deux zones distinctes dans l'image pouvant être coloriées.
- Mécanisme de remplissage : L'utilisateur appuie à l'intérieur d'une zone pour la remplir avec la couleur sélectionnée.
- Formats pris en charge : JPEG, PNG, etc.

Gestion des erreurs
- Si l'analyse de l'image trouve moins de deux zones coloriables, affichez une erreur : "Oups ! Nous n'avons pas trouvé de zones à colorier dans cette image. Veuillez essayer une autre image avec des contours plus nets."
- Si la détection des contours échoue, demandez à l'utilisateur de choisir une autre image.

Bonnes pratiques
- Assurez des transitions fluides entre les écrans.
- Fournissez des éléments de design responsifs pour les environnements de bureau et mobiles.
- Assurez-vous que la sélection de la palette et le traitement de l'image soient intuitifs et efficaces.
- Utilisez des messages d'erreur clairs et garantissez une expérience utilisateur conviviale.

Create a simple interactive coloring application:

First screen:
- Display a prominent button labeled "Select Image" (select/take photo if on mobile).
- 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 first screen.
- "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 image formats should be supported for selection?
A: JPEG, PNG, and other.

Q: What should happen if the user selects an image but the boundary detection fails?
A: Return to the image selection with a prompt to try another image.