index.vue
3.46 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!-- image -->
<template>
<div class="absolute inset-0 flex flex-row wh-full">
<div class="flex flex-col p-5 w-[390px]">
<div class="mb-[30px]">
<el-segmented
v-model="selectPlatform"
:options="platformOptions"
class="w-[350px] !bg-[#ececec] [--el-border-radius-base:16px] [--el-segmented-item-selected-color:#fff]"
/>
</div>
<div class="h-full overflow-y-auto">
<Common
v-if="selectPlatform === 'common'"
ref="commonRef"
:models="models"
@on-draw-complete="handleDrawComplete"
/>
<Dall3
v-if="selectPlatform === AiPlatformEnum.OPENAI"
ref="dall3Ref"
:models="models"
@on-draw-start="handleDrawStart"
@on-draw-complete="handleDrawComplete"
/>
<Midjourney
v-if="selectPlatform === AiPlatformEnum.MIDJOURNEY"
ref="midjourneyRef"
:models="models"
/>
<StableDiffusion
v-if="selectPlatform === AiPlatformEnum.STABLE_DIFFUSION"
ref="stableDiffusionRef"
:models="models"
@on-draw-complete="handleDrawComplete"
/>
</div>
</div>
<div class="flex-1 bg-white">
<ImageList ref="imageListRef" @on-regeneration="handleRegeneration" />
</div>
</div>
</template>
<script setup lang="ts">
import ImageList from './components/ImageList.vue'
import { AiPlatformEnum } from '@/views/ai/utils/constants'
import { ImageVO } from '@/api/ai/image'
import Dall3 from './components/dall3/index.vue'
import Midjourney from './components/midjourney/index.vue'
import StableDiffusion from './components/stableDiffusion/index.vue'
import Common from './components/common/index.vue'
import { ModelApi, ModelVO } from '@/api/ai/model/model'
import { AiModelTypeEnum } from '@/views/ai/utils/constants'
const imageListRef = ref<any>() // image 列表 ref
const dall3Ref = ref<any>() // dall3(openai) ref
const midjourneyRef = ref<any>() // midjourney ref
const stableDiffusionRef = ref<any>() // stable diffusion ref
const commonRef = ref<any>() // stable diffusion ref
// 定义属性
const selectPlatform = ref('common') // 选中的平台
const platformOptions = [
{
label: '通用',
value: 'common'
},
{
label: 'DALL3 绘画',
value: AiPlatformEnum.OPENAI
},
{
label: 'MJ 绘画',
value: AiPlatformEnum.MIDJOURNEY
},
{
label: 'SD 绘图',
value: AiPlatformEnum.STABLE_DIFFUSION
}
]
const models = ref<ModelVO[]>([]) // 模型列表
/** 绘画 start */
const handleDrawStart = async (_platform: string) => {}
/** 绘画 complete */
const handleDrawComplete = async (_platform: string) => {
await imageListRef.value.getImageList()
}
/** 重新生成：将画图详情填充到对应平台 */
const handleRegeneration = async (image: ImageVO) => {
// 切换平台
selectPlatform.value = image.platform
// 根据不同平台填充 image
await nextTick()
if (image.platform === AiPlatformEnum.MIDJOURNEY) {
midjourneyRef.value.settingValues(image)
} else if (image.platform === AiPlatformEnum.OPENAI) {
dall3Ref.value.settingValues(image)
} else if (image.platform === AiPlatformEnum.STABLE_DIFFUSION) {
stableDiffusionRef.value.settingValues(image)
}
// TODO @fan：貌似 other 重新设置不行？
}
/** 组件挂载的时候 */
onMounted(async () => {
// 获取模型列表
models.value = await ModelApi.getModelSimpleList(AiModelTypeEnum.IMAGE)
})
</script>