Série de chiffon sémantique Partie 5: Intégration de chat

Ceci est le dernier blog de notre série en cinq parties sur le chiffon sémantique, dans lequel nous vous montrons comment intégrer un chatbot dans le flux et le connecter à un service LLM. Assurez-vous de consulter les blogs précédents sur:
Améliorer les gènes,
Le graphique de connaissances,
Préparation de contenuet
Orchestration de requête.

La dernière étape de notre flux de travail de chiffon sémantique consiste à construire le frontend qui gérera l’interaction avec l’utilisateur final. Dans ce blog, nous explorons comment créer une application de recherche avec un chatbot intégré AI qui enverra la requête utilisateur à la
Progresser Marklogicbase de données et renvoyer la réponse textuelle avec des citations liées que nous avons préparées
le précédentétape.

La visualisation et la gestion des conversations entre un utilisateur et un modèle de langue large (LLM) est un élément essentiel d’une application de chiffon sémantique. Nous allons utiliser
Progress Marklogic FastTrackPour construire l’interface utilisateur. FastTrack est une bibliothèque de composants d’interface utilisateur React comme Bootstrap et UI de matériau. Ce qui est spécial dans les composants FastTrack, c’est qu’ils fonctionnent parfaitement avec des données stockées dans
Progrès du serveur MarkLogic. FastTrack expose les API du serveur hors de la boîte afin que les développeurs puissent créer des applications beaucoup plus rapidement.

Pour cet exemple, nous allons utiliser le
FastTrack ChatbotComposant pour construire notre interface utilisateur conversationnelle pour gérer les conversations en cours avec un LLM.

Le composant affiche une console interactive pour les utilisateurs pour s’engager directement avec un LLM. Il accepte les requêtes en langage naturel, transmet ces requêtes au backend et affiche chaque requête, réponse et informations de source associées dans un conteneur défilement.

Hors de la boîte, le widget chatbot gère les interactions de chat à l’aide d’une API de point de terminaison prescrite. Si vous concevez votre serveur de niveau intermédiaire pour adhérer à cette API, vous pouvez implémenter une interface de chat avec une configuration zéro.

Vous pouvez également configurer le chatbot pour communiquer avec n’importe quel point de terminaison HTTP que vous souhaitez, envoyer n’importe quelle charge utile de requête à ce point de terminaison et afficher des réponses transformées et formatées à votre goût en tant que fil de message en cours. Cela fait du chatbot FastTrack un moyen facile et flexible de gérer les conversations basées sur l’IA.

Envoi de demandes avec MarkLogicContext

Les widgets d’interface utilisateur FastTrack ne communiquent pas directement avec le serveur de niveau intermédiaire de votre application. Ils communiquent à travers des méthodes rendues disponibles par un widget spécial appelé
Marklogiccontext. MarkLogicContext est responsable de la transformation des demandes d’utilisateurs en charges utiles que le serveur de niveau intermédiaire acceptera, et l’envoi des charges utiles via HTTP à l’aide des paramètres de connexion définis pour l’application (FastTrack utilise le
Axiosbibliothèque pour exécuter les appels HTTP). MarkLogicContext est également chargé de maintenir l’état d’application, tels que les valeurs de réponse les plus récentes et les contraintes de recherche.

Le diagramme suivant affiche les widgets et le code d’application envoyant des messages via MarkLogicContext au serveur de niveau intermédiaire, qui communique avec le serveur MarkLogic et, dans une application AI, un LLM.

Le widget FastTrack Chatbot peut utiliser le
postChatMéthode exposée par MarkLogicContext pour communiquer avec la plomberie de chat dans le backend. Le
postChatLa méthode reçoit la requête de chaîne du champ de saisie du chatbot ainsi que tous les arguments facultatifs pour personnaliser la demande.

Vous trouverez ci-dessous un exemple de demande envoyé par la méthode post-chat.

