honglin0000/livecanvas

LiveCanvas · Carte animée Live Photo

Transforme une phrase utilisateur en une carte animée Live Photo, statique et lisible, mais capable de raconter clairement un contenu de manière dynamique. Anciennement LiveChart, désormais LiveCanvas, couvre graphiques, images et récits de scènes ; par défaut, conçoit activement des images/icônes et des actions de scène liées au sujet, les graphiques n'étant qu'une option. Langue par défaut : français, Remotion, 1080×1440, 30 ips, environ 3 secondes, sans son. Ce sont des points de départ, adaptables au contenu ; 3 secondes ne sont pas une limite imposée par le format Apple.

Définir d'abord le contenu, puis l'animation

1. Extraire de la demande le sujet, les indicateurs, la période, les relations de comparaison et l'utilisation ; lorsqu'un article ou un rapport est fourni, lire d'abord l'intégralité du matériel, puis extraire les événements clés, les changements, les capacités, les comparaisons et les scènes. Répartir l'espace en fonction de l'importance du contenu, sans se limiter aux prix ou aux données faciles à afficher. Prioriser les besoins spécifiques, ne pas prendre l'exemple donné par l'utilisateur comme un modèle fixe.
2. Rechercher et vérifier les données, lire Données et périmètre. Enregistrer d'abord les preuves brutes, les faits ou les données structurées, puis rédiger les titres, les chiffres et les annotations. Les sujets sans série chronologique peuvent utiliser des fiches d'information, des processus ou des explications de scènes ; ne pas inventer de données pour créer un graphique.
3. Rédiger une brève note de production : la trame principale de l'ensemble, le sujet et la conclusion de chaque carte, le périmètre des faits/données, la hiérarchie des informations de couverture, le storyboard temporel et le plan des éléments. Le nombre de cartes dépend de la demande et du contenu, n'est pas fixé à un nombre ou à une combinaison de thèmes. Choisir l'expression la mieux adaptée au sujet, sans supposer un graphique linéaire avec des chiffres. Prendre des décisions de conception directement ; ne poser des questions que si l'absence d'information modifie substantiellement la réponse.
4. Réaliser selon Couverture et animation. Intégrer les principes d'Emil Kowalski animate : intention, retenue, continuité, rythme clair ; l'utilisateur ayant spécifié Remotion, ne pas exécuter les étapes de remplacement d'outil en amont, ni appliquer mécaniquement les limites de durée des composants interactifs aux vidéos explicatives.

Texte : écrire directement les faits et les données

• Les titres privilégient "sujet + chiffre/changement/conclusion claire", par exemple "limite de sortie 1M tokens", "coût de la tâche initiale 39% inférieur", "Text Arena en tête pour l'instant". En l'absence de chiffres nécessaires, écrire directement le nom du produit, la version ou l'événement spécifique, sans forcer des données.
• Utiliser des phrases courtes et intuitives, supprimer les slogans vagues, les questions rhétoriques, les métaphores, les parallélismes et les étiquettes anglaises décoratives. Ne pas utiliser d'expressions comme "redéfinir", "comprendre les trois changements", "faire atterrir les bénéfices dans des scénarios réels" à la place des faits. Les descriptions du texte et des illustrations suivent également la même norme ; la source doit être clairement indiquée, par exemple Artificial Analysis, et pas seulement AA. Des exemples d'écriture et des conditions limitatives se trouvent dans Couverture et animation.
• Lorsque l'utilisateur dit "trop d'IA", "donne directement les données", "pas de fioritures", simplifier d'abord le texte et les décorations non pertinentes ; conserver le sujet, les informations, les éléments nécessaires et l'orientation de conception déjà choisis, ne pas supprimer arbitrairement la couverture principale, fusionner les sujets ou transformer l'ensemble en un même modèle de données.
• En cas de modification, conserver le sujet, les informations et les exigences visuelles déjà confirmés. Lorsque l'utilisateur change le nombre de cartes ou l'orientation, redistribuer le contenu et expliquer les relations de fusion, remplacement et réutilisation ; ne pas compter les pages par simple découpage mécanique ou répétition de thèmes. Vérifier le contenu avant et après la révision par numéro de carte, et dédoublonner l'ensemble en fonction du contenu différent.

Expression visuelle

• La couverture établit une hiérarchie visuelle avec le nom du produit, le numéro de version ou l'objet central. Des termes comme "effet de présence", "impact" sont des descriptions d'effet, pas du texte d'écran ; les détails pratiques se trouvent dans Couverture et animation.

• L'ensemble utilise une palette de couleurs, une police et un langage graphique unifiés, en choisissant la composition en fonction du contenu. Expliquer les faits et les relations avec des graphiques, éviter d'empiler du texte, de grands chiffres, des cartes décoratives ou de répéter mécaniquement le même modèle.

