Midjourney Prompt

搞技术的就烦这些个，记又不住学又学不会，干脆搞个开源工具，可以傻瓜式使用。

第一步: 收录关键词

官方文档和网络上都有，写个爬虫教程搞一些。

所谓开源，就不能挂接口了，直接封装成json

第二步：搭建可视化配置

使用框架快速搭建一个tab页，通过描述词和权重设置过滤器，

文本：用以拼接描述语句
图片：用以融图功能
过滤器：用来添加关键词，并支持设置关键词权重
参数：用来追加MJ所支持的各种参数，提示：支持5.1哦

export const filtersAllData: any = {
  Layouts: [
    {
      prompt: 'chart design',
      label: 'Chart Design',
      image: 'chart-design.png',
      label_zh: '图表设计',
    },
    {
      prompt: 'album cover',
      label: 'Album Cover',
      image: 'album-cover.png',
      label_zh: '专辑封面',
    },
    {
      prompt: 't shirt vector',
      label: 'T Shirt Vector',
      image: 't-shirt-vector.png',
      label_zh: 'T恤矢量',
    }
]
}
...

第三步：暴露优化后的提示词

// 回显过滤
      backFilterList(val: string) {
        if (val) {
          const arr = val.split(',');
          const result: any = [];
          arr.forEach((item: any) => {
            let curVal = item;
            let weightVal = '';
            if (item.includes('::')) {
              curVal = item.split('::')[0];
              weightVal = item.split('::')[1];
            }
            for (const key in filtersAllData) {
              const cur = filtersAllData[key];
              for (let i = 0; i < cur.length; i++) {
                if (cur[i].prompt === curVal) {
                  const current = {...cur[i]};
                  if (weightVal) {
                    current.save = true;
                    current.showValue = weightVal;
                    current.weightValue = weightVal;
                  }
                  result.push(current);
                }
              }
            };
          });
          store.commit("promptBuilder/updatePromptFilters", result);
          if (result.length) {
            methods.getFiltersChosed();
          }
        }
      },
      // 复制
      async copyInfo() {
        if (!state.promptResult) return;
        try {
          await toClipboard('/imagine prompt: ' + state.promptResult);
          message.success("复制成功");
        } catch (err: any) {
          console.log("toClipboard error: ", err.message);
          message.warning("复制失败");
        }
      }

第四步：展示效果

第五步：使用方法

为了兼容各种网站一键嵌入，可以按需隐藏，一行代码接受回调参数

 <body>
  <div>
    <button class="btn-target">点击打开抽屉</button>
    <div><textarea id="Prompts" placeholder="这里输出指令"></textarea></div>
  </div>
  <img src="./images/6-res.png" width="30%" alt="">
</body>
<script>
  IframeShare(
    {
      btnEl: 'btn-target',
      url: "https://punk.openai1s.com/aiimg/prompt?nohead=1&postmsg=1",
      mode: "slider",
      position: 'right',
      width: '650px',
      preload: true,
      defaultOpen: false,
      allowRepeatSubmit: true
    });
  //监听prompt参数
  const prompts = document.getElementById('Prompts')
  window.addEventListener('message', function (event) {
    if (event.origin === 'https://punk.openai1s.com') {
      console.log(event.data, '打印加工后的prompt')
      prompts.innerHTML = event.data
    }
  });
</script>