honglin0000/livecanvas

LiveCanvas · Live-Leinwand

Verwandelt eine Benutzereingabe in eine animierte Live-Photo-Informationskarte mit belegten Fakten, die statisch lesbar ist und dynamisch den Inhalt erklärt. Ursprünglich LiveChart, jetzt LiveCanvas (Live-Leinwand), deckt es Diagramme, Bilder und szenische Erzählungen ab; standardmäßig werden themenbezogene Bilder/Icons und Szenenaktionen aktiv entworfen, Diagramme sind nur optional. Standardmäßig: Chinesisch, Remotion, 1080×1440, 30 fps, ca. 3 Sekunden, stumm. Dies sind Ausgangspunkte, die je nach Inhalt angepasst werden können; 3 Sekunden sind keine behauptete Apple-Formatbeschränkung.

Zuerst den Inhalt, dann die Animation

1. Extrahiere aus der Anfrage das Subjekt, die Metriken, den Zeitraum, Vergleichsbeziehungen und den Verwendungszweck; bei einem gegebenen Artikel oder Bericht lies zuerst das vollständige Material und extrahiere dann die Schlüsselereignisse, Änderungen, Fähigkeiten, Vergleiche und Szenen. Verteile den Platz nach der Inhaltswichtigkeit und wähle nicht nur Preise oder leicht darstellbare Zahlen aus. Spezifische Anforderungen haben Vorrang; verwende das Beispiel des Benutzers nicht als feste Vorlage.
2. Suche und überprüfe die Daten, lies Daten und Metrikdefinitionen. Speichere zuerst die Originalbeweise, Fakten oder strukturierten Daten, bevor du Titel, Zahlen und Anmerkungen schreibst. Themen ohne Zeitreihe können mit Faktenkarten, Prozessen oder Szenenerklärungen dargestellt werden; erfinde keine Daten, um Diagramme zu zeichnen.
3. Schreibe eine kurze Produktionserklärung: die Haupthandlung des gesamten Sets, das Subjekt und die Schlussfolgerung jeder Karte, die Daten-/Metrikdefinitionen, die Informationshierarchie des Covers, das Storyboard-Zeitdiagramm und den Materialplan. Die Anzahl der Karten richtet sich nach den Benutzeranforderungen und dem Inhalt und ist nicht auf eine bestimmte Anzahl oder Themenkombination festgelegt. Wähle die für das Thema geeignete Darstellung aus und verwende nicht standardmäßig ein Liniendiagramm mit Zahlen. Triff Designentscheidungen direkt; frage nur, wenn fehlende Informationen die Antwort wesentlich ändern würden.
4. Erstelle nach Cover und Animation. Übernimm Emil Kowalski animates Prinzipien der Zielgerichtetheit, Zurückhaltung, Kontinuität und klaren Rhythmik; der Benutzer hat Remotion festgelegt, führe keine Werkzeugersetzungsschritte im Upstream durch und wende auch keine Beschränkungen der interaktiven Komponentenlänge mechanisch auf erklärende Videos an.

Text: Schreibe direkt Fakten und Daten

• Der Titel priorisiert „Subjekt + Zahl/Änderung/klare Schlussfolgerung“, z. B. „Ausgabelimit 1 Mio. Tokens“ „Erstveröffentlichungskosten 39 % niedriger“ „Text Arena vorläufig auf Platz eins“. Wenn keine notwendigen Zahlen vorhanden sind, schreibe direkt den Produktnamen, die Version oder das konkrete Ereignis und erzwinge keine Daten.
• Verwende kurze, intuitive Aussagen; entferne vage Werbung, rhetorische Fragen, Metaphern, Parallelismen und dekorative englische Beschriftungen. Verwende keine Sätze wie „neu definieren“ „drei Änderungen verstehen“ „Gewinne in reale Szenarien bringen“ anstelle von Fakten. Der Haupttext und die Bildbeschreibungen halten denselben Standard ein; schreibe die Quelle mit dem vollständigen Organisationsnamen, z. B. Artificial Analysis, nicht nur AA. Schreibbeispiele und Einschränkungen findest du in Cover und Animation.
• Wenn der Benutzer sagt „zu KI-lastig“ „direkt die Daten“ „kein Schnickschnack“, vereinfache den Text und irrelevante Dekorationen; behalte das ursprüngliche Thema, die Informationen, notwendigen Materialien und die bereits gewählte Designrichtung bei, lösche nicht eigenmächtig die Haupt-Cover-Seite, fasse Themen nicht zusammen oder wandle das gesamte Set in dieselbe Datenvorlage um.
• Bei Änderungen behalte die bestätigten Themen, Informationen und visuellen Anforderungen bei. Wenn der Benutzer die Anzahl der Karten oder den Schwerpunkt ändert, verteile den Inhalt neu und erkläre die Zusammenführungen, Ersetzungen und Wiederverwendungsbeziehungen; verwende keine mechanische Seitenaufteilung oder Themenwiederholung zum Auffüllen. Überprüfe die Versionen vor und nach der Änderung anhand der Kartennummerierung und entferne Duplikate im gesamten Paket.

