mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-11-04 08:13:43 +08:00
feat: midjourney page parameter ui is ready
This commit is contained in:
RockYang
BIN
web/public/images/mj-niji.png
Normal file
BIN
web/public/images/mj-niji.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 476 KiB |
BIN
web/public/images/mj-normal.png
Normal file
BIN
web/public/images/mj-normal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 526 KiB |
178
web/src/assets/css/image-mj.css
Normal file
178
web/src/assets/css/image-mj.css
Normal file
@@ -0,0 +1,178 @@
|
|||||||
|
.page-mj {
|
||||||
|
background-color: #282c34;
|
||||||
|
}
|
||||||
|
.page-mj .inner {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.page-mj .inner .mj-box {
|
||||||
|
margin: 10px;
|
||||||
|
background-color: #262626;
|
||||||
|
border: 1px solid #454545;
|
||||||
|
min-width: 300px;
|
||||||
|
max-width: 300px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.page-mj .inner .mj-box h2 {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 20px;
|
||||||
|
text-align: center;
|
||||||
|
color: #47fff1;
|
||||||
|
}
|
||||||
|
.page-mj .inner .mj-box ::-webkit-scrollbar {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.page-mj .inner .mj-box .mj-params {
|
||||||
|
margin-top: 10px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.page-mj .inner .mj-box .mj-params .param-line {
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.page-mj .inner .mj-box .mj-params .param-line .el-icon {
|
||||||
|
position: relative;
|
||||||
|
top: 3px;
|
||||||
|
}
|
||||||
|
.page-mj .inner .mj-box .mj-params .param-line .grid-content {
|
||||||
|
background-color: #383838;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 8px 14px;
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.page-mj .inner .mj-box .mj-params .param-line .grid-content:hover {
|
||||||
|
background-color: #585858;
|
||||||
|
}
|
||||||
|
.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin-right: 5px;
|
||||||
|
border: 1px solid #c4c4c4;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.vertical {
|
||||||
|
width: 12px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.horizontal {
|
||||||
|
height: 12px;
|
||||||
|
width: 20px;
|
||||||
|
position: relative;
|
||||||
|
top: 3px;
|
||||||
|
}
|
||||||
|
.page-mj .inner .mj-box .mj-params .param-line .grid-content.active {
|
||||||
|
color: #47fff1;
|
||||||
|
background-color: #585858;
|
||||||
|
}
|
||||||
|
.page-mj .inner .mj-box .mj-params .param-line .grid-content.active .shape {
|
||||||
|
border: 1px solid #47fff1;
|
||||||
|
}
|
||||||
|
.page-mj .inner .mj-box .mj-params .param-line .model {
|
||||||
|
background-color: #383838;
|
||||||
|
border: 1px solid #454545;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.page-mj .inner .mj-box .mj-params .param-line .model:hover {
|
||||||
|
background-color: #585858;
|
||||||
|
}
|
||||||
|
.page-mj .inner .mj-box .mj-params .param-line .model .el-image {
|
||||||
|
height: 60px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.page-mj .inner .mj-box .mj-params .param-line .model .text {
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
.page-mj .inner .mj-box .mj-params .param-line .model.active {
|
||||||
|
color: #47fff1;
|
||||||
|
background-color: #585858;
|
||||||
|
border: 1px solid #47fff1;
|
||||||
|
}
|
||||||
|
.page-mj .inner .mj-box .mj-params .param-line .form-item-inner {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.page-mj .inner .mj-box .mj-params .param-line .form-item-inner .el-icon {
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
.page-mj .inner .mj-box .mj-params .param-line .img-uploader .el-upload {
|
||||||
|
border: 1px dashed var(--el-border-color);
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
transition: var(--el-transition-duration-fast);
|
||||||
|
}
|
||||||
|
.page-mj .inner .mj-box .mj-params .param-line .img-uploader .el-upload:hover {
|
||||||
|
border-color: var(--el-color-primary);
|
||||||
|
}
|
||||||
|
.page-mj .inner .mj-box .mj-params .param-line .img-uploader .el-upload .el-icon.uploader-icon {
|
||||||
|
font-size: 28px;
|
||||||
|
color: #8c939d;
|
||||||
|
width: 100%;
|
||||||
|
height: 120px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.page-mj .inner .mj-box .mj-params .param-line.pt {
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
.page-mj .inner .mj-box .submit-btn {
|
||||||
|
padding: 10px 15px 0 15px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.page-mj .inner .mj-box .submit-btn .el-button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.page-mj .inner .mj-box .submit-btn .el-button span {
|
||||||
|
color: #2d3a4b;
|
||||||
|
}
|
||||||
|
.page-mj .inner .el-form .el-form-item__label {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.page-mj .inner .el-form .el-input,
|
||||||
|
.page-mj .inner .el-form .el-slider {
|
||||||
|
width: 180px;
|
||||||
|
}
|
||||||
|
.page-mj .inner .task-list-box {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
color: #fff;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.page-mj .inner .task-list-box .task-list-inner .grid-content {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.page-mj .inner .task-list-box .task-list-inner .grid-content .opt .opt-line {
|
||||||
|
margin: 6px 0;
|
||||||
|
}
|
||||||
|
.page-mj .inner .task-list-box .task-list-inner .grid-content .opt .opt-line ul {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row;
|
||||||
|
}
|
||||||
|
.page-mj .inner .task-list-box .task-list-inner .grid-content .opt .opt-line ul li {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.page-mj .inner .task-list-box .task-list-inner .grid-content .opt .opt-line ul li a {
|
||||||
|
padding: 3px 0;
|
||||||
|
width: 50px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 5px;
|
||||||
|
display: block;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #4e5058;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.page-mj .inner .task-list-box .task-list-inner .grid-content .opt .opt-line ul li a:hover {
|
||||||
|
background-color: #6d6f78;
|
||||||
|
}
|
||||||
234
web/src/assets/css/image-mj.styl
Normal file
234
web/src/assets/css/image-mj.styl
Normal file
@@ -0,0 +1,234 @@
|
|||||||
|
.page-mj {
|
||||||
|
background-color: #282c34;
|
||||||
|
|
||||||
|
.inner {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.mj-box {
|
||||||
|
margin 10px
|
||||||
|
background-color #262626
|
||||||
|
border 1px solid #454545
|
||||||
|
min-width 300px
|
||||||
|
max-width 300px
|
||||||
|
padding 10px
|
||||||
|
border-radius 10px
|
||||||
|
color #ffffff;
|
||||||
|
font-size 14px
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size 20px
|
||||||
|
text-align center
|
||||||
|
color #47fff1
|
||||||
|
}
|
||||||
|
|
||||||
|
// 隐藏滚动条
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mj-params {
|
||||||
|
margin-top 10px
|
||||||
|
overflow auto
|
||||||
|
|
||||||
|
|
||||||
|
.param-line {
|
||||||
|
padding 0 10px
|
||||||
|
|
||||||
|
.el-icon {
|
||||||
|
position relative
|
||||||
|
top 3px
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-content {
|
||||||
|
background-color #383838
|
||||||
|
border-radius 5px
|
||||||
|
padding 8px 14px
|
||||||
|
display flex
|
||||||
|
cursor pointer
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color #585858
|
||||||
|
}
|
||||||
|
|
||||||
|
.shape {
|
||||||
|
width 16px
|
||||||
|
height 16px
|
||||||
|
margin-right 5px
|
||||||
|
border 1px solid #C4C4C4
|
||||||
|
border-radius 3px
|
||||||
|
}
|
||||||
|
|
||||||
|
.shape.vertical {
|
||||||
|
width 12px
|
||||||
|
height 20px
|
||||||
|
}
|
||||||
|
|
||||||
|
.shape.horizontal {
|
||||||
|
height 12px
|
||||||
|
width 20px
|
||||||
|
position relative
|
||||||
|
top 3px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.grid-content.active {
|
||||||
|
color #47fff1
|
||||||
|
background-color #585858
|
||||||
|
|
||||||
|
.shape {
|
||||||
|
border 1px solid #47fff1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.model {
|
||||||
|
background-color #383838
|
||||||
|
border 1px solid #454545
|
||||||
|
border-radius 5px
|
||||||
|
padding 10px
|
||||||
|
display flex
|
||||||
|
flex-flow column
|
||||||
|
align-items center
|
||||||
|
cursor pointer
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color #585858
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-image {
|
||||||
|
height 60px
|
||||||
|
width 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
margin-top 6px
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.model.active {
|
||||||
|
color #47fff1
|
||||||
|
background-color #585858
|
||||||
|
border 1px solid #47fff1
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item-inner {
|
||||||
|
display flex
|
||||||
|
|
||||||
|
.el-icon {
|
||||||
|
margin-left 10px
|
||||||
|
margin-top 2px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.img-uploader {
|
||||||
|
.el-upload {
|
||||||
|
border: 1px dashed var(--el-border-color);
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
width 100%
|
||||||
|
transition: var(--el-transition-duration-fast);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--el-color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-icon.uploader-icon {
|
||||||
|
font-size: 28px
|
||||||
|
color: #8c939d
|
||||||
|
width 100%
|
||||||
|
height: 120px
|
||||||
|
text-align: center
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.param-line.pt {
|
||||||
|
padding-top 5px
|
||||||
|
padding-bottom 5px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
padding 10px 15px 0 15px
|
||||||
|
text-align center
|
||||||
|
|
||||||
|
.el-button {
|
||||||
|
width 100%
|
||||||
|
|
||||||
|
span {
|
||||||
|
color #2D3A4B
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-form {
|
||||||
|
.el-form-item__label {
|
||||||
|
color #ffffff
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input, .el-slider {
|
||||||
|
width 180px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.task-list-box {
|
||||||
|
width 100%
|
||||||
|
padding 10px
|
||||||
|
color #ffffff
|
||||||
|
overflow-x hidden
|
||||||
|
overflow-y auto
|
||||||
|
|
||||||
|
.task-list-inner {
|
||||||
|
|
||||||
|
.grid-content {
|
||||||
|
margin-bottom 20px
|
||||||
|
|
||||||
|
.opt {
|
||||||
|
.opt-line {
|
||||||
|
margin 6px 0
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display flex
|
||||||
|
flex-flow row
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-right 10px
|
||||||
|
|
||||||
|
a {
|
||||||
|
padding 3px 0
|
||||||
|
width 50px
|
||||||
|
text-align center
|
||||||
|
border-radius 5px
|
||||||
|
display block
|
||||||
|
cursor pointer
|
||||||
|
background-color #4E5058
|
||||||
|
color #ffffff
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color #6D6F78
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -4,193 +4,325 @@
|
|||||||
<div class="mj-box">
|
<div class="mj-box">
|
||||||
<h2>MidJourney 创作中心</h2>
|
<h2>MidJourney 创作中心</h2>
|
||||||
|
|
||||||
<div class="mj-params">
|
<div class="mj-params" :style="{ height: mjBoxHeight + 'px' }">
|
||||||
<div class="param-line">
|
<el-form :model="params" label-width="80px" label-position="left">
|
||||||
<span>图片比例：</span>
|
<div class="param-line pt">
|
||||||
<el-tooltip
|
<span>图片比例：</span>
|
||||||
effect="light"
|
<el-tooltip
|
||||||
content="生成图片的尺寸比例"
|
effect="light"
|
||||||
placement="right"
|
content="生成图片的尺寸比例"
|
||||||
>
|
placement="right"
|
||||||
<el-icon>
|
>
|
||||||
<InfoFilled/>
|
<el-icon>
|
||||||
</el-icon>
|
<InfoFilled/>
|
||||||
</el-tooltip>
|
</el-icon>
|
||||||
</div>
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="param-line">
|
<div class="param-line pt">
|
||||||
<el-row :gutter="10">
|
<el-row :gutter="10">
|
||||||
<el-col :span="8" v-for="item in rates" :key="item.value">
|
<el-col :span="8" v-for="item in rates" :key="item.value">
|
||||||
<div :class="item.value === params.rate?'grid-content active':'grid-content'"
|
<div :class="item.value === params.rate?'grid-content active':'grid-content'"
|
||||||
@click="changeRate(item)">
|
@click="changeRate(item)">
|
||||||
<div :class="'shape '+item.css"></div>
|
<div :class="'shape '+item.css"></div>
|
||||||
<div class="text">{{ item.text }}</div>
|
<div class="text">{{ item.text }}</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="param-line pt">
|
||||||
|
<span>模型选择：</span>
|
||||||
|
<el-tooltip
|
||||||
|
effect="light"
|
||||||
|
content="MJ: 偏真实通用模型 <br/>NIJI: 偏动漫风格、适用于二次元模型"
|
||||||
|
raw-content
|
||||||
|
placement="right"
|
||||||
|
>
|
||||||
|
<el-icon>
|
||||||
|
<InfoFilled/>
|
||||||
|
</el-icon>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
<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)">
|
||||||
|
<el-image :src="item.img" fit="cover"></el-image>
|
||||||
|
<div class="text">{{ item.text }}</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="param-line" style="padding-top: 10px">
|
||||||
|
<el-form-item label="创意度">
|
||||||
|
<template #default>
|
||||||
|
<div class="form-item-inner">
|
||||||
|
<el-input v-model="params.chaos" size="small"/>
|
||||||
|
<el-tooltip
|
||||||
|
effect="light"
|
||||||
|
content="参数用法：--chaos 或--c，取值范围: 0-100 <br/> 取值越高结果越发散，反之则稳定收敛<br /> 默认值0最为精准稳定"
|
||||||
|
raw-content
|
||||||
|
placement="right"
|
||||||
|
>
|
||||||
|
<el-icon>
|
||||||
|
<InfoFilled/>
|
||||||
|
</el-icon>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="param-line">
|
||||||
|
<el-form-item label="风格化">
|
||||||
|
<template #default>
|
||||||
|
<div class="form-item-inner">
|
||||||
|
<el-input v-model="params.stylize" size="small"/>
|
||||||
|
<el-tooltip
|
||||||
|
effect="light"
|
||||||
|
content="风格化：--stylize 或 --s，范围 1-1000，默认值100 <br/>高取值会产生非常艺术化但与提示关联性较低的图像"
|
||||||
|
raw-content
|
||||||
|
placement="right"
|
||||||
|
>
|
||||||
|
<el-icon>
|
||||||
|
<InfoFilled/>
|
||||||
|
</el-icon>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="param-line">
|
||||||
|
<el-form-item label="随机种子">
|
||||||
|
<template #default>
|
||||||
|
<div class="form-item-inner">
|
||||||
|
<el-input v-model="params.seed" size="small"/>
|
||||||
|
<el-tooltip
|
||||||
|
effect="light"
|
||||||
|
content="随机种子：--seed，默认值0表示随机产生 <br/>使用相同的种子参数和描述将产生相似的图像"
|
||||||
|
raw-content
|
||||||
|
placement="right"
|
||||||
|
>
|
||||||
|
<el-icon>
|
||||||
|
<InfoFilled/>
|
||||||
|
</el-icon>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="param-line">
|
||||||
|
<el-form-item label="原始模式">
|
||||||
|
<template #default>
|
||||||
|
<div class="form-item-inner">
|
||||||
|
<el-switch v-model="params.raw"/>
|
||||||
|
<el-tooltip
|
||||||
|
effect="light"
|
||||||
|
content="启用新的RAW模式，以“不带偏见”的方式生成图像。<br/> 同时也意味着您需要添加更长的提示。"
|
||||||
|
raw-content
|
||||||
|
placement="right"
|
||||||
|
>
|
||||||
|
<el-icon style="margin-top: 6px">
|
||||||
|
<InfoFilled/>
|
||||||
|
</el-icon>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="param-line">
|
||||||
|
<el-form-item label="图生图">
|
||||||
|
<template #default>
|
||||||
|
<div class="form-item-inner">
|
||||||
|
<el-input v-model="params.img" size="small" placeholder="请输入图片地址或者上传图片"
|
||||||
|
style="width: 160px"/>
|
||||||
|
<el-icon @click="params.img = ''" title="清空图片">
|
||||||
|
<DeleteFilled/>
|
||||||
|
</el-icon>
|
||||||
|
<el-tooltip
|
||||||
|
effect="light"
|
||||||
|
content="垫图：以某张图片为底稿参考来创作绘画 <br/> 支持 PNG 和 JPG 格式图片"
|
||||||
|
raw-content
|
||||||
|
placement="right"
|
||||||
|
>
|
||||||
|
<el-icon>
|
||||||
|
<InfoFilled/>
|
||||||
|
</el-icon>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="param-line">
|
||||||
|
<el-upload
|
||||||
|
class="img-uploader"
|
||||||
|
:auto-upload="true"
|
||||||
|
:show-file-list="false"
|
||||||
|
:http-request="afterRead"
|
||||||
|
>
|
||||||
|
<el-image v-if="params.img !== ''" :src="params.img" fit="cover"/>
|
||||||
|
<el-icon v-else class="uploader-icon">
|
||||||
|
<Plus/>
|
||||||
|
</el-icon>
|
||||||
|
</el-upload>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="param-line" style="padding-top: 10px">
|
||||||
|
<el-form-item label="图像权重">
|
||||||
|
<template #default>
|
||||||
|
<div class="form-item-inner">
|
||||||
|
<el-slider v-model="params.weight" :max="1" :step="0.01" style="width: 180px"/>
|
||||||
|
<el-tooltip
|
||||||
|
effect="light"
|
||||||
|
content="使用图像权重参数--iw来调整图像 URL 与文本的重要性 <br/>权重较高时意味着图像提示将对完成的作业产生更大的影响"
|
||||||
|
raw-content
|
||||||
|
placement="right"
|
||||||
|
>
|
||||||
|
<el-icon style="margin-top: 6px">
|
||||||
|
<InfoFilled/>
|
||||||
|
</el-icon>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="param-line">
|
||||||
|
<el-input
|
||||||
|
v-model="params.prompt"
|
||||||
|
:autosize="{ minRows: 4, maxRows: 6 }"
|
||||||
|
type="textarea"
|
||||||
|
placeholder="这里输入你的咒语，例如：A chinese girl walking in the middle of a cobblestone street"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<div class="submit-btn">
|
||||||
|
<el-button color="#47fff1" :dark="false" round @click="generate">立即生成</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="task-list-box" :style="{ height: listBoxHeight + 'px' }">
|
||||||
|
<div class="task-list-inner">
|
||||||
|
<h2>任务列表</h2>
|
||||||
|
<div class="running-job-list">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="4" v-for="n in 10">
|
||||||
|
<div class="grid-content">
|
||||||
|
<el-image src="http://172.22.11.47:9010/chatgpt-plus/1694167591080692.png"/>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
|
<h2>创作记录</h2>
|
||||||
|
<div class="finish-job-list">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="4" v-for="n in 100">
|
||||||
|
<div class="grid-content">
|
||||||
|
<el-image src="http://172.22.11.47:9010/chatgpt-plus/1694568531910050.png" fit="cover"/>
|
||||||
|
<div class="opt">
|
||||||
|
<div class="opt-line">
|
||||||
|
<ul>
|
||||||
|
<li><a @click="upscale(1)">U1</a></li>
|
||||||
|
<li><a @click="upscale(2)">U2</a></li>
|
||||||
|
<li><a @click="upscale(3)">U3</a></li>
|
||||||
|
<li><a @click="upscale(4)">U4</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="param-line">
|
<div class="opt-line">
|
||||||
<span>模型选择：</span>
|
<ul>
|
||||||
<el-tooltip
|
<li><a @click="variation(1)">V1</a></li>
|
||||||
effect="light"
|
<li><a @click="variation(2)">V2</a></li>
|
||||||
content="MJ: 偏真实通用模型 <br/>NIJI: 偏动漫风格、适用于二次元模型"
|
<li><a @click="variation(3)">V3</a></li>
|
||||||
raw-content
|
<li><a @click="variation(4)">V4</a></li>
|
||||||
placement="right"
|
</ul>
|
||||||
>
|
</div>
|
||||||
<el-icon>
|
|
||||||
<InfoFilled/>
|
|
||||||
</el-icon>
|
|
||||||
</el-tooltip>
|
|
||||||
</div>
|
|
||||||
<div class="param-line">
|
|
||||||
<el-row :gutter="10">
|
|
||||||
<el-col :span="12" v-for="item in models" :key="item.value">
|
|
||||||
<div :class="item.value === params.model?'grid-content active':'grid-content'"
|
|
||||||
@click="changeModel(item)">
|
|
||||||
<div class="img">
|
|
||||||
<el-image src="https://ai.2021it.com/assets/mj-8c02cbcc.png"></el-image>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="text">{{ item.text }}</div>
|
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="task-list-box" :style="{ height: listBoxHeight + 'px' }">
|
|
||||||
<h2>任务列表</h2>
|
|
||||||
|
|
||||||
<h2>创作记录</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import {ref} from "vue"
|
import {ref} from "vue"
|
||||||
import {InfoFilled} from "@element-plus/icons-vue";
|
import {DeleteFilled, InfoFilled, Plus} from "@element-plus/icons-vue";
|
||||||
|
import Compressor from "compressorjs";
|
||||||
|
import {httpPost} from "@/utils/http";
|
||||||
|
import {ElMessage} from "element-plus";
|
||||||
|
|
||||||
const listBoxHeight = window.innerHeight - 20
|
const listBoxHeight = window.innerHeight - 20
|
||||||
|
const mjBoxHeight = window.innerHeight - 150
|
||||||
const rates = [
|
const rates = [
|
||||||
{css: "horizontal", value: "16:9", text: "横图"},
|
{css: "horizontal", value: "16:9", text: "横图"},
|
||||||
{css: "square", value: "1:1", text: "方图"},
|
{css: "square", value: "1:1", text: "方图"},
|
||||||
{css: "vertical", value: "9:16", text: "竖图"},
|
{css: "vertical", value: "9:16", text: "竖图"},
|
||||||
]
|
]
|
||||||
const models = [
|
const models = [
|
||||||
{text: "标准模型", value: "--v 5.2"},
|
{text: "标准模型", value: "--v 5.2", img: "/images/mj-normal.png"},
|
||||||
{text: "动漫模型", value: "--niji 5"},
|
{text: "动漫模型", value: "--niji 5", img: "/images/mj-niji.png"},
|
||||||
]
|
]
|
||||||
const params = ref({
|
const params = ref({
|
||||||
rate: rates[0].value,
|
rate: rates[0].value,
|
||||||
model: models[0].value
|
model: models[0].value,
|
||||||
|
chaos: 0,
|
||||||
|
stylize: 100,
|
||||||
|
seed: 0,
|
||||||
|
raw: false,
|
||||||
|
img: "",
|
||||||
|
weight: 0.25,
|
||||||
|
prompt: ""
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 切换图片比例
|
||||||
const changeRate = (item) => {
|
const changeRate = (item) => {
|
||||||
params.value.rate = item.value
|
params.value.rate = item.value
|
||||||
}
|
}
|
||||||
|
// 切换模型
|
||||||
const changeModel = (item) => {
|
const changeModel = (item) => {
|
||||||
params.value.model = item.value
|
params.value.model = item.value
|
||||||
}
|
}
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
// 图片上传
|
||||||
.page-mj {
|
const afterRead = (file) => {
|
||||||
background-color: #282c34;
|
// 压缩图片并上传
|
||||||
|
new Compressor(file.file, {
|
||||||
|
quality: 0.6,
|
||||||
|
success(result) {
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append('file', result, result.name);
|
||||||
|
// 执行上传操作
|
||||||
|
httpPost('/api/upload', formData).then((res) => {
|
||||||
|
params.value.img = res.data
|
||||||
|
ElMessage.success('上传成功')
|
||||||
|
}).catch((e) => {
|
||||||
|
ElMessage.error('上传失败:' + e.message)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
error(err) {
|
||||||
|
console.log(err.message);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
.inner {
|
// 创建绘图任务
|
||||||
display: flex;
|
const generate = () => {
|
||||||
|
|
||||||
.mj-box {
|
|
||||||
margin 10px
|
|
||||||
background-color #262626
|
|
||||||
border 1px solid #454545
|
|
||||||
min-width 300px
|
|
||||||
max-width 300px
|
|
||||||
padding 10px
|
|
||||||
border-radius 10px
|
|
||||||
color #ffffff;
|
|
||||||
font-size 14px
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-weight: bold;
|
|
||||||
font-size 20px
|
|
||||||
text-align center
|
|
||||||
color #47fff1
|
|
||||||
}
|
|
||||||
|
|
||||||
.mj-params {
|
|
||||||
margin-top 10px
|
|
||||||
|
|
||||||
.param-line {
|
|
||||||
padding 6px 10px 6px 10px
|
|
||||||
|
|
||||||
.el-icon {
|
|
||||||
position relative
|
|
||||||
top 3px
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-content {
|
|
||||||
background-color #383838
|
|
||||||
border-radius 5px
|
|
||||||
padding 8px 14px
|
|
||||||
display flex
|
|
||||||
cursor pointer
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color #585858
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
width 16px
|
|
||||||
height 16px
|
|
||||||
margin-right 5px
|
|
||||||
border 1px solid #C4C4C4
|
|
||||||
border-radius 3px
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape.vertical {
|
|
||||||
width 12px
|
|
||||||
height 20px
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape.horizontal {
|
|
||||||
height 12px
|
|
||||||
width 20px
|
|
||||||
position relative
|
|
||||||
top 3px
|
|
||||||
}
|
|
||||||
|
|
||||||
.img {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.grid-content.active {
|
|
||||||
color #47fff1
|
|
||||||
background-color #585858
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
border 1px solid #47fff1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.task-list-box {
|
|
||||||
width 100%
|
|
||||||
padding 10px
|
|
||||||
color #ffffff
|
|
||||||
overflow-x hidden
|
|
||||||
overflow-y auto
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size 20px
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus">
|
||||||
|
@import "@/assets/css/image-mj.styl"
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user