Docs ChanTan StudioModifier textes, couleurs et photos en cliquant dessus
Changez vous-même un mot, une couleur ou une image en cliquant directement dans l'aperçu : texte et couleurs gratuits, tout annulable, sans passer par l'IA.
Vous n'êtes pas obligé de solliciter l'IA pour chaque détail. Cliquez directement sur un mot, une couleur ou une photo dans votre aperçu, et changez-les vous-même.
Les modifications de texte et de couleur sont gratuites. Envoyer votre propre photo l'est aussi. Seule la génération d'une photo inédite par l'IA coûte des crédits, et le prix s'affiche avant que vous confirmiez.
1. Activez l'édition directe
Dans la barre d'outils de l'aperçu, appuyez sur le crayon — son libellé est « Modifier textes, couleurs et photos directement ».
Une barre verte apparaît en haut : « Cliquez sur un texte pour l'écrire · sur une photo pour la remplacer · choisissez les couleurs — enregistré directement dans votre code ».
Pour en ressortir : le bouton « Annuler » de cette même barre verte. C'est le seul moyen de quitter l'édition directe — il n'existe aucun bouton « Quitter l'édition directe » ailleurs dans l'aperçu. Vos modifications déjà enregistrées restent en place.
2. Visez ce que vous voulez changer
En survolant un élément modifiable, un cadre vert en pointillés l'entoure. En cliquant dessus, le cadre devient plein et une petite barre d'outils flottante apparaît.
3. Changez les mots
Cliquez bien sur les lettres — cliquer dans l'espace vide à côté ne compte pas. Un curseur apparaît à l'endroit du clic et vous écrivez sur place.
Appuyez ensuite sur « ✓ Save » (enregistrer) pour conserver, ou sur « ✕ » pour jeter la modification.
Un titre réparti sur deux lignes compte comme deux textes distincts : vous modifiez la ligne sur laquelle vous avez cliqué, l'autre reste intacte.
4. Changez une couleur
Sélectionner un élément modifiable fait aussi apparaître une palette sur deux rangées :
- « A » = la couleur du texte
- « BG » = la couleur du fond
Chaque rangée présente les couleurs de votre propre charte de projet, lues en direct dans votre design, plus un bouton arc-en-ciel qui ouvre le sélecteur de couleurs de votre système pour n'importe quelle teinte.
La couleur change instantanément, en aperçu. Elle n'est inscrite dans votre application que lorsque vous appuyez sur « ✓ Save » ; « ✕ » remet l'ancienne. Seule la couleur bouge : taille, alignement et espacements restent exactement comme ils étaient.
5. Remplacez une photo par la vôtre (gratuit)
Cliquez sur une photo : la barre d'outils affiche « ⬆ Replace » (remplacer) et « ✨ Generate » (générer).
Appuyez sur « ⬆ Replace » pour ouvrir votre explorateur de fichiers et choisir une image.
| Fichiers acceptés | PNG, JPG/JPEG, WebP, GIF, AVIF |
| Taille maximale | 15 Mo |
| Coût | Gratuit — la fenêtre le dit : « Ou envoyez votre propre photo — gratuit » |
Vous voyez « Envoi de votre photo… » puis « Photo remplacée ». L'aperçu s'actualise tout seul une fois le fichier arrivé (au pire en une douzaine de secondes) : vous ne devriez pas avoir à actualiser à la main.
6. Ou faites générer une nouvelle photo par l'IA (payant en crédits)
Appuyez sur « ✨ Generate » : une fenêtre s'ouvre.
- Décrivez la photo. Par exemple : « intérieur de café chaleureux, lumière douce ». Deux caractères minimum.
- Choisissez une qualité. Deux cartes, chacune affichant son prix en crédits :
- « Standard » — « Rapide et de bonne qualité » — environ 14 secondes
- « Premium » — « Meilleure qualité, idéal avec du texte » — environ 32 secondes
- Appuyez sur « Générer ». Une barre de temps réel défile à travers « Composition de la scène… », « Peinture des détails… », « Finitions… ».
- Décidez. L'ancienne et la nouvelle photo s'affichent côte à côte, sous les libellés « Actuelle » et « Nouvelle », avec « Utiliser cette photo », « En essayer une autre » et « Modifier la description ».
⚠️ Vous êtes débité au moment où la photo est créée — pas au moment où vous l'acceptez. Appuyer sur « En essayer une autre » entraîne un second débit, et renoncer après avoir vu une photo ne donne droit à aucun remboursement. Un message vous le dit à l'instant même : « {n} crédits débités pour cette photo ». Rien n'est débité si la génération échoue.
Avec les réglages actuels, cela fait 1 crédit pour « Standard » et 22 crédits pour « Premium ». Les prix sont calculés en direct depuis votre compte : le chiffre imprimé sur la carte est toujours la vérité — faites-lui confiance plutôt qu'à n'importe quel montant cité ailleurs.
✅ C'est fait ! Vous voyez « Enregistré — votre modification est dans le code », et le changement est visible immédiatement dans votre application.
Ce sont de vraies modifications de votre application, pas des astuces d'aperçu. Et chaque édition directe enregistre une version complète de votre projet avant d'écrire quoi que ce soit — le bouton « Annuler » habituel la remet donc exactement en place, la photo d'origine comprise.
Ce que vous pouvez et ne pouvez pas changer ainsi
L'édition au clic est volontairement étroite. Elle change les mots visibles, la couleur du texte, la couleur de fond et les photos. C'est toute la liste.
Tout le reste passe par le chat :
- Mise en page, espacements, alignement, taille du texte
- Ajouter, retirer ou réordonner des sections et des pages
- Animations et mouvements
- Comportement des boutons, liens, formulaires
- Tout ce qui provient de vos données
Quand vous cliquez sur un élément qu'elle ne peut pas modifier sans risque, elle refuse au lieu de deviner. Ces messages sont encore affichés en anglais :
| Message | Ce qu'il faut faire |
|---|---|
| « This text comes from data — ask for the change in the chat. » (ce texte provient de données) | Ce mot est rempli à partir d'une liste enregistrée par votre application. Modifiez la fiche dans « Gérer ▾ » → « Base de données », ou demandez le changement dans le chat |
| « This element's styling is dynamic — ask for the change in the chat. » (le style de cet élément est dynamique) | Demandez le changement de couleur dans le chat |
| « This changed since you opened it — reopen and try again. » (l'élément a changé depuis l'ouverture) | Actualisez l'aperçu, recliquez sur l'élément, refaites la modification |
| « Couldn't apply that edit — ask for the change in the chat instead. » (modification impossible à appliquer) | Décrivez-la dans le chat |
| « Cette image ne fait pas partie de votre projet — demandez dans la discussion pour la changer. » | Cette photo provient d'un autre site. Demandez dans le chat |
| « This file is managed by Chantan — ask in chat to change it. » (ce fichier est géré par Chantan) | Demandez dans le chat |
| « A build is running — try again when it finishes. » (une construction est en cours) | Attendez la fin de la construction |
⚠️ Il n'existe aucun bouton « Demander à l'IA » nulle part. D'anciennes versions de ces messages en évoquaient un ; il n'a jamais existé. « Demandez dans le chat » signifie simplement : écrivez votre demande dans la zone de chat à gauche et envoyez-la.
Problèmes d'envoi de fichier
Ces messages apparaissent eux aussi en anglais aujourd'hui :
| Message | Ce qu'il faut faire |
|---|---|
| « Please choose an image file (PNG, JPG, WebP…). » | Choisissez un vrai fichier image |
| « That image is over 15 MB — please choose a smaller one. » | Recadrez-la ou compressez-la d'abord |
| « That file doesn't look like an image — please choose a PNG, JPG or WebP. » | Réenregistrez le fichier en PNG ou JPG |
| « Couldn't process that image — try a plain PNG or JPG (animated images aren't supported). » | Utilisez une image fixe |
| « Could not save the image. Try again. » | Réessayez — le problème ne vient pas de votre fichier |
| « Slow down a moment — too many edits. » | Vous avez atteint la limite de 40 modifications par minute. Faites une pause de quelques secondes |
Si vous avez remplacé une photo et que l'ancienne s'affiche toujours après une douzaine de secondes, appuyez sur « Actualiser l'aperçu ». Si elle reste figée, redémarrez l'aperçu depuis « Historique des versions ».
Limites assumées
- Vous ne pouvez pas éditer pendant que l'IA construit. Le crayon se désactive tout seul, et toute modification qui passerait entre les mailles est refusée — votre clic et le travail de l'IA ne peuvent donc jamais se disputer le même fichier.
- L'édition est bloquée pendant que vous consultez une ancienne version, volontairement.
- Si le crayon est absent, c'est que cet aperçu n'a pas signalé qu'il contenait des éléments modifiables — les projets plus anciens affichent à la place un simple outil flèche, qui décrit ce que vous avez cliqué et dépose cette description dans la zone de chat. Réveiller ou redémarrer l'aperçu ramène parfois le crayon. On ne vous donnera jamais un crayon qui ne sert à rien.
- Traduction : la barre d'outils de l'aperçu, la carte de veille et la fenêtre de génération de photo sont en français, mais la petite barre flottante qui apparaît sur l'élément sélectionné reste en anglais (« ⬆ Replace », « ✨ Generate », « ✓ Save »), tout comme les messages de refus et d'envoi ci-dessus. Chez les utilisateurs arabophones, ces fenêtres d'édition directe sont également non traduites. Tout fonctionne ; seule la langue de l'étiquette diffère.