admin/geekai
1
0
Fork 0
mirror of https://gitee.com/blackfox/geekai.git synced 2025-12-08 17:58:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

修复绘图任务失败后，完成列表不更新的bug

Browse Source
This commit is contained in:
GeekMaster 2025-04-10 18:21:06 +08:00
parent 1c1ddf76fb
commit bcc72a3091
4 changed files with 652 additions and 834 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
api/handler/chat_model_handler.go
View File

@ -32,7 +32,6 @@ func (h *ChatModelHandler) List(c *gin.Context) {
var chatModels = make([]vo.ChatModel, 0) var chatModels = make([]vo.ChatModel, 0)
session := h.DB.Session(&gorm.Session{}).Where("enabled", true) session := h.DB.Session(&gorm.Session{}).Where("enabled", true)
t := c.Query("type") t := c.Query("type")
logger.Info("type: ", t)
if t != "" { if t != "" {
session = session.Where("type", t) session = session.Where("type", t)
} else { } else {

415
web/src/views/Dalle.vue
View File

@ -17,12 +17,7 @@
placeholder="请选择模型" placeholder="请选择模型"
@change="changeModel" @change="changeModel"
> >
<el-option <el-option v-for="v in models" :label="v.name" :value="v" :key="v.value" />
v-for="v in models"
:label="v.name"
:value="v"
:key="v.value"
/>
</el-select> </el-select>
</div> </div>
</template> </template>
@ -51,12 +46,7 @@
<template #default> <template #default>
<div class="form-item-inner"> <div class="form-item-inner">
<el-select v-model="params.size" style="width: 150px"> <el-select v-model="params.size" style="width: 150px">
<el-option <el-option v-for="v in sizes" :label="v" :value="v" :key="v" />
v-for="v in sizes"
:label="v"
:value="v"
:key="v"
/>
</el-select> </el-select>
</div> </div>
</template> </template>
@ -109,10 +99,7 @@
color="#5865f2" color="#5865f2"
:disabled="isGenerating" :disabled="isGenerating"
> >
<i <i class="iconfont icon-chuangzuo" style="margin-right: 5px"></i>
class="iconfont icon-chuangzuo"
style="margin-right: 5px"
></i>
<span>生成专业绘画指令</span> <span>生成专业绘画指令</span>
</el-button> </el-button>
</el-row> </el-row>
@ -120,10 +107,7 @@
<div class="text-info"> <div class="text-info">
<el-row :gutter="10"> <el-row :gutter="10">
<el-text type="primary" <el-text type="primary"
>每次绘图消耗 >每次绘图消耗 <el-text type="warning">{{ dallPower }}算力，</el-text></el-text
<el-text type="warning"
>{{ dallPower }}算力，</el-text
></el-text
> >
<el-text type="primary" <el-text type="primary"
>当前可用 >当前可用
@ -134,9 +118,7 @@
</el-form> </el-form>
</div> </div>
<div class="submit-btn"> <div class="submit-btn">
<el-button type="primary" :dark="false" round @click="generate"> <el-button type="primary" :dark="false" round @click="generate"> 立即生成 </el-button>
立即生成
</el-button>
</div> </div>
</div> </div>
<div class="task-list-box pl-6 pr-6 pb-4 pt-4 h-dvh"> <div class="task-list-box pl-6 pr-6 pb-4 pt-4 h-dvh">
@ -194,14 +176,10 @@
placement="top" placement="top"
> >
<template #reference> <template #reference>
<el-button type="info" <el-button type="info">详情</el-button>
>详情</el-button
>
</template> </template>
</el-popover> </el-popover>
<el-button <el-button type="danger" @click="removeImage(item)"
type="danger"
@click="removeImage(item)"
>删除</el-button >删除</el-button
> >
</div> </div>
@ -218,11 +196,7 @@
class="pt-3 flex justify-center items-center border-t border-t-gray-600 border-opacity-50" class="pt-3 flex justify-center items-center border-t border-t-gray-600 border-opacity-50"
> >
<div class="flex"> <div class="flex">
<el-tooltip <el-tooltip content="取消分享" placement="top" v-if="item.publish">
content="取消分享"
placement="top"
v-if="item.publish"
>
<el-button <el-button
type="warning" type="warning"
@click="publishImage(item, false)" @click="publishImage(item, false)"
@ -231,11 +205,7 @@
<i class="iconfont icon-cancel-share"></i> <i class="iconfont icon-cancel-share"></i>
</el-button> </el-button>
</el-tooltip> </el-tooltip>
<el-tooltip <el-tooltip content="分享" placement="top" v-else>
content="分享"
placement="top"
v-else
>
<el-button <el-button
type="success" type="success"
@click="publishImage(item, true)" @click="publishImage(item, true)"
@ -245,10 +215,7 @@
</el-button> </el-button>
</el-tooltip> </el-tooltip>
<el-tooltip <el-tooltip content="复制提示词" placement="top">
content="复制提示词"
placement="top"
>
<el-button <el-button
type="info" type="info"
circle circle
@ -294,12 +261,7 @@
</div> </div>
</div> </div>
</div> </div>
<el-empty <el-empty :image-size="100" :image="nodata" description="暂无记录" v-else />
:image-size="100"
:image="nodata"
description="暂无记录"
v-else
/>
</div> </div>
</template> </template>
<!-- end finish job list--> <!-- end finish job list-->
@ -314,7 +276,7 @@
<el-image-viewer <el-image-viewer
@close=" @close="
() => { () => {
previewURL = ''; previewURL = ''
} }
" "
v-if="previewURL !== ''" v-if="previewURL !== ''"
@ -324,308 +286,303 @@
</template> </template>
<script setup> <script setup>
import nodata from "@/assets/img/no-data.png"; import nodata from '@/assets/img/no-data.png'
import { nextTick, onMounted, onUnmounted, ref } from "vue"; import { nextTick, onMounted, onUnmounted, ref } from 'vue'
import { Delete, InfoFilled, Picture } from "@element-plus/icons-vue"; import { Delete, InfoFilled, Picture } from '@element-plus/icons-vue'
import { httpGet, httpPost } from "@/utils/http"; import { httpGet, httpPost } from '@/utils/http'
import { ElMessage, ElMessageBox } from "element-plus"; import { ElMessage, ElMessageBox } from 'element-plus'
import Clipboard from "clipboard"; import Clipboard from 'clipboard'
import { checkSession, getSystemInfo } from "@/store/cache"; import { checkSession, getSystemInfo } from '@/store/cache'
import { useSharedStore } from "@/store/sharedata"; import { useSharedStore } from '@/store/sharedata'
import TaskList from "@/components/TaskList.vue"; import TaskList from '@/components/TaskList.vue'
import BackTop from "@/components/BackTop.vue"; import BackTop from '@/components/BackTop.vue'
import { showMessageError, showMessageOK } from "@/utils/dialog"; import { showMessageError, showMessageOK } from '@/utils/dialog'
import { LazyImg, Waterfall } from "vue-waterfall-plugin-next"; import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
import "vue-waterfall-plugin-next/dist/style.css"; import 'vue-waterfall-plugin-next/dist/style.css'
const listBoxHeight = ref(0); const listBoxHeight = ref(0)
// const paramBoxHeight = ref(0) // const paramBoxHeight = ref(0)
const isLogin = ref(false); const isLogin = ref(false)
const loading = ref(true); const loading = ref(true)
const isOver = ref(false); const isOver = ref(false)
const previewURL = ref(""); const previewURL = ref('')
const store = useSharedStore(); const store = useSharedStore()
const models = ref([]); const models = ref([])
const waterfallOptions = store.waterfallOptions; const waterfallOptions = store.waterfallOptions
const resizeElement = function () { const resizeElement = function () {
listBoxHeight.value = window.innerHeight - 58; listBoxHeight.value = window.innerHeight - 58
}; }
resizeElement(); resizeElement()
window.onresize = () => { window.onresize = () => {
resizeElement(); resizeElement()
}; }
const qualities = [ const qualities = [
{ name: "标准", value: "standard" }, { name: '标准', value: 'standard' },
{ name: "高清", value: "hd" }, { name: '高清', value: 'hd' },
]; ]
const dalleSizes = ["1024x1024", "1792x1024", "1024x1792"]; const dalleSizes = ['1024x1024', '1792x1024', '1024x1792']
const fluxSizes = ["1024x1024", "1152x896", "896x1152", "1280x960", "1024x576"]; const fluxSizes = ['1024x1024', '1152x896', '896x1152', '1280x960', '1024x576']
const sizes = ref(dalleSizes); const sizes = ref(dalleSizes)
const styles = [ const styles = [
{ name: "生动", value: "vivid" }, { name: '生动', value: 'vivid' },
{ name: "自然", value: "natural" }, { name: '自然', value: 'natural' },
]; ]
const params = ref({ const params = ref({
quality: "standard", quality: 'standard',
size: "1024x1024", size: '1024x1024',
style: "vivid", style: 'vivid',
prompt: "", prompt: '',
}); })
const finishedJobs = ref([]); const finishedJobs = ref([])
const runningJobs = ref([]); const runningJobs = ref([])
const allowPulling = ref(true); // 是否允许轮询 const allowPulling = ref(true) // 是否允许轮询
const downloadPulling = ref(false); // 下载轮询 const downloadPulling = ref(false) // 下载轮询
const tastPullHandler = ref(null); const tastPullHandler = ref(null)
const downloadPullHandler = ref(null); const downloadPullHandler = ref(null)
const power = ref(0); const power = ref(0)
const dallPower = ref(0); // 画一张 SD 图片消耗算力 const dallPower = ref(0) // 画一张 SD 图片消耗算力
const clipboard = ref(null); const clipboard = ref(null)
const userId = ref(0); const userId = ref(0)
const selectedModel = ref(null); const selectedModel = ref(null)
onMounted(() => { onMounted(() => {
initData(); initData()
clipboard.value = new Clipboard(".copy-prompt"); clipboard.value = new Clipboard('.copy-prompt')
clipboard.value.on("success", () => { clipboard.value.on('success', () => {
showMessageOK("复制成功！"); showMessageOK('复制成功！')
}); })
clipboard.value.on("error", () => { clipboard.value.on('error', () => {
showMessageError("复制失败！"); showMessageError('复制失败！')
}); })
getSystemInfo() getSystemInfo()
.then((res) => { .then((res) => {
dallPower.value = res.data["dall_power"]; dallPower.value = res.data['dall_power']
}) })
.catch((e) => { .catch((e) => {
showMessageError("获取系统配置失败：" + e.message); showMessageError('获取系统配置失败：' + e.message)
}); })
// 获取模型列表 // 获取模型列表
httpGet("/api/dall/models") httpGet('/api/dall/models')
.then((res) => { .then((res) => {
models.value = res.data; models.value = res.data
selectedModel.value = models.value[0]; selectedModel.value = models.value[0]
params.value.model_id = selectedModel.value.id; params.value.model_id = selectedModel.value.id
changeModel(selectedModel.value); changeModel(selectedModel.value)
}) })
.catch((e) => { .catch((e) => {
showMessageError("获取模型列表失败：" + e.message); showMessageError('获取模型列表失败：' + e.message)
}); })
}); })
onUnmounted(() => { onUnmounted(() => {
clipboard.value.destroy(); clipboard.value.destroy()
if (tastPullHandler.value) { if (tastPullHandler.value) {
clearInterval(tastPullHandler.value); clearInterval(tastPullHandler.value)
} }
if (downloadPullHandler.value) { if (downloadPullHandler.value) {
clearInterval(downloadPullHandler.value); clearInterval(downloadPullHandler.value)
} }
}); })
const initData = () => { const initData = () => {
checkSession() checkSession()
.then((user) => { .then((user) => {
power.value = user["power"]; power.value = user['power']
userId.value = user.id; userId.value = user.id
isLogin.value = true; isLogin.value = true
page.value = 0; page.value = 0
fetchRunningJobs(); fetchRunningJobs()
fetchFinishJobs(); fetchFinishJobs()
// 轮询运行中任务 // 轮询运行中任务
tastPullHandler.value = setInterval(() => { tastPullHandler.value = setInterval(() => {
if (allowPulling.value) { if (allowPulling.value) {
fetchRunningJobs(); fetchRunningJobs()
} }
}, 5000); }, 5000)
// 图片下载轮询 // 图片下载轮询
downloadPullHandler.value = setInterval(() => { downloadPullHandler.value = setInterval(() => {
if (downloadPulling.value) { if (downloadPulling.value) {
page.value = 0; page.value = 0
fetchFinishJobs(); fetchFinishJobs()
} }
}, 5000); }, 5000)
}) })
.catch(() => {}); .catch(() => {})
}; }
const fetchRunningJobs = () => { const fetchRunningJobs = () => {
if (!isLogin.value) { if (!isLogin.value) {
return; return
} }
// 获取运行中的任务 // 获取运行中的任务
httpGet(`/api/dall/jobs?finish=false`) httpGet(`/api/dall/jobs?finish=false`)
.then((res) => { .then((res) => {
// 如果任务有更新，则更新已完成任务列表 // 如果任务有更新，则更新已完成任务列表
if ( if (res.data.items && res.data.items.length !== runningJobs.value.length) {
res.data.items && page.value = 0
res.data.items.length !== runningJobs.value.length fetchFinishJobs()
) {
page.value = 0;
fetchFinishJobs();
} }
if (res.data.items.length > 0) { if (res.data.items.length > 0) {
runningJobs.value = res.data.items; runningJobs.value = res.data.items
} else { } else {
allowPulling.value = false; allowPulling.value = false
runningJobs.value = []; runningJobs.value = []
} }
}) })
.catch((e) => { .catch((e) => {
ElMessage.error("获取任务失败：" + e.message); ElMessage.error('获取任务失败：' + e.message)
}); })
}; }
const page = ref(1); const page = ref(1)
const pageSize = ref(15); const pageSize = ref(15)
// 获取已完成的任务 // 获取已完成的任务
const fetchFinishJobs = () => { const fetchFinishJobs = () => {
if (!isLogin.value) { if (!isLogin.value) {
return; return
} }
loading.value = true; loading.value = true
page.value = page.value + 1; page.value = page.value + 1
httpGet( httpGet(`/api/dall/jobs?finish=true&page=${page.value}&page_size=${pageSize.value}`)
`/api/dall/jobs?finish=true&page=${page.value}&page_size=${pageSize.value}`
)
.then((res) => { .then((res) => {
if (res.data.items.length < pageSize.value) { if (res.data.items.length < pageSize.value) {
isOver.value = true; isOver.value = true
loading.value = false; loading.value = false
} }
const imageList = res.data.items; const imageList = res.data.items
let needPulling = false; let needPulling = false
for (let i = 0; i < imageList.length; i++) { for (let i = 0; i < imageList.length; i++) {
if (imageList[i]["img_url"]) { if (imageList[i]['img_url']) {
imageList[i]["img_thumb"] = imageList[i]['img_thumb'] = imageList[i]['img_url'] + '?imageView2/4/w/300/h/0/q/75'
imageList[i]["img_url"] + "?imageView2/4/w/300/h/0/q/75";
} else if (imageList[i].progress === 100) { } else if (imageList[i].progress === 100) {
needPulling = true; needPulling = true
imageList[i]["img_thumb"] = waterfallOptions.loadProps.loading; imageList[i]['img_thumb'] = waterfallOptions.loadProps.loading
} }
} }
// 如果当前是第一页，则开启图片下载轮询 // 如果当前是第一页，则开启图片下载轮询
if (page.value === 1) { if (page.value === 1) {
downloadPulling.value = needPulling; downloadPulling.value = needPulling
} }
if (page.value === 1) { if (page.value === 1) {
finishedJobs.value = imageList; finishedJobs.value = imageList
} else { } else {
finishedJobs.value = finishedJobs.value.concat(imageList); finishedJobs.value = finishedJobs.value.concat(imageList)
} }
}) })
.catch((e) => { .catch((e) => {
ElMessage.error("获取任务失败：" + e.message); ElMessage.error('获取任务失败：' + e.message)
loading.value = false; loading.value = false
}); })
}; }
// 创建绘图任务 // 创建绘图任务
const promptRef = ref(null); const promptRef = ref(null)
const generate = () => { const generate = () => {
if (params.value.prompt === "") { if (params.value.prompt === '') {
promptRef.value.focus(); promptRef.value.focus()
return ElMessage.error("请输入绘画提示词！"); return ElMessage.error('请输入绘画提示词！')
} }
if (!isLogin.value) { if (!isLogin.value) {
store.setShowLoginDialog(true); store.setShowLoginDialog(true)
return; return
} }
httpPost("/api/dall/image", params.value) httpPost('/api/dall/image', params.value)
.then(() => { .then(() => {
ElMessage.success("任务执行成功！"); ElMessage.success('任务执行成功！')
power.value -= dallPower.value; power.value -= dallPower.value
// 追加任务列表 // 追加任务列表
runningJobs.value.push({ runningJobs.value.push({
prompt: params.value.prompt, prompt: params.value.prompt,
progress: 0, progress: 0,
}); })
allowPulling.value = true; allowPulling.value = true
isOver.value = false
}) })
.catch((e) => { .catch((e) => {
ElMessage.error("任务执行失败：" + e.message); ElMessage.error('任务执行失败：' + e.message)
}); })
}; }
const removeImage = (item) => { const removeImage = (item) => {
ElMessageBox.confirm("此操作将会删除任务和图片，继续操作码?", "删除提示", { ElMessageBox.confirm('此操作将会删除任务和图片，继续操作码?', '删除提示', {
confirmButtonText: "确认", confirmButtonText: '确认',
cancelButtonText: "取消", cancelButtonText: '取消',
type: "warning", type: 'warning',
}) })
.then(() => { .then(() => {
httpGet("/api/dall/remove", { id: item.id }) httpGet('/api/dall/remove', { id: item.id })
.then(() => { .then(() => {
ElMessage.success("任务删除成功"); ElMessage.success('任务删除成功')
page.value = 0; page.value = 0
isOver.value = false; isOver.value = false
fetchFinishJobs(); fetchFinishJobs()
}) })
.catch((e) => { .catch((e) => {
ElMessage.error("任务删除失败：" + e.message); ElMessage.error('任务删除失败：' + e.message)
}); })
}) })
.catch(() => {}); .catch(() => {})
}; }
const previewImg = (item) => { const previewImg = (item) => {
previewURL.value = item.img_url; previewURL.value = item.img_url
}; }
// 发布图片到作品墙 // 发布图片到作品墙
const publishImage = (item, action) => { const publishImage = (item, action) => {
let text = "图片发布"; let text = '图片发布'
if (action === false) { if (action === false) {
text = "取消发布"; text = '取消发布'
} }
httpGet("/api/dall/publish", { id: item.id, action: action }) httpGet('/api/dall/publish', { id: item.id, action: action })
.then(() => { .then(() => {
ElMessage.success(text + "成功"); ElMessage.success(text + '成功')
item.publish = action; item.publish = action
page.value = 0; page.value = 0
isOver.value = false; isOver.value = false
}) })
.catch((e) => { .catch((e) => {
ElMessage.error(text + "失败：" + e.message); ElMessage.error(text + '失败：' + e.message)
}); })
}; }
const isGenerating = ref(false); const isGenerating = ref(false)
const generatePrompt = () => { const generatePrompt = () => {
if (params.value.prompt === "") { if (params.value.prompt === '') {
return showMessageError("请输入原始提示词"); return showMessageError('请输入原始提示词')
} }
isGenerating.value = true; isGenerating.value = true
httpPost("/api/prompt/image", { prompt: params.value.prompt }) httpPost('/api/prompt/image', { prompt: params.value.prompt })
.then((res) => { .then((res) => {
params.value.prompt = res.data; params.value.prompt = res.data
isGenerating.value = false; isGenerating.value = false
}) })
.catch((e) => { .catch((e) => {
showMessageError("生成提示词失败：" + e.message); showMessageError('生成提示词失败：' + e.message)
isGenerating.value = false; isGenerating.value = false
}); })
}; }
const changeModel = (model) => { const changeModel = (model) => {
if (model.value.startsWith("dall")) { if (model.value.startsWith('dall')) {
sizes.value = dalleSizes; sizes.value = dalleSizes
} else { } else {
sizes.value = fluxSizes; sizes.value = fluxSizes
} }
params.value.model_id = selectedModel.value.id; params.value.model_id = selectedModel.value.id
}; }
</script> </script>
<style lang="stylus"> <style lang="stylus">

650
web/src/views/ImageMj.vue
View File

File diff suppressed because it is too large Load Diff

420
web/src/views/ImageSd.vue
View File

@ -37,10 +37,7 @@
<el-form-item label="采样调度"> <el-form-item label="采样调度">
<template #default> <template #default>
<div class="form-item-inner"> <div class="form-item-inner">
<el-select <el-select v-model="params.scheduler" style="width: 150px">
v-model="params.scheduler"
style="width: 150px"
>
<el-option <el-option
v-for="item in schedulers" v-for="item in schedulers"
:label="item" :label="item"
@ -48,11 +45,7 @@
:key="item" :key="item"
/> />
</el-select> </el-select>
<el-tooltip <el-tooltip content="推荐自动或者 Karras" raw-content placement="right">
content="推荐自动或者 Karras"
raw-content
placement="right"
>
<el-icon class="info-icon"> <el-icon class="info-icon">
<InfoFilled /> <InfoFilled />
</el-icon> </el-icon>
@ -68,16 +61,10 @@
<div class="form-item-inner"> <div class="form-item-inner">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-input <el-input v-model.number="params.width" placeholder="图片宽度" />
v-model.number="params.width"
placeholder="图片宽度"
/>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-input <el-input v-model.number="params.height" placeholder="图片高度" />
v-model.number="params.height"
placeholder="图片高度"
/>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -138,11 +125,7 @@
</el-icon> </el-icon>
</el-tooltip> </el-tooltip>
<el-tooltip <el-tooltip content="使用随机数" raw-content placement="right">
content="使用随机数"
raw-content
placement="right"
>
<el-icon @click="params.seed = -1" class="info-icon"> <el-icon @click="params.seed = -1" class="info-icon">
<Orange /> <Orange />
</el-icon> </el-icon>
@ -184,10 +167,7 @@
v-model.number="params.hd_redraw_rate" v-model.number="params.hd_redraw_rate"
:max="1" :max="1"
:step="0.1" :step="0.1"
style=" style="width: 180px; --el-slider-main-bg-color: #47fff1"
width: 180px;
--el-slider-main-bg-color: #47fff1;
"
/> />
<el-tooltip <el-tooltip
content="决定算法对图像内容的影响程度<br />较大的值将得到越有创意的图像" content="决定算法对图像内容的影响程度<br />较大的值将得到越有创意的图像"
@ -207,10 +187,7 @@
<el-form-item label="放大算法"> <el-form-item label="放大算法">
<template #default> <template #default>
<div class="form-item-inner"> <div class="form-item-inner">
<el-select <el-select v-model="params.hd_scale_alg" style="width: 176px">
v-model="params.hd_scale_alg"
style="width: 176px"
>
<el-option <el-option
v-for="item in scaleAlg" v-for="item in scaleAlg"
:label="item" :label="item"
@ -291,20 +268,14 @@
color="#5865f2" color="#5865f2"
:disabled="isGenerating" :disabled="isGenerating"
> >
<i <i class="iconfont icon-chuangzuo" style="margin-right: 5px"></i>
class="iconfont icon-chuangzuo"
style="margin-right: 5px"
></i>
<span>生成专业绘画指令</span> <span>生成专业绘画指令</span>
</el-button> </el-button>
</el-row> </el-row>
<div class="param-line pt"> <div class="param-line pt">
<span>反向提示词：</span> <span>反向提示词：</span>
<el-tooltip <el-tooltip content="不希望出现的元素，下面给了默认的起手式" placement="right">
content="不希望出现的元素，下面给了默认的起手式"
placement="right"
>
<el-icon class="info-icon"> <el-icon class="info-icon">
<InfoFilled /> <InfoFilled />
</el-icon> </el-icon>
@ -326,24 +297,18 @@
<el-text type="warning">{{ sdPower }}算力，</el-text> <el-text type="warning">{{ sdPower }}算力，</el-text>
</el-text> </el-text>
<el-text type="primary" <el-text type="primary"
>当前可用 >当前可用 <el-text type="warning"> {{ power }}算力</el-text></el-text
<el-text type="warning"> {{ power }}算力</el-text></el-text
> >
</el-row> </el-row>
</div> </div>
</el-form> </el-form>
</div> </div>
<div class="submit-btn"> <div class="submit-btn">
<el-button type="primary" :dark="false" round @click="generate" <el-button type="primary" :dark="false" round @click="generate">立即生成</el-button>
>立即生成</el-button
>
</div> </div>
</div> </div>
<div class="task-list-box pl-6 pr-6 pb-4 pt-4 h-dvh"> <div class="task-list-box pl-6 pr-6 pb-4 pt-4 h-dvh">
<div <div class="task-list-inner" :style="{ height: listBoxHeight + 'px' }">
class="task-list-inner"
:style="{ height: listBoxHeight + 'px' }"
>
<div class="job-list-box"> <div class="job-list-box">
<h2 class="text-xl">任务列表</h2> <h2 class="text-xl">任务列表</h2>
<task-list :list="runningJobs" /> <task-list :list="runningJobs" />
@ -397,14 +362,10 @@
placement="top" placement="top"
> >
<template #reference> <template #reference>
<el-button type="info" <el-button type="info">详情</el-button>
>详情</el-button
>
</template> </template>
</el-popover> </el-popover>
<el-button <el-button type="danger" @click="removeImage(item)"
type="danger"
@click="removeImage(item)"
>删除</el-button >删除</el-button
> >
</div> </div>
@ -421,11 +382,7 @@
class="pt-3 flex justify-center items-center border-t border-t-gray-600 border-opacity-50" class="pt-3 flex justify-center items-center border-t border-t-gray-600 border-opacity-50"
> >
<div class="flex"> <div class="flex">
<el-tooltip <el-tooltip content="取消分享" placement="top" v-if="item.publish">
content="取消分享"
placement="top"
v-if="item.publish"
>
<el-button <el-button
type="warning" type="warning"
@click="publishImage(item, false)" @click="publishImage(item, false)"
@ -434,11 +391,7 @@
<i class="iconfont icon-cancel-share"></i> <i class="iconfont icon-cancel-share"></i>
</el-button> </el-button>
</el-tooltip> </el-tooltip>
<el-tooltip <el-tooltip content="分享" placement="top" v-else>
content="分享"
placement="top"
v-else
>
<el-button <el-button
type="success" type="success"
@click="publishImage(item, true)" @click="publishImage(item, true)"
@ -448,10 +401,7 @@
</el-button> </el-button>
</el-tooltip> </el-tooltip>
<el-tooltip <el-tooltip content="复制提示词" placement="top">
content="复制提示词"
placement="top"
>
<el-button <el-button
type="info" type="info"
circle circle
@ -497,12 +447,7 @@
</div> </div>
</div> </div>
</div> </div>
<el-empty <el-empty :image-size="100" v-else :image="nodata" description="暂无记录" />
:image-size="100"
v-else
:image="nodata"
description="暂无记录"
/>
</div> </div>
</template> </template>
@ -526,57 +471,52 @@
</template> </template>
<script setup> <script setup>
import { nextTick, onMounted, onUnmounted, ref } from "vue"; import { nextTick, onMounted, onUnmounted, ref } from 'vue'
import { import { Delete, DocumentCopy, InfoFilled, Orange } from '@element-plus/icons-vue'
Delete, import nodata from '@/assets/img/no-data.png'
DocumentCopy,
InfoFilled,
Orange,
} from "@element-plus/icons-vue";
import nodata from "@/assets/img/no-data.png";
import { httpGet, httpPost } from "@/utils/http"; import { httpGet, httpPost } from '@/utils/http'
import { ElMessage, ElMessageBox } from "element-plus"; import { ElMessage, ElMessageBox } from 'element-plus'
import Clipboard from "clipboard"; import Clipboard from 'clipboard'
import { checkSession, getSystemInfo } from "@/store/cache"; import { checkSession, getSystemInfo } from '@/store/cache'
import { useRouter } from "vue-router"; import { useRouter } from 'vue-router'
import { getSessionId } from "@/store/session"; import { getSessionId } from '@/store/session'
import { useSharedStore } from "@/store/sharedata"; import { useSharedStore } from '@/store/sharedata'
import TaskList from "@/components/TaskList.vue"; import TaskList from '@/components/TaskList.vue'
import BackTop from "@/components/BackTop.vue"; import BackTop from '@/components/BackTop.vue'
import { showMessageError } from "@/utils/dialog"; import { showMessageError } from '@/utils/dialog'
import SdTaskView from "@/components/SdTaskView.vue"; import SdTaskView from '@/components/SdTaskView.vue'
import { LazyImg, Waterfall } from "vue-waterfall-plugin-next"; import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
import "vue-waterfall-plugin-next/dist/style.css"; import 'vue-waterfall-plugin-next/dist/style.css'
const listBoxHeight = ref(0); const listBoxHeight = ref(0)
// const paramBoxHeight = ref(0) // const paramBoxHeight = ref(0)
const showTaskDialog = ref(false); const showTaskDialog = ref(false)
const item = ref({}); const item = ref({})
const isLogin = ref(false); const isLogin = ref(false)
const loading = ref(true); const loading = ref(true)
const store = useSharedStore(); const store = useSharedStore()
const waterfallOptions = store.waterfallOptions; const waterfallOptions = store.waterfallOptions
const resizeElement = function () { const resizeElement = function () {
listBoxHeight.value = window.innerHeight - 80; listBoxHeight.value = window.innerHeight - 80
// paramBoxHeight.value = window.innerHeight - 200 // paramBoxHeight.value = window.innerHeight - 200
}; }
resizeElement(); resizeElement()
window.onresize = () => { window.onresize = () => {
resizeElement(); resizeElement()
}; }
const samplers = [ const samplers = [
"Euler a", 'Euler a',
"DPM++ 2S a", 'DPM++ 2S a',
"DPM++ 2M", 'DPM++ 2M',
"DPM++ SDE", 'DPM++ SDE',
"DPM++ 2M SDE", 'DPM++ 2M SDE',
"UniPC", 'UniPC',
"Restart", 'Restart',
]; ]
const schedulers = ["Automatic", "Karras", "Exponential", "Uniform"]; const schedulers = ['Automatic', 'Karras', 'Exponential', 'Uniform']
const scaleAlg = ["Latent", "ESRGAN_4x", "R-ESRGAN 4x+", "SwinIR_4x", "LDSR"]; const scaleAlg = ['Latent', 'ESRGAN_4x', 'R-ESRGAN 4x+', 'SwinIR_4x', 'LDSR']
const params = ref({ const params = ref({
width: 1024, width: 1024,
height: 1024, height: 1024,
@ -590,228 +530,226 @@ const params = ref({
hd_scale: 2, hd_scale: 2,
hd_scale_alg: scaleAlg[0], hd_scale_alg: scaleAlg[0],
hd_steps: 0, hd_steps: 0,
prompt: "", prompt: '',
neg_prompt: neg_prompt:
"nsfw, paintings,low quality,easynegative,ng_deepnegative ,lowres,bad anatomy,bad hands,bad feet", 'nsfw, paintings,low quality,easynegative,ng_deepnegative ,lowres,bad anatomy,bad hands,bad feet',
}); })
const runningJobs = ref([]); const runningJobs = ref([])
const finishedJobs = ref([]); const finishedJobs = ref([])
const allowPulling = ref(true); // 是否允许轮询 const allowPulling = ref(true) // 是否允许轮询
const tastPullHandler = ref(null); const tastPullHandler = ref(null)
const router = useRouter(); const router = useRouter()
// 检查是否有画同款的参数 // 检查是否有画同款的参数
const _params = router.currentRoute.value.params["copyParams"]; const _params = router.currentRoute.value.params['copyParams']
if (_params) { if (_params) {
params.value = JSON.parse(_params); params.value = JSON.parse(_params)
} }
const power = ref(0); const power = ref(0)
const sdPower = ref(0); // 画一张 SD 图片消耗算力 const sdPower = ref(0) // 画一张 SD 图片消耗算力
const userId = ref(0); const userId = ref(0)
const clipboard = ref(null); const clipboard = ref(null)
onMounted(() => { onMounted(() => {
initData(); initData()
clipboard.value = new Clipboard(".copy-prompt-sd"); clipboard.value = new Clipboard('.copy-prompt-sd')
clipboard.value.on("success", () => { clipboard.value.on('success', () => {
ElMessage.success("复制成功！"); ElMessage.success('复制成功！')
}); })
clipboard.value.on("error", () => { clipboard.value.on('error', () => {
ElMessage.error("复制失败！"); ElMessage.error('复制失败！')
}); })
getSystemInfo() getSystemInfo()
.then((res) => { .then((res) => {
sdPower.value = res.data.sd_power; sdPower.value = res.data.sd_power
params.value.neg_prompt = res.data.sd_neg_prompt; params.value.neg_prompt = res.data.sd_neg_prompt
}) })
.catch((e) => { .catch((e) => {
ElMessage.error("获取系统配置失败：" + e.message); ElMessage.error('获取系统配置失败：' + e.message)
}); })
}); })
onUnmounted(() => { onUnmounted(() => {
clipboard.value.destroy(); clipboard.value.destroy()
if (tastPullHandler.value) { if (tastPullHandler.value) {
clearInterval(tastPullHandler.value); clearInterval(tastPullHandler.value)
} }
}); })
const initData = () => { const initData = () => {
checkSession() checkSession()
.then((user) => { .then((user) => {
power.value = user["power"]; power.value = user['power']
userId.value = user.id; userId.value = user.id
isLogin.value = true; isLogin.value = true
page.value = 0; page.value = 0
fetchRunningJobs(); fetchRunningJobs()
fetchFinishJobs(); fetchFinishJobs()
tastPullHandler.value = setInterval(() => { tastPullHandler.value = setInterval(() => {
if (allowPulling.value) { if (allowPulling.value) {
fetchRunningJobs(); fetchRunningJobs()
} }
}, 5000); }, 5000)
}) })
.catch(() => {}); .catch(() => {})
}; }
const fetchRunningJobs = () => { const fetchRunningJobs = () => {
if (!isLogin.value) { if (!isLogin.value) {
return; return
} }
// 获取运行中的任务 // 获取运行中的任务
httpGet(`/api/sd/jobs?finish=0`) httpGet(`/api/sd/jobs?finish=0`)
.then((res) => { .then((res) => {
if (runningJobs.value.length !== res.data.items.length) { if (runningJobs.value.length !== res.data.items.length) {
page.value = 0; page.value = 0
fetchFinishJobs(); fetchFinishJobs()
} }
if (runningJobs.value.length === 0) { if (runningJobs.value.length === 0) {
allowPulling.value = false; allowPulling.value = false
} }
runningJobs.value = res.data.items; runningJobs.value = res.data.items
}) })
.catch((e) => { .catch((e) => {
ElMessage.error("获取任务失败：" + e.message); ElMessage.error('获取任务失败：' + e.message)
}); })
}; }
const page = ref(0); const page = ref(0)
const pageSize = ref(20); const pageSize = ref(20)
const isOver = ref(false); const isOver = ref(false)
// 获取已完成的任务 // 获取已完成的任务
const fetchFinishJobs = () => { const fetchFinishJobs = () => {
if (!isLogin.value || isOver.value === true) { if (!isLogin.value || isOver.value === true) {
return; return
} }
loading.value = true; loading.value = true
page.value = page.value + 1; page.value = page.value + 1
httpGet( httpGet(`/api/sd/jobs?finish=1&page=${page.value}&page_size=${pageSize.value}`)
`/api/sd/jobs?finish=1&page=${page.value}&page_size=${pageSize.value}`
)
.then((res) => { .then((res) => {
if (res.data.items.length < pageSize.value) { if (res.data.items.length < pageSize.value) {
isOver.value = true; isOver.value = true
loading.value = false; loading.value = false
} }
const imageList = res.data.items; const imageList = res.data.items
for (let i = 0; i < imageList.length; i++) { for (let i = 0; i < imageList.length; i++) {
imageList[i]["img_thumb"] = imageList[i]['img_thumb'] = imageList[i]['img_url'] + '?imageView2/4/w/300/h/0/q/75'
imageList[i]["img_url"] + "?imageView2/4/w/300/h/0/q/75";
} }
if (page.value === 1) { if (page.value === 1) {
finishedJobs.value = imageList; finishedJobs.value = imageList
} else { } else {
finishedJobs.value = finishedJobs.value.concat(imageList); finishedJobs.value = finishedJobs.value.concat(imageList)
} }
}) })
.catch((e) => { .catch((e) => {
ElMessage.error("获取任务失败：" + e.message); ElMessage.error('获取任务失败：' + e.message)
loading.value = false; loading.value = false
}); })
}; }
// 创建绘图任务 // 创建绘图任务
const promptRef = ref(null); const promptRef = ref(null)
const generate = () => { const generate = () => {
if (params.value.prompt === "") { if (params.value.prompt === '') {
promptRef.value.focus(); promptRef.value.focus()
return ElMessage.error("请输入绘画提示词！"); return ElMessage.error('请输入绘画提示词！')
} }
if (!isLogin.value) { if (!isLogin.value) {
store.setShowLoginDialog(true); store.setShowLoginDialog(true)
return; return
} }
if (!params.value.seed) { if (!params.value.seed) {
params.value.seed = -1; params.value.seed = -1
} }
params.value.session_id = getSessionId(); params.value.session_id = getSessionId()
httpPost("/api/sd/image", params.value) httpPost('/api/sd/image', params.value)
.then(() => { .then(() => {
ElMessage.success("绘画任务推送成功，请耐心等待任务执行..."); ElMessage.success('绘画任务推送成功，请耐心等待任务执行...')
power.value -= sdPower.value; power.value -= sdPower.value
allowPulling.value = true; allowPulling.value = true
runningJobs.value.push({ runningJobs.value.push({
progress: 0, progress: 0,
}); })
isOver.value = false
}) })
.catch((e) => { .catch((e) => {
ElMessage.error("任务推送失败：" + e.message); ElMessage.error('任务推送失败：' + e.message)
}); })
}; }
const showTask = (row) => { const showTask = (row) => {
item.value = row; item.value = row
showTaskDialog.value = true; showTaskDialog.value = true
}; }
const copyParams = (row) => { const copyParams = (row) => {
params.value = row.params; params.value = row.params
showTaskDialog.value = false; showTaskDialog.value = false
}; }
const removeImage = (item) => { const removeImage = (item) => {
ElMessageBox.confirm("此操作将会删除任务和图片，继续操作码?", "删除提示", { ElMessageBox.confirm('此操作将会删除任务和图片，继续操作码?', '删除提示', {
confirmButtonText: "确认", confirmButtonText: '确认',
cancelButtonText: "取消", cancelButtonText: '取消',
type: "warning", type: 'warning',
}) })
.then(() => { .then(() => {
httpGet("/api/sd/remove", { id: item.id }) httpGet('/api/sd/remove', { id: item.id })
.then(() => { .then(() => {
ElMessage.success("任务删除成功"); ElMessage.success('任务删除成功')
page.value = 0; page.value = 0
isOver.value = false; isOver.value = false
fetchFinishJobs(); fetchFinishJobs()
}) })
.catch((e) => { .catch((e) => {
ElMessage.error("任务删除失败：" + e.message); ElMessage.error('任务删除失败：' + e.message)
}); })
}) })
.catch(() => {}); .catch(() => {})
}; }
// 发布图片到作品墙 // 发布图片到作品墙
const publishImage = (item, action) => { const publishImage = (item, action) => {
let text = "图片发布"; let text = '图片发布'
if (action === false) { if (action === false) {
text = "取消发布"; text = '取消发布'
} }
httpGet("/api/sd/publish", { id: item.id, action: action }) httpGet('/api/sd/publish', { id: item.id, action: action })
.then(() => { .then(() => {
ElMessage.success(text + "成功"); ElMessage.success(text + '成功')
item.publish = action; item.publish = action
page.value = 0; page.value = 0
isOver.value = false; isOver.value = false
item.publish = action; item.publish = action
}) })
.catch((e) => { .catch((e) => {
ElMessage.error(text + "失败：" + e.message); ElMessage.error(text + '失败：' + e.message)
}); })
}; }
const isGenerating = ref(false); const isGenerating = ref(false)
const generatePrompt = () => { const generatePrompt = () => {
if (params.value.prompt === "") { if (params.value.prompt === '') {
return showMessageError("请输入原始提示词"); return showMessageError('请输入原始提示词')
} }
isGenerating.value = true; isGenerating.value = true
httpPost("/api/prompt/image", { prompt: params.value.prompt }) httpPost('/api/prompt/image', { prompt: params.value.prompt })
.then((res) => { .then((res) => {
params.value.prompt = res.data; params.value.prompt = res.data
isGenerating.value = false; isGenerating.value = false
}) })
.catch((e) => { .catch((e) => {
showMessageError("生成提示词失败：" + e.message); showMessageError('生成提示词失败：' + e.message)
isGenerating.value = false; isGenerating.value = false
}); })
}; }
</script> </script>
<style lang="stylus"> <style lang="stylus">