POST http://example.org:4000/api/fasttrack/chat

{  
  "query": "Is COVID a danger for pregnant women?",  
  "combinedQuery": {    
    "query":   // structured query    
    "qtext":   // query text    
    "options": // query options 
  }
}

Dans une application RAG, le serveur de niveau intermédiaire peut utiliser le texte de requête et la requête combinée pour requête MarkLogic Server. Les informations sur le document qu’il reçoivent peuvent être transmises au LLM pour augmenter le texte de la requête d’origine.

Recevoir une réponse du LLM

Le widget Chatbot prévoit de récupérer une réponse du backend en tant que schéma spécifique. Voici un exemple d’une telle réponse:

{   
  "output": "Yes, COVID-19 poses a danger to pregnant women. The study on COVID-19 
  reinfection in pregnancy indicates that pregnant women have a higher risk of 
  severe disease during reinfection compared to non-pregnant women.",  
  "citations": [    
      {      
        "citationLabel": "A Nationwide Study of COVID-19 Infection.",      
        "citationId": "/content/39733771.xml”    
      },    
      {      
        "citationLabel": "COVID-19 reinfection in pregnancy",      
        "citationId": "/content/39733828.xml”    
      }  
    ]
}

La charge utile comprend une chaîne de sortie qui est la réponse améliorée par le ragau du LLM. La charge utile de réponse peut également inclure un tableau facultatif de citations sous forme de paires d’étiquettes / ID, qui représentent les informations de document qui ont pris en charge la réponse. Le widget offre un
responseTransformProp qui vous permet de modifier cette structure ou le contenu avant l’affichage.

Chatbot avec une configuration minimale

Si vous avez conçu un serveur de niveau intermédiaire qui peut accepter la demande et la réponse du chatbot natives, le chatbot FastTrack a besoin de configuration zéro. Il vous suffit d’inclure le widget dans votre interface utilisateur. Ce qui suit montre le code de réact qui intègre le widget de chatbot:

import { ChatBot } from "ml-fasttrack";
import './ChatBotAssistant.css';
 
export const ChatBotAssistant = () => {
  return (
    <ChatBot />
  )
}

Les éléments suivants sont rendus dans l’interface utilisateur.

Le chatbot affiche les questions de l’utilisateur, les réponses backend correspondantes et les informations source pour chaque réponse.

Personnalisation de l’interface utilisateur du chatbot

La configuration via React Props propose un moyen à faible code de personnalisation de l’interface utilisateur du chatbot. Vous pouvez ajouter des accessoires pour inclure la messagerie initiale, afficher les icônes utilisateur et les horodatages formatés et afficher un bouton de réinitialisation pour effacer les messages.

Les accessoires suivants sont disponibles pour personnaliser l’apparence, la sensation et le contenu par défaut affiché dans le widget.

Voir le
Documentation du chatbotPour une liste complète des accessoires de widgets.

Ce qui suit montre le chatbot avec des configurations d’interface utilisateur en place:

import { useState } from "react";
import { ChatBot } from "ml-fasttrack";
import './ChatBotAssistant.css';

export const ChatBotAssistant = (props) => {

  const bot = {
    id: 0,
    name: "Research Assistant",
    avatarUrl: "/chatbot.png"
  }

  const user = {
    id: 1,
    name: "Me",
    avatarUrl: "/user.png" 
  }

  const initialMessages = [
    {
      author: bot,
      timestamp: new Date(),
      text: "Hello, ask me your research questions.",
    }
  ];

  const [messages, setMessages] = useState(initialMessages);

  return (
      <ChatBot
        bot={bot}
        user={user}
        messages={messages}
        placeholder="Type a question"
        sourceTruncation={300}
        showRestart={true}
      />
  )
}

Il rend le chatbot avec des icônes personnalisées, un message d’introduction personnalisé, des horodatages formatés, des sources tronquées et un bouton de réinitialisation.

