Génération de texte avancée et ingénierie des invites avec le "AI SDK" de Vercel - Partie 4

// app/api/generate-text/route.ts
import { OpenAI } from '@ai-sdk/openai';
import { StreamingTextResponse, streamText, Message } from 'ai';

export const runtime = 'edge';
export const maxDuration = 60; // Les tâches plus longues peuvent nécessiter plus de temps

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

export async function POST(req: Request) {
  const { userPrompt, systemMessage, temperature, maxTokens } = await req.json();

  if (!userPrompt) {
    return new Response('Le message de l'utilisateur est requis', { status: 400 });
  }

  const messages: Message[] = [];
  if (systemMessage) {
    messages.push({ role: 'system', content: systemMessage });
  }
  messages.push({ role: 'user', content: userPrompt });

  const result = await streamText({
    model: openai.chat('gpt-4o'), // Ou votre modèle de chat préféré
    messages,
    temperature: temperature ? parseFloat(temperature) : 0.7, // Par défaut 0.7
    maxTokens: maxTokens ? parseInt(maxTokens) : 500,       // Limite raisonnable par défaut
    // topP, frequencyPenalty, presencePenalty peuvent aussi être définis
  });

  return result.toAIStreamResponse();
}

// app/advanced-textgen/page.tsx
'use client';

import { FormEvent, useState } from 'react';
import { useCompletion } from 'ai/react';

export default function AdvancedTextGenPage() {
  const [userPrompt, setUserPrompt] = useState('');
  const [systemMessage, setSystemMessage] = useState('');
  const [temperature, setTemperature] = useState('0.7');
  const [maxTokens, setMaxTokens] = useState('500');

  const { completion, complete, isLoading, stop } = useCompletion({
    api: '/api/generate-text', // Notre nouveau point de terminaison API mis à jour
  });

  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    // La fonction `complete` du hook `useCompletion` peut prendre l'invite
    // et un `body` optionnel pour des paramètres supplémentaires.
    complete(userPrompt, {
      body: {
        systemMessage,
        temperature: parseFloat(temperature),
        maxTokens: parseInt(maxTokens),
      },
    });
  };

  return (
    <div className="flex flex-col w-full max-w-xl py-12 mx-auto">
      <h1 className="text-2xl font-bold mb-6">Génération de texte avancée</h1>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label htmlFor="system-message" className="block text-sm font-medium text-gray-700">
            Message système (Persona/Contexte) :
          </label>
          <textarea
            id="system-message"
            className="w-full p-2 border border-gray-300 rounded shadow-sm text-black"
            rows={2}
            value={systemMessage}
            placeholder="par exemple, Vous êtes un capitaine pirate sarcastique."
            onChange={(e) => setSystemMessage(e.target.value)}
          />
        </div>

        <div>
          <label htmlFor="user-prompt" className="block text-sm font-medium text-gray-700">
            Invite de l'utilisateur :
          </label>
          <textarea
            id="user-prompt"
            className="w-full p-2 border border-gray-300 rounded shadow-sm text-black"
            rows={4}
            value={userPrompt}
            placeholder="par exemple, Racontez-moi une courte histoire sur la découverte d'un trésor."
            onChange={(e) => setUserPrompt(e.target.value)}
            required
          />
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div>
            <label htmlFor="temperature" className="block text-sm font-medium text-gray-700">
              Température (0-1) : {temperature}
            </label>
            <input
              type="range"
              id="temperature"
              min="0" max="1" step="0.1"
              value={temperature}
              onChange={(e) => setTemperature(e.target.value)}
              className="w-full"
            />
          </div>
          <div>
            <label htmlFor="max-tokens" className="block text-sm font-medium text-gray-700">
              Nombre maximal de jetons : {maxTokens}
            </label>
            <input
              type="number"
              id="max-tokens"
              min="50" max="4000" step="50"
              value={maxTokens}
              onChange={(e) => setMaxTokens(e.target.value)}
              className="w-full p-2 border border-gray-300 rounded text-black"
            />
          </div>
        </div>

        <div className="flex items-center space-x-2">
          <button
            type="submit"
            disabled={isLoading}
            className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 disabled:bg-gray-300"
          >
            {isLoading ? 'Génération...' : 'Générer le texte'}
          </button>
          {isLoading && (
            <button
              type="button"
              onClick={stop}
              className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
            >
              Arrêter
            </button>
          )}
        </div>
      </form>

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

Traduisez les expressions anglaises suivantes en français :
loutre de mer => loutre de mer
menthe poivrée => menthe poivrée
fromage => fromage
cerise =>