Приложения Blazor с ИИ без использования промптов

Создайте приложение Blazor с приоритетом ИИ, не требующее промптов, от начала до конца, используя компоненты Progress Telerik UI for Blazor.

Обычно, когда мы думаем о приложениях на базе ИИ, мы представляем себе чат-боты. Такие приложения в основном состоят из текстового поля, нескольких кнопок для добавления контекста (например, изображений) и кнопки для начала диалога с LLM-моделью. Однако можно говорить и о другом типе приложений на базе ИИ — с подходом «Promptless AI-First» (ИИ-первостепенный без промптов). Давайте разберемся, что это такое.

Что такое приложение без промптов?

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

Некоторые преимущества этого подхода:

• Снижает трение, избавляя пользователя от необходимости писать промпт
• Направляет результат, поскольку именно вы создаете промпт по умолчанию, который можно протестировать для получения наилучшего результата
• Действует как защитный барьер, поскольку использование стандартных элементов управления с ограничениями позволяет ограничить вывод допустимыми вариантами, избежать нестандартных ситуаций, минимизировать попытки инъекции промптов и многое другое
• Улучшает отслеживаемость, позволяя точно знать, какая комбинация параметров привела к каждому ответу, что позволяет воспроизводить результаты и улучшать систему
• Улучшает доступность, упрощая взаимодействие для всех пользователей

Несомненно, этот подход выгоден как для бизнеса, так и для пользователей.

Создание приложения для планирования путешествий без промптов

Мы собираемся создать приложение, реализующее концепцию ИИ-первостепенности без промптов с использованием Blazor. Для этого представим, что мы хотим создать страницу, которая помогает пользователям планировать поездку через взаимодействие с различными элементами управления Progress Telerik. В фоновом режиме мы будем использовать введенную информацию для отправки запроса к LLM-модели и отображения полученного маршрута на странице.

Создание проекта с приоритетом ИИ без промптов

Начнем с создания проекта с использованием шаблона Blazor Web App, выбрав интерактивный режим рендеринга (Interactive render mode) как Server и расположение интерактивности (Interactivity location) как Global. Затем используйте шаблон Telerik Blazor Web App (Progress) или добавьте компоненты Telerik в существующее приложение.

После создания проекта установите следующие пакеты NuGet:

• Microsoft.Extensions.AI
• Microsoft.Extensions.AI.OpenAI
• Markdig

Вышеуказанные пакеты обеспечат связь с моделями ИИ, в данном случае напрямую с OpenAI, благодаря использованию пакетов Microsoft.Extensions.AI. Кроме того, пакет Markdig будет использоваться для отображения контента в формате markdown в приложении.

Создание моделей для приложения

В нашем сценарии мы сопоставим элемент управления пользовательского интерфейса с полем модели. Для этого начнем с создания папки Models. Внутри мы добавим файл TripPreferences.cs, который будет выглядеть следующим образом:

В приведенном выше коде мы создаем пару перечислений для управления бюджетом и темпом поездки. Кроме того, создается класс TripPreferences, который содержит поле для каждого ввода формы. Среди опций мы определяем место для путешествия, даты поездки, количество взрослых и детей, бюджет, интересы и многое другое.

Создание сервиса PromptBuilder

Поскольку мы будем использовать элементы управления для выбора опций в пользовательском интерфейсе, нам нужен сервис, который переводит значения в инструкции, понятные модели ИИ. Для этой демонстрации мы создадим новый класс PromptBuilder.cs, который позволяет создавать как системный промпт, так и промпт пользователя:

В методе BuildSystemPrompt мы создаем StringBuilder, указывая, как модель должна себя вести, какой формат использовать в ответе и предотвращая отслеживание диалога. Это сделано потому, что мы хотим, чтобы ответы были спроектированы так, как будто пользователь не отвечает.

Также можно заметить, что в определенный момент промпта указывается доступ к инструменту web_search, который мы включим позже и который позволит получать свежую и актуальную информацию.

С другой стороны, метод BuildUserPrompt будет отвечать за создание промпта, который будет отправлен в модель ИИ со всеми требованиями пользователя. В случае интересов и диеты мы добавляем их только в том случае, если что-то было выбрано; в противном случае эта информация не добавляется.

Кроме того, если пользователь хочет включить другие примечания, они рассматриваются как отдельный раздел в промпте, указывая модели, что они не могут перезаписывать начальные правила.

Настройка клиента для запросов к моделям ИИ

Следующим шагом будет создание клиента, который позволит запрашивать у LLM-модели желаемую информацию. Мы сделаем это в Program.cs:

В приведенном выше коде мы считываем ключ API из конфигурации. В этом примере мы проверим правильность конфигурации из компонента планирования, но вы могли бы добавить механизм уведомления пользователя, если он не был настроен здесь, то есть при запуске приложения.

Еще один важный момент заключается в том, что мы используем API Responses благодаря методу GetResponsesClient. Мы настраиваем его таким образом, потому что будем использовать инструмент веб-поиска.

Наконец, мы также добавляем singleton-экземпляр сервиса PromptBuilder. Теперь давайте посмотрим, как использовать все, что мы сделали выше, в компоненте Blazor.

Создание компонента для рендеринга Markdown

Модели ИИ регулярно отвечают в формате markdown. Чтобы правильно отображать этот контент в пользовательском интерфейсе приложения, создадим компонент MarkdownContent.razor, который позволяет правильно отображать контент:

Работа компонента очень проста. Он получает текст в формате markdown в качестве параметра, использует библиотеку Markdig для преобразования его в безопасный HTML и возвращает результат в виде MarkupString, который Blazor может отобразить как HTML.

