mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-09-17 16:56:38 +08:00
optimze the style for stable diffusion image dialog
This commit is contained in:
RockYang
parent
c89f23b018
commit
79e342be57
@ -3,10 +3,6 @@
|
|||||||
}
|
}
|
||||||
.page-sd .inner {
|
.page-sd .inner {
|
||||||
display: flex;
|
display: flex;
|
||||||
/* 修改滚动条的颜色 */
|
|
||||||
/* 修改滚动条轨道的背景颜色 */
|
|
||||||
/* 修改滚动条的滑块颜色 */
|
|
||||||
/* 修改滚动条的滑块的悬停颜色 */
|
|
||||||
}
|
}
|
||||||
.page-sd .inner .sd-box {
|
.page-sd .inner .sd-box {
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
@ -70,19 +66,6 @@
|
|||||||
.page-sd .inner .el-form .el-form-item__label {
|
.page-sd .inner .el-form .el-form-item__label {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
.page-sd .inner ::-webkit-scrollbar {
|
|
||||||
width: 10px; /* 滚动条宽度 */
|
|
||||||
}
|
|
||||||
.page-sd .inner ::-webkit-scrollbar-track {
|
|
||||||
background-color: #282c34;
|
|
||||||
}
|
|
||||||
.page-sd .inner ::-webkit-scrollbar-thumb {
|
|
||||||
background-color: #444;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
.page-sd .inner ::-webkit-scrollbar-thumb:hover {
|
|
||||||
background-color: #666;
|
|
||||||
}
|
|
||||||
.page-sd .inner .task-list-box {
|
.page-sd .inner .task-list-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
@ -179,9 +162,85 @@
|
|||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
.mj-list-item-prompt .el-icon {
|
.page-sd .el-overlay-dialog .el-dialog {
|
||||||
|
background-color: #1a1b1e;
|
||||||
|
}
|
||||||
|
.page-sd .el-overlay-dialog .el-dialog .el-dialog__header .el-dialog__title {
|
||||||
|
color: #f5f5f5;
|
||||||
|
}
|
||||||
|
.page-sd .el-overlay-dialog .el-dialog .el-dialog__body {
|
||||||
|
padding: 0 0 0 15px !important;
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info {
|
||||||
|
background-color: #25262b;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
}
|
||||||
|
.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .prompt {
|
||||||
|
background-color: #35363b;
|
||||||
|
padding: 10px;
|
||||||
|
color: #999;
|
||||||
|
overflow: auto;
|
||||||
|
max-height: 100px;
|
||||||
|
min-height: 50px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .prompt .el-icon {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
bottom: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper {
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper label {
|
||||||
|
display: flex;
|
||||||
|
width: 100px;
|
||||||
|
color: #a5a5a5;
|
||||||
|
}
|
||||||
|
.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper .item-value {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #35363b;
|
||||||
|
padding: 2px 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: #f5f5f5;
|
||||||
|
}
|
||||||
|
.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .copy-params {
|
||||||
|
padding: 20px 0 10px 0;
|
||||||
|
}
|
||||||
|
.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .copy-params .el-button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.page-sd .mj-list-item-prompt .el-icon {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 2px;
|
top: 2px;
|
||||||
}
|
}
|
||||||
|
.custom-scroll ::-webkit-scrollbar {
|
||||||
|
width: 10px; /* 滚动条宽度 */
|
||||||
|
}
|
||||||
|
.custom-scroll ::-webkit-scrollbar-track {
|
||||||
|
background-color: #282c34;
|
||||||
|
}
|
||||||
|
.custom-scroll ::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #444;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.custom-scroll ::-webkit-scrollbar-thumb:hover {
|
||||||
|
background-color: #666;
|
||||||
|
}
|
||||||
|
|||||||
@ -233,52 +233,73 @@
|
|||||||
display flex
|
display flex
|
||||||
height 100%
|
height 100%
|
||||||
|
|
||||||
.img-container {
|
.el-row {
|
||||||
display flex
|
|
||||||
justify-content center
|
|
||||||
width 100%
|
width 100%
|
||||||
}
|
|
||||||
|
|
||||||
.task-info {
|
.img-container {
|
||||||
max-width 320px
|
display flex
|
||||||
min-width 320px
|
justify-content center
|
||||||
background-color #25262b
|
}
|
||||||
padding 10px 15px
|
|
||||||
|
|
||||||
.info-line {
|
.task-info {
|
||||||
width 100%
|
background-color #25262b
|
||||||
|
padding 1rem 1.5rem
|
||||||
|
|
||||||
.prompt {
|
.info-line {
|
||||||
background-color #35363b
|
width 100%
|
||||||
padding 10px
|
|
||||||
color #999999
|
|
||||||
overflow auto
|
|
||||||
max-height 100px
|
|
||||||
min-height 50px
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper {
|
.prompt {
|
||||||
margin-top 10px
|
|
||||||
display flex
|
|
||||||
|
|
||||||
label {
|
|
||||||
display flex
|
|
||||||
width 100px
|
|
||||||
color #a5a5a5
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-value {
|
|
||||||
display flex
|
|
||||||
width 100%
|
|
||||||
background-color #35363b
|
background-color #35363b
|
||||||
padding 2px 5px
|
padding 10px
|
||||||
border-radius 5px
|
color #999999
|
||||||
color #F5F5F5
|
overflow auto
|
||||||
|
max-height 100px
|
||||||
|
min-height 50px
|
||||||
|
|
||||||
|
position relative
|
||||||
|
|
||||||
|
.el-icon {
|
||||||
|
position absolute
|
||||||
|
right 10px
|
||||||
|
bottom 10px
|
||||||
|
cursor pointer
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
margin-top 10px
|
||||||
|
display flex
|
||||||
|
|
||||||
|
label {
|
||||||
|
display flex
|
||||||
|
width 100px
|
||||||
|
color #a5a5a5
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-value {
|
||||||
|
display flex
|
||||||
|
width 100%
|
||||||
|
background-color #35363b
|
||||||
|
padding 2px 5px
|
||||||
|
border-radius 5px
|
||||||
|
color #F5F5F5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.copy-params {
|
||||||
|
padding 20px 0 10px 0
|
||||||
|
|
||||||
|
.el-button {
|
||||||
|
width 100%
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// end el-row
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -129,7 +129,7 @@
|
|||||||
<el-form-item label="高清修复">
|
<el-form-item label="高清修复">
|
||||||
<template #default>
|
<template #default>
|
||||||
<div class="form-item-inner">
|
<div class="form-item-inner">
|
||||||
<el-switch v-model="params.hd_fix" style="--el-switch-on-color: #47fff1;" @change="switchHdFix"/>
|
<el-switch v-model="params.hd_fix" style="--el-switch-on-color: #47fff1;"/>
|
||||||
<el-tooltip
|
<el-tooltip
|
||||||
effect="light"
|
effect="light"
|
||||||
content="先以较小的分辨率生成图像，接着方法图像<br />然后在不更改构图的情况下再修改细节"
|
content="先以较小的分辨率生成图像，接着方法图像<br />然后在不更改构图的情况下再修改细节"
|
||||||
@ -145,7 +145,7 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-show="showHdFix">
|
<div v-show="params.hd_fix">
|
||||||
<div class="param-line">
|
<div class="param-line">
|
||||||
<el-form-item label="重绘幅度">
|
<el-form-item label="重绘幅度">
|
||||||
<template #default>
|
<template #default>
|
||||||
@ -369,95 +369,115 @@
|
|||||||
|
|
||||||
<!-- 任务详情弹框 -->
|
<!-- 任务详情弹框 -->
|
||||||
<el-dialog v-model="showTaskDialog" title="绘画任务详情" :fullscreen="true">
|
<el-dialog v-model="showTaskDialog" title="绘画任务详情" :fullscreen="true">
|
||||||
<div class="img-container">
|
<el-row :gutter="20">
|
||||||
<el-image :src="item['img_url']"
|
<el-col :span="16">
|
||||||
:style="{maxHeight: fullImgHeight+'px'}" fix="cover"/>
|
<div class="img-container" :style="{maxHeight: fullImgHeight+'px'}">
|
||||||
</div>
|
<el-image :src="item['img_url']" fit="contain"/>
|
||||||
|
|
||||||
<div class="task-info">
|
|
||||||
<div class="info-line">
|
|
||||||
<el-divider>
|
|
||||||
正向提示词
|
|
||||||
</el-divider>
|
|
||||||
<div class="prompt">{{ item.prompt }}</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="info-line">
|
|
||||||
<el-divider>
|
|
||||||
反向提示词
|
|
||||||
</el-divider>
|
|
||||||
<div class="prompt">{{ item.params.negative_prompt }}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="info-line">
|
|
||||||
<div class="wrapper">
|
|
||||||
<label>采样方法：</label>
|
|
||||||
<div class="item-value">{{ item.params.sampler }}</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<div class="task-info">
|
||||||
|
<div class="info-line">
|
||||||
|
<el-divider>
|
||||||
|
正向提示词
|
||||||
|
</el-divider>
|
||||||
|
<div class="prompt">
|
||||||
|
<span>{{ item.prompt }}</span>
|
||||||
|
<el-icon class="copy-prompt" :data-clipboard-text="item.prompt">
|
||||||
|
<DocumentCopy/>
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="info-line">
|
|
||||||
<div class="wrapper">
|
|
||||||
<label>图片尺寸：</label>
|
|
||||||
<div class="item-value">{{ item.params.width }} x {{ item.params.height }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="info-line">
|
|
||||||
<div class="wrapper">
|
|
||||||
<label>迭代步数：</label>
|
|
||||||
<div class="item-value">{{ item.params.steps }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="info-line">
|
|
||||||
<div class="wrapper">
|
|
||||||
<label>引导系数：</label>
|
|
||||||
<div class="item-value">{{ item.params.cfg_scale }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="info-line">
|
|
||||||
<div class="wrapper">
|
|
||||||
<label>随机因子：</label>
|
|
||||||
<div class="item-value">{{ item.params.seed }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="item.params.hd_fix">
|
|
||||||
<el-divider>
|
|
||||||
高清修复
|
|
||||||
</el-divider>
|
|
||||||
<div class="info-line">
|
|
||||||
<div class="wrapper">
|
|
||||||
<label>重绘幅度：</label>
|
|
||||||
<div class="item-value">{{ item.params.hd_redraw_rate }}</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="info-line">
|
<div class="info-line">
|
||||||
<div class="wrapper">
|
<el-divider>
|
||||||
<label>放大算法：</label>
|
反向提示词
|
||||||
<div class="item-value">{{ item.params.hd_scale_alg }}</div>
|
</el-divider>
|
||||||
|
<div class="prompt">
|
||||||
|
<span>{{ item.params.negative_prompt }}</span>
|
||||||
|
<el-icon class="copy-prompt" :data-clipboard-text="item.params.negative_prompt">
|
||||||
|
<DocumentCopy/>
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="info-line">
|
<div class="info-line">
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<label>放大倍数：</label>
|
<label>采样方法：</label>
|
||||||
<div class="item-value">{{ item.params.hd_scale }}</div>
|
<div class="item-value">{{ item.params.sampler }}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="info-line">
|
<div class="info-line">
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<label>迭代步数：</label>
|
<label>图片尺寸：</label>
|
||||||
<div class="item-value">{{ item.params.hd_steps }}</div>
|
<div class="item-value">{{ item.params.width }} x {{ item.params.height }}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="info-line">
|
||||||
|
<div class="wrapper">
|
||||||
|
<label>迭代步数：</label>
|
||||||
|
<div class="item-value">{{ item.params.steps }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info-line">
|
||||||
|
<div class="wrapper">
|
||||||
|
<label>引导系数：</label>
|
||||||
|
<div class="item-value">{{ item.params.cfg_scale }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info-line">
|
||||||
|
<div class="wrapper">
|
||||||
|
<label>随机因子：</label>
|
||||||
|
<div class="item-value">{{ item.params.seed }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="item.params.hd_fix">
|
||||||
|
<el-divider>
|
||||||
|
高清修复
|
||||||
|
</el-divider>
|
||||||
|
<div class="info-line">
|
||||||
|
<div class="wrapper">
|
||||||
|
<label>重绘幅度：</label>
|
||||||
|
<div class="item-value">{{ item.params.hd_redraw_rate }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info-line">
|
||||||
|
<div class="wrapper">
|
||||||
|
<label>放大算法：</label>
|
||||||
|
<div class="item-value">{{ item.params.hd_scale_alg }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info-line">
|
||||||
|
<div class="wrapper">
|
||||||
|
<label>放大倍数：</label>
|
||||||
|
<div class="item-value">{{ item.params.hd_scale }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info-line">
|
||||||
|
<div class="wrapper">
|
||||||
|
<label>迭代步数：</label>
|
||||||
|
<div class="item-value">{{ item.params.hd_steps }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="copy-params">
|
||||||
|
<el-button type="primary" round @click="copyParams(item)">画一张同款的</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</el-col>
|
||||||
</div>
|
</el-row>
|
||||||
|
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -476,7 +496,6 @@ import {getSessionId, getUserToken} from "@/store/session";
|
|||||||
const listBoxHeight = ref(window.innerHeight - 40)
|
const listBoxHeight = ref(window.innerHeight - 40)
|
||||||
const mjBoxHeight = ref(window.innerHeight - 150)
|
const mjBoxHeight = ref(window.innerHeight - 150)
|
||||||
const fullImgHeight = ref(window.innerHeight - 60)
|
const fullImgHeight = ref(window.innerHeight - 60)
|
||||||
const showHdFix = ref(false)
|
|
||||||
const showTaskDialog = ref(false)
|
const showTaskDialog = ref(false)
|
||||||
const item = ref({})
|
const item = ref({})
|
||||||
|
|
||||||
@ -608,11 +627,6 @@ onMounted(() => {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
// 启用高清修复
|
|
||||||
const switchHdFix = () => {
|
|
||||||
showHdFix.value = params.value.hd_fix === true;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// 创建绘图任务
|
// 创建绘图任务
|
||||||
const promptRef = ref(null)
|
const promptRef = ref(null)
|
||||||
@ -635,6 +649,11 @@ const showTask = (row) => {
|
|||||||
showTaskDialog.value = true
|
showTaskDialog.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const copyParams = (row) => {
|
||||||
|
params.value = row.params
|
||||||
|
showTaskDialog.value = false
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus">
|
<style lang="stylus">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user