litany-lty/elidli-x-avatar-banner-fusion

Fusion avatar × bannière X (Compétence universelle)

Rôle et limites

Objectif unique : générer une bannière de fond pure, directement utilisable pour le profil X/Twitter, de sorte que lorsque le client X superpose l'avatar réel, la zone de chevauchennent visible sur le bord supérieur de l'avatar crée une connexion visuelle naturelle.

• Vous devez uniquement éditer/générer la bannière ; ne modifiez pas l'avatar, son cadre noir, la zone d'informations utilisateur, la barre d'état, les boutons ou le contenu des tweets.
• Interdiction d'inclure dans le fichier final : la photo de l'avatar, une image d'occupation de l'avatar, un cercle complet, une interface utilisateur, du texte de compte ou une capture d'écran simulée du profil. Les images d'aperçu/mesure ne font pas partie du livrable final.
• Format fixe 3:1, recommandé : 1500×500 / 1536×512 / 3000×1000. Conservez autant que possible le style visuel et le sujet demandé par l'utilisateur – ne dessinez pas un mouton simplement parce que l'exemple de référence en était un.
• La majeure partie de l'avatar se trouve sous le bord inférieur de la bannière. Ne placez pas le centre de l'avatar à l'intérieur de l'image, et ne traitez pas l'ensemble fond + profil comme une toile modifiable unique.
• Le cadre noir est superposé par le client X : la bannière ne peut pas l'effacer. Utilisez des couleurs voisines, des arcs, la luminosité et le flux directionnel pour réduire la rupture visuelle. N'inventez pas la possibilité que la moitié inférieure du cercle de l'avatar soit enveloppée par la bannière.

Quand déclencher

L'utilisateur souhaite : faire interagir l'avatar X avec le fond du profil, fondre le bord supérieur de l'avatar dans la bannière, unifier la bannière et l'avatar, corriger un halo lumineux mal aligné, réduire une bande sombre/terre en bas de la bannière, générer une bannière pure téléchargeable, ou fournir une capture d'écran du profil avec la bannière d'origine pour demander un calibrage.

