GPT-4编码教程，如何用AI构建和宣传我的Midjourney网站增强插件
这是我用GPT-4成体系做的第二件事情了，上一件是上周发的《如何利用GPT-4打造高效智能信息收集神器》，刚好立一个小的flog，挑战一下一周出一个小产品。这篇文章会详细描述我的构思和与GPT-4沟通的过程以及踩过的坑，包括宣传图背景是如何用Midjourney做的，如何利用简单的工具排版生成宣传内容，希望能够对各位有一些帮助。
背景介绍及插件下载
像我这种英语不好的人使用Midjourney或者Stable Diffusion的时候一个很痛的痛点就是提示词的翻译，因为有时候提示词特别长，使用正常的翻译工具要不只能一个词一个词翻译，要不就只能整段翻译，那这个对我我们理解整个提示词的结构和替换部分内容的时候就很困难。
所以我就想到了这样一个插件，可以按照提示词作者原有的语义分割自动翻译提示词的部分，同时由于加上了自动的翻译文案，再通过鼠标选择复制提示词就会有些困难，所以索性加上了一个快捷复制的按钮方便复制，更深入一点还可以一键发送到Discord的输入框。
具体的功能演示可以看我录制的这个视频：
插件的代码我也已经开源了，想要使用的话去这里下载：https://github.com/op7418/Mijourney-enhanced
以下是插件的使用方式：
下载压缩包后解压；
将 content_script.js 文件种的 API KEY 改成你自己的 Google 翻译 API KEY，后续将支持 ChatGPT 翻译；
Google翻译API的申请教程可以看这里，每个月50万的免费额度够自己用了。申请教程：https://bobtranslate.com/service/translate/google.html；
进入 Chrome 浏览器扩展页面选择打开开发者模式；
选择加载解压缩的扩展来加载扩展；
安装后扩展将自动在Midjourney图片的详情页触发；
总结和反思出的技巧
我也根据自己的实现过程中踩得坑和最近看别人和GPT-4协作的过程总结了一些技巧和要点分别为信息输入和优化调整两部分，如果懒得看后面的开发过程可以直接看这里，不过还是建议看一下具体过程才能对这些技巧有更深刻的理解。
信息输入
提前自己梳理需求内容和目标，最好在别的地方先写好在粘贴进去。像平时写PRD那样，不要偷懒，你偷懒他就会教你做人，特别是复杂任务。
按照正常的软件开发角色的和流程给他设定角色，不同角色需要做的事情开多个聊天窗口做，比如先让它输出整体架构再去另一个聊天里输出具体代码，甚至前端和后端分开，每个模块分开输出。
详细的描述需求包括需求的背景，你希望实现的方式涉及到了哪些外部软件的联动，各个内容之间交互方式是什么样的。
期望它输出的结果：包含的内容和要求，主要是明确需要他产出的内容。
你对内容的要求：明确一些具体的要求包括解释每一个方案选择的具体原因和相关文档、代码结构、每个关键的代码结构都要加上注释等。
优化调整
如果在沟通过程中频繁出现问题可以采取以下方式：
一次只实现一个模块或者一个功能渐进式的推进项目，降低问题的复杂程度；
当输出结果频繁出现问题的时候重新审视你自己给出的信息，包括是否存在描述的不够全面或者有歧义；
可以从其他渠道获取一些信息，比如要求GPT给你一些官方文档的地址去查看；
如果遇到了GPT记忆的内容出现问题你需要重新完整的将现在的内容跟他同步一一次。
开发过程
这里介绍一下跟GPT-4协同开发的过程和一些关键节点，包括一些踩过的坑。本来想分享完整的对话来着但是太长了gpt.best 老是失败。
刚开始我只是粗略的跟他说了一下需求，非常简略。它就输出了具体需要做的步骤和具体代码，包括追问你的需求细节，查看开发文档的建议，以及项目文件结构，每个文件的具体代码。但这是有问题的，各位不要学我，这会造成后面的很多问题。
之后我按照他的指导创建了文件夹、文件和需要的图标，并将代码粘贴了进去。
我按照他给的方式开始在浏览器上运行插件开始调试果不其然开始报错了，之后就是不断给他反馈报错的内容让他修改。
这里我说一下自己做的比较好的地方就是一次只实现一个功能，本来我就是想分段翻译提示词的，但我先让他整段翻译，这样比较简单也好定位问题。
接下来在调试的过程中之前提示词过于简单的副作用就体现出来了，我只告诉他是只翻译指定网页的内容并没有告诉他应该是哪个网页，导致一直报错，而且他自己的改动也无法修复问题。
后来是我自己发现在manifest.json文件中有一段"matches": ["*://*.example.com/*"]于是就问他这是什么意思，他才说这是指定网页的示例需要我替换为自己需要的网页地址（我一口老血）。
改动之后和补充其他信息（比如需要翻译位置的Class名称）之后果然翻译顺利出现在了提示词之后。终于有点正向反馈了没有让我放弃。
之后就是开始让他分开翻译，将翻译分别放在提示词P标签下不同的span标签里面，这样就能实现分段翻译了，为了方便理解我贴一下Midjourney详情页面这部分的DOM结构。
之后它实现的很好，翻译果然顺利出现在了不同的span后面，只是有个小问题是标点符号也被翻译了，我又让他把标点符号过滤掉，也成功了。
只剩下一个问题就是翻译被重复输出，每个内容后面跟了两个翻译，我心想终于要完成了原来这么简单。
接下来噩梦来了，无论它怎么改都无法去掉重复翻译的问题。我跟他反复因为这个问题对话了起码20轮，它每次都说自己错了，然后改动之后依然无法解决问题。
之后在洗澡的时候我反应过来了，可能不是GPT的问题，还是我描述不够详细的问题，那个P标签下的Span标签里面还有一层Span标签所以导致循环会执行两次。于是我又重新跟他描述了一下果然顺利解决了。
之后遇到了比如它给的代码是基于 Manifest MV2版本的需要升级到V3等问题，吸取了之前的经验之后也顺利解决了。
最后是一个输出长内容的时候GPT很容易出现的一个问题，他会忘记之前自己写的东西开始丢三落四。这个问题需要双管齐下去解决，首先是像刚开始说的按角色或者模块开多个聊天窗口去输出。
另外就是识别到它记性开始变差的时候需要将已有的信息重新更他同步一次。让他从正确的内容上继续输出。
最后它给的按钮样式非常简陋就是个文字，我也询问了一下如何更改样式等。加上了一些符合Midjourney整体视觉风格的样式。让按钮不要那么突兀。
到这里整个插件的核心内容已经搭建完成了，由于隐藏API KEY还需要搭建一个后端服务，我图省事就没有上浏览器应用商店。
宣传内容生成
昨天发预告的时候很多人问我宣传图是怎么做的，其实也借用了一部分AI工具，接下来我介绍一下一个没有设计基础的人如何用工具帮忙搞定产品的宣传。
首先是宣传的背景图，这个漂亮的渐变背景是用Midjourney生成的提示词也很简单，后面的颜色部分可以改成自己需要的。
light mode gradient background soft solid, excessive curve, orange blue pink, Soft and excessive --ar 3:2 --stop 70 --v 5
如果需要更加复杂的渐变和纹理也可以将提示词里面的曲线（excessive curve）改成流体（fluid）比如下面这张。
light mode gradient background soft solid, excessive fluid, orange blue pink, Soft and excessive --ar 3:2 --stop 70 --v 5
之后就是排版了我自己是Figma排的版其实Figma已经非常简单好学了，排版的格式可以去producthunt（https://www.producthunt.com/）参考那些比较好的产品宣传图，比如下面这张
如果你实在觉得麻烦的话也可以去Canva（https://www.canva.com/zh_cn/）或者稿定设计（https://www.gaoding.com/）搜应用程序，里面有很多模板改改内容后把你用Midhourney生成的背景图替换进去就行了。
接下来是宣传视频，宣传视频往往比图片和文字描述更加直观，可以获得更好的传播度，这里推荐使用Screen Studio（https://www.screen.studio/）这个工具它可以在你录制完成后自动给视频加上漂亮的背景和动画。就是订阅费有点贵$89一年，如果你的产品不是我这种练手的东西的话还是挺值的买的。也可以自己录制然后用剪映简单处理一下，还是那句话有总比没有强。
好了，所有的内容基本到这里就结束了，看别人用GPT-4编码看起来好像很轻松，亲自尝试以后发现也没有那么轻松，但毫无疑问我以前如果不经过系统的学习根本不可能写出这个插件来。
可能经过上面的内容大家也发现了，能够描述清楚需求并且懂得一些编码逻辑的人可以更好的使用GPT-4完成产品开发，从这方面想对那些优秀的产品经理可能是个非常好的机会。
最后不管怎么样我还是建议多尝试，每天看那些预测和分析并不能帮助你产出一个好产品。只有自己尝试过才知道哪种方式和流程适合自己。
同时跟GPT-4不断交流的过程也是自己不断学习的过程，我刚开始的时候完全不知道它写的东西啥意思，在不断交流的过程中我发现自己可以看懂这些代码了。
GPT-4当然不会取代程序员，他只会让更多的人变成程序员。
感谢各位能够看到这里，如果觉得我的内容对你有帮助也欢迎转发给你的朋友或者同事。