From 91088b98e33f14f0519b46fd9d46aa93ae14f749 Mon Sep 17 00:00:00 2001
From: ShawnPhang <palxiao@vip.qq.com>
Date: Sat, 30 Sep 2023 12:15:53 +0800
Subject: [PATCH] code: optimize image cutout

---
 package.json                                  |  1 -
 src/api/ai.ts                                 | 24 +++++++
 src/api/index.ts                              |  6 +-
 src/api/material.ts                           |  6 +-
 src/assets/styles/design.less                 |  9 ---
 src/assets/styles/layout.less                 |  9 +++
 .../business/image-cutout/ImageCutout.vue     | 63 +++++++++++--------
 src/config.ts                                 |  8 ---
 src/store/modules/base/index.ts               |  7 +--
 src/utils/axios.ts                            |  4 +-
 src/views/Index.vue                           |  2 +-
 11 files changed, 82 insertions(+), 57 deletions(-)
 create mode 100644 src/api/ai.ts

diff --git a/package.json b/package.json
index d215932..efa6087 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,6 @@
     "publish-fast": "git add . && git commit -m 'build: auto publish' && sh script/publish.sh"
   },
   "dependencies": {
-    "@gradio/client": "^0.1.4",
     "@palxp/color-picker": "^1.3.1",
     "@scena/guides": "^0.18.1",
     "@webtoon/psd": "^0.4.0",
diff --git a/src/api/ai.ts b/src/api/ai.ts
new file mode 100644
index 0000000..560bc41
--- /dev/null
+++ b/src/api/ai.ts
@@ -0,0 +1,24 @@
+/*
+ * @Author: ShawnPhang
+ * @Date: 2021-08-27 14:42:15
+ * @Description: AI相关接口
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditTime: 2023-09-30 12:08:01
+ */
+import fetch from '@/utils/axios'
+
+// 上传接口
+export const upload = (file: File, cb: Function) => {
+  const formData = new FormData()
+  formData.append('file', file)
+  const extra = {
+    responseType: 'blob',
+    onUploadProgress: (progress: any) => {
+      cb(Math.floor((progress.loaded / progress.total) * 100), 0)
+    },
+    onDownloadProgress: (progress: any) => {
+      cb(100, Math.floor((progress.loaded / progress.total) * 100))
+    },
+  }
+  return fetch('https://res.palxp.cn/ai/upload', formData, 'post', {}, extra)
+}
diff --git a/src/api/index.ts b/src/api/index.ts
index c27f723..a1017b9 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -2,13 +2,15 @@
  * @Author: ShawnPhang
  * @Date: 2021-08-19 18:43:22
  * @Description:
- * @LastEditors: ShawnPhang <site: book.palxp.com>
- * @LastEditTime: 2023-07-21 13:06:46
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditTime: 2023-09-28 15:46:56
  */
 import * as home from './home'
 import * as material from './material'
+import * as ai from './ai'
 
 export default {
   home,
   material,
+  ai,
 }
diff --git a/src/api/material.ts b/src/api/material.ts
index 652e466..c90b58b 100644
--- a/src/api/material.ts
+++ b/src/api/material.ts
@@ -1,9 +1,9 @@
 /*
  * @Author: ShawnPhang
  * @Date: 2021-08-27 14:42:15
- * @Description:
- * @LastEditors: ShawnPhang <site: book.palxp.com>
- * @LastEditTime: 2023-07-21 11:19:04
+ * @Description: 媒体相关接口
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditTime: 2023-09-28 11:24:13
  */
 import fetch from '@/utils/axios'
 
diff --git a/src/assets/styles/design.less b/src/assets/styles/design.less
index f173080..8ed2a4a 100644
--- a/src/assets/styles/design.less
+++ b/src/assets/styles/design.less
@@ -135,13 +135,4 @@
     box-shadow: 0 0 0 5000px rgba(255, 255, 255, 0.95);
     z-index: 8;
   }
