feat: stable diffusion image drawing on mobile is ready

2025-11-04 16:23:42 +08:00 · 2024-04-03 18:13:48 +08:00
parent ed286c8894
commit a9adc0c1a2
19 changed files with 1457 additions and 545 deletions
--- 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"`
@@ -44,7 +45,7 @@ type SdTask struct {
 type SdTaskParams struct {
 	TaskId       string  `json:"task_id"`
 	Prompt       string  `json:"prompt"`     // 提示词
-	NegativePrompt string  `json:"negative_prompt"` // 反向提示词
+	NegPrompt    string  `json:"neg_prompt"` // 反向提示词
 	Steps        int     `json:"steps"`      // 迭代步数，默认20
 	Sampler      string  `json:"sampler"`    // 采样器
 	FaceFix      bool    `json:"face_fix"`   // 面部修复
--- 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,
--- a/api/handler/payment_handler.go
+++ b/api/handler/payment_handler.go
@@ -424,29 +424,23 @@ 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()
+			opt = "VIP充值，VIP 没到期，只延期不增加算力"
+		} else {
+			user.ExpiredTime = time.Now().AddDate(0, 0, remark.Days).Unix()
+			user.Power += h.App.SysConfig.VipMonthPower
+			power = h.App.SysConfig.VipMonthPower
+			opt = "VIP充值"
+		}
+		user.Vip = true
 	} else { // 充值点卡，直接增加次数即可
 		user.Power += remark.Power
 		opt = "点卡充值"
 		power = remark.Power
 	}

-	} else {                 // 非 VIP 用户
-		if remark.Days > 0 { // vip 套餐：days > 0, power == 0
-			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
-		}
-	}
-
 	// 更新用户信息
 	res = h.DB.Updates(&user)
 	if res.Error != nil {
--- a/api/handler/sd_handler.go
+++ b/api/handler/sd_handler.go
@@ -129,7 +129,7 @@ func (h *SdJobHandler) Image(c *gin.Context) {
 	params := types.SdTaskParams{
 		TaskId:       taskId,
 		Prompt:       data.Prompt,
-		NegativePrompt: data.NegativePrompt,
+		NegPrompt:    data.NegPrompt,
 		Steps:        data.Steps,
 		Sampler:      data.Sampler,
 		FaceFix:      data.FaceFix,
--- 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)

--- 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 编码
--- 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)
--- 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,
--- 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;
--- a/web/src/assets/css/mobile/image-mj.styl
+++ b/web/src/assets/css/mobile/image-mj.styl
@@ -1,5 +1,4 @@
 .mobile-mj {
-  .content {
  .text-line {
    padding 6px
    font-size 14px
@@ -192,5 +191,4 @@
      }
    }
  }
-  }
 }
--- a/web/src/assets/css/mobile/image-sd.css
+++ 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;
+}
--- a/web/src/assets/css/mobile/image-sd.styl
+++ 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
+              }
+            }
+          }
+
+
+        }
+      }
+    }
+  }
+}
--- 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',
--- 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或者上传图片"
--- 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;

--- 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%
--- a/web/src/views/mobile/Image.vue
+++ 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>
--- a/web/src/views/mobile/ImageMj.vue
+++ b/web/src/views/mobile/ImageMj.vue
@@ -1,8 +1,5 @@
 <template>
-  <div class="mobile-mj container">
-    <van-nav-bar :title="title"/>
-
-    <div class="content">
+  <div class="mobile-mj">
    <van-form @submit="generate">
      <div class="text-line">图片比例</div>
      <div class="text-line">
@@ -62,7 +59,7 @@
      </div>

      <div class="text-line">
-          <van-tabs v-model:active="activeName" @change="tabChange">
+        <van-tabs v-model:active="activeName" @change="tabChange" animated>
          <van-tab title="文生图" name="txt2img">
            <div class="text-line">
              <van-field v-model="params.prompt"
@@ -93,6 +90,7 @@
              </van-field>
            </div>

+            <div class="tip-text">提示：只有于 niji6 和 v6 模型支持一致性功能，如果选择其他模型此功能将会生成失败。</div>
            <van-cell-group>
              <van-field
                  v-model="params.cref"
@@ -141,7 +139,7 @@
            </div>
          </van-tab>
          <van-tab title="换脸" name="swapFace">
-              <div class="tip-text">请上传两张有脸部的图片，用右边图片的脸替换左边图片的脸。</div>
+            <div class="tip-text">请上传两张有脸部的图片，用左边图片的脸替换右边图片的脸。</div>
            <div class="text-line">
              <van-uploader v-model="imgList" :after-read="uploadImg"/>
            </div>
@@ -153,7 +151,7 @@
        <van-collapse v-model="activeColspan">
          <van-collapse-item title="反向提示词" name="neg_prompt">
            <van-field
-                  v-model="params.prompt"
+                v-model="params.neg_prompt"
                rows="3"
                autosize
                type="textarea"
@@ -273,7 +271,6 @@
    </div>

  </div>
-  </div>
 </template>

 <script setup>
@@ -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("您取消了操作")
--- a/web/src/views/mobile/ImageSd.vue
+++ 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>