В современном мире взаимодействие с компьютерами и приложениями становится все более естественным и удобным благодаря использованию разговорных интерфейсов и искусственного интеллекта. Однако, интеграция такого функционала в веб-приложения может стать вызовом для разработчиков. В этом контексте библиотека NLUX (Natural Language User Experience) приходит на помощь, предоставляя инструменты для создания разговорных пользовательских интерфейсов в приложениях на ReactJS.
В этой статье мы рассмотрим основные возможности и преимущества NLUX, а также рассмотрим примеры использования и интеграции данной библиотеки в разработку веб-приложений.
Начнем(:
Что это такое?
NLUX(for Natural Language User Experience) революционизирует интеграцию разговорного искусственного интеллекта в приложения на ReactJS. Представляя собой двойное предложение, то есть не только компоненты/хуки React, но и автономную библиотеку для JavaScript, библиотека NLUX разработана для внедрения функциональности чат-ботов, управляемых искусственным интеллектом, в веб-приложения. Она выделяется своей легкостью интеграции и способностью обеспечивать пользователям интеллектуальные взаимодействия на естественном языке, что делает ее мощным инструментом для улучшения вовлеченности и удовлетворенности пользователей. Библиотека также позволяет нам настраивать личность бота, используя естественные языковые подсказки.
NLUX стремится позволить нам быстро создавать интерактивные разговорные интерфейсы, обрабатывая все сложности за кулисами. Мы можем подключить его к бэкам ИИ LLM, однако с предварительно построенными адаптерами от OpenAI, LangChain LangServe и Huggin Face. Также можно создать специальные адаптеры для потоковой передачи данных или промисов для подключения к другим LLM или API.
"Предположим, у большой компании нет необходимости использовать общедоступную большую языковую модель OpenAI, но они хотят использовать пользовательскую модель, размещенную на их собственных серверах", - сказал создатель NLUX Салмен Хичри. "Они могут на самом деле создать и настроить свои собственные модели, но все еще могут использовать NLUX для подключения к этим моделям. Они должны создать специальный адаптер для своей собственной модели и API."
Адаптеры
Предлагаю поговорить подробнее об адаптерах. Начнем, пожалуй, с OpenAI.
Что нам предлагают?
Создавать интерфейс, подобный ChatGPT, для интеграции в нашем приложении.
Настраивать ответы модели под нашу ситуацию, используя системные сообщения, пользовательские запросы и другие функции.
Передавать пользователю потоковые беседы в реальном времени по мере их создания моделью.
Также рассмотрим возможности Huggin Face. Что мы можем?
Встраивать собственную разговорную модель искусственного интеллекта на платформе Hugging Face и использовать ее с NLUX.
Использовать любую из более чем 2000 предварительно обученных разговорных моделей с платформы Hugging Face с NLUX.
Настроить ответы модели в соответствии с нашими потребностями, включая системные сообщения, пользовательские запросы и другие возможности.
Предоставлять пользователям потоковые беседы в реальном времени по мере их генерации моделью.
А что по адаптеру NLUX LangServe?
Предлагает возможность отправки запросов пользователей к API LangServe через конечные точки /invoke или /stream.
Обрабатывает ответы API и отображает их в пользовательском интерфейсе чата с искусственным интеллектом, представляя как отдельные ответы, так и потоковый текст.
Предоставляет разработчикам способ настройки данных, которые отправляются и получаются от API LangServe.
Проанализирует схему ввода API LangServe и попытается сформировать запрос в соответствии с ней.
Установим?
Прежде всего начнем с добавления библиотеки в наше приложение ReactJS, чтобы добавить разговорные возможности NLUX:
npm install @nlux/react @nlux/openai-react
А еще NLUX по умолчанию идет с таблицей стилей CSS, которую мы сможем использовать для стилизации UI.
Например, можем использовать JSX Bundler, при импорте таблицы в файл JSX-компонента:
npm install @nlux/themes
Далее нам необходимо импортировать хук useAdapter для создания адаптера для API OpenAI и интегрировать компонент AiChat, чтобы включить полностью функциональный интерфейс чата в наше приложение. Эта интеграция не только повышает наш UX, но и помещает наше приложение на передовую позицию в инновациях разговорного искусственного интеллекта.
import {AiChat} from '@nlux/react';
import {useAdapter} from '@nlux/openai-react';
И сразу здесь импортируем дефолтную тему nova.css:
import '@nlux/themes/nova.css';
Кстати, раз мы сейчас импортируем библиотеку, то поделюсь и альтернативным способом, как мы можем импортировать стили CSS, а именно в наш HTML:
<link rel="stylesheet" href="https://themes.nlux.ai/v0.8.4/nova.css" />
Далее нам необходим OpenAI API Key, мы его уже получали в этой статье, поэтому не будем останавливаться и сразу создадим OpenAI Adapter, используя useAdapter, который принимает несколько параметров:
Первый – имя адаптера, мы, например, используем OpenAI GPT openai/gpt.
Второй – наши параметры адаптера, например, мы передаем OpenAI API Key и какое-то начальное системное сообщение, которое пользователь не увидит.
const adapterConfig = {
apiKey: 'НАШ_КЛЮЧ',
systemMessage: 'Какое-то системное сообщение, которое скажет как вести себя нашему боту. '
};
export const App = () => {
const chatGptAdapter = useAdapter(adapterConfig);
}
Теперь мы можем создать компонент чата и передать ему адаптер:
export const App = () => {
const chatGptAdapter = useAdapter(adapterConfig);
return (
<AiChat
adapter={chatGptAdapter}
promptBoxOptions={{
placeholder: 'Чем могу помочь?'
}}
/>
);
};
Немного про AiChat. Этот компонент может принимать несколько параметров:
adapter – созданный нами ранее адаптер(обязательный параметр).
Второй – наши опции для поля запроса.
Для использования ChatGPT:
import {useUnsafeAdapter} from '@nlux/openai-react';
const Component = () => {
const adapter = useUnsafeAdapter({
[option name]: <option value>,
});
}
Личность у бота
Мы только что обращались к AiChat. Как раз с помощью передачи свойств в этот компонент мы можем определить личность бота! Нам необходимо передать свойство personaOptions в компонент AiChat. Передаваемое свойство, является объектом с двумя свойствами bot и user. Для работы с ботом, мы работаем с первым свойством:
<AiChat
adapter={adapter}
personaOptions={{
bot: {
name: 'Имя бота',
picture: 'https://ссылка-на-изображение.jpg',
tagline: 'Буковки приветствующие',
},
}}
/>
Работаем мы со следующим интерфейсом:
interface BotPersona {
name: string;
picture: string | JSX.Element;
tagline?: string;
}
Важно уточнить, что изображение может быть представлено как JSX, например, для SVG. Если мы укажем неправильный URL для изображения, при запуске мы увидим первую букву ссылки, за счет того, что передавали значение строки.
Подведем итоги
NLUX представляет собой мощный инструмент для разработчиков, стремящихся интегрировать ИИ в свои веб-приложения. Благодаря своей легкости использования и гибкости настройки, NLUX позволяет создавать интерактивные и привлекательные разговорные интерфейсы, улучшая взаимодействие с пользователями.
Основные преимущества NLUX включают возможность интеграции с различными источниками искусственного интеллекта, поддержку персонализации ботов и гибкость в настройке UX. Благодаря этим возможностям, разработчики могут быстро создавать высококачественные разговорные интерфейсы, отвечающие потребностям и ожиданиям пользователей.
Учитывая популярность React, такая библиотека точно должна появиться в арсенале разработчика для работы с веб-приложениями.
Я считаю, что NLUX имеет потенциал стать ключевым элементом в будущем развитии веб-технологий, поскольку он позволяет создавать более удобные и доступные интерфейсы для пользователей, что является важным фактором в современном мире цифровых технологий.
Спасибо за прочтение!
Будем рады услышать ваше мнение(:
