五分钟 实现chatgpt+Midjourney工具 出图ai 变现

已于 2023-05-24 15:49:19 修改
阅读量758 收藏 3
点赞数 1
文章标签： chatgpt midjourney
于 2023-05-24 15:46:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxcvbnm6859/article/details/130848653
版权
文章详细介绍了如何在Laf云平台上部署和使用Midjourney的API接口，包括创建云函数来处理消息检索、生图任务、图片放大和变换功能。同时，提供了前端渲染示例代码，展示了一个用户交互界面，允许用户提交生成图片的请求并显示结果。
摘要由CSDN通过智能技术生成

首先感谢laf提供免费使用Midjourney API接口和云函数，需要详细了解的可以访问他们的官网论坛。
感谢论坛前面几位的分享，我做了参考。都有参考就不列啦哈！！！

直接开始：

第一步

复制MJ-SEND云函数到laf云平台，并发布获得云函数访问地址“https://xxx.laf.dev/mj-sent”

import cloud from '@lafjs/cloud'
import { Midjourney, MidjourneyMessage } from 'midjourney'
const SERVER_ID = '' // Midjourney 服务 ID
const CHANNEL_ID = '' // Midjourney 频道 ID
const SALAI_TOKEN = '' // Midjourney 服务 Token
 
const Limit = 100
const MaxWait = 3
 
const client = new Midjourney({
  ServerId: SERVER_ID,
  ChannelId: CHANNEL_ID,
  SalaiToken: SALAI_TOKEN,
  Debug: true,
  SessionId: SALAI_TOKEN,
  Limit: Limit,
  MaxWait: MaxWait
});
 
export default async function (ctx: FunctionContext) {
  const { type, param } = ctx.body
  switch (type) {
    case 'RetrieveMessages':
      return await RetrieveMessages(param)
    case 'imagine':
      return await imagine(param)
    case 'upscale':
      return await upscale(param)
    case 'variation':
      return await variation(param)
  }
 
}
 
// 查询最近消息
async function RetrieveMessages(param) {
  console.log("RetrieveMessages")
  const client = new MidjourneyMessage({
    ChannelId: CHANNEL_ID,
    SalaiToken: SALAI_TOKEN,
  });
  const msg = await client.RetrieveMessages();
  console.log("RetrieveMessages success ", msg)
  return msg
}
 
// 创建生图任务
async function imagine(param) {
  console.log("imagine", param)
  const { question, msg_Id } = param
  const msg = await client.Imagine(
    `[${msg_Id}] ${question}`,
    (uri: string, progress: string) => {
      console.log("loading", uri, "progress", progress);
    }
  );
  console.log("imagine success ", msg)
  return true
}
 
// upscale 放大图片
async function upscale(param) {
  console.log("upscale", param)
  const { question, index, id, url } = param
  const hash = url.split("_").pop()?.split(".")[0] ?? ""
  console.log(hash)
  const msg = await client.Upscale(
    question,
    index,
    id,
    hash,
    (uri: string, progress: string) => {
      console.log("loading", uri, "progress", progress);
    }
  );
  console.log("upscale success ", msg)
  return msg
}
 
// variation 变换图片
async function variation(param) {
  console.log("variation", param)
  const client = new Midjourney({
    ServerId: SERVER_ID,
    ChannelId: CHANNEL_ID,
    SalaiToken: SALAI_TOKEN,
    Debug: true,
    SessionId: SALAI_TOKEN,
    Limit: Limit,
    MaxWait: 100
  });
  const { question, index, id, url } = param
  const hash = url.split("_").pop()?.split(".")[0] ?? ""
  const msg = await client.Variation(
    question,
    index,
    id,
    hash,
    (uri: string, progress: string) => {
      console.log("loading", uri, "progress", progress);
    }
  );
  console.log("variation success ", msg)
  return msg
}