Workflow (à exécuter dans l'ordre)

1. Obtenir d'abord les mesures réelles, ne pas deviner le centre

Lorsque l'utilisateur fournit une capture d'écran complète du profil (incluant la bannière visible, non encore repliée) :

1. Identifiez dans la capture le rectangle de la bannière (gauche, haut, largeur, hauteur) ; identifiez le centre réel de l'avatar (cx, cy) et son rayon externe r, tous exprimés en pixels de la capture. La ligne d'intersection du bord extérieur de l'avatar avec le fond est cruciale.
2. Utilisez scripts/banner_fusion.py measure pour convertir les coordonnées de l'interface vers les coordonnées du canevas original de la bannière. Tenez compte du redimensionnement proportionnel (object-fit: cover) et du recadrage centré. Ne recopiez pas naïvement les x/y de la capture.
3. Vérifiez les résultats : le centre de l'avatar se trouve généralement sous le bord inférieur de la bannière ; le bord supérieur de l'avatar est au-dessus du bord inférieur ; la zone réellement interactive est un arc étroit en haut. Si la structure diffère, basez-vous sur la capture réelle, n'appliquez pas de valeurs par défaut par force.
4. Sauvegardez layout.json – il pourra être réutilisé pour des itérations ultérieures sur le même appareil/mise en page ; refaites une mesure pour un client/appareil différent, un recadrage modifié ou un changement d'UI.

Sans capture d'écran : utilisez references/example_layout.json comme valeur empirique pour un premier brouillon uniquement. Issu d'un seul cas mobile réussi, ce n'est pas une coordonnée officielle fixe pour tous les utilisateurs X. Produisez un premier brouillon, idéalement demandez à l'utilisateur de fournir une capture d'écran une fois pour un calibrage réel.

Exemple de mesure (coordonnées indicatives, ne reflètent pas les mesures réelles de l'écran de l'utilisateur) :

python3 scripts/banner_fusion.py measure \
  --banner-box 0 0 1536 512 \
  --avatar 210 618 158 \
  --target 1536 512 \
  --out layout.json
python3 scripts/banner_fusion.py report --config layout.json

Si vous n'avez pas de coordonnées exactes mais avez une capture d'écran : commencez par générer une image quadrillée grid, puis marquez le bord inférieur de la bannière et le bord extérieur de l'avatar. N'inventez pas de valeurs de pixels pour un ajustement automatique qui serait faux.

2. Concevoir le fond en fonction de l'arc visible supérieur de l'avatar

Consultez references/prompt_templates.md, renseignez le thème, le style, les couleurs, le sujet, les éléments de fusion. Avant de générer, prenez en compte les données de mesure :

• Dans le coin inférieur gauche, créez uniquement un arc bas/une couronne d'énergie, de faible hauteur, proche du bord inférieur de la bannière, positionné approximativement au niveau du sommet théorique de l'avatar, suivant la direction de l'arc réel supérieur ; évitez de dessiner un disque sombre large et complet dans l'image.
• Depuis cet arc bas, émettez vers la droite des rubans/fumées/lumières/pétales/traînées d'étoiles, avec une continuité visuelle réelle, rejoignant le centre, puis le sujet principal à droite.
• Placez le sujet principal à droite ou légèrement à droite du centre ; laissez le coin inférieur gauche à la zone de contact avec l'avatar. La barre d'état/le menu peuvent masquer le haut et la droite – évitez d'y placer des détails clés.
• La bande de terre, le plateau noir ou la bande sombre en bas ne doivent pas être trop épais ; l'arc lumineux en contact avec le haut de l'avatar doit être proche du bord inférieur réel de la bannière. Ne coupez pas un sujet important pour le forcer à être plus bas.
• L'arc lumineux n'est pas le vrai bord de l'avatar découpé ; c'est une illusion d'optique rendue possible par la superposition du client. Vous pouvez inclure une zone tampon de 0 à 40 px (ramenée à une largeur de 1536 px) de lueur externe, ajustez d'abord en fonction de l'effet sur la capture d'écran réelle.

3. Générer le fond pur + un aperçu d'alignement indépendant

Le fichier final doit être une image 3:1, sans avatar. Les images de calibrage/d'aperçu servent à la vérification, ne sont pas téléchargées comme bannière réelle.

python3 scripts/banner_fusion.py preview \
  --banner output/banner.png \
  --config layout.json \
  --out output/preview.png --guide
# Si l'utilisateur a fourni son image d'avatar carrée, utilisez : --avatar-image input/avatar.png

Le script superposera une simulation de l'avatar sur la zone d'informations noire, sans écrire l'avatar dans la bannière.

Vous pouvez également fournir un aperçu sur la capture d'écran du profil (les icônes d'UI peuvent nécessiter une zone de rétention spécifique ; la capture après application réelle reste la validation finale) :

python3 scripts/banner_fusion.py screenshot-preview \
  --banner output/banner.png --screenshot input/home.png \
  --banner-box 0 0 691 230 --avatar 94 278 72 \
  --out output/screenshot_preview.png

4. Itérer en ne modifiant que la bonne dimension

• Écart trop grand entre le bord supérieur de l'avatar et l'arc d'énergie (arc au-dessus de l'avatar) → Conservez le sujet global, abaissez l'arc bas/les flux lumineux associés ; si nécessaire, décalez toute l'image vers le bas, en écrasant la bande sombre trop épaisse en bas.
• L'arc bas est trop masqué par l'avatar, invisible → Remontez légèrement l'arc bas, ne déplacez pas l'avatar ni n'agrandissez le cercle.
• Effet lumineux décalé à gauche/droite → Revérifiez le x du centre de l'avatar sur la capture, puis déplacez horizontalement les éléments d'interaction locaux ; ne partez pas du principe que tous les appareils ont le même x.
• Cadre noir visible et dissonant → Adoucissez l'arc avec un dégradé doux et un brouillard lumineux, raccordez-le le long de la zone de contact supérieure ; ne promettez pas de « supprimer le bord noir ».
• Le mouton/le personnage/le sujet est masqué par le menu → Ajustez la position du sujet ou la hiérarchie visuelle, ne modifiez pas l'interface utilisateur du client.
• Le recadrage de la bannière a changé → Recommencez measure, n'itérez pas en utilisant uniquement les décalages de pixels de l'itération précédente.

