用 AI + 前端实现一个简易产品图生成器：上传商品标题 → 多场景展示图自动生成

一、项目背景与功能概述

在电商、内容营销和设计场景中，快速生成产品配图 是一个高频需求。传统设计依赖人工，美术成本高、周期长。通过结合 AI 图像生成技术（如 DALL·E） 与前端能力，我们可以打造一个实用工具：

只需输入商品标题，自动生成多场景、多风格产品展示图。

核心功能：

• ✅ 输入商品标题 → 自动生成 prompt + 调用 OpenAI 图像 API
• ✅ 多张场景图自动生成，支持一键下载
• ✅ 智能推荐关键词（Prompt 模板）
• ✅ 本地生成历史记录，方便重复使用
• ✅ 自定义分辨率、多图数量

二、技术选型与环境准备

技术/服务	说明
Vue 3 + Composition API	前端核心框架
Tailwind CSS	UI 快速构建
OpenAI DALL·E API	文本生成图像
Axios	网络请求
FileSaver.js	下载图片
localStorage	缓存生成记录

安装依赖与 API Key 配置

1. 获取 OpenAI API Key：https://platform.openai.com/account/api-keys
2. .env 文件添加密钥：

VITE_OPENAI_API_KEY=你的key

3. 安装依赖：

npm install axios file-saver
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

三、核心功能模块实现

1. 商品图生成器核心逻辑

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { saveAs } from 'file-saver'

const title = ref('')
const size = ref('512x512')
const count = ref(3)
const loading = ref(false)
const imageUrls = ref([])
const keywords = ref([])

const generatePrompt = (t) => {
  return `A high quality product photo of "${t}" on a modern background, studio lighting, ecommerce style`
}

const recommendKeywords = (input) => {
  if (input.includes('杯')) {
    keywords.value = ['咖啡杯在阳台', '手拿马克杯特写', '杯子在木桌上']
  } else if (input.includes('鞋')) {
    keywords.value = ['运动鞋在操场', '跑鞋摆拍', '鞋子在展示柜']
  } else {
    keywords.value = ['产品在纯色背景', '3D 产品渲染图', '产品艺术化呈现']
  }
}

const generateImages = async () => {
  loading.value = true
  const prompt = generatePrompt(title.value)
  try {
    const { data } = await axios.post(
      'https://api.openai.com/v1/images/generations',
      {
        prompt,
        n: count.value,
        size: size.value,
      },
      {
        headers: {
          Authorization: `Bearer ${import.meta.env.VITE_OPENAI_API_KEY}`,
        },
      }
    )
    imageUrls.value = data.data.map((d) => d.url)
    // 存入历史
    const history = JSON.parse(localStorage.getItem('gen-history') || '[]')
    localStorage.setItem('gen-history', JSON.stringify([prompt, ...history]))
  } catch (err) {
    console.error('生成失败', err)
  } finally {
    loading.value = false
  }
}

const downloadImage = (url, idx) => {
  saveAs(url, `product-${idx + 1}.png`)
}
</script>

2. 组件模板与 UI 结构

<template>
  <div class="p-6 max-w-4xl mx-auto space-y-4">
    <h2 class="text-xl font-bold"> 产品图生成器</h2>
    <input v-model="title" @input="recommendKeywords(title)" placeholder="请输入商品标题" class="border px-4 py-2 rounded w-full" />

    <div class="flex gap-2 flex-wrap">
      <button
        v-for="k in keywords"
        :key="k"
        @click="title = k"
        class="bg-blue-100 px-3 py-1 rounded hover:bg-blue-200 text-sm"
      >
        {{ k }}
      </button>
    </div>

    <div class="flex items-center gap-4">
      <select v-model="size" class="border px-2 py-1 text-sm rounded">
        <option value="256x256">256x256</option>
        <option value="512x512">512x512</option>
        <option value="1024x1024">1024x1024</option>
      </select>
      <input type="number" v-model="count" min="1" max="5" class="w-16 text-center border rounded" />
      <button @click="generateImages" class="bg-black text-white px-4 py-2 rounded" :disabled="loading">
        生成图像
      </button>
    </div>

    <div v-if="imageUrls.length" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mt-4">
      <div v-for="(url, i) in imageUrls" :key="i" class="relative group">
        <img :src="url" class="rounded shadow-md" />
        <button @click="downloadImage(url, i)" class="absolute bottom-2 right-2 bg-white text-xs px-2 py-1 rounded shadow">
          下载
        </button>
      </div>
    </div>
  </div>
</template>

四、功能拓展与优化建议（附代码思路）

✅ 1. 本地历史记录可视化

将 localStorage 的历史 prompt 展示出来，点击可重新生成：

<div class="mt-6">
  <h3 class="font-semibold mb-2">历史记录：</h3>
  <ul>
    <li v-for="(item, index) in JSON.parse(localStorage.getItem('gen-history') || '[]')" :key="index">
      <button @click="title = item" class="text-blue-500 hover:underline text-sm">{{ item }}</button>
    </li>
  </ul>
</div>
{/vue}

## ✅ 2. 接入 ChatGPT 做关键词推荐（进阶）

如果需要更智能的关键词，可以请求 ChatGPT：

{ts}
// 调用 ChatGPT 模型（伪代码）
await axios.post('/chatgpt', {
  messages: [{ role: 'system', content: '你是关键词推荐助手' },
             { role: 'user', content: `为“${title.value}”推荐图像 prompt` }]
})

✅ 3. 支持图片长按预览 / 下载全部

配合 FileSaver + zip 包实现批量下载，或直接右键保存。

---

五、实用建议与总结

本文构建了一个面向电商和内容场景的 AI 图生成工具，无需后期设计，实时生成产品配图，极大提升效率。通过组合 Vue + OpenAI 的能力，形成了完整的小应用闭环。

️ 如果你想进一步：

• 加入 Stable Diffusion 实现更本地化部署
• 接入画布编辑器（如 fabric.js）实现二次美化
• 为多商品批量生成图集

欢迎关注后续进阶教程。

---

到这里，这篇文章就和大家说再见啦！我的主页里还藏着很多 篇 前端 实战干货，感兴趣的话可以点击头像看看，说不定能找到你需要的解决方案～
创作这篇内容花了很多的功夫。如果它帮你解决了问题，或者带来了启发，欢迎：
点个赞❤️ 让更多人看到优质内容
关注「前端极客探险家」 每周解锁新技巧
收藏文章⭐️ 方便随时查阅
特别提醒：
转载请注明原文链接，商业合作请私信联系
感谢你的阅读！我们下篇文章再见～