零基础手把手教你如何使用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在线开发，连安装软件的工作都省了，不得不说，十分亲民

 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的完整演示，如有疑问，欢迎提出！