Flint-interactive: Eine Sprache zur Erstellung interaktiver Datenvisualisierungen

Auf einen Blick

• Bringt umfangreiche Interaktivität in KI-generierte Diagramme: Flint-interactive ermöglicht es Agenten, Datenvisualisierungen zu erstellen, die Nutzer direkt durch Klicken, Filtern, Zoomen, Hervorheben und diagrammübergreifende Interaktionen erkunden können.
• Macht komplexe Interaktionen einfacher zu erstellen: Statt Code auf niedriger Visualisierungsebene zu erfordern, können Nutzer und Agenten mit Flint-interactive Verhaltensweisen über hochgradig semantische Ereignisse und Update-Operatoren definieren.
• Verbessert die Zuverlässigkeit und reduziert den Entwicklungsaufwand: Durch die Verwendung von Flints Compiler zur Verarbeitung von Interaktionslogik und visuellen Abhängigkeiten hilft das System, viele der Layout-, Rendering- und Debugging-Herausforderungen zu vermeiden, die bei individuellen interaktiven Visualisierungen üblich sind.
• Verbindet Diagramme, Text, Tabellen und Anwendungen: Flint-interactive unterstützt interaktive Data Stories, Dashboards und verbundene Erlebnisse, bei denen Aktionen in einer Ansicht Diagramme, Dokumente, Widgets oder den Anwendungszustand in einer anderen aktualisieren können.

KI-Agenten erleichtern die Analyse von Daten und die Erstellung von Berichten mit Datenvisualisierungen. Sie helfen Nutzern, Muster effizienter zu untersuchen, als es durch das Lesen von ausführlichen Texten möglich wäre. Wenn wir jedoch erkunden möchten, wollen wir über statische Visualisierungen hinausgehen.: Wir möchten mit Diagrammen interagieren, um Details zu vergrößern, Daten diagrammübergreifend zu vergleichen oder sogar verwandten Text im Dokument anhand einer Diagrammauswahl hervorzuheben – und umgekehrt. Dies erfordert, dass Agenten interaktive Datenvisualisierungen erstellen können, die Informationen vermitteln und es Lesern zugleich ermöglichen, über die vom Autor gewählte Ansicht hinauszugehen – idealerweise mit der Qualität interaktiver Geschichten im anspruchsvollen Datenjournalismus. Das lässt uns fragen: 

• (Als Nutzer) Kann ich direkt im Chat mit Diagrammen interagieren, um die Daten zu erkunden und Folgefragen auf der Grundlage meiner Auswahl zu stellen?
• (Als Entwickler) Kann ich die KI-Agenten, die ich für meine Kunden entwickle, in die Lage versetzen, interaktive Visualisierungen zu generieren, die ihnen helfen, ihre Daten zu erkunden und zu verstehen?

Ja, es ist möglich, aber es gibt eine erhebliche praktische Lücke. Selbst mit leistungsfähigen Frontier-Modellen stehen wir noch vor:

• Hohe Generierungskosten. Agenten erzeugen selten in einem einzigen Durchgang eine vollkommen zufriedenstellende interaktive Visualisierung. Wiederholte Runden des Reasonings, der Programmierung und des Debuggens verbrauchen Tokens und Zeit.
• Zuverlässigkeit. Interaktive Visualisierungen sind herausfordernd genug, sodass ausdrucksstarke interaktive Diagramme leicht schlechte Layouts oder fehlerhafte Interaktionen aufweisen, und wir riskieren, beim Versuch der Behebung neue Probleme einzuführen.

Diese Herausforderungen erklären, warum die konsistente Generierung hochwertiger interaktiver Visualisierungen im realen Einsatz schwierig bleibt. Währenddessen sind die integrierten Interaktionen einiger Visualisierungsbibliotheken für sich genommen nicht ausdrucksstark genug, um maßgeschneiderte interaktive Diagramme zu erstellen. Und diese Herausforderungen sind Folge des Fehlens einer ausdrucksstarken und zugleich abstrakten Sprache zur Spezifikation visueller Interaktionen.

Spotlight: Eventreihe

Microsoft Research Forum

Begleiten Sie uns zu einem kontinuierlichen Austausch von Ideen über Forschung im Zeitalter der allgemeinen KI. Sehen Sie sich die neuesten Folgen auf Abruf an.

Flint-interactive

Flint-interactive (öffnet in neuem Tab) ist eine Sprache zur Erstellung interaktiver Datenvisualisierungen auf Basis von Flint. Sie ermöglicht es Nutzern, Dashboards, Data Stories und interaktive Artefakte leichter zu erstellen. Die Leistungsfähigkeit von Flint-interactive stammt von Flints Compiler, der Nutzerinteraktionen in semantische Ereignisse übersetzt, welche die Bedeutung hinter dem erfassen, was Nutzer auswählen. Anschließend verwendet er hochgradige Operatoren, um Visualisierungen als Reaktion auf diese Ereignisse zu aktualisieren, wodurch sich anspruchsvolle Interaktionen deutlich einfacher erstellen und pflegen lassen. Dies verlagert die große Last der Auflösung komplexer Abhängigkeiten zwischen Interaktions- und visueller Logik auf den Compiler, sodass der Nutzer (oder der Agent) ausdrucksstarke Interaktionen mit hochgradigen Spezifikationen leicht beschreiben kann.