Visuelle Darstellung

• Das Cover etabliert die visuelle Hierarchie mit dem Produktnamen, der Versionsnummer oder dem Kernobjekt. „Auftrittsgefühl“ „Einschlagskraft“ sind Effektbeschreibungen und werden nicht direkt als Text im Bild verwendet; konkrete Vorgehensweise siehe Cover und Animation.

• Das gesamte Set verwendet eine einheitliche Farbpalette, Schriftart und grafische Sprache; wähle das Layout je nach Inhalt. Erkläre Fakten und Beziehungen mit Grafiken, vermeide Textanhäufungen, große Zahlen, dekorative Karten oder mechanische Wiederverwendung derselben Vorlage.

• Standardmäßig erscheinen die Objekte des Themas im Bild: Produkt-PNGs, Kaffeetassen, Autos, Züge, Medaillen, Stadtfotos, Wetter-Emojis usw.; wähle eine Gruppe von themenrelevanten, einheitlich gestalteten Materialien aus, die nicht als dekorative Elemente an den Rändern von Diagrammen platziert werden.

• Gestalte den Eintritt, die Bewegung, die Anordnung, die Ersetzung oder den Zustandswechsel von Objekten, um den Inhalt zu erklären. Z. B. ein Zug, der durch Jahresknoten fährt, eine Kaffeetasse, die Filialkarten mit sich bringt, eine Stadtszene, die mit den Jahreszeiten wechselt.

• Kombiniere je nach Thema Szenen, Bildvergleiche, Symbolanordnungen, Zeitlinien, Prozessdemonstrationen, wichtige Textabschnitte und notwendige Diagramme. Reine Diagramme werden nur verwendet, wenn sie wirklich am klarsten sind oder vom Benutzer spezifisch angefordert werden.

• Bei Verwendung von Bildern oder Emojis lies Bilder und Icons, suche und überprüfe die Verfügbarkeit der Materialien und füge sie in das Projekt ein; der Benutzer muss nicht zuerst Material bereitstellen.

Standardsucheinstellungen

• „Letzte 3 Jahre“: Rollierende drei Jahre bis zum letzten zuverlässigen abgeschlossenen Beobachtungsdatum, mit Angabe des tatsächlichen Anfangs- und Enddatums; nicht standardmäßig als drei Jahresendwerte. Für monatliche Diagramme verwende den abgeschlossenen Monatsendwert; der letzte unvollständige Monat wird separat gekennzeichnet.
• „Ganzjahrestemperatur“ ohne Jahresangabe: Verwende das letzte vollständige Kalenderjahr, standardmäßig die monatliche Durchschnittstemperatur; erkläre die Auswahl am Anfang des Ergebnisses. Wenn die Absicht eindeutig das langjährige Klima ist, verwende einen Klimadurchschnitt mit einem klaren Bezugszeitraum.
• Beim unternehmensübergreifenden Vergleich gleiche die Beobachtungsdaten, Metriken und Währungen an oder verwende einen Index auf derselben Basis und behalte die ursprünglichen Absolutwerte bei.
• Erlaube Aufwärts-, Abwärts-, Seitwärts- und saisonale Zyklen. Zeichne keinen Anstieg, wenn der Benutzer „Wachstumskurve“ sagt, falls die Daten einen Rückgang zeigen.
• Analysiere das Datum in der Zeitzone des Benutzers und verwende keine maschinellen Daten, die fest „dieses Jahr“ kodieren.

Erstellung und Verpackung

Lies Ausführung und Lieferung und Direkte Auslieferung. Ressourcenpfade sind relativ zum Skill-Verzeichnis; bezeichne den absoluten Pfad als SKILL_DIR.

