mirror of
https://gitee.com/blackfox/geekai.git
synced 2025-12-06 16:58:24 +08:00
完成新瀑布流组件整合
This commit is contained in:
RockYang
parent
0746cd49f4
commit
c797b35f5a
@ -5,8 +5,8 @@
|
||||
- 功能优化：开启图形验证码功能的时候现检查是否配置了 API 服务，防止开启之后没法登录的 Bug。
|
||||
- 功能优化：支持原生的 DeepSeek 推理模型 API，聊天 API KEY 支持设置完整的 API 路径，比如 https://api.geekai.pro/v1/chat/completions
|
||||
- 功能优化：支持 GPT-4o 图片编辑功能。
|
||||
- 功能新增：对话页面支持AI输出语音播报（TTS）。
|
||||
- 功能新增：支持 Goole 账号登录。
|
||||
- 功能新增：对话页面支持 AI 输出语音播报（TTS）。
|
||||
- 功能优化：替换瀑布流组件，优化用户体验。
|
||||
|
||||
## v4.2.1
|
||||
|
||||
|
||||
@ -112,20 +112,24 @@ func corsMiddleware() gin.HandlerFunc {
|
||||
return func(c *gin.Context) {
|
||||
method := c.Request.Method
|
||||
origin := c.Request.Header.Get("Origin")
|
||||
|
||||
// 设置允许的请求源
|
||||
if origin != "" {
|
||||
// 设置允许的请求源
|
||||
c.Header("Access-Control-Allow-Origin", origin)
|
||||
c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE, UPDATE")
|
||||
//允许跨域设置可以返回其他子段，可以自定义字段
|
||||
c.Header("Access-Control-Allow-Headers", "Authorization, Body-Length, Body-Type, Admin-Authorization,content-type")
|
||||
// 允许浏览器（客户端）可以解析的头部 （重要）
|
||||
c.Header("Access-Control-Expose-Headers", "Body-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers")
|
||||
//设置缓存时间
|
||||
c.Header("Access-Control-Max-Age", "172800")
|
||||
//允许客户端传递校验信息比如 cookie (重要)
|
||||
c.Header("Access-Control-Allow-Credentials", "true")
|
||||
} else {
|
||||
c.Header("Access-Control-Allow-Origin", "*")
|
||||
}
|
||||
|
||||
c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE, UPDATE")
|
||||
//允许跨域设置可以返回其他子段，可以自定义字段
|
||||
c.Header("Access-Control-Allow-Headers", "Authorization, Body-Length, Body-Type, Admin-Authorization,content-type")
|
||||
// 允许浏览器（客户端）可以解析的头部 （重要）
|
||||
c.Header("Access-Control-Expose-Headers", "Body-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers")
|
||||
//设置缓存时间
|
||||
c.Header("Access-Control-Max-Age", "172800")
|
||||
//允许客户端传递校验信息比如 cookie (重要)
|
||||
c.Header("Access-Control-Allow-Credentials", "true")
|
||||
|
||||
if method == http.MethodOptions {
|
||||
c.JSON(http.StatusOK, "ok!")
|
||||
}
|
||||
|
||||
@ -32,14 +32,13 @@
|
||||
"pinia": "^2.1.4",
|
||||
"qrcode": "^1.5.3",
|
||||
"qs": "^6.11.1",
|
||||
"@better-scroll/core": "^2.5.1",
|
||||
"@better-scroll/core": "^2.5.1",
|
||||
"@better-scroll/mouse-wheel": "^2.5.1",
|
||||
"@better-scroll/observe-dom": "^2.5.1",
|
||||
"@better-scroll/pull-up": "^2.5.1",
|
||||
"@better-scroll/scroll-bar": "^2.5.1",
|
||||
"sortablejs": "^1.15.0",
|
||||
"three": "^0.128.0",
|
||||
"v3-waterfall": "^1.3.3",
|
||||
"vant": "^4.5.0",
|
||||
"vue": "^3.2.13",
|
||||
"vue-router": "^4.0.15",
|
||||
|
||||
BIN
web/src/assets/img/loading.gif
Normal file
BIN
web/src/assets/img/loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 64 KiB |
@ -1,5 +1,82 @@
|
||||
import {defineStore} from "pinia";
|
||||
import Storage from "good-storage";
|
||||
import errorIcon from "@/assets/img/failed.png";
|
||||
import loadingIcon from "@/assets/img/loading.gif";
|
||||
|
||||
let waterfallOptions = {
|
||||
// 唯一key值
|
||||
rowKey: "id",
|
||||
// 卡片之间的间隙
|
||||
gutter: 10,
|
||||
// 是否有周围的gutter
|
||||
hasAroundGutter: true,
|
||||
// 卡片在PC上的宽度
|
||||
width: 200,
|
||||
// 自定义行显示个数，主要用于对移动端的适配
|
||||
breakpoints: {
|
||||
3840: {
|
||||
// 4K下
|
||||
rowPerView: 8,
|
||||
},
|
||||
2560: {
|
||||
// 2K下
|
||||
rowPerView: 7,
|
||||
},
|
||||
1920: {
|
||||
// 2K下
|
||||
rowPerView: 6,
|
||||
},
|
||||
1600: {
|
||||
// 2K下
|
||||
rowPerView: 5,
|
||||
},
|
||||
1366: {
|
||||
// 2K下
|
||||
rowPerView: 4,
|
||||
},
|
||||
800: {
|
||||
// 当屏幕宽度小于等于800
|
||||
rowPerView: 3,
|
||||
},
|
||||
500: {
|
||||
// 当屏幕宽度小于等于500
|
||||
rowPerView: 2,
|
||||
},
|
||||
},
|
||||
// 动画效果
|
||||
animationEffect: "animate__fadeInUp",
|
||||
// 动画时间
|
||||
animationDuration: 1000,
|
||||
// 动画延迟
|
||||
animationDelay: 300,
|
||||
animationCancel: false,
|
||||
// 背景色
|
||||
backgroundColor: "",
|
||||
// imgSelector
|
||||
imgSelector: "img_thumb",
|
||||
// 是否跨域
|
||||
crossOrigin: true,
|
||||
// 加载配置
|
||||
loadProps: {
|
||||
loading: loadingIcon,
|
||||
error: errorIcon,
|
||||
ratioCalculator: (width, height) => {
|
||||
const minRatio = 3 / 4;
|
||||
const maxRatio = 4 / 3;
|
||||
const curRatio = height / width;
|
||||
if (curRatio < minRatio) {
|
||||
return minRatio;
|
||||
} else if (curRatio > maxRatio) {
|
||||
return maxRatio;
|
||||
} else {
|
||||
return curRatio;
|
||||
}
|
||||
},
|
||||
},
|
||||
// 是否懒加载
|
||||
lazyload: true,
|
||||
align: "center",
|
||||
}
|
||||
|
||||
export const useSharedStore = defineStore("shared", {
|
||||
state: () => ({
|
||||
@ -11,6 +88,7 @@ export const useSharedStore = defineStore("shared", {
|
||||
isLogin: false,
|
||||
chatListExtend: Storage.get("chat_list_extend", true),
|
||||
ttsModel: Storage.get("tts_model", ""),
|
||||
waterfallOptions,
|
||||
}),
|
||||
getters: {},
|
||||
actions: {
|
||||
|
||||
@ -11,8 +11,18 @@
|
||||
<el-form-item label="生图模型">
|
||||
<template #default>
|
||||
<div class="form-item-inner">
|
||||
<el-select v-model="selectedModel" style="width: 150px" placeholder="请选择模型" @change="changeModel">
|
||||
<el-option v-for="v in models" :label="v.name" :value="v" :key="v.value" />
|
||||
<el-select
|
||||
v-model="selectedModel"
|
||||
style="width: 150px"
|
||||
placeholder="请选择模型"
|
||||
@change="changeModel"
|
||||
>
|
||||
<el-option
|
||||
v-for="v in models"
|
||||
:label="v.name"
|
||||
:value="v"
|
||||
:key="v.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
@ -24,7 +34,12 @@
|
||||
<template #default>
|
||||
<div class="form-item-inner">
|
||||
<el-select v-model="params.quality" style="width: 150px">
|
||||
<el-option v-for="v in qualities" :label="v.name" :value="v.value" :key="v.value" />
|
||||
<el-option
|
||||
v-for="v in qualities"
|
||||
:label="v.name"
|
||||
:value="v.value"
|
||||
:key="v.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
@ -36,7 +51,12 @@
|
||||
<template #default>
|
||||
<div class="form-item-inner">
|
||||
<el-select v-model="params.size" style="width: 150px">
|
||||
<el-option v-for="v in sizes" :label="v" :value="v" :key="v" />
|
||||
<el-option
|
||||
v-for="v in sizes"
|
||||
:label="v"
|
||||
:value="v"
|
||||
:key="v"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
@ -48,9 +68,18 @@
|
||||
<template #default>
|
||||
<div class="form-item-inner">
|
||||
<el-select v-model="params.style" style="width: 150px">
|
||||
<el-option v-for="v in styles" :label="v.name" :value="v.value" :key="v.value" />
|
||||
<el-option
|
||||
v-for="v in styles"
|
||||
:label="v.name"
|
||||
:value="v.value"
|
||||
:key="v.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-tooltip content="生动使模型倾向于生成超真实和戏剧性的图像" raw-content placement="right">
|
||||
<el-tooltip
|
||||
content="生动使模型倾向于生成超真实和戏剧性的图像"
|
||||
raw-content
|
||||
placement="right"
|
||||
>
|
||||
<el-icon class="info-icon">
|
||||
<InfoFilled />
|
||||
</el-icon>
|
||||
@ -73,8 +102,17 @@
|
||||
</div>
|
||||
|
||||
<el-row class="text-info">
|
||||
<el-button class="generate-btn" size="small" @click="generatePrompt" color="#5865f2" :disabled="isGenerating">
|
||||
<i class="iconfont icon-chuangzuo" style="margin-right: 5px"></i>
|
||||
<el-button
|
||||
class="generate-btn"
|
||||
size="small"
|
||||
@click="generatePrompt"
|
||||
color="#5865f2"
|
||||
:disabled="isGenerating"
|
||||
>
|
||||
<i
|
||||
class="iconfont icon-chuangzuo"
|
||||
style="margin-right: 5px"
|
||||
></i>
|
||||
<span>生成专业绘画指令</span>
|
||||
</el-button>
|
||||
</el-row>
|
||||
@ -82,7 +120,10 @@
|
||||
<div class="text-info">
|
||||
<el-row :gutter="10">
|
||||
<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"
|
||||
>当前可用
|
||||
@ -93,7 +134,9 @@
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="submit-btn">
|
||||
<el-button type="primary" :dark="false" round @click="generate"> 立即生成 </el-button>
|
||||
<el-button type="primary" :dark="false" round @click="generate">
|
||||
立即生成
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="task-list-box pl-6 pr-6 pb-4 pt-4 h-dvh">
|
||||
@ -103,154 +146,162 @@
|
||||
<task-list :list="runningJobs" />
|
||||
<template v-if="finishedJobs.length > 0">
|
||||
<h2 class="text-xl">创作记录</h2>
|
||||
<div class="finish-job-list">
|
||||
<div class="finish-job-list mt-3">
|
||||
<div v-if="finishedJobs.length > 0">
|
||||
<!-- <v3-waterfall
|
||||
id="waterfall"
|
||||
<Waterfall
|
||||
:list="finishedJobs"
|
||||
srcKey="img_thumb"
|
||||
:gap="20"
|
||||
:bottomGap="-10"
|
||||
:colWidth="colWidth"
|
||||
:distanceToScroll="100"
|
||||
:isLoading="loading"
|
||||
:isOver="isOver"
|
||||
@scrollReachBottom="fetchFinishJobs()"
|
||||
:row-key="waterfallOptions.rowKey"
|
||||
:gutter="waterfallOptions.gutter"
|
||||
:has-around-gutter="waterfallOptions.hasAroundGutter"
|
||||
:width="waterfallOptions.width"
|
||||
:breakpoints="waterfallOptions.breakpoints"
|
||||
:img-selector="waterfallOptions.imgSelector"
|
||||
:background-color="waterfallOptions.backgroundColor"
|
||||
:animation-effect="waterfallOptions.animationEffect"
|
||||
:animation-duration="waterfallOptions.animationDuration"
|
||||
:animation-delay="waterfallOptions.animationDelay"
|
||||
:animation-cancel="waterfallOptions.animationCancel"
|
||||
:lazyload="waterfallOptions.lazyload"
|
||||
:load-props="waterfallOptions.loadProps"
|
||||
:cross-origin="waterfallOptions.crossOrigin"
|
||||
:align="waterfallOptions.align"
|
||||
:is-loading="loading"
|
||||
:is-over="isOver"
|
||||
@afterRender="loading = false"
|
||||
>
|
||||
<template #default="slotProp">
|
||||
<div class="job-item">
|
||||
<el-image
|
||||
v-if="slotProp.item.img_url !== ''"
|
||||
@click="previewImg(slotProp.item)"
|
||||
:src="slotProp.item['img_thumb']"
|
||||
fit="cover"
|
||||
loading="lazy"
|
||||
>
|
||||
<template #placeholder>
|
||||
<div class="image-slot">正在加载图片</div>
|
||||
</template>
|
||||
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<el-icon>
|
||||
<Picture />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
|
||||
<el-image v-else-if="slotProp.item.progress === 101">
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<div class="err-msg-container">
|
||||
<div class="title">任务失败</div>
|
||||
<div class="opt">
|
||||
<el-popover title="错误详情" trigger="click" :width="250" :content="slotProp.item['err_msg']" placement="top">
|
||||
<template #reference>
|
||||
<el-button type="info">详情</el-button>
|
||||
</template>
|
||||
</el-popover>
|
||||
<el-button type="danger" @click="removeImage(slotProp.item)">删除</el-button>
|
||||
<template #default="{ item, url }">
|
||||
<div
|
||||
class="bg-gray-900 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-linear hover:shadow-md hover:shadow-purple-800 group"
|
||||
>
|
||||
<div class="overflow-hidden rounded-lg">
|
||||
<LazyImg
|
||||
:url="url"
|
||||
v-if="item.progress === 100"
|
||||
class="cursor-pointer transition-all duration-300 ease-linear group-hover:scale-105"
|
||||
@click="previewImg(item)"
|
||||
/>
|
||||
<el-image v-else-if="item.progress === 101">
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<div class="err-msg-container">
|
||||
<div class="title">任务失败</div>
|
||||
<div class="opt">
|
||||
<el-popover
|
||||
title="错误详情"
|
||||
trigger="click"
|
||||
:width="250"
|
||||
:content="item['err_msg']"
|
||||
placement="top"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button type="info"
|
||||
>详情</el-button
|
||||
>
|
||||
</template>
|
||||
</el-popover>
|
||||
<el-button
|
||||
type="danger"
|
||||
@click="removeImage(item)"
|
||||
>删除</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</div>
|
||||
<div
|
||||
class="px-4 pt-2 pb-4 border-t border-t-gray-800"
|
||||
v-if="item.progress === 100"
|
||||
>
|
||||
<div
|
||||
class="pt-3 flex justify-center items-center border-t border-t-gray-600 border-opacity-50"
|
||||
>
|
||||
<div class="flex">
|
||||
<el-tooltip
|
||||
content="取消分享"
|
||||
placement="top"
|
||||
v-if="item.publish"
|
||||
>
|
||||
<el-button
|
||||
type="warning"
|
||||
@click="publishImage(item, false)"
|
||||
circle
|
||||
>
|
||||
<i class="iconfont icon-cancel-share"></i>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
content="分享"
|
||||
placement="top"
|
||||
v-else
|
||||
>
|
||||
<el-button
|
||||
type="success"
|
||||
@click="publishImage(item, true)"
|
||||
circle
|
||||
>
|
||||
<i class="iconfont icon-share-bold"></i>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip
|
||||
content="复制提示词"
|
||||
placement="top"
|
||||
>
|
||||
<el-button
|
||||
type="info"
|
||||
circle
|
||||
class="copy-prompt"
|
||||
:data-clipboard-text="item.prompt"
|
||||
>
|
||||
<i class="iconfont icon-file"></i>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
@click="removeImage(item)"
|
||||
circle
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
|
||||
<el-image v-else>
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<i class="iconfont icon-loading"></i>
|
||||
<span>正在下载图片</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
|
||||
<div class="remove">
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button type="danger" :icon="Delete" @click="removeImage(slotProp.item)" circle />
|
||||
</el-tooltip>
|
||||
<el-tooltip content="取消分享" placement="top" v-if="slotProp.item.publish">
|
||||
<el-button type="warning" @click="publishImage(slotProp.item, false)" circle>
|
||||
<i class="iconfont icon-cancel-share"></i>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="分享" placement="top" v-else>
|
||||
<el-button type="success" @click="publishImage(slotProp.item, true)" circle>
|
||||
<i class="iconfont icon-share-bold"></i>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip content="复制提示词" placement="top">
|
||||
<el-button type="info" circle class="copy-prompt" :data-clipboard-text="slotProp.item.prompt">
|
||||
<i class="iconfont icon-file"></i>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Waterfall>
|
||||
|
||||
<template #footer>
|
||||
<div class="no-more-data">
|
||||
<span>没有更多数据了</span>
|
||||
<div class="flex justify-center py-10">
|
||||
<img
|
||||
:src="waterfallOptions.loadProps.loading"
|
||||
class="max-w-[50px] max-h-[50px]"
|
||||
v-if="loading"
|
||||
/>
|
||||
<div v-else>
|
||||
<button
|
||||
class="px-5 py-2 rounded-full bg-purple-700 text-md text-white cursor-pointer hover:bg-purple-800 transition-all duration-300"
|
||||
@click="fetchFinishJobs"
|
||||
v-if="!isOver"
|
||||
>
|
||||
加载更多
|
||||
</button>
|
||||
<div class="no-more-data" v-else>
|
||||
<span class="text-gray-500 mr-2">没有更多数据了</span>
|
||||
<i class="iconfont icon-face"></i>
|
||||
</div>
|
||||
</template>
|
||||
</v3-waterfall> -->
|
||||
<Waterfall
|
||||
ref="waterfall"
|
||||
:list="finishedJobs"
|
||||
:row-key="options.rowKey"
|
||||
:gutter="options.gutter"
|
||||
:has-around-gutter="options.hasAroundGutter"
|
||||
:width="options.width"
|
||||
:breakpoints="options.breakpoints"
|
||||
:img-selector="options.imgSelector"
|
||||
:background-color="options.backgroundColor"
|
||||
:animation-effect="options.animationEffect"
|
||||
:animation-duration="options.animationDuration"
|
||||
:animation-delay="options.animationDelay"
|
||||
:animation-cancel="options.animationCancel"
|
||||
:lazyload="options.lazyload"
|
||||
:load-props="options.loadProps"
|
||||
:cross-origin="options.crossOrigin"
|
||||
:align="options.align"
|
||||
@afterRender="afterRender"
|
||||
>
|
||||
<template #default="{ item, url, index }">
|
||||
<div class="bg-gray-900 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-linear hover:shadow-lg hover:shadow-gray-600 group" @click="handleClick(item)">
|
||||
<div class="overflow-hidden">
|
||||
<LazyImg :url="url" title="title" :alt="item.name" class="cursor-pointer transition-all duration-300 ease-linear group-hover:scale-105" @load="imageLoad" @error="imageError" @success="imageSuccess" />
|
||||
</div>
|
||||
<div class="px-4 pt-2 pb-4 border-t border-t-gray-800">
|
||||
<h2 class="pb-4 text-gray-50 group-hover:text-yellow-300">
|
||||
{{ item.name }}
|
||||
</h2>
|
||||
<div class="pt-3 flex justify-between items-center border-t border-t-gray-600 border-opacity-50">
|
||||
<div class="text-gray-50">
|
||||
$ {{ item.price }}
|
||||
</div>
|
||||
<div>
|
||||
<button class="px-3 h-7 rounded-full bg-red-500 text-sm text-white shadow-lg transition-all duration-300 hover:bg-red-600" @click.stop="handleDelete(item, index)">
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Waterfall>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty :image-size="100" :image="nodata" description="暂无记录" v-else />
|
||||
|
||||
<div v-show="!loading" class="flex justify-center py-10 bg-gray-900">
|
||||
<button class="px-5 py-2 rounded-full bg-gray-700 text-md text-white cursor-pointer hover:bg-gray-800 transition-all duration-300" @click="fetchFinishJobs">
|
||||
加载更多
|
||||
</button>
|
||||
</div>
|
||||
<el-empty
|
||||
:image-size="100"
|
||||
:image="nodata"
|
||||
description="暂无记录"
|
||||
v-else
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- end finish job list-->
|
||||
</div>
|
||||
</div>
|
||||
@ -285,109 +336,22 @@ import { useSharedStore } from "@/store/sharedata";
|
||||
import TaskList from "@/components/TaskList.vue";
|
||||
import BackTop from "@/components/BackTop.vue";
|
||||
import { showMessageError, showMessageOK } from "@/utils/dialog";
|
||||
import BScrollBox from "@/components/ui/BScrollBox.vue";
|
||||
import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
|
||||
import 'vue-waterfall-plugin-next/dist/style.css'
|
||||
|
||||
import error from '@/assets/img/failed.png'
|
||||
import { LazyImg, Waterfall } from "vue-waterfall-plugin-next";
|
||||
import "vue-waterfall-plugin-next/dist/style.css";
|
||||
|
||||
const listBoxHeight = ref(0);
|
||||
// const paramBoxHeight = ref(0)
|
||||
const isLogin = ref(false);
|
||||
const loading = ref(true);
|
||||
const colWidth = ref(220);
|
||||
const isOver = ref(false);
|
||||
const previewURL = ref("");
|
||||
const store = useSharedStore();
|
||||
const models = ref([]);
|
||||
|
||||
const waterfallOptions = store.waterfallOptions;
|
||||
const resizeElement = function () {
|
||||
listBoxHeight.value = window.innerHeight - 58;
|
||||
// paramBoxHeight.value = window.innerHeight - 110
|
||||
};
|
||||
|
||||
const options = ref({
|
||||
// 唯一key值
|
||||
rowKey: 'id',
|
||||
// 卡片之间的间隙
|
||||
gutter: 10,
|
||||
// 是否有周围的gutter
|
||||
hasAroundGutter: true,
|
||||
// 卡片在PC上的宽度
|
||||
width: 200,
|
||||
// 自定义行显示个数，主要用于对移动端的适配
|
||||
breakpoints: {
|
||||
3840: {
|
||||
// 4K下
|
||||
rowPerView: 8,
|
||||
},
|
||||
2560: {
|
||||
// 2K下
|
||||
rowPerView: 7,
|
||||
},
|
||||
1920: {
|
||||
// 2K下
|
||||
rowPerView: 6,
|
||||
},
|
||||
1600: {
|
||||
// 2K下
|
||||
rowPerView: 5,
|
||||
},
|
||||
1366: {
|
||||
// 2K下
|
||||
rowPerView: 4,
|
||||
},
|
||||
800: {
|
||||
// 当屏幕宽度小于等于800
|
||||
rowPerView: 3,
|
||||
},
|
||||
500: {
|
||||
// 当屏幕宽度小于等于500
|
||||
rowPerView: 2,
|
||||
},
|
||||
},
|
||||
// 动画效果
|
||||
animationEffect: 'animate__fadeInUp',
|
||||
// 动画时间
|
||||
animationDuration: 1000,
|
||||
// 动画延迟
|
||||
animationDelay: 300,
|
||||
animationCancel: false,
|
||||
// 背景色
|
||||
backgroundColor: '#2C2E3A',
|
||||
// imgSelector
|
||||
imgSelector: 'img_thumb',
|
||||
// 加载配置
|
||||
loadProps: {
|
||||
loading,
|
||||
error,
|
||||
ratioCalculator: (width, height) => {
|
||||
console.log("width, height", width, height)
|
||||
return height / width
|
||||
},
|
||||
},
|
||||
// 是否懒加载
|
||||
lazyload: true,
|
||||
align: 'center',
|
||||
})
|
||||
|
||||
function imageLoad(url) {
|
||||
console.log(`${url}: 加载完成`)
|
||||
}
|
||||
|
||||
function imageError(url) {
|
||||
console.error(`${url}: 加载失败`)
|
||||
}
|
||||
|
||||
function imageSuccess(url) {
|
||||
console.log(`${url}: 加载成功`)
|
||||
}
|
||||
|
||||
function afterRender() {
|
||||
loading.value = false
|
||||
console.log('计算完成')
|
||||
}
|
||||
|
||||
resizeElement();
|
||||
window.onresize = () => {
|
||||
resizeElement();
|
||||
@ -397,7 +361,15 @@ const qualities = [
|
||||
{ name: "高清", value: "hd" },
|
||||
];
|
||||
const dalleSizes = ["1024x1024", "1792x1024", "1024x1792"];
|
||||
const fluxSizes = ["1024x1024", "1024x768", "768x1024", "1280x960", "960x1280", "1366x768", "768x1366"];
|
||||
const fluxSizes = [
|
||||
"1024x1024",
|
||||
"1024x768",
|
||||
"768x1024",
|
||||
"1280x960",
|
||||
"960x1280",
|
||||
"1366x768",
|
||||
"768x1366",
|
||||
];
|
||||
const sizes = ref(dalleSizes);
|
||||
const styles = [
|
||||
{ name: "生动", value: "vivid" },
|
||||
@ -487,7 +459,10 @@ const fetchRunningJobs = () => {
|
||||
httpGet(`/api/dall/jobs?finish=false`)
|
||||
.then((res) => {
|
||||
// 如果任务有更新，则更新已完成任务列表
|
||||
if (res.data.items && res.data.items.length !== runningJobs.value.length) {
|
||||
if (
|
||||
res.data.items &&
|
||||
res.data.items.length !== runningJobs.value.length
|
||||
) {
|
||||
page.value = 0;
|
||||
fetchFinishJobs();
|
||||
}
|
||||
@ -514,25 +489,28 @@ const fetchFinishJobs = () => {
|
||||
loading.value = true;
|
||||
page.value = page.value + 1;
|
||||
|
||||
httpGet(`/api/dall/jobs?finish=true&page=${page.value}&page_size=${pageSize.value}`)
|
||||
httpGet(
|
||||
`/api/dall/jobs?finish=true&page=${page.value}&page_size=${pageSize.value}`
|
||||
)
|
||||
.then((res) => {
|
||||
if (res.data.items.length < pageSize.value) {
|
||||
isOver.value = true;
|
||||
loading.value = false;
|
||||
}
|
||||
const imageList = res.data.items;
|
||||
for (let i = 0; i < imageList.length; i++) {
|
||||
imageList[i]["img_thumb"] = imageList[i]["img_url"] + "?imageView2/4/w/300/h/0/q/75";
|
||||
imageList[i]["img_thumb"] =
|
||||
imageList[i]["img_url"] + "?imageView2/4/w/300/h/0/q/75";
|
||||
}
|
||||
if (page.value === 1) {
|
||||
finishedJobs.value = imageList;
|
||||
} else {
|
||||
finishedJobs.value = finishedJobs.value.concat(imageList);
|
||||
}
|
||||
|
||||
loading.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
ElMessage.error("获取任务失败：" + e.message);
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
@ -635,6 +613,6 @@ const changeModel = (model) => {
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
@import "@/assets/css/image-dall.styl"
|
||||
@import "@/assets/css/custom-scroll.styl"
|
||||
@import '@/assets/css/image-dall.styl';
|
||||
@import '@/assets/css/custom-scroll.styl';
|
||||
</style>
|
||||
|
||||
@ -18,8 +18,20 @@
|
||||
<div class="param-line pt">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="8" v-for="item in rates" :key="item.value">
|
||||
<div class="flex-col items-center" :class="item.value === params.rate ? 'grid-content active' : 'grid-content'" @click="changeRate(item)">
|
||||
<el-image class="icon" :src="item.img" fit="cover"></el-image>
|
||||
<div
|
||||
class="flex-col items-center"
|
||||
:class="
|
||||
item.value === params.rate
|
||||
? 'grid-content active'
|
||||
: 'grid-content'
|
||||
"
|
||||
@click="changeRate(item)"
|
||||
>
|
||||
<el-image
|
||||
class="icon"
|
||||
:src="item.img"
|
||||
fit="cover"
|
||||
></el-image>
|
||||
<div class="text">{{ item.text }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
@ -30,10 +42,23 @@
|
||||
<el-form-item label="图片画质">
|
||||
<template #default>
|
||||
<div class="form-item-inner flex-row items-center">
|
||||
<el-select v-model="params.quality" placeholder="请选择" style="width: 150px">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||||
<el-select
|
||||
v-model="params.quality"
|
||||
placeholder="请选择"
|
||||
style="width: 150px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-tooltip content="生成的图片质量，质量越好出图越慢" placement="right">
|
||||
<el-tooltip
|
||||
content="生成的图片质量，质量越好出图越慢"
|
||||
placement="right"
|
||||
>
|
||||
<el-icon>
|
||||
<InfoFilled />
|
||||
</el-icon>
|
||||
@ -45,7 +70,11 @@
|
||||
|
||||
<div class="param-line pt">
|
||||
<span>模型选择：</span>
|
||||
<el-tooltip content="MJ: 偏真实通用模型 <br/>NIJI: 偏动漫风格、适用于二次元模型" raw-content placement="right">
|
||||
<el-tooltip
|
||||
content="MJ: 偏真实通用模型 <br/>NIJI: 偏动漫风格、适用于二次元模型"
|
||||
raw-content
|
||||
placement="right"
|
||||
>
|
||||
<el-icon>
|
||||
<InfoFilled />
|
||||
</el-icon>
|
||||
@ -54,7 +83,12 @@
|
||||
<div class="param-line pt">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12" 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)"
|
||||
>
|
||||
<el-image :src="item.img" fit="cover"></el-image>
|
||||
<div class="text">{{ item.text }}</div>
|
||||
</div>
|
||||
@ -67,7 +101,11 @@
|
||||
<template #default>
|
||||
<div class="form-item-inner">
|
||||
<el-switch v-model="params.tile" inactive-color="#464649" />
|
||||
<el-tooltip content="重复：--tile，参数释义：生成可用作重复平铺的图像，以创建无缝图案。" raw-content placement="right">
|
||||
<el-tooltip
|
||||
content="重复：--tile，参数释义：生成可用作重复平铺的图像，以创建无缝图案。"
|
||||
raw-content
|
||||
placement="right"
|
||||
>
|
||||
<el-icon>
|
||||
<InfoFilled />
|
||||
</el-icon>
|
||||
@ -100,7 +138,12 @@
|
||||
<el-form-item label="创意度">
|
||||
<template #default>
|
||||
<div class="form-item-inner">
|
||||
<el-slider v-model.number="params.chaos" :max="100" :step="1" style="width: 180px" />
|
||||
<el-slider
|
||||
v-model.number="params.chaos"
|
||||
:max="100"
|
||||
:step="1"
|
||||
style="width: 180px"
|
||||
/>
|
||||
<el-tooltip
|
||||
content="参数用法：--chaos 或--c，取值范围: 0-100 <br/> 取值越高结果越发散，反之则稳定收敛<br /> 默认值0最为精准稳定"
|
||||
raw-content
|
||||
@ -119,7 +162,13 @@
|
||||
<el-form-item label="风格化">
|
||||
<template #default>
|
||||
<div class="form-item-inner">
|
||||
<el-slider v-model.number="params.stylize" :min="0" :max="1000" :step="1" style="width: 180px" />
|
||||
<el-slider
|
||||
v-model.number="params.stylize"
|
||||
:min="0"
|
||||
:max="1000"
|
||||
:step="1"
|
||||
style="width: 180px"
|
||||
/>
|
||||
<el-tooltip
|
||||
content="风格化：--stylize 或 --s，范围 1-1000，默认值100 <br/>高取值会产生非常艺术化但与提示关联性较低的图像"
|
||||
raw-content
|
||||
@ -139,7 +188,11 @@
|
||||
<template #default>
|
||||
<div class="form-item-inner">
|
||||
<el-input v-model.number="params.seed" />
|
||||
<el-tooltip content="随机种子：--seed，默认值0表示随机产生 <br/>使用相同的种子参数和描述将产生相似的图像" raw-content placement="right">
|
||||
<el-tooltip
|
||||
content="随机种子：--seed，默认值0表示随机产生 <br/>使用相同的种子参数和描述将产生相似的图像"
|
||||
raw-content
|
||||
placement="right"
|
||||
>
|
||||
<el-icon>
|
||||
<InfoFilled />
|
||||
</el-icon>
|
||||
@ -155,14 +208,21 @@
|
||||
<div class="task-list-inner" :style="{ height: listBoxHeight + 'px' }">
|
||||
<div class="extra-params">
|
||||
<el-form>
|
||||
<el-tabs v-model="activeName" class="title-tabs" @tabChange="tabChange">
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
class="title-tabs"
|
||||
@tabChange="tabChange"
|
||||
>
|
||||
<el-tab-pane label="文生图" name="txt2img">
|
||||
<div class="prompt-box">
|
||||
<div class="param-line pt">
|
||||
<div class="flex-row justify-between items-center">
|
||||
<div class="flex-row justify-start items-center">
|
||||
<span>提示词：</span>
|
||||
<el-tooltip content="输入你想要的内容，用逗号分割" placement="right">
|
||||
<el-tooltip
|
||||
content="输入你想要的内容，用逗号分割"
|
||||
placement="right"
|
||||
>
|
||||
<el-icon>
|
||||
<InfoFilled />
|
||||
</el-icon>
|
||||
@ -184,7 +244,13 @@
|
||||
</div>
|
||||
|
||||
<el-row class="text-info">
|
||||
<el-button class="generate-btn" size="small" @click="generatePrompt" color="#5865f2" :disabled="isGenerating">
|
||||
<el-button
|
||||
class="generate-btn"
|
||||
size="small"
|
||||
@click="generatePrompt"
|
||||
color="#5865f2"
|
||||
:disabled="isGenerating"
|
||||
>
|
||||
<i class="iconfont icon-chuangzuo"></i>
|
||||
<span>生成专业绘画指令</span>
|
||||
</el-button>
|
||||
@ -194,7 +260,10 @@
|
||||
<div class="flex-row justify-between items-center">
|
||||
<div class="flex-row justify-start items-center">
|
||||
<span>不希望出现的内容：（可选）</span>
|
||||
<el-tooltip content="不想出现在图片上的元素(例如：树，建筑)" placement="right">
|
||||
<el-tooltip
|
||||
content="不想出现在图片上的元素(例如：树，建筑)"
|
||||
placement="right"
|
||||
>
|
||||
<el-icon>
|
||||
<InfoFilled />
|
||||
</el-icon>
|
||||
@ -216,16 +285,33 @@
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="图生图" name="img2img">
|
||||
<div class="text">图生图：以某张图片为底稿参考来创作绘画，生成类似风格或类型图像，支持 PNG 和 JPG 格式图片；</div>
|
||||
<div class="text">
|
||||
图生图：以某张图片为底稿参考来创作绘画，生成类似风格或类型图像，支持
|
||||
PNG 和 JPG 格式图片；
|
||||
</div>
|
||||
<div class="param-line">
|
||||
<div class="img-inline">
|
||||
<div class="img-list-box">
|
||||
<div class="img-item" v-for="imgURL in imgList" :key="imgURL">
|
||||
<div
|
||||
class="img-item"
|
||||
v-for="imgURL in imgList"
|
||||
:key="imgURL"
|
||||
>
|
||||
<el-image :src="imgURL" fit="cover" />
|
||||
<el-button type="danger" :icon="Delete" @click="removeUploadImage(imgURL)" circle />
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
@click="removeUploadImage(imgURL)"
|
||||
circle
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<el-upload class="img-uploader" :auto-upload="true" :show-file-list="false" :http-request="uploadImg">
|
||||
<el-upload
|
||||
class="img-uploader"
|
||||
:auto-upload="true"
|
||||
:show-file-list="false"
|
||||
:http-request="uploadImg"
|
||||
>
|
||||
<el-icon class="uploader-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
@ -237,7 +323,12 @@
|
||||
<el-form-item label="参考权重：">
|
||||
<template #default>
|
||||
<div class="form-item-inner">
|
||||
<el-slider v-model.number="params.iw" :max="1" :step="0.01" style="width: 180px" />
|
||||
<el-slider
|
||||
v-model.number="params.iw"
|
||||
:max="1"
|
||||
:step="0.01"
|
||||
style="width: 180px"
|
||||
/>
|
||||
<el-tooltip
|
||||
content="使用图像权重参数--iw来调整图像 URL 与文本的重要性 <br/>权重较高时意味着图像提示将对完成的作业产生更大的影响"
|
||||
raw-content
|
||||
@ -257,7 +348,10 @@
|
||||
<div class="flex-row justify-between items-center">
|
||||
<div class="flex-row justify-start items-center">
|
||||
<span>提示词：</span>
|
||||
<el-tooltip content="输入你想要的内容，用逗号分割" placement="right">
|
||||
<el-tooltip
|
||||
content="输入你想要的内容，用逗号分割"
|
||||
placement="right"
|
||||
>
|
||||
<el-icon>
|
||||
<InfoFilled />
|
||||
</el-icon>
|
||||
@ -278,7 +372,13 @@
|
||||
</div>
|
||||
|
||||
<el-row class="text-info">
|
||||
<el-button class="generate-btn" size="small" @click="generatePrompt" color="#5865f2" :disabled="isGenerating">
|
||||
<el-button
|
||||
class="generate-btn"
|
||||
size="small"
|
||||
@click="generatePrompt"
|
||||
color="#5865f2"
|
||||
:disabled="isGenerating"
|
||||
>
|
||||
<i class="iconfont icon-chuangzuo"></i>
|
||||
<span>生成专业绘画指令</span>
|
||||
</el-button>
|
||||
@ -288,7 +388,10 @@
|
||||
<div class="flex-row justify-between items-center">
|
||||
<div class="flex-row justify-start items-center">
|
||||
<span>不希望出现的内容：（可选）</span>
|
||||
<el-tooltip content="不想出现在图片上的元素(例如：树，建筑)" placement="right">
|
||||
<el-tooltip
|
||||
content="不想出现在图片上的元素(例如：树，建筑)"
|
||||
placement="right"
|
||||
>
|
||||
<el-icon>
|
||||
<InfoFilled />
|
||||
</el-icon>
|
||||
@ -310,15 +413,31 @@
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="融图" name="blend">
|
||||
<div class="text">请上传两张以上的图片，最多不超过五张，超过五张图片请使用图生图功能</div>
|
||||
<div class="text">
|
||||
请上传两张以上的图片，最多不超过五张，超过五张图片请使用图生图功能
|
||||
</div>
|
||||
<div class="img-inline">
|
||||
<div class="img-list-box">
|
||||
<div class="img-item" v-for="imgURL in imgList" :key="imgURL">
|
||||
<div
|
||||
class="img-item"
|
||||
v-for="imgURL in imgList"
|
||||
:key="imgURL"
|
||||
>
|
||||
<el-image :src="imgURL" fit="cover" />
|
||||
<el-button type="danger" :icon="Delete" @click="removeUploadImage(imgURL)" circle />
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
@click="removeUploadImage(imgURL)"
|
||||
circle
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<el-upload class="img-uploader" :auto-upload="true" :show-file-list="false" :http-request="uploadImg">
|
||||
<el-upload
|
||||
class="img-uploader"
|
||||
:auto-upload="true"
|
||||
:show-file-list="false"
|
||||
:http-request="uploadImg"
|
||||
>
|
||||
<el-icon class="uploader-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
@ -327,15 +446,31 @@
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="换脸" name="swapFace">
|
||||
<div class="text">请上传两张有脸部的图片，用左边图片的脸替换右边图片的脸</div>
|
||||
<div class="text">
|
||||
请上传两张有脸部的图片，用左边图片的脸替换右边图片的脸
|
||||
</div>
|
||||
<div class="img-inline">
|
||||
<div class="img-list-box">
|
||||
<div class="img-item" v-for="imgURL in imgList" :key="imgURL">
|
||||
<div
|
||||
class="img-item"
|
||||
v-for="imgURL in imgList"
|
||||
:key="imgURL"
|
||||
>
|
||||
<el-image :src="imgURL" fit="cover" />
|
||||
<el-button type="danger" :icon="Delete" @click="removeUploadImage(imgURL)" circle />
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
@click="removeUploadImage(imgURL)"
|
||||
circle
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<el-upload class="img-uploader" :auto-upload="true" :show-file-list="false" :http-request="uploadImg">
|
||||
<el-upload
|
||||
class="img-uploader"
|
||||
:auto-upload="true"
|
||||
:show-file-list="false"
|
||||
:http-request="uploadImg"
|
||||
>
|
||||
<el-icon class="uploader-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
@ -350,17 +485,29 @@
|
||||
</el-badge>
|
||||
</template>
|
||||
|
||||
<div class="text">注意：只有于 niji6 和 v6 模型支持一致性功能，如果选择其他模型此功能将会生成失败。</div>
|
||||
<div class="text">
|
||||
注意：只有于 niji6 和 v6
|
||||
模型支持一致性功能，如果选择其他模型此功能将会生成失败。
|
||||
</div>
|
||||
<div class="param-line">
|
||||
<el-form-item label="角色一致性：" prop="cref">
|
||||
<el-input
|
||||
v-model="params.cref"
|
||||
placeholder="请输入图片URL或者上传图片"
|
||||
style="--el-input-focus-border-color: #b0a0f8; max-width: 500px; width: 100%"
|
||||
style="
|
||||
--el-input-focus-border-color: #b0a0f8;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
"
|
||||
size="small"
|
||||
>
|
||||
<template #append>
|
||||
<el-upload :auto-upload="true" :show-file-list="false" @click="beforeUpload('cref')" :http-request="uploadImg">
|
||||
<el-upload
|
||||
:auto-upload="true"
|
||||
:show-file-list="false"
|
||||
@click="beforeUpload('cref')"
|
||||
:http-request="uploadImg"
|
||||
>
|
||||
<el-icon class="uploader-icon">
|
||||
<UploadFilled />
|
||||
</el-icon>
|
||||
@ -375,11 +522,20 @@
|
||||
<el-input
|
||||
v-model="params.sref"
|
||||
placeholder="请输入图片URL或者上传图片"
|
||||
style="--el-input-focus-border-color: #b0a0f8; max-width: 500px; width: 100%"
|
||||
style="
|
||||
--el-input-focus-border-color: #b0a0f8;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
"
|
||||
size="small"
|
||||
>
|
||||
<template #append>
|
||||
<el-upload :auto-upload="true" :show-file-list="false" @click="beforeUpload('sref')" :http-request="uploadImg">
|
||||
<el-upload
|
||||
:auto-upload="true"
|
||||
:show-file-list="false"
|
||||
@click="beforeUpload('sref')"
|
||||
:http-request="uploadImg"
|
||||
>
|
||||
<el-icon class="uploader-icon">
|
||||
<UploadFilled />
|
||||
</el-icon>
|
||||
@ -393,8 +549,17 @@
|
||||
<el-form-item label="参考权重：">
|
||||
<template #default>
|
||||
<div class="form-item-inner">
|
||||
<el-slider v-model.number="params.cw" :max="100" :step="1" style="width: 180px" />
|
||||
<el-tooltip content="取值范围 0-100 <br/>默认值100参考原图的脸部、头发和衣服<br/>0则表示只换脸" raw-content placement="right">
|
||||
<el-slider
|
||||
v-model.number="params.cw"
|
||||
:max="100"
|
||||
:step="1"
|
||||
style="width: 180px"
|
||||
/>
|
||||
<el-tooltip
|
||||
content="取值范围 0-100 <br/>默认值100参考原图的脸部、头发和衣服<br/>0则表示只换脸"
|
||||
raw-content
|
||||
placement="right"
|
||||
>
|
||||
<el-icon>
|
||||
<InfoFilled />
|
||||
</el-icon>
|
||||
@ -409,7 +574,10 @@
|
||||
<div class="flex-row justify-between items-center">
|
||||
<div class="flex-row justify-start items-center">
|
||||
<span>提示词：</span>
|
||||
<el-tooltip content="输入你想要的内容，用逗号分割" placement="right">
|
||||
<el-tooltip
|
||||
content="输入你想要的内容，用逗号分割"
|
||||
placement="right"
|
||||
>
|
||||
<el-icon>
|
||||
<InfoFilled />
|
||||
</el-icon>
|
||||
@ -432,7 +600,10 @@
|
||||
<div class="flex-row justify-between items-center">
|
||||
<div class="flex-row justify-start items-center">
|
||||
<span>不希望出现的内容：（可选）</span>
|
||||
<el-tooltip content="不想出现在图片上的元素(例如：树，建筑)" placement="right">
|
||||
<el-tooltip
|
||||
content="不想出现在图片上的元素(例如：树，建筑)"
|
||||
placement="right"
|
||||
>
|
||||
<el-icon>
|
||||
<InfoFilled />
|
||||
</el-icon>
|
||||
@ -458,15 +629,21 @@
|
||||
<el-text type="primary"
|
||||
>每次绘图消耗
|
||||
<el-text type="warning">{{ mjPower }}算力;</el-text>
|
||||
U/V 操作消耗<el-text type="warning">{{ mjActionPower }}算力;</el-text> </el-text
|
||||
U/V 操作消耗<el-text type="warning"
|
||||
>{{ mjActionPower }}算力;</el-text
|
||||
> </el-text
|
||||
>
|
||||
<el-text type="primary"
|
||||
>当前可用算力：<el-text type="warning">{{ power }}</el-text></el-text
|
||||
>当前可用算力：<el-text type="warning">{{
|
||||
power
|
||||
}}</el-text></el-text
|
||||
>
|
||||
</el-row>
|
||||
|
||||
<div class="submit-btn">
|
||||
<el-button type="primary" :dark="false" @click="generate" round>立即生成</el-button>
|
||||
<el-button type="primary" :dark="false" @click="generate" round
|
||||
>立即生成</el-button
|
||||
>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
@ -476,9 +653,235 @@
|
||||
<task-list :list="runningJobs" />
|
||||
<template v-if="finishedJobs.length > 0">
|
||||
<h2 class="text-xl">创作记录</h2>
|
||||
<div class="finish-job-list">
|
||||
<div class="finish-job-list mt-3">
|
||||
<div v-if="finishedJobs.length > 0">
|
||||
<v3-waterfall
|
||||
<Waterfall
|
||||
:list="finishedJobs"
|
||||
:row-key="waterfallOptions.rowKey"
|
||||
:gutter="waterfallOptions.gutter"
|
||||
:has-around-gutter="waterfallOptions.hasAroundGutter"
|
||||
:width="waterfallOptions.width"
|
||||
:breakpoints="waterfallOptions.breakpoints"
|
||||
:img-selector="waterfallOptions.imgSelector"
|
||||
:background-color="waterfallOptions.backgroundColor"
|
||||
:animation-effect="waterfallOptions.animationEffect"
|
||||
:animation-duration="waterfallOptions.animationDuration"
|
||||
:animation-delay="waterfallOptions.animationDelay"
|
||||
:animation-cancel="waterfallOptions.animationCancel"
|
||||
:lazyload="waterfallOptions.lazyload"
|
||||
:load-props="waterfallOptions.loadProps"
|
||||
:cross-origin="waterfallOptions.crossOrigin"
|
||||
:align="waterfallOptions.align"
|
||||
:is-loading="loading"
|
||||
:is-over="isOver"
|
||||
@afterRender="loading = false"
|
||||
>
|
||||
<template #default="{ item, url }">
|
||||
<div
|
||||
class="bg-gray-900 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-linear hover:shadow-md hover:shadow-purple-800 group"
|
||||
>
|
||||
<div class="overflow-hidden rounded-lg">
|
||||
<LazyImg
|
||||
:url="url"
|
||||
v-if="item.progress === 100"
|
||||
class="cursor-pointer transition-all duration-300 ease-linear group-hover:scale-105"
|
||||
@click="previewImg(item)"
|
||||
/>
|
||||
<el-image v-else-if="item.progress === 101">
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<div class="err-msg-container">
|
||||
<div class="title">任务失败</div>
|
||||
<div class="opt">
|
||||
<el-popover
|
||||
title="错误详情"
|
||||
trigger="click"
|
||||
:width="250"
|
||||
:content="item['err_msg']"
|
||||
placement="top"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button type="info">详情</el-button>
|
||||
</template>
|
||||
</el-popover>
|
||||
<el-button
|
||||
type="danger"
|
||||
@click="removeImage(item)"
|
||||
>删除</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</div>
|
||||
<div
|
||||
class="px-4 pt-2 pb-4 border-t border-t-gray-800"
|
||||
v-if="item.progress === 100"
|
||||
>
|
||||
<div class="opt" v-if="item['can_opt']">
|
||||
<div
|
||||
class="flex flex-row justify-start items-center mb-3"
|
||||
>
|
||||
<button
|
||||
class="px-3 h-6 rounded bg-gray-500 text-xs text-white shadow-md transition-all duration-300 hover:bg-gray-600"
|
||||
@click="upscale(1, item)"
|
||||
>
|
||||
U1
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="px-3 h-6 rounded bg-gray-500 text-xs text-white shadow-md transition-all duration-300 hover:bg-gray-600 ml-2"
|
||||
@click="upscale(2, item)"
|
||||
>
|
||||
U2
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="px-3 h-6 rounded bg-gray-500 text-xs text-white shadow-md transition-all duration-300 hover:bg-gray-600 ml-2"
|
||||
@click="upscale(3, item)"
|
||||
>
|
||||
U3
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="px-3 h-6 rounded bg-gray-500 text-xs text-white shadow-md transition-all duration-300 hover:bg-gray-600 ml-2"
|
||||
@click="upscale(4, item)"
|
||||
>
|
||||
U4
|
||||
</button>
|
||||
|
||||
<div class="show-prompt ml-2">
|
||||
<el-popover
|
||||
placement="left"
|
||||
title="提示词"
|
||||
:width="240"
|
||||
trigger="hover"
|
||||
>
|
||||
<template #reference>
|
||||
<i
|
||||
class="iconfont icon-prompt text-white text-xl"
|
||||
></i>
|
||||
</template>
|
||||
|
||||
<template #default>
|
||||
<div class="mj-list-item-prompt">
|
||||
<span>{{ item.prompt }}</span>
|
||||
<el-icon
|
||||
class="copy-prompt-mj"
|
||||
:data-clipboard-text="item.prompt"
|
||||
>
|
||||
<DocumentCopy />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-row justify-start items-center mb-3"
|
||||
>
|
||||
<button
|
||||
class="px-3 h-6 rounded bg-gray-500 text-xs text-white shadow-md transition-all duration-300 hover:bg-gray-600"
|
||||
@click="variation(1, item)"
|
||||
>
|
||||
U1
|
||||
</button>
|
||||
<button
|
||||
class="px-3 h-6 rounded bg-gray-500 text-xs text-white shadow-md transition-all duration-300 hover:bg-gray-600 ml-2"
|
||||
@click="variation(2, item)"
|
||||
>
|
||||
V2
|
||||
</button>
|
||||
<button
|
||||
class="px-3 h-6 rounded bg-gray-500 text-xs text-white shadow-md transition-all duration-300 hover:bg-gray-600 ml-2"
|
||||
@click="variation(3, item)"
|
||||
>
|
||||
V3
|
||||
</button>
|
||||
<button
|
||||
class="px-3 h-6 rounded bg-gray-500 text-xs text-white shadow-md transition-all duration-300 hover:bg-gray-600 ml-2"
|
||||
@click="variation(4, item)"
|
||||
>
|
||||
V4
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="pt-3 flex justify-center items-center border-t border-t-gray-600 border-opacity-50"
|
||||
>
|
||||
<div class="flex">
|
||||
<el-tooltip
|
||||
content="取消分享"
|
||||
placement="top"
|
||||
v-if="item.publish"
|
||||
>
|
||||
<el-button
|
||||
type="warning"
|
||||
@click="publishImage(item, false)"
|
||||
circle
|
||||
>
|
||||
<i class="iconfont icon-cancel-share"></i>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="分享" placement="top" v-else>
|
||||
<el-button
|
||||
type="success"
|
||||
@click="publishImage(item, true)"
|
||||
circle
|
||||
>
|
||||
<i class="iconfont icon-share-bold"></i>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip content="复制提示词" placement="top">
|
||||
<el-button
|
||||
type="info"
|
||||
circle
|
||||
class="copy-prompt"
|
||||
:data-clipboard-text="item.prompt"
|
||||
>
|
||||
<i class="iconfont icon-file"></i>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
@click="removeImage(item)"
|
||||
circle
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Waterfall>
|
||||
|
||||
<div class="flex justify-center py-10">
|
||||
<img
|
||||
:src="waterfallOptions.loadProps.loading"
|
||||
class="max-w-[50px] max-h-[50px]"
|
||||
v-if="loading"
|
||||
/>
|
||||
<div v-else>
|
||||
<button
|
||||
class="px-5 py-2 rounded-full bg-purple-700 text-md text-white cursor-pointer hover:bg-purple-800 transition-all duration-300"
|
||||
@click="fetchFinishJobs"
|
||||
v-if="!isOver"
|
||||
>
|
||||
加载更多
|
||||
</button>
|
||||
<div class="no-more-data" v-else>
|
||||
<span class="text-gray-500 mr-2">没有更多数据了</span>
|
||||
<i class="iconfont icon-face"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <v3-waterfall
|
||||
id="waterfall"
|
||||
:list="finishedJobs"
|
||||
srcKey="thumb_url"
|
||||
@ -622,9 +1025,14 @@
|
||||
<i class="iconfont icon-face"></i>
|
||||
</div>
|
||||
</template>
|
||||
</v3-waterfall>
|
||||
</v3-waterfall> -->
|
||||
</div>
|
||||
<el-empty :image-size="100" :image="nodata" description="暂无记录" v-else />
|
||||
<el-empty
|
||||
:image-size="100"
|
||||
:image="nodata"
|
||||
description="暂无记录"
|
||||
v-else
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -650,7 +1058,15 @@
|
||||
|
||||
<script setup>
|
||||
import { nextTick, onMounted, onUnmounted, ref } from "vue";
|
||||
import { ChromeFilled, Delete, DocumentCopy, InfoFilled, Picture, Plus, UploadFilled } from "@element-plus/icons-vue";
|
||||
import {
|
||||
ChromeFilled,
|
||||
Delete,
|
||||
DocumentCopy,
|
||||
InfoFilled,
|
||||
Picture,
|
||||
Plus,
|
||||
UploadFilled,
|
||||
} from "@element-plus/icons-vue";
|
||||
import nodata from "@/assets/img/no-data.png";
|
||||
import Compressor from "compressorjs";
|
||||
import { httpGet, httpPost } from "@/utils/http";
|
||||
@ -664,13 +1080,15 @@ import { useSharedStore } from "@/store/sharedata";
|
||||
import TaskList from "@/components/TaskList.vue";
|
||||
import BackTop from "@/components/BackTop.vue";
|
||||
import { closeLoading, showLoading, showMessageError } from "@/utils/dialog";
|
||||
import { LazyImg, Waterfall } from "vue-waterfall-plugin-next";
|
||||
import "vue-waterfall-plugin-next/dist/style.css";
|
||||
|
||||
const listBoxHeight = ref(0);
|
||||
const paramBoxHeight = ref(0);
|
||||
const loading = ref(true);
|
||||
const colWidth = ref(220);
|
||||
const previewURL = ref("");
|
||||
const store = useSharedStore();
|
||||
const waterfallOptions = store.waterfallOptions;
|
||||
|
||||
const resizeElement = function () {
|
||||
// listBoxHeight.value = window.innerHeight - 80;
|
||||
@ -893,22 +1311,26 @@ const fetchFinishJobs = () => {
|
||||
loading.value = true;
|
||||
page.value = page.value + 1;
|
||||
// 获取已完成的任务
|
||||
httpGet(`/api/mj/jobs?finish=true&page=${page.value}&page_size=${pageSize.value}`)
|
||||
httpGet(
|
||||
`/api/mj/jobs?finish=true&page=${page.value}&page_size=${pageSize.value}`
|
||||
)
|
||||
.then((res) => {
|
||||
const jobs = res.data.items;
|
||||
let hasDownload = false;
|
||||
for (let i = 0; i < jobs.length; i++) {
|
||||
if (jobs[i]["img_url"] !== "") {
|
||||
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";
|
||||
jobs[i]["img_thumb"] =
|
||||
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]["img_thumb"] =
|
||||
jobs[i]["img_url"] + "?imageView2/1/w/480/h/480/q/75";
|
||||
}
|
||||
} else {
|
||||
if (jobs[i].progress === 100) {
|
||||
hasDownload = true;
|
||||
}
|
||||
jobs[i]["thumb_url"] = "/images/img-placeholder.jpg";
|
||||
jobs[i]["img_thumb"] = "/images/img-placeholder.jpg";
|
||||
}
|
||||
// 如果当前是第一页，则开启图片下载轮询
|
||||
if (page.value === 1) {
|
||||
@ -933,10 +1355,10 @@ const fetchFinishJobs = () => {
|
||||
} else {
|
||||
finishedJobs.value = finishedJobs.value.concat(jobs);
|
||||
}
|
||||
loading.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
ElMessage.error("获取任务失败：" + e.message);
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
@ -1139,6 +1561,6 @@ const generatePrompt = () => {
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
@import "@/assets/css/image-mj.styl"
|
||||
@import "@/assets/css/custom-scroll.styl"
|
||||
@import '@/assets/css/image-mj.styl';
|
||||
@import '@/assets/css/custom-scroll.styl';
|
||||
</style>
|
||||
|
||||
@ -12,9 +12,18 @@
|
||||
<template #default>
|
||||
<div class="form-item-inner">
|
||||
<el-select v-model="params.sampler" style="width: 150px">
|
||||
<el-option v-for="item in samplers" :label="item" :value="item" :key="item" />
|
||||
<el-option
|
||||
v-for="item in samplers"
|
||||
:label="item"
|
||||
:value="item"
|
||||
:key="item"
|
||||
/>
|
||||
</el-select>
|
||||
<el-tooltip content="出图效果比较好的一般是 Euler 和 DPM 系列算法" raw-content placement="right">
|
||||
<el-tooltip
|
||||
content="出图效果比较好的一般是 Euler 和 DPM 系列算法"
|
||||
raw-content
|
||||
placement="right"
|
||||
>
|
||||
<el-icon class="info-icon">
|
||||
<InfoFilled />
|
||||
</el-icon>
|
||||
@ -28,10 +37,22 @@
|
||||
<el-form-item label="采样调度">
|
||||
<template #default>
|
||||
<div class="form-item-inner">
|
||||
<el-select v-model="params.scheduler" style="width: 150px">
|
||||
<el-option v-for="item in schedulers" :label="item" :value="item" :key="item" />
|
||||
<el-select
|
||||
v-model="params.scheduler"
|
||||
style="width: 150px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in schedulers"
|
||||
:label="item"
|
||||
:value="item"
|
||||
:key="item"
|
||||
/>
|
||||
</el-select>
|
||||
<el-tooltip content="推荐自动或者 Karras" raw-content placement="right">
|
||||
<el-tooltip
|
||||
content="推荐自动或者 Karras"
|
||||
raw-content
|
||||
placement="right"
|
||||
>
|
||||
<el-icon class="info-icon">
|
||||
<InfoFilled />
|
||||
</el-icon>
|
||||
@ -47,10 +68,16 @@
|
||||
<div class="form-item-inner">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-input v-model.number="params.width" placeholder="图片宽度" />
|
||||
<el-input
|
||||
v-model.number="params.width"
|
||||
placeholder="图片宽度"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-input v-model.number="params.height" placeholder="图片高度" />
|
||||
<el-input
|
||||
v-model.number="params.height"
|
||||
placeholder="图片高度"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
@ -63,7 +90,11 @@
|
||||
<template #default>
|
||||
<div class="form-item-inner">
|
||||
<el-input v-model.number="params.steps" />
|
||||
<el-tooltip content="值越大则代表细节越多，同时也意味着出图速度越慢" raw-content placement="right">
|
||||
<el-tooltip
|
||||
content="值越大则代表细节越多，同时也意味着出图速度越慢"
|
||||
raw-content
|
||||
placement="right"
|
||||
>
|
||||
<el-icon class="info-icon">
|
||||
<InfoFilled />
|
||||
</el-icon>
|
||||
@ -78,7 +109,11 @@
|
||||
<template #default>
|
||||
<div class="form-item-inner">
|
||||
<el-input v-model.number="params.cfg_scale" />
|
||||
<el-tooltip content="提示词引导系数，图像在多大程度上服从提示词<br/> 较低值会产生更有创意的结果" raw-content placement="right">
|
||||
<el-tooltip
|
||||
content="提示词引导系数，图像在多大程度上服从提示词<br/> 较低值会产生更有创意的结果"
|
||||
raw-content
|
||||
placement="right"
|
||||
>
|
||||
<el-icon class="info-icon">
|
||||
<InfoFilled />
|
||||
</el-icon>
|
||||
@ -93,13 +128,21 @@
|
||||
<template #default>
|
||||
<div class="form-item-inner">
|
||||
<el-input v-model.number="params.seed" />
|
||||
<el-tooltip content="随机数种子，相同的种子会得到相同的结果<br/> 设置为 -1 则每次随机生成种子" raw-content placement="right">
|
||||
<el-tooltip
|
||||
content="随机数种子，相同的种子会得到相同的结果<br/> 设置为 -1 则每次随机生成种子"
|
||||
raw-content
|
||||
placement="right"
|
||||
>
|
||||
<el-icon class="info-icon">
|
||||
<InfoFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip content="使用随机数" raw-content placement="right">
|
||||
<el-tooltip
|
||||
content="使用随机数"
|
||||
raw-content
|
||||
placement="right"
|
||||
>
|
||||
<el-icon @click="params.seed = -1" class="info-icon">
|
||||
<Orange />
|
||||
</el-icon>
|
||||
@ -113,8 +156,16 @@
|
||||
<el-form-item label="高清修复">
|
||||
<template #default>
|
||||
<div class="form-item-inner">
|
||||
<el-switch v-model="params.hd_fix" style="--el-switch-on-color: #47fff1" size="large" />
|
||||
<el-tooltip content="先以较小的分辨率生成图像，接着方法图像<br />然后在不更改构图的情况下再修改细节" raw-content placement="right">
|
||||
<el-switch
|
||||
v-model="params.hd_fix"
|
||||
style="--el-switch-on-color: #47fff1"
|
||||
size="large"
|
||||
/>
|
||||
<el-tooltip
|
||||
content="先以较小的分辨率生成图像，接着方法图像<br />然后在不更改构图的情况下再修改细节"
|
||||
raw-content
|
||||
placement="right"
|
||||
>
|
||||
<el-icon style="margin-left: 10px; top: 12px">
|
||||
<InfoFilled />
|
||||
</el-icon>
|
||||
@ -129,8 +180,20 @@
|
||||
<el-form-item label="重绘幅度">
|
||||
<template #default>
|
||||
<div class="form-item-inner">
|
||||
<el-slider v-model.number="params.hd_redraw_rate" :max="1" :step="0.1" style="width: 180px; --el-slider-main-bg-color: #47fff1" />
|
||||
<el-tooltip content="决定算法对图像内容的影响程度<br />较大的值将得到越有创意的图像" raw-content placement="right">
|
||||
<el-slider
|
||||
v-model.number="params.hd_redraw_rate"
|
||||
:max="1"
|
||||
:step="0.1"
|
||||
style="
|
||||
width: 180px;
|
||||
--el-slider-main-bg-color: #47fff1;
|
||||
"
|
||||
/>
|
||||
<el-tooltip
|
||||
content="决定算法对图像内容的影响程度<br />较大的值将得到越有创意的图像"
|
||||
raw-content
|
||||
placement="right"
|
||||
>
|
||||
<el-icon class="info-icon">
|
||||
<InfoFilled />
|
||||
</el-icon>
|
||||
@ -144,10 +207,22 @@
|
||||
<el-form-item label="放大算法">
|
||||
<template #default>
|
||||
<div class="form-item-inner">
|
||||
<el-select v-model="params.hd_scale_alg" style="width: 176px">
|
||||
<el-option v-for="item in scaleAlg" :label="item" :value="item" :key="item" />
|
||||
<el-select
|
||||
v-model="params.hd_scale_alg"
|
||||
style="width: 176px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in scaleAlg"
|
||||
:label="item"
|
||||
:value="item"
|
||||
:key="item"
|
||||
/>
|
||||
</el-select>
|
||||
<el-tooltip content="高清修复放大算法，主流算法有Latent和ESRGAN_4x" raw-content placement="right">
|
||||
<el-tooltip
|
||||
content="高清修复放大算法，主流算法有Latent和ESRGAN_4x"
|
||||
raw-content
|
||||
placement="right"
|
||||
>
|
||||
<el-icon class="info-icon">
|
||||
<InfoFilled />
|
||||
</el-icon>
|
||||
@ -162,7 +237,11 @@
|
||||
<template #default>
|
||||
<div class="form-item-inner">
|
||||
<el-input v-model.number="params.hd_scale" />
|
||||
<el-tooltip content="随机数种子，相同的种子会得到相同的结果<br/> 设置为 -1 则每次随机生成种子" raw-content placement="right">
|
||||
<el-tooltip
|
||||
content="随机数种子，相同的种子会得到相同的结果<br/> 设置为 -1 则每次随机生成种子"
|
||||
raw-content
|
||||
placement="right"
|
||||
>
|
||||
<el-icon class="info-icon">
|
||||
<InfoFilled />
|
||||
</el-icon>
|
||||
@ -177,7 +256,11 @@
|
||||
<template #default>
|
||||
<div class="form-item-inner">
|
||||
<el-input v-model.number="params.hd_steps" />
|
||||
<el-tooltip content="重绘迭代步数，如果设置为0，则设置跟原图相同的迭代步数" raw-content placement="right">
|
||||
<el-tooltip
|
||||
content="重绘迭代步数，如果设置为0，则设置跟原图相同的迭代步数"
|
||||
raw-content
|
||||
placement="right"
|
||||
>
|
||||
<el-icon class="info-icon">
|
||||
<InfoFilled />
|
||||
</el-icon>
|
||||
@ -201,22 +284,39 @@
|
||||
</div>
|
||||
|
||||
<el-row class="text-info">
|
||||
<el-button class="generate-btn" size="small" @click="generatePrompt" color="#5865f2" :disabled="isGenerating">
|
||||
<i class="iconfont icon-chuangzuo" style="margin-right: 5px"></i>
|
||||
<el-button
|
||||
class="generate-btn"
|
||||
size="small"
|
||||
@click="generatePrompt"
|
||||
color="#5865f2"
|
||||
:disabled="isGenerating"
|
||||
>
|
||||
<i
|
||||
class="iconfont icon-chuangzuo"
|
||||
style="margin-right: 5px"
|
||||
></i>
|
||||
<span>生成专业绘画指令</span>
|
||||
</el-button>
|
||||
</el-row>
|
||||
|
||||
<div class="param-line pt">
|
||||
<span>反向提示词：</span>
|
||||
<el-tooltip content="不希望出现的元素，下面给了默认的起手式" placement="right">
|
||||
<el-tooltip
|
||||
content="不希望出现的元素，下面给了默认的起手式"
|
||||
placement="right"
|
||||
>
|
||||
<el-icon class="info-icon">
|
||||
<InfoFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="param-line">
|
||||
<el-input v-model="params.neg_prompt" :autosize="{ minRows: 4, maxRows: 6 }" type="textarea" placeholder="反向提示词" />
|
||||
<el-input
|
||||
v-model="params.neg_prompt"
|
||||
:autosize="{ minRows: 4, maxRows: 6 }"
|
||||
type="textarea"
|
||||
placeholder="反向提示词"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="text-info">
|
||||
@ -226,80 +326,183 @@
|
||||
<el-text type="warning">{{ sdPower }}算力，</el-text>
|
||||
</el-text>
|
||||
<el-text type="primary"
|
||||
>当前可用 <el-text type="warning"> {{ power }}算力</el-text></el-text
|
||||
>当前可用
|
||||
<el-text type="warning"> {{ power }}算力</el-text></el-text
|
||||
>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="submit-btn">
|
||||
<el-button type="primary" :dark="false" round @click="generate">立即生成</el-button>
|
||||
<el-button type="primary" :dark="false" round @click="generate"
|
||||
>立即生成</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="task-list-box pl-6 pr-6 pb-4 pt-4 h-dvh">
|
||||
<div class="task-list-inner" :style="{ height: listBoxHeight + 'px' }">
|
||||
<div
|
||||
class="task-list-inner"
|
||||
:style="{ height: listBoxHeight + 'px' }"
|
||||
>
|
||||
<div class="job-list-box">
|
||||
<h2 class="text-xl">任务列表</h2>
|
||||
<task-list :list="runningJobs" />
|
||||
<template v-if="finishedJobs.length > 0">
|
||||
<h2 class="text-xl">创作记录</h2>
|
||||
<div class="finish-job-list">
|
||||
<div class="finish-job-list mt-3">
|
||||
<div v-if="finishedJobs.length > 0">
|
||||
<v3-waterfall
|
||||
id="waterfall"
|
||||
<Waterfall
|
||||
:list="finishedJobs"
|
||||
srcKey="img_thumb"
|
||||
:gap="20"
|
||||
:bottomGap="-10"
|
||||
:colWidth="colWidth"
|
||||
:distanceToScroll="100"
|
||||
:isLoading="loading"
|
||||
:isOver="isOver"
|
||||
@scrollReachBottom="fetchFinishJobs()"
|
||||
:row-key="waterfallOptions.rowKey"
|
||||
:gutter="waterfallOptions.gutter"
|
||||
:has-around-gutter="waterfallOptions.hasAroundGutter"
|
||||
:width="waterfallOptions.width"
|
||||
:breakpoints="waterfallOptions.breakpoints"
|
||||
:img-selector="waterfallOptions.imgSelector"
|
||||
:background-color="waterfallOptions.backgroundColor"
|
||||
:animation-effect="waterfallOptions.animationEffect"
|
||||
:animation-duration="waterfallOptions.animationDuration"
|
||||
:animation-delay="waterfallOptions.animationDelay"
|
||||
:animation-cancel="waterfallOptions.animationCancel"
|
||||
:lazyload="waterfallOptions.lazyload"
|
||||
:load-props="waterfallOptions.loadProps"
|
||||
:cross-origin="waterfallOptions.crossOrigin"
|
||||
:align="waterfallOptions.align"
|
||||
:is-loading="loading"
|
||||
:is-over="isOver"
|
||||
@afterRender="loading = false"
|
||||
>
|
||||
<template #default="slotProp">
|
||||
<div class="job-item animate">
|
||||
<el-image v-if="slotProp.item.progress === 101">
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<div class="err-msg-container">
|
||||
<div class="title">任务失败</div>
|
||||
<div class="opt">
|
||||
<el-popover title="错误详情" trigger="click" :width="250" :content="slotProp.item['err_msg']" placement="top">
|
||||
<template #reference>
|
||||
<el-button type="info">详情</el-button>
|
||||
</template>
|
||||
</el-popover>
|
||||
<el-button type="danger" @click="removeImage(slotProp.item)">删除</el-button>
|
||||
<template #default="{ item, url }">
|
||||
<div
|
||||
class="bg-gray-900 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-linear hover:shadow-md hover:shadow-purple-800 group"
|
||||
>
|
||||
<div class="overflow-hidden rounded-lg">
|
||||
<LazyImg
|
||||
:url="url"
|
||||
v-if="item.progress === 100"
|
||||
class="cursor-pointer transition-all duration-300 ease-linear group-hover:scale-105"
|
||||
@click="showTask(item)"
|
||||
/>
|
||||
<el-image v-else-if="item.progress === 101">
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<div class="err-msg-container">
|
||||
<div class="title">任务失败</div>
|
||||
<div class="opt">
|
||||
<el-popover
|
||||
title="错误详情"
|
||||
trigger="click"
|
||||
:width="250"
|
||||
:content="item['err_msg']"
|
||||
placement="top"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button type="info"
|
||||
>详情</el-button
|
||||
>
|
||||
</template>
|
||||
</el-popover>
|
||||
<el-button
|
||||
type="danger"
|
||||
@click="removeImage(item)"
|
||||
>删除</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</div>
|
||||
<div
|
||||
class="px-4 pt-2 pb-4 border-t border-t-gray-800"
|
||||
v-if="item.progress === 100"
|
||||
>
|
||||
<div
|
||||
class="pt-3 flex justify-center items-center border-t border-t-gray-600 border-opacity-50"
|
||||
>
|
||||
<div class="flex">
|
||||
<el-tooltip
|
||||
content="取消分享"
|
||||
placement="top"
|
||||
v-if="item.publish"
|
||||
>
|
||||
<el-button
|
||||
type="warning"
|
||||
@click="publishImage(item, false)"
|
||||
circle
|
||||
>
|
||||
<i class="iconfont icon-cancel-share"></i>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
content="分享"
|
||||
placement="top"
|
||||
v-else
|
||||
>
|
||||
<el-button
|
||||
type="success"
|
||||
@click="publishImage(item, true)"
|
||||
circle
|
||||
>
|
||||
<i class="iconfont icon-share-bold"></i>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip
|
||||
content="复制提示词"
|
||||
placement="top"
|
||||
>
|
||||
<el-button
|
||||
type="info"
|
||||
circle
|
||||
class="copy-prompt"
|
||||
:data-clipboard-text="item.prompt"
|
||||
>
|
||||
<i class="iconfont icon-file"></i>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
@click="removeImage(item)"
|
||||
circle
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
<div v-else>
|
||||
<el-image :src="slotProp.item['img_thumb']" @click="showTask(slotProp.item)" fit="cover" loading="lazy" />
|
||||
<div class="remove">
|
||||
<el-button type="danger" :icon="Delete" @click="removeImage(slotProp.item)" circle />
|
||||
<el-button type="warning" v-if="slotProp.item.publish" @click="publishImage(slotProp.item, false)" circle>
|
||||
<i class="iconfont icon-cancel-share"></i>
|
||||
</el-button>
|
||||
<el-button type="success" v-else @click="publishImage(slotProp.item, true)" circle>
|
||||
<i class="iconfont icon-share-bold"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Waterfall>
|
||||
|
||||
<template #footer>
|
||||
<div class="no-more-data">
|
||||
<span>没有更多数据了</span>
|
||||
<div class="flex justify-center py-10">
|
||||
<img
|
||||
:src="waterfallOptions.loadProps.loading"
|
||||
class="max-w-[50px] max-h-[50px]"
|
||||
v-if="loading"
|
||||
/>
|
||||
<div v-else>
|
||||
<button
|
||||
class="px-5 py-2 rounded-full bg-purple-700 text-md text-white cursor-pointer hover:bg-purple-800 transition-all duration-300"
|
||||
@click="fetchFinishJobs"
|
||||
v-if="!isOver"
|
||||
>
|
||||
加载更多
|
||||
</button>
|
||||
<div class="no-more-data" v-else>
|
||||
<span class="text-gray-500 mr-2">没有更多数据了</span>
|
||||
<i class="iconfont icon-face"></i>
|
||||
</div>
|
||||
</template>
|
||||
</v3-waterfall>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty :image-size="100" v-else :image="nodata" description="暂无记录" />
|
||||
<el-empty
|
||||
:image-size="100"
|
||||
v-else
|
||||
:image="nodata"
|
||||
description="暂无记录"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -312,14 +515,24 @@
|
||||
</div>
|
||||
|
||||
<!-- 任务详情弹框 -->
|
||||
<sd-task-view v-model="showTaskDialog" :data="item" @drawSame="copyParams" @close="showTaskDialog = false" />
|
||||
<sd-task-view
|
||||
v-model="showTaskDialog"
|
||||
:data="item"
|
||||
@drawSame="copyParams"
|
||||
@close="showTaskDialog = false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { nextTick, onMounted, onUnmounted, ref } from "vue";
|
||||
import { Delete, DocumentCopy, InfoFilled, Orange } from "@element-plus/icons-vue";
|
||||
import {
|
||||
Delete,
|
||||
DocumentCopy,
|
||||
InfoFilled,
|
||||
Orange,
|
||||
} from "@element-plus/icons-vue";
|
||||
import nodata from "@/assets/img/no-data.png";
|
||||
|
||||
import { httpGet, httpPost } from "@/utils/http";
|
||||
@ -333,15 +546,17 @@ import TaskList from "@/components/TaskList.vue";
|
||||
import BackTop from "@/components/BackTop.vue";
|
||||
import { showMessageError } from "@/utils/dialog";
|
||||
import SdTaskView from "@/components/SdTaskView.vue";
|
||||
import { LazyImg, Waterfall } from "vue-waterfall-plugin-next";
|
||||
import "vue-waterfall-plugin-next/dist/style.css";
|
||||
|
||||
const listBoxHeight = ref(0);
|
||||
// const paramBoxHeight = ref(0)
|
||||
const fullImgHeight = ref(window.innerHeight - 60);
|
||||
const showTaskDialog = ref(false);
|
||||
const item = ref({});
|
||||
const isLogin = ref(false);
|
||||
const loading = ref(true);
|
||||
const colWidth = ref(220);
|
||||
const store = useSharedStore();
|
||||
const waterfallOptions = store.waterfallOptions;
|
||||
|
||||
const resizeElement = function () {
|
||||
listBoxHeight.value = window.innerHeight - 80;
|
||||
@ -351,7 +566,15 @@ resizeElement();
|
||||
window.onresize = () => {
|
||||
resizeElement();
|
||||
};
|
||||
const samplers = ["Euler a", "DPM++ 2S a", "DPM++ 2M", "DPM++ SDE", "DPM++ 2M SDE", "UniPC", "Restart"];
|
||||
const samplers = [
|
||||
"Euler a",
|
||||
"DPM++ 2S a",
|
||||
"DPM++ 2M",
|
||||
"DPM++ SDE",
|
||||
"DPM++ 2M SDE",
|
||||
"UniPC",
|
||||
"Restart",
|
||||
];
|
||||
const schedulers = ["Automatic", "Karras", "Exponential", "Uniform"];
|
||||
const scaleAlg = ["Latent", "ESRGAN_4x", "R-ESRGAN 4x+", "SwinIR_4x", "LDSR"];
|
||||
const params = ref({
|
||||
@ -368,7 +591,8 @@ const params = ref({
|
||||
hd_scale_alg: scaleAlg[0],
|
||||
hd_steps: 0,
|
||||
prompt: "",
|
||||
neg_prompt: "nsfw, paintings,low quality,easynegative,ng_deepnegative ,lowres,bad anatomy,bad hands,bad feet",
|
||||
neg_prompt:
|
||||
"nsfw, paintings,low quality,easynegative,ng_deepnegative ,lowres,bad anatomy,bad hands,bad feet",
|
||||
});
|
||||
|
||||
const runningJobs = ref([]);
|
||||
@ -466,25 +690,28 @@ const fetchFinishJobs = () => {
|
||||
loading.value = true;
|
||||
page.value = page.value + 1;
|
||||
|
||||
httpGet(`/api/sd/jobs?finish=1&page=${page.value}&page_size=${pageSize.value}`)
|
||||
httpGet(
|
||||
`/api/sd/jobs?finish=1&page=${page.value}&page_size=${pageSize.value}`
|
||||
)
|
||||
.then((res) => {
|
||||
if (res.data.items.length < pageSize.value) {
|
||||
isOver.value = true;
|
||||
loading.value = false;
|
||||
}
|
||||
const imageList = res.data.items;
|
||||
for (let i = 0; i < imageList.length; i++) {
|
||||
imageList[i]["img_thumb"] = imageList[i]["img_url"] + "?imageView2/4/w/300/h/0/q/75";
|
||||
imageList[i]["img_thumb"] =
|
||||
imageList[i]["img_url"] + "?imageView2/4/w/300/h/0/q/75";
|
||||
}
|
||||
if (page.value === 1) {
|
||||
finishedJobs.value = imageList;
|
||||
} else {
|
||||
finishedJobs.value = finishedJobs.value.concat(imageList);
|
||||
}
|
||||
|
||||
loading.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
ElMessage.error("获取任务失败：" + e.message);
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
@ -588,6 +815,6 @@ const generatePrompt = () => {
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
@import "@/assets/css/image-sd.styl"
|
||||
@import "@/assets/css/custom-scroll.styl"
|
||||
@import '@/assets/css/image-sd.styl';
|
||||
@import '@/assets/css/custom-scroll.styl';
|
||||
</style>
|
||||
|
||||
@ -11,149 +11,238 @@
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="waterfall" :style="{ height: listBoxHeight + 'px' }" id="waterfall-box">
|
||||
<v3-waterfall
|
||||
<div
|
||||
class="waterfall"
|
||||
:style="{ height: listBoxHeight + 'px' }"
|
||||
id="waterfall-box"
|
||||
>
|
||||
<Waterfall
|
||||
v-if="imgType === 'mj'"
|
||||
id="waterfall"
|
||||
id="waterfall-mj"
|
||||
:list="data['mj']"
|
||||
srcKey="img_thumb"
|
||||
:gap="12"
|
||||
:bottomGap="-5"
|
||||
:colWidth="colWidth"
|
||||
:distanceToScroll="100"
|
||||
:isLoading="loading"
|
||||
:isOver="isOver"
|
||||
@scrollReachBottom="getNext"
|
||||
:row-key="waterfallOptions.rowKey"
|
||||
:gutter="waterfallOptions.gutter"
|
||||
:has-around-gutter="waterfallOptions.hasAroundGutter"
|
||||
:width="waterfallOptions.width"
|
||||
:breakpoints="waterfallOptions.breakpoints"
|
||||
:img-selector="waterfallOptions.imgSelector"
|
||||
:background-color="waterfallOptions.backgroundColor"
|
||||
:animation-effect="waterfallOptions.animationEffect"
|
||||
:animation-duration="waterfallOptions.animationDuration"
|
||||
:animation-delay="waterfallOptions.animationDelay"
|
||||
:animation-cancel="waterfallOptions.animationCancel"
|
||||
:lazyload="waterfallOptions.lazyload"
|
||||
:load-props="waterfallOptions.loadProps"
|
||||
:cross-origin="waterfallOptions.crossOrigin"
|
||||
:align="waterfallOptions.align"
|
||||
:is-loading="loading"
|
||||
:is-over="isOver"
|
||||
@afterRender="loading = false"
|
||||
>
|
||||
<template #default="slotProp">
|
||||
<div class="list-item">
|
||||
<div class="image">
|
||||
<el-image
|
||||
:src="slotProp.item['img_thumb']"
|
||||
:zoom-rate="1.2"
|
||||
:preview-src-list="[slotProp.item['img_url']]"
|
||||
:preview-teleported="true"
|
||||
:initial-index="10"
|
||||
loading="lazy"
|
||||
>
|
||||
<template #placeholder>
|
||||
<div class="image-slot">正在加载图片</div>
|
||||
</template>
|
||||
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<el-icon>
|
||||
<Picture />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
<template #default="{ item, url }">
|
||||
<div
|
||||
class="bg-gray-900 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-linear hover:shadow-md hover:shadow-purple-800 group"
|
||||
>
|
||||
<div class="overflow-hidden rounded-lg">
|
||||
<LazyImg
|
||||
:url="url"
|
||||
class="cursor-pointer transition-all duration-300 ease-linear group-hover:scale-105"
|
||||
@click="previewImg(item)"
|
||||
/>
|
||||
</div>
|
||||
<div class="opt">
|
||||
<el-tooltip class="box-item" content="复制提示词" placement="top">
|
||||
<el-icon class="copy-prompt-wall" :data-clipboard-text="slotProp.item.prompt">
|
||||
<DocumentCopy />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
<div class="px-4 pt-2 pb-4 border-t border-t-gray-800">
|
||||
<div
|
||||
class="pt-3 flex justify-center items-center border-t border-t-gray-600 border-opacity-50"
|
||||
>
|
||||
<div class="opt">
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
content="复制提示词"
|
||||
placement="top"
|
||||
>
|
||||
<el-button
|
||||
type="info"
|
||||
circle
|
||||
class="copy-prompt-wall"
|
||||
:data-clipboard-text="item.prompt"
|
||||
>
|
||||
<i class="iconfont icon-file"></i>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip class="box-item" content="画同款" placement="top">
|
||||
<i class="iconfont icon-palette-pen" @click="drawSameMj(slotProp.item)"></i>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
content="画同款"
|
||||
placement="top"
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
circle
|
||||
@click="drawSameMj(item)"
|
||||
>
|
||||
<i class="iconfont icon-palette"></i>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</v3-waterfall>
|
||||
</Waterfall>
|
||||
|
||||
<v3-waterfall
|
||||
v-else-if="imgType === 'dall'"
|
||||
id="waterfall"
|
||||
:list="data['dall']"
|
||||
srcKey="img_thumb"
|
||||
:gap="12"
|
||||
:bottomGap="-5"
|
||||
:colWidth="colWidth"
|
||||
:distanceToScroll="100"
|
||||
:isLoading="loading"
|
||||
:isOver="isOver"
|
||||
@scrollReachBottom="getNext"
|
||||
>
|
||||
<template #default="slotProp">
|
||||
<div class="list-item">
|
||||
<div class="image">
|
||||
<el-image
|
||||
:src="slotProp.item['img_thumb']"
|
||||
:zoom-rate="1.2"
|
||||
:preview-src-list="[slotProp.item['img_url']]"
|
||||
:preview-teleported="true"
|
||||
:initial-index="10"
|
||||
loading="lazy"
|
||||
>
|
||||
<template #placeholder>
|
||||
<div class="image-slot">正在加载图片</div>
|
||||
</template>
|
||||
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<el-icon>
|
||||
<Picture />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</div>
|
||||
<div class="opt">
|
||||
<el-tooltip class="box-item" content="复制提示词" placement="top">
|
||||
<el-icon class="copy-prompt-wall" :data-clipboard-text="slotProp.item.prompt">
|
||||
<DocumentCopy />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</v3-waterfall>
|
||||
|
||||
<v3-waterfall
|
||||
v-else
|
||||
id="waterfall"
|
||||
<Waterfall
|
||||
v-if="imgType === 'sd'"
|
||||
id="waterfall-sd"
|
||||
:list="data['sd']"
|
||||
srcKey="img_thumb"
|
||||
:gap="12"
|
||||
:bottomGap="-5"
|
||||
:colWidth="colWidth"
|
||||
:distanceToScroll="100"
|
||||
:isLoading="loading"
|
||||
:isOver="isOver"
|
||||
@scrollReachBottom="getNext"
|
||||
:row-key="waterfallOptions.rowKey"
|
||||
:gutter="waterfallOptions.gutter"
|
||||
:has-around-gutter="waterfallOptions.hasAroundGutter"
|
||||
:width="waterfallOptions.width"
|
||||
:breakpoints="waterfallOptions.breakpoints"
|
||||
:img-selector="waterfallOptions.imgSelector"
|
||||
:background-color="waterfallOptions.backgroundColor"
|
||||
:animation-effect="waterfallOptions.animationEffect"
|
||||
:animation-duration="waterfallOptions.animationDuration"
|
||||
:animation-delay="waterfallOptions.animationDelay"
|
||||
:animation-cancel="waterfallOptions.animationCancel"
|
||||
:lazyload="waterfallOptions.lazyload"
|
||||
:load-props="waterfallOptions.loadProps"
|
||||
:cross-origin="waterfallOptions.crossOrigin"
|
||||
:align="waterfallOptions.align"
|
||||
:is-loading="loading"
|
||||
:is-over="isOver"
|
||||
@afterRender="loading = false"
|
||||
>
|
||||
<template #default="slotProp">
|
||||
<div class="list-item">
|
||||
<div class="image">
|
||||
<el-image :src="slotProp.item['img_thumb']" loading="lazy" @click="showTask(slotProp.item)">
|
||||
<template #placeholder>
|
||||
<div class="image-slot">正在加载图片</div>
|
||||
</template>
|
||||
<template #default="{ item, url }">
|
||||
<div
|
||||
class="bg-gray-900 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-linear hover:shadow-md hover:shadow-purple-800 group"
|
||||
>
|
||||
<div class="overflow-hidden rounded-lg">
|
||||
<LazyImg
|
||||
:url="url"
|
||||
class="cursor-pointer transition-all duration-300 ease-linear group-hover:scale-105"
|
||||
@click="showTask(item)"
|
||||
/>
|
||||
</div>
|
||||
<div class="px-4 pt-2 pb-4 border-t border-t-gray-800">
|
||||
<div
|
||||
class="pt-3 flex justify-center items-center border-t border-t-gray-600 border-opacity-50"
|
||||
>
|
||||
<div class="opt">
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
content="复制提示词"
|
||||
placement="top"
|
||||
>
|
||||
<el-button
|
||||
type="info"
|
||||
circle
|
||||
class="copy-prompt-wall"
|
||||
:data-clipboard-text="item.prompt"
|
||||
>
|
||||
<i class="iconfont icon-file"></i>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<el-icon>
|
||||
<Picture />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
content="画同款"
|
||||
placement="top"
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
circle
|
||||
@click="drawSameSd(item)"
|
||||
>
|
||||
<i class="iconfont icon-palette"></i>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</v3-waterfall>
|
||||
</Waterfall>
|
||||
|
||||
<div class="footer" v-if="isOver">
|
||||
<!-- <el-empty
|
||||
:image-size="100"
|
||||
:image="nodata"
|
||||
description="没有更多数据了"
|
||||
/> -->
|
||||
<span>没有更多数据了</span>
|
||||
<i class="iconfont icon-face"></i>
|
||||
<Waterfall
|
||||
v-if="imgType === 'dall'"
|
||||
id="waterfall-dall"
|
||||
:list="data['dall']"
|
||||
:row-key="waterfallOptions.rowKey"
|
||||
:gutter="waterfallOptions.gutter"
|
||||
:has-around-gutter="waterfallOptions.hasAroundGutter"
|
||||
:width="waterfallOptions.width"
|
||||
:breakpoints="waterfallOptions.breakpoints"
|
||||
:img-selector="waterfallOptions.imgSelector"
|
||||
:background-color="waterfallOptions.backgroundColor"
|
||||
:animation-effect="waterfallOptions.animationEffect"
|
||||
:animation-duration="waterfallOptions.animationDuration"
|
||||
:animation-delay="waterfallOptions.animationDelay"
|
||||
:animation-cancel="waterfallOptions.animationCancel"
|
||||
:lazyload="waterfallOptions.lazyload"
|
||||
:load-props="waterfallOptions.loadProps"
|
||||
:cross-origin="waterfallOptions.crossOrigin"
|
||||
:align="waterfallOptions.align"
|
||||
:is-loading="loading"
|
||||
:is-over="isOver"
|
||||
@afterRender="loading = false"
|
||||
>
|
||||
<template #default="{ item, url }">
|
||||
<div
|
||||
class="bg-gray-900 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-linear hover:shadow-md hover:shadow-purple-800 group"
|
||||
>
|
||||
<div class="overflow-hidden rounded-lg">
|
||||
<LazyImg
|
||||
:url="url"
|
||||
class="cursor-pointer transition-all duration-300 ease-linear group-hover:scale-105"
|
||||
@click="previewImg(item)"
|
||||
/>
|
||||
</div>
|
||||
<div class="px-4 pt-2 pb-4 border-t border-t-gray-800">
|
||||
<div
|
||||
class="pt-3 flex justify-center items-center border-t border-t-gray-600 border-opacity-50"
|
||||
>
|
||||
<div class="opt">
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
content="复制提示词"
|
||||
placement="top"
|
||||
>
|
||||
<el-button
|
||||
type="info"
|
||||
circle
|
||||
class="copy-prompt-wall"
|
||||
:data-clipboard-text="item.prompt"
|
||||
>
|
||||
<i class="iconfont icon-file"></i>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Waterfall>
|
||||
|
||||
<div class="flex flex-col items-center justify-center py-10">
|
||||
<img
|
||||
:src="waterfallOptions.loadProps.loading"
|
||||
class="max-w-[50px] max-h-[50px]"
|
||||
v-if="loading"
|
||||
/>
|
||||
<div v-else>
|
||||
<button
|
||||
class="px-5 py-2 rounded-full bg-purple-700 text-md text-white cursor-pointer hover:bg-purple-800 transition-all duration-300"
|
||||
@click="getNext"
|
||||
v-if="!isOver"
|
||||
>
|
||||
加载更多
|
||||
</button>
|
||||
<div class="no-more-data" v-else>
|
||||
<span class="text-gray-500 mr-2">没有更多数据了</span>
|
||||
<i class="iconfont icon-face"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<back-top :right="30" :bottom="30" />
|
||||
@ -161,7 +250,23 @@
|
||||
<!-- end of waterfall -->
|
||||
</div>
|
||||
<!-- 任务详情弹框 -->
|
||||
<sd-task-view v-model="showTaskDialog" :data="item" @drawSame="drawSameSd" @close="showTaskDialog = false" />
|
||||
<sd-task-view
|
||||
v-model="showTaskDialog"
|
||||
:data="item"
|
||||
@drawSame="drawSameSd"
|
||||
@close="showTaskDialog = false"
|
||||
/>
|
||||
|
||||
<!-- 图片预览 -->
|
||||
<el-image-viewer
|
||||
@close="
|
||||
() => {
|
||||
previewURL = '';
|
||||
}
|
||||
"
|
||||
v-if="previewURL !== ''"
|
||||
:url-list="[previewURL]"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -175,6 +280,13 @@ import Clipboard from "clipboard";
|
||||
import { useRouter } from "vue-router";
|
||||
import BackTop from "@/components/BackTop.vue";
|
||||
import SdTaskView from "@/components/SdTaskView.vue";
|
||||
import { LazyImg, Waterfall } from "vue-waterfall-plugin-next";
|
||||
import "vue-waterfall-plugin-next/dist/style.css";
|
||||
import { useSharedStore } from "@/store/sharedata";
|
||||
|
||||
const store = useSharedStore();
|
||||
const waterfallOptions = store.waterfallOptions;
|
||||
|
||||
const data = ref({
|
||||
mj: [],
|
||||
sd: [],
|
||||
@ -184,19 +296,12 @@ const loading = ref(true);
|
||||
const isOver = ref(false);
|
||||
const imgType = ref("mj"); // 图片类别
|
||||
const listBoxHeight = window.innerHeight - 124;
|
||||
const colWidth = ref(220);
|
||||
const showTaskDialog = ref(false);
|
||||
const item = ref({});
|
||||
const previewURL = ref("");
|
||||
|
||||
// 计算瀑布流列宽度
|
||||
const calcColWidth = () => {
|
||||
const listBoxWidth = window.innerWidth - 60 - 80;
|
||||
const rows = Math.floor(listBoxWidth / colWidth.value);
|
||||
colWidth.value = Math.floor((listBoxWidth - (rows - 1) * 12) / rows);
|
||||
};
|
||||
calcColWidth();
|
||||
window.onresize = () => {
|
||||
calcColWidth();
|
||||
const previewImg = (item) => {
|
||||
previewURL.value = item.img_url;
|
||||
};
|
||||
|
||||
const page = ref(0);
|
||||
@ -223,16 +328,17 @@ const getNext = () => {
|
||||
}
|
||||
httpGet(`${url}?page=${page.value}&page_size=${pageSize.value}`)
|
||||
.then((res) => {
|
||||
loading.value = false;
|
||||
if (!res.data.items || res.data.items.length === 0) {
|
||||
isOver.value = true;
|
||||
loading.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// 生成缩略图
|
||||
const imageList = res.data.items;
|
||||
for (let i = 0; i < imageList.length; i++) {
|
||||
imageList[i]["img_thumb"] = imageList[i]["img_url"] + "?imageView2/4/w/300/h/0/q/75";
|
||||
imageList[i]["img_thumb"] =
|
||||
imageList[i]["img_url"] + "?imageView2/4/w/300/h/0/q/75";
|
||||
}
|
||||
if (data.value[imgType.value].length === 0) {
|
||||
data.value[imgType.value] = imageList;
|
||||
@ -246,6 +352,7 @@ const getNext = () => {
|
||||
})
|
||||
.catch((e) => {
|
||||
ElMessage.error("获取图片失败：" + e.message);
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
@ -300,6 +407,6 @@ const drawSameMj = (row) => {
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
@import "@/assets/css/images-wall.styl"
|
||||
@import "@/assets/css/custom-scroll.styl"
|
||||
@import '@/assets/css/images-wall.styl';
|
||||
@import '@/assets/css/custom-scroll.styl';
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user