零基础手把手教你如何使用Laf免费玩转Midjourney

一、什么是Laf?

Laf 是一个 Serverless 框架,提供开箱即用的云函数,云数据库,对象存储等能力,是一个非常干净清爽的开发平台,不仅入门简单,还能像写博客一样写代码!最重要的是,敲重点,三分钟即可上线 ChatGPT 应用

若想深入了解可点击 介绍 | laf 云开发https://doc.laf.run/guide/

二、入门Laf开发应用前的准备

在正式开发应用前需要先进行账号注册和新建应用,具体操作方法可访问Web IDE | laf 云开发https://doc.laf.run/guide/web-ide/

说明:下面讲解的Midjourney需要访问 laf.dev 域名进行注册

三、正式接入Midjourney

在应用列表点击「开发」按钮即可进入 Laf 应用开发 IDE

直接Web IDE在线开发,连安装软件的工作都省了,不得不说,十分亲民

零基础手把手教你如何使用Laf免费玩转Midjourney_第1张图片

零基础手把手教你如何使用Laf免费玩转Midjourney_第2张图片

 1.添加NPM依赖

点击左下角【NPM依赖】处的“+”按钮,在弹框中搜索“midjourney”,选中第一个后再点击“保存并重启”,等待3秒左右依赖会添加完成

零基础手把手教你如何使用Laf免费玩转Midjourney_第3张图片

 2.添加函数

点击左上角【函数列表】处的“+”按钮,在弹框中输入函数名(比如:mj-func),其他默认,完成后点击“确认”按钮,等待3秒左右函数会添加完成

零基础手把手教你如何使用Laf免费玩转Midjourney_第4张图片

说明:关于云函数的入门,可点击下面链接了解详情云函数入门 | laf 云开发https://doc.laf.run/guide/function/

3.初始化Midjourney

上面已经添加了midjourney的依赖,接着需要在刚刚添加的函数中引入midjourney,并进行初始化

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
});

其中服务ID、频道ID和服务Token可在 人人都能接入 Midjourney,赚取自己的第一桶金 中找大佬单独获取

4.生成图片

“export default async function”可以理解成函数的主入口,在其方法内我们可以根据传入的参数去实现不同的业务逻辑

//主入口
export default async function (ctx: FunctionContext) {
  const { type, param } = ctx.body
  //参数校验
  if (!type) {
    return resultData(0, '参数type不能为空!')
  }

  switch (type) {
    case 'imagine':
      //生成图片
      return await imagine(param)
  }
}

下面为【生成图片】的具体实现,需要question和msg_Id两个参数

question:其实就是prompt(提示),需要输入英文

msg_Id:可以理解成会话ID

// 创建生图任务
async function imagine(param) {
  console.log("imagine", param)
  const { question, msg_Id } = param
  //参数校验
  if (!question || !msg_Id) {
    return resultData(0, '参数question或msg_Id不能为空!')
  }

  try {
    const obj = await client.Imagine(
      `[${msg_Id}] ${question}`,
      (uri: string, progress: string) => {
        console.log("loading", uri, "progress", progress);
      }
    );
    console.log("imagine success ", obj)
    return resultData(200, 'imagine success', obj)
  }
  catch (e) {
    return resultData(0, '参数错误!', e)
  }
}

 为了让前端在调用接口时接收到的数据风格统一化,故这里在返回数据时进行了统一的封装处理

//返回结果数据
async function resultData(code = 0, msg = '', data = null) {
  return { code, msg, data }
}

以上完成后可点击上方的“发布”按钮,等待3秒左右,复制“发布”按钮旁的链接,即可在apipost或者前端中进行调用,如下图:

{
    "type": "imagine",
    "param": {
        "question": "a beautiful girl",
        "msg_Id": "20230523_G001"
    }
}

零基础手把手教你如何使用Laf免费玩转Midjourney_第5张图片

说明:在返回的结果数据中code为200时表示请求成功,data为null不用理会,请求成功后大约等待30秒到一分钟左右的时间, Midjourney会自动在后台生成我们想要的图片,届时我们再调用【查询最近消息】的接口获取生成的图片。

另外,除了通过apipost或postman调用接口,我们还可以使用Web IDE自带的接口调试进行调用,不仅可以清晰的看到运行的结果,还能在控制台打印出我们想要的日志信息,十分的便利,如下图:

零基础手把手教你如何使用Laf免费玩转Midjourney_第6张图片

5.查询最近消息

在主入口方法中增加【查询最近消息】的业务逻辑

