Comment créer son propre site de ChatBot tel que ChatGPT grâce à Hugging Face et Vercel

Vercel AI SDK fournit un ensemble d'utilitaires pour faciliter l'utilisation de l'API de Hugging Face. Dans ce guide, nous allons voir comment utiliser les utilitaires pour créer un chat bot et une application de complétion de texte.

Guide : Chat Bot

Créer une application Next.js

Créez une application Next.js et installez ai et @huggingface/inference :

pnpm dlx create-next-app my-ai-app
cd my-ai-app
pnpm install ai @huggingface/inference

Ajoutez votre clé d'API Hugging Face à .env

Créez un fichier .env à la racine de votre projet et ajoutez votre clé API Hugging Face :

HUGGINGFACE_API_KEY=xxxxxxxxx

Créer un gestionnaire de routes

Créer un gestionnaire de route Next.js qui utilise le Runtime Edge et le modèle OpenAssistant/oasst-sft-4-pythia-12b-epoch-3.5 pour générer une réponse à une série de messages via l'API Hugging Face, et renvoie la réponse sous forme de texte en continu.

Pour cet exemple, nous allons créer un gestionnaire de route dans app/api/chat/route.ts qui accepte une requête POST avec un tableau de chaînes de caractères pour les messages :

app/api/chat/route.ts

import { HfInference } from '@huggingface/inference'
import { HuggingFaceStream, StreamingTextResponse } from 'ai'
 
// Create a new Hugging Face Inference instance
const Hf = new HfInference(process.env.HUGGINGFACE_API_KEY)
 
// IMPORTANT! Set the runtime to edge
export const runtime = 'edge'
 
// Build a prompt from the messages
// Note: this is specific to the OpenAssistant model we're using
// @see https://huggingface.co/OpenAssistant/oasst-sft-4-pythia-12b-epoch-3.5#prompting
function buildOpenAssistantPrompt(
  messages: { content: string; role: 'system' | 'user' | 'assistant' }[]
) {
  return (
    messages
      .map(({ content, role }) => {
        if (role === 'user') {
          return `<|prompter|>${content}<|endoftext|>`
        } else {
          return `<|assistant|>${content}<|endoftext|>`
        }
      })
      .join('') + '<|assistant|>'
  )
}
 
export async function POST(req: Request) {
  // Extract the `messages` from the body of the request
  const { messages } = await req.json()
 
  const response = Hf.textGenerationStream({
    model: 'OpenAssistant/oasst-sft-4-pythia-12b-epoch-3.5',
    inputs: buildOpenAssistantPrompt(messages),
    parameters: {
      max_new_tokens: 200,
      // @ts-ignore (this is a valid parameter specifically in OpenAssistant models)
      typical_p: 0.2,
      repetition_penalty: 1,
      truncate: 1000,
      return_full_text: false
    }
  })
 
  // Convert the response into a friendly text-stream
  const stream = HuggingFaceStream(response)
 
  // Respond with the stream
  return new StreamingTextResponse(stream)
}

Créer l'interface utilisateur

Créez un composant Client avec un formulaire que nous utiliserons pour recueillir le prompt de l'utilisateur et renvoyer l'achèvement à partir d'un flux. Par défaut, le crochet useChat utilisera le gestionnaire de route POST que nous avons créé plus haut (il utilise par défaut /api/chat). Vous pouvez surcharger ceci en passant un prop api à useChat({ api : '...'}).

app/page.tsx

'use client'
 
import { useChat } from 'ai/react'
 
export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat()
 
  return (
    <div className="mx-auto w-full max-w-md py-24 flex flex-col stretch">
      {messages.map(m => (
        <div key={m.id}>
          {m.role === 'user' ? 'User: ' : 'AI: '}
          {m.content}
        </div>
      ))}
 
      <form onSubmit={handleSubmit}>
        <label>
          Say something...
          <input
            className="fixed w-full max-w-md bottom-0 border border-gray-300 rounded mb-8 shadow-xl p-2"
            value={input}
            onChange={handleInputChange}
          />
        </label>
        <button type="submit">Send</button>
      </form>
    </div>
  )
}

Utiliser votre ChatBot

D'abord, assurez-vous que Node.js est installé sur votre machine. C'est nécessaire pour exécuter votre application Next.js. Vous pouvez le télécharger depuis le site officiel de Node.js.

En supposant que vous avez suivi le guide correctement, voici les étapes que vous devez suivre pour lancer votre application :

1. Ouvrez votre terminal ou invite de commande.
2. Accédez au répertoire où se trouve votre my-ai-app. Par exemple, s'il se trouve dans le répertoire Documents, vous utiliseriez la commande :

cd Documents/my-ai-app

N'oubliez pas de remplacer Documents/my-ai-app par le chemin correct vers votre application.