第二步 写一个前端渲染效果

 <html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/3.19.1/gradio.js"></script>
    <!-- import vue -->
    <script src="https://unpkg.com/vue@next"></script>
    <!-- import Elm CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- import Elm JavaScript -->
    <script src="https://unpkg.com/element-plus"></script>
    <!-- import axios -->
    <script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
    <title>mj</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        background-color: #f5f5f5;
      }
      #app {
        width: 1000px;
      }
      .task {
        border: 1px solid #ddd;
        background-color: #fff;
        border-radius: 10px;
        margin-bottom: 20px;
        padding: 20px;
      }
      image {
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
 
    <div id="app">
      <el-form>
        <el-form-item>
          <el-input type="textarea" v-model="question" placeholder="请输入要生成的图片内容，尽量使用英文"></el-input>
          <el-button style="margin-top: 10px;" type="primary" @click="submit" :loading="loading">提交</el-button>
        </el-form-item>
      </el-form>
      <div class="result" style="margin-top: 10px;">
        <h1>我的作品</h1>
        <div v-for="(item, index) in tasks" class="task" :key="item.msg_Id">
          <p>任务id： <el-button link type="primary">{{item.msg_Id}}</el-button> </p>
          <p>{{item.question}}</p>
          <p>
            <el-button type="primary" @click="getResult(item.msg_Id)">刷新</el-button>
          </p>
          <template v-if="item.result">
            <el-image fit="scale-down" lazy :src="item.result.url" :alt="item.question"></el-image>
            <p>
              <el-button type="primary" plain @click="variation(item, 1)">V1</el-button>
              <el-button type="primary" plain @click="variation(item, 2)">V2</el-button>
              <el-button type="primary" plain @click="variation(item, 3)">V3</el-button>
              <el-button type="primary" plain @click="variation(item, 4)">V4</el-button>
            </p>
            <p>
              <el-button type="primary" plain @click="upscale(item, 1)">U1</el-button>
              <el-button type="primary" plain @click="upscale(item, 2)">U2</el-button>
              <el-button type="primary" plain @click="upscale(item, 3)">U3</el-button>
              <el-button type="primary" plain @click="upscale(item, 4)">U4</el-button>
            </p>
            <template v-if="item.result.upscaleUrl">
              <h5>大图</h5>
              <el-image fit="scale-down" lazy :src="item.result.upscaleUrl" :alt="item.question"></el-image>
            </template>
          </template>
        </div>
        <h2>其他人的作品</h2>
        <div v-for="item in otherCase" :key="item.id" class="task">
          <h3>prompt：{{ formatPrompt(item.content) }}</h3>
          <h3>time：{{ formatDate(item.timestamp) }}</h3>
          <div v-for="attachment in item.attachments" :key="attachment.id">
            <el-image fit="scale-down" lazy :src="attachment.url" :alt="formatPrompt(item.content)"></el-image>
          </div>
        </div>
      </div>
    </div>
    <script>
      const App = {
        data() {
          return {
            question: "",
            msg_Id: "",
            loading: false,
            tasks: [],
            otherCase: []
          };
        },
        mounted() {
          this.initTask()
          this.getOtherCase()
        },
        methods: {
          initTask() {
            this.tasks = JSON.parse(window.localStorage.getItem('task') || JSON.stringify([]))
          },
          submit() {
            this.msg_Id = grs()
            this.loading = true
            axios({
              method: 'post',
              url: 'https://rpcqmo.laf.dev/mj-service',
              data: {
                type: 'imagine',
                param: {
                  msg_Id: this.msg_Id,
                  question: this.question
                }
              }
            }).then(res => {
              console.log('[ res ] >', res)
              this.$message.success("上传成功，正在画图，请稍后...")
              window.localStorage.setItem('task', JSON.stringify([
                { msg_Id: this.msg_Id, question: this.question, result: null },
                ...this.tasks
              ]))
              this.initTask()
              this.getResult(this.msg_Id)
            }).catch(err => {
              console.log('[ err ] >', err)
            }).finally(() => {
              this.loading = false
            })
          },
          getResult(msg_Id) {
            axios({
              method: 'post',
              url: 'https://rpcqmo.laf.dev/mj-service',
              data: {
                type: 'RetrieveMessages'
              }
            }).then(res => {
              console.log('[ res ] >', res)
              const { data } = res
              const resIndex = data.findIndex(item => item.content.includes(msg_Id))
              if (resIndex < 0) {
                this.$message.success('正在努力生成，请耐心等待')
                return
              }
              const { id, attachments } = data[resIndex]
              if (!attachments.length) {
                this.$message.success('正在努力生成，请耐心等待')
                return
              }
              const { url, width } = attachments[0]
              if (width >= 2048) {
                const myIndex = this.tasks.findIndex(item => item.msg_Id == msg_Id)
                this.tasks[myIndex].result = {
                  id,
                  url
                }
                window.localStorage.setItem('task', JSON.stringify(this.tasks))
              } else {
                this.$message.success('正在努力生成，请耐心等待')
                return
              }
            }).catch(err => {
              console.log('[ err ] >', err)
            }).finally(() => {
            })
          },
          variation({ result, question, msg_Id }, index) {
            console.log(result, question, index);
            this.$message.warning('努力开发中')
            return
            axios({
              method: 'post',
              url: 'https://rpcqmo.laf.dev/mj-service',
              data: {
                type: 'variation',
                param: {
                  id: result.id,
                  url: result.url,
                  question,
                  index
                }
              }
            }).then(res => {
            }).catch(err => {
              console.log('[ err ] >', err)
            }).finally(() => {
            })
          },
          upscale({ result, question, msg_Id }, index) {
            console.log(result, question, index);
            // this.$loading('正在生成大图')
            const loadingInstance = this.$loading({
              lock: true,
              text: '正在生成大图...',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            });
            axios({
              method: 'post',
              url: 'https://rpcqmo.laf.dev/mj-service',
              data: {
                type: 'upscale',
                param: {
                  id: result.id,
                  url: result.url,
                  question,
                  index
                }
              }
            }).then(res => {
              const { data } = res
              console.log('[ upscale data ] >', data)
              const taskIndex = this.tasks.findIndex(item => item.msg_Id == msg_Id)
              this.tasks[taskIndex].result.upscaleUrl = data.uri
              window.localStorage.setItem('task', JSON.stringify(this.tasks))
            }).catch(err => {
              console.log('[ err ] >', err)
            }).finally(() => {
              loadingInstance.close();
            })
          },
          getOtherCase() {
            axios({
              method: 'post',
              url: 'https://rpcqmo.laf.dev/mj-service',
              data: {
                type: 'RetrieveMessages'
              }
            }).then(res => {
              const { data } = res
              this.otherCase = data.filter(item => item.attachments.length)
            })
          },
          formatPrompt(str) {
            return str.substring(str.indexOf(']') + 1, str.indexOf('--seed')) + `（${str.substring(str.indexOf('[') + 1, str.indexOf(']'))}）`
          },
          // 格式化日期时间
          padLeftZero(str) {
            return ('00' + str).substr(str.length);
          },
          formatDate(date, fmt = "yyyy-MM-dd hh:mm:ss") {
            if (/(y+)/.test(fmt)) {
              fmt = fmt.replace(RegExp.$1, (new Date(date).getFullYear() + '').substr(4 - RegExp.$1.length));
            }
            const o = {
              'M+': new Date(date).getMonth() + 1,
              'd+': new Date(date).getDate(),
              'h+': new Date(date).getHours(),
              'm+': new Date(date).getMinutes(),
              's+': new Date(date).getSeconds()
            }
            for (const k in o) {
              if (new RegExp(`(${k})`).test(fmt)) {
                const str = o[k] + '';
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str));
              }
            }
            return fmt;
          },
        }
      };
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");
      function grs() {
        return 'Charlie-' + 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
          var r = Math.random() * 16 | 0,
              v = c == 'x' ? r : (r & 0x3 | 0x8);
          return v.toString(16);
        });
      }
    </script>
  </body>