Décalage léger de l'image déjà générée (pour vérifier s'il s'agit d'un problème de positionnement ; une fois le décalage réussi, il est recommandé de le transmettre au modèle de génération d'image pour une nouvelle génération de haute qualité) :

python3 scripts/banner_fusion.py shift --input output/banner.png \
  --dy 32 --out output/banner_down32.png

--dy correspond à un décalage vers le bas en pixels du canevas ; le bas sera recadré, le haut sera rempli par prolongement du bord. Ne convient pas pour de grands déplacements. Après le décalage, regénérez l'aperçu.

5. Validation et livraison

La tâche est terminée seulement si tous les points suivants sont remplis :

1. La bannière est au format 3:1 ; son contenu ne contient aucun avatar, texte, interface utilisateur ni cercle d'occupation complet.
2. Dans l'aperçu, la géométrie réelle de l'avatar correspond à l'arc étroit visible, pas à un « avatar complet imaginaire à l'intérieur du fond ».
3. Il existe un effet de fusion lumineux perceptible mais pas forcé près du sommet de l'avatar ; le bas de la bannière ne présente pas de bande noire ou épaisse sans contenu.
4. Le flux lumineux et le sujet ont une relation visuelle cohérente ; le sujet principal n'est pas excessivement masqué par l'avatar/les boutons.
5. Après avoir appliqué la bannière sur X, l'utilisateur capture le profil non replié comme preuve finale ; si l'écart est évident, continuez le calibrage précis. Tant que l'application réelle n'a pas eu lieu, on peut seulement dire « l'aperçu simulé est réussi », sans prétendre que le client réel sera parfait.
6. Livrez la bannière pure, éventuellement l'image d'aperçu et le fichier JSON de mise en page ; ne livrez pas l'aperçu par erreur comme bannière.

S'inspirer des cas réussis

• Les principes de composition des cas réussis se trouvent dans references/geometry.md et references/success_case.md. Un exemple de fond visuel pur est dans assets/success_reference_1536x512.webp (sans avatar ni information personnelle) ; vous pouvez aussi utiliser scripts/make_demo_banner.py pour générer un fond de démonstration neutre.
• Approche clé : un arc bas à gauche vraiment bas (laissant un espace au-dessus pour le panache d'énergie), une bande de terre/sombre fine en bas, un ruban coloré allant de gauche à droite, un sujet à droite. Ne vous contentez pas d'imiter les couleurs, réutilisez la relation de position.
• Coordonnées empiriques : voir references/example_layout.json et references/geometry.md. Les différences d'appareil et de client priment sur ces valeurs empiriques.

Index des fichiers

• references/geometry.md : formules de conversion de coordonnées, limites et cas d'échec.
• references/prompt_templates.md : prompts principaux substituables, mots négatifs, prompts d'itération.
• references/example_layout.json : paramètres d'avatar d'exemple (brouillon par défaut uniquement).
• scripts/banner_fusion.py : calcul, grille, aperçu, remplacement d'aperçu sur capture d'écran, calibrage des décalages.
• assets/success_reference_1536x512.webp : image de référence de fond pur téléchargeable d'un cas réussi, sans véritable avatar.
• examples/geometry_guide.svg : schéma de superposition avatar/bannière (pas d'avatar réel, pas de fond de production).
• scripts/make_demo_banner.py : génère un fond de test 3:1 exemple.
• README.md : instructions d'installation et de commandes.