165 lines
4.5 KiB
Markdown
165 lines
4.5 KiB
Markdown
# Image
|
|
|
|
URL: /components/image
|
|
|
|
---
|
|
|
|
title: Image
|
|
description: Displays AI-generated images from the AI SDK.
|
|
path: elements/components/image
|
|
|
|
---
|
|
|
|
The `Image` component displays AI-generated images from the AI SDK. It accepts a [`Experimental_GeneratedImage`](/docs/reference/ai-sdk-core/generate-image) object from the AI SDK's `generateImage` function and automatically renders it as an image.
|
|
|
|
<Preview path="image" />
|
|
|
|
## Installation
|
|
|
|
<ElementsInstaller path="image" />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { Image } from "@/components/ai-elements/image";
|
|
```
|
|
|
|
```tsx
|
|
<Image
|
|
base64="valid base64 string"
|
|
mediaType: 'image/jpeg',
|
|
uint8Array: new Uint8Array([]),
|
|
alt="Example generated image"
|
|
className="h-[150px] aspect-square border"
|
|
/>
|
|
```
|
|
|
|
## Usage with AI SDK
|
|
|
|
Build a simple app allowing a user to generate an image given a prompt.
|
|
|
|
Install the `@ai-sdk/openai` package:
|
|
|
|
```package-install
|
|
npm i @ai-sdk/openai
|
|
```
|
|
|
|
Add the following component to your frontend:
|
|
|
|
```tsx title="app/page.tsx"
|
|
"use client";
|
|
|
|
import { Image } from "@/components/ai-elements/image";
|
|
import { Input, PromptInputTextarea, PromptInputSubmit } from "@/components/ai-elements/prompt-input";
|
|
import { useState } from "react";
|
|
import { Loader } from "@/components/ai-elements/loader";
|
|
|
|
const ImageDemo = () => {
|
|
const [prompt, setPrompt] = useState("A futuristic cityscape at sunset");
|
|
const [imageData, setImageData] = useState<any>(null);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!prompt.trim()) return;
|
|
setPrompt("");
|
|
|
|
setIsLoading(true);
|
|
try {
|
|
const response = await fetch("/api/image", {
|
|
method: "POST",
|
|
body: JSON.stringify({ prompt: prompt.trim() }),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
setImageData(data);
|
|
} catch (error) {
|
|
console.error("Error generating image:", error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
|
|
<div className="flex flex-col h-full">
|
|
<div className="flex-1 overflow-y-auto p-4">
|
|
{imageData && (
|
|
<div className="flex justify-center">
|
|
<Image {...imageData} alt="Generated image" className="h-[300px] aspect-square border rounded-lg" />
|
|
</div>
|
|
)}
|
|
{isLoading && <Loader />}
|
|
</div>
|
|
|
|
<Input onSubmit={handleSubmit} className="mt-4 w-full max-w-2xl mx-auto relative">
|
|
<PromptInputTextarea
|
|
value={prompt}
|
|
placeholder="Describe the image you want to generate..."
|
|
onChange={(e) => setPrompt(e.currentTarget.value)}
|
|
className="pr-12"
|
|
/>
|
|
<PromptInputSubmit status={isLoading ? "submitted" : "ready"} disabled={!prompt.trim()} className="absolute bottom-1 right-1" />
|
|
</Input>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ImageDemo;
|
|
```
|
|
|
|
Add the following route to your backend:
|
|
|
|
```ts title="app/api/image/route.ts"
|
|
import { openai } from "@ai-sdk/openai";
|
|
import { experimental_generateImage } from "ai";
|
|
|
|
export async function POST(req: Request) {
|
|
const { prompt }: { prompt: string } = await req.json();
|
|
|
|
const { image } = await experimental_generateImage({
|
|
model: openai.image("dall-e-3"),
|
|
prompt: prompt,
|
|
size: "1024x1024",
|
|
});
|
|
|
|
return Response.json({
|
|
base64: image.base64,
|
|
uint8Array: image.uint8Array,
|
|
mediaType: image.mediaType,
|
|
});
|
|
}
|
|
```
|
|
|
|
## Features
|
|
|
|
- Accepts `Experimental_GeneratedImage` objects directly from the AI SDK
|
|
- Automatically creates proper data URLs from base64-encoded image data
|
|
- Supports all standard HTML image attributes
|
|
- Responsive by default with `max-w-full h-auto` styling
|
|
- Customizable with additional CSS classes
|
|
- Includes proper TypeScript types for AI SDK compatibility
|
|
|
|
## Props
|
|
|
|
### `<Image />`
|
|
|
|
<TypeTable
|
|
type={{
|
|
alt: {
|
|
description: 'Alternative text for the image.',
|
|
type: 'string',
|
|
},
|
|
className: {
|
|
description: 'Additional CSS classes to apply to the image.',
|
|
type: 'string',
|
|
},
|
|
'...props': {
|
|
description: 'The image data to display, as returned by the AI SDK.',
|
|
type: 'Experimental_GeneratedImage',
|
|
},
|
|
}}
|
|
/>
|