From ab421f2185509ba30eec9174015e73aa690e8fe7 Mon Sep 17 00:00:00 2001
From: RockYang <yangjian102621@gmail.com>
Date: Mon, 26 Aug 2024 17:59:05 +0800
Subject: [PATCH] luma page, upload image and remove image function is ready

---
 api/core/app_server.go        | 110 ++++++++++++++++------------------
 api/handler/upload_handler.go |  39 ++++++++++--
 api/main.go                   |   5 +-
 web/public/images/loading.gif | Bin 0 -> 16618 bytes
 web/src/assets/css/luma.styl  |  27 ++++++++-
 web/src/utils/http.js         |  14 +++++
 web/src/views/Luma.vue        |  86 +++++++++++++++++++++-----
 7 files changed, 200 insertions(+), 81 deletions(-)
 create mode 100644 web/public/images/loading.gif

diff --git a/api/core/app_server.go b/api/core/app_server.go
index fab16d1c..92967067 100644
--- a/api/core/app_server.go
+++ b/api/core/app_server.go
@@ -26,7 +26,6 @@ import (
 	"io"
 	"net/http"
 	"os"
-	"path/filepath"
 	"runtime/debug"
 	"strings"
 	"time"
@@ -228,6 +227,7 @@ func needLogin(c *gin.Context) bool {
 		c.Request.URL.Path == "/api/suno/client" ||
 		c.Request.URL.Path == "/api/suno/detail" ||
 		c.Request.URL.Path == "/api/suno/play" ||
+		c.Request.URL.Path == "/api/download" ||
 		strings.HasPrefix(c.Request.URL.Path, "/api/test") ||
 		strings.HasPrefix(c.Request.URL.Path, "/api/user/clogin") ||
 		strings.HasPrefix(c.Request.URL.Path, "/api/config/") ||
@@ -316,64 +316,58 @@ func staticResourceMiddleware() gin.HandlerFunc {
 
 		url := c.Request.URL.String()
 		// 拦截生成缩略图请求
-		if strings.HasPrefix(url, "/static/") {
-			if strings.Contains(url, "?imageView2") {
-				r := strings.SplitAfter(url, "imageView2")
-				size := strings.Split(r[1], "/")
-				if len(size) != 8 {
-					c.String(http.StatusNotFound, "invalid thumb args")
-					return
-				}
-				with := utils.IntValue(size[3], 0)
-				height := utils.IntValue(size[5], 0)
-				quality := utils.IntValue(size[7], 75)
-
-				// 打开图片文件
-				filePath := strings.TrimLeft(c.Request.URL.Path, "/")
-				file, err := os.Open(filePath)
-				if err != nil {
-					c.String(http.StatusNotFound, "Image not found")
-					return
-				}
-				defer file.Close()
-
-				// 解码图片
-				img, _, err := image.Decode(file)
-				// for .webp image
-				if err != nil {
-					img, err = webp.Decode(file)
-				}
-				if err != nil {
-					c.String(http.StatusInternalServerError, "Error decoding image")
-					return
-				}
-
-				var newImg image.Image
-				if height == 0 || with == 0 {
-					// 固定宽度，高度自适应
-					newImg = resize.Resize(uint(with), uint(height), img, resize.Lanczos3)
-				} else {
-					// 生成缩略图
-					newImg = resize.Thumbnail(uint(with), uint(height), img, resize.Lanczos3)
-				}
-				var buffer bytes.Buffer
-				err = jpeg.Encode(&buffer, newImg, &jpeg.Options{Quality: quality})
-				if err != nil {
-					logger.Error(err)
-					c.String(http.StatusInternalServerError, err.Error())
-					return
-				}
-
-				// 设置图片缓存有效期为一年 (365天)
-				c.Header("Cache-Control", "max-age=31536000, public")
-				// 直接输出图像数据流
-				c.Data(http.StatusOK, "image/jpeg", buffer.Bytes())
-				c.Abort() // 中断请求
-			} else if strings.Contains(url, "?download=true") {
-				filename := filepath.Base(url)
-				c.Header("Content-Disposition", "attachment; filename="+filename)
-				c.Header("Content-Type", "application/octet-stream")
+		if strings.HasPrefix(url, "/static/") && strings.Contains(url, "?imageView2") {
+			r := strings.SplitAfter(url, "imageView2")
+			size := strings.Split(r[1], "/")
+			if len(size) != 8 {
+				c.String(http.StatusNotFound, "invalid thumb args")
+				return
 			}
+			with := utils.IntValue(size[3], 0)
+			height := utils.IntValue(size[5], 0)
+			quality := utils.IntValue(size[7], 75)
+
+			// 打开图片文件
+			filePath := strings.TrimLeft(c.Request.URL.Path, "/")
+			file, err := os.Open(filePath)
+			if err != nil {
+				c.String(http.StatusNotFound, "Image not found")
+				return
+			}
+			defer file.Close()
+
+			// 解码图片
+			img, _, err := image.Decode(file)
+			// for .webp image
+			if err != nil {
+				img, err = webp.Decode(file)
+			}
+			if err != nil {
+				c.String(http.StatusInternalServerError, "Error decoding image")
+				return
+			}
+
+			var newImg image.Image
+			if height == 0 || with == 0 {
+				// 固定宽度，高度自适应
+				newImg = resize.Resize(uint(with), uint(height), img, resize.Lanczos3)
+			} else {
+				// 生成缩略图
+				newImg = resize.Thumbnail(uint(with), uint(height), img, resize.Lanczos3)
+			}
+			var buffer bytes.Buffer
+			err = jpeg.Encode(&buffer, newImg, &jpeg.Options{Quality: quality})
+			if err != nil {
+				logger.Error(err)
+				c.String(http.StatusInternalServerError, err.Error())
+				return
+			}
+
+			// 设置图片缓存有效期为一年 (365天)
+			c.Header("Cache-Control", "max-age=31536000, public")
+			// 直接输出图像数据流
+			c.Data(http.StatusOK, "image/jpeg", buffer.Bytes())
+			c.Abort() // 中断请求
 
 		}
 		c.Next()
diff --git a/api/handler/upload_handler.go b/api/handler/upload_handler.go
index 9d2c8706..fd7f437d 100644
--- a/api/handler/upload_handler.go
+++ b/api/handler/upload_handler.go
@@ -17,19 +17,21 @@ import (
 	"geekai/utils/resp"
 	"github.com/gin-gonic/gin"
 	"gorm.io/gorm"
+	"io"
+	"net/http"
 	"time"
 )
 
-type UploadHandler struct {
+type NetHandler struct {
 	BaseHandler
 	uploaderManager *oss.UploaderManager
 }
 
-func NewUploadHandler(app *core.AppServer, db *gorm.DB, manager *oss.UploaderManager) *UploadHandler {
-	return &UploadHandler{BaseHandler: BaseHandler{App: app, DB: db}, uploaderManager: manager}
+func NewNetHandler(app *core.AppServer, db *gorm.DB, manager *oss.UploaderManager) *NetHandler {
+	return &NetHandler{BaseHandler: BaseHandler{App: app, DB: db}, uploaderManager: manager}
 }
 
-func (h *UploadHandler) Upload(c *gin.Context) {
+func (h *NetHandler) Upload(c *gin.Context) {
 	file, err := h.uploaderManager.GetUploadHandler().PutFile(c, "file")
 	if err != nil {
 		resp.ERROR(c, err.Error())
@@ -60,7 +62,7 @@ func (h *UploadHandler) Upload(c *gin.Context) {
 	resp.SUCCESS(c, file)
 }
 
-func (h *UploadHandler) List(c *gin.Context) {
+func (h *NetHandler) List(c *gin.Context) {
 	var data struct {
 		Urls []string `json:"urls,omitempty"`
 	}
@@ -95,7 +97,7 @@ func (h *UploadHandler) List(c *gin.Context) {
 }
 
 // Remove remove files
-func (h *UploadHandler) Remove(c *gin.Context) {
+func (h *NetHandler) Remove(c *gin.Context) {
 	userId := h.GetLoginUserId(c)
 	id := h.GetInt(c, "id", 0)
 	var file model.File
@@ -119,3 +121,28 @@ func (h *UploadHandler) Remove(c *gin.Context) {
 	_ = h.uploaderManager.GetUploadHandler().Delete(objectKey)
 	resp.SUCCESS(c)
 }
+
+func (h *NetHandler) Download(c *gin.Context) {
+	fileUrl := c.Query("url")
+	// 使用http工具下载文件
+	if fileUrl == "" {
+		resp.ERROR(c, types.InvalidArgs)
+		return
+	}
+	// 使用http.Get下载文件
+	r, err := http.Get(fileUrl)
+	if err != nil {
+		resp.ERROR(c, err.Error())
+		return
+	}
+	defer r.Body.Close()
+
+	if r.StatusCode != http.StatusOK {
+		resp.ERROR(c, "error status："+r.Status)
+		return
+	}
+
+	// 将下载的文件内容写入响应
+	c.Status(http.StatusOK)
+	_, _ = io.Copy(c.Writer, r.Body)
+}
diff --git a/api/main.go b/api/main.go
index 58a428be..2cf9a407 100644
--- a/api/main.go
+++ b/api/main.go
@@ -128,7 +128,7 @@ func main() {
 		fx.Provide(handler.NewChatRoleHandler),
 		fx.Provide(handler.NewUserHandler),
 		fx.Provide(chatimpl.NewChatHandler),
-		fx.Provide(handler.NewUploadHandler),
+		fx.Provide(handler.NewNetHandler),
 		fx.Provide(handler.NewSmsHandler),
 		fx.Provide(handler.NewRedeemHandler),
 		fx.Provide(handler.NewCaptchaHandler),
@@ -249,10 +249,11 @@ func main() {
 			group.POST("tokens", h.Tokens)
 			group.GET("stop", h.StopGenerate)
 		}),
-		fx.Invoke(func(s *core.AppServer, h *handler.UploadHandler) {
+		fx.Invoke(func(s *core.AppServer, h *handler.NetHandler) {
 			s.Engine.POST("/api/upload", h.Upload)
 			s.Engine.POST("/api/upload/list", h.List)
 			s.Engine.GET("/api/upload/remove", h.Remove)
+			s.Engine.GET("/api/download", h.Download)
 		}),
 		fx.Invoke(func(s *core.AppServer, h *handler.SmsHandler) {
 			group := s.Engine.Group("/api/sms/")
diff --git a/web/public/images/loading.gif b/web/public/images/loading.gif
new file mode 100644
index 0000000000000000000000000000000000000000..77eb7b88e38e761d60f99516be3f2530552db07d
GIT binary patch
literal 16618
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
MpHJZbt54v60G;j5WdHyG

literal 0
HcmV?d00001

diff --git a/web/src/assets/css/luma.styl b/web/src/assets/css/luma.styl
index 557ff651..7d773b3f 100644
--- a/web/src/assets/css/luma.styl
+++ b/web/src/assets/css/luma.styl
@@ -91,6 +91,22 @@
           position relative
         }
       }
+      .params {
+        display flex
+        justify-content right
+        color #e1e1e1
+        font-size 14px
+        padding 10px 30px
+
+        .item-group {
+          margin-left 20px
+          .label {
+            margin-right 5px
+            position relative
+            top 1px
+          }
+        }
+      }
     }
 
   }
@@ -150,7 +166,16 @@
             font-size 14px
 
             .iconfont {
-              font-size 12px
+              font-size 11px
+              position relative
+              margin-right 5px
+              top -2px
+            }
+
+            .el-image {
+              width 14px
+              height 14px
+              margin-right 5px
             }
 
             &:hover {
diff --git a/web/src/utils/http.js b/web/src/utils/http.js
index 9399b141..3329591f 100644
--- a/web/src/utils/http.js
+++ b/web/src/utils/http.js
@@ -69,3 +69,17 @@ export function httpPost(url, data = {}, options = {}) {
         })
     })
 }
+
+export function httpDownload(url) {
+    return new Promise((resolve, reject) => {
+        axios({
+            method: 'GET',
+            url: url,
+            responseType: 'blob' // 将响应类型设置为 `blob`
+        }).then(response => {
+            resolve(response)
+        }).catch(err => {
+            reject(err)
+        })
+    })
+}
\ No newline at end of file
diff --git a/web/src/views/Luma.vue b/web/src/views/Luma.vue
index 94c6cbd7..8f3d8e8e 100644
--- a/web/src/views/Luma.vue
+++ b/web/src/views/Luma.vue
@@ -2,15 +2,24 @@
   <div class="page-luma">
     <div class="prompt-box">
       <div class="images">
-        <div v-for="img in images" class="item">
+        <div v-for="img in images" :key="img" class="item">
           <el-image :src="img" fit="cover"/>
-          <el-icon><CircleCloseFilled /></el-icon>
+          <el-icon @click="remove(img)"><CircleCloseFilled /></el-icon>
         </div>
       </div>
       <div class="prompt-container">
         <div class="input-container">
           <div class="upload-icon">
-            <i class="iconfont icon-image"></i>
+
+            <el-upload
+                class="avatar-uploader"
+                :auto-upload="true"
+                :show-file-list="false"
+                :http-request="upload"
+                accept=".jpg,.png,.jpeg"
+            >
+              <i class="iconfont icon-image"></i>
+            </el-upload>
           </div>
           <textarea
               class="prompt-input"
@@ -24,6 +33,16 @@
           </div>
         </div>
 
+        <div class="params">
+          <div class="item-group">
+            <span class="label">循环</span>
+            <el-switch  v-model="loop" size="small" style="--el-switch-on-color:#BF78BF;" />
+          </div>
+          <div class="item-group">
+            <span class="label">提示词优化</span>
+            <el-switch  v-model="promptExtend" size="small" style="--el-switch-on-color:#BF78BF;" />
+          </div>
+        </div>
       </div>
     </div>
 
@@ -40,12 +59,11 @@
           </div>
           <div class="video-name">{{item.name}}</div>
           <div class="opts">
-            <a :href="item.url+'?download=true'" download="video.mp4">
-              <button class="btn">
-                <i class="iconfont icon-download"></i>
-                <span>下载</span>
-              </button>
-            </a>
+            <button class="btn" @click="download(item)" :disabled="item.downloading">
+              <i class="iconfont icon-download" v-if="!item.downloading"></i>
+              <el-image src="/images/loading.gif" fit="cover" v-else />
+              <span>下载</span>
+            </button>
           </div>
         </el-col>
       </el-row>
@@ -56,19 +74,21 @@
 <script setup>
 import {ref} from "vue";
 import {CircleCloseFilled} from "@element-plus/icons-vue";
+import {httpDownload, httpPost} from "@/utils/http";
+import {showMessageError} from "@/utils/dialog";
+import {ElMessage} from "element-plus";
 
 const row = ref(1)
 const prompt = ref('')
-const images = ref([
-    "http://nk.img.r9it.com/chatgpt-plus/1719371605709871.jpg",
-    "http://nk.img.r9it.com/chatgpt-plus/1719371605709871.jpg"
-])
+const loop = ref(false)
+const promptExtend = ref(false)
+const images = ref([])
 
 const videos = ref([
   {
     id: 1,
     name: 'a dancing girl',
-    url: 'http://localhost:5678/static/upload/2024/8/1724574661747320.mp4',
+    url: 'https://storage.cdn-luma.com/dream_machine/d133794f-3124-4059-a9f2-e5fed79f0d5b/watermarked_video01944f69966f14d33b6c4486a8cfb8dde.mp4',
     cover: 'https://storage.cdn-luma.com/dream_machine/d133794f-3124-4059-a9f2-e5fed79f0d5b/video_0_thumb.jpg',
     playing: false
   },
@@ -102,6 +122,44 @@ const videos = ref([
   },
 ])
 
+const download = (item) => {
+  const downloadURL = `${process.env.VUE_APP_API_HOST}/api/download?url=${item.url}`
+  // parse filename
+  const urlObj = new URL(item.url);
+  const fileName = urlObj.pathname.split('/').pop();
+  item.downloading = true
+  httpDownload(downloadURL).then(response  => {
+    const blob = new Blob([response.data]);
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+    link.download = fileName;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(link.href);
+    item.downloading = false
+  }).catch(() => {
+    showMessageError("下载失败")
+    item.downloading = false
+  })
+}
+
+const upload = (file) => {
+  const formData = new FormData();
+  formData.append('file', file.file, file.name);
+  // 执行上传操作
+  httpPost('/api/upload', formData).then((res) => {
+    images.value.push(res.data.url)
+    ElMessage.success({message: "上传成功", duration: 500})
+  }).catch((e) => {
+    ElMessage.error('图片上传失败:' + e.message)
+  })
+};
+
+const remove = (img) => {
+  images.value = images.value.filter(item => item !== img)
+}
+
 
 </script>