Génération d'objets structurés (JSON) avec Vercel AI SDK et Zod - Partie 5 (Finale)

// lib/schemas.ts (or directly in your API route)
import { z } from 'zod';

export const contactSchema = z.object({
  name: z.string().optional().describe("Le nom complet de la personne."),
  email: z.string().email().optional().describe("L'adresse e-mail."),
  phone: z.string().optional().describe("Le numéro de téléphone."),
  company: z.string().optional().describe("Le nom de l'entreprise."),
});

export type Contact = z.infer<typeof contactSchema>;

// app/api/generate-object/route.ts
import { openai } from '@ai-sdk/openai';
import { generateObject, GenerateObjectResult } from 'ai';
import { z } from 'zod';

export const runtime = 'edge'; // Peut aussi être 'nodejs' si nécessaire pour le modèle/fournisseur
export const maxDuration = 30;

// Définir le schéma directement ici ou l'importer
const contactSchema = z.object({
  name: z.string().optional().describe("Le nom complet de la personne."),
  email: z.string().email().optional().describe("L'adresse e-mail."),
  phone: z.string().optional().describe("Le numéro de téléphone."),
  company: z.string().optional().describe("Le nom de l'entreprise, si mentionné."),
});

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

  if (!textInput) {
    return new Response('Le texte saisi est requis', { status: 400 });
  }

  try {
    const { object, usage, finishReason, ...rest } = await generateObject({
      model: openai('gpt-4o'), // Un modèle qui prend en charge l'appel d'outils/fonctions est requis
      schema: contactSchema,
      prompt: `Extraire les informations de contact du texte suivant : "${textInput}"`,
      // mode: 'tool', // Le mode par défaut est 'tool', peut aussi être 'json' pour les modèles prenant en charge le mode JSON directement
    });

    // `object` est maintenant un objet typé correspondant à votre schéma Zod
    console.log('Objet généré :', object);
    console.log('Utilisation :', usage);
    console.log('Raison de la fin :', finishReason);

    // Vous pouvez également accéder à d'autres parties du résultat si nécessaire, par exemple, rawResponse
    // console.log('Résultat complet :', { object, usage, finishReason, ...rest });

    return Response.json({ generatedContact: object, usage, finishReason });

  } catch (error) {
    console.error("Erreur lors de la génération de l'objet :", error);
    let errorMessage = "Échec de la génération de l'objet.";
    if (error instanceof Error) {
        errorMessage = error.message;
    }
    // Vérifier s'il s'agit d'une APIError du SDK pour plus de détails
    // if (error instanceof APIError) { ... }
    return new Response(JSON.stringify({ error: errorMessage }), { status: 500, headers: { 'Content-Type': 'application/json' } });
  }
}

// app/object-gen/page.tsx
'use client';

import { FormEvent, useState } from 'react';
import { z } from 'zod'; // Importez Zod pour l'inférence de type si nécessaire

// Redéfinissez ou importez votre schéma pour la sécurité de type sur le client
const contactSchema = z.object({
  name: z.string().optional(),
  email: z.string().email().optional(),
  phone: z.string().optional(),
  company: z.string().optional(),
});
type Contact = z.infer<typeof contactSchema>;

interface GenerationResponse {
  generatedContact?: Contact;
  usage?: { promptTokens: number; completionTokens: number; totalTokens: number };
  finishReason?: string;
  error?: string;
}

export default function ObjectGenPage() {
  const [textInput, setTextInput] = useState("John Doe travaille chez Acme Corp. Contactez-le à john.doe@example.com ou au (555) 123-4567.");
  const [generatedObject, setGeneratedObject] = useState<Contact | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [apiResponse, setApiResponse] = useState<GenerationResponse | null>(null);


  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setIsLoading(true);
    setError(null);
    setGeneratedObject(null);
    setApiResponse(null);

    try {
      const response = await fetch('/api/generate-object', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ textInput }),
      });

      const data: GenerationResponse = await response.json();

      if (!response.ok) {
        throw new Error(data.error || `L'API a répondu avec le statut ${response.status}`);
      }

      setGeneratedObject(data.generatedContact || null);
      setApiResponse(data);

    } catch (err) {
      console.error(err);
      setError(err instanceof Error ? err.message : 'Une erreur inconnue s'est produite.');
    } finally {
      setIsLoading(false);
    }
  };

  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 d'objet structuré</h1>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label htmlFor="text-input" className="block text-sm font-medium text-gray-700">
            Entrée de texte :
          </label>
          <textarea
            id="text-input"
            className="w-full p-2 border border-gray-300 rounded shadow-sm text-black"
            rows={5}
            value={textInput}
            onChange={(e) => setTextInput(e.target.value)}
            required
          />
        </div>

        <button
          type="submit"
          disabled={isLoading}
          className="px-4 py-2 bg-purple-500 text-white rounded hover:bg-purple-600 disabled:bg-gray-300"
        >
          {isLoading ? 'Génération...' : 'Générer l'objet'}
        </button>
      </form>

      {error && (
        <div className="mt-6 p-4 bg-red-100 text-red-700 border border-red-300 rounded">
          <strong>Erreur :</strong> {error}
        </div>
      )}

      {generatedObject && (
        <div className="mt-6 p-4 border border-gray-200 rounded bg-gray-50">
          <h3 className="text-lg font-semibold mb-2">Objet généré :</h3>
          <pre className="whitespace-pre-wrap text-sm text-gray-800">
            {JSON.stringify(generatedObject, null, 2)}
          </pre>
        </div>
      )}
      {apiResponse && apiResponse.usage && (
        <div className="mt-2 p-2 border-gray-200 text-xs text-gray-600">
            <p>Utilisation : {apiResponse.usage.totalTokens} jetons ({apiResponse.usage.promptTokens} d'invite, {apiResponse.usage.completionTokens} de complétion). Fin : {apiResponse.finishReason}</p>
        </div>
      )}
    </div>
  );
}