</html>

第三步 上传服务器或者找个空间也可以本地访问

zxcvbnm6859
关注
拆解：用ChatGPT和Midjourney做故事号！
xiaoshun007的专栏
02-04 367
使用 ChatGPT来完成，只需告诉 ChatGPT， 你感兴趣的故事类型，它就会为你推荐一些热门的、无版权的小故事，或者根据你的要求创作原创故事。当进入平台后，只需要通过输入指令，MJ会探索无尽的可能性，将您的想象力转化为绚丽的画面。MJ平台不仅提供了丰富多样的元素和图像模型库，还提供了灵活的调试功能，可以不断微调每一幅插图，直到达到完美的效果。无论是奇幻的冒险故事、动人的爱情故事，还是令人惊叹的科幻世界，都可以选择背景、角色、道具等元素，根据故事情节的发展逐渐添加细节，塑造出所需的场景。
【AI写作】怎样使用AI写作每天赚钱？—— 使用 AI 写作和每天产生被动收入的终极指南
热门推荐
AI天才研究院
03-17 2万+
关键词：人工智能写作，人工智能文案，内容生成软件，自动化写作工具，人工智能赚钱人工智能写作是利用人工智能技术为各种目的生成内容。人工智能文案通常涉及使用自动写作工具或内容生成软件，这些软件使用自然语言处理和机器学习算法来创建人类可读且准确的内容。人工智能写作可用于生成博客文章、文章、网络副本、新闻稿以及其他类型的内容。人工智能写作还可用于制作广告、营销文案和其他类型的文案。人工智能写作可以通过自动创建内容来帮助公司节省时间和金钱。公司可以用AI写作快速准确地生成内容。
GPT4.0+Midjourney=最佳组合,简单玩法
全栈川川
05-10 1878
GPT4.0+Midjourney=最佳组合,简单玩法
ChatGPT+Midjourney融合
li1441853031的博客
06-28 533
无论你是需要交流工作上的问题👩‍💼，还是想要寻找一位陪伴你的心灵伙伴💑，这个工具都能够让你体验到与真人对话一样的感觉！无论你是需要找到一本引人入胜的书籍推荐📚，还是想了解最新的时尚潮流💃，亦或是寻找一家特色餐厅的推荐🍽️，这个组合工具都能够满足你的各种需求！无论你是需要更智能的对话交流、满足各种需求，还是提升工作效率和学习能力，ChatGPT+Midjourney融合都能够成为你身边最得力的助手！图片4：一张充满惊喜和想象力的图片，代表ChatGPT+Midjourney融合带来的意想不到的改变和惊喜。
Midjourney API 接口调试
lipalap的博客
04-25 4603
本地服务使用了 Midjourney 最近关注AI比较多 自己实现了一个AI绘画 Midjourney的接口。通过发送关键词就能实现绘画，发现需要的人也挺多的 准备提供出去，不知道需要的人多不多。最近写了一个Midjourney API的接口，可以通过调用接口实现AI绘画。如果要可以来找我 lipalap。
零基础手把手教你如何使用Laf免费玩转Midjourney后续之前端整合
Happiness is everywhere
05-24 707
上篇讲述了零基础手把手教你如何使用Laf免费玩转Midjourney，下面将讲解如何结合前端完成终极体验！
Midjourney可以通过接口调用啦
riyuexinzhu的博客
11-26 988
在数字艺术创作领域，Midjourney一直以其出色的图片生成效果受到广泛关注。然而，由于需要通过discord界面操作等一系列限制，也给很多用户带来了不便。现在，通过日月摘星接口，用户可以直接访问和调用midjourney，大大简化了操作流程。更重要的是，这一接口可以快速集成到各种产品中，为用户提供更加便捷的服务。无论是设计师寻求灵感，还是企业需要定制化的视觉内容，日月摘星接口都能提供强有力的支持，让创意和效率并行不悖。仅需要2步，快速使用Midjourney接口。
ChatGPT 史上最全AI工具大集合
05-13
总之，ChatGPT及其周边的AI工具大集合展示了人工智能的无限可能性。随着技术的不断进步，我们可以期待一个更加智能化、高效化的未来。然而，同时也要注意，合理使用和规范AI的发展，避免伦理和隐私问题，以确保科技...
2023年AI工具从入门到精通教程合集-AI绘画技术应用到各类场景（17课）.zip
08-24
3、三:AI-绘画的工具准备：Midjourney使用.pdf 4、四、AI-绘画的工具港备:Stable-Diffusion使月.pdf 5、AI-绘画的工具准备：Stable-Diffusion本地化.pdf 6、AI绘画提示词魔法的学习.pdf 7、AI绘画提示词魔法的应用....
深入浅出AI落地应用分析：AI个人助手Monica
女王の专属领地
01-31 2134
产品链接官方介绍： Monica是一个使用最先进的AI模型（GPT-4、Claude、Bard 等）帮助你对话、搜索、写作、翻译的一站式AI助手，并且提供多种图片、视频、PDF处理的工具。Monica是一款基于Google浏览器的Chrome扩展插件，主打AI assistant，它通过增强Chatgpt模型，提高您的工作效率，让您第一时间体验最核心、最前沿的AI技术。只需在任意网页上按下Cmd+M或Ctrl+M，即可与Chatgpt聊天。📌 产品定位现在。
GPT3.5、GPT4及Midjourney中转接口ChatGPT系统KEY使用方法
ttbobocom的博客
03-16 1811
很多使用ChatGPT系统、还有SparkAi、NineAi等系统都存在个比较烦的问题，Openai API 3.5KEY 4.0KEY，Midjourney接口KEY都没有一个稳定的购买或者使用渠道。直连KEY买来还得得建立反代主机，Midjourney接口通过MJ-PROXY-PLUS系统折腾了几天也能使用了，最终还得在官方开卡充值比较麻烦，折腾下来最省事还是使用中转接口更方便，费用算下来也不高，今天交流一下如何使用中转接口来满足以上几个系统使用。再到KEY池填上刚才取到的令牌KEY即可使用。
无需魔法，教你Midjourney随意用【内附源码】【示例】
xiealan的专栏
05-22 2673
背景介绍，熟悉的同学可以略过。因为midjourney官方没有提供API功能，所以有国外大神将开源了一款模拟请求工具，来请求midjourney，laf将这代码集成到内部的npm包中。如果需要github地址，欢迎留言，我私信给您。 所以laf平台，加上下面的实例代码可以很好的快速接入到系统中。
【ChatGPT实战】9.使用ChatGPT-+-Midjourney-帮忙做了个App
墨柒子
05-09 1656
在当今数字化的时代，手机App已经成为人们生活的重要组成部分。开发一个优秀的手机App需要付出大量的时间和精力，特别是在设计和开发阶段。但是现在我们可以借助工具和技术来协助自己简化这个过程。在这篇教程中，我将介绍如何使用ChatGPT和Midjourney来帮助我们开发一个高质量的手机App。ChatGPT不仅可以帮助我们生成各种类型的文本，它跟Midjourney合并，简直无敌，比如可以帮助我们快速的开发出一个高质量的手机App。
ChatGPT+Midjourney实现儿童绘本故事及其插图（数字1~10的故事）
孙佰贵的专栏
12-16 2万+
近期AI对话技术与AI绘画技术突飞猛进。本文尝试结合AI对话与AI绘画进行儿童绘本内容的创作，发现AI对话技术已经超越大部分人类水平。但是AI绘画在精细的主体个数以及主体动作语义的理解上还远未达到人类水平。
ChatGPT 和 Midjourney 将改变我们的生活,日常工作流程将完全改变并与这些新型工具集成
iCloudEnd的博客
12-06 4930
上周末我花了很多时间先玩 Open AI ChatGPT，然后玩 Midjourney。起初我笑了，然后我开始完全被各种可能性所困扰，然后我终于意识到了它的潜力，并开始将其用于更有成效的工作。注意：我本可以用它来制作一个引人入胜的点击诱饵标题，但我没有.这是我问 Open AI 聊天的第一件事，它确实有效。无需搜索 Google 或 Stack Overflow，它就可以“想象”出简单的代码，并准确地编写出我所要求的内容。为了兴奋，您必须了解以下代码很可能不在任何在线可用的代码示例中，或者至少不是以这种方式
【ChatGPT】什么是ChatGPT：基础介绍与使用场景
weixin_39372311的博客
10-15 930
在当今科技快速发展的时代，人工智能工具正逐步融入我们生活的方方面面。你是否曾在编写报告时陷入思路停滞？或者在客户服务中焦急等待响应？这些问题，随着ChatGPT的出现，正逐渐变得容易解决。本文将详细介绍什么是ChatGPT，以及它在实际生活和工作中的应用场景。ChatGPT 是 OpenAI 开发的基于模型的对话生成工具。其主要特点是能理解上下文，生成自然语言文本，模拟出与人类交流的对话。Chat：代表与用户进行互动式的对话能力。GPT。
阿里巴巴 | 推出升级版AI翻译工具：Marco MT 性能超越Google和ChatGPT
jixn的博客
10-17 2896
例如，在翻译拖鞋描述时，它会根据市场和文化优化翻译，而不仅仅是字面翻译。据称，这款工具在翻译性能上超过了Google、DeepL和ChatGPT的同类产品，旨在帮助商户提升国际市场的竞争力，特别是在跨境电商领域。：特别适用于跨境电商场景，能够优化产品描述、标题和营销信息，提升消费者理解并增加购买意愿。：该工具支持 15 种语言，包括中文、英语、法语、德语、西班牙语等。：支持60多种语言，优化电商产品标题、描述和评论的翻译。：支持18种语言，专为电商图像中的文本翻译设计。：支持创建干预词汇表，定制翻译结果。
XGO Rider：全球首创双轮足AI机器人，集成ChatGPT，实现智能互动
最新发布
10-20 411
XGO Rider通过ChatGPT的深度融合，在AI机器人领域树立了新的标杆。它的双轮足设计、出色的全向移动能力、强大的自然语言处理和人机交互功能，使得它不仅在技术上领先，更具有广泛的市场应用前景。无论是教育领域的AI编程工具，还是日常生活中的智能助手，XGO Rider都展现了巨大的潜力。未来，它将继续通过与更多的AI技术集成，推动机器人技术的革新，成为我们身边不可或缺的智能伙伴。XGO-Rider · 语雀。
【0day】ChatGPT个人专用版 pictureproxy SSRF漏洞【附poc下载】
苏诺木安全团队
10-15 535
【0day】ChatGPT个人专用版 pictureproxy SSRF漏洞【附poc下载】
chatgpt+midjourney
08-21
ChatGPT是一种由OpenAI训练的大型语言模型。它的原理是基于Transformer架构，通过预训练大量文本数据来学习如何生成人类可读的文本，然后通过接受输入并生成输出来实现对话。 ChatGPT的用途非常广泛，可以用于自然...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值