show asset library suggestions in AssetGenModal

Author: chennan

spx-gui/src/components/asset/gen/AssetGen.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { AssetData } from '@/apis/asset'
 import type { AssetGenModel } from '@/models/spx/common/asset'
 import { SpriteGen } from '@/models/spx/gen/sprite-gen'
 import { BackdropGen } from '@/models/spx/gen/backdrop-gen'
@@ -8,11 +9,13 @@ import BackdropGenComp from './backdrop/BackdropGen.vue'
 defineProps<{
   gen: AssetGenModel
   descriptionPlaceholder?: string
+  enableLibrarySearch?: boolean
 }>()
 
 defineEmits<{
   collapse: []
   finished: []
+  assetPicked: [AssetData]
 }>()
 </script>
 
@@ -21,13 +24,17 @@ defineEmits<{
     v-if="gen instanceof SpriteGen"
     :gen="gen"
     :description-placeholder="descriptionPlaceholder"
+    :enable-library-search="enableLibrarySearch"
     @collapse="$emit('collapse')"
     @finished="$emit('finished')"
+    @asset-picked="$emit('assetPicked', $event)"
   />
   <BackdropGenComp
     v-else-if="gen instanceof BackdropGen"
     :gen="gen"
     :description-placeholder="descriptionPlaceholder"
+    :enable-library-search="enableLibrarySearch"
     @finished="$emit('finished')"
+    @asset-picked="$emit('assetPicked', $event)"
   />
 </template>

spx-gui/src/components/asset/gen/AssetGenModal.vue

@@ -3,9 +3,9 @@ import { computed, ref } from 'vue'
 import { UIModal, UIModalClose, useConfirmDialog, type ModalTransformOrigin } from '@/components/ui'
 import { useI18n } from '@/utils/i18n'
 import { useMessageHandle } from '@/utils/exception'
-import { AssetType } from '@/apis/asset'
+import { AssetType, type AssetData } from '@/apis/asset'
 import type { SpxProject } from '@/models/spx/project'
-import type { AssetGenModel, AssetModel } from '@/models/spx/common/asset'
+import { addAssetToProject, type AssetGenModel, type AssetModel } from '@/models/spx/common/asset'
 import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 import { useAssetGen, addAssetGenResultToProject } from './useAssetGen'
 import AssetGenComp from './AssetGen.vue'
@@ -71,6 +71,22 @@ const handleGenFinished = useMessageHandle(
   }
 ).fn
 
