- ? На основе лучших практик продуктов искусственного интеллекта корпоративного уровня.: создан на основе парадигмы взаимодействия RICH, обеспечивающей исключительные возможности взаимодействия с искусственным интеллектом.
- ? Гибкие и разнообразные атомные компоненты: охватывает большинство сценариев диалога с искусственным интеллектом, позволяя вам быстро создавать персонализированные интерфейсы взаимодействия с искусственным интеллектом.
- ⚡ Готовая интеграция модели: Легкое подключение к сервисам вывода, совместимым со стандартами OpenAI.
- ? Эффективное управление потоками данных разговора: Предоставляет мощные инструменты для управления потоками данных, повышая эффективность разработки.
- ? Богатая поддержка шаблонов: предлагает несколько шаблонов для быстрого начала разработки приложений LUI.
- ? Полная поддержка TypeScript: разработан с использованием TypeScript, обеспечивающего надежное покрытие типов для улучшения опыта и надежности разработки.
- ? Расширенная настройка темы: поддерживает тонкую настройку стиля для удовлетворения разнообразных вариантов использования и потребностей персонализации.
npm install @ant-design/x --save
?️ Импорт в браузере
Добавлять script
и link
теги в вашем браузере и используйте глобальную переменную antd
.
Мы предоставляем antdx.js
, antdx.min.js
и antdx.min.js.map
в dist
каталог пакета npm.
Основываясь на парадигме взаимодействия RICH, мы предоставляем многочисленные атомарные компоненты для различных этапов взаимодействия, которые помогут вам гибко создавать диалоговые приложения ИИ:
- Общий:
Bubble
— Пузырь сообщений,Conversations
— Управление разговорами - Проснуться:
Welcome
— Приветственные сообщения,Prompts
— Наборы подсказок - Выражение:
Sender
— Поле ввода,Attachment
— Вложения,Suggestion
— Быстрые команды - Подтверждение:
ThoughtChain
— Мыслительные цепочки
Ниже приведен пример использования атомарных компонентов для создания простого интерфейса чат-бота:
import React from 'react';
import {
// Message bubble
Bubble,
// Input box
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({
// Model inference service URL
baseURL: 'https://your.api.host',
// Model name
model: 'gpt-3.5',
});
function chatRequest(text: string) {
agent.request({
// Message
messages: [
{
content: text,
role: 'user',
},
],
// Enable streaming
stream: true,
});
}
return Sender onSubmit={chatRequest} />;
};
export default App;
Используя useXChat
инструмент времени выполнения, вы можете легко управлять потоками данных в диалоговых приложениях AI:
import React from 'react';
import { useXChat, useXAgent } from '@ant-design/x';
const App = () => {
const [agent] = useXAgent({
// Model inference service URL
baseURL: 'https://your.api.host',
// Model name
model: 'gpt-3.5',
});
const {
// Initiate a chat request
onRequest,
// Message list
messages,
} = useXChat({ agent });
return (
div>
Bubble.List items={messages} />
Sender onSubmit={onRequest} />
/div>
);
};
export default App;
@ant-design/x
по умолчанию поддерживает встряхивание дерева модулей ES.
@ant-design/x
предоставляет встроенное определение ts.
Добро пожаловать, чтобы внести свой вклад!
Ant Design X широко используется в пользовательских интерфейсах на основе искусственного интеллекта в Ant Group. Если ваша компания и продукты используют Ant Design X, оставьте комментарий здесь.
Пожалуйста, сначала прочтите наш CONTRIBUTING.md.
Если вы хотите помочь нам улучшить antd, просто создайте запрос на включение. Не стесняйтесь сообщать об ошибках и проблемах здесь.
Если вы новичок в публикации вопросов, мы просим вас прочитать Как задавать вопросы разумно и как задать вопрос в сообществе открытого исходного кода и Как эффективно сообщать об ошибках перед публикацией. Хорошо написанные отчеты об ошибках помогут нам помочь вам!
Если у вас возникнут какие-либо проблемы при использовании Ant Design X, вы можете обратиться за помощью по следующим каналам. Мы также призываем опытных пользователей помогать новичкам через эти платформы.
Задавая вопросы в обсуждениях GitHub, рекомендуется использовать Q&A
ярлык.
- Обсуждения на GitHub
- Проблемы с GitHub