我用GPT-4做了一个Midjourney提示词收集插件
这是我的每周使用GPT-4做一个产品的第三周了，上两周的内容分别是《如何利用GPT-4打造高效智能信息收集神器》和《GPT-4编码教程，如何用AI构建和宣传我的Midjourney网站增强插件》，上周已经详细介绍了利用GPT-4编码的一些心得，所以这次会主要介绍浏览器插件的使用方式以及大致介绍一下开发过程中的难点以供大家参考。
背景介绍
我每天基本都会上Midjourney去收集当天比较热门的图片和提示词，但是Midjoureny有个问题就是收藏的交互很不方便，而且收藏的内容也不能筛选。所以可能很多人想做一些提示词模板或者内容合集的时候都有把相关内容收集到自己的数据库里的需求。
这个插件就是这样的工具，支持一键将Midjourney图片详情页的图片提示词和其他信息收集到你自己的Notion数据库中，未来也会支持保存到其他工具例如飞书语雀等。也会支持civitai等SD网站的提示词和信息收集。
具体的演示可以看这个视频：
插件已经开源可以在Github下载：https://github.com/op7418/Prompt-hunter
使用方式
在使用之前大家需要去为自己新建一个Notion API，不要被吓到其实非常简单，进到下面页面按照步骤生成就行只需要填写一下名称以及选择生效的空间就行，申请地址：https://www.notion.so/my-integrations
复制我的这个Notion页面模板，模板主要的作用就是保证数据库的字段标题和插件代码能对应上，不然无法写入内容，这是模板地址，点击右上角的Duplicate复制到你的Notion中：https://sugared-impala-dc6.notion.site/a4cb4f48db4a466783259720f6bce83f?v=72b3be124de44f8b9110b88eb69138f7
接下来需要把你生成的API跟你的页面绑定以便你自己的API可以获得编辑对应页面的权限，具体步骤是点页面右上角的三个点，在Connections中点击Add connections里面找到你刚才创建的API名称点确定。
接下来需要获取你需要保存的Notion页面的页面ID，页面ID就是你这个页面地址里中间的32位字符，比如我这个页面地址https://sugared-impala-dc6.notion.site/a4cb4f48db4a466783259720f6bce83f?v=72b3be124de44f8b9110b88eb69138f7他的页面ID就是（a4cb4f48db4a466783259720f6bce83f）如果你实在分辨不出来你就把页面链接扔给ChatGPT让他帮你输出你的页面ID。
接下来就是从Github下载压缩包：https://github.com/op7418/Prompt-hunter
之后进入Chorme浏览器的扩展管理页面chorme://extensions/打开开发者模式，然后选择选择加载解压缩扩展来加载Prompt hunter文件夹的扩展。
加载扩展后首次使用需要点击扩展，打开设置页面将你获取到的Notion API KEY和页面ID输入进去保存。
需要保存时就点击扩展中的保存到Notion按钮就可以了
开发过程
这次开发我利用了上次《GPT-4编码教程，如何用AI构建和宣传我的Midjourney网站增强插件》总结出来的一些要点所以初期还是比较顺利的，难点主要来自与Midjourney网页的问题。
首先这次我在描述需求的时候比之前细致了非常多我详细描述了需求的背景具体的功能，以及需求涉及到的所有交互链路，还加上了对代码的一些要求。
由于对需求描述比较清晰所以在初期还是比较顺利的GPT-4的输出也规范了很多，而且每个部分都加上了注释方便我理解。
这次由于交互链路非常复杂学到的一个技巧就是，让他在每一个个关键节点都在控制台输出log方便调试和寻找问题，不然点开没有反应浏览器的报错又很迟钝根本找不到哪里错了。
有了这些经验以后插件的调试和定位问题就很简单了，发现问题位置和原因让GPT-4解决就行，很快内容就正常保存到了Notion页面中就在我以为OK了的时候我发现，保存的图片地址都是data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3…271.1%27%20width=%27993%27%20height=%27993%27/%3e 根本打不开，搜了一下居然是用图片懒加载做的反爬机制。这下GPT-4帮不了我了，我必须得自己找到真正的img标签的位置，后来找了好久一层一层看。终于让我找到了，但是还有一个坑它默认加载的是一个32大小的小图，后来对地址进行了拼接才拿到正确的地址。各位如果有相关需求的的可以参考这里的代码以免再走弯路。
第二个比较大的坑是MJ详情页单独作为页面打开和作为浮层打开图片部分的class名称是不一样的，导致我找了很久打了好几个log才定位了问题。const imageContainer = jobPage.querySelector(".relative.h-auto.w-full.false, .relative.h-auto.w-full.overflow-hidden");这段就是解决这个问题的。
之后就顺利了很多，写完之后我还稍微给设置页面的前端组件加了一些样式，让它的填写体验稍微好了一些，也加了NotionAPI和页面ID获取方式的提示。
一些总结
到这里内容基本就结束了，本次的开发过程收获也挺多的，主要就是下面几点：
在代码编写方面多做要求GPT-4的输出结果可读性会好很多
尽量让他多打log，以便能够准确定位问题
由于他的数据库就到21年很多事情不知道，所以你需要给他一些输入，例如对应产品的开发文档。比如他就认为Notion API 支持更改数据库的内容不支持为页面添加内容，于是我直接把Notion那部分的开发文档扔给它，它就会了，学习能力真的强。
还是那句话GPT-4不是全知的所以产出效果很依赖你的输入内容质量，在跟他对话的时候尽量提供详细的完整的信息
感谢各位能够看到这里，如果觉得我的内容对你有帮助也欢迎转发给你的朋友或者同事。