diff --git a/api/handler/mj_handler.go b/api/handler/mj_handler.go index 35d94cab..f70075ea 100644 --- a/api/handler/mj_handler.go +++ b/api/handler/mj_handler.go @@ -80,6 +80,7 @@ func (h *MidJourneyHandler) Image(c *gin.Context) { var data struct { SessionId string `json:"session_id"` Prompt string `json:"prompt"` + NegPrompt string `json:"neg_prompt"` Rate string `json:"rate"` Model string `json:"model"` Chaos int `json:"chaos"` @@ -87,6 +88,8 @@ func (h *MidJourneyHandler) Image(c *gin.Context) { Seed int64 `json:"seed"` Stylize int `json:"stylize"` Img string `json:"img"` + Tile bool `json:"tile"` + Quality float32 `json:"quality"` Weight float32 `json:"weight"` } if err := c.ShouldBindJSON(&data); err != nil { @@ -119,6 +122,15 @@ func (h *MidJourneyHandler) Image(c *gin.Context) { if data.Raw { prompt += " --style raw" } + if data.Quality > 0 { + prompt += fmt.Sprintf(" --q %.2f", data.Quality) + } + if data.NegPrompt != "" { + prompt += fmt.Sprintf(" --no %s", data.NegPrompt) + } + if data.Tile { + prompt += " --tile " + } if data.Model != "" && !strings.Contains(prompt, "--v") && !strings.Contains(prompt, "--niji") { prompt += fmt.Sprintf(" %s", data.Model) } diff --git a/web/public/images/mj-niji.png b/web/public/images/mj/mj-niji.png similarity index 100% rename from web/public/images/mj-niji.png rename to web/public/images/mj/mj-niji.png diff --git a/web/public/images/mj/mj-v4.jpg b/web/public/images/mj/mj-v4.jpg new file mode 100644 index 00000000..8c98ec08 Binary files /dev/null and b/web/public/images/mj/mj-v4.jpg differ diff --git a/web/public/images/mj/mj-v5.1.jpg b/web/public/images/mj/mj-v5.1.jpg new file mode 100644 index 00000000..bc8a76f2 Binary files /dev/null and b/web/public/images/mj/mj-v5.1.jpg differ diff --git a/web/public/images/mj-normal.png b/web/public/images/mj/mj-v5.2.png similarity index 100% rename from web/public/images/mj-normal.png rename to web/public/images/mj/mj-v5.2.png diff --git a/web/public/images/mj/mj-v5.jpg b/web/public/images/mj/mj-v5.jpg new file mode 100644 index 00000000..c84d4fc0 Binary files /dev/null and b/web/public/images/mj/mj-v5.jpg differ diff --git a/web/public/images/mj/nj1.jpg b/web/public/images/mj/nj1.jpg new file mode 100644 index 00000000..f0330939 Binary files /dev/null and b/web/public/images/mj/nj1.jpg differ diff --git a/web/public/images/mj/nj2.jpg b/web/public/images/mj/nj2.jpg new file mode 100644 index 00000000..cef314e3 Binary files /dev/null and b/web/public/images/mj/nj2.jpg differ diff --git a/web/public/images/mj/nj3.jpg b/web/public/images/mj/nj3.jpg new file mode 100644 index 00000000..72cc1220 Binary files /dev/null and b/web/public/images/mj/nj3.jpg differ diff --git a/web/public/images/mj/nj4.jpg b/web/public/images/mj/nj4.jpg new file mode 100644 index 00000000..b791e660 Binary files /dev/null and b/web/public/images/mj/nj4.jpg differ diff --git a/web/public/images/mj/rate_16_9.png b/web/public/images/mj/rate_16_9.png new file mode 100644 index 00000000..468d0c48 Binary files /dev/null and b/web/public/images/mj/rate_16_9.png differ diff --git a/web/public/images/mj/rate_1_1.png b/web/public/images/mj/rate_1_1.png new file mode 100644 index 00000000..26afa237 Binary files /dev/null and b/web/public/images/mj/rate_1_1.png differ diff --git a/web/public/images/mj/rate_1_2.png b/web/public/images/mj/rate_1_2.png new file mode 100644 index 00000000..38210d2d Binary files /dev/null and b/web/public/images/mj/rate_1_2.png differ diff --git a/web/public/images/mj/rate_2_1.png b/web/public/images/mj/rate_2_1.png new file mode 100644 index 00000000..090cab00 Binary files /dev/null and b/web/public/images/mj/rate_2_1.png differ diff --git a/web/public/images/mj/rate_3_4.png b/web/public/images/mj/rate_3_4.png new file mode 100644 index 00000000..c322c5f9 Binary files /dev/null and b/web/public/images/mj/rate_3_4.png differ diff --git a/web/public/images/mj/rate_4_3.png b/web/public/images/mj/rate_4_3.png new file mode 100644 index 00000000..16d926d5 Binary files /dev/null and b/web/public/images/mj/rate_4_3.png differ diff --git a/web/public/images/mj/rate_9_16.png b/web/public/images/mj/rate_9_16.png new file mode 100644 index 00000000..951cfb5c Binary files /dev/null and b/web/public/images/mj/rate_9_16.png differ diff --git a/web/src/App.vue b/web/src/App.vue index 610e4ac1..31c8beb7 100644 --- a/web/src/App.vue +++ b/web/src/App.vue @@ -39,4 +39,157 @@ html, body { } } +/* 省略显示 */ +.ellipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.sl { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; +} +.sl3 { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + overflow: hidden; +} +.sl4 { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + overflow: hidden; +} + +/* 居中布局 */ +.auto_center{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); +} +.h_center{ + width: 100%; + position: absolute; + top: 50%; + transform: translateY(-50%); + -webkit-transform: translateY(-50%); +} +.w_center{ + position: absolute; + left: 50%; + transform: translateX(-50%); + -webkit-transform: translateX(-50%); +} + +/* flex布局 */ +.flex-row { + display: flex; + flex-direction: row; +} + +.flex-col { + display: flex; + flex-direction: column; +} + +.justify-start { + justify-content: flex-start; +} + +.justify-end { + justify-content: flex-end; +} + +.justify-center { + justify-content: center; +} + +.justify-between { + justify-content: space-between; +} + +.justify-around { + justify-content: space-around; +} + +.justify-evenly { + justify-content: space-evenly; +} + +.items-start { + align-items: flex-start; +} + +.items-end { + align-items: flex-end; +} + +.items-center { + align-items: center; +} + +.items-baseline { + align-items: baseline; +} + +.items-stretch { + align-items: stretch; +} + +.self-start { + align-self: flex-start; +} + +.self-end { + align-self: flex-end; +} + +.self-center { + align-self: center; +} + +.self-baseline { + align-self: baseline; +} + +.self-stretch { + align-self: stretch; +} + +.flex-1 { + flex: 1 1 0%; +} + +.flex-auto { + flex: 1 1 auto; +} + +.grow { + flex-grow: 1; +} + +.grow-0 { + flex-grow: 0; +} + +.shrink { + flex-shrink: 1; +} + +.shrink-0 { + flex-shrink: 0; +} + +.shrink-1 { + flex-shrink: 1; +} + +.relative { + position: relative; +} + diff --git a/web/src/assets/css/image-mj.css b/web/src/assets/css/image-mj.css index 494eba13..d421a77e 100644 --- a/web/src/assets/css/image-mj.css +++ b/web/src/assets/css/image-mj.css @@ -35,7 +35,6 @@ } .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; @@ -43,26 +42,62 @@ padding: 8px 14px; display: flex; cursor: pointer; + margin-bottom: 10px; } .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 .icon { + width: 20px; + height: 20px; + margin-bottom: 5px; +} .page-mj .inner .mj-box .mj-params .param-line .grid-content .shape { width: 16px; height: 16px; - margin-right: 5px; + margin-bottom: 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.size9-16 { + width: 9px; + height: 16px; } -.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.horizontal { - height: 12px; - width: 20px; +.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size16-9 { + height: 9px; + width: 16px; position: relative; - top: 3px; + margin: 4px 0 7px; +} +.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size3-4 { + width: 12px; + height: 16px; +} +.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size4-3 { + height: 12px; + width: 16px; + position: relative; + margin: 4px 0 4px; +} +.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size2-3 { + width: 11px; + height: 16px; +} +.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size3-2 { + height: 11px; + width: 16px; + position: relative; + margin: 4px 0 5px; +} +.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size1-2 { + width: 8px; + height: 16px; +} +.page-mj .inner .mj-box .mj-params .param-line .grid-content .shape.size2-1 { + height: 8px; + width: 16px; + position: relative; + margin: 4px 0 8px; } .page-mj .inner .mj-box .mj-params .param-line .grid-content.active { color: #47fff1; @@ -76,6 +111,7 @@ border: 1px solid #454545; border-radius: 5px; padding: 10px; + margin-bottom: 10px; display: flex; flex-flow: column; align-items: center; @@ -98,10 +134,20 @@ } .page-mj .inner .mj-box .mj-params .param-line .form-item-inner { display: flex; + align-items: center; +} +.page-mj .inner .mj-box .mj-params .param-line .form-item-inner .el-select { + --el-select-input-focus-border-color: #47fff1; + --el-input-focus-border-color: #47fff1; +} +.page-mj .inner .mj-box .mj-params .param-line .form-item-inner .el-input__wrapper { + background: #383838; +} +.page-mj .inner .mj-box .mj-params .param-line .form-item-inner .el-input__inner { + color: #fff; } .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); @@ -123,19 +169,11 @@ text-align: center; } .page-mj .inner .mj-box .mj-params .param-line.pt { + display: flex; + align-items: center; 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; } @@ -149,6 +187,86 @@ color: #fff; overflow-x: hidden; } +.page-mj .inner .task-list-box .task-list-inner .el-tabs { + --el-tabs-header-height: 55px; +} +.page-mj .inner .task-list-box .task-list-inner .el-tabs__item { + color: #fff; + font-size: 18px; +} +.page-mj .inner .task-list-box .task-list-inner .title-tabs .el-tabs__item.is-active { + color: #47fff1; + font-size: 18px; +} +.page-mj .inner .task-list-box .task-list-inner .title-tabs .el-tabs__active-bar { + background-color: #47fff1; +} +.page-mj .inner .task-list-box .task-list-inner .title-tabs .el-tabs__content { + padding: 10px 0; +} +.page-mj .inner .task-list-box .task-list-inner .el-textarea { + --el-input-focus-border-color: #47fff1; +} +.page-mj .inner .task-list-box .task-list-inner .el-textarea__inner { + background: transparent; + color: #fff; +} +.page-mj .inner .task-list-box .task-list-inner .el-input__wrapper { + background: transparent; + padding: 5px; +} +.page-mj .inner .task-list-box .task-list-inner .text { + margin-bottom: 10px; + color: #6b778c; + font-size: 15px; +} +.page-mj .inner .task-list-box .task-list-inner .param-line.pt { + padding-top: 5px; + padding-bottom: 5px; +} +.page-mj .inner .task-list-box .task-list-inner .form-item-inner { + display: flex; + align-items: center; +} +.page-mj .inner .task-list-box .task-list-inner .form-item-inner .el-icon { + margin-left: 10px; +} +.page-mj .inner .task-list-box .task-list-inner .el-form-item__label { + color: #fff; +} +.page-mj .inner .task-list-box .task-list-inner .img-uploader .el-upload { + border: 1px dashed var(--el-border-color); + border-radius: 6px; + cursor: pointer; + position: relative; + overflow: hidden; + width: 300px; + transition: var(--el-transition-duration-fast); + margin-bottom: 20px; +} +.page-mj .inner .task-list-box .task-list-inner .img-uploader .el-upload:hover { + border-color: var(--el-color-primary); +} +.page-mj .inner .task-list-box .task-list-inner .img-uploader .el-upload .el-icon.uploader-icon { + font-size: 28px; + color: #8c939d; + width: 100%; + height: 120px; + text-align: center; +} +.page-mj .inner .task-list-box .task-list-inner .submit-btn { + display: flex; + margin: 20px 0; +} +.page-mj .inner .task-list-box .task-list-inner .submit-btn .el-button { + width: 200px; +} +.page-mj .inner .task-list-box .task-list-inner .submit-btn .text-info { + width: 100%; + display: flex; + justify-content: right; + align-items: center; +} .page-mj .inner .task-list-box .running-job-list .job-item { width: 100%; padding: 2px; @@ -253,5 +371,4 @@ margin-left: 10px; cursor: pointer; position: relative; - top: 2px; } diff --git a/web/src/assets/css/image-mj.styl b/web/src/assets/css/image-mj.styl index 23a59b7c..47ad2fe6 100644 --- a/web/src/assets/css/image-mj.styl +++ b/web/src/assets/css/image-mj.styl @@ -40,7 +40,6 @@ .el-icon { position relative - top 3px } .grid-content { @@ -49,29 +48,72 @@ padding 8px 14px display flex cursor pointer + margin-bottom: 10px; &:hover { background-color #585858 } + .icon { + width 20px + height 20px + margin-bottom 5px + } + .shape { width 16px height 16px - margin-right 5px + margin-bottom 5px border 1px solid #C4C4C4 border-radius 3px } - .shape.vertical { - width 12px - height 20px + .shape.size9-16 { + width 9px + height 16px } - .shape.horizontal { - height 12px - width 20px + .shape.size16-9 { + height 9px + width 16px position relative - top 3px + margin 4px 0 7px + } + + .shape.size3-4 { + width 12px + height 16px + } + + .shape.size4-3 { + height 12px + width 16px + position relative + margin 4px 0 4px + } + + .shape.size2-3 { + width 11px + height 16px + } + + .shape.size3-2 { + height 11px + width 16px + position relative + margin 4px 0 5px + } + + .shape.size1-2 { + width 8px + height 16px + } + + .shape.size2-1 { + height 8px + width 16px + position relative + margin 4px 0 8px } } @@ -90,6 +132,7 @@ border 1px solid #454545 border-radius 5px padding 10px + margin-bottom 10px display flex flex-flow column align-items center @@ -118,14 +161,26 @@ .form-item-inner { display flex + align-items: center + + .el-select { + --el-select-input-focus-border-color: #47FFF1; + --el-input-focus-border-color: #47FFF1; + } + + .el-input__wrapper { + background: #383838; + } + + .el-input__inner { + color: #fff + } .el-icon { margin-left 10px - margin-top 2px } } - .img-uploader { .el-upload { border: 1px dashed var(--el-border-color); @@ -153,23 +208,12 @@ } .param-line.pt { + display: flex + align-items: center 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 { @@ -192,6 +236,5 @@ margin-left 10px cursor pointer position relative - top 2px } } \ No newline at end of file diff --git a/web/src/assets/css/image-sd.css b/web/src/assets/css/image-sd.css index 6799e825..9bd76f37 100644 --- a/web/src/assets/css/image-sd.css +++ b/web/src/assets/css/image-sd.css @@ -72,6 +72,86 @@ color: #fff; overflow-x: hidden; } +.page-sd .inner .task-list-box .task-list-inner .el-tabs { + --el-tabs-header-height: 55px; +} +.page-sd .inner .task-list-box .task-list-inner .el-tabs__item { + color: #fff; + font-size: 18px; +} +.page-sd .inner .task-list-box .task-list-inner .title-tabs .el-tabs__item.is-active { + color: #47fff1; + font-size: 18px; +} +.page-sd .inner .task-list-box .task-list-inner .title-tabs .el-tabs__active-bar { + background-color: #47fff1; +} +.page-sd .inner .task-list-box .task-list-inner .title-tabs .el-tabs__content { + padding: 10px 0; +} +.page-sd .inner .task-list-box .task-list-inner .el-textarea { + --el-input-focus-border-color: #47fff1; +} +.page-sd .inner .task-list-box .task-list-inner .el-textarea__inner { + background: transparent; + color: #fff; +} +.page-sd .inner .task-list-box .task-list-inner .el-input__wrapper { + background: transparent; + padding: 5px; +} +.page-sd .inner .task-list-box .task-list-inner .text { + margin-bottom: 10px; + color: #6b778c; + font-size: 15px; +} +.page-sd .inner .task-list-box .task-list-inner .param-line.pt { + padding-top: 5px; + padding-bottom: 5px; +} +.page-sd .inner .task-list-box .task-list-inner .form-item-inner { + display: flex; + align-items: center; +} +.page-sd .inner .task-list-box .task-list-inner .form-item-inner .el-icon { + margin-left: 10px; +} +.page-sd .inner .task-list-box .task-list-inner .el-form-item__label { + color: #fff; +} +.page-sd .inner .task-list-box .task-list-inner .img-uploader .el-upload { + border: 1px dashed var(--el-border-color); + border-radius: 6px; + cursor: pointer; + position: relative; + overflow: hidden; + width: 300px; + transition: var(--el-transition-duration-fast); + margin-bottom: 20px; +} +.page-sd .inner .task-list-box .task-list-inner .img-uploader .el-upload:hover { + border-color: var(--el-color-primary); +} +.page-sd .inner .task-list-box .task-list-inner .img-uploader .el-upload .el-icon.uploader-icon { + font-size: 28px; + color: #8c939d; + width: 100%; + height: 120px; + text-align: center; +} +.page-sd .inner .task-list-box .task-list-inner .submit-btn { + display: flex; + margin: 20px 0; +} +.page-sd .inner .task-list-box .task-list-inner .submit-btn .el-button { + width: 200px; +} +.page-sd .inner .task-list-box .task-list-inner .submit-btn .text-info { + width: 100%; + display: flex; + justify-content: right; + align-items: center; +} .page-sd .inner .task-list-box .running-job-list .job-item { width: 100%; padding: 2px; diff --git a/web/src/assets/css/task-list.styl b/web/src/assets/css/task-list.styl index 9a1a5082..92000098 100644 --- a/web/src/assets/css/task-list.styl +++ b/web/src/assets/css/task-list.styl @@ -4,6 +4,108 @@ color #ffffff overflow-x hidden + .task-list-inner { + .el-tabs { + --el-tabs-header-height: 55px; + } + + .el-tabs__item { + color: #fff; + font-size: 18px; + } + + .title-tabs .el-tabs__item.is-active { + color: #47FFF1; + font-size: 18px; + } + + .title-tabs .el-tabs__active-bar { + background-color: #47FFF1; + } + + .title-tabs .el-tabs__content { + padding: 10px 0; + } + + .el-textarea { + --el-input-focus-border-color: #47FFF1; + } + + .el-textarea__inner { + background: transparent; + color: #fff; + } + + .el-input__wrapper { + background: transparent; + padding 5px + } + + .text { + margin-bottom: 10px; + color: #6b778c; + font-size: 15px + } + + .param-line.pt { + padding-top 5px + padding-bottom 5px + } + + .form-item-inner { + display flex + align-items: center + + .el-icon { + margin-left 10px + } + } + + .el-form-item__label { + color #ffffff + } + + .img-uploader { + .el-upload { + border: 1px dashed var(--el-border-color); + border-radius: 6px; + cursor: pointer; + position: relative; + overflow: hidden; + width 300px; + transition: var(--el-transition-duration-fast); + margin-bottom: 20px; + + &:hover { + border-color: var(--el-color-primary); + } + + .el-icon.uploader-icon { + font-size: 28px + color: #8c939d + width 100% + height: 120px + text-align: center + } + } + } + + .submit-btn { + display flex + margin: 20px 0 + + .el-button { + width 200px + } + + .text-info { + width 100% + display flex + justify-content right + align-items center + } + } + } .running-job-list { .job-item { diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue index d89af195..971ed1c3 100644 --- a/web/src/views/Home.vue +++ b/web/src/views/Home.vue @@ -2,22 +2,21 @@
-
@@ -34,6 +33,8 @@