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

Jokeny_gyh

已于 2023-05-23 13:46:46 修改

阅读量2.4k

点赞数 6

分类专栏： AI智能文章标签： midjourney

于 2023-05-23 01:54:28 首次发布

本文链接：https://blog.csdn.net/Jokeny_gyh/article/details/130816409

版权

AI智能专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、什么是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在线开发，连安装软件的工作都省了，不得不说，十分亲民

1.添加NPM依赖

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

2.添加函数

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

说明：关于云函数的入门，可点击下面链接了解详情云函数入门 | 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"
    }
}

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

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

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

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

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

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

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

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

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

8.关于云存储

如使用云存储，需在云存储中新建Bucket，如下图：

下面为云函数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的完整演示，如有疑问，欢迎提出！