Gestion de demande et de réponse personnalisées

Dans le cas où votre API de niveau intermédiaire diffère de ce que le chatbot FastTrack attend, vous avez la possibilité de gérer l’envoi de messages au backend et d’afficher le contenu de réponse vous-même. Le
onMessageSend propPrend un rappel qui reçoit la requête utilisateur dans un objet d’événement. Vous pouvez envoyer cette requête utilisateur à n’importe quel point de terminaison que vous aimez avec le rappel.

Pour inclure le message de réponse dans la conversation, vous pouvez définir le
customBotResponse propà vrai et ajoutez la réponse de chiffon au tableau des messages vous-même. Toute transformation du contenu et du formatage dépend de vous.

Le
onSourceClick propVous permet de gérer les clics de citation. Vous pouvez afficher le contenu source dans une fenêtre ou une autre méthode d’affichage.

Voici les accessoires pour la gestion personnalisée des messages de chat.

Voir le
Documentation du chatbotPour une liste complète des accessoires de widgets.

Vous trouverez ci-dessous un exemple de code de réaction qui effectue une gestion personnalisée des messages de chat. Il utilise
onMessageSendPour exécuter le
postChatMéthode pour envoyer des requêtes au backend de chiffon par défaut (mais il pourrait tout aussi bien appeler n’importe quel point de terminaison personnalisé). Il transforme et formate également la réponse LLM et comprend un rappel pour gérer les clics source.

import { useState, useContext } from "react";
import { ChatBot, MarkLogicContext } from "ml-fasttrack";
import axios from 'axios';
import './ChatBotAssistant.css';

export const ChatBotAssistant = (props) => {

  // See previous... 
  
  const context = useContext(MarkLogicContext);

  const handleRestart = async () => {
    try {
      await axios.get(import.meta.env.VITE_CLEAR_URL)
        .then(res => {
          if (res.status === 200) {
            console.log('ChatBot restarted');
          }
        })
    } catch (err) {
      console.error(err);
    }
  };

  const formatResponse =  (response) => {
    console.log('formatResponse', response);
    return (
      <div>
        <p>{response.output.replace(/ *\[[^)]*\] */g, "")
            .concat(" (Powered by FastTrack)")}</p>
        <ul>
          {response.citations.map((citation, index) => (
            <li 
              key={index} 
              onClick={() => props.onSourceClick(event, citation.citationId)}
              className="source-link"
            >
              {index + 1}. {citation.citationLabel}
            </li>
          ))}
        </ul>
      </div>
    )
  };

  const addNewMessage = async (event) => {
    const latestUserMessage = event.message;
    // Add user message and then show loading indicator
    setMessages((oldMessages) => [...oldMessages, event.message]);
    setMessages((oldMessages) => [...oldMessages,
      {
        author: bot,
        typing: true,
      }
    ]);
    await context.postChat(latestUserMessage.text)
    .then((response) => {
      setMessages((oldMessages) => [...oldMessages,
        {
          author: bot,
          timestamp: new Date(),
          text: formatResponse(response),
        }
      ]
    )});
  };

  return (
      <ChatBot
        bot={bot}
        user={user}
        messages={messages}
        placeholder="Type a question"
        sourceTruncation={300}
        showRestart={true}
        onMessageSend={addNewMessage}
        onSourceClick={(event, sourceId) => props.onSourceClick(event, sourceId)}
        onRestart={handleRestart}
        customBotResponse={true}
      />
  )
}

Conclusion

Avec le widget FastTrack Chatbot, les développeurs peuvent facilement intégrer des conversations alimentées par AI dans leurs applications de chiffon. Les accessoires React disponibles vous permettent de personnaliser le widget pour les cas d’utilisation d’IA courants et de vous permettre d’interagir avec le LLM de votre choix. Visiter le
Marklogic FastTrackpage pour plus d’informations.

Regardez la démo complète