首先感謝laf提供免費使用Midjourney API接口和云函數(shù)，需要詳細(xì)了解的可以訪問他們的官網(wǎng)論壇。
感謝論壇前面幾位的分享，我做了參考。都有參考就不列啦哈?。?！
直接開始：
第一步
復(fù)制MJ-SEND云函數(shù)到laf云平臺，并發(fā)布獲得云函數(shù)訪問地址“https://xxx.laf.dev/mj-sent”
import cloud from '@lafjs/cloud'
import { Midjourney, MidjourneyMessage } from 'midjourney'
const SERVER_ID = '' // Midjourney 服務(wù) ID
const CHANNEL_ID = '' // Midjourney 頻道 ID
const SALAI_TOKEN = '' // Midjourney 服務(wù) 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
}
// 創(chuàng)建生圖任務(wù)
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
}
第二步 寫一個前端渲染效果文章來源：http://www.zghlxwxcb.cn/news/detail-511031.html
<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" >
<!-- 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="請輸入要生成的圖片內(nèi)容，盡量使用英文"></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>任務(wù)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('努力開發(fā)中')
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>
第三步 上傳服務(wù)器或者找個空間也可以本地訪問文章來源地址http://www.zghlxwxcb.cn/news/detail-511031.html
到了這里，關(guān)于五分鐘 實現(xiàn)chatgpt+Midjourney工具 出圖ai 變現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
