xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2026-03-04 03:04:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

acomplish replacing Vue-cli with Vite

Browse Source
This commit is contained in:
GeekMaster
2025-05-26 15:56:18 +08:00
parent b1ddcef593
commit 76a3ada85f
44 changed files with 2811 additions and 9576 deletions
Download Patch File Download Diff File Expand all files Collapse all files

328
web/src/views/mobile/ChatList.vue
View File

@@ -2,46 +2,43 @@
<div class="app-background">
<div class="container mobile-chat-list">
<van-nav-bar
:title="title"
left-text="新建会话"
@click-left="showPicker = true"
custom-class="navbar"
:title="title"
left-text="新建会话"
@click-left="showPicker = true"
custom-class="navbar"
>
<template #right>
<van-icon name="delete-o" @click="clearAllChatHistory"/>
<van-icon name="delete-o" @click="clearAllChatHistory" />
</template>
</van-nav-bar>
<div class="content">
<van-search
v-model="chatName"
input-align="center"
placeholder="请输入会话标题"
custom-class="van-search"
@input="search"
v-model="chatName"
input-align="center"
placeholder="请输入会话标题"
custom-class="van-search"
@input="search"
/>
<van-list
v-model:error="error"
v-model:loading="loading"
:finished="finished"
error-text="请求失败，点击重新加载"
finished-text="没有更多了"
@load="onLoad"
v-model:error="error"
v-model:loading="loading"
:finished="finished"
error-text="请求失败，点击重新加载"
finished-text="没有更多了"
@load="onLoad"
>
<van-swipe-cell v-for="item in chats" :key="item.id">
<van-cell @click="changeChat(item)">
<div class="chat-list-item">
<van-image
:src="item.icon"
round
/>
<van-image :src="item.icon" round />
<div class="van-ellipsis">{{ item.title }}</div>
</div>
</van-cell>
<template #right>
<van-button square text="修改" type="primary" @click="editChat(item)"/>
<van-button square text="删除" type="danger" @click="removeChat(item)"/>
<van-button square text="修改" type="primary" @click="editChat(item)" />
<van-button square text="删除" type="danger" @click="removeChat(item)" />
</template>
</van-swipe-cell>
</van-list>
@@ -50,43 +47,43 @@
<van-popup v-model:show="showPicker" position="bottom" class="popup">
<van-picker
:columns="columns"
title="选择模型和角色"
@change="onChange"
@cancel="showPicker = false"
@confirm="newChat"
:columns="columns"
title="选择模型和角色"
@change="onChange"
@cancel="showPicker = false"
@confirm="newChat"
>
<template #option="item">
<div class="picker-option">
<van-image
v-if="item.icon"
:src="item.icon"
fit="cover"
round
/>
<van-image v-if="item.icon" :src="item.icon" fit="cover" round />
<span>{{ item.text }}</span>
</div>
</template>
</van-picker>
</van-popup>
<van-dialog v-model:show="showEditChat" title="修改对话标题" show-cancel-button class="dialog" @confirm="saveTitle">
<van-field v-model="tmpChatTitle" label="" placeholder="请输入对话标题" class="field"/>
<van-dialog
v-model:show="showEditChat"
title="修改对话标题"
show-cancel-button
class="dialog"
@confirm="saveTitle"
>
<van-field v-model="tmpChatTitle" label="" placeholder="请输入对话标题" class="field" />
</van-dialog>
</div>
</template>
<script setup>
import {ref} from "vue";
import {httpGet, httpPost} from "@/utils/http";
import {showConfirmDialog, showFailToast, showSuccessToast} from "vant";
import {checkSession} from "@/store/cache";
import {router} from "@/router";
import {removeArrayItem, showLoginDialog} from "@/utils/libs";
import { router } from '@/router'
import { checkSession } from '@/store/cache'
import { httpGet, httpPost } from '@/utils/http'
import { removeArrayItem, showLoginDialog } from '@/utils/libs'
import { showConfirmDialog, showFailToast, showSuccessToast } from 'vant'
import { ref } from 'vue'
const title = ref("会话列表")
const chatName = ref("")
const title = ref('会话列表')
const chatName = ref('')
const chats = ref([])
const allChats = ref([])
const loading = ref(false)
@@ -100,105 +97,118 @@ const showPicker = ref(false)
const columns = ref([roles.value, models.value])
const showEditChat = ref(false)
const item = ref({})
const tmpChatTitle = ref("")
const tmpChatTitle = ref('')
checkSession().then((user) => {
loginUser.value = user
isLogin.value = true
// 加载角色列表
httpGet(`/api/app/list/user`).then((res) => {
if (res.data) {
const items = res.data
for (let i = 0; i < items.length; i++) {
// console.log(items[i])
roles.value.push({
text: items[i].name,
value: items[i].id,
icon: items[i].icon,
helloMsg: items[i].hello_msg,
model_id: items[i].model_id
})
}
}
}).catch(() => {
showFailToast("加载聊天角色失败")
checkSession()
.then((user) => {
loginUser.value = user
isLogin.value = true
// 加载角色列表
httpGet(`/api/app/list/user`)
.then((res) => {
if (res.data) {
const items = res.data
for (let i = 0; i < items.length; i++) {
// console.log(items[i])
roles.value.push({
text: items[i].name,
value: items[i].id,
icon: items[i].icon,
helloMsg: items[i].hello_msg,
model_id: items[i].model_id,
})
}
}
})
.catch(() => {
showFailToast('加载聊天角色失败')
})
// 加载模型
httpGet('/api/model/list?enable=1')
.then((res) => {
if (res.data) {
const items = res.data
for (let i = 0; i < items.length; i++) {
models.value.push({ text: items[i].name, value: items[i].id })
}
}
})
.catch((e) => {
showFailToast('加载模型失败: ' + e.message)
})
})
.catch(() => {
loading.value = false
finished.value = true
// 加载模型
httpGet('/api/model/list?enable=1').then(res => {
if (res.data) {
const items = res.data
for (let i = 0; i < items.length; i++) {
models.value.push({text: items[i].name, value: items[i].id})
}
}
}).catch(e => {
showFailToast("加载模型失败: " + e.message)
// 加载角色列表
httpGet('/api/app/list/user')
.then((res) => {
if (res.data) {
const items = res.data
for (let i = 0; i < items.length; i++) {
// console.log(items[i])
roles.value.push({
text: items[i].name,
value: items[i].id,
icon: items[i].icon,
helloMsg: items[i].hello_msg,
})
}
}
})
.catch(() => {
showFailToast('加载聊天角色失败')
})
// 加载模型
httpGet('/api/model/list')
.then((res) => {
if (res.data) {
const items = res.data
for (let i = 0; i < items.length; i++) {
models.value.push({ text: items[i].name, value: items[i].id })
}
}
})
.catch((e) => {
showFailToast('加载模型失败: ' + e.message)
})
})
}).catch(() => {
loading.value = false
finished.value = true
// 加载角色列表
httpGet('/api/app/list/user').then((res) => {
if (res.data) {
const items = res.data
for (let i = 0; i < items.length; i++) {
// console.log(items[i])
roles.value.push({
text: items[i].name,
value: items[i].id,
icon: items[i].icon,
helloMsg: items[i].hello_msg
})
}
}
}).catch(() => {
showFailToast("加载聊天角色失败")
})
// 加载模型
httpGet('/api/model/list').then(res => {
if (res.data) {
const items = res.data
for (let i = 0; i < items.length; i++) {
models.value.push({text: items[i].name, value: items[i].id})
}
}
}).catch(e => {
showFailToast("加载模型失败: " + e.message)
})
})
const onLoad = () => {
checkSession().then(() => {
httpGet("/api/chat/list?user_id=" + loginUser.value.id).then((res) => {
if (res.data) {
chats.value = res.data;
allChats.value = res.data;
finished.value = true
}
loading.value = false;
}).catch(() => {
error.value = true
showFailToast("加载会话列表失败")
checkSession()
.then(() => {
httpGet('/api/chat/list?user_id=' + loginUser.value.id)
.then((res) => {
if (res.data) {
chats.value = res.data
allChats.value = res.data
finished.value = true
}
loading.value = false
})
.catch(() => {
error.value = true
showFailToast('加载会话列表失败')
})
})
}).catch(() => {})
};
.catch(() => {})
}
const search = () => {
if (chatName.value === '') {
chats.value = allChats.value
return
}
const items = [];
const items = []
for (let i = 0; i < allChats.value.length; i++) {
if (allChats.value[i].title.toLowerCase().indexOf(chatName.value.toLowerCase()) !== -1) {
items.push(allChats.value[i]);
items.push(allChats.value[i])
}
}
chats.value = items;
chats.value = items
}
const clearAllChatHistory = () => {
@@ -208,17 +218,21 @@ const clearAllChatHistory = () => {
showConfirmDialog({
title: '操作提示',
message: '确定要删除所有的会话记录吗？'
}).then(() => {
httpGet("/api/chat/clear").then(() => {
showSuccessToast('所有聊天记录已清空')
chats.value = [];
}).catch(e => {
showFailToast("操作失败：" + e.message)
})
}).catch(() => {
// on cancel
message: '确定要删除所有的会话记录吗？',
})
.then(() => {
httpGet('/api/chat/clear')
.then(() => {
showSuccessToast('所有聊天记录已清空')
chats.value = []
})
.catch((e) => {
showFailToast('操作失败：' + e.message)
})
})
.catch(() => {
// on cancel
})
}
const newChat = (item) => {
@@ -227,7 +241,9 @@ const newChat = (item) => {
}
showPicker.value = false
const options = item.selectedOptions
router.push(`/mobile/chat/session?title=新对话&role_id=${options[0].value}&model_id=${options[1].value}`)
router.push(
`/mobile/chat/session?title=新对话&role_id=${options[0].value}&model_id=${options[1].value}`
)
}
const changeChat = (chat) => {
@@ -240,40 +256,42 @@ const editChat = (row) => {
tmpChatTitle.value = row.title
}
const saveTitle = () => {
httpPost('/api/chat/update', {chat_id: item.value.chat_id, title: tmpChatTitle.value}).then(() => {
showSuccessToast("操作成功！");
item.value.title = tmpChatTitle.value;
}).catch(e => {
showFailToast("操作失败：" + e.message);
})
httpPost('/api/chat/update', { chat_id: item.value.chat_id, title: tmpChatTitle.value })
.then(() => {
showSuccessToast('操作成功！')
item.value.title = tmpChatTitle.value
})
.catch((e) => {
showFailToast('操作失败：' + e.message)
})
}
const removeChat = (item) => {
httpGet('/api/chat/remove?chat_id=' + item.chat_id).then(() => {
chats.value = removeArrayItem(chats.value, item, function (e1, e2) {
return e1.id === e2.id
httpGet('/api/chat/remove?chat_id=' + item.chat_id)
.then(() => {
chats.value = removeArrayItem(chats.value, item, function (e1, e2) {
return e1.id === e2.id
})
})
.catch((e) => {
showFailToast('操作失败：' + e.message)
})
}).catch(e => {
showFailToast('操作失败：' + e.message);
})
}
const onChange = (item) => {
const selectedValues = item.selectedOptions
if (selectedValues[0].model_id) {
for (let i = 0; i < columns.value[1].length; i++) {
columns.value[1][i].disabled = columns.value[1][i].value !== selectedValues[0].model_id;
columns.value[1][i].disabled = columns.value[1][i].value !== selectedValues[0].model_id
}
} else {
for (let i = 0; i < columns.value[1].length; i++) {
columns.value[1][i].disabled = false;
columns.value[1][i].disabled = false
}
}
}
</script>
<style lang="stylus" scoped>
@import "@/assets/css/mobile/chat-list.styl"
</style>
@import '../../assets/css/mobile/chat-list.styl'
</style>

4
web/src/views/mobile/ChatSession.vue
View File

@@ -601,6 +601,6 @@ const onChange = (item) => {
}
</script>
<style lang="stylus">
@import "@/assets/css/mobile/chat-session.styl"
<style lang="stylus" scoped>
@import "../../assets/css/mobile/chat-session.styl"
</style>

25
web/src/views/mobile/Home.vue
View File

@@ -1,37 +1,36 @@
<template>
<van-config-provider :theme="theme">
<div class="mobile-home">
<router-view/>
<router-view />
<van-tabbar route v-model="active">
<van-tabbar-item to="/mobile/index" name="home" icon="home-o">首页</van-tabbar-item>
<van-tabbar-item to="/mobile/chat" name="chat" icon="chat-o">对话</van-tabbar-item>
<van-tabbar-item to="/mobile/image" name="image" icon="photo-o">绘图</van-tabbar-item>
<van-tabbar-item to="/mobile/profile" name="profile" icon="user-o">我的
</van-tabbar-item>
<van-tabbar-item to="/mobile/profile" name="profile" icon="user-o">我的 </van-tabbar-item>
</van-tabbar>
</div>
</van-config-provider>
</template>
<script setup>
import {ref, watch} from "vue";
import {useSharedStore} from "@/store/sharedata";
import { useSharedStore } from '@/store/sharedata'
import { ref, watch } from 'vue'
const active = ref('home')
const store = useSharedStore()
const theme = ref(store.theme)
watch(() => store.theme, (val) => {
theme.value = val
})
watch(
() => store.theme,
(val) => {
theme.value = val
}
)
</script>
<style lang="stylus">
@import '@/assets/iconfont/iconfont.css';
@import '../../assets/iconfont/iconfont.css';
.mobile-home {
.container {
.van-nav-bar {
@@ -53,4 +52,4 @@ watch(() => store.theme, (val) => {
position fixed
width 100%
}
</style>
</style>

463
web/src/views/mobile/pages/ImageDall.vue
View File

@@ -3,29 +3,65 @@
<van-form @submit="generate">
<van-cell-group inset>
<div>
<van-field v-model="selectedModel" is-link label="生图模型" placeholder="选择生图模型" @click="showModelPicker = true" />
<van-field
v-model="selectedModel"
is-link
label="生图模型"
placeholder="选择生图模型"
@click="showModelPicker = true"
/>
<van-popup v-model:show="showModelPicker" position="bottom" teleport="#app">
<van-picker :columns="models" @cancel="showModelPicker = false" @confirm="modelConfirm" />
<van-picker
:columns="models"
@cancel="showModelPicker = false"
@confirm="modelConfirm"
/>
</van-popup>
</div>
<div>
<van-field v-model="quality" is-link label="图片质量" placeholder="选择图片质量" @click="showQualityPicker = true" />
<van-field
v-model="quality"
is-link
label="图片质量"
placeholder="选择图片质量"
@click="showQualityPicker = true"
/>
<van-popup v-model:show="showQualityPicker" position="bottom" teleport="#app">
<van-picker :columns="qualities" @cancel="showQualityPicker = false" @confirm="qualityConfirm" />
<van-picker
:columns="qualities"
@cancel="showQualityPicker = false"
@confirm="qualityConfirm"
/>
</van-popup>
</div>
<div>
<van-field v-model="size" is-link label="图片尺寸" placeholder="选择图片尺寸" @click="showSizePicker = true" />
<van-field
v-model="size"
is-link
label="图片尺寸"
placeholder="选择图片尺寸"
@click="showSizePicker = true"
/>
<van-popup v-model:show="showSizePicker" position="bottom" teleport="#app">
<van-picker :columns="sizes" @cancel="showSizePicker = false" @confirm="sizeConfirm" />
</van-popup>
</div>
<div>
<van-field v-model="style" is-link label="图片样式" placeholder="选择图片样式" @click="showStylePicker = true" />
<van-field
v-model="style"
is-link
label="图片样式"
placeholder="选择图片样式"
@click="showStylePicker = true"
/>
<van-popup v-model:show="showStylePicker" position="bottom" teleport="#app">
<van-picker :columns="styles" @cancel="showStylePicker = false" @confirm="styleConfirm" />
<van-picker
:columns="styles"
@cancel="showStylePicker = false"
@confirm="styleConfirm"
/>
</van-popup>
</div>
@@ -61,7 +97,14 @@
<div v-if="item.progress > 0">
<van-image src="/images/img-holder.png"></van-image>
<div class="progress">
<van-circle v-model:current-rate="item.progress" :rate="item.progress" :speed="100" :text="item.progress + '%'" :stroke-width="60" size="90px" />
<van-circle
v-model:current-rate="item.progress"
:rate="item.progress"
:speed="100"
:text="item.progress + '%'"
:stroke-width="60"
size="90px"
/>
</div>
</div>
@@ -97,11 +140,19 @@
<div class="title">任务失败</div>
<div class="opt">
<van-button size="small" @click="showErrMsg(item)">详情</van-button>
<van-button type="danger" @click="removeImage($event, item)" size="small">删除</van-button>
<van-button type="danger" @click="removeImage($event, item)" size="small"
>删除</van-button
>
</div>
</div>
<div class="job-item" v-else>
<van-image :src="item['img_url']" :class="item['can_opt'] ? '' : 'upscale'" lazy-load @click="imageView(item)" fit="cover">
<van-image
:src="item['img_url']"
:class="item['can_opt'] ? '' : 'upscale'"
lazy-load
@click="imageView(item)"
fit="cover"
>
<template v-slot:loading>
<van-loading type="spinner" size="20" />
</template>
@@ -109,7 +160,12 @@
<div class="remove">
<el-button type="danger" :icon="Delete" @click="removeImage($event, item)" circle />
<el-button type="warning" v-if="item.publish" @click="publishImage($event, item, false)" circle>
<el-button
type="warning"
v-if="item.publish"
@click="publishImage($event, item, false)"
circle
>
<i class="iconfont icon-cancel-share"></i>
</el-button>
<el-button type="success" v-else @click="publishImage($event, item, true)" circle>
@@ -124,324 +180,343 @@
</van-grid>
</van-list>
</div>
<button style="display: none" class="copy-prompt-dall" :data-clipboard-text="prompt" id="copy-btn-dall">复制</button>
<button
style="display: none"
class="copy-prompt-dall"
:data-clipboard-text="prompt"
id="copy-btn-dall"
>
复制
</button>
</div>
</template>
<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import { Delete } from "@element-plus/icons-vue";
import { httpGet, httpPost } from "@/utils/http";
import Clipboard from "clipboard";
import { checkSession, getSystemInfo } from "@/store/cache";
import { useRouter } from "vue-router";
import { getSessionId } from "@/store/session";
import { showConfirmDialog, showDialog, showFailToast, showImagePreview, showNotify, showSuccessToast, showToast } from "vant";
import { showLoginDialog } from "@/utils/libs";
import { useSharedStore } from "@/store/sharedata";
import { checkSession, getSystemInfo } from '@/store/cache'
import { getSessionId } from '@/store/session'
import { useSharedStore } from '@/store/sharedata'
import { httpGet, httpPost } from '@/utils/http'
import { showLoginDialog } from '@/utils/libs'
import { Delete } from '@element-plus/icons-vue'
import Clipboard from 'clipboard'
import {
showConfirmDialog,
showDialog,
showFailToast,
showImagePreview,
showNotify,
showSuccessToast,
showToast,
} from 'vant'
import { onMounted, onUnmounted, ref } from 'vue'
import { useRouter } from 'vue-router'
const listBoxHeight = ref(window.innerHeight - 40);
const mjBoxHeight = ref(window.innerHeight - 150);
const isLogin = ref(false);
const listBoxHeight = ref(window.innerHeight - 40)
const mjBoxHeight = ref(window.innerHeight - 150)
const isLogin = ref(false)
window.onresize = () => {
listBoxHeight.value = window.innerHeight - 40;
mjBoxHeight.value = window.innerHeight - 150;
};
listBoxHeight.value = window.innerHeight - 40
mjBoxHeight.value = window.innerHeight - 150
}
const qualities = [
{ text: "标准", value: "standard" },
{ text: "高清", value: "hd" },
];
{ text: '标准', value: 'standard' },
{ text: '高清', value: 'hd' },
]
const fluxSizes = [
{ text: "1024x1024", value: "1024x1024" },
{ text: "1024x768", value: "1024x768" },
{ text: "768x1024", value: "768x1024" },
{ text: "1280x960", value: "1280x960" },
{ text: "960x1280", value: "960x1280" },
{ text: "1366x768", value: "1366x768" },
{ text: "768x1366", value: "768x1366" },
];
{ text: '1024x1024', value: '1024x1024' },
{ text: '1024x768', value: '1024x768' },
{ text: '768x1024', value: '768x1024' },
{ text: '1280x960', value: '1280x960' },
{ text: '960x1280', value: '960x1280' },
{ text: '1366x768', value: '1366x768' },
{ text: '768x1366', value: '768x1366' },
]
const dalleSizes = [
{ text: "1024x1024", value: "1024x1024" },
{ text: "1792x1024", value: "1792x1024" },
{ text: "1024x1792", value: "1024x1792" },
];
{ text: '1024x1024', value: '1024x1024' },
{ text: '1792x1024', value: '1792x1024' },
{ text: '1024x1792', value: '1024x1792' },
]
let sizes = dalleSizes;
let sizes = dalleSizes
const styles = [
{ text: "生动", value: "vivid" },
{ text: "自然", value: "natural" },
];
{ text: '生动', value: 'vivid' },
{ text: '自然', value: 'natural' },
]
const params = ref({
quality: qualities[0].value,
size: sizes[0].value,
style: styles[0].value,
prompt: "",
});
const quality = ref(qualities[0].text);
const size = ref(sizes[0].text);
const style = ref(styles[0].text);
prompt: '',
})
const quality = ref(qualities[0].text)
const size = ref(sizes[0].text)
const style = ref(styles[0].text)
const showQualityPicker = ref(false);
const showStylePicker = ref(false);
const showSizePicker = ref(false);
const showModelPicker = ref(false);
const showQualityPicker = ref(false)
const showStylePicker = ref(false)
const showSizePicker = ref(false)
const showModelPicker = ref(false)
const runningJobs = ref([]);
const finishedJobs = ref([]);
const allowPulling = ref(true); // 是否允许轮询
const tastPullHandler = ref(null);
const router = useRouter();
const power = ref(0);
const dallPower = ref(0); // 画一张 DALL 图片消耗算力
const runningJobs = ref([])
const finishedJobs = ref([])
const allowPulling = ref(true) // 是否允许轮询
const tastPullHandler = ref(null)
const router = useRouter()
const power = ref(0)
const dallPower = ref(0) // 画一张 DALL 图片消耗算力
const userId = ref(0);
const store = useSharedStore();
const clipboard = ref(null);
const prompt = ref("");
const models = ref([]);
const selectedModel = ref(null);
const userId = ref(0)
const store = useSharedStore()
const clipboard = ref(null)
const prompt = ref('')
const models = ref([])
const selectedModel = ref(null)
onMounted(() => {
initData();
clipboard.value = new Clipboard(".copy-prompt-dall");
clipboard.value.on("success", () => {
showNotify({ type: "success", message: "复制成功", duration: 1000 });
});
clipboard.value.on("error", () => {
showNotify({ type: "danger", message: "复制失败", duration: 2000 });
});
initData()
clipboard.value = new Clipboard('.copy-prompt-dall')
clipboard.value.on('success', () => {
showNotify({ type: 'success', message: '复制成功', duration: 1000 })
})
clipboard.value.on('error', () => {
showNotify({ type: 'danger', message: '复制失败', duration: 2000 })
})
getSystemInfo()
.then((res) => {
dallPower.value = res.data.dall_power;
dallPower.value = res.data.dall_power
})
.catch((e) => {
showNotify({ type: "danger", message: "获取系统配置失败：" + e.message });
});
showNotify({ type: 'danger', message: '获取系统配置失败：' + e.message })
})
// 获取模型列表
httpGet("/api/dall/models")
httpGet('/api/dall/models')
.then((res) => {
for (let i = 0; i < res.data.length; i++) {
models.value.push({ text: res.data[i].name, value: res.data[i].id, name: res.data[i].value });
models.value.push({
text: res.data[i].name,
value: res.data[i].id,
name: res.data[i].value,
})
}
selectedModel.value = models.value[0]?.text;
params.value.model_id = models.value[0]?.value;
selectedModel.value = models.value[0]?.text
params.value.model_id = models.value[0]?.value
})
.catch((e) => {
showMessageError("获取模型列表失败：" + e.message);
});
});
showMessageError('获取模型列表失败：' + e.message)
})
})
onUnmounted(() => {
clipboard.value.destroy();
clipboard.value.destroy()
if (tastPullHandler.value) {
clearInterval(tastPullHandler.value);
clearInterval(tastPullHandler.value)
}
});
})
const initData = () => {
checkSession()
.then((user) => {
power.value = user["power"];
isLogin.value = true;
fetchRunningJobs();
fetchFinishJobs(1);
power.value = user['power']
isLogin.value = true
fetchRunningJobs()
fetchFinishJobs(1)
tastPullHandler.value = setInterval(() => {
if (allowPulling.value) {
fetchRunningJobs();
fetchRunningJobs()
}
}, 5000);
}, 5000)
})
.catch(() => {
loading.value = false;
});
};
loading.value = false
})
}
const fetchRunningJobs = () => {
// 获取运行中的任务
httpGet(`/api/dall/jobs?finish=0`)
.then((res) => {
if (runningJobs.value.length !== res.data.items.length) {
fetchFinishJobs(1);
fetchFinishJobs(1)
}
if (res.data.items.length === 0) {
allowPulling.value = false;
allowPulling.value = false
}
runningJobs.value = res.data.items;
runningJobs.value = res.data.items
})
.catch((e) => {
showNotify({ type: "danger", message: "获取任务失败：" + e.message });
});
};
showNotify({ type: 'danger', message: '获取任务失败：' + e.message })
})
}
const loading = ref(false);
const finished = ref(false);
const error = ref(false);
const page = ref(0);
const pageSize = ref(10);
const loading = ref(false)
const finished = ref(false)
const error = ref(false)
const page = ref(0)
const pageSize = ref(10)
// 获取已完成的任务
const fetchFinishJobs = (page) => {
loading.value = true;
loading.value = true
httpGet(`/api/dall/jobs?finish=1&page=${page}&page_size=${pageSize.value}`)
.then((res) => {
const jobs = res.data.items;
const jobs = res.data.items
if (jobs.length < pageSize.value) {
finished.value = true;
finished.value = true
}
const _jobs = [];
const _jobs = []
for (let i = 0; i < jobs.length; i++) {
if (jobs[i].progress === -1) {
jobs[i]["thumb_url"] = jobs[i]["img_url"] + "?imageView2/1/w/480/h/600/q/75";
jobs[i]['thumb_url'] = jobs[i]['img_url'] + '?imageView2/1/w/480/h/600/q/75'
}
_jobs.push(jobs[i]);
_jobs.push(jobs[i])
}
if (page === 1) {
finishedJobs.value = _jobs;
finishedJobs.value = _jobs
} else {
finishedJobs.value = finishedJobs.value.concat(_jobs);
finishedJobs.value = finishedJobs.value.concat(_jobs)
}
loading.value = false;
loading.value = false
})
.catch((e) => {
loading.value = false;
showNotify({ type: "danger", message: "获取任务失败：" + e.message });
});
};
loading.value = false
showNotify({ type: 'danger', message: '获取任务失败：' + e.message })
})
}
const onLoad = () => {
page.value += 1;
fetchFinishJobs(page.value);
};
page.value += 1
fetchFinishJobs(page.value)
}
// 创建绘图任务
const promptRef = ref(null);
const promptRef = ref(null)
const generate = () => {
if (!isLogin.value) {
return showLoginDialog(router);
return showLoginDialog(router)
}
if (params.value.prompt === "") {
promptRef.value.focus();
return showToast("请输入绘画提示词！");
if (params.value.prompt === '') {
promptRef.value.focus()
return showToast('请输入绘画提示词！')
}
if (!params.value.seed) {
params.value.seed = -1;
params.value.seed = -1
}
params.value.session_id = getSessionId();
httpPost("/api/dall/image", params.value)
params.value.session_id = getSessionId()
httpPost('/api/dall/image', params.value)
.then(() => {
showSuccessToast("绘画任务推送成功，请耐心等待任务执行...");
power.value -= dallPower.value;
allowPulling.value = true;
showSuccessToast('绘画任务推送成功，请耐心等待任务执行...')
power.value -= dallPower.value
allowPulling.value = true
runningJobs.value.push({
progress: 0,
});
})
})
.catch((e) => {
showFailToast("任务推送失败：" + e.message);
});
};
showFailToast('任务推送失败：' + e.message)
})
}
const showPrompt = (item) => {
prompt.value = item.prompt;
prompt.value = item.prompt
showConfirmDialog({
title: "绘画提示词",
title: '绘画提示词',
message: item.prompt,
confirmButtonText: "复制",
cancelButtonText: "关闭",
confirmButtonText: '复制',
cancelButtonText: '关闭',
})
.then(() => {
document.querySelector("#copy-btn-dall").click();
document.querySelector('#copy-btn-dall').click()
})
.catch(() => {});
};
.catch(() => {})
}
const showErrMsg = (item) => {
showDialog({
title: "错误详情",
message: item["err_msg"],
title: '错误详情',
message: item['err_msg'],
}).then(() => {
// on close
});
};
})
}
const removeImage = (event, item) => {
event.stopPropagation();
event.stopPropagation()
showConfirmDialog({
title: "标题",
message: "此操作将会删除任务和图片，继续操作码?",
title: '标题',
message: '此操作将会删除任务和图片，继续操作码?',
})
.then(() => {
httpGet("/api/dall/remove", { id: item.id, user_id: item.user_id })
httpGet('/api/dall/remove', { id: item.id, user_id: item.user_id })
.then(() => {
showSuccessToast("任务删除成功");
fetchFinishJobs(1);
showSuccessToast('任务删除成功')
fetchFinishJobs(1)
})
.catch((e) => {
showFailToast("任务删除失败：" + e.message);
});
showFailToast('任务删除失败：' + e.message)
})
})
.catch(() => {
showToast("您取消了操作");
});
};
showToast('您取消了操作')
})
}
// 发布图片到作品墙
const publishImage = (event, item, action) => {
event.stopPropagation();
let text = "图片发布";
event.stopPropagation()
let text = '图片发布'
if (action === false) {
text = "取消发布";
text = '取消发布'
}
httpGet("/api/dall/publish", { id: item.id, action: action, user_id: item.user_id })
httpGet('/api/dall/publish', { id: item.id, action: action, user_id: item.user_id })
.then(() => {
showSuccessToast(text + "成功");
item.publish = action;
showSuccessToast(text + '成功')
item.publish = action
})
.catch((e) => {
showFailToast(text + "失败：" + e.message);
});
};
showFailToast(text + '失败：' + e.message)
})
}
const imageView = (item) => {
showImagePreview([item["img_url"]]);
};
showImagePreview([item['img_url']])
}
const qualityConfirm = (item) => {
params.value.quality = item.selectedOptions[0].value;
quality.value = item.selectedOptions[0].text;
showQualityPicker.value = false;
};
params.value.quality = item.selectedOptions[0].value
quality.value = item.selectedOptions[0].text
showQualityPicker.value = false
}
const styleConfirm = (item) => {
params.value.style = item.selectedOptions[0].value;
style.value = item.selectedOptions[0].text;
showStylePicker.value = false;
};
params.value.style = item.selectedOptions[0].value
style.value = item.selectedOptions[0].text
showStylePicker.value = false
}
const sizeConfirm = (item) => {
params.value.size = item.selectedOptions[0].value;
size.value = item.selectedOptions[0].text;
showSizePicker.value = false;
};
params.value.size = item.selectedOptions[0].value
size.value = item.selectedOptions[0].text
showSizePicker.value = false
}
const modelConfirm = (item) => {
params.value.model_id = item.selectedOptions[0].value;
selectedModel.value = item.selectedOptions[0].text;
showModelPicker.value = false;
if (item.selectedOptions[0].name.startsWith("dall")) {
sizes = dalleSizes;
params.value.model_id = item.selectedOptions[0].value
selectedModel.value = item.selectedOptions[0].text
showModelPicker.value = false
if (item.selectedOptions[0].name.startsWith('dall')) {
sizes = dalleSizes
} else {
sizes = fluxSizes;
sizes = fluxSizes
}
};
}
</script>
<style lang="stylus">
@import "@/assets/css/mobile/image-sd.styl"
@import '../../../assets/css/mobile/image-sd.styl'
</style>

