|
<html> |
|
<head> |
|
<meta charset="UTF-8" /> |
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> |
|
|
|
<script src="https://unpkg.com/vue@next"></script> |
|
|
|
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css"> |
|
|
|
<script src="https://unpkg.com/element-plus"></script> |
|
|
|
<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://v52eoq.laf.dev/mj-test', |
|
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://v52eoq.laf.dev/mj-test', |
|
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://v52eoq.laf.dev/mj-test', |
|
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); |
|
|
|
const loadingInstance = this.$loading({ |
|
lock: true, |
|
text: '正在生成大图...', |
|
spinner: 'el-icon-loading', |
|
background: 'rgba(0, 0, 0, 0.7)' |
|
}); |
|
axios({ |
|
method: 'post', |
|
url: 'https://v52eoq.laf.dev/mj-test', |
|
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://v52eoq.laf.dev/mj-test', |
|
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> |