Создание страницы планировщика путешествий с ИИ

Теперь давайте создадим компонент страницы, который позволит взаимодействовать с пользователями. Этот компонент будет называться Planner.razor и будет выглядеть следующим образом:

В приведенном выше коде можно выделить некоторые детали:

• Мы определяем маршрут /planner для доступа к странице.
• Мы используем компоненты Telerik, такие как TelerikCard, TelerikDropDownList, TelerikDateRangePicker, TelerikNumericTextBox, TelerikButtonGroup, TelerikLoader и многие другие, которые помогают нам быстро и надежно создавать интерфейсы Blazor.
• Такие данные, как пункт назначения, даты, количество путешественников, бюджет и темп, фиксируются с помощью визуальных элементов управления, понятных пользователям, таких как выпадающие списки, выбор даты, числовые поля и т. д., что помогает предотвратить ошибки и проверить данные.
• Для интересов и диетических предпочтений мы используем TelerikChip, который позволяет выбирать несколько вариантов одновременно, изменяя их визуальные свойства в зависимости от выбранного состояния.
• Мы добавляем необязательный TelerikTextArea, чтобы пользователь мог добавить событие, представляющее интерес, но ограниченное 30 символами, чтобы оно не превратилось в новый промпт.
• Сразу после показа пользователю ответа, сгенерированного в MarkdownContent, мы отображаем использованные веб-источники.
• Для демонстрационных целей мы показываем сгенерированный промпт, который отправляется в модель ИИ.

Теперь давайте посмотрим, как выглядит логика компонента.

Добавление логики состояния и компонентов

Чтобы завершить компонент, похожий на страницу, мы создадим файл Planner.razor.cs, чтобы отделить графическое определение от логики компонента. Мы начнем с создания свойств состояния, списка операций и методов:

В приведенном выше коде мы можем видеть несколько важных вещей:

• Мы используем внедрение зависимостей для получения экземпляра PromptBuilder и IChatClient через конструктор.
• Preferences: это экземпляр модели, привязанный к элементам управления формы.
• Itinerary: текст в формате markdown, возвращаемый моделью.
• LastPrompt: последний отправленный промпт, который мы будем использовать в демонстрационных целях, чтобы показать промпт, отправленный модели ИИ.
• ErrorMessage: сообщение об ошибке на случай сбоя.
• WebSources: список URL-адресов, к которым обращалась модель.
• Destinations, Languages, AllInterests и AllDiets: списки, которые заполняют элементы управления выпадающего списка и чипов.

Затем мы добавляем пару методов, которые помогают управлять множественным выбором чипов:

Здесь мы используем прием, при котором мы пользуемся тем фактом, что метод Remove возвращает true, если элемент существует в коллекции и может быть удален, или false, если он не был найден для удаления. Если получается значение false, он добавляется в соответствующий список.

Наконец, мы переходим к добавлению метода GenerateItineraryAsync, который инициирует вызов модели ИИ для получения рекомендуемого маршрута:

Этот метод творит чудеса, выдавая точный ответ пользователю. Давайте посмотрим, что он делает:

• Любое оставшееся взаимодействие очищается для запуска с чистым пользовательским интерфейсом.
• Мы используем службу PromptBuilder для преобразования объекта Preferences в простой текст.
• Мы проверяем, что IChatClient был правильно инициализирован с использованием API-КЛЮЧА. В противном случае пользователю отображается ошибка.
• На этом этапе мы настраиваем ChatOptions с помощью HostedWebSearchTool в списке Tools. Это позволяет модели ИИ искать в интернете релевантную информацию. ToolMode = ChatToolMode.RequireAny заставляет модель вызывать по меньшей мере один инструмент, что означает постоянную активацию веб-поиска — единственного настроенного инструмента. Кроме того, с помощью IncludedProperties = { "web_search_call.action.sources" } мы можем получить использованные источники.
• Выполняется вызов API провайдера для получения ответа от выбранной модели ИИ.

После подготовки вышеуказанного кода пришло время протестировать приложение. Для этого примера предположим, что кто-то планирует посетить Нью-Йорк на финал Чемпионата мира по футболу FIFA 2026 и хочет изучить мероприятия и активности, связанные с турниром, около дат проведения финала:

На изображении выше вы можете видеть, как пользователь должен взаимодействовать со стандартными веб-элементами управления, что позволяет настроить поиск простым и интуитивно понятным способом.

С другой стороны, при запуске поиска за кулисами была получена свежая и актуальная информация для создания идеального маршрута для выбранных опций.

Аналогично можно увидеть серию ссылок, которые помогли модели ИИ предложить отличный маршрут на основе описанных дат и события.

Заключение

В этой статье вы увидели, как создать приложение Blazor с ориентацией на ИИ без использования промптов от начала и до конца. Мы рассмотрели некоторые компоненты Telerik, которые могут помочь вам создавать графические интерфейсы для приложений такого типа.

Кроме того, вы узнали, как преобразовывать значения компонентов в промпт для отправки модели ИИ. Наконец, вы узнали, как использование инструментов может помочь вам предоставлять пользователям лучшие результаты в зависимости от их потребностей. Теперь ваша очередь реализовать такие решения в своих приложениях, чтобы максимально эффективно использовать ИИ и элементы управления Telerik UI for Blazor.

Если вы новичок в Telerik UI for Blazor, вы можете получить доступ к полной библиотеке, содержащей более 120 компонентов, для бесплатного тестирования.

Попробовать сейчас