545
web/src/views/mobile/pages/ImageMj.vue
View File

@@ -5,7 +5,10 @@
<div class="text-line">
<van-row :gutter="10">
<van-col :span="4" v-for="item in rates" :key="item.value">
<div :class="item.value === params.rate ? 'rate active' : 'rate'" @click="changeRate(item)">
<div
:class="item.value === params.rate ? 'rate active' : 'rate'"
@click="changeRate(item)"
>
<div class="icon">
<van-image :src="item.img" fit="cover"></van-image>
</div>
@@ -18,7 +21,10 @@
<div class="text-line">
<van-row :gutter="10">
<van-col :span="8" v-for="item in models" :key="item.value">
<div :class="item.value === params.model ? 'model active' : 'model'" @click="changeModel(item)">
<div
:class="item.value === params.model ? 'model active' : 'model'"
@click="changeModel(item)"
>
<div class="icon">
<van-image :src="item.img" fit="cover"></van-image>
</div>
@@ -32,7 +38,12 @@
<div class="text-line">
<van-field label="创意度">
<template #input>
<van-slider v-model.number="params.chaos" :max="100" :step="1" @update:model-value="showToast('当前值：' + params.chaos)" />
<van-slider
v-model.number="params.chaos"
:max="100"
:step="1"
@update:model-value="showToast('当前值：' + params.chaos)"
/>
</template>
</van-field>
</div>
@@ -40,7 +51,12 @@
<div class="text-line">
<van-field label="风格化">
<template #input>
<van-slider v-model.number="params.stylize" :max="1000" :step="1" @update:model-value="showToast('当前值：' + params.stylize)" />
<van-slider
v-model.number="params.stylize"
:max="1000"
:step="1"
@update:model-value="showToast('当前值：' + params.stylize)"
/>
</template>
</van-field>
</div>
@@ -85,14 +101,27 @@
<div class="text-line">
<van-field label="垫图权重">
<template #input>
<van-slider v-model.number="params.iw" :max="1" :step="0.01" @update:model-value="showToast('当前值：' + params.iw)" />
<van-slider
v-model.number="params.iw"
:max="1"
:step="0.01"
@update:model-value="showToast('当前值：' + params.iw)"
/>
</template>
</van-field>
</div>
<div class="tip-text">提示：只有于 niji6 和 v6 模型支持一致性功能，如果选择其他模型此功能将会生成失败。</div>
<div class="tip-text">
提示：只有于 niji6 和 v6 模型支持一致性功能，如果选择其他模型此功能将会生成失败。
</div>
<van-cell-group>
<van-field v-model="params.cref" center clearable label="角色一致性" placeholder="请输入图片URL或者上传图片">
<van-field
v-model="params.cref"
center
clearable
label="角色一致性"
placeholder="请输入图片URL或者上传图片"
>
<template #button>
<van-uploader @click="beforeUpload('cref')" :after-read="uploadImg">
<van-button size="mini" type="primary" icon="plus" />
@@ -102,7 +131,13 @@
</van-cell-group>
<van-cell-group>
<van-field v-model="params.sref" center clearable label="风格一致性" placeholder="请输入图片URL或者上传图片">
<van-field
v-model="params.sref"
center
clearable
label="风格一致性"
placeholder="请输入图片URL或者上传图片"
>
<template #button>
<van-uploader @click="beforeUpload('sref')" :after-read="uploadImg">
<van-button size="mini" type="primary" icon="plus" />
@@ -114,13 +149,20 @@
<div class="text-line">
<van-field label="一致性权重">
<template #input>
<van-slider v-model.number="params.cw" :max="100" :step="1" @update:model-value="showToast('当前值：' + params.cw)" />
<van-slider
v-model.number="params.cw"
:max="100"
:step="1"
@update:model-value="showToast('当前值：' + params.cw)"
/>
</template>
</van-field>
</div>
</van-tab>
<van-tab title="融图" name="blend">
<div class="tip-text">请上传两张以上的图片，最多不超过五张，超过五张图片请使用图生图功能。</div>
<div class="tip-text">
请上传两张以上的图片，最多不超过五张，超过五张图片请使用图生图功能。
</div>
<div class="text-line">
<van-uploader v-model="imgList" :after-read="uploadImg" />
</div>
@@ -137,13 +179,24 @@
<div class="text-line">
<van-collapse v-model="activeColspan">
<van-collapse-item title="反向提示词" name="neg_prompt">
<van-field v-model="params.neg_prompt" rows="3" maxlength="2000" autosize type="textarea" placeholder="不想出现在图片上的元素(例如：树，建筑)" />
<van-field
v-model="params.neg_prompt"
rows="3"
maxlength="2000"
autosize
type="textarea"
placeholder="不想出现在图片上的元素(例如：树，建筑)"
/>
</van-collapse-item>
</van-collapse>
</div>
<div class="text-line pt-6">
<el-tag>绘图消耗{{ mjPower }}算力，U/V 操作消耗{{ mjActionPower }}算力，当前算力：{{ power }}</el-tag>
<el-tag
>绘图消耗{{ mjPower }}算力，U/V 操作消耗{{ mjActionPower }}算力，当前算力：{{
power
}}</el-tag
>
</div>
<div class="text-line">
@@ -164,7 +217,14 @@
<div v-if="item.progress > 0">
<van-image src="/images/img-holder.png"></van-image>
<div class="progress">
<van-circle v-model:current-rate="item.progress" :rate="item.progress" :speed="100" :text="item.progress + '%'" :stroke-width="60" size="90px" />
<van-circle
v-model:current-rate="item.progress"
:rate="item.progress"
:speed="100"
:text="item.progress + '%'"
:stroke-width="60"
size="90px"
/>
</div>
</div>
@@ -204,7 +264,13 @@
</div>
</div>
<div class="job-item" v-else>
<van-image :src="item['thumb_url']" :class="item['can_opt'] ? '' : 'upscale'" lazy-load @click="imageView(item)" fit="cover">
<van-image
:src="item['thumb_url']"
:class="item['can_opt'] ? '' : 'upscale'"
lazy-load
@click="imageView(item)"
fit="cover"
>
<template v-slot:loading>
<van-loading type="spinner" size="20" />
</template>
@@ -220,16 +286,29 @@
<van-grid-item><a @click="upscale(2, item)" class="opt-btn">U2</a></van-grid-item>
<van-grid-item><a @click="upscale(3, item)" class="opt-btn">U3</a></van-grid-item>
<van-grid-item><a @click="upscale(4, item)" class="opt-btn">U4</a></van-grid-item>
<van-grid-item><a @click="variation(1, item)" class="opt-btn">V1</a></van-grid-item>
<van-grid-item><a @click="variation(2, item)" class="opt-btn">V2</a></van-grid-item>
<van-grid-item><a @click="variation(3, item)" class="opt-btn">V3</a></van-grid-item>
<van-grid-item><a @click="variation(4, item)" class="opt-btn">V4</a></van-grid-item>
<van-grid-item
><a @click="variation(1, item)" class="opt-btn">V1</a></van-grid-item
>
<van-grid-item
><a @click="variation(2, item)" class="opt-btn">V2</a></van-grid-item
>
<van-grid-item
><a @click="variation(3, item)" class="opt-btn">V3</a></van-grid-item
>
<van-grid-item
><a @click="variation(4, item)" class="opt-btn">V4</a></van-grid-item
>
</van-grid>
</div>
<div class="remove">
<el-button type="danger" :icon="Delete" @click="removeImage(item)" circle />
<el-button type="warning" v-if="item.publish" @click="publishImage(item, false)" circle>
<el-button
type="warning"
v-if="item.publish"
@click="publishImage(item, false)"
circle
>
<i class="iconfont icon-cancel-share"></i>
</el-button>
<el-button type="success" v-else @click="publishImage(item, true)" circle>
@@ -245,44 +324,54 @@
</van-list>
</div>
<button style="display: none" class="copy-prompt" :data-clipboard-text="prompt" id="copy-btn">复制</button>
<button style="display: none" class="copy-prompt" :data-clipboard-text="prompt" id="copy-btn">
复制
</button>
</div>
</template>
<script setup>
import { nextTick, onMounted, onUnmounted, ref } from "vue";
import { showConfirmDialog, showFailToast, showImagePreview, showNotify, showSuccessToast, showToast, showDialog } from "vant";
import { httpGet, httpPost } from "@/utils/http";
import Compressor from "compressorjs";
import { getSessionId } from "@/store/session";
import { checkSession, getSystemInfo } from "@/store/cache";
import { useRouter } from "vue-router";
import { Delete } from "@element-plus/icons-vue";
import { showLoginDialog } from "@/utils/libs";
import Clipboard from "clipboard";
import { useSharedStore } from "@/store/sharedata";
import { checkSession, getSystemInfo } from '@/store/cache'
import { getSessionId } from '@/store/session'
import { useSharedStore } from '@/store/sharedata'
import { httpGet, httpPost } from '@/utils/http'
import { showLoginDialog } from '@/utils/libs'
import { Delete } from '@element-plus/icons-vue'
import Clipboard from 'clipboard'
import Compressor from 'compressorjs'
import {
showConfirmDialog,
showDialog,
showFailToast,
showImagePreview,
showNotify,
showSuccessToast,
showToast,
} from 'vant'
import { nextTick, onMounted, onUnmounted, ref } from 'vue'
import { useRouter } from 'vue-router'
const activeColspan = ref([""]);
const activeColspan = ref([''])
const rates = [
{ css: "square", value: "1:1", text: "1:1", img: "/images/mj/rate_1_1.png" },
{ css: "size2-3", value: "2:3", text: "2:3", img: "/images/mj/rate_3_4.png" },
{ css: "size3-4", value: "3:4", text: "3:4", img: "/images/mj/rate_3_4.png" },
{ css: "size4-3", value: "4:3", text: "4:3", img: "/images/mj/rate_4_3.png" },
{ css: "size16-9", value: "16:9", text: "16:9", img: "/images/mj/rate_16_9.png" },
{ css: "size9-16", value: "9:16", text: "9:16", img: "/images/mj/rate_9_16.png" },
];
{ css: 'square', value: '1:1', text: '1:1', img: '/images/mj/rate_1_1.png' },
{ css: 'size2-3', value: '2:3', text: '2:3', img: '/images/mj/rate_3_4.png' },
{ css: 'size3-4', value: '3:4', text: '3:4', img: '/images/mj/rate_3_4.png' },
{ css: 'size4-3', value: '4:3', text: '4:3', img: '/images/mj/rate_4_3.png' },
{ css: 'size16-9', value: '16:9', text: '16:9', img: '/images/mj/rate_16_9.png' },
{ css: 'size9-16', value: '9:16', text: '9:16', img: '/images/mj/rate_9_16.png' },
]
const models = [
{ text: "MJ-6.0", value: " --v 6", img: "/images/mj/mj-v6.png" },
{ text: "MJ-5.2", value: " --v 5.2", img: "/images/mj/mj-v5.2.png" },
{ text: "Niji5", value: " --niji 5", img: "/images/mj/mj-niji.png" },
{ text: "Niji5 可爱", value: " --niji 5 --style cute", img: "/images/mj/nj1.jpg" },
{ text: "Niji5 风景", value: " --niji 5 --style scenic", img: "/images/mj/nj2.jpg" },
{ text: "Niji6", value: " --niji 6", img: "/images/mj/nj3.jpg" },
];
const imgList = ref([]);
{ text: 'MJ-6.0', value: ' --v 6', img: '/images/mj/mj-v6.png' },
{ text: 'MJ-5.2', value: ' --v 5.2', img: '/images/mj/mj-v5.2.png' },
{ text: 'Niji5', value: ' --niji 5', img: '/images/mj/mj-niji.png' },
{ text: 'Niji5 可爱', value: ' --niji 5 --style cute', img: '/images/mj/nj1.jpg' },
{ text: 'Niji5 风景', value: ' --niji 5 --style scenic', img: '/images/mj/nj2.jpg' },
{ text: 'Niji6', value: ' --niji 6', img: '/images/mj/nj3.jpg' },
]
const imgList = ref([])
const params = ref({
task_type: "image",
task_type: 'image',
rate: rates[0].value,
model: models[0].value,
chaos: 0,
@@ -291,229 +380,229 @@ const params = ref({
img_arr: [],
raw: false,
iw: 0,
prompt: "",
neg_prompt: "",
prompt: '',
neg_prompt: '',
tile: false,
quality: 0,
cref: "",
sref: "",
cref: '',
sref: '',
cw: 0,
});
const userId = ref(0);
const router = useRouter();
const runningJobs = ref([]);
const finishedJobs = ref([]);
const power = ref(0);
const activeName = ref("txt2img");
const isLogin = ref(false);
const prompt = ref("");
const store = useSharedStore();
const clipboard = ref(null);
const taskPulling = ref(true);
const tastPullHandler = ref(null);
const downloadPulling = ref(false);
const downloadPullHandler = ref(null);
})
const userId = ref(0)
const router = useRouter()
const runningJobs = ref([])
const finishedJobs = ref([])
const power = ref(0)
const activeName = ref('txt2img')
const isLogin = ref(false)
const prompt = ref('')
const store = useSharedStore()
const clipboard = ref(null)
const taskPulling = ref(true)
const tastPullHandler = ref(null)
const downloadPulling = ref(false)
const downloadPullHandler = ref(null)
onMounted(() => {
clipboard.value = new Clipboard(".copy-prompt");
clipboard.value.on("success", () => {
showNotify({ type: "success", message: "复制成功", duration: 1000 });
});
clipboard.value.on("error", () => {
showNotify({ type: "danger", message: "复制失败", duration: 2000 });
});
clipboard.value = new Clipboard('.copy-prompt')
clipboard.value.on('success', () => {
showNotify({ type: 'success', message: '复制成功', duration: 1000 })
})
clipboard.value.on('error', () => {
showNotify({ type: 'danger', message: '复制失败', duration: 2000 })
})
checkSession()
.then((user) => {
power.value = user["power"];
userId.value = user.id;
isLogin.value = true;
fetchRunningJobs();
fetchFinishJobs(1);
power.value = user['power']
userId.value = user.id
isLogin.value = true
fetchRunningJobs()
fetchFinishJobs(1)
tastPullHandler.value = setInterval(() => {
if (taskPulling.value) {
fetchRunningJobs();
fetchRunningJobs()
}
}, 5000);
}, 5000)
downloadPullHandler.value = setInterval(() => {
if (downloadPulling.value) {
page.value = 1;
fetchFinishJobs(1);
page.value = 1
fetchFinishJobs(1)
}
}, 5000);
}, 5000)
})
.catch(() => {
// router.push('/login')
});
});
})
})
onUnmounted(() => {
clipboard.value.destroy();
clipboard.value.destroy()
if (tastPullHandler.value) {
clearInterval(tastPullHandler.value);
clearInterval(tastPullHandler.value)
}
if (downloadPullHandler.value) {
clearInterval(downloadPullHandler.value);
clearInterval(downloadPullHandler.value)
}
});
})
const mjPower = ref(1);
const mjActionPower = ref(1);
const mjPower = ref(1)
const mjActionPower = ref(1)
getSystemInfo()
.then((res) => {
mjPower.value = res.data["mj_power"];
mjActionPower.value = res.data["mj_action_power"];
mjPower.value = res.data['mj_power']
mjActionPower.value = res.data['mj_action_power']
})
.catch((e) => {
showNotify({ type: "danger", message: "获取系统配置失败：" + e.message });
});
showNotify({ type: 'danger', message: '获取系统配置失败：' + e.message })
})
// 获取运行中的任务
const fetchRunningJobs = (userId) => {
if (!isLogin.value) {
return;
return
}
httpGet(`/api/mj/jobs?finish=0&user_id=${userId}`)
.then((res) => {
const jobs = res.data.items;
const _jobs = [];
const jobs = res.data.items
const _jobs = []
for (let i = 0; i < jobs.length; i++) {
if (jobs[i].progress === -1) {
showNotify({
message: `任务执行失败：${jobs[i]["err_msg"]}`,
type: "danger",
});
if (jobs[i].type === "image") {
power.value += mjPower.value;
message: `任务执行失败：${jobs[i]['err_msg']}`,
type: 'danger',
})
if (jobs[i].type === 'image') {
power.value += mjPower.value
} else {
power.value += mjActionPower.value;
power.value += mjActionPower.value
}
continue;
continue
}
_jobs.push(jobs[i]);
_jobs.push(jobs[i])
}
if (runningJobs.value.length !== _jobs.length) {
page.value = 1;
downloadPulling.value = true;
fetchFinishJobs(1);
page.value = 1
downloadPulling.value = true
fetchFinishJobs(1)
}
if (_jobs.length === 0) {
taskPulling.value = false;
taskPulling.value = false
}
runningJobs.value = _jobs;
runningJobs.value = _jobs
})
.catch((e) => {
showNotify({ type: "danger", message: "获取任务失败：" + e.message });
});
};
showNotify({ type: 'danger', message: '获取任务失败：' + e.message })
})
}
const loading = ref(false);
const finished = ref(false);
const error = ref(false);
const page = ref(0);
const pageSize = ref(10);
const loading = ref(false)
const finished = ref(false)
const error = ref(false)
const page = ref(0)
const pageSize = ref(10)
const fetchFinishJobs = (page) => {
if (!isLogin.value) {
return;
return
}
loading.value = true;
loading.value = true
// 获取已完成的任务
httpGet(`/api/mj/jobs?finish=1&page=${page}&page_size=${pageSize.value}`)
.then((res) => {
const jobs = res.data.items;
let hasDownload = false;
const jobs = res.data.items
let hasDownload = false
for (let i = 0; i < jobs.length; i++) {
if (jobs[i].type === "upscale" || jobs[i].type === "swapFace") {
jobs[i]["thumb_url"] = jobs[i]["img_url"] + "?imageView2/1/w/480/h/600/q/75";
if (jobs[i].type === 'upscale' || jobs[i].type === 'swapFace') {
jobs[i]['thumb_url'] = jobs[i]['img_url'] + '?imageView2/1/w/480/h/600/q/75'
} else {
jobs[i]["thumb_url"] = jobs[i]["img_url"] + "?imageView2/1/w/480/h/480/q/75";
jobs[i]['thumb_url'] = jobs[i]['img_url'] + '?imageView2/1/w/480/h/480/q/75'
}
if (jobs[i]["img_url"] === "" && jobs[i].progress === 100) {
hasDownload = true;
if (jobs[i]['img_url'] === '' && jobs[i].progress === 100) {
hasDownload = true
}
if (jobs[i].type !== "upscale" && jobs[i].progress === 100) {
jobs[i]["can_opt"] = true;
if (jobs[i].type !== 'upscale' && jobs[i].progress === 100) {
jobs[i]['can_opt'] = true
}
}
if (page === 1) {
downloadPulling.value = hasDownload;
downloadPulling.value = hasDownload
}
if (jobs.length < pageSize.value) {
finished.value = true;
finished.value = true
}
if (page === 1) {
finishedJobs.value = jobs;
finishedJobs.value = jobs
} else {
finishedJobs.value = finishedJobs.value.concat(jobs);
finishedJobs.value = finishedJobs.value.concat(jobs)
}
nextTick(() => (loading.value = false));
nextTick(() => (loading.value = false))
})
.catch((e) => {
loading.value = false;
error.value = true;
showFailToast("获取任务失败：" + e.message);
});
};
loading.value = false
error.value = true
showFailToast('获取任务失败：' + e.message)
})
}
const onLoad = () => {
page.value += 1;
fetchFinishJobs(page.value);
};
page.value += 1
fetchFinishJobs(page.value)
}
// 切换图片比例
const changeRate = (item) => {
params.value.rate = item.value;
};
params.value.rate = item.value
}
// 切换模型
const changeModel = (item) => {
params.value.model = item.value;
};
params.value.model = item.value
}
const imgKey = ref("");
const imgKey = ref('')
const beforeUpload = (key) => {
imgKey.value = key;
};
imgKey.value = key
}
// 图片上传
const uploadImg = (file) => {
file.status = "uploading";
file.status = 'uploading'
// 压缩图片并上传
new Compressor(file.file, {
quality: 0.6,
success(result) {
const formData = new FormData();
formData.append("file", result, result.name);
const formData = new FormData()
formData.append('file', result, result.name)
// 执行上传操作
httpPost("/api/upload", formData)
httpPost('/api/upload', formData)
.then((res) => {
file.url = res.data.url;
if (imgKey.value !== "") {
file.url = res.data.url
if (imgKey.value !== '') {
// 单张图片上传
params.value[imgKey.value] = res.data.url;
imgKey.value = "";
params.value[imgKey.value] = res.data.url
imgKey.value = ''
}
file.status = "done";
file.status = 'done'
})
.catch((e) => {
file.status = "failed";
file.message = "上传失败";
showFailToast("图片上传失败：" + e.message);
});
file.status = 'failed'
file.message = '上传失败'
showFailToast('图片上传失败：' + e.message)
})
},
error(err) {
console.log(err.message);
console.log(err.message)
},
});
};
})
}
const send = (url, index, item) => {
httpPost(url, {
@@ -525,126 +614,126 @@ const send = (url, index, item) => {
prompt: item.prompt,
})
.then(() => {
showSuccessToast("任务推送成功，请耐心等待任务执行...");
power.value -= mjActionPower.value;
showSuccessToast('任务推送成功，请耐心等待任务执行...')
power.value -= mjActionPower.value
runningJobs.value.push({
progress: 0,
});
})
})
.catch((e) => {
showFailToast("任务推送失败：" + e.message);
});
};
showFailToast('任务推送失败：' + e.message)
})
}
// 图片放大任务
const upscale = (index, item) => {
send("/api/mj/upscale", index, item);
};
send('/api/mj/upscale', index, item)
}
// 图片变换任务
const variation = (index, item) => {
send("/api/mj/variation", index, item);
};
send('/api/mj/variation', index, item)
}
const generate = () => {
if (!isLogin.value) {
return showLoginDialog(router);
return showLoginDialog(router)
}
if (params.value.prompt === "" && params.value.task_type === "image") {
return showFailToast("请输入绘画提示词！");
if (params.value.prompt === '' && params.value.task_type === 'image') {
return showFailToast('请输入绘画提示词！')
}
if (params.value.model.indexOf("niji") !== -1 && params.value.raw) {
return showFailToast("动漫模型不允许启用原始模式");
if (params.value.model.indexOf('niji') !== -1 && params.value.raw) {
return showFailToast('动漫模型不允许启用原始模式')
}
params.value.session_id = getSessionId();
params.value.img_arr = imgList.value.map((img) => img.url);
httpPost("/api/mj/image", params.value)
params.value.session_id = getSessionId()
params.value.img_arr = imgList.value.map((img) => img.url)
httpPost('/api/mj/image', params.value)
.then(() => {
showToast("绘画任务推送成功，请耐心等待任务执行");
power.value -= mjPower.value;
taskPulling.value = true;
showToast('绘画任务推送成功，请耐心等待任务执行')
power.value -= mjPower.value
taskPulling.value = true
runningJobs.value.push({
progress: 0,
});
})
})
.catch((e) => {
showFailToast("任务推送失败：" + e.message);
});
};
showFailToast('任务推送失败：' + e.message)
})
}
const removeImage = (item) => {
showConfirmDialog({
title: "删除提示",
message: "此操作将会删除任务和图片，继续操作码?",
title: '删除提示',
message: '此操作将会删除任务和图片，继续操作码?',
})
.then(() => {
httpGet("/api/mj/remove", { id: item.id, user_id: item.user_id })
httpGet('/api/mj/remove', { id: item.id, user_id: item.user_id })
.then(() => {
showSuccessToast("任务删除成功");
fetchFinishJobs(1);
showSuccessToast('任务删除成功')
fetchFinishJobs(1)
})
.catch((e) => {
showFailToast("任务删除失败：" + e.message);
});
showFailToast('任务删除失败：' + e.message)
})
})
.catch(() => {
showToast("您取消了操作");
});
};
showToast('您取消了操作')
})
}
// 发布图片到作品墙
const publishImage = (item, action) => {
let text = "图片发布";
let text = '图片发布'
if (action === false) {
text = "取消发布";
text = '取消发布'
}
httpGet("/api/mj/publish", { id: item.id, action: action, user_id: item.user_id })
httpGet('/api/mj/publish', { id: item.id, action: action, user_id: item.user_id })
.then(() => {
showSuccessToast(text + "成功");
item.publish = action;
showSuccessToast(text + '成功')
item.publish = action
})
.catch((e) => {
showFailToast(text + "失败：" + e.message);
});
};
showFailToast(text + '失败：' + e.message)
})
}
const showPrompt = (item) => {
prompt.value = item.prompt;
prompt.value = item.prompt
showConfirmDialog({
title: "绘画提示词",
title: '绘画提示词',
message: item.prompt,
confirmButtonText: "复制",
cancelButtonText: "关闭",
confirmButtonText: '复制',
cancelButtonText: '关闭',
})
.then(() => {
document.querySelector("#copy-btn").click();
document.querySelector('#copy-btn').click()
})
.catch(() => {});
};
.catch(() => {})
}
const showErrMsg = (item) => {
showDialog({
title: "错误详情",
message: item["err_msg"],
title: '错误详情',
message: item['err_msg'],
}).then(() => {
// on close
});
};
})
}
const imageView = (item) => {
showImagePreview([item["img_url"]]);
};
showImagePreview([item['img_url']])
}
// 切换菜单
const tabChange = (tab) => {
if (tab === "txt2img" || tab === "img2img") {
params.value.task_type = "image";
if (tab === 'txt2img' || tab === 'img2img') {
params.value.task_type = 'image'
} else {
params.value.task_type = tab;
params.value.task_type = tab
}
};
}
</script>
<style lang="stylus">
@import "@/assets/css/mobile/image-mj.styl"
@import "../../../assets/css/mobile/image-mj.styl"
</style>