Verwendung

1. Verwenden Sie Flint in Ihrem Chat

Verwenden Sie Flint Interactive direkt in Ihrer Chat- oder Canvas-Umgebung über Flint-MCP und MCP Apps, gemäß dem MCP-Einrichtungsleitfaden. Sagen Sie Ihrem Agenten mit der neuesten Version, was er darstellen soll und welche Interaktionen Sie wünschen; er kann eine interaction_spec zusammen mit der Flint-Diagrammspezifikation generieren und das interaktive Diagramm in Ihrer Konversation rendern.

2. Erstellen Sie eine interaktive App mit Flint

Erstellen Sie interaktive Diagramme in einem Dashboard, einer Data Story oder einer anderen Anwendung mit Flint Interactive Canvas. Ihre App kann Ereignishandler verwenden, um die von Flint Canvas ausgegebenen semantischen Ereignisse zu verarbeiten, um beispielsweise eine Tabelle zu filtern, ein anderes Diagramm zu aktualisieren oder den Anwendungszustand zu ändern. Um den Widgets Ihrer App die Steuerung der Diagrammaktualisierung zu ermöglichen, senden Sie Update-Operatoren an Flint Canvas.

3. Individuelle Interaktionen erstellen

Um individuelle Interaktionen über die Presets von Flint hinaus zu erstellen, definieren Sie einen Trigger und eine benutzerdefinierte Handle-Funktion mit der Programming-API, die semantische Ereignisse auf benutzerdefinierte Diagramm-Update-Sequenzen abbildet. Beispielsweise kann ein Handler ein angeklicktes Land hervorheben und es mit seinem Namen beschriften. Er kombiniert set-style und set-annotation, ohne renderer-spezifische Marks zu manipulieren.

Wie es funktioniert

Flint Canvas ist ein Zustandsautomat, der Nutzerinteraktionen auf der Canvas verfolgt und den visuellen Rendering-Zustand verwaltet. Flint macht die Interaktionsspezifikation einfach, indem es die visuelle Logik, die vom Compiler verwaltet wird, von der Interaktionslogik trennt, die vom Nutzer auf semantischer Ebene festgelegt wird:

• Visuelle Logik: Der Compiler löst rohe Trigger wie Klicks, Ziehen und Tastendrücke automatisch in semantische Ereignisse auf, die Diagrammelemente und Daten identifizieren. Er übersetzt außerdem Update-Operatoren in gerenderte Canvas-Änderungen, behandelt Hit-Testing und Low-Level-Visuelle-Updates.
• Interaktionslogik: Der Nutzer legt Interaktionen fest, indem er semantische Interaktionsereignisse auf Diagramm-Update-Operatoren abbildet, z. B. set style, um Daten hervorzuheben, set annotation, um einen Punkt zu beschriften, oder set viewport, um zu schwenken oder zu zoomen. Der Nutzer kann diese semantischen Ereignisse auch verwenden, um externe Tabellen, Widgets oder Anwendungszustände zu aktualisieren.

Diese Trennung bedeutet, dass Nutzer keine Rendering-Logik zurückentwickeln oder renderer-spezifische Marks manipulieren müssen, was die Festlegung und Wartung von Interaktionen erleichtert. Da zudem die Ereigniserzeugung und visuellen Aktualisierungen kompositionell sind, verbindet dasselbe Modell Flint auch mit Tabellen, Text, anderen Diagrammen und Widgets, um interaktive Geschichten und Dashboards zu erstellen.

Jetzt ausprobieren!

Diagramm-Nutzer: Richten Sie Flint in Ihrem Chat ein (öffnet in neuem Tab) und bitten Sie Ihren Agenten, ein interaktives Diagramm zu erstellen. Lassen Sie sich in der Interaktionsgalerie inspirieren.

App-Entwickler: Erstellen Sie interaktive Dashboards, Data Stories und verbundene Ansichten mit der Programming-API (öffnet in neuem Tab). Teilen Sie den Interaction-Author-Skill mit Ihrem Coding-Agenten, um Presets zu Ihrer App hinzuzufügen.

Interaktionsdesigner: Erkunden Sie die individuellen Beispiele (öffnet in neuem Tab), entwerfen Sie eine neue Interaktion und machen Sie daraus ein wiederverwendbares Preset. Schlagen Sie ein Preset auf GitHub vor und teilen Sie Ihren Prototyp oder Ihre Implementierung, um Flints Interaktionsvokabular zu erweitern.