• Par défaut, faire apparaître les objets du sujet dans l'image : PNG du produit, tasse de café, voiture, train, médaille, photo de ville, emoji météo, etc. ; sélectionner un ensemble d'éléments de style uniforme en lien avec le contenu, pas de décorations dans les coins du graphique.

• Concevoir l'entrée, le mouvement, l'arrangement, le remplacement ou le changement d'état des objets pour expliquer le contenu. Par exemple, un train traversant des années marquées, une tasse de café accompagnant une carte de magasin, une ville changeant de saison.

• Combiner scènes, comparaisons d'images, grilles d'icônes, timelines, démonstrations de processus, textes importants et graphiques nécessaires en fonction du sujet. Les graphiques purs ne sont utilisés que si c'est vraiment le plus clair ou si l'utilisateur le spécifie.

• Lors de l'utilisation d'images ou d'emoji, lire Images et icônes, être responsable de la recherche des éléments, de la vérification de leur disponibilité et de leur intégration dans le projet ; ne pas attendre que l'utilisateur fournisse d'abord les éléments pour commencer.

Valeurs par défaut de recherche

• "3 dernières années" : trois années glissantes jusqu'à la dernière observation complète et fiable, avec les dates de début et de fin réelles, pas trois valeurs de fin d'année par défaut. Pour les graphiques mensuels, utiliser la dernière observation de fin de mois complète ; le mois en cours incomplet doit être annoté séparément.
• "Température annuelle" sans année : utiliser la dernière année civile complète, par défaut la température moyenne mensuelle ; expliquer le choix en début de résultat. Si l'intention est clairement climatologique, utiliser la moyenne climatique avec une période de référence explicite.
• Les comparaisons entre entreprises alignent les dates d'observation, les indicateurs, les devises, ou utilisent un indice à base commune explicite, en conservant les valeurs absolues originales.
• Autoriser les hausses, baisses, stagnations et cycles saisonniers. Ne pas transformer une baisse en hausse parce que l'utilisateur a dit "courbe de croissance".
• Analyser les dates selon le fuseau horaire de l'utilisateur, ne pas coder en dur "cette année" avec la date machine.

Production et conditionnement

Lire Exécution et livraison et Livraison directe. Les chemins des ressources sont relatifs au dossier de ce skill ; ce chemin absolu est appelé SKILL_DIR.

• Copier assets/remotion/ comme point de départ du projet de rendu dans le répertoire actuel, utiliser le fichier de verrouillage fourni npm ci. Le graphique linéaire n'est qu'un exemple, la composition doit être réécrite selon le storyboard, ce n'est pas un format final par défaut. Ne pas générer de sortie ni installer de dépendances dans le skill installé.
• Le fichier exemple data.json contient des données synthétiques, utilisées uniquement pour les tests. Pour la production réelle, remplacer les données et le texte, et vérifier les faits avant de supprimer les marques d'exemple.
• Pour les séries temporelles, utiliser scripts/validate_data.py pour vérifier les dates, les références de source, la couverture et la plage ; pour les autres contenus, utiliser la structure de faits/comparaisons appropriée de Données et périmètre, sans forcer des séquences de dates. La réussite de la validation ne signifie pas que les faits de la source ont été vérifiés.
• Toutes les animations sont pilotées par useCurrentFrame() ; interdiction des animations CSS, horloge système, nombres aléatoires non fixés, animations intégrées de galeries web.
• Intégrer images, emoji, texte, scènes et graphiques dans le même storyboard, en conservant une traçabilité des faits, une couverture statique, un rendu déterministe et un processus de validation.
• Exporter cover.jpg à partir de l'image de pause complète de la même composition, en notant coverFrame / fps. L'image de couverture doit apparaître dans l'animation, still-image-time pointant vers le même moment.
• Choisir l'outil d'appairage en fonction de l'environnement de génération : macOS peut utiliser scripts/pair_live_photo.swift ; Linux / Windows utilise scripts/pair_live_photo.py, lire Apple Live Photo multiplateforme. Les deux chemins écrivent le H.264 sans son et le JPEG sous forme de ressources appairées Apple avec un identifiant partagé et des métadonnées temporelles. C'est une étape intermédiaire, pas une fin de livraison ; les autres entrées doivent d'abord être transcodées, ne pas ignorer silencieusement la piste audio de l'utilisateur.
• Une fois le conditionnement terminé, ne pas retranscoder le MOV appairé, car cela pourrait perdre la piste de métadonnées.
• Utiliser scripts/package_live_photo.py pour générer un seul paquet .pvt nommé de manière explicite ; le marquer comme paquet de ressources Live Photo, sans garantir un aperçu direct dans l'application "Fichiers" de l'iPhone ; ne pas ouvrir ou importer automatiquement dans l'application "Photos", ne pas modifier la photothèque. Ne pas s'arrêter aux ressources appairées JPG + MOV.

Validation et critères de complétude

Vérifier d'abord les faits et les éléments, puis prévisualiser la couverture et la vidéo : vérifier le début, le milieu des actions principales, les transitions, les extrêmes de données (le cas échéant) et l'image de pause de la couverture ; vérifier le chargement des images, les glyphes d'emoji, les bords transparents, les polices chinoises, les chevauchements d'étiquettes, la synchronisation des valeurs, les unités, les dates et le rognage. Confirmer que les actions expliquent le sujet, pas seulement des chiffres et des variations de barres. Les courbes réelles n'utilisent pas de lissage introduisant des pics et des creux factices ; les points manquants sont coupés. Vérifier dans l'ensemble que le contenu important et les relations de comparaison sont conservés, que le sujet de la couverture est clair, que le style est unifié ; vérifier les chiffres déroulants sur les images intermédiaires et la valeur finale, la couverture statique doit être complète et lisible.

Enregistrer l'état séparément, ne pas considérer l'étape précédente comme la réussite de la suivante :

1. Vérification des données et des sources ; la validation automatique n'en est qu'une partie.
2. Rendu de la couverture et du MP4 terminé, éléments et actions principales visibles, métadonnées et inspection visuelle réussies.
3. Correspondance des identifiants Live Photo, position temporelle correcte des métadonnées temporelles.
4. En environnement Apple, enregistrer le chargement natif réussi de PHLivePhoto.request ou l'échec spécifique ; en environnement purement Python, noter not_available, ne pas falsifier un succès.
5. Paquet .pvt complet, hash des ressources appairées cohérent.
6. L'importation dans la photothèque, la lecture sur l'appareil, le téléchargement sur des plateformes tierces et la compatibilité avec l'écran de verrouillage sont tous facultatifs, ne sont effectués et enregistrés que si l'utilisateur le demande explicitement, et ne sont pas une condition préalable à la livraison du fichier.

En l'absence de macOS, exécuter l'appairage et le conditionnement Python multiplateforme, ne pas revenir à MP4 + couverture simplement à cause du système d'exploitation. La lecture des métadonnées, le décodage vidéo et l'intégrité du paquet sont suffisants pour livrer la ressource ; le chargement natif Apple, l'importation/lecture sur iPhone sont enregistrés séparément. Ne livrer une prévisualisation et bloquer explicitement l'étape que si les dépendances réelles sont manquantes et ne peuvent pas être installées, ne pas prétendre que la plateforme ne peut pas générer. Les fichiers générés ne prouvent pas la prévisualisation, la sauvegarde ou la lecture réussies sur iPhone.

Livraison

Chaque sujet dans un répertoire indépendant, avec une prévisualisation directement visible et un paquet de ressources Live Photo nom_du_sujet.pvt, en sauvegardant delivery.json. Conserver également data.json, les preuves originales, sources.md, le projet Remotion éditable avec les éléments locaux, la liste des éléments assets.json (si des éléments sont utilisés), cover.jpg, motion.mp4, les ressources appairées internes live/ et leur manifest, et qa.json. L'archive compressée est uniquement destinée au transport, ce n'est pas une Live Photo directement reconnaissable.

Privilégier l'affichage de la prévisualisation statique/animée visible, avec un lien vers le paquet .pvt, la date de fin des données et l'état de validation. Lorsque l'utilisateur demande une prévisualisation directe sur téléphone, vérifier son chemin de réception ; ne pas prétendre que la demande est satisfaite simplement parce que le paquet de fichiers est généré ou chargé avec succès en local. Si l'interface de transfert ne prend pas en charge les paquets de répertoires, joindre .pvt.zip, en précisant qu'il faut le décompresser pour obtenir le paquet de ressources, qui nécessite toujours une application compatible Live Photo pour être lu. L'aperçu via LivePhotosKit sur le web et la sauvegarde en photo Live native sont deux capacités distinctes ; ne pas promettre des capacités non implémentées. La couverture et le MP4 ne peuvent être marqués que comme prévisualisation ; si l'interface de chat ne peut pas afficher nativement une Live Photo Apple, l'expliquer brièvement. Ne pas interpréter "livrer une Live Photo directement" comme une importation dans la photothèque, ne pas demander l'accès à la photothèque, ne pas ouvrir automatiquement un .pvt qui pourrait déclencher une importation. Ne pas publier sur les réseaux sociaux sans demande explicite.

Exemples de déclenchement

• "Avec LiveCanvas, fais l'évolution de la capitalisation boursière de Xiaomi sur les trois dernières années."

• "Fais deux cartes Live Photo de la capitalisation boursière d'Apple et Xiaomi sur les trois dernières années, avec un style unifié."

• "Transforme les températures annuelles de Pékin de l'année dernière en Live Photo, avec une couverture bien conçue."

• "Transforme ces données en infographie animée et exporte-la en Live Photo Apple."

• "Avec un PNG de tasse de café et des cartes de magasins, fais l'histoire de l'expansion de Luckin et Starbucks."

• "Avec un train, des nœuds d'années et des chiffres de kilométrage, fais l'animation Live Photo du TGV chinois."