Ant Design X: un conjunto de herramientas para construir rápidamente interfaces de chat de IA con soporte para la integración de modelos y la gestión del flujo de datos.

Introducción general

Ant Design X es un conjunto de herramientas de código abierto de Ant Group, diseñado para ayudar a los desarrolladores a crear rápidamente interfaces de diálogo basadas en IA. Proporciona un amplio conjunto de componentes y plantillas, admite la integración de modelos compatibles con los estándares OpenAI y es adecuado para una gran variedad de escenarios de aplicación, como el servicio de atención al cliente inteligente y los asistentes de IA. Con Ant Design X, los desarrolladores pueden crear fácilmente interfaces de interacción de IA personalizadas y mejorar la eficiencia del desarrollo.

Dirección de demostración: https://x.ant.design/docs/playground/independent-cn

Lista de funciones

• Componentes atómicos flexibles y diversosLa interfaz de IA está diseñada para cubrir la mayoría de los escenarios de diálogo de IA, lo que ayuda a crear rápidamente interacciones de IA personalizadas.
• Integración inmediata de modelosConéctate fácilmente a servicios de inferencia compatibles con OpenAI.
• Gestión eficaz del flujo de datos: Proporciona potentes herramientas para gestionar el flujo de datos y mejorar la eficacia del desarrollo.
• Amplia compatibilidad de plantillas: Proporciona una variedad de plantillas para poner en marcha el desarrollo de aplicaciones LUI.
• Compatibilidad total con TypeScript: Garantizar la cobertura de tipos para mejorar la experiencia de desarrollo y la fiabilidad.
• Personalización avanzada de temas: Admite un ajuste de estilo preciso para satisfacer diversos escenarios de uso y necesidades personalizadas.

Utilizar la ayuda

montaje

Ant Design X puede instalarse utilizando npm, yarn o pnpm:

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

Presentación de la

Añade etiquetas de script y enlaces al navegador y utiliza variables globales. antdHemos proporcionado esto en el directorio dist del paquete npm. Hemos proporcionado el antdx.jsyantdx.min.js responder cantando antdx.min.js.map.

Uso de componentes atómicos

Basándonos en el paradigma de interacción RICH, proporcionamos una serie de componentes atómicos para ayudar a construir de forma flexible aplicaciones de diálogo de IA:

• Componente universal: por ejemplo, Burbuja, Conversaciones
• componente despertador: por ejemplo, Welcome, Prompts.
• componente de presentación: por ejemplo, Remitente, Adjunto, Sugerencia.
• Componente de confirmación: por ejemplo, ThoughtChain

A continuación se muestra un ejemplo de creación de una sencilla interfaz de chat utilizando el componente 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;

Servicio de razonamiento de modelos conectados

utilizar useXAgent que facilita la conexión con servicios de inferencia de modelos compatibles con OpenAI. A continuación se explica cómo utilizar useXAgent Ejemplos de:

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;

Gestión eficaz del flujo de datos

utilizar useXChat Herramientas de tiempo de ejecución que facilitan la gestión del flujo de datos en las aplicaciones de diálogo de IA:

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;

Uso de antd modulares

@ant-design/x El balanceo del árbol de módulos ES es compatible por defecto.

Compatibilidad con TypeScript

@ant-design/x Proporciona definiciones incorporadas de TypeScript.

Implementaciones no React

Siéntase libre de contribuir con implementaciones que no sean React.