1. Une fois que vous êtes dans le bon répertoire, vous pouvez démarrer votre application Next.js en exécutant la commande suivante :

pnpm dev

Ou si vous avez utilisé npm au lieu de pnpm, utilisez :

npm run dev

1. Votre application devrait maintenant être en cours d'exécution. Ouvrez un navigateur web et allez à localhost:3000 (ou l'adresse indiquée dans votre terminal). Vous devriez voir votre application en cours d'exécution.
2. Si vous avez tout configuré correctement, votre chatbot devrait être fonctionnel sur votre page web. Vous pouvez le tester en envoyant un message à l'aide du champ de saisie de chat.

Pour mettre fin à l'exécution de votre application, retournez à votre terminal et interrompez le processus en appuyant sur les touches Ctrl+C.

Actuellement, votre application n'est accessible que localement sur votre ordinateur. Pour la rendre accessible à tous sur internet, vous pouvez opter pour l'hébergement de votre projet sur une plateforme comme Vercel.

Guide : Complétion de texte

Utiliser l'API de complétion

Comme dans l'exemple du Chat Bot ci-dessus, nous allons créer un gestionnaire de route Next.js qui génère une complétion de texte via la même API Hugging Face que nous allons ensuite renvoyer à notre Next.js. Il accepte une requête POST avec une chaîne de prompt :

app/api/completion/route.ts

import { HfInference } from '@huggingface/inference'
import { HuggingFaceStream, StreamingTextResponse } from 'ai'
 
// Create a new Hugging Face Inference instance
const Hf = new HfInference(process.env.HUGGINGFACE_API_KEY)
 
// IMPORTANT! Set the runtime to edge
export const runtime = 'edge'
 
export async function POST(req: Request) {
  // Extract the `prompt` from the body of the request
  const { prompt } = await req.json()
 
  const response = await Hf.textGenerationStream({
    model: 'OpenAssistant/oasst-sft-4-pythia-12b-epoch-3.5',
    inputs: `<|prompter|>${prompt}<|endoftext|><|assistant|>`,
    parameters: {
      max_new_tokens: 200,
      // @ts-ignore (this is a valid parameter specifically in OpenAssistant models)
      typical_p: 0.2,
      repetition_penalty: 1,
      truncate: 1000,
      return_full_text: false
    }
  })
 
  // Convert the response into a friendly text-stream
  const stream = HuggingFaceStream(response)
 
  // Respond with the stream
  return new StreamingTextResponse(stream)
}

Créer l'interface utilisateur

Nous pouvons utiliser le hook useCompletion pour faciliter la création de l'interface utilisateur. Par défaut, le crochet useCompletion utilisera le gestionnaire de route POST que nous avons créé ci-dessus (il utilise par défaut /api/completion). Vous pouvez outrepasser ceci en passant un prop api à useCompletion({ api : '...'}).

app/page.tsx

'use client'
 
import { useCompletion } from 'ai/react'
 
export default function Completion() {
  const {
    completion,
    input,
    stop,
    isLoading,
    handleInputChange,
    handleSubmit
  } = useCompletion({
    api: '/api/completion'
  })
 
  return (
    <div className="mx-auto w-full max-w-md py-24 flex flex-col stretch">
      <form onSubmit={handleSubmit}>
        <label>
          Say something...
          <input
            className="fixed w-full max-w-md bottom-0 border border-gray-300 rounded mb-8 shadow-xl p-2"
            value={input}
            onChange={handleInputChange}
          />
        </label>
        <output>Completion result: {completion}</output>
        <button type="button" onClick={stop}>
          Stop
        </button>
        <button disabled={isLoading} type="submit">
          Send
        </button>
      </form>
    </div>
  )
}

Guide : Sauvegarder dans la base de données après avoir terminé

Il est courant de vouloir sauvegarder le résultat d'un achèvement dans une base de données après l'avoir transmis à l'utilisateur. L'adaptateur HuggingFaceStream accepte quelques rappels optionnels qui peuvent être utilisés à cette fin.

app/api/completion/route.ts

export async function POST(req: Request) {
  // ...
 
  // Convert the response into a friendly text-stream
  const stream = HuggingFaceStream(response, {
    onStart: async () => {
      // This callback is called when the stream starts
      // You can use this to save the prompt to your database
      await savePromptToDatabase(prompt)
    },
    onToken: async (token: string) => {
      // This callback is called for each token in the stream
      // You can use this to debug the stream or save the tokens to your database
      console.log(token)
    },
    onCompletion: async (completion: string) => {
      // This callback is called when the stream completes
      // You can use this to save the final completion to your database
      await saveCompletionToDatabase(completion)
    }
  })
 
  // Respond with the stream
  return new StreamingTextResponse(stream)
}