452
web/src/views/mobile/pages/ImageSd.vue
View File

@@ -3,9 +3,20 @@
<van-form @submit="generate">
<van-cell-group inset>
<div>
<van-field v-model="params.sampler" is-link readonly label="采样方法" placeholder="选择采样方法" @click="showSamplerPicker = true" />
<van-field
v-model="params.sampler"
is-link
readonly
label="采样方法"
placeholder="选择采样方法"
@click="showSamplerPicker = true"
/>
<van-popup v-model:show="showSamplerPicker" position="bottom" teleport="#app">
<van-picker :columns="samplers" @cancel="showSamplerPicker = false" @confirm="samplerConfirm" />
<van-picker
:columns="samplers"
@cancel="showSamplerPicker = false"
@confirm="samplerConfirm"
/>
</van-popup>
</div>
@@ -24,17 +35,30 @@
<van-field v-model.number="params.steps" label="迭代步数" placeholder="">
<template #right-icon>
<van-icon name="info-o" @click="showInfo('值越大则代表细节越多，同时也意味着出图速度越慢，一般推荐20-30')" />
<van-icon
name="info-o"
@click="showInfo('值越大则代表细节越多，同时也意味着出图速度越慢，一般推荐20-30')"
/>
</template>
</van-field>
<van-field v-model.number="params.cfg_scale" label="引导系数" placeholder="">
<template #right-icon>
<van-icon name="info-o" @click="showInfo('提示词引导系数，图像在多大程度上服从提示词，较低值会产生更有创意的结果')" />
<van-icon
name="info-o"
@click="
showInfo('提示词引导系数，图像在多大程度上服从提示词，较低值会产生更有创意的结果')
"
/>
</template>
</van-field>
<van-field v-model.number="params.seed" label="随机因子" placeholder="">
<template #right-icon>
<van-icon name="info-o" @click="showInfo('随机数种子，相同的种子会得到相同的结果，设置为 -1 则每次随机生成种子')" />
<van-icon
name="info-o"
@click="
showInfo('随机数种子，相同的种子会得到相同的结果，设置为 -1 则每次随机生成种子')
"
/>
</template>
</van-field>
@@ -46,9 +70,20 @@
<div v-if="params.hd_fix">
<div>
<van-field v-model="params.hd_scale_alg" is-link readonly label="放大算法" placeholder="选择放大算法" @click="showUpscalePicker = true" />
<van-field
v-model="params.hd_scale_alg"
is-link
readonly
label="放大算法"
placeholder="选择放大算法"
@click="showUpscalePicker = true"
/>
<van-popup v-model:show="showUpscalePicker" position="bottom" teleport="#app">
<van-picker :columns="upscaleAlgArr" @cancel="showUpscalePicker = false" @confirm="upscaleConfirm" />
<van-picker
:columns="upscaleAlgArr"
@cancel="showUpscalePicker = false"
@confirm="upscaleConfirm"
/>
</van-popup>
</div>
@@ -57,10 +92,18 @@
<van-field label="重绘幅度">
<template #input>
<van-slider v-model.number="params.hd_redraw_rate" :max="1" :step="0.1" @update:model-value="showToast('当前值：' + params.hd_redraw_rate)" />
<van-slider
v-model.number="params.hd_redraw_rate"
:max="1"
:step="0.1"
@update:model-value="showToast('当前值：' + params.hd_redraw_rate)"
/>
</template>
<template #right-icon>
<van-icon name="info-o" @click="showInfo('决定算法对图像内容的影响程度，较大的值将得到越有创意的图像')" />
<van-icon
name="info-o"
@click="showInfo('决定算法对图像内容的影响程度，较大的值将得到越有创意的图像')"
/>
</template>
</van-field>
</div>
@@ -76,7 +119,14 @@
<van-collapse v-model="activeColspan">
<van-collapse-item title="反向提示词" name="neg_prompt">
<van-field v-model="params.neg_prompt" rows="3" maxlength="2000" autosize type="textarea" placeholder="不想出现在图片上的元素(例如：树，建筑)" />
<van-field
v-model="params.neg_prompt"
rows="3"
maxlength="2000"
autosize
type="textarea"
placeholder="不想出现在图片上的元素(例如：树，建筑)"
/>
</van-collapse-item>
</van-collapse>
@@ -103,7 +153,14 @@
<div v-if="item.progress > 0">
<van-image src="/images/img-holder.png"></van-image>
<div class="progress">
<van-circle v-model:current-rate="item.progress" :rate="item.progress" :speed="100" :text="item.progress + '%'" :stroke-width="60" size="90px" />
<van-circle
v-model:current-rate="item.progress"
:rate="item.progress"
:speed="100"
:text="item.progress + '%'"
:stroke-width="60"
size="90px"
/>
</div>
</div>
@@ -139,11 +196,19 @@
<div class="title">任务失败</div>
<div class="opt">
<van-button size="small" @click="showErrMsg(item)">详情</van-button>
<van-button type="danger" @click="removeImage($event, item)" size="small">删除</van-button>
<van-button type="danger" @click="removeImage($event, item)" size="small"
>删除</van-button
>
</div>
</div>
<div class="job-item" v-else>
<van-image :src="item['img_url']" :class="item['can_opt'] ? '' : 'upscale'" lazy-load @click="imageView(item)" fit="cover">
<van-image
:src="item['img_url']"
:class="item['can_opt'] ? '' : 'upscale'"
lazy-load
@click="imageView(item)"
fit="cover"
>
<template v-slot:loading>
<van-loading type="spinner" size="20" />
</template>
@@ -151,7 +216,12 @@
<div class="remove">
<el-button type="danger" :icon="Delete" @click="removeImage($event, item)" circle />
<el-button type="warning" v-if="item.publish" @click="publishImage($event, item, false)" circle>
<el-button
type="warning"
v-if="item.publish"
@click="publishImage($event, item, false)"
circle
>
<i class="iconfont icon-cancel-share"></i>
</el-button>
<el-button type="success" v-else @click="publishImage($event, item, true)" circle>
@@ -166,49 +236,64 @@
</van-grid>
</van-list>
</div>
<button style="display: none" class="copy-prompt-sd" :data-clipboard-text="prompt" id="copy-btn-sd">复制</button>
<button
style="display: none"
class="copy-prompt-sd"
:data-clipboard-text="prompt"
id="copy-btn-sd"
>
复制
</button>
</div>
</template>
<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import { Delete } from "@element-plus/icons-vue";
import { httpGet, httpPost } from "@/utils/http";
import Clipboard from "clipboard";
import { checkSession, getSystemInfo } from "@/store/cache";
import { useRouter } from "vue-router";
import { getSessionId } from "@/store/session";
import { showConfirmDialog, showDialog, showFailToast, showImagePreview, showNotify, showSuccessToast, showToast } from "vant";
import { showLoginDialog } from "@/utils/libs";
import { useSharedStore } from "@/store/sharedata";
import { checkSession, getSystemInfo } from '@/store/cache'
import { getSessionId } from '@/store/session'
import { useSharedStore } from '@/store/sharedata'
import { httpGet, httpPost } from '@/utils/http'
import { showLoginDialog } from '@/utils/libs'
import { Delete } from '@element-plus/icons-vue'
import Clipboard from 'clipboard'
import {
showConfirmDialog,
showDialog,
showFailToast,
showImagePreview,
showNotify,
showSuccessToast,
showToast,
} from 'vant'
import { onMounted, onUnmounted, ref } from 'vue'
import { useRouter } from 'vue-router'
const listBoxHeight = ref(window.innerHeight - 40);
const mjBoxHeight = ref(window.innerHeight - 150);
const isLogin = ref(false);
const activeColspan = ref([""]);
const listBoxHeight = ref(window.innerHeight - 40)
const mjBoxHeight = ref(window.innerHeight - 150)
const isLogin = ref(false)
const activeColspan = ref([''])
window.onresize = () => {
listBoxHeight.value = window.innerHeight - 40;
mjBoxHeight.value = window.innerHeight - 150;
};
listBoxHeight.value = window.innerHeight - 40
mjBoxHeight.value = window.innerHeight - 150
}
const samplers = ref([
{ text: "Euler a", value: "Euler a" },
{ text: "DPM++ 2S a Karras", value: "DPM++ 2S a Karras" },
{ text: "DPM++ 2M Karras", value: "DPM++ 2M Karras" },
{ text: "DPM++ 2M SDE Karras", value: "DPM++ 2M SDE Karras" },
{ text: "DPM++ 2M Karras", value: "DPM++ 2M Karras" },
{ text: "DPM++ 3M SDE Karras", value: "DPM++ 3M SDE Karras" },
]);
const showSamplerPicker = ref(false);
{ text: 'Euler a', value: 'Euler a' },
{ text: 'DPM++ 2S a Karras', value: 'DPM++ 2S a Karras' },
{ text: 'DPM++ 2M Karras', value: 'DPM++ 2M Karras' },
{ text: 'DPM++ 2M SDE Karras', value: 'DPM++ 2M SDE Karras' },
{ text: 'DPM++ 2M Karras', value: 'DPM++ 2M Karras' },
{ text: 'DPM++ 3M SDE Karras', value: 'DPM++ 3M SDE Karras' },
])
const showSamplerPicker = ref(false)
const upscaleAlgArr = ref([
{ text: "Latent", value: "Latent" },
{ text: "ESRGAN_4x", value: "ESRGAN_4x" },
{ text: "ESRGAN 4x+", value: "ESRGAN 4x+" },
{ text: "SwinIR_4x", value: "SwinIR_4x" },
{ text: "LDSR", value: "LDSR" },
]);
const showUpscalePicker = ref(false);
{ text: 'Latent', value: 'Latent' },
{ text: 'ESRGAN_4x', value: 'ESRGAN_4x' },
{ text: 'ESRGAN 4x+', value: 'ESRGAN 4x+' },
{ text: 'SwinIR_4x', value: 'SwinIR_4x' },
{ text: 'LDSR', value: 'LDSR' },
])
const showUpscalePicker = ref(false)
const params = ref({
width: 1024,
@@ -222,260 +307,261 @@ const params = ref({
hd_scale: 2,
hd_scale_alg: upscaleAlgArr.value[0].value,
hd_steps: 0,
prompt: "",
neg_prompt: "nsfw, paintings,low quality,easynegative,ng_deepnegative ,lowres,bad anatomy,bad hands,bad feet",
});
prompt: '',
neg_prompt:
'nsfw, paintings,low quality,easynegative,ng_deepnegative ,lowres,bad anatomy,bad hands,bad feet',
})
const runningJobs = ref([]);
const finishedJobs = ref([]);
const allowPulling = ref(true); // 是否允许轮询
const tastPullHandler = ref(null);
const router = useRouter();
const runningJobs = ref([])
const finishedJobs = ref([])
const allowPulling = ref(true) // 是否允许轮询
const tastPullHandler = ref(null)
const router = useRouter()
// 检查是否有画同款的参数
const _params = router.currentRoute.value.params["copyParams"];
const _params = router.currentRoute.value.params['copyParams']
if (_params) {
params.value = JSON.parse(_params);
params.value = JSON.parse(_params)
}
const power = ref(0);
const sdPower = ref(0); // 画一张 SD 图片消耗算力
const power = ref(0)
const sdPower = ref(0) // 画一张 SD 图片消耗算力
const userId = ref(0);
const store = useSharedStore();
const clipboard = ref(null);
const prompt = ref("");
const userId = ref(0)
const store = useSharedStore()
const clipboard = ref(null)
const prompt = ref('')
onMounted(() => {
initData();
clipboard.value = new Clipboard(".copy-prompt-sd");
clipboard.value.on("success", () => {
showNotify({ type: "success", message: "复制成功", duration: 1000 });
});
clipboard.value.on("error", () => {
showNotify({ type: "danger", message: "复制失败", duration: 2000 });
});
initData()
clipboard.value = new Clipboard('.copy-prompt-sd')
clipboard.value.on('success', () => {
showNotify({ type: 'success', message: '复制成功', duration: 1000 })
})
clipboard.value.on('error', () => {
showNotify({ type: 'danger', message: '复制失败', duration: 2000 })
})
getSystemInfo()
.then((res) => {
sdPower.value = res.data.sd_power;
params.value.neg_prompt = res.data.sd_neg_prompt;
sdPower.value = res.data.sd_power
params.value.neg_prompt = res.data.sd_neg_prompt
})
.catch((e) => {
showNotify({ type: "danger", message: "获取系统配置失败：" + e.message });
});
});
showNotify({ type: 'danger', message: '获取系统配置失败：' + e.message })
})
})
onUnmounted(() => {
clipboard.value.destroy();
clipboard.value.destroy()
if (tastPullHandler.value) {
clearInterval(tastPullHandler.value);
clearInterval(tastPullHandler.value)
}
});
})
const initData = () => {
checkSession()
.then((user) => {
power.value = user["power"];
userId.value = user.id;
isLogin.value = true;
fetchRunningJobs();
fetchFinishJobs(1);
power.value = user['power']
userId.value = user.id
isLogin.value = true
fetchRunningJobs()
fetchFinishJobs(1)
tastPullHandler.value = setInterval(() => {
if (allowPulling.value) {
fetchRunningJobs();
fetchRunningJobs()
}
}, 5000);
}, 5000)
})
.catch(() => {
loading.value = false;
});
};
loading.value = false
})
}
const fetchRunningJobs = () => {
// 获取运行中的任务
httpGet(`/api/sd/jobs?finish=0`)
.then((res) => {
const jobs = res.data.items;
const _jobs = [];
const jobs = res.data.items
const _jobs = []
for (let i = 0; i < jobs.length; i++) {
if (jobs[i].progress === -1) {
showNotify({
message: `任务ID：${jobs[i]["task_id"]} 原因：${jobs[i]["err_msg"]}`,
type: "danger",
});
power.value += sdPower.value;
continue;
message: `任务ID：${jobs[i]['task_id']} 原因：${jobs[i]['err_msg']}`,
type: 'danger',
})
power.value += sdPower.value
continue
}
_jobs.push(jobs[i]);
_jobs.push(jobs[i])
}
if (runningJobs.value.length !== _jobs.length) {
fetchFinishJobs(1);
fetchFinishJobs(1)
}
if (runningJobs.value.length === 0) {
allowPulling.value = false;
allowPulling.value = false
}
runningJobs.value = _jobs;
runningJobs.value = _jobs
})
.catch((e) => {
showNotify({ type: "danger", message: "获取任务失败：" + e.message });
});
};
showNotify({ type: 'danger', message: '获取任务失败：' + e.message })
})
}
const loading = ref(false);
const finished = ref(false);
const error = ref(false);
const page = ref(0);
const pageSize = ref(10);
const loading = ref(false)
const finished = ref(false)
const error = ref(false)
const page = ref(0)
const pageSize = ref(10)
// 获取已完成的任务
const fetchFinishJobs = (page) => {
loading.value = true;
loading.value = true
httpGet(`/api/sd/jobs?finish=1&page=${page}&page_size=${pageSize.value}`)
.then((res) => {
const jobs = res.data.items;
const jobs = res.data.items
if (jobs.length < pageSize.value) {
finished.value = true;
finished.value = true
}
const _jobs = [];
const _jobs = []
for (let i = 0; i < jobs.length; i++) {
if (jobs[i].progress === -1) {
jobs[i]["thumb_url"] = jobs[i]["img_url"] + "?imageView2/1/w/480/h/600/q/75";
jobs[i]['thumb_url'] = jobs[i]['img_url'] + '?imageView2/1/w/480/h/600/q/75'
}
_jobs.push(jobs[i]);
_jobs.push(jobs[i])
}
if (page === 1) {
finishedJobs.value = _jobs;
finishedJobs.value = _jobs
} else {
finishedJobs.value = finishedJobs.value.concat(_jobs);
finishedJobs.value = finishedJobs.value.concat(_jobs)
}
loading.value = false;
loading.value = false
})
.catch((e) => {
loading.value = false;
showNotify({ type: "danger", message: "获取任务失败：" + e.message });
});
};
loading.value = false
showNotify({ type: 'danger', message: '获取任务失败：' + e.message })
})
}
const onLoad = () => {
page.value += 1;
fetchFinishJobs(page.value);
};
page.value += 1
fetchFinishJobs(page.value)
}
// 创建绘图任务
const promptRef = ref(null);
const promptRef = ref(null)
const generate = () => {
if (!isLogin.value) {
return showLoginDialog(router);
return showLoginDialog(router)
}
if (params.value.prompt === "") {
promptRef.value.focus();
return showToast("请输入绘画提示词！");
if (params.value.prompt === '') {
promptRef.value.focus()
return showToast('请输入绘画提示词！')
}
if (!params.value.seed) {
params.value.seed = -1;
params.value.seed = -1
}
params.value.session_id = getSessionId();
httpPost("/api/sd/image", params.value)
params.value.session_id = getSessionId()
httpPost('/api/sd/image', params.value)
.then(() => {
showSuccessToast("绘画任务推送成功，请耐心等待任务执行...");
power.value -= sdPower.value;
allowPulling.value = true;
showSuccessToast('绘画任务推送成功，请耐心等待任务执行...')
power.value -= sdPower.value
allowPulling.value = true
runningJobs.value.push({
progress: 0,
});
})
})
.catch((e) => {
showFailToast("任务推送失败：" + e.message);
});
};
showFailToast('任务推送失败：' + e.message)
})
}
const showPrompt = (item) => {
prompt.value = item.prompt;
prompt.value = item.prompt
showConfirmDialog({
title: "绘画提示词",
title: '绘画提示词',
message: item.prompt,
confirmButtonText: "复制",
cancelButtonText: "关闭",
confirmButtonText: '复制',
cancelButtonText: '关闭',
})
.then(() => {
document.querySelector("#copy-btn-sd").click();
document.querySelector('#copy-btn-sd').click()
})
.catch(() => {});
};
.catch(() => {})
}
const showErrMsg = (item) => {
showDialog({
title: "错误详情",
message: item["err_msg"],
title: '错误详情',
message: item['err_msg'],
}).then(() => {
// on close
});
};
})
}
const removeImage = (event, item) => {
event.stopPropagation();
event.stopPropagation()
showConfirmDialog({
title: "标题",
message: "此操作将会删除任务和图片，继续操作码?",
title: '标题',
message: '此操作将会删除任务和图片，继续操作码?',
})
.then(() => {
httpGet("/api/sd/remove", { id: item.id, user_id: item.user })
httpGet('/api/sd/remove', { id: item.id, user_id: item.user })
.then(() => {
showSuccessToast("任务删除成功");
fetchFinishJobs(1);
showSuccessToast('任务删除成功')
fetchFinishJobs(1)
})
.catch((e) => {
showFailToast("任务删除失败：" + e.message);
});
showFailToast('任务删除失败：' + e.message)
})
})
.catch(() => {
showToast("您取消了操作");
});
};
showToast('您取消了操作')
})
}
// 发布图片到作品墙
const publishImage = (event, item, action) => {
event.stopPropagation();
let text = "图片发布";
event.stopPropagation()
let text = '图片发布'
if (action === false) {
text = "取消发布";
text = '取消发布'
}
httpGet("/api/sd/publish", { id: item.id, action: action, user_id: item.user })
httpGet('/api/sd/publish', { id: item.id, action: action, user_id: item.user })
.then(() => {
showSuccessToast(text + "成功");
item.publish = action;
showSuccessToast(text + '成功')
item.publish = action
})
.catch((e) => {
showFailToast(text + "失败：" + e.message);
});
};
showFailToast(text + '失败：' + e.message)
})
}
const imageView = (item) => {
showImagePreview([item["img_url"]]);
};
showImagePreview([item['img_url']])
}
const samplerConfirm = (item) => {
params.value.sampler = item.selectedOptions[0].text;
showSamplerPicker.value = false;
};
params.value.sampler = item.selectedOptions[0].text
showSamplerPicker.value = false
}
const upscaleConfirm = (item) => {
params.value.hd_scale_alg = item.selectedOptions[0].text;
showUpscalePicker.value = false;
};
params.value.hd_scale_alg = item.selectedOptions[0].text
showUpscalePicker.value = false
}
const showInfo = (message) => {
showDialog({
title: "参数说明",
title: '参数说明',
message: message,
}).then(() => {
// on close
});
};
})
}
</script>
<style lang="stylus">
@import "@/assets/css/mobile/image-sd.styl"
<style lang="stylus" scoped>
@import "../../../assets/css/mobile/image-sd.styl"
</style>