Coloriage interactif
détails
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