xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-09-18 09:16:39 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: blend and swap face function for midjourney-plus is ready

Browse Source
This commit is contained in:
RockYang 2024-01-26 11:57:08 +08:00
parent dea72738c1
commit a0f3bc8ccb
7 changed files with 568 additions and 504 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
api/handler/mj_handler.go
View File

@ -157,6 +157,11 @@ func (h *MidJourneyHandler) Image(c *gin.Context) {
Prompt: prompt, Prompt: prompt,
CreatedAt: time.Now(), CreatedAt: time.Now(),
} }
if data.TaskType == types.TaskBlend.String() {
data.Prompt = "融图：" + strings.Join(data.ImgArr, ",")
} else if data.TaskType == types.TaskSwapFace.String() {
data.Prompt = "换脸：" + strings.Join(data.ImgArr, ",")
}
if res := h.db.Create(&job); res.Error != nil || res.RowsAffected == 0 { if res := h.db.Create(&job); res.Error != nil || res.RowsAffected == 0 {
resp.ERROR(c, "添加任务失败："+res.Error.Error()) resp.ERROR(c, "添加任务失败："+res.Error.Error())
return return
@ -166,7 +171,7 @@ func (h *MidJourneyHandler) Image(c *gin.Context) {
Id: int(job.Id), Id: int(job.Id),
TaskId: taskId, TaskId: taskId,
SessionId: data.SessionId, SessionId: data.SessionId,
Type: types.TaskImage, Type: types.TaskType(data.TaskType),
Prompt: prompt, Prompt: prompt,
UserId: userId, UserId: userId,
ImgArr: data.ImgArr, ImgArr: data.ImgArr,

4
api/service/mj/plus/client.go
View File

@ -98,7 +98,7 @@ func (c *Client) Blend(task types.MjTask) (ImageRes, error) {
BotType: "MID_JOURNEY", BotType: "MID_JOURNEY",
Dimensions: "SQUARE", Dimensions: "SQUARE",
NotifyHook: c.Config.NotifyURL, NotifyHook: c.Config.NotifyURL,
Base64Array: make([]string, 1), Base64Array: make([]string, 0),
} }
// 生成图片 Base64 编码 // 生成图片 Base64 编码
if len(task.ImgArr) > 0 { if len(task.ImgArr) > 0 {
@ -107,7 +107,7 @@ func (c *Client) Blend(task types.MjTask) (ImageRes, error) {
if err != nil { if err != nil {
logger.Error("error with download image: ", err) logger.Error("error with download image: ", err)
} else { } else {
body.Base64Array[0] = "data:image/png;base64," + base64.StdEncoding.EncodeToString(imageData) body.Base64Array = append(body.Base64Array, "data:image/png;base64,"+base64.StdEncoding.EncodeToString(imageData))
} }
} }
} }

9
api/service/mj/pool.go
View File

@ -167,7 +167,7 @@ func (p *ServicePool) HasAvailableService() bool {
} }
func (p *ServicePool) Notify(data plus.CBReq) error { func (p *ServicePool) Notify(data plus.CBReq) error {
logger.Infof("收到任务回调：%+v", data) logger.Debugf("收到任务回调：%+v", data)
var job model.MidJourneyJob var job model.MidJourneyJob
res := p.db.Where("task_id = ?", data.Id).First(&job) res := p.db.Where("task_id = ?", data.Id).First(&job)
if res.Error != nil { if res.Error != nil {
@ -190,7 +190,7 @@ func (p *ServicePool) SyncTaskProgress() {
go func() { go func() {
var items []model.MidJourneyJob var items []model.MidJourneyJob
for { for {
res := p.db.Where("progress < ?", 100).Find(&items) res := p.db.Where("progress >= ? AND progress < ?", 0, 100).Find(&items)
if res.Error != nil { if res.Error != nil {
continue continue
} }
@ -215,6 +215,11 @@ func (p *ServicePool) SyncTaskProgress() {
if err != nil { if err != nil {
continue continue
} }
// 任务失败了
if task.FailReason != "" {
p.db.Model(&model.MidJourneyJob{Id: v.Id}).UpdateColumn("progress", -1)
continue
}
if len(task.Buttons) > 0 { if len(task.Buttons) > 0 {
v.Hash = getImageHash(task.Buttons[0].CustomId) v.Hash = getImageHash(task.Buttons[0].CustomId)
} }

74
web/src/assets/css/image-mj.css
View File

@ -231,32 +231,49 @@
.page-mj .inner .task-list-box .task-list-inner .el-form-item__label { .page-mj .inner .task-list-box .task-list-inner .el-form-item__label {
color: #fff; color: #fff;
} }
.page-mj .inner .task-list-box .task-list-inner .img-uploader .el-upload { .page-mj .inner .task-list-box .task-list-inner .img-inline {
display: flex;
}
.page-mj .inner .task-list-box .task-list-inner .img-inline .img-uploader .el-upload {
border: 1px dashed var(--el-border-color); border: 1px dashed var(--el-border-color);
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
width: 300px; width: 120px;
transition: var(--el-transition-duration-fast); transition: var(--el-transition-duration-fast);
margin-bottom: 20px; margin-bottom: 20px;
} }
.page-mj .inner .task-list-box .task-list-inner .img-uploader .el-upload:hover { .page-mj .inner .task-list-box .task-list-inner .img-inline .img-uploader .el-upload:hover {
border-color: var(--el-color-primary); border-color: var(--el-color-primary);
} }
.page-mj .inner .task-list-box .task-list-inner .img-uploader .el-upload .el-icon.uploader-icon { .page-mj .inner .task-list-box .task-list-inner .img-inline .img-uploader .el-upload .el-icon.uploader-icon {
font-size: 28px; font-size: 28px;
color: #8c939d; color: #8c939d;
width: 100%; width: 100%;
height: 120px; height: 120px;
text-align: center; text-align: center;
} }
.page-mj .inner .task-list-box .task-list-inner .img-inline { .page-mj .inner .task-list-box .task-list-inner .img-inline .img-list-box {
display: flex; display: flex;
} }
.page-mj .inner .task-list-box .task-list-inner .img-inline .img-uploader { .page-mj .inner .task-list-box .task-list-inner .img-inline .img-list-box .img-item {
width: 120px;
position: relative;
margin-right: 10px; margin-right: 10px;
} }
.page-mj .inner .task-list-box .task-list-inner .img-inline .img-list-box .img-item .el-image {
width: 120px;
height: 120px;
border-radius: 5px;
}
.page-mj .inner .task-list-box .task-list-inner .img-inline .img-list-box .img-item .el-button {
position: absolute;
right: 5px;
top: 5px;
width: 20px;
height: 20px;
}
.page-mj .inner .task-list-box .task-list-inner .submit-btn { .page-mj .inner .task-list-box .task-list-inner .submit-btn {
display: flex; display: flex;
margin: 20px 0; margin: 20px 0;
@ -270,17 +287,17 @@
justify-content: right; justify-content: right;
align-items: center; align-items: center;
} }
.page-mj .inner .task-list-box .running-job-list .job-item { .page-mj .inner .task-list-box .task-list-inner .job-list-box .running-job-list .job-item {
width: 100%; width: 100%;
padding: 2px; padding: 2px;
background-color: #555; background-color: #555;
} }
.page-mj .inner .task-list-box .running-job-list .job-item .job-item-inner { .page-mj .inner .task-list-box .task-list-inner .job-list-box .running-job-list .job-item .job-item-inner {
position: relative; position: relative;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
.page-mj .inner .task-list-box .running-job-list .job-item .job-item-inner .progress { .page-mj .inner .task-list-box .task-list-inner .job-list-box .running-job-list .job-item .job-item-inner .progress {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -290,11 +307,11 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.page-mj .inner .task-list-box .running-job-list .job-item .job-item-inner .progress span { .page-mj .inner .task-list-box .task-list-inner .job-list-box .running-job-list .job-item .job-item-inner .progress span {
font-size: 20px; font-size: 20px;
color: #fff; color: #fff;
} }
.page-mj .inner .task-list-box .finish-job-list .job-item { .page-mj .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #666; border: 1px solid #666;
@ -304,17 +321,17 @@
transition: all 0.3s ease; /* 添加过渡效果 */ transition: all 0.3s ease; /* 添加过渡效果 */
position: relative; position: relative;
} }
.page-mj .inner .task-list-box .finish-job-list .job-item .opt .opt-line { .page-mj .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .opt .opt-line {
margin: 6px 0; margin: 6px 0;
} }
.page-mj .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul { .page-mj .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .opt .opt-line ul {
display: flex; display: flex;
flex-flow: row; flex-flow: row;
} }
.page-mj .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li { .page-mj .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .opt .opt-line ul li {
margin-right: 6px; margin-right: 6px;
} }
.page-mj .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li a { .page-mj .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .opt .opt-line ul li a {
padding: 3px 0; padding: 3px 0;
width: 40px; width: 40px;
text-align: center; text-align: center;
@ -324,59 +341,58 @@
background-color: #4e5058; background-color: #4e5058;
color: #fff; color: #fff;
} }
.page-mj .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li a:hover { .page-mj .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .opt .opt-line ul li a:hover {
background-color: #6d6f78; background-color: #6d6f78;
} }
.page-mj .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul .show-prompt { .page-mj .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .opt .opt-line ul .show-prompt {
font-size: 20px; font-size: 20px;
cursor: pointer; cursor: pointer;
} }
.page-mj .inner .task-list-box .finish-job-list .job-item .remove { .page-mj .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .remove {
display: none; display: none;
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 10px; top: 10px;
} }
.page-mj .inner .task-list-box .finish-job-list .job-item:hover .remove { .page-mj .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item:hover .remove {
display: block; display: block;
} }
.page-mj .inner .task-list-box .finish-job-list .animate:hover { .page-mj .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .animate:hover {
box-shadow: 0 0 10px rgba(71,255,241,0.6); /* 添加阴影效果 */ box-shadow: 0 0 10px rgba(71,255,241,0.6); /* 添加阴影效果 */
transform: translateY(-10px); /* 向上移动10像素 */ transform: translateY(-10px); /* 向上移动10像素 */
} }
.page-mj .inner .task-list-box .el-image { .page-mj .inner .task-list-box .task-list-inner .job-list-box .el-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: visible; overflow: visible;
} }
.page-mj .inner .task-list-box .el-image img { .page-mj .inner .task-list-box .task-list-inner .job-list-box .el-image img {
height: 240px; height: 240px;
} }
.page-mj .inner .task-list-box .el-image .el-image-viewer__wrapper img { .page-mj .inner .task-list-box .task-list-inner .job-list-box .el-image .el-image-viewer__wrapper img {
width: auto; width: auto;
height: auto; height: auto;
} }
.page-mj .inner .task-list-box .el-image .image-slot { .page-mj .inner .task-list-box .task-list-inner .job-list-box .el-image .image-slot {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%;
min-height: 200px; min-height: 200px;
color: #fff; color: #fff;
height: 240px; height: 240px;
} }
.page-mj .inner .task-list-box .el-image .image-slot .iconfont { .page-mj .inner .task-list-box .task-list-inner .job-list-box .el-image .image-slot .iconfont {
font-size: 50px; font-size: 50px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.page-mj .inner .task-list-box .el-image.upscale { .page-mj .inner .task-list-box .task-list-inner .job-list-box .el-image.upscale {
max-height: 310px; max-height: 310px;
} }
.page-mj .inner .task-list-box .el-image.upscale img { .page-mj .inner .task-list-box .task-list-inner .job-list-box .el-image.upscale img {
height: 310px; height: 310px;
} }
.page-mj .inner .task-list-box .el-image.upscale .el-image-viewer__wrapper img { .page-mj .inner .task-list-box .task-list-inner .job-list-box .el-image.upscale .el-image-viewer__wrapper img {
width: auto; width: auto;
height: auto; height: auto;
} }

74
web/src/assets/css/image-sd.css
View File

@ -116,32 +116,49 @@
.page-sd .inner .task-list-box .task-list-inner .el-form-item__label { .page-sd .inner .task-list-box .task-list-inner .el-form-item__label {
color: #fff; color: #fff;
} }
.page-sd .inner .task-list-box .task-list-inner .img-uploader .el-upload { .page-sd .inner .task-list-box .task-list-inner .img-inline {
display: flex;
}
.page-sd .inner .task-list-box .task-list-inner .img-inline .img-uploader .el-upload {
border: 1px dashed var(--el-border-color); border: 1px dashed var(--el-border-color);
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
width: 300px; width: 120px;
transition: var(--el-transition-duration-fast); transition: var(--el-transition-duration-fast);
margin-bottom: 20px; margin-bottom: 20px;
} }
.page-sd .inner .task-list-box .task-list-inner .img-uploader .el-upload:hover { .page-sd .inner .task-list-box .task-list-inner .img-inline .img-uploader .el-upload:hover {
border-color: var(--el-color-primary); border-color: var(--el-color-primary);
} }
.page-sd .inner .task-list-box .task-list-inner .img-uploader .el-upload .el-icon.uploader-icon { .page-sd .inner .task-list-box .task-list-inner .img-inline .img-uploader .el-upload .el-icon.uploader-icon {
font-size: 28px; font-size: 28px;
color: #8c939d; color: #8c939d;
width: 100%; width: 100%;
height: 120px; height: 120px;
text-align: center; text-align: center;
} }
.page-sd .inner .task-list-box .task-list-inner .img-inline { .page-sd .inner .task-list-box .task-list-inner .img-inline .img-list-box {
display: flex; display: flex;
} }
.page-sd .inner .task-list-box .task-list-inner .img-inline .img-uploader { .page-sd .inner .task-list-box .task-list-inner .img-inline .img-list-box .img-item {
width: 120px;
position: relative;
margin-right: 10px; margin-right: 10px;
} }
.page-sd .inner .task-list-box .task-list-inner .img-inline .img-list-box .img-item .el-image {
width: 120px;
height: 120px;
border-radius: 5px;
}
.page-sd .inner .task-list-box .task-list-inner .img-inline .img-list-box .img-item .el-button {
position: absolute;
right: 5px;
top: 5px;
width: 20px;
height: 20px;
}
.page-sd .inner .task-list-box .task-list-inner .submit-btn { .page-sd .inner .task-list-box .task-list-inner .submit-btn {
display: flex; display: flex;
margin: 20px 0; margin: 20px 0;
@ -155,17 +172,17 @@
justify-content: right; justify-content: right;
align-items: center; align-items: center;
} }
.page-sd .inner .task-list-box .running-job-list .job-item { .page-sd .inner .task-list-box .task-list-inner .job-list-box .running-job-list .job-item {
width: 100%; width: 100%;
padding: 2px; padding: 2px;
background-color: #555; background-color: #555;
} }
.page-sd .inner .task-list-box .running-job-list .job-item .job-item-inner { .page-sd .inner .task-list-box .task-list-inner .job-list-box .running-job-list .job-item .job-item-inner {
position: relative; position: relative;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
.page-sd .inner .task-list-box .running-job-list .job-item .job-item-inner .progress { .page-sd .inner .task-list-box .task-list-inner .job-list-box .running-job-list .job-item .job-item-inner .progress {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -175,11 +192,11 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.page-sd .inner .task-list-box .running-job-list .job-item .job-item-inner .progress span { .page-sd .inner .task-list-box .task-list-inner .job-list-box .running-job-list .job-item .job-item-inner .progress span {
font-size: 20px; font-size: 20px;
color: #fff; color: #fff;
} }
.page-sd .inner .task-list-box .finish-job-list .job-item { .page-sd .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #666; border: 1px solid #666;
@ -189,17 +206,17 @@
transition: all 0.3s ease; /* 添加过渡效果 */ transition: all 0.3s ease; /* 添加过渡效果 */
position: relative; position: relative;
} }
.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line { .page-sd .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .opt .opt-line {
margin: 6px 0; margin: 6px 0;
} }
.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul { .page-sd .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .opt .opt-line ul {
display: flex; display: flex;
flex-flow: row; flex-flow: row;
} }
.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li { .page-sd .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .opt .opt-line ul li {
margin-right: 6px; margin-right: 6px;
} }
.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li a { .page-sd .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .opt .opt-line ul li a {
padding: 3px 0; padding: 3px 0;
width: 40px; width: 40px;
text-align: center; text-align: center;
@ -209,59 +226,58 @@
background-color: #4e5058; background-color: #4e5058;
color: #fff; color: #fff;
} }
.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li a:hover { .page-sd .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .opt .opt-line ul li a:hover {
background-color: #6d6f78; background-color: #6d6f78;
} }
.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul .show-prompt { .page-sd .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .opt .opt-line ul .show-prompt {
font-size: 20px; font-size: 20px;
cursor: pointer; cursor: pointer;
} }
.page-sd .inner .task-list-box .finish-job-list .job-item .remove { .page-sd .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item .remove {
display: none; display: none;
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 10px; top: 10px;
} }
.page-sd .inner .task-list-box .finish-job-list .job-item:hover .remove { .page-sd .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .job-item:hover .remove {
display: block; display: block;
} }
.page-sd .inner .task-list-box .finish-job-list .animate:hover { .page-sd .inner .task-list-box .task-list-inner .job-list-box .finish-job-list .animate:hover {
box-shadow: 0 0 10px rgba(71,255,241,0.6); /* 添加阴影效果 */ box-shadow: 0 0 10px rgba(71,255,241,0.6); /* 添加阴影效果 */
transform: translateY(-10px); /* 向上移动10像素 */ transform: translateY(-10px); /* 向上移动10像素 */
} }
.page-sd .inner .task-list-box .el-image { .page-sd .inner .task-list-box .task-list-inner .job-list-box .el-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: visible; overflow: visible;
} }
.page-sd .inner .task-list-box .el-image img { .page-sd .inner .task-list-box .task-list-inner .job-list-box .el-image img {
height: 240px; height: 240px;
} }
.page-sd .inner .task-list-box .el-image .el-image-viewer__wrapper img { .page-sd .inner .task-list-box .task-list-inner .job-list-box .el-image .el-image-viewer__wrapper img {
width: auto; width: auto;
height: auto; height: auto;
} }
.page-sd .inner .task-list-box .el-image .image-slot { .page-sd .inner .task-list-box .task-list-inner .job-list-box .el-image .image-slot {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%;
min-height: 200px; min-height: 200px;
color: #fff; color: #fff;
height: 240px; height: 240px;
} }
.page-sd .inner .task-list-box .el-image .image-slot .iconfont { .page-sd .inner .task-list-box .task-list-inner .job-list-box .el-image .image-slot .iconfont {
font-size: 50px; font-size: 50px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.page-sd .inner .task-list-box .el-image.upscale { .page-sd .inner .task-list-box .task-list-inner .job-list-box .el-image.upscale {
max-height: 310px; max-height: 310px;
} }
.page-sd .inner .task-list-box .el-image.upscale img { .page-sd .inner .task-list-box .task-list-inner .job-list-box .el-image.upscale img {
height: 310px; height: 310px;
} }
.page-sd .inner .task-list-box .el-image.upscale .el-image-viewer__wrapper img { .page-sd .inner .task-list-box .task-list-inner .job-list-box .el-image.upscale .el-image-viewer__wrapper img {
width: auto; width: auto;
height: auto; height: auto;
} }

39
web/src/assets/css/task-list.styl
View File

@ -61,6 +61,11 @@
color #ffffff color #ffffff
} }
// 图片上传样式
.img-inline {
display flex
.img-uploader { .img-uploader {
.el-upload { .el-upload {
border: 1px dashed var(--el-border-color); border: 1px dashed var(--el-border-color);
@ -68,7 +73,7 @@
cursor: pointer; cursor: pointer;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
width 300px; width 120px;
transition: var(--el-transition-duration-fast); transition: var(--el-transition-duration-fast);
margin-bottom: 20px; margin-bottom: 20px;
@ -86,13 +91,32 @@
} }
} }
.img-inline { .img-list-box {
display flex display flex
.img-uploader { .img-item {
width 120px
position relative
margin-right 10px margin-right 10px
.el-image {
width 120px
height 120px
border-radius 5px
}
.el-button {
position absolute
right 5px
top 5px
width 20px
height 20px
} }
} }
}
}
// 提交按钮
.submit-btn { .submit-btn {
display flex display flex
@ -109,8 +133,11 @@
align-items center align-items center
} }
} }
}
// 任务列表
.job-list-box {
.running-job-list { .running-job-list {
.job-item { .job-item {
//border: 1px solid #454545; //border: 1px solid #454545;
@ -213,6 +240,7 @@
} }
.el-image { .el-image {
width 100% width 100%
height 100% height 100%
@ -234,7 +262,6 @@
flex-flow column flex-flow column
justify-content center justify-content center
align-items center align-items center
height 100%
min-height 200px min-height 200px
color #ffffff color #ffffff
height 240px height 240px
@ -261,3 +288,5 @@
} }
} }
} }
}
}

103
web/src/views/ImageMj.vue
View File

@ -165,7 +165,7 @@
</div> </div>
<div class="task-list-box"> <div class="task-list-box">
<div class="task-list-inner" :style="{ height: listBoxHeight + 'px' }"> <div class="task-list-inner" :style="{ height: listBoxHeight + 'px' }">
<h2>AI绘画</h2> <div class="extra-params">
<el-form> <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="image"> <el-tab-pane label="文生图(可选)" name="image">
@ -193,14 +193,22 @@
</div> </div>
<div class="param-line"> <div class="param-line">
<div class="img-inline">
<div class="img-list-box">
<div class="img-item" v-for="imgURL in imgList">
<el-image :src="imgURL" fit="cover"/>
<el-button type="danger" :icon="Delete" @click="removeUploadImage(imgURL)" circle/>
</div>
</div>
<el-upload class="img-uploader" :auto-upload="true" :show-file-list="false" <el-upload class="img-uploader" :auto-upload="true" :show-file-list="false"
:http-request="uploadImg" style="--el-color-primary:#47fff1"> :http-request="uploadImg" style="--el-color-primary:#47fff1">
<el-image v-if="params.img !== ''" :src="params.img" fit="cover"/> <el-icon class="uploader-icon">
<el-icon v-else class="uploader-icon">
<Plus/> <Plus/>
</el-icon> </el-icon>
</el-upload> </el-upload>
</div> </div>
</div>
<div class="param-line" style="padding-top: 10px"> <div class="param-line" style="padding-top: 10px">
<el-form-item label="图像权重:"> <el-form-item label="图像权重:">
@ -291,20 +299,18 @@
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="融图(可选)" name="blend"> <el-tab-pane label="融图(可选)" name="blend">
<div class="text">请上传两张以上的图片</div> <div class="text">请上传两张以上的图片，最多不超过五张，超过五张图片请使用文生图功能</div>
<div class="img-inline"> <div class="img-inline">
<div class="img-list-box">
<div class="img-item" v-for="imgURL in imgList">
<el-image :src="imgURL" fit="cover"/>
<el-button type="danger" :icon="Delete" @click="removeUploadImage(imgURL)" circle/>
</div>
</div>
<el-upload class="img-uploader" :auto-upload="true" :show-file-list="false" <el-upload class="img-uploader" :auto-upload="true" :show-file-list="false"
:http-request="uploadImg" style="--el-color-primary:#47fff1"> :http-request="uploadImg" style="--el-color-primary:#47fff1">
<el-image v-if="params.img !== ''" :src="params.img" fit="cover"/> <el-icon class="uploader-icon">
<el-icon v-else class="uploader-icon">
<Plus/>
</el-icon>
</el-upload>
<el-upload class="img-uploader" :auto-upload="true" :show-file-list="false"
:http-request="uploadImg2" style="--el-color-primary:#47fff1">
<el-image v-if="params.img2 !== ''" :src="params.img2" fit="cover"/>
<el-icon v-else class="uploader-icon">
<Plus/> <Plus/>
</el-icon> </el-icon>
</el-upload> </el-upload>
@ -314,18 +320,16 @@
<el-tab-pane label="换脸(可选)" name="swapFace"> <el-tab-pane label="换脸(可选)" name="swapFace">
<div class="text">请上传两张有脸部的图片，用右边图片的脸替换左边图片的脸</div> <div class="text">请上传两张有脸部的图片，用右边图片的脸替换左边图片的脸</div>
<div class="img-inline"> <div class="img-inline">
<div class="img-list-box">
<div class="img-item" v-for="imgURL in imgList">
<el-image :src="imgURL" fit="cover"/>
<el-button type="danger" :icon="Delete" @click="removeUploadImage(imgURL)" circle/>
</div>
</div>
<el-upload class="img-uploader" :auto-upload="true" :show-file-list="false" <el-upload class="img-uploader" :auto-upload="true" :show-file-list="false"
:http-request="uploadImg" style="--el-color-primary:#47fff1"> :http-request="uploadImg" style="--el-color-primary:#47fff1">
<el-image v-if="params.img !== ''" :src="params.img" fit="cover"/> <el-icon class="uploader-icon">
<el-icon v-else class="uploader-icon">
<Plus/>
</el-icon>
</el-upload>
<el-upload class="img-uploader" :auto-upload="true" :show-file-list="false"
:http-request="uploadImg2" style="--el-color-primary:#47fff1">
<el-image v-if="params.img2 !== ''" :src="params.img2" fit="cover"/>
<el-icon v-else class="uploader-icon">
<Plus/> <Plus/>
</el-icon> </el-icon>
</el-upload> </el-upload>
@ -340,7 +344,9 @@
</div> </div>
</div> </div>
</el-form> </el-form>
</div>
<div class="job-list-box">
<h2>任务列表</h2> <h2>任务列表</h2>
<div class="running-job-list"> <div class="running-job-list">
<ItemList :items="runningJobs" v-if="runningJobs.length > 0"> <ItemList :items="runningJobs" v-if="runningJobs.length > 0">
@ -455,7 +461,8 @@
<div class="remove"> <div class="remove">
<el-button type="danger" :icon="Delete" @click="removeImage(scope.item)" circle/> <el-button type="danger" :icon="Delete" @click="removeImage(scope.item)" circle/>
<el-button type="warning" v-if="scope.item.publish" @click="publishImage(scope.item, false)" circle> <el-button type="warning" v-if="scope.item.publish" @click="publishImage(scope.item, false)"
circle>
<i class="iconfont icon-cancel-share"></i> <i class="iconfont icon-cancel-share"></i>
</el-button> </el-button>
<el-button type="success" v-else @click="publishImage(scope.item, true)" circle> <el-button type="success" v-else @click="publishImage(scope.item, true)" circle>
@ -469,6 +476,7 @@
<el-empty :image-size="100" v-else/> <el-empty :image-size="100" v-else/>
</div> <!-- end finish job list--> </div> <!-- end finish job list-->
</div> </div>
</div>
</div><!-- end task list box --> </div><!-- end task list box -->
</div> </div>
@ -496,6 +504,7 @@ import Clipboard from "clipboard";
import {checkSession} from "@/action/session"; import {checkSession} from "@/action/session";
import {useRouter} from "vue-router"; import {useRouter} from "vue-router";
import {getSessionId} from "@/store/session"; import {getSessionId} from "@/store/session";
import {removeArrayItem} from "@/utils/libs";
const listBoxHeight = ref(window.innerHeight - 40) const listBoxHeight = ref(window.innerHeight - 40)
const mjBoxHeight = ref(window.innerHeight - 150) const mjBoxHeight = ref(window.innerHeight - 150)
@ -553,10 +562,8 @@ const params = ref({
chaos: 0, chaos: 0,
stylize: 100, stylize: 100,
seed: 0, seed: 0,
raw: false,
img: "",
img2: "",
img_arr: [], img_arr: [],
raw: false,
weight: 0.25, weight: 0.25,
prompt: "", prompt: "",
neg_prompt: "", neg_prompt: "",
@ -564,6 +571,8 @@ const params = ref({
quality: 0 quality: 0
}) })
const imgList = ref([])
const activeName = ref('image') const activeName = ref('image')
const runningJobs = ref([]) const runningJobs = ref([])
@ -735,27 +744,7 @@ const uploadImg = (file) => {
formData.append('file', result, result.name); formData.append('file', result, result.name);
// 执行上传操作 // 执行上传操作
httpPost('/api/upload', formData).then((res) => { httpPost('/api/upload', formData).then((res) => {
params.value.img = res.data.url imgList.value.push(res.data.url)
ElMessage.success('上传成功')
}).catch((e) => {
ElMessage.error('上传失败:' + e.message)
})
},
error(err) {
console.log(err.message);
},
});
};
const uploadImg2 = (file) => {
// 压缩图片并上传
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.img2 = res.data.url
ElMessage.success('上传成功') ElMessage.success('上传成功')
}).catch((e) => { }).catch((e) => {
ElMessage.error('上传失败:' + e.message) ElMessage.error('上传失败:' + e.message)
@ -766,6 +755,7 @@ const uploadImg2 = (file) => {
}, },
}); });
}; };
// 创建绘图任务 // 创建绘图任务
const promptRef = ref(null) const promptRef = ref(null)
const generate = () => { const generate = () => {
@ -776,13 +766,11 @@ const generate = () => {
if (params.value.model.indexOf("niji") !== -1 && params.value.raw) { if (params.value.model.indexOf("niji") !== -1 && params.value.raw) {
return ElMessage.error("动漫模型不允许启用原始模式") return ElMessage.error("动漫模型不允许启用原始模式")
} }
if (imgList.value.length !== 2 && params.value.task_type === "swapFace") {
return ElMessage.error("换脸操作需要上传两张图片")
}
params.value.session_id = getSessionId() params.value.session_id = getSessionId()
if (params.value.img !== "") { params.value.img_arr = imgList.value
params.value.img_arr.push(params.value.img)
}
if (params.value.img2 !== "") {
params.value.img_arr.push(params.value.img2)
}
httpPost("/api/mj/image", params.value).then(() => { httpPost("/api/mj/image", params.value).then(() => {
ElMessage.success("绘画任务推送成功，请耐心等待任务执行...") ElMessage.success("绘画任务推送成功，请耐心等待任务执行...")
imgCalls.value -= 1 imgCalls.value -= 1
@ -855,6 +843,11 @@ const tabChange = (tab) => {
params.value.task_type = tab params.value.task_type = tab
} }
// 删除已上传图片
const removeUploadImage = (url) => {
imgList.value = removeArrayItem(imgList.value, url)
}
</script> </script>
<style lang="stylus"> <style lang="stylus">