Ant Design X : une boîte à outils pour la construction rapide d'interfaces de chat IA avec un support pour l'intégration de modèles et la gestion de flux de données.

Introduction générale

Ant Design X est une boîte à outils ouverte à tous par Ant Group, conçue pour aider les développeurs à créer rapidement des interfaces de dialogue pilotées par l'IA. Il fournit un ensemble riche de composants et de modèles, prend en charge l'intégration de modèles compatibles avec les normes OpenAI et convient à une variété de scénarios d'application tels que le service client intelligent et les assistants d'IA. Avec Ant Design X, les développeurs peuvent facilement créer des interfaces d'interaction personnalisées et améliorer l'efficacité de leur développement.

Adresse de démonstration : https://x.ant.design/docs/playground/independent-cn

Liste des fonctions

• Composants atomiques souples et diversifiésL'interface d'IA est conçue pour couvrir la plupart des scénarios de dialogue d'IA, ce qui permet de créer rapidement des interactions d'IA personnalisées.
• Intégration de modèles prêts à l'emploiLes services d'inférence : se connecter facilement aux services d'inférence conformes à l'OpenAI.
• Gestion efficace des flux de donnéesLes outils de gestion du flux de données et d'amélioration de l'efficacité du développement sont très puissants.
• Prise en charge d'un grand nombre de modèlesLUI : Fournit une variété de modèles pour démarrer le développement d'applications LUI.
• Prise en charge complète de TypeScriptLes objectifs sont les suivants : assurer la couverture des types pour améliorer l'expérience de développement et la fiabilité.
• Personnalisation avancée du thèmeLe système de gestion de l'information de l'Union européenne (UE) : il permet d'adapter finement le style à divers scénarios d'utilisation et à des besoins personnalisés.

Utiliser l'aide

montage

Ant Design X peut être installé en utilisant npm, yarn ou pnpm :

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

Présentation de la

Ajouter des balises de script et de lien au navigateur et utiliser des variables globales. antdNous l'avons fourni dans le répertoire dist du paquet npm. Nous avons fourni le fichier antdx.js,antdx.min.js répondre en chantant antdx.min.js.map.

Utilisation de composants atomiques

Basé sur le paradigme d'interaction RICH, nous fournissons un certain nombre de composants atomiques pour aider à construire de manière flexible des applications de dialogue IA :

• Composant universel: e.g. Bubble, Conversations
• Composant de réveil: e.g. Welcome, Prompts.
• élément de présentation: par exemple, l'expéditeur, la pièce jointe, la suggestion.
• Composante de confirmation: par exemple, ThoughtChain

Voici un exemple de création d'une interface de chat simple à l'aide du composant 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;

Service de raisonnement par modèle connecté

utiliser useXAgent qui facilite la connexion aux services d'inférence de modèles conformes à OpenAI. Voici comment utiliser l'outil d'exécution useXAgent Exemples 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;

Gestion efficace des flux de données

utiliser useXChat Des outils d'exécution qui facilitent la gestion du flux de données dans les applications de dialogue d'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;

Utilisation de l'antd modulaire

@ant-design/x L'arborescence des modules ES est prise en charge par défaut.

Support TypeScript

@ant-design/x Fournit des définitions TypeScript intégrées.

Mises en œuvre sans réaction

N'hésitez pas à contribuer à la mise en œuvre de solutions autres que React !