Introdução geral
O Ant Design X é um kit de ferramentas de código aberto do Ant Group, projetado para ajudar os desenvolvedores a criar rapidamente interfaces de diálogo orientadas por IA. Ele oferece um rico conjunto de componentes e modelos, suporta a integração de modelos compatível com os padrões OpenAI e é adequado para uma variedade de cenários de aplicativos, como atendimento ao cliente inteligente e assistentes de IA. Com o Ant Design X, os desenvolvedores podem criar facilmente interfaces de interação de IA personalizadas e aumentar a eficiência do desenvolvimento.
Endereço de demonstração: https://x.ant.design/docs/playground/independent-cn
Lista de funções
- Componentes atômicos flexíveis e diversificadosA interface de IA foi projetada para cobrir a maioria dos cenários de diálogo de IA, ajudando a criar rapidamente interações de IA personalizadas.
- Integração de modelos prontos para usoConexão fácil com serviços de inferência compatíveis com OpenAI.
- Gerenciamento eficiente do fluxo de dadosFornecer ferramentas avançadas para gerenciar o fluxo de dados e aumentar a eficiência do desenvolvimento.
- Suporte avançado a modelosLUI: fornece uma variedade de modelos para iniciar o desenvolvimento de aplicativos LUI.
- Suporte completo a TypeScriptCobertura de tipos: garanta a cobertura de tipos para melhorar a experiência e a confiabilidade do desenvolvimento.
- Personalização avançada do temaSuporte ao ajuste fino de estilo para atender a diversos cenários de uso e necessidades personalizadas.
Usando a Ajuda
montagem
O Ant Design X pode ser instalado usando npm, yarn ou pnpm:
npm install @ant-design/x --save
yarn add @ant-design/x
pnpm add @ant-design/x
Apresentando o
Adicione tags de script e de link ao navegador e use variáveis globais. antdFornecemos isso no diretório dist do pacote npm. Fornecemos o arquivo antdx.jseantdx.min.js responder cantando antdx.min.js.map.
Uso de componentes atômicos
Com base no paradigma de interação RICH, fornecemos vários componentes atômicos para ajudar a criar aplicativos de diálogo de IA de forma flexível:
- Componente universal: por exemplo, Bubble, Conversations
- componente de chamada de despertar: por exemplo, Welcome, Prompts.
- componente de apresentação: por exemplo, remetente, anexo, sugestão.
- Componente de confirmação: por exemplo, ThoughtChain
A seguir, um exemplo de criação de uma interface de bate-papo simples usando o componente Atom:
importação Reagir de 'react';
import { Bubble, Sender } from '@ant-design/x';
const messages = [{ content: 'Hello, Ant Design X!', role: 'user' }];
const App = () => (
);
export default App.
Serviço de raciocínio de modelo conectado
fazer uso de useXAgent ferramenta de tempo de execução que facilita a conexão com serviços de inferência de modelos compatíveis com OpenAI. Veja como usar a ferramenta useXAgent Exemplos de:
importar React de '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, {
stream: true, }); function chatRequest(text) { agent.request({ messages: [{ content: text, role: 'user' }], stream: true, }
});
}
return ;;
}; }
export default App.
Gerenciamento eficiente do fluxo de dados
fazer uso de useXChat Ferramentas de tempo de execução que facilitam o gerenciamento do fluxo de dados em aplicativos de diálogo de IA:
importar React de 'react';
importar { useXChat, useXAgent } de '@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.
Usando o antd modular
@ant-design/x O balanço da árvore do módulo ES é suportado por padrão.
Suporte a TypeScript
@ant-design/x Fornece definições incorporadas do TypeScript.
Implementações sem reação
Sinta-se à vontade para contribuir com implementações que não sejam do React!
