图片

显示来自 AI SDK 的 AI 生成图片。

Image 组件显示来自 AI SDK 的 AI 生成图片。它接受来自 AI SDK 的 generateImage 函数的 Experimental_GeneratedImage 对象，并自动将其渲染为图片。

使用 CLI 安装

AI Elements Vue
shadcn-vue CLI
npx ai-elements-vue@latest add image

手动安装

将以下文件复制并粘贴到同一文件夹中。

Image.vue
index.ts
<script setup lang="ts">
import type { Experimental_GeneratedImage } from 'ai'
import { cn } from '@repo/shadcn-vue/lib/utils'
import { computed } from 'vue'

interface Props extends Experimental_GeneratedImage {
  class?: string
}

const props = defineProps<Props>()

const classes = computed(() => cn(
  'h-auto max-w-full overflow-hidden rounded-md',
  props.class,
))

const src = computed(() => `data:${props.mediaType};base64,${props.base64}`)
</script>

<template>
  <img
    :class="classes"
    :src="src"
    v-bind="$attrs"
  >
</template>

与 AI SDK 一起使用

使用 experimental_useObject hook 构建简单的代码生成工具。

将以下组件添加到你的前端：

app/page.vue
<script setup lang="ts">
import { ref } from 'vue'

import { Image } from '@/components/ai-elements/image'
import { Loader } from '@/components/ai-elements/loader'
import { PromptInput, PromptInputSubmit, PromptInputTextarea } from '@/components/ai-elements/prompt-input'

const prompt = ref('A futuristic cityscape at sunset')
const imageData = ref<any>(null)
const isLoading = ref(false)

async function handleSubmit() {
  if (!prompt.value.trim())
    return

  const currentPrompt = prompt.value.trim()
  prompt.value = ''

  setIsLoading(true)

  try {
    const response = await fetch('/api/image', {
      method: 'POST',
      body: JSON.stringify({ prompt: currentPrompt }),
      headers: {
        'Content-Type': 'application/json',
      },
    })
    const data = await response.json()
    imageData.value = data
  }
  catch (error) {
    console.error('Error generating image:', error)
  }
  finally {
    setIsLoading(false)
  }
}

function setIsLoading(value: boolean) {
  isLoading.value = value
}
</script>

<template>
  <div class="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
    <div class="flex flex-col h-full">
      <div class="flex-1 overflow-y-auto p-4">
        <div v-if="imageData" class="flex justify-center">
          <Image
            v-bind="imageData"
            alt="Generated image"
            class="h-[300px] aspect-square border rounded-lg"
          />
        </div>

        <Loader v-if="isLoading" />
      </div>

      <PromptInput
        class="mt-4 w-full max-w-2xl mx-auto relative"
        @submit="handleSubmit"
      >
        <PromptInputTextarea
          v-model="prompt"
          placeholder="Describe the image you want to generate..."
          class="pr-12"
        />
        <PromptInputSubmit
          :status="isLoading ? 'submitted' : 'ready'"
          :disabled="!prompt.trim()"
          class="absolute bottom-1 right-1"
        />
      </PromptInput>
    </div>
  </div>
</template>

将以下路由添加到你的后端：

server/api/image.ts
import { openai } from '@ai-sdk/openai'
import { experimental_generateImage } from 'ai'

export default defineEventHandler(async (event) => {
  const { prompt } = await readBody<{ prompt: string }>(event)

  const { image } = await experimental_generateImage({
    model: openai.image('dall-e-3'),
    prompt,
    size: '1024x1024',
  })

  return {
    base64: image.base64,
    uint8Array: image.uint8Array,
    mediaType: image.mediaType,
  }
})

特性

  • 直接接受来自 AI SDK 的 Experimental_GeneratedImage 对象
  • 从 base64 编码的图片数据自动创建适当的数据 URL
  • 支持所有标准 HTML 图片属性
  • 默认响应式，具有 max-w-full h-auto 样式
  • 可通过额外的 CSS 类自定义
  • 包含适当的 TypeScript 类型以支持 AI SDK 兼容性

Props

<Image />

altstring
图片的替代文本。
classstring
应用于 <img> 元素的额外 CSS 类。
[...props]Experimental_GeneratedImage
要显示的图片数据，由 AI SDK 返回。
Edit this page
代码块
加载器