diff --git a/api/core/types/task.go b/api/core/types/task.go
index 36142736..cd4b516e 100644
--- a/api/core/types/task.go
+++ b/api/core/types/task.go
@@ -25,6 +25,7 @@ type MjTask struct {
 	Type        TaskType `json:"type"`
 	UserId      int      `json:"user_id"`
 	Prompt      string   `json:"prompt,omitempty"`
+	NegPrompt   string   `json:"neg_prompt,omitempty"`
 	Params      string   `json:"full_prompt"`
 	Index       int      `json:"index,omitempty"`
 	MessageId   string   `json:"message_id,omitempty"`
@@ -42,19 +43,19 @@ type SdTask struct {
 }
 
 type SdTaskParams struct {
-	TaskId         string  `json:"task_id"`
-	Prompt         string  `json:"prompt"`          // 提示词
-	NegativePrompt string  `json:"negative_prompt"` // 反向提示词
-	Steps          int     `json:"steps"`           // 迭代步数，默认20
-	Sampler        string  `json:"sampler"`         // 采样器
-	FaceFix        bool    `json:"face_fix"`        // 面部修复
-	CfgScale       float32 `json:"cfg_scale"`       //引导系数，默认 7
-	Seed           int64   `json:"seed"`            // 随机数种子
-	Height         int     `json:"height"`
-	Width          int     `json:"width"`
-	HdFix          bool    `json:"hd_fix"`         // 启用高清修复
-	HdRedrawRate   float32 `json:"hd_redraw_rate"` // 高清修复重绘幅度
-	HdScale        int     `json:"hd_scale"`       // 放大倍数
-	HdScaleAlg     string  `json:"hd_scale_alg"`   // 放大算法
-	HdSteps        int     `json:"hd_steps"`       // 高清修复迭代步数
+	TaskId       string  `json:"task_id"`
+	Prompt       string  `json:"prompt"`     // 提示词
+	NegPrompt    string  `json:"neg_prompt"` // 反向提示词
+	Steps        int     `json:"steps"`      // 迭代步数，默认20
+	Sampler      string  `json:"sampler"`    // 采样器
+	FaceFix      bool    `json:"face_fix"`   // 面部修复
+	CfgScale     float32 `json:"cfg_scale"`  //引导系数，默认 7
+	Seed         int64   `json:"seed"`       // 随机数种子
+	Height       int     `json:"height"`
+	Width        int     `json:"width"`
+	HdFix        bool    `json:"hd_fix"`         // 启用高清修复
+	HdRedrawRate float32 `json:"hd_redraw_rate"` // 高清修复重绘幅度
+	HdScale      int     `json:"hd_scale"`       // 放大倍数
+	HdScaleAlg   string  `json:"hd_scale_alg"`   // 放大算法
+	HdSteps      int     `json:"hd_steps"`       // 高清修复迭代步数
 }
diff --git a/api/handler/mj_handler.go b/api/handler/mj_handler.go
index 5ca0bcb5..7988a380 100644
--- a/api/handler/mj_handler.go
+++ b/api/handler/mj_handler.go
@@ -133,9 +133,6 @@ func (h *MidJourneyHandler) Image(c *gin.Context) {
 	if data.Quality > 0 {
 		params += fmt.Sprintf(" --q %.2f", data.Quality)
 	}
-	if data.NegPrompt != "" {
-		params += fmt.Sprintf(" --no %s", data.NegPrompt)
-	}
 	if data.Tile {
 		params += " --tile "
 	}
@@ -204,6 +201,7 @@ func (h *MidJourneyHandler) Image(c *gin.Context) {
 		SessionId: data.SessionId,
 		Type:      types.TaskType(data.TaskType),
 		Prompt:    data.Prompt,
+		NegPrompt: data.NegPrompt,
 		Params:    params,
 		UserId:    userId,
 		ImgArr:    data.ImgArr,
diff --git a/api/handler/payment_handler.go b/api/handler/payment_handler.go
index 3f888c83..2b8f5dce 100644
--- a/api/handler/payment_handler.go
+++ b/api/handler/payment_handler.go
@@ -424,27 +424,21 @@ func (h *PaymentHandler) notify(orderNo string, tradeNo string) error {
 
 	var opt string
 	var power int
-	if user.Vip { // 已经是 VIP 用户
-		if remark.Days > 0 { // 只延期 VIP，不增加调用次数
+	if remark.Days > 0 { // VIP 充值
+		if user.ExpiredTime >= time.Now().Unix() {
 			user.ExpiredTime = time.Unix(user.ExpiredTime, 0).AddDate(0, 0, remark.Days).Unix()
-		} else { // 充值点卡，直接增加次数即可
-			user.Power += remark.Power
-			opt = "点卡充值"
-			power = remark.Power
-		}
-
-	} else {                 // 非 VIP 用户
-		if remark.Days > 0 { // vip 套餐：days > 0, power == 0
+			opt = "VIP充值，VIP 没到期，只延期不增加算力"
+		} else {
 			user.ExpiredTime = time.Now().AddDate(0, 0, remark.Days).Unix()
 			user.Power += h.App.SysConfig.VipMonthPower
-			user.Vip = true
-			opt = "VIP充值"
 			power = h.App.SysConfig.VipMonthPower
-		} else { //点卡：days == 0, calls > 0
-			user.Power += remark.Power
-			opt = "点卡充值"
-			power = remark.Power
+			opt = "VIP充值"
 		}
+		user.Vip = true
+	} else { // 充值点卡，直接增加次数即可
+		user.Power += remark.Power
+		opt = "点卡充值"
+		power = remark.Power
 	}
 
 	// 更新用户信息
diff --git a/api/handler/sd_handler.go b/api/handler/sd_handler.go
index ca1e9650..b9c3625e 100644
--- a/api/handler/sd_handler.go
+++ b/api/handler/sd_handler.go
@@ -127,21 +127,21 @@ func (h *SdJobHandler) Image(c *gin.Context) {
 		return
 	}
 	params := types.SdTaskParams{
-		TaskId:         taskId,
-		Prompt:         data.Prompt,
-		NegativePrompt: data.NegativePrompt,
-		Steps:          data.Steps,
-		Sampler:        data.Sampler,
-		FaceFix:        data.FaceFix,
-		CfgScale:       data.CfgScale,
-		Seed:           data.Seed,
-		Height:         data.Height,
-		Width:          data.Width,
-		HdFix:          data.HdFix,
-		HdRedrawRate:   data.HdRedrawRate,
-		HdScale:        data.HdScale,
-		HdScaleAlg:     data.HdScaleAlg,
-		HdSteps:        data.HdSteps,
+		TaskId:       taskId,
+		Prompt:       data.Prompt,
+		NegPrompt:    data.NegPrompt,
+		Steps:        data.Steps,
+		Sampler:      data.Sampler,
+		FaceFix:      data.FaceFix,
+		CfgScale:     data.CfgScale,
+		Seed:         data.Seed,
+		Height:       data.Height,
+		Width:        data.Width,
+		HdFix:        data.HdFix,
+		HdRedrawRate: data.HdRedrawRate,
+		HdScale:      data.HdScale,
+		HdScaleAlg:   data.HdScaleAlg,
+		HdSteps:      data.HdSteps,
 	}
 
 	job := model.SdJob{
diff --git a/api/service/mj/plus_client.go b/api/service/mj/plus_client.go
index 31029a22..89bca627 100644
--- a/api/service/mj/plus_client.go
+++ b/api/service/mj/plus_client.go
@@ -8,6 +8,7 @@ import (
 	"fmt"
 	"github.com/imroc/req/v3"
 	"io"
+	"time"
 
 	"github.com/gin-gonic/gin"
 )
@@ -16,17 +17,26 @@ import (
 type PlusClient struct {
 	Config types.MjPlusConfig
 	apiURL string
+	client *req.Client
 }
 
 func NewPlusClient(config types.MjPlusConfig) *PlusClient {
-	return &PlusClient{Config: config, apiURL: config.ApiURL}
+	return &PlusClient{
+		Config: config,
+		apiURL: config.ApiURL,
+		client: req.C().SetTimeout(time.Minute).SetUserAgent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36"),
+	}
 }
 
 func (c *PlusClient) Imagine(task types.MjTask) (ImageRes, error) {
 	apiURL := fmt.Sprintf("%s/mj-%s/mj/submit/imagine", c.apiURL, c.Config.Mode)
+	prompt := fmt.Sprintf("%s %s", task.Prompt, task.Params)
+	if task.NegPrompt != "" {
+		prompt += fmt.Sprintf(" --no %s", task.NegPrompt)
+	}
 	body := ImageReq{
 		BotType:     "MID_JOURNEY",
-		Prompt:      fmt.Sprintf("%s %s", task.Prompt, task.Params),
+		Prompt:      prompt,
 		Base64Array: make([]string, 0),
 	}
 	// 生成图片 Base64 编码
@@ -42,7 +52,7 @@ func (c *PlusClient) Imagine(task types.MjTask) (ImageRes, error) {
 	logger.Info("API URL: ", apiURL)
 	var res ImageRes
 	var errRes ErrRes
-	r, err := req.C().R().
+	r, err := c.client.R().
 		SetHeader("Authorization", "Bearer "+c.Config.ApiKey).
 		SetBody(body).
 		SetSuccessResult(&res).
@@ -81,7 +91,7 @@ func (c *PlusClient) Blend(task types.MjTask) (ImageRes, error) {
 	}
 	var res ImageRes
 	var errRes ErrRes
-	r, err := req.C().R().
+	r, err := c.client.R().
 		SetHeader("Authorization", "Bearer "+c.Config.ApiKey).
 		SetBody(body).
 		SetSuccessResult(&res).
@@ -130,7 +140,7 @@ func (c *PlusClient) SwapFace(task types.MjTask) (ImageRes, error) {
 	}
 	var res ImageRes
 	var errRes ErrRes
-	r, err := req.C().R().
+	r, err := c.client.SetTimeout(time.Minute).R().
 		SetHeader("Authorization", "Bearer "+c.Config.ApiKey).
 		SetBody(body).
 		SetSuccessResult(&res).
@@ -156,7 +166,7 @@ func (c *PlusClient) Upscale(task types.MjTask) (ImageRes, error) {
 	apiURL := fmt.Sprintf("%s/mj/submit/action", c.apiURL)
 	var res ImageRes
 	var errRes ErrRes
-	r, err := req.C().R().
+	r, err := c.client.R().
 		SetHeader("Authorization", "Bearer "+c.Config.ApiKey).
 		SetBody(body).
 		SetSuccessResult(&res).
@@ -202,7 +212,7 @@ func (c *PlusClient) Variation(task types.MjTask) (ImageRes, error) {
 func (c *PlusClient) QueryTask(taskId string) (QueryRes, error) {
 	apiURL := fmt.Sprintf("%s/mj/task/%s/fetch", c.apiURL, taskId)
 	var res QueryRes
-	r, err := req.C().R().SetHeader("Authorization", "Bearer "+c.Config.ApiKey).
+	r, err := c.client.R().SetHeader("Authorization", "Bearer "+c.Config.ApiKey).
 		SetSuccessResult(&res).
 		Get(apiURL)
 
diff --git a/api/service/mj/proxy_client.go b/api/service/mj/proxy_client.go
index 41bb31d1..b8df3211 100644
--- a/api/service/mj/proxy_client.go
+++ b/api/service/mj/proxy_client.go
@@ -22,8 +22,12 @@ func NewProxyClient(config types.MjProxyConfig) *ProxyClient {
 
 func (c *ProxyClient) Imagine(task types.MjTask) (ImageRes, error) {
 	apiURL := fmt.Sprintf("%s/mj/submit/imagine", c.apiURL)
+	prompt := fmt.Sprintf("%s %s", task.Prompt, task.Params)
+	if task.NegPrompt != "" {
+		prompt += fmt.Sprintf(" --no %s", task.NegPrompt)
+	}
 	body := ImageReq{
-		Prompt:      fmt.Sprintf("%s %s", task.Prompt, task.Params),
+		Prompt:      prompt,
 		Base64Array: make([]string, 0),
 	}
 	// 生成图片 Base64 编码
diff --git a/api/service/mj/service.go b/api/service/mj/service.go
index 17ffe454..3c870a17 100644
--- a/api/service/mj/service.go
+++ b/api/service/mj/service.go
@@ -67,7 +67,7 @@ func (s *Service) Run() {
 			continue
 		}
 
-		// 如果是 mj-proxy 则自动翻译提示词
+		// translate prompt
 		if utils.HasChinese(task.Prompt) {
 			content, err := utils.OpenAIRequest(s.db, fmt.Sprintf(service.TranslatePromptTemplate, task.Prompt))
 			if err == nil {
@@ -76,6 +76,15 @@ func (s *Service) Run() {
 				logger.Warnf("error with translate prompt: %v", err)
 			}
 		}
+		// translate negative prompt
+		if task.NegPrompt != "" && utils.HasChinese(task.NegPrompt) {
+			content, err := utils.OpenAIRequest(s.db, fmt.Sprintf(service.TranslatePromptTemplate, task.NegPrompt))
+			if err == nil {
+				task.NegPrompt = content
+			} else {
+				logger.Warnf("error with translate prompt: %v", err)
+			}
+		}
 
 		var job model.MidJourneyJob
 		tx := s.db.Where("id = ?", task.Id).First(&job)
diff --git a/api/service/sd/service.go b/api/service/sd/service.go
index b2baccca..4f68f3e0 100644
--- a/api/service/sd/service.go
+++ b/api/service/sd/service.go
@@ -49,11 +49,24 @@ func (s *Service) Run() {
 			logger.Errorf("taking task with error: %v", err)
 			continue
 		}
-		// 翻译提示词
+
+		// translate prompt
 		if utils.HasChinese(task.Params.Prompt) {
 			content, err := utils.OpenAIRequest(s.db, fmt.Sprintf(service.RewritePromptTemplate, task.Params.Prompt))
 			if err == nil {
 				task.Params.Prompt = content
+			} else {
+				logger.Warnf("error with translate prompt: %v", err)
+			}
+		}
+
+		// translate negative prompt
+		if task.Params.NegPrompt != "" && utils.HasChinese(task.Params.NegPrompt) {
+			content, err := utils.OpenAIRequest(s.db, fmt.Sprintf(service.TranslatePromptTemplate, task.Params.NegPrompt))
+			if err == nil {
+				task.Params.NegPrompt = content
+			} else {
+				logger.Warnf("error with translate prompt: %v", err)
 			}
 		}
 
@@ -110,7 +123,7 @@ type TaskProgressResp struct {
 func (s *Service) Txt2Img(task types.SdTask) error {
 	body := Txt2ImgReq{
 		Prompt:         task.Params.Prompt,
-		NegativePrompt: task.Params.NegativePrompt,
+		NegativePrompt: task.Params.NegPrompt,
 		Steps:          task.Params.Steps,
 		CfgScale:       task.Params.CfgScale,
 		Width:          task.Params.Width,
diff --git a/web/src/assets/css/mobile/image-mj.css b/web/src/assets/css/mobile/image-mj.css
index 839ba770..15db23df 100644
--- a/web/src/assets/css/mobile/image-mj.css
+++ b/web/src/assets/css/mobile/image-mj.css
@@ -1,8 +1,8 @@
-.mobile-mj .content .text-line {
+.mobile-mj .text-line {
   padding: 6px;
   font-size: 14px;
 }
-.mobile-mj .content .text-line .van-row .van-col .rate {
+.mobile-mj .text-line .van-row .van-col .rate {
   display: flex;
   justify-content: center;
   background-color: #f5f5f5;
@@ -11,17 +11,17 @@
   border-radius: 5px;
   flex-flow: column;
 }
-.mobile-mj .content .text-line .van-row .van-col .rate .icon {
+.mobile-mj .text-line .van-row .van-col .rate .icon {
   text-align: center;
 }
-.mobile-mj .content .text-line .van-row .van-col .rate .icon .van-image {
+.mobile-mj .text-line .van-row .van-col .rate .icon .van-image {
   max-width: 20px;
 }
-.mobile-mj .content .text-line .van-row .van-col .rate .text {
+.mobile-mj .text-line .van-row .van-col .rate .text {
   text-align: center;
   color: #555;
 }
-.mobile-mj .content .text-line .van-row .van-col .model {
+.mobile-mj .text-line .van-row .van-col .model {
   display: flex;
   justify-content: center;
   background-color: #f5f5f5;
@@ -30,45 +30,45 @@
   border-radius: 5px;
   flex-flow: column;
 }
-.mobile-mj .content .text-line .van-row .van-col .model .icon {
+.mobile-mj .text-line .van-row .van-col .model .icon {
   text-align: center;
 }
-.mobile-mj .content .text-line .van-row .van-col .model .icon .van-image {
+.mobile-mj .text-line .van-row .van-col .model .icon .van-image {
   width: 100%;
   height: 50px;
 }
-.mobile-mj .content .text-line .van-row .van-col .model .text {
+.mobile-mj .text-line .van-row .van-col .model .text {
   text-align: center;
   color: #555;
 }
-.mobile-mj .content .text-line .van-row .van-col .active {
+.mobile-mj .text-line .van-row .van-col .active {
   background-color: #e5e5e5;
 }
-.mobile-mj .content .text-line .van-button {
+.mobile-mj .text-line .van-button {
   position: relative;
 }
-.mobile-mj .content .text-line .van-button .van-tag {
+.mobile-mj .text-line .van-button .van-tag {
   position: absolute;
   right: 20px;
 }
-.mobile-mj .content .text-line .align-right {
+.mobile-mj .text-line .align-right {
   display: flex;
   justify-content: right;
 }
-.mobile-mj .content .tip-text {
+.mobile-mj .tip-text {
   padding: 10px;
   line-height: 1.5;
   color: #c1c1c1;
 }
-.mobile-mj .content .running-job-list .van-grid .van-grid-item .van-grid-item__content {
+.mobile-mj .running-job-list .van-grid .van-grid-item .van-grid-item__content {
   padding: 0;
   position: relative;
 }
-.mobile-mj .content .running-job-list .van-grid .van-grid-item .van-grid-item__content .van-image,
-.mobile-mj .content .running-job-list .van-grid .van-grid-item .van-grid-item__content .task-in-queue {
+.mobile-mj .running-job-list .van-grid .van-grid-item .van-grid-item__content .van-image,
+.mobile-mj .running-job-list .van-grid .van-grid-item .van-grid-item__content .task-in-queue {
   min-height: 100px;
 }
-.mobile-mj .content .running-job-list .van-grid .van-grid-item .van-grid-item__content .progress {
+.mobile-mj .running-job-list .van-grid .van-grid-item .van-grid-item__content .progress {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -79,36 +79,36 @@
   left: 0;
   top: 0;
 }
-.mobile-mj .content .running-job-list .van-grid .van-grid-item .van-grid-item__content .progress .van-circle__text {
+.mobile-mj .running-job-list .van-grid .van-grid-item .van-grid-item__content .progress .van-circle__text {
   color: #fff;
 }
-.mobile-mj .content .running-job-list .van-grid .van-grid-item .van-grid-item__content .task-in-queue {
+.mobile-mj .running-job-list .van-grid .van-grid-item .van-grid-item__content .task-in-queue {
   display: flex;
   flex-flow: column;
   justify-content: center;
   color: #c1c1c1;
 }
-.mobile-mj .content .running-job-list .van-grid .van-grid-item .van-grid-item__content .task-in-queue .icon {
+.mobile-mj .running-job-list .van-grid .van-grid-item .van-grid-item__content .task-in-queue .icon {
   text-align: center;
 }
-.mobile-mj .content .running-job-list .van-grid .van-grid-item .van-grid-item__content .task-in-queue .icon .iconfont {
+.mobile-mj .running-job-list .van-grid .van-grid-item .van-grid-item__content .task-in-queue .icon .iconfont {
   font-size: 24px;
 }
-.mobile-mj .content .running-job-list .van-grid .van-grid-item .van-grid-item__content .task-in-queue .text {
+.mobile-mj .running-job-list .van-grid .van-grid-item .van-grid-item__content .task-in-queue .text {
   font-size: 14px;
   margin-top: 5px;
 }
-.mobile-mj .content .finish-job-list .van-grid .van-grid-item .van-grid-item__content {
+.mobile-mj .finish-job-list .van-grid .van-grid-item .van-grid-item__content {
   padding: 0;
 }
-.mobile-mj .content .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item {
+.mobile-mj .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item {
   overflow: hidden;
   border-radius: 6px;
   position: relative;
   height: 100%;
   width: 100%;
 }
-.mobile-mj .content .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .opt .opt-btn {
+.mobile-mj .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .opt .opt-btn {
   padding: 2px 0;
   text-align: center;
   border-radius: 5px;
@@ -120,20 +120,20 @@
   font-size: 14px;
   width: 100%;
 }
-.mobile-mj .content .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .van-image {
+.mobile-mj .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .van-image {
   width: 100%;
   height: 200px;
 }
-.mobile-mj .content .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .upscale {
+.mobile-mj .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .upscale {
   height: 260px;
   width: 100%;
 }
-.mobile-mj .content .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .remove {
+.mobile-mj .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .remove {
   position: absolute;
   right: 5px;
   top: 5px;
 }
-.mobile-mj .content .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .remove .el-button {
+.mobile-mj .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .remove .el-button {
   margin-left: 5px;
   height: auto;
   padding: 5px;
diff --git a/web/src/assets/css/mobile/image-mj.styl b/web/src/assets/css/mobile/image-mj.styl
index acdbd38f..76022f0f 100644
--- a/web/src/assets/css/mobile/image-mj.styl
+++ b/web/src/assets/css/mobile/image-mj.styl
@@ -1,194 +1,192 @@
 .mobile-mj {
-  .content {
-    .text-line {
-      padding 6px
-      font-size 14px
+  .text-line {
+    padding 6px
+    font-size 14px
 
-      .van-row {
-        .van-col {
-          .rate {
-            display: flex;
+    .van-row {
+      .van-col {
+        .rate {
+          display: flex;
+          justify-content center
+          background-color #f5f5f5
+          padding 5px 10px
+          margin 5px 0
+          border-radius 5px
+          flex-flow column
+
+          .icon {
+            text-align center
+
+            .van-image {
+              max-width 20px
+            }
+          }
+
+          .text {
+            text-align center
+            color #555555
+          }
+        }
+
+        .model {
+          display: flex;
+          justify-content center
+          background-color #f5f5f5
+          padding 6px
+          margin 5px 0
+          border-radius 5px
+          flex-flow column
+
+          .icon {
+            text-align center
+
+            .van-image {
+              width 100%
+              height 50px
+            }
+          }
+
+          .text {
+            text-align center
+            color #555555
+          }
+        }
+
+        .active {
+          background-color #e5e5e5
+        }
+      }
+    }
+
+    .van-button {
+      position relative
+
+      .van-tag {
+        position absolute
+        right 20px
+      }
+    }
+
+    .align-right {
+      display flex
+      justify-content right
+    }
+  }
+
+
+  .tip-text {
+    padding 10px
+    line-height 1.5
+    color #c1c1c1
+  }
+
+  .running-job-list {
+    .van-grid {
+      .van-grid-item {
+        .van-grid-item__content {
+          padding 0
+          position relative
+
+          .van-image, .task-in-queue {
+            min-height 100px
+          }
+
+          .progress {
+            display flex
             justify-content center
-            background-color #f5f5f5
-            padding 5px 10px
-            margin 5px 0
-            border-radius 5px
+            align-items center
+            width 100%
+            height 100%
+            background rgba(50, 50, 50, 0.5)
+            position absolute
+            left 0
+            top 0
+
+            .van-circle__text {
+              color #ffffff
+            }
+          }
+
+          // end progress
+
+          .task-in-queue {
+            display flex
             flex-flow column
+            justify-content center
+            color #c1c1c1
 
             .icon {
               text-align center
 
-              .van-image {
-                max-width 20px
+              .iconfont {
+                font-size 24px
               }
             }
 
             .text {
-              text-align center
-              color #555555
+              font-size 14px
+              margin-top 5px
             }
           }
-
-          .model {
-            display: flex;
-            justify-content center
-            background-color #f5f5f5
-            padding 6px
-            margin 5px 0
-            border-radius 5px
-            flex-flow column
-
-            .icon {
-              text-align center
-
-              .van-image {
-                width 100%
-                height 50px
-              }
-            }
-
-            .text {
-              text-align center
-              color #555555
-            }
-          }
-
-          .active {
-            background-color #e5e5e5
-          }
-        }
-      }
-
-      .van-button {
-        position relative
-
-        .van-tag {
-          position absolute
-          right 20px
-        }
-      }
-
-      .align-right {
-        display flex
-        justify-content right
-      }
-    }
-
-
-    .tip-text {
-      padding 10px
-      line-height 1.5
-      color #c1c1c1
-    }
-
-    .running-job-list {
-      .van-grid {
-        .van-grid-item {
-          .van-grid-item__content {
-            padding 0
-            position relative
-
-            .van-image, .task-in-queue {
-              min-height 100px
-            }
-
-            .progress {
-              display flex
-              justify-content center
-              align-items center
-              width 100%
-              height 100%
-              background rgba(50, 50, 50, 0.5)
-              position absolute
-              left 0
-              top 0
-
-              .van-circle__text {
-                color #ffffff
-              }
-            }
-
-            // end progress
-
-            .task-in-queue {
-              display flex
-              flex-flow column
-              justify-content center
-              color #c1c1c1
-
-              .icon {
-                text-align center
-
-                .iconfont {
-                  font-size 24px
-                }
-              }
-
-              .text {
-                font-size 14px
-                margin-top 5px
-              }
-            }
-          }
-        }
-      }
-    }
-
-    //end running jobs
-
-    .finish-job-list {
-      .van-grid {
-        .van-grid-item {
-          .van-grid-item__content {
-            padding 0
-
-            .job-item {
-              overflow hidden
-              border-radius 6px
-              position relative
-              height 100%
-              width 100%
-
-              .opt {
-                .opt-btn {
-                  padding 2px 0
-                  text-align center
-                  border-radius 5px
-                  margin 3px 0
-                  display block
-                  cursor pointer
-                  background-color #4E5058
-                  color #ffffff
-                  font-size 14px
-                  width 100%
-                }
-              }
-
-              .van-image {
-                width 100%
-                height 200px
-              }
-
-              .upscale {
-                height 260px
-                width 100%
-              }
-
-              .remove {
-                position absolute
-                right 5px
-                top 5px
-
-                .el-button {
-                  margin-left 5px
-                  height auto
-                  padding 5px
-                }
-              }
-            }
-
-
-          }
+        }
+      }
+    }
+  }
+
+  //end running jobs
+
+  .finish-job-list {
+    .van-grid {
+      .van-grid-item {
+        .van-grid-item__content {
+          padding 0
+
+          .job-item {
+            overflow hidden
+            border-radius 6px
+            position relative
+            height 100%
+            width 100%
+
+            .opt {
+              .opt-btn {
+                padding 2px 0
+                text-align center
+                border-radius 5px
+                margin 3px 0
+                display block
+                cursor pointer
+                background-color #4E5058
+                color #ffffff
+                font-size 14px
+                width 100%
+              }
+            }
+
+            .van-image {
+              width 100%
+              height 200px
+            }
+
+            .upscale {
+              height 260px
+              width 100%
+            }
+
+            .remove {
+              position absolute
+              right 5px
+              top 5px
+
+              .el-button {
+                margin-left 5px
+                height auto
+                padding 5px
+              }
+            }
+          }
+
+
         }
       }
     }
diff --git a/web/src/assets/css/mobile/image-sd.css b/web/src/assets/css/mobile/image-sd.css
new file mode 100644
index 00000000..0189f1ac
--- /dev/null
+++ b/web/src/assets/css/mobile/image-sd.css
@@ -0,0 +1,133 @@
+.mobile-sd .text-line {
+  padding: 0 6px;
+  font-size: 14px;
+}
+.mobile-sd .text-line .van-row {
+  width: 100%;
+}
+.mobile-sd .text-line .van-row .van-col .rate {
+  display: flex;
+  justify-content: center;
+  background-color: #f5f5f5;
+  padding: 5px 10px;
+  margin: 5px 0;
+  border-radius: 5px;
+  flex-flow: column;
+}
+.mobile-sd .text-line .van-row .van-col .rate .icon {
+  text-align: center;
+}
+.mobile-sd .text-line .van-row .van-col .rate .icon .van-image {
+  max-width: 20px;
+}
+.mobile-sd .text-line .van-row .van-col .rate .text {
+  text-align: center;
+  color: #555;
+}
+.mobile-sd .text-line .van-row .van-col .el-input__inner {
+  text-align: center;
+}
+.mobile-sd .text-line .van-row .van-col .model {
+  display: flex;
+  justify-content: center;
+  background-color: #f5f5f5;
+  padding: 6px;
+  margin: 5px 0;
+  border-radius: 5px;
+  flex-flow: column;
+}
+.mobile-sd .text-line .van-row .van-col .model .icon {
+  text-align: center;
+}
+.mobile-sd .text-line .van-row .van-col .model .icon .van-image {
+  width: 100%;
+  height: 50px;
+}
+.mobile-sd .text-line .van-row .van-col .model .text {
+  text-align: center;
+  color: #555;
+}
+.mobile-sd .text-line .van-row .van-col .active {
+  background-color: #e5e5e5;
+}
+.mobile-sd .text-line .van-button {
+  position: relative;
+}
+.mobile-sd .text-line .van-button .van-tag {
+  position: absolute;
+  right: 20px;
+}
+.mobile-sd .text-line .align-right {
+  display: flex;
+  justify-content: right;
+}
+.mobile-sd .pt-6 {
+  padding: 10px;
+}
+.mobile-sd .tip-text {
+  padding: 10px;
+  line-height: 1.5;
+  color: #c1c1c1;
+}
+.mobile-sd .running-job-list .van-grid .van-grid-item .van-grid-item__content {
+  padding: 0;
+  position: relative;
+}
+.mobile-sd .running-job-list .van-grid .van-grid-item .van-grid-item__content .van-image,
+.mobile-sd .running-job-list .van-grid .van-grid-item .van-grid-item__content .task-in-queue {
+  min-height: 100px;
+}
+.mobile-sd .running-job-list .van-grid .van-grid-item .van-grid-item__content .progress {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: rgba(50,50,50,0.5);
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.mobile-sd .running-job-list .van-grid .van-grid-item .van-grid-item__content .progress .van-circle__text {
+  color: #fff;
+}
+.mobile-sd .running-job-list .van-grid .van-grid-item .van-grid-item__content .task-in-queue {
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  color: #c1c1c1;
+}
+.mobile-sd .running-job-list .van-grid .van-grid-item .van-grid-item__content .task-in-queue .icon {
+  text-align: center;
+}
+.mobile-sd .running-job-list .van-grid .van-grid-item .van-grid-item__content .task-in-queue .icon .iconfont {
+  font-size: 24px;
+}
+.mobile-sd .running-job-list .van-grid .van-grid-item .van-grid-item__content .task-in-queue .text {
+  font-size: 14px;
+  margin-top: 5px;
+}
+.mobile-sd .finish-job-list .van-grid .van-grid-item .van-grid-item__content {
+  padding: 0;
+}
+.mobile-sd .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item {
+  overflow: hidden;
+  border-radius: 6px;
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+.mobile-sd .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .van-image {
+  width: 100%;
+  height: 200px;
+}
+.mobile-sd .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .remove {
+  position: absolute;
+  right: 5px;
+  top: 5px;
+}
+.mobile-sd .finish-job-list .van-grid .van-grid-item .van-grid-item__content .job-item .remove .el-button {
+  margin-left: 5px;
+  height: auto;
+  padding: 5px;
+}
diff --git a/web/src/assets/css/mobile/image-sd.styl b/web/src/assets/css/mobile/image-sd.styl
new file mode 100644
index 00000000..d5c1a1b8
--- /dev/null
+++ b/web/src/assets/css/mobile/image-sd.styl
@@ -0,0 +1,184 @@
+.mobile-sd {
+  .text-line {
+    padding 0 6px
+    font-size 14px
+
+    .van-row {
+      width 100%
+
+      .van-col {
+        .rate {
+          display: flex;
+          justify-content center
+          background-color #f5f5f5
+          padding 5px 10px
+          margin 5px 0
+          border-radius 5px
+          flex-flow column
+
+          .icon {
+            text-align center
+
+            .van-image {
+              max-width 20px
+            }
+          }
+
+          .text {
+            text-align center
+            color #555555
+          }
+        }
+
+        .el-input__inner {
+          text-align center
+        }
+
+        .model {
+          display: flex;
+          justify-content center
+          background-color #f5f5f5
+          padding 6px
+          margin 5px 0
+          border-radius 5px
+          flex-flow column
+
+          .icon {
+            text-align center
+
+            .van-image {
+              width 100%
+              height 50px
+            }
+          }
+
+          .text {
+            text-align center
+            color #555555
+          }
+        }
+
+        .active {
+          background-color #e5e5e5
+        }
+      }
+    }
+
+    .van-button {
+      position relative
+
+      .van-tag {
+        position absolute
+        right 20px
+      }
+    }
+
+    .align-right {
+      display flex
+      justify-content right
+    }
+  }
+
+
+  .pt-6 {
+    padding 10px
+  }
+
+  .tip-text {
+    padding 10px
+    line-height 1.5
+    color #c1c1c1
+  }
+
+  .running-job-list {
+    .van-grid {
+      .van-grid-item {
+        .van-grid-item__content {
+          padding 0
+          position relative
+
+          .van-image, .task-in-queue {
+            min-height 100px
+          }
+
+          .progress {
+            display flex
+            justify-content center
+            align-items center
+            width 100%
+            height 100%
+            background rgba(50, 50, 50, 0.5)
+            position absolute
+            left 0
+            top 0
+
+            .van-circle__text {
+              color #ffffff
+            }
+          }
+
+          // end progress
+
+          .task-in-queue {
+            display flex
+            flex-flow column
+            justify-content center
+            color #c1c1c1
+
+            .icon {
+              text-align center
+
+              .iconfont {
+                font-size 24px
+              }
+            }
+
+            .text {
+              font-size 14px
+              margin-top 5px
+            }
+          }
+        }
+      }
+    }
+  }
+
+  //end running jobs
+
+  .finish-job-list {
+    .van-grid {
+      .van-grid-item {
+        .van-grid-item__content {
+          padding 0
+
+          .job-item {
+            overflow hidden
+            border-radius 6px
+            position relative
+            height 100%
+            width 100%
+
+            .van-image {
+              width 100%
+              height 200px
+            }
+
+            .remove {
+              position absolute
+              right 5px
+              top 5px
+
+              .el-button {
+                margin-left 5px
+                height auto
+                padding 5px
+              }
+            }
+          }
+
+
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/web/src/router.js b/web/src/router.js
index 968b0690..b17f6c51 100644
--- a/web/src/router.js
+++ b/web/src/router.js
@@ -181,7 +181,7 @@ const routes = [
     {
         name: 'mobile',
         path: '/mobile',
-        meta: {title: 'ChatPlus-智能助手V3'},
+        meta: {title: 'Geek-AI v4.0'},
         component: () => import('@/views/mobile/Home.vue'),
         redirect: '/mobile/chat',
         children: [
@@ -191,9 +191,9 @@ const routes = [
                 component: () => import('@/views/mobile/ChatList.vue'),
             },
             {
-                path: '/mobile/mj',
-                name: 'mobile-mj',
-                component: () => import('@/views/mobile/ImageMj.vue'),
+                path: '/mobile/image',
+                name: 'mobile-image',
+                component: () => import('@/views/mobile/Image.vue'),
             },
             {
                 path: '/mobile/profile',
diff --git a/web/src/views/ImageMj.vue b/web/src/views/ImageMj.vue
index 868268bb..a34d729d 100644
--- a/web/src/views/ImageMj.vue
+++ b/web/src/views/ImageMj.vue
@@ -309,7 +309,7 @@
                 </el-tab-pane>
 
                 <el-tab-pane label="换脸" name="swapFace">
-                  <div class="text">请上传两张有脸部的图片，用右边图片的脸替换左边图片的脸</div>
+                  <div class="text">请上传两张有脸部的图片，用左边图片的脸替换右边图片的脸</div>
                   <div class="img-inline">
                     <div class="img-list-box">
                       <div class="img-item" v-for="imgURL in imgList">
@@ -334,7 +334,7 @@
                     </el-badge>
                   </template>
 
-                  <div class="text">注意：只有于 niji6 和 v6 模型支持一致性功能，如果选择其他模型此功能将不起作用。</div>
+                  <div class="text">注意：只有于 niji6 和 v6 模型支持一致性功能，如果选择其他模型此功能将会生成失败。</div>
                   <div class="param-line">
                     <el-form-item label="角色一致性：" prop="cref">
                       <el-input v-model="params.cref" placeholder="请输入图片URL或者上传图片"
diff --git a/web/src/views/ImageSd.vue b/web/src/views/ImageSd.vue
index 7c3a23a9..990fa400 100644
--- a/web/src/views/ImageSd.vue
+++ b/web/src/views/ImageSd.vue
@@ -222,7 +222,7 @@
                 </div>
               </div>
 
-              <div class="param-line" v-loading="translating" element-loading-background="rgba(0, 0, 0, 0.5)">
+              <div class="param-line">
                 <el-input
                     v-model="params.prompt"
                     :autosize="{ minRows: 4, maxRows: 6 }"
@@ -246,7 +246,7 @@
               </div>
               <div class="param-line">
                 <el-input
-                    v-model="params.negative_prompt"
+                    v-model="params.neg_prompt"
                     :autosize="{ minRows: 4, maxRows: 6 }"
                     type="textarea"
                     placeholder="反向提示词"
@@ -389,8 +389,8 @@
                   反向提示词
                 </el-divider>
                 <div class="prompt">
-                  <span>{{ item.params.negative_prompt }}</span>
-                  <el-icon class="copy-prompt-sd" :data-clipboard-text="item.params.negative_prompt">
+                  <span>{{ item.params.neg_prompt }}</span>
+                  <el-icon class="copy-prompt-sd" :data-clipboard-text="item.params.neg_prompt">
                     <DocumentCopy/>
                   </el-icon>
                 </div>
@@ -496,7 +496,6 @@ const mjBoxHeight = ref(window.innerHeight - 150)
 const fullImgHeight = ref(window.innerHeight - 60)
 const showTaskDialog = ref(false)
 const item = ref({})
-const translating = ref(false)
 const showLoginDialog = ref(false)
 const isLogin = ref(false)
 
@@ -519,7 +518,7 @@ const params = ref({
   hd_scale_alg: scaleAlg[0],
   hd_steps: 0,
   prompt: "",
-  negative_prompt: "nsfw, paintings,low quality,easynegative,ng_deepnegative ,lowres,bad anatomy,bad hands,bad feet",
+  neg_prompt: "nsfw, paintings,low quality,easynegative,ng_deepnegative ,lowres,bad anatomy,bad hands,bad feet",
 })
 
 const runningJobs = ref([])
@@ -559,7 +558,7 @@ const connect = () => {
     });
   }
 
-  const _socket = new WebSocket(host + `/api/sd/client`);
+  const _socket = new WebSocket(host + `/api/sd/client?user_id=${userId.value}`);
   _socket.addEventListener('open', () => {
     socket.value = _socket;
 
diff --git a/web/src/views/mobile/Home.vue b/web/src/views/mobile/Home.vue
index b056fb7b..f500a301 100644
--- a/web/src/views/mobile/Home.vue
+++ b/web/src/views/mobile/Home.vue
@@ -5,7 +5,7 @@
 
       <van-tabbar route v-model="active" @change="onChange">
         <van-tabbar-item to="/mobile/chat" name="home" icon="chat-o">对话</van-tabbar-item>
-        <van-tabbar-item to="/mobile/mj" name="imageMj" icon="photo-o">绘图</van-tabbar-item>
+        <van-tabbar-item to="/mobile/image" name="image" icon="photo-o">绘图</van-tabbar-item>
         <van-tabbar-item to="/mobile/img-wall" name="apps" icon="apps-o">广场</van-tabbar-item>
         <van-tabbar-item to="/mobile/profile" name="profile" icon="user-o">我的</van-tabbar-item>
       </van-tabbar>
@@ -64,6 +64,11 @@ const onChange = (index) => {
   color #f56c6c
 }
 
+.van-toast--success {
+  background #D6FBCC
+  color #07C160
+}
+
 .van-nav-bar {
   position fixed
   width 100%
diff --git a/web/src/views/mobile/Image.vue b/web/src/views/mobile/Image.vue
new file mode 100644
index 00000000..08ac7d6f
--- /dev/null
+++ b/web/src/views/mobile/Image.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="mobile-image container">
+    <van-tabs v-model:active="activeName" class="my-tab" animated sticky>
+      <van-tab title="MidJourney" name="mj">
+        <image-mj/>
+      </van-tab>
+      <van-tab title="Stable-Diffusion" name="sd">
+        <image-sd/>
+      </van-tab>
+      <van-tab title="DALL-E" name="dall">
+        <van-empty description="功能正在开发中"/>
+      </van-tab>
+    </van-tabs>
+  </div>
+</template>
+
+<script setup>
+import {ref} from "vue";
+import ImageMj from "@/views/mobile/ImageMj.vue";
+import ImageSd from "@/views/mobile/ImageSd.vue";
+
+const activeName = ref("sd")
+</script>
+
+<style lang="stylus">
+.mobile-image {
+  .my-tab {
+    .van-tab__panel {
+      padding 10px
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/web/src/views/mobile/ImageMj.vue b/web/src/views/mobile/ImageMj.vue
index 33a02f8b..bd08e494 100644
--- a/web/src/views/mobile/ImageMj.vue
+++ b/web/src/views/mobile/ImageMj.vue
@@ -1,278 +1,275 @@
 <template>
-  <div class="mobile-mj container">
-    <van-nav-bar :title="title"/>
-
-    <div class="content">
-      <van-form @submit="generate">
-        <div class="text-line">图片比例</div>
-        <div class="text-line">
-          <van-row :gutter="10">
-            <van-col :span="4" v-for="item in rates" :key="item.value">
-              <div
-                  :class="item.value === params.rate ? 'rate active' : 'rate'"
-                  @click="changeRate(item)">
-                <div class="icon">
-                  <van-image :src="item.img" fit="cover"></van-image>
-                </div>
-                <div class="text">{{ item.text }}</div>
+  <div class="mobile-mj">
+    <van-form @submit="generate">
+      <div class="text-line">图片比例</div>
+      <div class="text-line">
+        <van-row :gutter="10">
+          <van-col :span="4" v-for="item in rates" :key="item.value">
+            <div
+                :class="item.value === params.rate ? 'rate active' : 'rate'"
+                @click="changeRate(item)">
+              <div class="icon">
+                <van-image :src="item.img" fit="cover"></van-image>
               </div>
-            </van-col>
-          </van-row>
-        </div>
-        <div class="text-line">模型选择</div>
-        <div class="text-line">
-          <van-row :gutter="10">
-            <van-col :span="8" v-for="item in models" :key="item.value">
-              <div :class="item.value === params.model ? 'model active' : 'model'"
-                   @click="changeModel(item)">
-                <div class="icon">
-                  <van-image :src="item.img" fit="cover"></van-image>
-                </div>
-                <div class="text">
-                  <van-text-ellipsis :content="item.text"/>
-                </div>
+              <div class="text">{{ item.text }}</div>
+            </div>
+          </van-col>
+        </van-row>
+      </div>
+      <div class="text-line">模型选择</div>
+      <div class="text-line">
+        <van-row :gutter="10">
+          <van-col :span="8" v-for="item in models" :key="item.value">
+            <div :class="item.value === params.model ? 'model active' : 'model'"
+                 @click="changeModel(item)">
+              <div class="icon">
+                <van-image :src="item.img" fit="cover"></van-image>
               </div>
-            </van-col>
-          </van-row>
-        </div>
-        <div class="text-line">
-          <van-field label="创意度">
-            <template #input>
-              <van-slider v-model.number="params.chaos" :max="100" :step="1"
-                          @update:model-value="showToast('当前值：' + params.chaos)"/>
-            </template>
-          </van-field>
-        </div>
-
-        <div class="text-line">
-          <van-field label="风格化">
-            <template #input>
-              <van-slider v-model.number="params.stylize" :max="1000" :step="1"
-                          @update:model-value="showToast('当前值：' + params.stylize)"/>
-            </template>
-          </van-field>
-        </div>
-
-        <div class="text-line">
-          <van-field label="原始模式">
-            <template #input>
-              <van-switch v-model="params.raw"/>
-            </template>
-          </van-field>
-        </div>
-
-        <div class="text-line">
-          <van-tabs v-model:active="activeName" @change="tabChange">
-            <van-tab title="文生图" name="txt2img">
-              <div class="text-line">
-                <van-field v-model="params.prompt"
-                           rows="3"
-                           autosize
-                           type="textarea"
-                           placeholder="请在此输入绘画提示词，系统会自动翻译中文提示词，高手请直接输入英文提示词"/>
-              </div>
-            </van-tab>
-            <van-tab title="图生图" name="img2img">
-              <div class="text-line">
-                <van-field v-model="params.prompt"
-                           rows="3"
-                           autosize
-                           type="textarea"
-                           placeholder="请在此输入绘画提示词，系统会自动翻译中文提示词，高手请直接输入英文提示词"/>
+              <div class="text">
+                <van-text-ellipsis :content="item.text"/>
               </div>
+            </div>
+          </van-col>
+        </van-row>
+      </div>
+      <div class="text-line">
+        <van-field label="创意度">
+          <template #input>
+            <van-slider v-model.number="params.chaos" :max="100" :step="1"
+                        @update:model-value="showToast('当前值：' + params.chaos)"/>
+          </template>
+        </van-field>
+      </div>
 
-              <div class="text-line">
-                <van-uploader v-model="imgList" :after-read="uploadImg"/>
-              </div>
-              <div class="text-line">
-                <van-field label="垫图权重">
-                  <template #input>
-                    <van-slider v-model.number="params.iw" :max="1" :step="0.01"
-                                @update:model-value="showToast('当前值：' + params.iw)"/>
-                  </template>
-                </van-field>
-              </div>
+      <div class="text-line">
+        <van-field label="风格化">
+          <template #input>
+            <van-slider v-model.number="params.stylize" :max="1000" :step="1"
+                        @update:model-value="showToast('当前值：' + params.stylize)"/>
+          </template>
+        </van-field>
+      </div>
 
-              <van-cell-group>
-                <van-field
-                    v-model="params.cref"
-                    center
-                    clearable
-                    label="角色一致性"
-                    placeholder="请输入图片URL或者上传图片"
-                >
-                  <template #button>
-                    <van-uploader @click="beforeUpload('cref')" :after-read="uploadImg">
-                      <van-button size="mini" type="primary" icon="plus"/>
-                    </van-uploader>
-                  </template>
-                </van-field>
-              </van-cell-group>
+      <div class="text-line">
+        <van-field label="原始模式">
+          <template #input>
+            <van-switch v-model="params.raw"/>
+          </template>
+        </van-field>
+      </div>
 
-              <van-cell-group>
-                <van-field
-                    v-model="params.sref"
-                    center
-                    clearable
-                    label="风格一致性"
-                    placeholder="请输入图片URL或者上传图片"
-                >
-                  <template #button>
-                    <van-uploader @click="beforeUpload('sref')" :after-read="uploadImg">
-                      <van-button size="mini" type="primary" icon="plus"/>
-                    </van-uploader>
-                  </template>
-                </van-field>
-              </van-cell-group>
+      <div class="text-line">
+        <van-tabs v-model:active="activeName" @change="tabChange" animated>
+          <van-tab title="文生图" name="txt2img">
+            <div class="text-line">
+              <van-field v-model="params.prompt"
+                         rows="3"
+                         autosize
+                         type="textarea"
+                         placeholder="请在此输入绘画提示词，系统会自动翻译中文提示词，高手请直接输入英文提示词"/>
+            </div>
+          </van-tab>
+          <van-tab title="图生图" name="img2img">
+            <div class="text-line">
+              <van-field v-model="params.prompt"
+                         rows="3"
+                         autosize
+                         type="textarea"
+                         placeholder="请在此输入绘画提示词，系统会自动翻译中文提示词，高手请直接输入英文提示词"/>
+            </div>
 
-              <div class="text-line">
-                <van-field label="一致性权重">
-                  <template #input>
-                    <van-slider v-model.number="params.cw" :max="100" :step="1"
-                                @update:model-value="showToast('当前值：' + params.cw)"/>
-                  </template>
-                </van-field>
-              </div>
-            </van-tab>
-            <van-tab title="融图" name="blend">
-              <div class="tip-text">请上传两张以上的图片，最多不超过五张，超过五张图片请使用图生图功能。</div>
-              <div class="text-line">
-                <van-uploader v-model="imgList" :after-read="uploadImg"/>
-              </div>
-            </van-tab>
-            <van-tab title="换脸" name="swapFace">
-              <div class="tip-text">请上传两张有脸部的图片，用右边图片的脸替换左边图片的脸。</div>
-              <div class="text-line">
-                <van-uploader v-model="imgList" :after-read="uploadImg"/>
-              </div>
-            </van-tab>
-          </van-tabs>
-        </div>
+            <div class="text-line">
+              <van-uploader v-model="imgList" :after-read="uploadImg"/>
+            </div>
+            <div class="text-line">
+              <van-field label="垫图权重">
+                <template #input>
+                  <van-slider v-model.number="params.iw" :max="1" :step="0.01"
+                              @update:model-value="showToast('当前值：' + params.iw)"/>
+                </template>
+              </van-field>
+            </div>
 
-        <div class="text-line">
-          <van-collapse v-model="activeColspan">
-            <van-collapse-item title="反向提示词" name="neg_prompt">
+            <div class="tip-text">提示：只有于 niji6 和 v6 模型支持一致性功能，如果选择其他模型此功能将会生成失败。</div>
+            <van-cell-group>
               <van-field
-                  v-model="params.prompt"
-                  rows="3"
-                  autosize
-                  type="textarea"
-                  placeholder="不想出现在图片上的元素(例如：树，建筑)"
+                  v-model="params.cref"
+                  center
+                  clearable
+                  label="角色一致性"
+                  placeholder="请输入图片URL或者上传图片"
+              >
+                <template #button>
+                  <van-uploader @click="beforeUpload('cref')" :after-read="uploadImg">
+                    <van-button size="mini" type="primary" icon="plus"/>
+                  </van-uploader>
+                </template>
+              </van-field>
+            </van-cell-group>
+
+            <van-cell-group>
+              <van-field
+                  v-model="params.sref"
+                  center
+                  clearable
+                  label="风格一致性"
+                  placeholder="请输入图片URL或者上传图片"
+              >
+                <template #button>
+                  <van-uploader @click="beforeUpload('sref')" :after-read="uploadImg">
+                    <van-button size="mini" type="primary" icon="plus"/>
+                  </van-uploader>
+                </template>
+              </van-field>
+            </van-cell-group>
+
+            <div class="text-line">
+              <van-field label="一致性权重">
+                <template #input>
+                  <van-slider v-model.number="params.cw" :max="100" :step="1"
+                              @update:model-value="showToast('当前值：' + params.cw)"/>
+                </template>
+              </van-field>
+            </div>
+          </van-tab>
+          <van-tab title="融图" name="blend">
+            <div class="tip-text">请上传两张以上的图片，最多不超过五张，超过五张图片请使用图生图功能。</div>
+            <div class="text-line">
+              <van-uploader v-model="imgList" :after-read="uploadImg"/>
+            </div>
+          </van-tab>
+          <van-tab title="换脸" name="swapFace">
+            <div class="tip-text">请上传两张有脸部的图片，用左边图片的脸替换右边图片的脸。</div>
+            <div class="text-line">
+              <van-uploader v-model="imgList" :after-read="uploadImg"/>
+            </div>
+          </van-tab>
+        </van-tabs>
+      </div>
+
+      <div class="text-line">
+        <van-collapse v-model="activeColspan">
+          <van-collapse-item title="反向提示词" name="neg_prompt">
+            <van-field
+                v-model="params.neg_prompt"
+                rows="3"
+                autosize
+                type="textarea"
+                placeholder="不想出现在图片上的元素(例如：树，建筑)"
+            />
+          </van-collapse-item>
+        </van-collapse>
+      </div>
+
+      <div class="text-line">
+        <el-tag>绘图消耗{{ mjPower }}算力，U/V 操作消耗{{ mjActionPower }}算力，当前算力：{{ power }}</el-tag>
+      </div>
+
+      <div class="text-line">
+        <van-button round block type="primary" native-type="submit">
+          立即生成
+        </van-button>
+      </div>
+    </van-form>
+
+    <h3>任务列表</h3>
+    <div class="running-job-list">
+      <van-empty v-if="runningJobs.length ===0"
+                 image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
+                 image-size="80"
+                 description="暂无记录"
+      />
+      <van-grid :gutter="10" :column-num="3" v-else>
+        <van-grid-item v-for="item in runningJobs">
+          <div v-if="item.progress > 0">
+            <van-image :src="item['img_url']">
+              <template v-slot:error>加载失败</template>
+            </van-image>
+            <div class="progress">
+              <van-circle
+                  v-model:current-rate="item.progress"
+                  :rate="item.progress"
+                  :speed="100"
+                  :text="item.progress+'%'"
+                  :stroke-width="60"
+                  size="90px"
               />
-            </van-collapse-item>
-          </van-collapse>
-        </div>
+            </div>
+          </div>
 
-        <div class="text-line">
-          <el-tag>绘图消耗{{ mjPower }}算力，U/V 操作消耗{{ mjActionPower }}算力，当前算力：{{ power }}</el-tag>
-        </div>
+          <div v-else class="task-in-queue">
+            <span class="icon"><i class="iconfont icon-quick-start"></i></span>
+            <span class="text">排队中</span>
+          </div>
 
-        <div class="text-line">
-          <van-button round block type="primary" native-type="submit">
-            立即生成
-          </van-button>
-        </div>
-      </van-form>
+        </van-grid-item>
+      </van-grid>
+    </div>
 
-      <h3>任务列表</h3>
-      <div class="running-job-list">
-        <van-empty v-if="runningJobs.length ===0"
-                   image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
-                   image-size="80"
-                   description="暂无记录"
-        />
-        <van-grid :gutter="10" :column-num="3" v-else>
-          <van-grid-item v-for="item in runningJobs">
-            <div v-if="item.progress > 0">
-              <van-image :src="item['img_url']">
-                <template v-slot:error>加载失败</template>
+    <h3>创作记录</h3>
+    <div class="finish-job-list">
+      <van-empty v-if="finishedJobs.length ===0"
+                 image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
+                 image-size="80"
+                 description="暂无记录"
+      />
+
+      <van-list v-else
+                v-model:error="error"
+                v-model:loading="loading"
+                :finished="finished"
+                error-text="请求失败，点击重新加载"
+                finished-text="没有更多了"
+                @load="onLoad"
+      >
+        <van-grid :gutter="10" :column-num="2">
+          <van-grid-item v-for="item in finishedJobs">
+            <div class="job-item">
+              <van-image
+                  :src="item['thumb_url']"
+                  :class="item['can_opt'] ? '' : 'upscale'"
+                  lazy-load
+                  @click="imageView(item)"
+                  fit="cover">
+                <template v-slot:loading>
+                  <van-loading type="spinner" size="20"/>
+                </template>
               </van-image>
-              <div class="progress">
-                <van-circle
-                    v-model:current-rate="item.progress"
-                    :rate="item.progress"
-                    :speed="100"
-                    :text="item.progress+'%'"
-                    :stroke-width="60"
-                    size="90px"
-                />
+
+              <div class="opt" v-if="item['can_opt']">
+
+                <van-grid :gutter="3" :column-num="4">
+                  <van-grid-item><a @click="upscale(1, item)" class="opt-btn">U1</a></van-grid-item>
+                  <van-grid-item><a @click="upscale(2, item)" class="opt-btn">U2</a></van-grid-item>
+                  <van-grid-item><a @click="upscale(3, item)" class="opt-btn">U3</a></van-grid-item>
+                  <van-grid-item><a @click="upscale(4, item)" class="opt-btn">U4</a></van-grid-item>
+                  <van-grid-item><a @click="variation(1, item)" class="opt-btn">V1</a></van-grid-item>
+                  <van-grid-item><a @click="variation(2, item)" class="opt-btn">V2</a></van-grid-item>
+                  <van-grid-item><a @click="variation(3, item)" class="opt-btn">V3</a></van-grid-item>
+                  <van-grid-item><a @click="variation(4, item)" class="opt-btn">V4</a></van-grid-item>
+                </van-grid>
+              </div>
+
+              <div class="remove">
+                <el-button type="danger" :icon="Delete" @click="removeImage(item)" circle/>
+                <el-button type="warning" v-if="item.publish" @click="publishImage(item, false)"
+                           circle>
+                  <i class="iconfont icon-cancel-share"></i>
+                </el-button>
+                <el-button type="success" v-else @click="publishImage(item, true)" circle>
+                  <i class="iconfont icon-share-bold"></i>
+                </el-button>
+                <el-button type="primary" @click="showPrompt(item)" circle>
+                  <i class="iconfont icon-prompt"></i>
+                </el-button>
               </div>
             </div>
-
-            <div v-else class="task-in-queue">
-              <span class="icon"><i class="iconfont icon-quick-start"></i></span>
-              <span class="text">排队中</span>
-            </div>
-
           </van-grid-item>
         </van-grid>
-      </div>
-
-      <h3>创作记录</h3>
-      <div class="finish-job-list">
-        <van-empty v-if="finishedJobs.length ===0"
-                   image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
-                   image-size="80"
-                   description="暂无记录"
-        />
-
-        <van-list v-else
-                  v-model:error="error"
-                  v-model:loading="loading"
-                  :finished="finished"
-                  error-text="请求失败，点击重新加载"
-                  finished-text="没有更多了"
-                  @load="onLoad"
-        >
-          <van-grid :gutter="10" :column-num="2">
-            <van-grid-item v-for="item in finishedJobs">
-              <div class="job-item">
-                <van-image
-                    :src="item['thumb_url']"
-                    :class="item['can_opt'] ? '' : 'upscale'"
-                    lazy-load
-                    @click="imageView(item)"
-                    fit="cover">
-                  <template v-slot:loading>
-                    <van-loading type="spinner" size="20"/>
-                  </template>
-                </van-image>
-
-                <div class="opt" v-if="item['can_opt']">
-
-                  <van-grid :gutter="3" :column-num="4">
-                    <van-grid-item><a @click="upscale(1, item)" class="opt-btn">U1</a></van-grid-item>
-                    <van-grid-item><a @click="upscale(2, item)" class="opt-btn">U2</a></van-grid-item>
-                    <van-grid-item><a @click="upscale(3, item)" class="opt-btn">U3</a></van-grid-item>
-                    <van-grid-item><a @click="upscale(4, item)" class="opt-btn">U4</a></van-grid-item>
-                    <van-grid-item><a @click="variation(1, item)" class="opt-btn">V1</a></van-grid-item>
-                    <van-grid-item><a @click="variation(2, item)" class="opt-btn">V2</a></van-grid-item>
-                    <van-grid-item><a @click="variation(3, item)" class="opt-btn">V3</a></van-grid-item>
-                    <van-grid-item><a @click="variation(4, item)" class="opt-btn">V4</a></van-grid-item>
-                  </van-grid>
-                </div>
-
-                <div class="remove">
-                  <el-button type="danger" :icon="Delete" @click="removeImage(item)" circle/>
-                  <el-button type="warning" v-if="item.publish" @click="publishImage(item, false)"
-                             circle>
-                    <i class="iconfont icon-cancel-share"></i>
-                  </el-button>
-                  <el-button type="success" v-else @click="publishImage(item, true)" circle>
-                    <i class="iconfont icon-share-bold"></i>
-                  </el-button>
-                  <el-button type="primary" @click="showPrompt(item)" circle>
-                    <i class="iconfont icon-prompt"></i>
-                  </el-button>
-                </div>
-              </div>
-            </van-grid-item>
-          </van-grid>
-        </van-list>
-
-      </div>
+      </van-list>
 
     </div>
+
   </div>
 </template>
 
@@ -289,13 +286,11 @@ import {
 } from "vant";
 import {httpGet, httpPost} from "@/utils/http";
 import Compressor from "compressorjs";
-import {ElMessage} from "element-plus";
 import {getSessionId} from "@/store/session";
 import {checkSession} from "@/action/session";
 import {useRouter} from "vue-router";
 import {Delete} from "@element-plus/icons-vue";
 
-const title = ref('MidJourney 绘画')
 const activeColspan = ref([""])
 
 const rates = [
@@ -309,10 +304,10 @@ const rates = [
 const models = [
   {text: "MJ-6.0", value: " --v 6", img: "/images/mj/mj-v6.png"},
   {text: "MJ-5.2", value: " --v 5.2", img: "/images/mj/mj-v5.2.png"},
-  {text: "Niji5 原始", value: " --niji 5", img: "/images/mj/mj-niji.png"},
+  {text: "Niji5", value: " --niji 5", img: "/images/mj/mj-niji.png"},
   {text: "Niji5 可爱", value: " --niji 5 --style cute", img: "/images/mj/nj1.jpg"},
   {text: "Niji5 风景", value: " --niji 5 --style scenic", img: "/images/mj/nj2.jpg"},
-  {text: "Niji5 表现力", value: " --niji 5 --style expressive", img: "/images/mj/nj3.jpg"},
+  {text: "Niji6", value: " --niji 6", img: "/images/mj/nj3.jpg"},
 ]
 const imgList = ref([])
 const params = ref({
@@ -365,7 +360,7 @@ httpGet("/api/config/get?key=system").then(res => {
   mjPower.value = res.data["mj_power"]
   mjActionPower.value = res.data["mj_action_power"]
 }).catch(e => {
-  ElMessage.error("获取系统配置失败：" + e.message)
+  showNotify({type: "danger", message: "获取系统配置失败：" + e.message})
 })
 
 const heartbeatHandle = ref(null)
@@ -436,7 +431,7 @@ const fetchRunningJobs = (userId) => {
     }
     runningJobs.value = _jobs
   }).catch(e => {
-    ElMessage.error("获取任务失败：" + e.message)
+    showNotify({type: "danger", message: "获取任务失败：" + e.message})
   })
 }
 
@@ -451,6 +446,19 @@ const fetchFinishJobs = (page) => {
   httpGet(`/api/mj/jobs?status=1&page=${page}&page_size=${pageSize.value}`).then(res => {
     const jobs = res.data
     for (let i = 0; i < jobs.length; i++) {
+      if (jobs[i].progress === -1) {
+        showNotify({
+          message: `任务ID：${jobs[i]['task_id']} 原因：${jobs[i]['err_msg']}`,
+          type: 'danger',
+        })
+        if (jobs[i].type === 'image') {
+          power.value += mjPower.value
+        } else {
+          power.value += mjActionPower.value
+        }
+        continue
+      }
+
       if (jobs[i]['use_proxy']) {
         jobs[i]['thumb_url'] = jobs[i]['img_url'] + '?x-oss-process=image/quality,q_60&format=webp'
       } else {
@@ -538,10 +546,10 @@ const send = (url, index, item) => {
     session_id: getSessionId(),
     prompt: item.prompt,
   }).then(() => {
-    ElMessage.success("任务推送成功，请耐心等待任务执行...")
+    showSuccessToast("任务推送成功，请耐心等待任务执行...")
     power.value -= mjActionPower.value
   }).catch(e => {
-    ElMessage.error("任务推送失败：" + e.message)
+    showFailToast("任务推送失败：" + e.message)
   })
 }
 
@@ -579,9 +587,9 @@ const removeImage = (item) => {
         '此操作将会删除任务和图片，继续操作码?',
   }).then(() => {
     httpPost("/api/mj/remove", {id: item.id, img_url: item.img_url, user_id: userId.value}).then(() => {
-      ElMessage.success("任务删除成功")
+      showSuccessToast("任务删除成功")
     }).catch(e => {
-      ElMessage.error("任务删除失败：" + e.message)
+      showFailToast("任务删除失败：" + e.message)
     })
   }).catch(() => {
     showToast("您取消了操作")
diff --git a/web/src/views/mobile/ImageSd.vue b/web/src/views/mobile/ImageSd.vue
new file mode 100644
index 00000000..b310a0a1
--- /dev/null
+++ b/web/src/views/mobile/ImageSd.vue
@@ -0,0 +1,523 @@
+<template>
+  <div class="mobile-sd">
+    <van-form @submit="generate">
+      <van-cell-group inset>
+        <div>
+          <van-field
+              v-model="params.sampler"
+              is-link
+              readonly
+              label="采样方法"
+              placeholder="选择采样方法"
+              @click="showSamplerPicker = true"
+          />
+          <van-popup v-model:show="showSamplerPicker" position="bottom" teleport="#app">
+            <van-picker
+                :columns="samplers"
+                @cancel="showSamplerPicker = false"
+                @confirm="samplerConfirm"
+            />
+          </van-popup>
+        </div>
+
+        <van-field label="图片尺寸">
+          <template #input>
+            <van-row gutter="20">
+              <van-col span="12">
+                <el-input v-model="params.width" size="small" placeholder="宽"/>
+              </van-col>
+              <van-col span="12">
+                <el-input v-model="params.height" size="small" placeholder="高"/>
+              </van-col>
+            </van-row>
+          </template>
+        </van-field>
+
+        <van-field v-model.number="params.steps" label="迭代步数"
+                   placeholder="">
+          <template #right-icon>
+            <van-icon name="info-o"
+                      @click="showInfo('值越大则代表细节越多，同时也意味着出图速度越慢，一般推荐20-30')"/>
+          </template>
+        </van-field>
+        <van-field v-model.number="params.cfg_scale" label="引导系数" placeholder="">
+          <template #right-icon>
+            <van-icon name="info-o"
+                      @click="showInfo('提示词引导系数，图像在多大程度上服从提示词，较低值会产生更有创意的结果')"/>
+          </template>
+        </van-field>
+        <van-field v-model.number="params.seed" label="随机因子" placeholder="">
+          <template #right-icon>
+            <van-icon name="info-o"
+                      @click="showInfo('随机数种子，相同的种子会得到相同的结果，设置为 -1 则每次随机生成种子')"/>
+          </template>
+        </van-field>
+
+        <van-field label="高清修复">
+          <template #input>
+            <van-switch v-model="params.hd_fix"/>
+          </template>
+        </van-field>
+
+        <div v-if="params.hd_fix">
+          <div>
+            <van-field
+                v-model="params.hd_scale_alg"
+                is-link
+                readonly
+                label="放大算法"
+                placeholder="选择放大算法"
+                @click="showUpscalePicker = true"
+            />
+            <van-popup v-model:show="showUpscalePicker" position="bottom" teleport="#app">
+              <van-picker
+                  :columns="upscaleAlgArr"
+                  @cancel="showUpscalePicker = false"
+                  @confirm="upscaleConfirm"
+              />
+            </van-popup>
+          </div>
+
+          <van-field v-model.number="params.hd_scale" label="放大倍数"/>
+          <van-field v-model.number="params.hd_steps" label="迭代步数"/>
+
+          <van-field label="重绘幅度">
+            <template #input>
+              <van-slider v-model.number="params.hd_redraw_rate" :max="1" :step="0.1"
+                          @update:model-value="showToast('当前值：' + params.hd_redraw_rate)"/>
+            </template>
+            <template #right-icon>
+              <van-icon name="info-o"
+                        @click="showInfo('决定算法对图像内容的影响程度，较大的值将得到越有创意的图像')"/>
+            </template>
+          </van-field>
+        </div>
+
+        <van-field
+            v-model="params.prompt"
+            rows="3"
+            autosize
+            type="textarea"
+            placeholder="请在此输入绘画提示词，系统会自动翻译中文提示词，高手请直接输入英文提示词"
+        />
+
+        <van-collapse v-model="activeColspan">
+          <van-collapse-item title="反向提示词" name="neg_prompt">
+            <van-field
+                v-model="params.neg_prompt"
+                rows="3"
+                autosize
+                type="textarea"
+                placeholder="不想出现在图片上的元素(例如：树，建筑)"
+            />
+          </van-collapse-item>
+        </van-collapse>
+
+        <div class="text-line pt-6">
+          <el-tag>绘图消耗{{ sdPower }}算力，当前算力：{{ power }}</el-tag>
+        </div>
+
+        <div class="text-line">
+          <van-button round block type="primary" native-type="submit">
+            立即生成
+          </van-button>
+        </div>
+      </van-cell-group>
+    </van-form>
+
+    <h3>任务列表</h3>
+    <div class="running-job-list">
+      <van-empty v-if="runningJobs.length ===0"
+                 image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
+                 image-size="80"
+                 description="暂无记录"
+      />
+      <van-grid :gutter="10" :column-num="3" v-else>
+        <van-grid-item v-for="item in runningJobs">
+          <div v-if="item.progress > 0">
+            <van-image :src="item['img_url']">
+              <template v-slot:error>加载失败</template>
+            </van-image>
+            <div class="progress">
+              <van-circle
+                  v-model:current-rate="item.progress"
+                  :rate="item.progress"
+                  :speed="100"
+                  :text="item.progress+'%'"
+                  :stroke-width="60"
+                  size="90px"
+              />
+            </div>
+          </div>
+
+          <div v-else class="task-in-queue">
+            <span class="icon"><i class="iconfont icon-quick-start"></i></span>
+            <span class="text">排队中</span>
+          </div>
+
+        </van-grid-item>
+      </van-grid>
+    </div>
+
+    <h3>创作记录</h3>
+    <div class="finish-job-list">
+      <van-empty v-if="finishedJobs.length ===0"
+                 image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
+                 image-size="80"
+                 description="暂无记录"
+      />
+
+      <van-list v-else
+                v-model:error="error"
+                v-model:loading="loading"
+                :finished="finished"
+                error-text="请求失败，点击重新加载"
+                finished-text="没有更多了"
+                @load="onLoad"
+      >
+        <van-grid :gutter="10" :column-num="2">
+          <van-grid-item v-for="item in finishedJobs">
+            <div class="job-item">
+              <van-image
+                  :src="item['img_url']"
+                  :class="item['can_opt'] ? '' : 'upscale'"
+                  lazy-load
+                  @click="imageView(item)"
+                  fit="cover">
+                <template v-slot:loading>
+                  <van-loading type="spinner" size="20"/>
+                </template>
+              </van-image>
+
+              <div class="remove">
+                <el-button type="danger" :icon="Delete" @click="removeImage($event, item)" circle/>
+                <el-button type="warning" v-if="item.publish" @click="publishImage($event,item, false)"
+                           circle>
+                  <i class="iconfont icon-cancel-share"></i>
+                </el-button>
+                <el-button type="success" v-else @click="publishImage($event, item, true)" circle>
+                  <i class="iconfont icon-share-bold"></i>
+                </el-button>
+                <el-button type="primary" @click="showTask(item)" circle>
+                  <i class="iconfont icon-prompt"></i>
+                </el-button>
+              </div>
+            </div>
+          </van-grid-item>
+        </van-grid>
+      </van-list>
+
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import {onMounted, onUnmounted, ref} from "vue"
+import {Delete} from "@element-plus/icons-vue";
+import {httpGet, httpPost} from "@/utils/http";
+import Clipboard from "clipboard";
+import {checkSession} from "@/action/session";
+import {useRouter} from "vue-router";
+import {getSessionId} from "@/store/session";
+import {
+  showConfirmDialog, showDialog,
+  showFailToast,
+  showImagePreview,
+  showNotify,
+  showSuccessToast,
+  showToast
+} from "vant";
+
+const listBoxHeight = ref(window.innerHeight - 40)
+const mjBoxHeight = ref(window.innerHeight - 150)
+const showTaskDialog = ref(false)
+const item = ref({})
+const showLoginDialog = ref(false)
+const isLogin = ref(false)
+const activeColspan = ref([""])
+
+window.onresize = () => {
+  listBoxHeight.value = window.innerHeight - 40
+  mjBoxHeight.value = window.innerHeight - 150
+}
+const samplers = ref([
+  {text: "Euler a", value: "Euler a"},
+  {text: "DPM++ 2S a Karras", value: "DPM++ 2S a Karras"},
+  {text: "DPM++ 2M Karras", value: "DPM++ 2M Karras"},
+  {text: "DPM++ 2M SDE Karras", value: "DPM++ 2M SDE Karras"},
+  {text: "DPM++ 2M Karras", value: "DPM++ 2M Karras"},
+  {text: "DPM++ 3M SDE Karras", value: "DPM++ 3M SDE Karras"},
+])
+const showSamplerPicker = ref(false)
+
+const upscaleAlgArr = ref([
+  {text: "Latent", value: "Latent"},
+  {text: "ESRGAN_4x", value: "ESRGAN_4x"},
+  {text: "ESRGAN 4x+", value: "ESRGAN 4x+"},
+  {text: "SwinIR_4x", value: "SwinIR_4x"},
+  {text: "LDSR", value: "LDSR"},
+])
+const showUpscalePicker = ref(false)
+
+const params = ref({
+  width: 1024,
+  height: 1024,
+  sampler: samplers.value[0].value,
+  seed: -1,
+  steps: 20,
+  cfg_scale: 7,
+  hd_fix: false,
+  hd_redraw_rate: 0.7,
+  hd_scale: 2,
+  hd_scale_alg: upscaleAlgArr.value[0].value,
+  hd_steps: 0,
+  prompt: "",
+  neg_prompt: "nsfw, paintings,low quality,easynegative,ng_deepnegative ,lowres,bad anatomy,bad hands,bad feet",
+})
+
+const runningJobs = ref([])
+const finishedJobs = ref([])
+const router = useRouter()
+// 检查是否有画同款的参数
+const _params = router.currentRoute.value.params["copyParams"]
+if (_params) {
+  params.value = JSON.parse(_params)
+}
+const power = ref(0)
+const sdPower = ref(0) // 画一张 SD 图片消耗算力
+
+const socket = ref(null)
+const userId = ref(0)
+const heartbeatHandle = ref(null)
+const connect = () => {
+  let host = process.env.VUE_APP_WS_HOST
+  if (host === '') {
+    if (location.protocol === 'https:') {
+      host = 'wss://' + location.host;
+    } else {
+      host = 'ws://' + location.host;
+    }
+  }
+
+  // 心跳函数
+  const sendHeartbeat = () => {
+    clearTimeout(heartbeatHandle.value)
+    new Promise((resolve, reject) => {
+      if (socket.value !== null) {
+        socket.value.send(JSON.stringify({type: "heartbeat", content: "ping"}))
+      }
+      resolve("success")
+    }).then(() => {
+      heartbeatHandle.value = setTimeout(() => sendHeartbeat(), 5000)
+    });
+  }
+
+  const _socket = new WebSocket(host + `/api/sd/client?user_id=${userId.value}`);
+  _socket.addEventListener('open', () => {
+    socket.value = _socket;
+
+    // 发送心跳消息
+    sendHeartbeat()
+  });
+
+  _socket.addEventListener('message', event => {
+    if (event.data instanceof Blob) {
+      fetchRunningJobs()
+      finished.value = false
+      page.value = 1
+      fetchFinishJobs(page.value)
+    }
+  });
+
+  _socket.addEventListener('close', () => {
+    if (socket.value !== null) {
+      connect()
+    }
+  });
+}
+
+const clipboard = ref(null)
+onMounted(() => {
+  initData()
+  clipboard.value = new Clipboard('.copy-prompt-sd');
+  clipboard.value.on('success', () => {
+    showNotify({type: "success", message: "复制成功！"});
+  })
+
+  clipboard.value.on('error', () => {
+    showNotify({type: "danger", message: '复制失败！'});
+  })
+
+  httpGet("/api/config/get?key=system").then(res => {
+    sdPower.value = res.data["sd_power"]
+  }).catch(e => {
+    showNotify({type: "danger", message: "获取系统配置失败：" + e.message})
+  })
+})
+
+onUnmounted(() => {
+  clipboard.value.destroy()
+  socket.value = null
+})
+
+
+const initData = () => {
+  checkSession().then(user => {
+    power.value = user['power']
+    userId.value = user.id
+    isLogin.value = true
+    fetchRunningJobs()
+    fetchFinishJobs(1)
+    connect()
+  }).catch(() => {
+    loading.value = false
+  });
+}
+
+const fetchRunningJobs = () => {
+  // 获取运行中的任务
+  httpGet(`/api/sd/jobs?status=0`).then(res => {
+    const jobs = res.data
+    const _jobs = []
+    for (let i = 0; i < jobs.length; i++) {
+      if (jobs[i].progress === -1) {
+        showNotify({
+          message: `任务ID：${jobs[i]['task_id']} 原因：${jobs[i]['err_msg']}`,
+          type: 'danger',
+        })
+        power.value += sdPower.value
+        continue
+      }
+      _jobs.push(jobs[i])
+    }
+    runningJobs.value = _jobs
+  }).catch(e => {
+    showNotify({type: "danger", message: "获取任务失败：" + e.message})
+  })
+}
+
+const loading = ref(false)
+const finished = ref(false)
+const error = ref(false)
+const page = ref(0)
+const pageSize = ref(10)
+// 获取已完成的任务
+const fetchFinishJobs = (page) => {
+  loading.value = true
+  httpGet(`/api/sd/jobs?status=1&page=${page}&page_size=${pageSize.value}`).then(res => {
+    if (res.data.length < pageSize.value) {
+      finished.value = true
+    }
+    if (page === 1) {
+      finishedJobs.value = res.data
+    } else {
+      finishedJobs.value = finishedJobs.value.concat(res.data)
+    }
+    loading.value = false
+  }).catch(e => {
+    loading.value = false
+    showNotify({type: "danger", message: "获取任务失败：" + e.message})
+  })
+}
+
+const onLoad = () => {
+  page.value += 1
+  fetchFinishJobs(page.value)
+}
+
+// 创建绘图任务
+const promptRef = ref(null)
+const generate = () => {
+  if (params.value.prompt === '') {
+    promptRef.value.focus()
+    return showToast("请输入绘画提示词！")
+  }
+
+  if (!isLogin.value) {
+    showLoginDialog.value = true
+    return
+  }
+
+  if (params.value.seed === '') {
+    params.value.seed = -1
+  }
+  params.value.session_id = getSessionId()
+  httpPost("/api/sd/image", params.value).then(() => {
+    showSuccessToast("绘画任务推送成功，请耐心等待任务执行...")
+    power.value -= sdPower.value
+  }).catch(e => {
+    showFailToast("任务推送失败：" + e.message)
+  })
+}
+
+const showTask = (row) => {
+  item.value = row
+  showTaskDialog.value = true
+}
+
+const copyParams = (row) => {
+  params.value = row.params
+  showTaskDialog.value = false
+}
+
+const removeImage = (event, item) => {
+  event.stopPropagation()
+  showConfirmDialog({
+    title: '标题',
+    message:
+        '此操作将会删除任务和图片，继续操作码?',
+  }).then(() => {
+    httpPost("/api/sd/remove", {id: item.id, img_url: item.img_url, user_id: userId.value}).then(() => {
+      showSuccessToast("任务删除成功")
+    }).catch(e => {
+      showFailToast("任务删除失败：" + e.message)
+    })
+  }).catch(() => {
+    showToast("您取消了操作")
+  });
+}
+
+// 发布图片到作品墙
+const publishImage = (event, item, action) => {
+  event.stopPropagation()
+  let text = "图片发布"
+  if (action === false) {
+    text = "取消发布"
+  }
+  httpPost("/api/sd/publish", {id: item.id, action: action}).then(() => {
+    showSuccessToast(text + "成功")
+    item.publish = action
+  }).catch(e => {
+    showFailToast(text + "失败：" + e.message)
+  })
+}
+
+const imageView = (item) => {
+  showImagePreview([item['img_url']]);
+}
+
+
+const samplerConfirm = (item) => {
+  params.value.sampler = item.selectedOptions[0].text;
+  showSamplerPicker.value = false
+}
+
+const upscaleConfirm = (item) => {
+  params.value.hd_scale_alg = item.selectedOptions[0].text;
+  showUpscalePicker.value = false
+}
+
+const showInfo = (message) => {
+  showDialog({
+    title: "参数说明",
+    message: message,
+  }).then(() => {
+    // on close
+  });
+}
+</script>
+
+<style lang="stylus">
+@import "@/assets/css/mobile/image-sd.styl"
+</style>
\ No newline at end of file