Function ImageGenUI

testing/e2e/src/components/ImageGenUI.tsx:36–150

({
  provider,
  mode,
  testId,
  aimockPort,
  withImageInput,
}: ImageGenUIProps)

}

export function ImageGenUI({
  provider,
  mode,
  testId,
  aimockPort,
  withImageInput,
}: ImageGenUIProps) {
  const [prompt, setPrompt] = useState('')
  const [imageFile, setImageFile] = useState<File | null>(null)

  const connectionOptions = () => {
    const body = { provider, numberOfImages: 1, testId, aimockPort }

    if (mode === 'sse') {
      return { connection: fetchServerSentEvents('/api/image'), body }
    }
    if (mode === 'http-stream') {
      return { connection: fetchHttpStream('/api/image/stream'), body }
    }
    return {
      fetcher: async (input: { prompt: MediaPrompt }) => {
        return generateImageFn({
          data: {
            prompt: input.prompt,
            provider,
            numberOfImages: 1,
            aimockPort,
            testId,
          },
        }) as Promise<ImageGenerationResult>
      },
    }
  }

  const { generate, result, isLoading, error, status } =
    useGenerateImage(connectionOptions())

  const handleGenerate = async () => {
    if (!imageFile) {
      await generate({ prompt })
      return
    }
    const base64 = await fileToBase64(imageFile)
    await generate({
      prompt: [
        { type: 'text', content: prompt },
        {
          type: 'image',
          source: { type: 'data', value: base64, mimeType: imageFile.type },
        },
      ],
    })
  }

  return (
    <div className="p-4 space-y-4">
      <div className="flex gap-2">
        <input