From 40c782401462eb690141fc6f4b01ed805f370326 Mon Sep 17 00:00:00 2001
From: Hanxing Yang <nighca@live.cn>
Date: Fri, 9 Aug 2024 15:02:08 +0800
Subject: [PATCH] configurable AIGC feature (#726)

---
 spx-gui/.env                                  |  3 ++
 .../asset/preprocessing/PreprocessModal.vue   | 38 ++++++++++++++-----
 spx-gui/src/utils/env.ts                      |  6 +++
 3 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/spx-gui/.env b/spx-gui/.env
index ffc2bf345..d1d407c4b 100644
--- a/spx-gui/.env
+++ b/spx-gui/.env
@@ -8,6 +8,9 @@ VITE_CASDOOR_APP_NAME="application_goplusCommunity"
 
 VITE_API_BASE_URL="/api"
 
+# Features control
+VITE_DISABLE_AIGC="false"
+
 # This base URL is used by Vercel Edge Middleware to proxy all '/api/(.*)' requests.
 # The path prefix '/api' is stripped before forwarding.
 VERCEL_PROXIED_API_BASE_URL="https://goplus-builder.qiniu.io/api"
diff --git a/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue b/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue
index 3bfe2069a..ea42dfb89 100644
--- a/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue
+++ b/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue
@@ -1,7 +1,7 @@
 <template>
   <UIFormModal
     style="width: 780px"
-    :visible="props.visible"
+    :visible="props.visible && ready"
     :title="$t(actionMessage)"
     :body-style="{ padding: '0' }"
     @update:visible="emit('cancelled')"
@@ -45,7 +45,7 @@
           :input="getMethodInput(method.value)"
           :applied="isMethodApplied(method.value)"
           @applied="(output) => handleMethodApplied(method.value, output)"
-          @cancel="cancelMethod(method.value)"
+          @cancel="handleMethodCancel(method.value)"
         />
       </div>
     </main>
@@ -80,6 +80,7 @@
 import { computed, ref, shallowReactive, shallowRef, watch } from 'vue'
 import { stripExt } from '@/utils/path'
 import type { LocaleMessage } from '@/utils/i18n'
+import { disableAIGC } from '@/utils/env'
 import { Costume } from '@/models/costume'
 import { File } from '@/models/common/file'
 import { UIButton, UIFormModal } from '@/components/ui'
@@ -123,14 +124,16 @@ type MethodItem = {
  * The order of methods is the order of applying.
  */
 const supportedMethods = computed(() => {
-  const methods: MethodItem[] = [
-    {
+  const methods: MethodItem[] = []
+
+  if (!disableAIGC) {
+    methods.push({
       value: Method.RemoveBackground,
       name: { en: 'Remove background', zh: '去除背景' },
       thumbnail: removeBackgroundThumbnail,
       component: RemoveBackground
-    }
-  ]
+    })
+  }
 
   if (props.files.length === 1) {
     methods.push({
@@ -180,13 +183,18 @@ function handleMethodApplied(method: Method, output: File[]) {
   updateCostumes(output)
 }
 
-function cancelMethod(method: Method) {
+function handleMethodCancel(method: Method) {
   const idx = supportedMethods.value.findIndex((m) => m.value === method)
   outputs.splice(idx)
   outputs.push(null)
   updateCostumes(getMethodInput(method))
 }
 
+function resetOutputs() {
+  outputs.splice(0)
+  updateCostumes(props.files)
+}
+
 const costumes = shallowRef<Costume[]>([])
 const selectedCostumes = shallowReactive<Costume[]>([])
 
@@ -213,10 +221,22 @@ function handleConfirm() {
   emit('resolved', selectedCostumes)
 }
 
+// Avoid UI flickering when there's no supported methods
+const ready = ref(false)
+
 watch(
   () => props.files,
-  // The first method cancelled, all methods cancelled
-  () => cancelMethod(supportedMethods.value[0].value),
+  async (files) => {
+    // If there's no supported methods, skip user interaction and resolve with costumes created with original files
+    if (supportedMethods.value.length === 0) {
+      await updateCostumes(files)
+      emit('resolved', costumes.value)
+      return
+    }
+
+    ready.value = true
+    resetOutputs()
+  },
   { immediate: true }
 )
 </script>
diff --git a/spx-gui/src/utils/env.ts b/spx-gui/src/utils/env.ts
index b8c9444be..d68be7c3b 100644
--- a/spx-gui/src/utils/env.ts
+++ b/spx-gui/src/utils/env.ts
@@ -15,3 +15,9 @@ export const casdoorConfig = {
   organizationName: import.meta.env.VITE_CASDOOR_ORGANIZATION_NAME as string,
   appName: import.meta.env.VITE_CASDOOR_APP_NAME as string
 }
+
+/**
+ * If we should disable features that rely on AIGC service.
+ * For now AIGC service is not ready for production. We disable it until it's ready.
+ */
+export const disableAIGC = import.meta.env.VITE_DISABLE_AIGC === 'true'