第 05 课 · 文生图网站

本节任务

从基础到挑战三个层次,根据自己的节奏推进

基础任务

跟着步骤,完整体验一遍流程

用第三方 AI 平台(硅基流动 / Replicate / Hugging Face Spaces)做一个能输入文字、生成图片的网页

进阶任务

在基础上自由发挥与改造

加上多种风格切换、图片下载、历史记录功能

挑战任务

突破舒适区,做出个性化作品

做出一个有明确主题的文生图小应用,比如'AI 头像生成器'、'小红书配图工具'

提示词参考

点击右上角"复制"按钮即可一键拷贝到剪贴板

做一个最简文生图网页

帮我做一个文生图网页:
1. 用户输入一段文字描述
2. 点击"生成"按钮,调用 [硅基流动 / Replicate] 的免费文生图模型
3. 在下方展示生成的图片,带下载按钮

技术栈:HTML + JS,单页应用,部署到 Vercel。
告诉我:怎么注册账号、怎么拿 API key、怎么填到代码里。

加风格选择器

在现在的网页上加一个风格选择器(下拉菜单或按钮组),
包含这些预设风格:
- 二次元 / 写实 / 油画 / 像素艺术 / 极简插画

用户选了之后,会自动在他输入的描述前面拼接对应的风格关键词。
比如选"油画"会变成:"oil painting, [用户输入], detailed brushwork"。

做成主题应用

我想把这个工具改造成"AI 头像生成器",专门生成头像。
请帮我:
1. 改首页文案,突出"头像"主题
2. 默认尺寸改成 512x512 正方形
3. 预设风格改成:动漫头像 / 真人写实 / Q 版插画 / 复古肖像
4. 在 prompt 模板里自动加入"portrait, headshot, centered"这类关键词
5. 给应用换个名字和图标

心法解读

用已经封装好的能力,比自己造轮子快 100 倍。

调用 AI 模型有两条路:自己部署模型(贵、慢、难),或者用别人封装好的 API(便宜、快、简单)。 99% 的应用场景,后者就够了。

安全提醒

API Key 是密码,永远不要直接放在前端代码里。课程会教你用一个简单的中转方案保护它。

文生图网站

课程 PPT

教学文档

素材包