Flint-interactive — язык для создания интерактивной визуализации данных

ИИ-агенты умеют анализировать данные и создавать отчёты с графиками. Так пользователям проще замечать закономерности, чем при чтении длинных текстов. Но для исследования данных часто недостаточно статичной визуализации: хочется приблизить детали, сравнить графики или выделить в документе текст, связанный с выбранными данными на графике, — и наоборот. Для этого агентам нужно создавать графики, которые не только передают информацию, но и позволяют читателю исследовать её за пределами заранее выбранного автором представления.

Отсюда возникают два вопроса: может ли пользователь взаимодействовать с графиком прямо в чате и задавать уточняющие вопросы по выбранным данным? Может ли разработчик дать своим клиентам ИИ-агентов, способных создавать интерактивные визуализации для исследования и понимания данных?

Это возможно, но на практике остаются сложности — даже при наличии передовых моделей:

Поэтому в реальных условиях стабильно получать качественные интерактивные визуализации сложно. Встроенных средств некоторых библиотек визуализации недостаточно для создания графиков с индивидуальными взаимодействиями. Одна из причин — отсутствие выразительного высокоуровневого языка для их описания.

Flint-interactive

Flint-interactive — язык для создания интерактивных визуализаций поверх Flint. С его помощью проще создавать панели мониторинга, истории на основе данных и интерактивные материалы. Компилятор Flint переводит действия пользователя в семантические события, отражающие смысл его выбора, а затем применяет высокоуровневые операторы для обновления визуализаций.

Благодаря этому сложные зависимости между взаимодействиями и визуальной логикой обрабатывает компилятор. Пользователю или ИИ-агенту достаточно описать нужное поведение на высоком уровне.

Источник: microsoft.com

Как использовать

Flint Interactive можно подключить прямо к чату или среде холста через Flint-MCP и MCP Apps, следуя руководству по настройке MCP. В последней версии достаточно попросить агента построить график и указать нужные взаимодействия: агент создаст спецификацию взаимодействий вместе со спецификацией графика Flint и покажет интерактивный график в разговоре.

Для создания графиков в панели мониторинга, истории на основе данных или другом приложении используется Flint Interactive Canvas. Приложение может обрабатывать семантические события от Flint Canvas, например фильтровать таблицу, обновлять другой график или менять состояние приложения. Чтобы виджеты приложения могли управлять обновлением графика, нужно отправлять операторы обновления в Flint Canvas.

Для взаимодействий, которых нет среди готовых вариантов Flint, можно определить триггер и собственную функцию-обработчик через программный интерфейс. Она связывает семантические события с последовательностью обновлений графика. Например, обработчик может выделить выбранную страну и подписать её название. Для этого он сочетает операторы задания стиля и аннотации, не управляя элементами конкретной системы отображения.

Как это работает

Flint Canvas — конечный автомат, который отслеживает действия пользователя на холсте и управляет состоянием визуализации. Flint упрощает описание взаимодействий, разделяя визуальную логику, которой управляет компилятор, и интерактивную логику, которую пользователь задаёт на семантическом уровне.

Благодаря такому разделению не нужно восстанавливать логику отображения или напрямую управлять элементами конкретной системы визуализации. Взаимодействия проще задавать и поддерживать. Генерация событий и визуальные обновления также сочетаются друг с другом, поэтому Flint можно связать с таблицами, текстом, другими графиками и виджетами, создавая интерактивные истории и панели мониторинга.

Пример 1: Пользователь может выделить область на одной визуализации, и диаграмма подсветит все группы стран, выбранные пользователем, с помощью простой заранее заданной связи между выделениями

Источник: microsoft.com

Пример 2: Flint-interactive позволяет разработчикам задавать взаимодействия между диаграммами и внешними элементами (например, таблицей или абзацем). Здесь пользователь может щёлкнуть по таблице, чтобы подсветить точки на диаграмме, и наоборот

Источник: microsoft.com

Попробовать Flint

Пример 4: С помощью программного API Flint агент может создавать интерактивные визуализации на заказ. В этом примере DimpVis пользователь может перетаскивать точку вдоль временной шкалы, чтобы увидеть, как меняются температура и количество осадков во всех городах

Источник: microsoft.com

Flint interactive позволяет агенту описывать логику взаимодействия, сопоставляя «с каким семантическим событием взаимодействует пользователь» с «какие обновления ему нужны на холсте». Компилятор берёт на себя сложную работу по определению визуальных обновлений и управляет средой выполнения, что делает создание взаимодействий более надёжным и экономически эффективным

Источник: microsoft.com

Авторы