//主入口
export default async function (ctx: FunctionContext) {
  const { type, param } = ctx.body
  //参数校验
  if (!type) {
    return resultData(0, '参数type不能为空!')
  }

  switch (type) {
    case 'retrieveMessages':
      //查询最近消息
      return await retrieveMessages(param)
    case 'imagine':
      //生成图片
      return await imagine(param)
  }
}

下面为【查询最近消息】的具体实现,由于默认查询的是所有用户最近50条的消息,所以这里根据msg_Id进行了数据筛选(若想查询所有的可以去掉这个限制)

msg_Id:会话ID(需与生成图片时传的msg_Id一致)

// 查询消息(最近50条)
async function retrieveMessages(param) {
  console.log("retrieveMessages", param)
  const { msg_Id } = param
  //参数校验
  if (!msg_Id) {
    return resultData(0, '参数msg_Id不能为空!')
  }

  try {
    const client = new MidjourneyMessage({
      ChannelId: CHANNEL_ID,
      SalaiToken: SALAI_TOKEN,
    });
    const obj = await client.RetrieveMessages();
    console.log("retrieveMessages success ", obj)
    //解析返回的list数据,获取图片信息
    if (obj) {
      //查找满足当前会话的消息
      let info = obj.find(x => x.content.indexOf(msg_Id) > -1);
      //校验是否完成了图片的生成,条件:attachments节点下的第一个子对象,且width大于512
      if (info && info.attachments && info.attachments.length > 0 && info.attachments[0].width > 512) {
        let d = info.attachments[0];

        //调用云函数获取网络图片并存储
        const res = await cloud.invoke('store-func', {
          body: {
            type: 'fetchImg',
            param: {
              fileName: d.filename,
              fileUrl: d.url,
              contentType: d.content_type
            }
          }
        });
        if (res.code == 200) {
          d.pic = res.data
          res.data = d
        }
        return res;
      }
    }
    return resultData(0, '未获取到数据!')
  }
  catch (e) {
    return resultData(0, '参数错误!', e)
  }
}

其中,这里“调用云函数获取网络图片并存储”是写在另一个云函数中,所以需要另外再创建一个云函数“store-func”,具体实现如下:

import cloud from "@lafjs/cloud";
import { GetObjectCommand, S3 } from "@aws-sdk/client-s3";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";

//初始化
const s3Client = new S3({
  endpoint: process.env.OSS_EXTERNAL_ENDPOINT,
  region: process.env.OSS_REGION,
  credentials: {
    accessKeyId: process.env.OSS_ACCESS_KEY,
    secretAccessKey: process.env.OSS_ACCESS_SECRET
  },
  forcePathStyle: true,
})
//存储空间名称,不带 Laf 应用 appid
const bucketName = 'store-file'

//主入口
export default async function (ctx: FunctionContext) {
  const { type, param } = ctx.body
  //参数校验
  if (!type) {
    return resultData(0, '参数type不能为空!')
  }

  switch (type) {
    case 'fetchImg':
      //存储网络图片
      return await fetchImgToStore(param)
  }
}

//获取网络图片并存储
async function fetchImgToStore(param) {
  console.log("fetchImgToStore", param);
  const { fileName, fileUrl, contentType } = param
  //参数校验
  if (!fileName || !fileUrl || !contentType) {
    return resultData(0, '参数fileName、fileUrl或contentType不能为空!')
  }

  try {
    //下载url图片二进制数据
    const ret = await cloud.fetch({
      url: fileUrl,
      method: "get",
      responseType: "arraybuffer"
    });
    // console.log(ret.data);
    if (ret.data) {
      //图片存储
      const res = await uploadAppFile(fileName, ret.data, contentType);
      console.log('文件存储结果:', res)
      if (res && res.$metadata && res.$metadata.httpStatusCode == 200) {
        //获取图片存储的绝对路径
        const fileUrl = await getAppFileUrl(fileName);
        return resultData(200, '成功', fileUrl)
      }
      return resultData(0, '文件存储失败!')
    }
    return resultData(0, '获取网络图片失败!')
  }
  catch (e) {
    return resultData(0, '出现异常!', e)
  }
}

//拼接文件桶名字
function getInternalBucketName() {
  const appid = process.env.APP_ID;
  return `${appid}-${bucketName}`;
}

//上传文件
async function uploadAppFile(key, body, contentType) {
  const bucket = getInternalBucketName();
  const res = await s3Client
    .putObject({
      Bucket: bucket,
      Key: key,
      ContentType: contentType,
      Body: body,
    })
  return res;
}

//获取文件 url
async function getAppFileUrl(key) {
  const bucket = getInternalBucketName();
  const res = await getSignedUrl(s3Client, new GetObjectCommand({
    Bucket: bucket,
    Key: key,
  }));
  return res;
}