-  .shelter-bg {
-    // background-color: #ffffff;
-    background-color: #f0f0f0;
-    background-image: linear-gradient(to top right, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(to top right, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
-    background-position: 0 0, 8px 8px;
-    background-size: 16px 16px;
-    overflow: hidden;
-    user-select: none;
-  }
 }
diff --git a/src/assets/styles/layout.less b/src/assets/styles/layout.less
index 378c78b..dc8b719 100644
--- a/src/assets/styles/layout.less
+++ b/src/assets/styles/layout.less
@@ -25,3 +25,12 @@
 .line-clamp-2 {
   -webkit-line-clamp: 2;
 }
+
+.transparent-bg {
+  background-color: #f0f0f0;
+  background-image: linear-gradient(to top right, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(to top right, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
+  background-position: 0 0, 8px 8px;
+  background-size: 16px 16px;
+  overflow: hidden;
+  user-select: none;
+}
diff --git a/src/components/business/image-cutout/ImageCutout.vue b/src/components/business/image-cutout/ImageCutout.vue
index 5143dcf..a40f8c4 100644
--- a/src/components/business/image-cutout/ImageCutout.vue
+++ b/src/components/business/image-cutout/ImageCutout.vue
@@ -3,21 +3,25 @@
  * @Date: 2023-07-11 23:50:22
  * @Description: 抠图组件
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-09-15 12:38:49
+ * @LastEditTime: 2023-09-30 12:10:31
 -->
 <template>
-  <el-dialog v-model="show" title="AI抠图（测试版）" width="650" @close="handleClose">
+  <el-dialog v-model="show" title="AI 智能抠图" width="650" @close="handleClose">
     <uploader v-if="!rawImage" :hold="true" :drag="true" :multiple="true" class="uploader" @load="selectFile">
       <div class="uploader__box">
         <upload-filled style="width: 64px; height: 64px" />
         <div class="el-upload__text">在此拖入或选择<em>上传图片</em></div>
       </div>
-      <div class="el-upload__tip">支持 jpg 或 png 格式的文件，大小不超过 2M</div>
+      <div class="el-upload__tip">由于服务器带宽过低，上传大小限制在 1M 内</div>
     </uploader>
+    <el-progress v-if="!cutImage && progressText" :percentage="progress">
+      <el-button text>
+        {{ progressText }} <span v-show="progress">{{ progress }}%</span>
+      </el-button>
+    </el-progress>
     <div class="content">
-      <div v-show="rawImage" v-loading="!cutImage" :style="{ width: offsetWidth ? offsetWidth + 'px' : '100%' }" class="scan-effect">
-        <img ref="raw" :src="rawImage" alt="" />
-        <div :style="{ right: 100 - percent + '%' }" class="bg"></div>
+      <div v-show="rawImage" v-loading="!cutImage" :style="{ width: offsetWidth ? offsetWidth + 'px' : '100%' }" class="scan-effect transparent-bg">
+        <img ref="raw" :style="{ 'clip-path': 'inset(0 0 0 ' + percent + '%)' }" :src="rawImage" alt="" />
         <img v-show="cutImage" :src="cutImage" alt="结果图像" @mousemove="mousemove" />
         <div v-show="cutImage" :style="{ left: percent + '%' }" class="scan-line"></div>
       </div>
@@ -33,14 +37,16 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, onMounted, nextTick } from 'vue'
+import { defineComponent, reactive, toRefs } from 'vue'
 import { useStore } from 'vuex'
+import { ElProgress } from 'element-plus'
 import { UploadFilled } from '@element-plus/icons-vue'
 import uploader from '@/components/common/Uploader/index.vue'
 import _dl from '@/common/methods/download'
+import * as api from '@/api/ai'
 
 export default defineComponent({
-  components: { uploader, UploadFilled },
+  components: { uploader, UploadFilled, ElProgress },
   setup() {
     const store = useStore()
     const state: any = reactive({
@@ -50,18 +56,15 @@ export default defineComponent({
       raw: null,
       offsetWidth: 0,
       percent: 0,
+      progress: 0,
+      progressText: '',
     })
-
-    let app: any = null
     let fileName: string = 'unknow'
     let isRuning: boolean = false
-    onMounted(async () => {
-      app = await store.getters.app
-    })
 
     const selectFile = async (file: File) => {
-      if (file.size > 1024 * 1024 * 2) {
-        alert('请上传小于 2M 的图片')
+      if (file.size > 1024 * 1024) {
+        alert('上传图片超出限制')
         return false
       }
       // 显示选择的图片
@@ -70,10 +73,22 @@ export default defineComponent({
       })
       state.rawImage = URL.createObjectURL(file)
       fileName = file.name
-      // 返回抠图
-      const result = await app.predict('/predict', [file, 'u2netp', ''])
-      state.rawImage && (state.cutImage = result?.data[0])
-      requestAnimationFrame(run)
+      // 返回抠图结果
+      const result: any = await api.upload(file, (up: number, dp: number) => {
+        if (dp) {
+          state.progressText = '导入中..'
+          state.progress = dp
+        } else {
+          state.progressText = up < 100 ? '上传中..' : '正在处理，请稍候..'
+          state.progress = up < 100 ? up : 0
+        }
+        dp === 100 && (state.progressText = '')
+      })
+      if (result.type !== 'application/json') {
+        const resultImage = URL.createObjectURL(result)
+        state.rawImage && (state.cutImage = resultImage)
+        requestAnimationFrame(run)
+      } else alert('服务器繁忙，请稍等下重新尝试~')
     }
 
     const open = () => {
@@ -146,12 +161,6 @@ export default defineComponent({
     object-fit: contain;
     position: absolute;
   }
-  .bg {
-    width: 100%;
-    height: 100%;
-    background: #ffffff;
-    position: absolute;
-  }
 }
 
 .scan-line {
@@ -163,4 +172,8 @@ export default defineComponent({
   // background-image: linear-gradient(to top, transparent, rgba(255, 255, 255, 0.7), transparent);
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
 }
+
+.progress {
+  width: 100%;
+}
 </style>
diff --git a/src/config.ts b/src/config.ts
index 1084560..5e880b3 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,10 +1,3 @@
-/*
- * @Author: ShawnPhang
- * @Date: 2023-09-07 22:56:09
- * @Description: 配置文件
- * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-09-20 16:09:59
- */
 // const prefix = import.meta.env
 const prefix = process.env
 
@@ -21,7 +14,6 @@ export default {
   API_URL: 'https://palxp.cn:8887', // 服务端地址
   SCREEN_URL: isDev ? 'http://localhost:7001' : '#{SCREEN_URL}', // 截图服务地址
   IMG_URL: 'https://store.palxp.com/', // 七牛云资源地址
-  KT_URL: 'https://res.palxp.cn:5001', // 抠图服务地址
   // ICONFONT_URL: '//at.alicdn.com/t/font_3223711_74mlzj4jdue.css',
   ICONFONT_URL: '//at.alicdn.com/t/font_2717063_ypy8vprc3b.css?display=swap',
   ICONFONT_EXTRA: '//at.alicdn.com/t/c/font_3228074_6qsac4kteu7.css?&display=swap',
diff --git a/src/store/modules/base/index.ts b/src/store/modules/base/index.ts
index 2f2240c..4a1e8c7 100644
--- a/src/store/modules/base/index.ts
+++ b/src/store/modules/base/index.ts
@@ -3,11 +3,10 @@
  * @Date: 2021-12-16 16:20:16
  * @Description:
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-09-15 12:47:57
+ * @LastEditTime: 2023-09-28 17:42:25
  */
 import mutations from './mutations'
 import actions from './actions'
-import { client } from '@gradio/client'
 import _config from '@/config'
 
 const all = {
@@ -39,10 +38,6 @@ const all = {
     fonts: (state: Type.Object) => {
       return state.fonts
     },
-    app: async (state: Type.Object) => {
-      !state.app && (state.app = await client(_config.KT_URL))
-      return state.app
-    },
   },
   mutations: {
     ...mutations,
diff --git a/src/utils/axios.ts b/src/utils/axios.ts
index 190a683..b66f819 100644
--- a/src/utils/axios.ts
+++ b/src/utils/axios.ts
@@ -2,8 +2,8 @@
  * @Author: ShawnPhang
  * @Date: 2021-07-13 02:48:38
  * @Description: 接口规则：只有正确code为200时返回result结果对象，错误返回整个结果对象
- * @LastEditors: ShawnPhang <site: book.palxp.com>
- * @LastEditTime: 2023-07-31 09:34:34
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditTime: 2023-09-28 15:58:41
  */
 import axios from 'axios'
 import store from '@/store'
diff --git a/src/views/Index.vue b/src/views/Index.vue
index e6b053d..f85a55e 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -21,7 +21,7 @@
         <!-- 用于挡住画布溢出部分，因为使用overflow有bug. PS:如shadow没有透明度则可以完全遮挡元素 -->
         <div class="shelter" :style="{ width: Math.floor((dPage.width * dZoom) / 100) + 'px', height: Math.floor((dPage.height * dZoom) / 100) + 'px' }"></div>
         <!-- 提供一个背景图层以免遮挡穿帮 -->
-        <div class="shelter-bg" :style="{ width: Math.floor((dPage.width * dZoom) / 100) + 'px', height: Math.floor((dPage.height * dZoom) / 100) + 'px' }"></div>
+        <div class="shelter-bg transparent-bg" :style="{ width: Math.floor((dPage.width * dZoom) / 100) + 'px', height: Math.floor((dPage.height * dZoom) / 100) + 'px' }"></div>
       </design-board>
       <style-panel></style-panel>
     </div>