用 AI + 前端实现一个简易产品图生成器:上传商品标题 → 多场景展示图自动生成
文章目录
- 一、项目背景与功能概述
- 核心功能:
- 二、技术选型与环境准备
- 安装依赖与 API Key 配置
- 三、核心功能模块实现
- 1. 商品图生成器核心逻辑
- 2. 组件模板与 UI 结构
- 四、功能拓展与优化建议(附代码思路)
- ✅ 1. 本地历史记录可视化
- ✅ 3. 支持图片长按预览 / 下载全部
- 五、实用建议与总结
一、项目背景与功能概述
在电商、内容营销和设计场景中,快速生成产品配图 是一个高频需求。传统设计依赖人工,美术成本高、周期长。通过结合 AI 图像生成技术(如 DALL·E) 与前端能力,我们可以打造一个实用工具:
只需输入商品标题,自动生成多场景、多风格产品展示图。
核心功能:
- ✅ 输入商品标题 → 自动生成 prompt + 调用 OpenAI 图像 API
- ✅ 多张场景图自动生成,支持一键下载
- ✅ 智能推荐关键词(Prompt 模板)
- ✅ 本地生成历史记录,方便重复使用
- ✅ 自定义分辨率、多图数量
二、技术选型与环境准备
技术/服务 | 说明 |
---|---|
Vue 3 + Composition API | 前端核心框架 |
Tailwind CSS | UI 快速构建 |
OpenAI DALL·E API | 文本生成图像 |
Axios | 网络请求 |
FileSaver.js | 下载图片 |
localStorage | 缓存生成记录 |
安装依赖与 API Key 配置
- 获取 OpenAI API Key:https://platform.openai.com/account/api-keys
.env
文件添加密钥:
VITE_OPENAI_API_KEY=你的key
- 安装依赖:
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 = trueconst 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"><buttonv-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)实现二次美化
- 为多商品批量生成图集
欢迎关注后续进阶教程。
到这里,这篇文章就和大家说再见啦!我的主页里还藏着很多 篇 前端 实战干货,感兴趣的话可以点击头像看看,说不定能找到你需要的解决方案~
创作这篇内容花了很多的功夫。如果它帮你解决了问题,或者带来了启发,欢迎:
点个赞❤️ 让更多人看到优质内容
关注「前端极客探险家」🚀 每周解锁新技巧
收藏文章⭐️ 方便随时查阅
📢 特别提醒:
转载请注明原文链接,商业合作请私信联系
感谢你的阅读!我们下篇文章再见~ 💕
相关文章:
用 AI + 前端实现一个简易产品图生成器:上传商品标题 → 多场景展示图自动生成
文章目录 一、项目背景与功能概述核心功能: 二、技术选型与环境准备安装依赖与 API Key 配置 三、核心功能模块实现1. 商品图生成器核心逻辑2. 组件模板与 UI 结构 四、功能拓展与优化建议(附代码思路)✅ 1. 本地历史记录可视化✅ 3. 支持图片…...
实现高效灵活的模糊搜索:JavaScript中的多条件过滤实践
现代Web应用中,数据搜索功能是用户体验的关键部分。本文将深入探讨如何实现一个高效灵活的模糊搜索函数,支持多条件组合查询、精确匹配、模糊匹配以及时间范围筛选。 需求分析 我们需要一个通用的搜索函数,能够处理以下场景: 多…...
ChatterBot的JupyterLab实践指南,从零开始构建AI聊天机器人
从手机上的语音助手到电商平台的客服机器人,这些能理解人类语言的程序背后,都离不开自然语言处理(NLP)技术的支撑。本文将以JupyterLab为实验平台,带您亲手打造一个会对话的AI机器人。通过这个项目,您不仅能…...
《深度学习》课程之卷积神经网络原理与实践教学设计方案
《深度学习》课程之卷积神经网络原理与实践教学设计方案 一、教学目标设计 (一)知识目标 学生能够准确描述卷积神经网络(CNN)的基本定义,包括其核心组成部分(如卷积层、池化层、全连接层等)及…...
快手OneRec 重构推荐系统:从检索排序到生成统一的跃迁
文章目录 1. 背景2. 方法2.1 OneRec框架2.2 Preliminary2.3 生成会话列表2.4 利用奖励模型进行迭代偏好对齐2.4.1 训练奖励模型2.4.2 迭代偏好对齐 3. 总结 昨天面试的时候聊到了OneRec,但是由于上次看这篇文章已经是一个月之前,忘得差不多了,…...
算法——直接插入排序
目录 一、直接插入排序的定义 二、直接插入排序的原理 三、直接插入排序的特点 四、代码实现 一、直接插入排序的定义 直接插入排序是一种简单直观的排序算法,其基本思想是将一个元素插入到已经排好序的部分数组中,使得插入后的数组仍然保持有序。具…...
Linux 软件管理
文章目录 dpkg软件包管理工具APT软件包管理工具apt-get命令apt-cache Linux操作系统主要支持RPM和Deb两种软件包管理工具。 RPM(Redhat Package Manager)是一种用于互联网下载包的打包及安装工具。 其原始设计理念是开放的,不仅可以在Redhat平…...
电力实训中应注意以下安全事项
电力实训中应注意以下安全事项: 一、环境准备与设备检查 保持实训场地整洁通风,清除易燃物与杂物,确保操作空间充足。 电路容量需匹配设备功率,安装漏电保护器及空气开关。 非带电金属设备外壳应接地,定期检查线路…...
序列化-流量统计
新建文件夹及文件 编写流量统计的Bean对象 package com.root.mapreduce.writable; import org.apache.hadoop.io.Writable; import java.io.DataInput; import java.io.DataOutput; import java.io.IOException; //1 继承Writable接口 public class FlowBean implements Writab…...
矩阵游戏--二分图的匈牙利算法
https://www.luogu.com.cn/problem/P1129 学习路线---https://blog.csdn.net/qq_39304630/article/details/108135381 1.二分图就是两个独立的两个集合,如这里是行和列 2.匈牙利匹配就是媒婆拉媒,没伴侣或者伴侣可以换就将当前的塞给她 3.最后true的…...
spring security解析
Spring Security 中文文档 :: Spring Security Reference 1. 密码存储 最早是明文存储,但是攻击者获得数据库的数据后就能得到用户密码。 于是将密码单向hash后存储,然后攻击者利用彩虹表(算法高级(23)-彩虹表&…...
【技巧】chol分解时,矩阵非正定时的临时补救措施,以MATLAB为例
针对非正定矩阵无法进行标准Cholesky分解的解决方案及MATLAB代码实现,结合不同应用场景的需求分层解析 文章目录 数值修正方法修正Cholesky分解LDL分解 矩阵变换与重构特征值修正乘积法构造正定矩阵 替代分解与降维方法QR分解与SVD主成分分析(PCA&#x…...
Hi3518E官方录像例程源码流程分析(三)
文章目录 第二阶段,初始化第一阶段计算好的参数SAMPLE_COMM_SYS_Init 第三阶段,启动VI和chn捕获SAMPLE_COMM_VI_StartVi()SAMPLE_COMM_VI_StartBT656小阶段1 SAMPLE_COMM_VI_StartMIPI_BT1120()小阶段1 SAM…...
37.Java 异步回调(CompletableFuture 概述、CompletableFuture 使用)
一、CompletableFuture 概述 CompletableFuture 在 Java 里面被用于异步编程,异步通常意味着非阻塞,可以使得任务单独运行在与主线程分离的其他线程中,并且通过回调可以在主线程中得到异步任务的执行状态,是否完成,和是…...
数学建模AI智能体(4.16大更新)
别的不说就说下面这几点,年初内卷到现在,就现阶段AI水平,卷出了我比较满意的作品,这里分享给各位同学,让你们少走弯路: 1.轻松辅导学生 2.帮助学习 3.突破知识壁垒,缩短与大佬的差距 4.打破…...
Python 第三节 流程控制
目录 1.分支结构 条件控制 2.循环语句 3.循环控制语句 4.嵌套循环 控制代码执行的顺序 顺序结构分支结构循环结构 1.分支结构 条件控制 让代码有自主选择的能力, 当满足某个条件的时候执行对应的操作 1.1 if语句 语法格式 if 判断条件:执行语句(当判断条件为真的时候执…...
深入探究Linux编译器gcc/g++:从基础到进阶
目录 一、编译的幕后流程 (一)预处理:宏与文件的魔法融合 (二)编译:代码规范性的严格审视 (三)汇编:迈向机器语言的关键一步 (四)连接&a…...
用户态网络缓冲区
用户态网络缓冲区 缓冲区作用 用于临时存储数据以便高效地进行读写操作。用户态缓冲区位于用户空间中,与内核空间中的缓冲区(内核缓冲区)相对。 用户态接受缓存区 粘包问题,缓存非完整数据包 生产者的速度 > 消费者的速…...
解决Flutter 2.10.5在升级Xcode 16后的各种报错
Flutter 环境 Flutter version 2.10.5Dart version 2.16.2DevTools version 2.9.2CocoaPods version 1.16.2Xcode 16.3 问题一:XCResult parsing error: Error: This command is deprecated and will be removed in a future release, --legacy flag is required t…...
【学习笔记】计算机网络(八)—— 音频/视频服务
第8章 互联网上的音频/视频服务 文章目录 第8章 互联网上的音频/视频服务8.1概述8.2 流式存储音频/视频8.2.1 具有元文件的万维网服务器8.2.2 媒体服务器8.2.3 实时流式协议 RTSP 8.3 交互式音频/视频8.3.1 IP 电话概述8.3.2 IP电话所需要的几种应用协议8.3.3 实时运输协议 RTP…...
OpenCv高阶(三)——图像的直方图、图像直方图的均衡化
目录 一、直方图 1、计算并显示直方图 2、使用matplotlib方法绘制直方图(不划分小的子区间) 3、使用opencv的方法绘制直方图 (划分16个小的子亮度区间) 4、绘制彩色图像的直方图,将各个通道的直方图值都画出来 二、…...
OpenCV 图形API(39)图像滤波----同时计算图像在 X 和 Y 方向上的一阶导数函数SobelXY()
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 cv::gapi::SobelXY 函数是 OpenCV 的 G-API 模块中用于同时计算图像在 X 和 Y 方向上的一阶导数(即 Sobel 边缘检测)的一…...
领麦微:电炖锅红外测温传感器应用,告别糊锅干烧
领麦微红外测温传感器在电炖锅中的应用,特别是在应对高温环境、实现精准测温以保留食材营养、有效防止干烧与糊锅现象,以及提供安全烹饪新保障等方面,展现出了其独特的技术优势和应用价值。以下是对这些应用特点的深入剖析: 一、高…...
(Linux操作系统)自定义shell的实现
讲自定义shell之前我们先看一个东西,那就是进程替换,我们想要父进程fork之后的子进程之后运行一个全新的程序那该怎么办呢? 这里就要用一个叫做进程替换的一个东西了,程序替换是通过特定的接⼝,加载磁盘上的⼀个全新的…...
安卓jks提取pem和pk8文件
你需要安装: Java Keytool OpenSSL 系统要求:Mac/Linux/Windows 都可以。 keytool -importkeystore -srckeystore holder-keystore.jks -destkeystore holder-keystore.p12 -srcstoretype JKS -deststoretype PKCS12 -srcstorepass yzhafzKPj4 -dest…...
人脸检测-人脸关键点-人脸识别-人脸打卡-haar-hog-cnn-ssd-mtcnn-lbph-eigenface-resnet
链接:https://pan.baidu.com/s/1VhGdyIW5GWuTNkfbCEc5eA?pwdz0eo 提取码:z0eo --来自百度网盘超级会员V2的分享 创建环境 conda create -n 环境名称python3.8 conda activate 环境名称 然后配置环境 pip install requirements.txt 运行程序&…...
Gobuster :dir、dns、vhost
Gobuster 及其相关技术知识必须用于法律明确允许的场景!!! 1. dir 模式:目录/文件枚举 用途:扫描目标网站的目录和文件,常用于发现隐藏资源或敏感文件。 关键参数: -u URL&am…...
Vue+Threejs项目性能优化
使用Vue和Three.js开发的项目,但运行一段时间后电脑内存就满了,导致性能下降甚至崩溃,分析内存泄漏的原因优化如下: 资源释放管理 手动释放Three.js资源: 在Vue组件的beforeDestroy或destroyed生命周期中࿰…...
Leetcode - 双周赛135
目录 一、3512. 使数组和能被 K 整除的最少操作次数二、3513. 不同 XOR 三元组的数目 I三、3514. 不同 XOR 三元组的数目 II四、3515. 带权树中的最短路径 一、3512. 使数组和能被 K 整除的最少操作次数 题目链接 本题实际上求的就是数组 nums 和的余数,代码如下&…...
[特殊字符] PostgreSQL MCP 开发指南
简介 🚀 PostgreSQL MCP 是一个基于 FastMCP 框架的 PostgreSQL 数据库交互服务。它提供了一套简单易用的工具函数,让你能够通过 API 方式与 PostgreSQL 数据库进行交互。 功能特点 ✨ 🔄 数据库连接管理与重试机制🔍 执行 SQL…...
等离子体浸没离子注入(PIII)
一、PIII 是什么?基本原理和工艺 想象一下,你有一块金属或者硅片(就是做芯片的那种材料),你想给它的表面“升级”,让它变得更硬、更耐磨,或者有其他特殊功能。怎么做呢?PIII 就像是用…...
TinyEngine 2.4版本正式发布:文档全面开源,实现主题自定义,体验焕新升级!
本文由体验技术团队李璇原创。 前言 TinyEngine低代码引擎使开发者能够定制低代码平台。它是低代码平台的底座,提供可视化搭建页面等基础能力,既可以通过线上搭配组合,也可以通过cli创建个人工程进行二次开发,实时定制出自己的低…...
gemini讲USRP
您好!USRP (Universal Software Radio Peripheral) 是一种软件无线电 (SDR) 设备系列,由 Ettus Research (现为 National Instruments 旗下公司) 开发和销售。USRP 提供了一个灵活且可配置的平台,用于设计、原型开发和部署各种无线通信系统。…...
智能超表面通信控制板--通道电压并行控制版
可重构智能超表面(Reconfigurable Intelligent Surface, RIS)技术是一种新兴的人工电磁表面技术,它通过可编程的方式对电磁波进行智能调控,从而在多个领域展现出巨大的应用潜力。超表面具有低成本、低能耗、可编程、易部署等特点&…...
Spring Task(笔记)
介绍: 应用场景: cron表达式: cron表达式在线生成器: 入门案例:...
YOLOv3的改进思路与方法:解析技术难点与创新突破
YOLOv3作为目标检测领域的经典算法,凭借其出色的速度和性能平衡获得了广泛应用。然而,随着计算机视觉技术的不断发展,YOLOv3在某些场景下的局限性也逐渐显现。本文将深入分析YOLOv3的不足之处,并系统介绍常见的改进策略和方法&…...
【解锁元生代】ComfyUI工作流与云原生后端的深度融合:下一代AIGC开发范式革命
## 从单机到云原生的认知跃迁 当2023年Stable Diffusion WebUI还在争夺本地显卡性能时,ComfyUI已悄然开启工作流模块化革命;当2024年AI绘画工具陷入"参数调优内卷",云原生技术正重塑AI开发的基础设施层。二者的深度融合࿰…...
shell 编程之正则表达式与文本处理器
目录 一、正则表达式 1. 概念 2. 作用 3. 分类 二、基础正则表达式(BRE) grep 命令选项 三、扩展正则表达式(ERE) 与 BRE 的区别 四、文本处理器 1. sed 工具 2. awk 工具 五、总结 总结对比 元字符总结 工具对比与…...
Shell编程之正则表达式与文本处理器
目录 一、引言 二、正则表达式 2.1 定义与用途 2.2 基础正则表达式 2.2.1 查找特定字符 2.2.2 利用中括号 “[]” 查找集合字符 2.2.3 查找行首 “^” 与行尾字符 “$” 2.2.4 查找任意一个字符 “.” 与重复字符 “*” 2.2.5 查找连续字符范围 “{}” 2.3 元字符总结…...
TMDOG——语言大模型进行意图分析驱动后端实践
语言大模型进行意图分析驱动后端实践 项目概述 项目地址:https://github.com/TMDOG666/AI_Backend_Demo 该项目通过语言大模型,通过分析用户意图、拆分任务、构建API调用链来驱动后端实践。 以一个简单的教务系统后端为例,将教务系统后端…...
未启用CUDA支持的PyTorch环境** 中使用GPU加速解决方案
1. 错误原因分析 根本问题:当前安装的PyTorch是CPU版本,无法调用GPU硬件加速。当运行以下代码时会报错:model YOLO("yolov8n.pt").to("cuda") # 或 .cuda()2. 解决方案步骤 步骤1:验证CUDA可用性 在Pyth…...
【mysql】Mac 通过 brew 安装 mysql 、启动以及密码设置
Mac 通过 brew 安装 mysql 、启动以及密码设置 使用 brew 安装 mysqlmysql 启动mysql密码设置参考文章: 使用 brew 安装 mysql brew install mysqlmysql 启动 下载完毕,终端告诉我们mysql数据库没有设置密码的,我们可以直接执行 mysql -u r…...
Vue2 nextTick
核心源码位置 Vue 2 的 nextTick 实现主要在 src/core/util/next-tick.js 文件中。 完整源码结构 import { noop } from shared/util import { handleError } from ./error import { isIE, isIOS, isNative } from ./envexport let isUsingMicroTask falseconst callbacks …...
Ubuntu 安装 NVIDIA显卡驱动、CUDA 以及 CuDNN工具
文章目录 一、简介二、查看显卡设备三、安装显卡驱动四、安装CUDA工具箱五、安装CuDNN小结 一、简介 NVIDIA 驱动:操作系统与 NVIDIA 显卡硬件之间的桥梁,负责驱动显卡硬件的运行,显卡的“底层操作系统”,一切的基础。CUDA&#…...
LeetCode算法题(Go语言实现)_50
题目 现有一个包含所有正整数的集合 [1, 2, 3, 4, 5, …] 。 实现 SmallestInfiniteSet 类: SmallestInfiniteSet() 初始化 SmallestInfiniteSet 对象以包含 所有 正整数。 int popSmallest() 移除 并返回该无限集中的最小整数。 void addBack(int num) 如果正整数 …...
idea报错java: 非法字符: ‘\ufeff‘解决方案
解决方案步骤以及说明 BOM是什么?1. BOM的作用2. 为什么会出现 \ufeff 错误?3. 如何解决 \ufeff 问题? 最后重新编译,即可运行!!! BOM是什么? \ufeff 是 Unicode 中的 BOM࿰…...
WPF依赖注入IHostApplicationLifetime关闭程序
WPF依赖注入IHostApplicationLifetime关闭程序 使用Application.Current.Shutdown();退出会报异常 应该使用 app.Dispatcher.InvokeShutdown(); Application.Current.Shutdown();app.Dispatcher.InvokeShutdown();static App app new();[STAThread]public static void Main(…...
如何在 IntelliJ IDEA 中安装通义灵码 - AI编程助手提升开发效率
随着人工智能技术的飞速发展,AI 编程助手已成为提升开发效率和代码质量的强大工具。在众多 AI 编程助手之中,阿里云推出的通义灵码凭借其智能代码补全、代码解释、生成单元测试等丰富功能,脱颖而出,为开发者带来了全新的编程体验。…...
【力扣】两两交换链表中的节点
两两交换链表中的节点 代码: /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), next(nullptr) {}* ListNode(int x, ListNode *n…...
数据共享交换平台之文件交换
数据共享交换平台的文件交换管理功能提供部门与部门之间的文件交换通道,满足跨部门之间文件交换需求。文件交换需要能够按照交换业务场景对交换通道进行分类管理。文件交换管理需满足如下要求: 1.文件交换统计:支持查看本部门与其他部门之间…...