作品十四：AI图片生成器

​

AI 图片生成是最酷的 AI 应用之一 ，通过简单的文字描述，就能生成精美的图片 。这个项目可以让你学习如何调用图片生成 API。​

​

​

​

​

💤

这个项目的核心是文字生成图片 。​

•

用户输入描述，选择尺寸和风格，点击生成就能得到图片 。​

•

为了帮助用户写出更好的提示词，可以添加一个“优化提示词”功能，让 AI 帮用户把简单的描述扩展成详细的提示词 ​

•

生成的图片要保存到历史记录，并且支持下载​

​

开发步骤​

1） 了解图片生成 API​

开发的第一步是了解图片生成 API 。图片生成 API 的主要参数包括：​

​

•

prompt：图片描述（ 最重要）​

•

size：图片尺寸（ 比如 1024x1024）​

•

quality：质量（标准或高清）​

•

style：风格（ 写实或艺术）​

​

不同的参数组合会生成不同效果的图片 。​

​

🎈

图片生成的质量很大程度上取决于提示词 。​

一个好的提示词通常包含这些元素：主体（ 画什么）、动作或状态（在做什么）、环境背景（在哪里）、风格（什么风格）、光线（什么光线）、色彩（什么色调）、质量词（ 高清/ 4K 等）。​

​

关于风格，你可以用一些关键词来指定 。​

•

写实风格用 photorealistic 、realistic 、detailed；​

•

卡通风格用cartoon style 、anime style 、cute；​

•

油画风格用 oil painting 、artistic 、impressionist；​

•

水彩风格用 watercolor 、soft colors；​

•

赛博朋克风格用 cyberpunk 、neon lights 、futuristic。​

•

质量词也很重要， 比如 high quality 、detailed 、4K 、8K 、professional 、masterpiece 等​

这些词能让 AI生成更精细的图片 。​

2） 写需求文档​

然后写需求文档 PRD.md ：​

​

代码块​

Markdown

# AI 图片生成器 PRD​

​

## 核心功能​

1. 用户输入图片描述，点击生成​

2. 可以选择图片尺寸和风格​

3. 生成过程显示加载动画（ 通常需要 10-30 秒）​

4. 生成后显示图片 ，可以下载​

5. 有"优化提示词"按钮，AI 帮用户优化描述​

​

3）与 AI 对话开发​

有了文档，就可以和 AI 对话开发了。第一步，创建基础界面：​

​

代码块​

Plain Text

请根据 PRD.md 创建 AI 图片生成器的界面：​

1. 输入框：用户输入图片描述​

2. 参数选择：尺寸（ 3 个选项）、风格（ 2 个选项）​

3. 两个按钮：优化提示词 、生成图片​

4. 图片展示区​

​

第二步，实现图片生成功能：​

​

代码块​

Plain Text

实现图片生成功能：​

1. 调用智谱 AI 图片生成 API​

2. 发送 prompt、size、style 参数​

3. 生成过程显示加载动画和提示文字​

4. 生成成功后显示图片​

5. 错误时显示友好提示​

​

图片生成通常需要 10 ~ 30 秒，所以加载提示很重要，要让用户知道正在生成，不是卡住了。​

第三步，实现提示词优化功能：​

​

代码块​

Plain Text

实现提示词优化功能：​

当用户点击"优化提示词"按钮时：​

1. 把用户输入的简单描述发送给 AI​

2. 让 AI 扩展成详细的图片生成提示词​

3. 提示词要包含：主体 、风格 、光线 、色彩 、构图等细节​

4. 把优化后的提示词填回输入框​

​

这个功能很实用 ，可以帮助不会写提示词的用户生成更好的图片 。第四步，添加历史记录：​

​

代码块​

Plain Text

实现历史记录功能：​

1. 每次生成成功后，保存到 LocalStorage​

2. 保存内容：提示词 、图片 URL、生成时间​

3. 左侧显示历史记录列表（ 缩略图 + 提示词）​

4. 点击历史记录可以查看大图​

5. 支持删除历史记录​

​

第五步，添加下载功能：​

​

代码块​

Plain Text

​

比如，如果你想生成一只猫的图片 ，可以这样描述：​

​

代码块​

Plain Text

一只可爱的橘猫，坐在窗台上看着外面的雨 ，温暖的室内光线，柔和的色调，细腻的毛发质感，景深效果，高清画质，4K。​

​

这样的描述包含了所有关键要素，生成的图片质量会更好。​

如果你不确定怎么写提示词，可以让 AI 帮你 。比如你想生成一张图片， 内容是一个程序员在咖啡厅写代码 。你可以告诉 AI：​

​

代码块​

Plain Text

我想生成一张图片， 内容是：一个程序员在咖啡厅写代码 。请帮我把这个描述扩展成详细的图片生成提示词。​

​

AI 会给你一个详细的描述，包含场景 、光线 、色调 、构图等各个方面 。比如：​

​

代码块​

Plain Text

一位年轻的程序员坐在温馨的咖啡厅靠窗位置，专注地在笔记本电脑上写代码，桌上放着一杯热气腾腾的拿铁咖啡，温暖的下午阳光透过窗户洒在桌面上，背景是模糊的咖啡厅环境，柔和的光线，温暖的色调， 电影感构图，景深效果，高清画质，专业摄影。​

​

如果用的是国外的 AI 绘图模型，英文提示词的效果可能会更好哦​

成本控制建议​

需要注意的是， 图片生成比文本生成贵很多，要注意控制成本 。​

开发测试时用标准质量就够了，不需要用高清质量 ​

优化好提示词再生成，避免反复尝试浪费额度 ​

如果预算有限，可以考虑使用更便宜的替代方案。​

扩展思路​

基础版完成后，可以继续扩展功能 。​

比如添加图片编辑功能，基于现有图片修改；​

支持批量生成，一次生成多张图片 ；​

添加风格预设，一键选择常用风格；​

实现图片放大功能，查看细节；​

甚至可以添加社区分享功能，让用户分享自己生成的图片 。​

​