- ? На основе лучших практик продуктов искусственного интеллекта корпоративного уровня.: создан на основе парадигмы взаимодействия 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

.jpg)