+const handleAssetPicked = useMessageHandle(
+  async (asset: AssetData) => {
+    const added = await editorCtx.state.history.doAction(
+      {
+        name: { en: `Add ${entityMessage.value.en}`, zh: `添加${entityMessage.value.zh}` }
+      },
+      () => addAssetToProject(asset, props.project)
+    )
+    emit('resolved', added)
+  },
+  {
+    en: 'Failed to add asset',
+    zh: '素材添加失败'
+  }
+)
+
 const handleModalClose = useMessageHandle(
   async () => {
     const em = entityMessage.value
@@ -106,8 +122,10 @@ const handleModalClose = useMessageHandle(
       v-if="assetGen != null"
       class="asset-gen"
       :gen="assetGen"
+      enable-library-search
       @collapse="handleGenCollapse"
       @finished="handleGenFinished"
+      @asset-picked="handleAssetPicked.fn"
     />
   </UIModal>
 </template>

spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue

@@ -1,26 +1,40 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { UIButton } from '@/components/ui'
+import { AssetType, type AssetData } from '@/apis/asset'
 import type { Backdrop } from '@/models/spx/backdrop'
 import type { BackdropGen } from '@/models/spx/gen/backdrop-gen'
 import { capture, useMessageHandle } from '@/utils/exception'
+import { useI18n } from '@/utils/i18n'
 import { humanizeTimeLeft } from '../common/time-left'
 import BackdropSettingInput from './BackdropSettingsInput.vue'
 import LayoutWithPreview from '../common/LayoutWithPreview.vue'
 import ImagePreview from '../common/ImagePreview.vue'
 import ImageSelector from '../common/ImageSelector.vue'
+import AssetSuggestions from '../common/AssetSuggestions.vue'
+import { useAssetSuggestions, buildGenSettingsKeyword } from '../common/useAssetSuggestions'
 import BackdropImageItem from './BackdropImageItem.vue'
+import BackdropItem from '@/components/asset/library/BackdropItem.vue'
 
-const props = defineProps<{
-  gen: BackdropGen
-  descriptionPlaceholder?: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    gen: BackdropGen
+    descriptionPlaceholder?: string
+    enableLibrarySearch?: boolean
+  }>(),
+  {
+    descriptionPlaceholder: undefined,
+    enableLibrarySearch: false
+  }
+)
 
 const emit = defineEmits<{
   finished: [Backdrop]
+  assetPicked: [AssetData]
 }>()
 
 const canSubmit = computed(() => props.gen.image != null)
+const i18n = useI18n()
 const handleSubmit = useMessageHandle(
   async () => {
     const backdrop = await props.gen.finish()
@@ -43,6 +57,20 @@ function handleImageSelect(index: number) {
   props.gen.setImageIndex(index)
   hasPreview.value = true
 }
+
+const isLibrarySearchEnabled = computed(
+  () => props.enableLibrarySearch && props.gen.imagesGenState.status === 'initial'
+)
+
+const {
+  suggestions,
+  selected: selectedAsset,
+  toggle: toggleSelectedAsset
+} = useAssetSuggestions(
+  AssetType.Backdrop,
+  () => buildGenSettingsKeyword(i18n, props.gen.settings),
+  () => isLibrarySearchEnabled.value
+)
 </script>
 
 <template>
@@ -58,6 +86,25 @@ function handleImageSelect(index: number) {
         :disabled="handleSubmit.isLoading.value"
         :description-placeholder="descriptionPlaceholder"
       />
+      <AssetSuggestions
+        v-if="isLibrarySearchEnabled"
+        :type="AssetType.Backdrop"
+        :suggestions="suggestions"
+        :selected="selectedAsset"
+        @toggle="toggleSelectedAsset"
+      >
+        <template #item="{ asset, selected, onClick }">
+          <BackdropItem :asset="asset" :selected="selected" @click="onClick" />
+        </template>
+        <template #tip>
+          {{
+            $t({
+              en: `There are related backdrops in the library. You can choose the one you like or continue generating.`,
+              zh: `素材库中已有相关的背景，可以选择你喜欢的背景直接使用，或者继续生成。`
+            })
+          }}
+        </template>
+      </AssetSuggestions>
       <ImageSelector
         :state="gen.imagesGenState"
         :selected="gen.imageIndex"
@@ -92,6 +139,19 @@ function handleImageSelect(index: number) {
     </LayoutWithPreview>
     <footer class="footer">
       <UIButton
+        v-if="selectedAsset != null"
+        v-radar="{
+          name: 'Use',
+          desc: 'Click to use the selected library asset'
+        }"
+        color="primary"
+        size="large"
+        @click="emit('assetPicked', selectedAsset!)"
+      >
+        {{ $t({ en: 'Use', zh: '采用' }) }}
+      </UIButton>
+      <UIButton
+        v-else
         v-radar="{
           name: 'Use',
           desc: 'Finish and use the generated backdrop in the project'

spx-gui/src/components/asset/gen/common/AssetSuggestions.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { AssetType, type AssetData } from '@/apis/asset'
+
+const props = defineProps<{
+  type: AssetType
+  suggestions: AssetData[]
+  selected: AssetData | null
+}>()
+
+const emit = defineEmits<{
+  toggle: [AssetData]
+}>()
+
+function isSelected(asset: AssetData) {
+  return props.selected?.id === asset.id
+}
+</script>
+
+<template>
+  <div class="asset-suggestions">
+    <template v-if="suggestions.length > 0">
+      <ul class="list">
+        <template v-for="asset in suggestions" :key="asset.id">
+          <slot name="item" :asset="asset" :selected="isSelected(asset)" :on-click="() => emit('toggle', asset)"></slot>
+        </template>
+      </ul>
+      <p class="tip">
+        <slot name="tip"></slot>
+      </p>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.asset-suggestions {
+  height: 170px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.list {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: nowrap;
+  justify-content: center;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.tip {
+  text-align: center;
+  font-size: 12px;
+  color: var(--ui-color-hint-2);
+}
+</style>

spx-gui/src/components/asset/gen/common/useAssetSuggestions.ts

@@ -0,0 +1,93 @@
+import { ref, shallowRef, watch, type Ref, type ShallowRef } from 'vue'
+import { debounce } from 'lodash'
+import type { I18n } from '@/utils/i18n'
+import { listAsset, Visibility, type AssetData, type AssetType } from '@/apis/asset'
+import { ArtStyle, Perspective, ownerAll } from '@/apis/common'
+import type { BackdropSettings, SpriteSettings } from '@/apis/aigc'
+import { artStyleOptions, perspectiveOptions, spriteCategoryOptions, backdropCategoryOptions } from './param-settings/data'
+
+export function useAssetSuggestions(
+  type: AssetType,
+  keyword: () => string,
+  enabled: () => boolean
+): {
+  suggestions: ShallowRef<AssetData[]>
+  isLoading: Ref<boolean>
+  selected: ShallowRef<AssetData | null>
+  toggle: (asset: AssetData) => void
+} {
+  const suggestions = shallowRef<AssetData[]>([])
+  const isLoading = ref(false)
+  const selected = shallowRef<AssetData | null>(null)
+
+  const doSearch = debounce(async (keyword: string) => {
+    isLoading.value = true
+    try {
+      const result = await listAsset({
+        keyword,
+        type,
+        pageSize: 4,
+        pageIndex: 1,
+        visibility: Visibility.Public,
+        owner: ownerAll
+      })
+      suggestions.value = result.data
+    } catch {
+      suggestions.value = []
+    } finally {
+      isLoading.value = false
+    }
+  }, 500)
+
+  watch(
+    [keyword, enabled],
+    ([kw, isEnabled]) => {
+      if (!isEnabled || kw.trim() === '') {
+        doSearch.cancel()
+        suggestions.value = []
+        selected.value = null
+        isLoading.value = false
+        return
+      }
+      doSearch(kw.trim())
+    },
+    { immediate: true }
+  )
+
+  function toggle(asset: AssetData) {
+    selected.value = selected.value?.id === asset.id ? null : asset
+  }
+
+  return { suggestions, isLoading, selected, toggle }
+}
+
+/**
+ * Build a search keyword from gen settings.
+ * Combines description with non-unspecified category/artStyle/perspective labels.
+ */
+// TODO: refine the keyword building logic.
+export function buildGenSettingsKeyword(
+  i18n: I18n,
+  settings: SpriteSettings | BackdropSettings
+) {
+  const desc = settings.description.trim()
+  if (desc === '') return ''
+
+  const parts: string[] = [desc]
+
+  const categoryOption =
+    spriteCategoryOptions.find((o) => o.value === settings.category) ??
+    backdropCategoryOptions.find((o) => o.value === settings.category)
+  if (categoryOption != null) {
+    parts.push(i18n.t(categoryOption.label))
+  }
+  if (settings.artStyle != null && settings.artStyle !== ArtStyle.Unspecified) {
+    const option = artStyleOptions.find((o) => o.value === settings.artStyle)
+    if (option != null) parts.push(i18n.t(option.label))
+  }
+  if (settings.perspective != null && settings.perspective !== Perspective.Unspecified) {
+    const option = perspectiveOptions.find((o) => o.value === settings.perspective)
+    if (option != null) parts.push(i18n.t(option.label))
+  }
+  return parts.join(' ')
+}

spx-gui/src/components/asset/gen/sprite/SpriteGen.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import { computedShallowReactive, useComputedDisposable } from '@/utils/utils'
 import { useI18n } from '@/utils/i18n'
 import { useNetwork } from '@/utils/network'
+import type { AssetData } from '@/apis/asset'
 import type { SpriteGen } from '@/models/spx/gen/sprite-gen'
 import type { Sprite } from '@/models/spx/sprite'
 import { getSignedInUsername } from '@/stores/user'
@@ -16,11 +17,13 @@ import SpriteGenPhaseContent from './SpriteGenPhaseContent.vue'
 const props = defineProps<{
   gen: SpriteGen
   descriptionPlaceholder?: string
+  enableLibrarySearch?: boolean
 }>()
 
 const emit = defineEmits<{
   collapse: []
   finished: [Sprite]
+  assetPicked: [AssetData]
 }>()
 
 const i18n = useI18n()
@@ -51,7 +54,13 @@ provideLocalEditorCtx(editorCtxInGen)
     @collapse="emit('collapse')"
     @finished="emit('finished', $event)"
   />
-  <SpriteGenPhaseSettings v-else :gen="gen" :description-placeholder="descriptionPlaceholder" />
+  <SpriteGenPhaseSettings
+    v-else
+    :gen="gen"
+    :description-placeholder="descriptionPlaceholder"
+    :enable-library-search="enableLibrarySearch"
+    @asset-picked="emit('assetPicked', $event)"
+  />
 </template>
 
 <style lang="scss" scoped></style>