Multimodal Interfaces: Vision and Voice in Next.js 16

[ Client (Browser) ] 
       | (MediaStream: Audio Track via WebRTC)
       v
[ WebRTC Gateway (Server / Edge) ]
       | (Bi-directional binary stream)
       v
[ Multimodal LLM (OpenAI Realtime API) ]
       | (Generates Audio + Text + Function Calls)
       v
[ Client (Browser) ] -> Plays Audio & Updates UI State

"use server";

import { openai } from "@ai-sdk/openai";
import { generateObject } from "ai";
import { z } from "zod";

// Строгий контракт ответа от Vision модели
const UIAnalysisSchema = z.object({
  componentName: z.string(),
  accessibilityIssues: z.array(z.string()),
  suggestedTailwindClasses: z.string(),
  complexityScore: z.number().min(1).max(10)
});

export async function analyzeUIMockup(formData: FormData) {
  const file = formData.get("image") as File;
  
  if (!file) {
    throw new Error("Image file is required");
  }

  const arrayBuffer = await file.arrayBuffer();
  const base64Image = Buffer.from(arrayBuffer).toString("base64");
  const dataUri = `data:${file.type};base64,${base64Image}`;

  try {
    const { object } = await generateObject({
      model: openai("gpt-4o"),
      schema: UIAnalysisSchema,
      messages: [
        {
          role: "user",
          content: [
            { type: "text", text: "Analyze this UI component mockup as a Senior Frontend Engineer. Focus on accessibility and Tailwind utility classes." },
            { type: "image", image: dataUri }
          ],
        },
      ],
    });

    return { success: true, data: object };
  } catch (error) {
    console.error("Vision API Error:", error);
    return { success: false, error: "Failed to analyze image" };
  }
}