Advanced Text Generation and Prompt Engineering with Vercel AI SDK - Part 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; // Longer tasks might need more time

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('User prompt is required', { 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'), // Or your preferred chat model
    messages,
    temperature: temperature ? parseFloat(temperature) : 0.7, // Default 0.7
    maxTokens: maxTokens ? parseInt(maxTokens) : 500,       // Default reasonable limit
    // topP, frequencyPenalty, presencePenalty can also be set
  });

  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', // Our new/updated API endpoint
  });

  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    // The `useCompletion` hook's `complete` function can take the prompt
    // and an optional `body` for additional parameters.
    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">Advanced Text Generation</h1>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label htmlFor="system-message" className="block text-sm font-medium text-gray-700">
            System Message (Persona/Context):
          </label>
          <textarea
            id="system-message"
            className="w-full p-2 border border-gray-300 rounded shadow-sm text-black"
            rows={2}
            value={systemMessage}
            placeholder="e.g., You are a sarcastic pirate captain."
            onChange={(e) => setSystemMessage(e.target.value)}
          />
        </div>

        <div>
          <label htmlFor="user-prompt" className="block text-sm font-medium text-gray-700">
            User Prompt:
          </label>
          <textarea
            id="user-prompt"
            className="w-full p-2 border border-gray-300 rounded shadow-sm text-black"
            rows={4}
            value={userPrompt}
            placeholder="e.g., Tell me a short tale about finding treasure."
            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">
              Temperature (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">
              Max Tokens: {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 ? 'Generating...' : 'Generate Text'}
          </button>
          {isLoading && (
            <button
              type="button"
              onClick={stop}
              className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
            >
              Stop
            </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">Generated Text:</h3>
          <p className="whitespace-pre-wrap text-gray-800">{completion}</p>
        </div>
      )}
    </div>
  );
}

Translate the following English phrases to French:
sea otter => loutre de mer
peppermint => menthe poivrée
cheese => fromage
cherry =>