Génération de complétions de texte avec le "AI SDK" de Vercel - Partie 3

Ceci est utile pour des tâches telles que :

• Résumer des textes plus longs.
• Traduction de langues.
• Génération de descriptions de produits.
• Rédaction d'e-mails.
• Génération de code simple.

Le "AI SDK" de Vercel fournit les fonctions streamText et generateText (ainsi que les hooks React correspondants comme useCompletion) pour faciliter ces interactions non conversationnelles. Dans cet article, nous allons construire une interface utilisateur simple pour obtenir des complétions de texte pour une invite donnée.

Prérequis

• Une configuration de projet Next.js (similaire à Partie 1).
• Le "AI SDK" de Vercel et une bibliothèque fournisseur de LLM installés.
• Clé d'API OpenAI (ou équivalent).

Concept Clé : streamText vs. generateText

• streamText: Diffuse le jeton de complétion token par token. Idéal pour un retour en temps réel à l'utilisateur, similaire à la manière dont fonctionne useChat.
• generateText: Attend que la génération soit entièrement terminée avant de la retourner. Plus simple à gérer si le streaming n'est pas essentiel.

Pour les applications orientées utilisateur, le streaming (streamText) offre souvent une meilleure expérience. Nous allons nous concentrer là-dessus. Le hook useCompletion dans @ai-sdk/react est l'équivalent côté client pour streamText dans un contexte autre que le chat.

Étape 1 : Création de la route API pour les complétions

Créons une nouvelle route d'API app/api/complete/route.ts.

// app/api/complete/route.ts
import {openai } from '@ai-sdk/openai';
import { generatingText } from 'ai';

export const runtime = 'edge';
export const maxDuration = 30;

export const POST = async (req: Request) => {
  const { prompt } = await req.json();

  si (!prompt) {
    return new Response('Le prompt est requis', { status: 400 });
  }

  const result = await streamText({
    model: openai('gpt-4o'), 
    prompt,
    // Vous pouvez ajouter d'autres paramètres comme max_tokens, temperature, etc.
    // maxTokens: 150,
    // temperature: 0.7,
  });

  return result.toDataStreamResponse();
}

Explication :

• Cette route est plus simple que la route du chat. Elle attend une seule chaîne de caractères prompt.
• Nous utilisons streamText avec l'invite de commande directement.
• Remarque : Certains anciens modèles (comme text-davinci-003) étaient spécifiquement des modèles de "complétion". Les nouveaux modèles de discussion (gpt-3.5-turbo, gpt-4o) peuvent également gérer efficacement les tâches de complétion lorsqu'ils reçoivent une invite directe. Si vous utilisez une ancienne version du SDK OpenAI ou un modèle qui dispose d'une méthode dédiée openai.completion(), vous pourriez l'utiliser avec streamText. Le @ai-sdk/openai openai.chat() est polyvalent.

Étape 2 : Construction de l'interface utilisateur pour les complétions (côté client)

Nous utiliserons le hook useCompletion de @ai-sdk/react. Ce hook est analogue à useChat mais conçu pour des complétions en un seul tour.

Modifier app/page.tsx (ou créez une nouvelle page telle que app/completion/page.tsx) :

// app/page.tsx (ou app/completion/page.tsx)
'use client';

import { useCompletion } from '@ai-sdk/react';

export default function CompletionPage() {
  const {
    completion,
    input,
    stop,
    isLoading,
    handleInputChange,
    handleSubmit,
  } = useCompletion({
    api: '/api/complete', // Spécifiez votre point de terminaison d'API de complétion
  });

  return (
    <div className="flex flex-col w-full max-w-xl py-12 mx-auto">
      <h1 className="text-2xl font-bold mb-4">Démonstration de complétion de texte</h1>
      <form onSubmit={handleSubmit} className="mb-4">
        <label htmlFor="prompt-input" className="block text-sm font-medium text-gray-700 mb-1">
          Entrez votre invite :
        </label>
        <textarea
          id="prompt-input"
          className="w-full p-2 border border-gray-300 rounded shadow-sm text-black"
          rows={4}
          value={input}
          placeholder="par exemple, Écrivez une courte histoire sur un robot qui rêve de voler."
          onChange={handleInputChange}
        />
        <button
          type="submit"
          disabled={isLoading}
          className="mt-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:bg-gray-300"
        >
          {isLoading ? 'Génération...' : 'Générer la complétion'}
        </button>
        {isLoading && (
          <button
            type="button"
            onClick={stop}
            className="mt-2 ml-2 px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
          >
            Arrêter
          </button>
        )}
      </form>

      {completion && (
        <div className="mt-4 p-4 border border-gray-200 rounded bg-gray-50">
          <h3 className="text-lg font-semibold mb-2">Complétion générée :</h3>
          <p className="whitespace-pre-wrap text-gray-800">{completion}</p>
        </div>
      )}
    </div>
  );
}

Explication :

• useCompletion:
  • api: '/api/complete': Indique au crochet quel point de terminaison utiliser.
  • achèvement: Une chaîne de caractères qui contient le texte en streaming/completé de l'IA.
  • input, handleInputChange, handleSubmit : Similaire à useChat pour gérer la saisie de l'invite.
  • isLoading: Booléen indiquant si une requête est en cours.
  • arrêter: Une fonction pour arrêter prématurément la génération de flux.
• L'interface utilisateur permet aux utilisateurs de saisir une invite et affiche la complétion générée par l'IA au fur et à mesure de son arrivée.

Étape 3 : Test des complétions de texte

Exécutez pnpm dev et rendez-vous sur votre page. Essayez diverses instructions :

• "Résumez ce texte : [collez un long paragraphe]"
• "Traduisez 'Hello, how are you?' en espagnol."
• "Rédigez trois slogans publicitaires pour une nouvelle marque de café écologique."

Vous verrez le texte s'afficher dans la zone "Génération de complétion".


(Imaginez une interface utilisateur avec une zone de texte pour la saisie et une zone d'affichage pour le résultat.)

Points clés

• Le SDK Vercel AI ne sert pas uniquement aux chatbots ; generateText et useCompletion facilitent la création d'interfaces utilisateur pour la génération de texte en général.
• Le streaming offre une expérience utilisateur réactive pour les tâches de longue durée.
• L'ingénierie des invites est essentielle : la qualité du résultat dépend fortement de la manière dont vous formulez votre invite.

Quelle est la prochaine étape ?

Dans la Partie 4, nous allons approfondir la génération de texte, en nous concentrant sur des sorties de texte plus créatives ou structurées et en discutant des techniques d'ingénierie des invites qui peuvent vous aider à tirer le meilleur parti des LLMs. Nous explorerons comment vous pouvez guider l'IA pour produire du texte dans des styles ou des formats spécifiques.