//返回结果数据
async function resultData(code = 0, msg = '', data = null) {
  return { code, msg, data }
}

这里涉及到了云函数的调用,以及云存储,详细资料可在下面链接中进行查阅云存储简介 | laf 云开发https://doc.laf.run/guide/oss/

以上完成后可点击上方的“发布”按钮,等待3秒左右,复制“发布”按钮旁的链接,即可在apipost或者前端中进行调用,如下图:

{
    "type": "retrieveMessages",
    "param": {
        "msg_Id": "20230523_G001"
    }
}

零基础手把手教你如何使用Laf免费玩转Midjourney_第7张图片

 返回的data中pic的链接即为生成的图片

零基础手把手教你如何使用Laf免费玩转Midjourney_第8张图片 

 6.放大图片

在主入口方法中增加【放大图片】的业务逻辑

//主入口
export default async function (ctx: FunctionContext) {
  const { type, param } = ctx.body
  //参数校验
  if (!type) {
    return resultData(0, '参数type不能为空!')
  }

  switch (type) {
    case 'retrieveMessages':
      //查询最近消息
      return await retrieveMessages(param)
    case 'imagine':
      //生成图片
      return await imagine(param)
    case 'upscale':
      //放大图片
      return await upscale(param)
  }
}

下面为【放大图片】的具体实现,需要question、index、id和url四个参数

question:与生成图片时的参数,需要输入英文

index:你想要的第几张图(默认生成的4张图,按1234的顺序)

id:查询最近消息接口返回的数据体中的id

url:查询最近消息接口返回的数据体中attachments节点下的url

// upscale 放大图片
async function upscale(param) {
  console.log("upscale", param)
  const { question, index, id, url } = param
  //参数校验
  if (!question || !index || !id || !url) {
    return resultData(0, '参数question、index、id或url不能为空!')
  }

  try {
    const hash = url.split("_").pop()?.split(".")[0] ?? ""
    const obj = await client.Upscale(
      question,
      index,
      id,
      hash,
      (uri: string, progress: string) => {
        console.log("loading", uri, "progress", progress);
      }
    );
    console.log("upscale success ", obj)
    return resultData(200, 'upscale success', obj)
  }
  catch (e) {
    return resultData(0, '参数错误!', e)
  }
}

以上完成后可点击上方的“发布”按钮,等待3秒左右,复制“发布”按钮旁的链接,即可在apipost或者前端中进行调用,如下图:

{
    "type": "upscale",
    "param": {
        "question": "a beautiful girl",
        "index": 2,
        "id": "1110429562023723048",
        "url": "https://cdn.discordapp.com/attachments/1110206663958466611/1110429561428135976/johnsonmaureen_20230523_G001_a_beautiful_girl_1925266c-7937-4b8d-8150-c16f013d0dca.png"
    }
}

零基础手把手教你如何使用Laf免费玩转Midjourney_第9张图片

成功后,大约等待30秒到一分钟,重新再调用一下【查询最近消息】的接口,获取可访问的放大后的图片

零基础手把手教你如何使用Laf免费玩转Midjourney_第10张图片

或者,也可以在【放大图片】的接口中将新生成的图片进行云存储后再返回给前端,两种方式都可以

7.变换图片

在主入口方法中增加【变换图片】的业务逻辑

//主入口
export default async function (ctx: FunctionContext) {
  const { type, param } = ctx.body
  //参数校验
  if (!type) {
    return resultData(0, '参数type不能为空!')
  }

  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)
  }
}

下面为【变换图片】的具体实现,需要question、index、id和url四个参数

question:与生成图片时的参数,需要输入英文

index:你想要的第几张图(默认生成的4张图,按1234的顺序)

id:查询最近消息接口返回的数据体中的id

url:查询最近消息接口返回的数据体中attachments节点下的url

// variation 变换图片
async function variation(param) {
  console.log("variation", param)
  const { question, index, id, url } = param
  //参数校验
  if (!question || !index || !id || !url) {
    return resultData(0, '参数question、index、id或url不能为空!')
  }

  try {
    const hash = url.split("_").pop()?.split(".")[0] ?? ""
    const obj = await client.Variation(
      question,
      index,
      id,
      hash,
      (uri: string, progress: string) => {
        console.log("loading", uri, "progress", progress);
      }
    );
    console.log("variation success ", obj)
    return resultData(200, 'variation success', obj)
  }
  catch (e) {
    return resultData(0, '参数错误!', e)
  }
}

以上完成后可点击上方的“发布”按钮,等待3秒左右,复制“发布”按钮旁的链接,即可在apipost或者前端中进行调用,如下图:

{
    "type": "variation",
    "param": {
        "question": "a beautiful girl",
        "index": 3,
        "id": "1110429562023723048",
        "url": "https://cdn.discordapp.com/attachments/1110206663958466611/1110429561428135976/johnsonmaureen_20230523_G001_a_beautiful_girl_1925266c-7937-4b8d-8150-c16f013d0dca.png"
    }
}

零基础手把手教你如何使用Laf免费玩转Midjourney_第11张图片

 说明:在返回的结果数据中code为200时表示请求成功,data为null不用理会,请求成功后大约等待30秒到一分钟左右的时间, Midjourney会自动在后台重新生成我们想要的图片,届时我们再调用【查询最近消息】的接口获取变换后的图片。

零基础手把手教你如何使用Laf免费玩转Midjourney_第12张图片

8.关于云存储

如使用云存储,需在云存储中新建Bucket,如下图:

零基础手把手教你如何使用Laf免费玩转Midjourney_第13张图片

下面为云函数mj-func的完整代码:

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
  //参数校验
  if (!type) {
    return resultData(0, '参数type不能为空!')
  }

  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)
  }
}

// 查询消息(最近50条)
async function retrieveMessages(param) {
  console.log("retrieveMessages", param)
  const { msg_Id } = param
  //参数校验
  if (!msg_Id) {
    return resultData(0, '参数msg_Id不能为空!')
  }

  try {
    const client = new MidjourneyMessage({
      ChannelId: CHANNEL_ID,
      SalaiToken: SALAI_TOKEN,
    });
    const obj = await client.RetrieveMessages();
    console.log("retrieveMessages success ", obj)
    //解析返回的list数据,获取图片信息
    if (obj) {
      //查找满足当前会话的消息
      let info = obj.find(x => x.content.indexOf(msg_Id) > -1);
      //校验是否完成了图片的生成,条件:attachments节点下的第一个子对象,且width大于512
      if (info && info.attachments && info.attachments.length > 0 && info.attachments[0].width > 512) {
        let d = info.attachments[0];

        //调用云函数获取网络图片并存储
        const res = await cloud.invoke('store-func', {
          body: {
            type: 'fetchImg',
            param: {
              fileName: d.filename,
              fileUrl: d.url,
              contentType: d.content_type
            }
          }
        });
        if (res.code == 200) {
          info.pic = res.data
          res.data = info
        }
        return res;
      }
    }
    return resultData(0, '未获取到数据!')
  }
  catch (e) {
    return resultData(0, '参数错误!', e)
  }
}

// 创建生图任务
async function imagine(param) {
  console.log("imagine", param)
  const { question, msg_Id } = param
  //参数校验
  if (!question || !msg_Id) {
    return resultData(0, '参数question或msg_Id不能为空!')
  }

  try {
    const obj = await client.Imagine(
      `[${msg_Id}] ${question}`,
      (uri: string, progress: string) => {
        console.log("loading", uri, "progress", progress);
      }
    );
    console.log("imagine success ", obj)
    return resultData(200, 'imagine success', obj)
  }
  catch (e) {
    return resultData(0, '参数错误!', e)
  }
}

// upscale 放大图片
async function upscale(param) {
  console.log("upscale", param)
  const { question, index, id, url } = param
  //参数校验
  if (!question || !index || !id || !url) {
    return resultData(0, '参数question、index、id或url不能为空!')
  }

  try {
    const hash = url.split("_").pop()?.split(".")[0] ?? ""
    const obj = await client.Upscale(
      question,
      index,
      id,
      hash,
      (uri: string, progress: string) => {
        console.log("loading", uri, "progress", progress);
      }
    );
    console.log("upscale success ", obj)
    return resultData(200, 'upscale success', obj)
  }
  catch (e) {
    return resultData(0, '参数错误!', e)
  }
}

// variation 变换图片
async function variation(param) {
  console.log("variation", param)
  const { question, index, id, url } = param
  //参数校验
  if (!question || !index || !id || !url) {
    return resultData(0, '参数question、index、id或url不能为空!')
  }

  try {
    const hash = url.split("_").pop()?.split(".")[0] ?? ""
    const obj = await client.Variation(
      question,
      index,
      id,
      hash,
      (uri: string, progress: string) => {
        console.log("loading", uri, "progress", progress);
      }
    );
    console.log("variation success ", obj)
    return resultData(200, 'variation success', obj)
  }
  catch (e) {
    return resultData(0, '参数错误!', e)
  }
}

//返回结果数据
async function resultData(code = 0, msg = '', data = null) {
  return { code, msg, data }
}

 以上即为使用Laf接入Midjourney的完整演示,如有疑问,欢迎提出!

你可能感兴趣的:(AI智能,midjourney)