Ant Design X: набор инструментов для быстрого создания чат-интерфейсов ИИ с поддержкой интеграции моделей и управления потоками данных.

Последние ресурсы по искусственному интеллектуОбновлено 9 месяцев назад Круг обмена ИИ

9.2K 00

Общее введение

Ant Design X - это инструментарий с открытым исходным кодом от Ant Group, призванный помочь разработчикам быстро создавать диалоговые интерфейсы, управляемые искусственным интеллектом. Он предоставляет богатый набор компонентов и шаблонов, поддерживает интеграцию моделей, совместимую со стандартами OpenAI, и подходит для различных сценариев применения, таких как интеллектуальное обслуживание клиентов и ИИ-помощники. С помощью Ant Design X разработчики могут легко создавать персонализированные интерфейсы взаимодействия с искусственным интеллектом и повышать эффективность разработки.

Ant Design X：快速构建AI聊天界面的工具包，支持模型集成和数据流管理。

Адрес для демонстрации: https://x.ant.design/docs/playground/independent-cn

Список функций

Гибкие и разнообразные атомные компонентыИнтерфейс ИИ разработан таким образом, чтобы охватить большинство сценариев диалога ИИ, помогая быстро построить персонализированное взаимодействие ИИ.
Интеграция готовых моделей: Простое подключение к совместимым с OpenAI сервисам вывода.
Эффективное управление потоками данных: Предоставьте мощные инструменты для управления потоком данных и повышения эффективности разработки.
Богатая поддержка шаблонов: Предоставляет разнообразные шаблоны для запуска разработки приложений LUI.
Полная поддержка TypeScript: Обеспечение покрытия типов для повышения удобства разработки и надежности.
Расширенная настройка темы: Поддерживает тонкую настройку стиля для удовлетворения различных сценариев использования и индивидуальных потребностей.

Использование помощи

монтаж

Ant Design X можно установить с помощью npm, yarn или pnpm:

npm install @ant-design/x --save
yarn add @ant-design/x
pnpm add @ant-design/x

Представляем

Добавляйте в браузер теги сценариев и ссылок и используйте глобальные переменные. antdМы поместили его в каталог dist пакета npm. Мы предоставили antdx.js, иantdx.min.js ответить пением antdx.min.js.map.

Использование атомарных компонентов

Основываясь на парадигме взаимодействия RICH, мы предлагаем ряд атомарных компонентов для гибкого построения диалоговых приложений ИИ:

Универсальный компонент: например, "Пузырь", "Разговоры".
компонент пробуждения: например, "Добро пожаловать", "Подсказки".
презентационный компонент: например, отправитель, вложение, предложение.
Компонент подтверждения: например, ThoughtChain

Ниже приведен пример создания простого интерфейса чата с помощью компонента Atom:

import React from 'react';
import { Bubble, Sender } from '@ant-design/x';
const messages = [{ content: 'Hello, Ant Design X!', role: 'user' }];
const App = () => (
<div>
<Bubble.List items={messages} />
<Sender />
</div>
);
export default App;

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

пользоваться useXAgent инструмент выполнения, который упрощает подключение к OpenAI-совместимым сервисам вывода моделей. Вот как использовать useXAgent Примеры:

import React from 'react';
import { useXAgent, Sender } from '@ant-design/x';
const App = () => {
const [agent] = useXAgent({
baseURL: 'https://your.api.host',
model: 'gpt-3.5',
});
function chatRequest(text) {
agent.request({
messages: [{ content: text, role: 'user' }],
stream: true,
});
}
return <Sender onSubmit={chatRequest} />;
};
export default App;

Эффективное управление потоком данных

пользоваться useXChat Средства выполнения, облегчающие управление потоком данных в диалоговых приложениях ИИ:

import React from 'react';
import { useXChat, useXAgent } from '@ant-design/x';
const App = () => {
const [agent] = useXAgent({
baseURL: 'https://your.api.host',
model: 'gpt-3.5',
});
const { onRequest, messages } = useXChat({ agent });
return (
<div>
<Bubble.List items={messages} />
<Sender onSubmit={onRequest} />
</div>
);
};
export default App;