• Kopiere assets/remotion/ als Ausgangspunkt für das Rendering-Projekt in das aktuelle Verzeichnis und verwende die beiliegende Sperrdatei npm ci. Das darin enthaltene Liniendiagramm ist nur ein Beispiel; die Composition muss gemäß dem Storyboard neu geschrieben werden und nicht als Standard-Endformat verwendet werden. Generiere keine Ausgaben oder installiere Abhängigkeiten innerhalb des installierten Skills.
• Die Beispiel-data.json enthält synthetische Daten, die nur zum Testen verwendet werden. Für die endgültige Produktion müssen die Daten und Texte ersetzt werden; führe eine Faktenprüfung durch, bevor die Beispiel-Markierungen entfernt werden.
• Für Zeitreihen verwende scripts/validate_data.py zur Überprüfung von Daten, Quellenangaben, Abdeckung und Bereich; für andere Inhalte verwende die passende Fakten-/Vergleichsstruktur gemäß Daten und Metrikdefinitionen und erzwinge keine Datumssequenz. Das Bestehen der Prüfung bedeutet nicht, dass die Quellenfakten bereits überprüft wurden.
• Alle Animationen werden von useCurrentFrame() gesteuert; CSS-Animationen, Wanduhren, unfixierte Zufallszahlen und integrierte Animationen von Web-Galerien sind verboten.
• Integriere Bilder, Emojis, Text, Szenen und Diagramme in ein Storyboard, behalte die nachvollziehbaren Fakten, das statische Cover, deterministisches Rendering und den Überprüfungsprozess bei.
• Exportiere das cover.jpg aus der vollständigen Standbild-Frame derselben Composition und notiere coverFrame / fps. Das Cover-Bild muss innerhalb der Animation erscheinen; still-image-time zeigt auf denselben Zeitpunkt.
• Wähle das Paarungs-Tool basierend auf der Erzeugungsumgebung: macOS verwendet scripts/pair_live_photo.swift; Linux / Windows verwenden scripts/pair_live_photo.py, lies Plattformunabhängiges Apple Live Photo. Beide Pfade schreiben stummes H.264 und JPEG als Apple-Paarressource mit gemeinsamem Identifier und Timed-Metadata. Dies ist ein Zwischenschritt, keine abgeschlossene Lieferung; andere Eingänge müssen zuerst transcodiert werden, die Audiospur des Benutzers darf nicht stillschweigend verworfen werden.
• Nach der Verpackung darf das gepaarte MOV nicht erneut normal transcodiert werden, da sonst Metadaten-Spuren verloren gehen können.
• Verwende scripts/package_live_photo.py, um ein eindeutig benanntes einzelnes .pvt-Paket zu generieren; kennzeichne es als Live-Ressourcenpaket, verspreche nicht, dass es in der iPhone „Dateien“-App direkt eine Vorschau anzeigt; öffne oder importiere es nicht automatisch in die „Fotos“-App und ändere nicht die Fotobibliothek. Bleibe nicht bei JPG + MOV-Paarressourcen stehen.

Überprüfung und Fertigstellungskriterien

Überprüfe zuerst Fakten und Materialien, dann sieh dir Cover und Video in der Vorschau an: Stichprobenartige Überprüfung des Anfangs, der Mitte der Hauptaktionen, der Übergänge, der Daten-Extremwerte (falls vorhanden) und des verweilenden Cover-Frames; überprüfe das Laden von Bildern, Emoji-Glyphen, transparente Ränder, chinesische Schriftarten, Beschriftungsüberlappungen, Werte-Synchronisation, Einheiten, Datumsangaben und Beschnitt. Bestätige, dass die Aktionen das Thema erklären und nicht nur Zahlen- und Balkenänderungen darstellen. Verwende bei echten Kurven keine Glättung, die künstliche Spitzen und Täler einführt; Datenlücken werden durch Unterbrechungen der Linie dargestellt. Überprüfe im gesamten Set, ob wichtige Inhalte und Vergleichsbeziehungen erhalten bleiben, die Hauptaussage des Covers klar ist und der Stil einheitlich ist; bei Zahlenanimationen überprüfe die Zwischenframes und den Endwert, das statische Cover muss vollständig lesbar sein.

Halte den Status getrennt fest und betrachte nicht einen vorherigen Punkt als Erfolg für den nächsten:

1. Daten- und Quellenüberprüfung; maschinelle Überprüfung ist nur ein Teil davon.
2. Cover und MP4-Rendering abgeschlossen, Materialien und Hauptaktionen sichtbar, Metadaten und Bildprüfung bestanden.
3. Live Photo-Identifier stimmen überein, Timed-Metadata-Zeitposition korrekt.
4. In einer macOS-Umgebung notiere den erfolgreichen nativen Ladevorgang von PHLivePhoto.request oder den spezifischen Fehler; in einer reinen Python-Erzeugungsumgebung als not_available markieren, nicht als bestanden vortäuschen.
5. .pvt-Paket vollständig, Hash der gepaarten Ressourcen konsistent.
6. Fotoalbum-Import, Gerätewiedergabe, Upload auf Drittanbieterplattformen und Sperrbildschirm-Kompatibilität sind optionale Punkte, die nur auf ausdrücklichen Wunsch des Benutzers durchgeführt und dokumentiert werden; sie sind keine Voraussetzung für die Dateiauslieferung.

Ohne macOS führe die plattformunabhängige Python-Paarung und -Verpackung durch; kehre nicht allein aufgrund des Betriebssystems zu MP4 + Cover zurück. Ressourcen können nach erfolgreichem Metadaten-Rücklesen, Videodekodierung und Paketintegritätsprüfung ausgeliefert werden; nativer Apple-Ladevorgang, iPhone-Import/Wiedergabe werden separat dokumentiert. Fehlende tatsächliche Abhängigkeiten, die nicht installiert werden können, führen nur zur Auslieferung einer Vorschau mit klarer Angabe der Blockierung; behaupte nicht, dass die Plattform die Erzeugung nicht unterstützt. Generierte Dateien beweisen keine Telefonvorschau, -speicherung oder -wiedergabe.

Auslieferung

Jedes Thema erhält ein eigenes Verzeichnis und liefert gleichzeitig eine direkt anzeigbare Vorschau und das Live-Ressourcenpaket Themenname.pvt aus und speichert delivery.json. Hebe außerdem data.json, die Originalbeweise, sources.md, das bearbeitbare Remotion-Projekt mit lokalen Materialien, die Materialliste assets.json (bei Verwendung von Materialien), cover.jpg, motion.mp4, das interne live/-Paarressourcen mit Manifest und qa.json auf. Das Archiv zur Übertragung ist nur für die Übertragung, kein direkt erkennbares Live Photo.

Zeige zuerst die anzeigbare Cover-/Dynamik-Vorschau an und füge den Link zum .pvt-Ressourcenpaket, das Datenenddatum und den Überprüfungsstatus hinzu. Wenn der Benutzer eine direkte Vorschau auf dem Handy wünscht, überprüfe seinen Empfangspfad; behaupte nicht, dass die Anforderung nur durch die Dateiverpackung oder einen erfolgreichen nativen Ladevorgang erfüllt ist. Wenn die Übertragungsschnittstelle kein Verzeichnispaket unterstützt, füge .pvt.zip bei und weise darauf hin, dass nach dem Entpacken das Ressourcenpaket erhalten wird, das noch von einer Live Photo-unterstützenden App gelesen werden muss. Die Web-LivePhotosKit-Vorschau und das Speichern als natives Live Photo sind zwei verschiedene Fähigkeiten; nicht implementierte Fähigkeiten werden nicht versprochen. Cover und MP4 dürfen nur als Vorschau markiert werden; wenn der Chat nativ kein Apple Live Photo anzeigen kann, erkläre es kurz. Interpretiere „Live Photo direkt ausliefern“ nicht als Import in das Fotoalbum, fordere keine Berechtigungen für die Fotobibliothek an und öffne auch nicht automatisch Dateien, die einen Import auslösen könnten, wie .pvt. Veröffentliche nicht ohne Aufforderung auf Social-Media-Plattformen.

Beispiel-Trigger

• „Erstelle mit LiveCanvas die Marktwertveränderung von Xiaomi in den letzten drei Jahren.“

• „Erstelle zwei Live-Photos der Marktwerte von Apple und Xiaomi in den letzten drei Jahren, einheitlicher Stil.“

• „Erstelle ein Live Photo der gesamten Jahrestemperatur von Peking im letzten Jahr, inklusive Cover-Design.“

• „Erstelle aus diesen Daten eine animierte Infografik und exportiere sie als Apple Live Photo.“

• „Erstelle die Expansionsgeschichte von Luckin Coffee und Starbucks mit Kaffeetassen-PNGs und Filialkarten.“

• „Erstelle eine Live-Animation der chinesischen Hochgeschwindigkeitszüge mit Zügen, Jahresknoten und Kilometerzahlen.“