风之馨老郭带你学 AI，垂直领域大模型专家架构师、风之馨团队合伙人，毕业于山西 211 高校，拥有十年互联网研发与架构经验。现任 AI 编程俱乐部主理人，以实战案例分享 AI 赋能编程，提升开发效率，坚守价值优先、拒绝割韭菜，与你共同成长。
AI文生图-用嘴画画 · AI编程分享 · 第002期
不会画画？没关系，打字就行——我用AI搞了个文生图工具
我是老郭，又来了。
上一期搞的那个AI抽签大家看了之后好多人私信问我能不能再出一期，行吧那就继续。这次做个更实用点的——文生图，就是你告诉AI你想要一张啥样的图，它给你画出来。
一、咋回事呢
说来也不是什么大事。
前两天我写完上一期推文之后要配张封面图嘛。按以前的习惯呢就去网上找呗，千图、包图、花瓣挨个翻。你猜结果咋样？千图网点进去——VIP专享。包图网点进去——VIP专享。我：行吧。
然后就去了花瓣网。花瓣倒是不收钱了，但给我的图分辨率低得离谱，放到公众号封面上糊成像素块了都……找了差不多二十分钟勉强挑了一张，点开大图一看，中间甩了个贼大的水印。
我当时真的有点上火。
窝在沙发上歇了会刷手机，突然想到——诶不对，我折腾AI什么的也有一阵了，ModelScope上面那些绘画模型完全免费啊我怎么把这事给忘了？自己搞一个不就完了么？想画啥画啥多省事。
而且做出来还能当开源项目拿来分享，多好。上周那个抽签的项目一发出来好多人说跟着做出来了很有成就感，这回再来一个让大家继续练手呗。
二、看看成品
直接上图了啊我也不铺垫了。
走的暗色科技风。背景深蓝色带渐变那种，输入框我搞了个磨砂玻璃的效果——就是半透明能看到后面背景的那种。对了背景还有一些小蓝点在慢悠悠地飘，我调了半天那个飘的速度，太快了像下雨太慢了看不出来在动，最后选的0.3像素每帧。
说实话做完我自己看了一会还挺满意的。你们想想我上次那个抽签项目的界面……算了别想了我怕被你们嘲笑。
操作就三步，在框里描述你要啥图、点按钮、等十几秒。没了。
我自己测试的时候输了一段赛博朋克城市的描述：
再来个大家都喜欢的美女图片吧:
出来的那一瞬间我眼睛瞪大了说真的。免费额度画出来的东西质量能到这种程度？做封面图、PPT配图妥妥够了。哦对了还有个好玩的，哪怕你输完全一样的词，每次出图都不重复的。
还想生成什么图片的可以评论区留言，老郭一定给各位安排~三、原理啥的（讲快一点）
怕有人又说看不懂。我用大白话讲一下，一分钟翻过这节。
简单说就是：网页上你写的话 → 发给后台服务 → 后台转交给AI画图模型 → 画好了给你看。就这么回事。跟你扫码点餐一样的道理嘛——你点菜、后厨做、做完上菜、你开吃。
网页我用的HTML+CSS+JS老三样，没上框架。后台 Node.js + Express——跟上期一模一样的配置。至于画图的模型我翻了半天最后用了ModelScope上面一个叫 Z-Image-Turbo 的。
选它的原因特别简单粗暴——它免费。MidJourney我查过一个月30刀，二百多块人民币呢。我就画个封面配图而已不至于吧？
安全方面你们放心，API Key什么的我藏在后端环境变量里了。你打开浏览器F12翻到天荒地老也看不到。十年老后端了这种事不会犯错的。
四、喂饭式教程
上次那期评论区有人说"看着简单但是我真的搞不出来"，这次我再写仔细一点。
Node.js——你就当是个软件，装了之后电脑才能跑我的项目。去 nodejs.org 官网下载安装，无脑下一步就行。装完之后开终端（Mac搜Terminal，Win搜CMD）输node -v，弹版本号说明对了。
下载项目——打开我GitHub的项目页面（项目地址私信获取），看到一个绿色的 Code 按钮没有？点它然后选Download ZIP。下载完解压。会用git的话直接clone也行不多说了。
装依赖——在项目目录里开终端敲 npm install。就这一行等它跑完就行了。
填API Key——去 modelscope.cn 注册，进个人设置页面找到你的API Token复制。然后项目里面有个.env.example文件，复制一份改名成.env，把Token贴进去。
跑起来——敲 npm run dev，看到 "文生图服务已启动" 就成了。浏览器打开 localhost:3000，画画去吧。
真就这么多。
五、提示词的事
出图好不好关键看你给AI的描述词。这个我研究了一晚上得出一个结论——用英文写比中文效果好很多。估计是训练数据的问题我也不确定。
英文不好的兄弟先别急着划走——你打开通义千问或者任意一个聊天AI，直接跟它说"帮我把这段话翻译成AI画图用的英文提示词"，两秒钟给你搞定。我自己就是这么干的不丢人。
文章里不方便贴太多了，我把几段我常用的放在了项目README文件里你们自己去看吧。科幻的、山水的、抽象艺术的都有。
六、有基础的看这个
这篇照顾零基础的朋友，没啥难度。已经玩过AI编程的可以看我之前那篇Agent Skill的：
👉 AI编程进阶 - Agent Skill 使用
那篇说的是怎么让AI编程助手更懂你的代码，比今天这个难一档但是挺有用。
七、最后
GitHub上全部开源了，随便拿走随便改。
做这个项目我其实没花多长时间，比上次那个抽签的快多了——原因是踩过一遍坑了该知道的流程都知道了。上次光调那个灯笼的CSS动画就搞到凌晨一点，这回聪明了知道哪些东西该让AI帮忙哪些得自己拿主意。
对了好多新关注的朋友问我为什么开始做这个号。原因很简单——市面上那些AI编程的课我看了不少，动不动收几千块，进去一看换汤不换药。与其让大家花冤枉钱不如我自己做开源项目分享出来，起码代码实打实摆在那随便看。不图别的就图个心安。
好了好了不煽情了。
项目地址：如果看完整篇文章觉得对你有帮助的请私信获取源代码!
都读到这里了，江湖最大礼仪，关注走一波呗⭐ 攒人品！
有问题评论区聊～
——老郭，毕业于山西唯一一所211高校，写了十年代码和架构设计，2023年底ChatGPT（GPT-3.5）开始爆火的时候就开始All in AI。公号「风之馨老郭带你学AI」，专治各种割韭菜。
