Skip to content

Commit e881b9c

Browse files
YunaiVYunaiV
committed
【代码优化】AI：绘图 index.vue 代码梳理 70%（Dall3.vue）
1 parent 7706e46 commit e881b9c

File tree

4 files changed

+106
-107
lines changed

4 files changed

+106
-107
lines changed

‎src/views/ai/image/index/components/ImageDetail.vue

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,14 +112,21 @@
112112
{{ detail?.options?.seed }}
113113
</div>
114114
</div>
115+
<!-- Dall3 专属区域 -->
116+
<div class="item" v-if="detail.platform === AiPlatformEnum.OPENAI && detail?.options?.style">
117+
<div class="tip">风格选择</div>
118+
<div class="body">
119+
{{ Dall3StyleList.find((item: ImageModelVO) => item.key === detail?.options?.style)?.name }}
120+
</div>
121+
</div>
115122
</el-drawer>
116123
</template>
117124

118125
<script setup lang="ts">
119126
import { ImageApi, ImageVO } from '@/api/ai/image'
120-
import ImageCard from './ImageCard.vue'
121127
import {
122128
AiPlatformEnum,
129+
Dall3StyleList,
123130
ImageModelVO,
124131
StableDiffusionClipGuidancePresets,
125132
StableDiffusionSamplers,

‎src/views/ai/image/index/components/dall3/index.vue

Lines changed: 41 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
</div>
3838
<el-space wrap class="model-list">
3939
<div
40-
:class="model === model.key ? 'modal-item selectModel' : 'modal-item'"
40+
:class="selectModel === model.key ? 'modal-item selectModel' : 'modal-item'"
4141
v-for="model in Dall3Models"
4242
:key="model.key"
4343
>
@@ -52,12 +52,8 @@
5252
</div>
5353
<el-space wrap class="image-style-list">
5454
<div
55-
:class="
56-
selectImageStyle === imageStyle.key
57-
? 'image-style-item selectImageStyle'
58-
: 'image-style-item'
59-
"
60-
v-for="imageStyle in imageStyleList"
55+
:class="style === imageStyle.key ? 'image-style-item selectImageStyle' : 'image-style-item'"
56+
v-for="imageStyle in Dall3StyleList"
6157
:key="imageStyle.key"
6258
>
6359
<el-image :src="imageStyle.image" fit="contain" @click="handleStyleClick(imageStyle)" />
@@ -72,11 +68,13 @@
7268
<el-space wrap class="size-list">
7369
<div
7470
class="size-item"
75-
v-for="imageSize in imageSizeList"
71+
v-for="imageSize in Dall3SizeList"
7672
:key="imageSize.key"
7773
@click="handleSizeClick(imageSize)"
7874
>
79-
<div :class="size === imageSize.key ? 'size-wrapper selectImageSize' : 'size-wrapper'">
75+
<div
76+
:class="selectSize === imageSize.key ? 'size-wrapper selectImageSize' : 'size-wrapper'"
77+
>
8078
<div :style="imageSize.style"></div>
8179
</div>
8280
<div class="size-font">{{ imageSize.name }}</div>
@@ -91,103 +89,53 @@
9189
</template>
9290
<script setup lang="ts">
9391
import { ImageApi, ImageDrawReqVO, ImageVO } from '@/api/ai/image'
94-
import { Dall3Models, ImageHotWords } from '@/views/ai/utils/constants'
92+
import {
93+
Dall3Models,
94+
Dall3StyleList,
95+
ImageHotWords,
96+
Dall3SizeList,
97+
ImageModelVO,
98+
AiPlatformEnum
99+
} from '@/views/ai/utils/constants'
95100
96101
const message = useMessage() // 消息弹窗
97102
98-
// image 模型
99-
interface ImageModelVO {
100-
key: string
101-
name: string
102-
image: string
103-
}
104-
105-
// image 大小
106-
interface ImageSizeVO {
107-
key: string
108-
name: string
109-
style: string
110-
width: string
111-
height: string
112-
}
113-
114103
// 定义属性
115104
const prompt = ref<string>('') // 提示词
116105
const drawIn = ref<boolean>(false) // 生成中
117106
const selectHotWord = ref<string>('') // 选中的热词
118-
const model = ref<string>('dall-e-3') // 模型
119-
const size = ref<string>('1024x1024') // 选中 size
120-
121-
const selectImageStyle = ref<string>('vivid') // style 样式
107+
const selectModel = ref<string>('dall-e-3') // 模型
108+
const selectSize = ref<string>('1024x1024') // 选中 size
109+
const style = ref<string>('vivid') // style 样式
122110
123-
const imageStyleList = ref<ImageModelVO[]>([
124-
{
125-
key: 'vivid',
126-
name: '清晰',
127-
image: `/src/assets/ai/qingxi.jpg`
128-
},
129-
{
130-
key: 'natural',
131-
name: '自然',
132-
image: `/src/assets/ai/ziran.jpg`
133-
}
134-
]) // style
135-
136-
const imageSizeList = ref<ImageSizeVO[]>([
137-
{
138-
key: '1024x1024',
139-
name: '1:1',
140-
width: '1024',
141-
height: '1024',
142-
style: 'width: 30px; height: 30px;background-color: #dcdcdc;'
143-
},
144-
{
145-
key: '1024x1792',
146-
name: '3:5',
147-
width: '1024',
148-
height: '1792',
149-
style: 'width: 30px; height: 50px;background-color: #dcdcdc;'
150-
},
151-
{
152-
key: '1792x1024',
153-
name: '5:3',
154-
width: '1792',
155-
height: '1024',
156-
style: 'width: 50px; height: 30px;background-color: #dcdcdc;'
157-
}
158-
]) // size
111+
const emits = defineEmits(['onDrawStart', 'onDrawComplete']) // 定义 emits
159112
160-
// 定义 Props
161-
const props = defineProps({})
162-
// 定义 emits
163-
const emits = defineEmits(['onDrawStart', 'onDrawComplete'])
164-
165-
/** 热词 - click */
113+
/** 选择热词 */
166114
const handleHotWordClick = async (hotWord: string) => {
167-
// 取消选中
115+
// 情况一：取消选中
168116
if (selectHotWord.value == hotWord) {
169117
selectHotWord.value = ''
170118
return
171119
}
172-
// 选中
120+
121+
// 情况二：选中
173122
selectHotWord.value = hotWord
174-
// 替换提示词
175123
prompt.value = hotWord
176124
}
177125
178-
/** 模型 - click */
126+
/** 选择 model 模型 */
179127
const handleModelClick = async (model: ImageModelVO) => {
180-
model.value = model.key
128+
selectModel.value = model.key
181129
}
182130
183-
/** 样式 - click */
131+
/** 选择 style 样式 */
184132
const handleStyleClick = async (imageStyle: ImageModelVO) => {
185-
selectImageStyle.value = imageStyle.key
133+
style.value = imageStyle.key
186134
}
187135
188-
/** size - click */
136+
/** 选择 size 大小 */
189137
const handleSizeClick = async (imageSize: ImageSizeVO) => {
190-
size.value = imageSize.key
138+
selectSize.value = imageSize.key
191139
}
192140
193141
/** 图片生产 */
@@ -198,37 +146,35 @@ const handleGenerateImage = async () => {
198146
// 加载中
199147
drawIn.value = true
200148
// 回调
201-
emits('onDrawStart', model.value)
202-
const imageSize = imageSizeList.value.find((item) => item.key === size.value) as ImageSizeVO
149+
emits('onDrawStart', AiPlatformEnum.OPENAI)
150+
const imageSize = Dall3SizeList.find((item) => item.key === selectSize.value) as ImageSizeVO
203151
const form = {
204-
platform: 'OpenAI',
152+
platform: AiPlatformEnum.OPENAI,
205153
prompt: prompt.value, // 提示词
206-
model: model.value, // 模型
154+
model: selectModel.value, // 模型
207155
width: imageSize.width, // size 不能为空
208156
height: imageSize.height, // size 不能为空
209157
options: {
210-
style: selectImageStyle.value // 图像生成的风格
158+
style: style.value // 图像生成的风格
211159
}
212160
} as ImageDrawReqVO
213161
// 发送请求
214162
await ImageApi.drawImage(form)
215163
} finally {
216164
// 回调
217-
emits('onDrawComplete', model.value)
165+
emits('onDrawComplete', AiPlatformEnum.OPENAI)
218166
// 加载结束
219167
drawIn.value = false
220168
}
221169
}
222170
223171
/** 填充值 */
224-
const settingValues = async (imageDetail: ImageVO) => {
225-
prompt.value = imageDetail.prompt
226-
model.value = imageDetail.model
227-
//
228-
selectImageStyle.value = imageDetail.options?.style
229-
//
230-
const imageSize = imageSizeList.value.find(
231-
(item) => item.key === `${imageDetail.width}x${imageDetail.height}`
172+
const settingValues = async (detail: ImageVO) => {
173+
prompt.value = detail.prompt
174+
selectModel.value = detail.model
175+
style.value = detail.options?.style
176+
const imageSize = Dall3SizeList.find(
177+
(item) => item.key === `${detail.width}x${detail.height}`
232178
) as ImageSizeVO
233179
await handleSizeClick(imageSize)
234180
}

‎src/views/ai/image/index/components/stableDiffusion/index.vue

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@
137137
import { ImageApi, ImageDrawReqVO, ImageVO } from '@/api/ai/image'
138138
import { hasChinese } from '@/views/ai/utils/utils'
139139
import {
140+
AiPlatformEnum,
140141
ImageHotEnglishWords,
141142
StableDiffusionClipGuidancePresets,
142143
StableDiffusionSamplers,
@@ -187,10 +188,10 @@ const handleGenerateImage = async () => {
187188
// 加载中
188189
drawIn.value = true
189190
// 回调
190-
emits('onDrawStart', 'StableDiffusion')
191+
emits('onDrawStart', AiPlatformEnum.STABLE_DIFFUSION)
191192
// 发送请求
192193
const form = {
193-
platform: 'StableDiffusion',
194+
platform: AiPlatformEnum.STABLE_DIFFUSION,
194195
model: 'stable-diffusion-v1-6',
195196
prompt: prompt.value, // 提示词
196197
width: width.value, // 图片宽度
@@ -207,7 +208,7 @@ const handleGenerateImage = async () => {
207208
await ImageApi.drawImage(form)
208209
} finally {
209210
// 回调
210-
emits('onDrawComplete', 'StableDiffusion')
211+
emits('onDrawComplete', AiPlatformEnum.STABLE_DIFFUSION)
211212
// 加载结束
212213
drawIn.value = false
213214
}

‎src/views/ai/utils/constants.ts

Lines changed: 53 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export interface ImageModelVO {
6666
image?: string
6767
}
6868

69-
export const StableDiffusionSamplers = ref<ImageModelVO[]>([
69+
export const StableDiffusionSamplers: ImageModelVO[] = [
7070
{
7171
key: 'DDIM',
7272
name: 'DDIM'
@@ -107,9 +107,9 @@ export const StableDiffusionSamplers = ref<ImageModelVO[]>([
107107
key: 'K_LMS',
108108
name: 'K_LMS'
109109
}
110-
])
110+
]
111111

112-
export const StableDiffusionStylePresets = ref<ImageModelVO[]>([
112+
export const StableDiffusionStylePresets: ImageModelVO[] = [
113113
{
114114
key: '3d-model',
115115
name: '3d-model'
@@ -179,9 +179,9 @@ export const StableDiffusionStylePresets = ref<ImageModelVO[]>([
179179
key: 'tile-texture',
180180
name: 'tile-texture'
181181
}
182-
])
182+
]
183183

184-
export const StableDiffusionClipGuidancePresets = ref<ImageModelVO[]>([
184+
export const StableDiffusionClipGuidancePresets: ImageModelVO[] = [
185185
{
186186
key: 'NONE',
187187
name: 'NONE'
@@ -210,9 +210,9 @@ export const StableDiffusionClipGuidancePresets = ref<ImageModelVO[]>([
210210
key: 'SLOWEST',
211211
name: 'SLOWEST'
212212
}
213-
])
213+
]
214214

215-
export const Dall3Models = ref<ImageModelVO[]>([
215+
export const Dall3Models: ImageModelVO[] = [
216216
{
217217
key: 'dall-e-3',
218218
name: 'DALL·E 3',
@@ -223,4 +223,49 @@ export const Dall3Models = ref<ImageModelVO[]>([
223223
name: 'DALL·E 2',
224224
image: `/src/assets/ai/dall3.jpg`
225225
}
226-
])
226+
]
227+
228+
export const Dall3StyleList: ImageModelVO[] = [
229+
{
230+
key: 'vivid',
231+
name: '清晰',
232+
image: `/src/assets/ai/qingxi.jpg`
233+
},
234+
{
235+
key: 'natural',
236+
name: '自然',
237+
image: `/src/assets/ai/ziran.jpg`
238+
}
239+
]
240+
241+
interface ImageSizeVO {
242+
key: string
243+
name: string
244+
style: string
245+
width: string
246+
height: string
247+
}
248+
249+
export const Dall3SizeList: ImageSizeVO[] = [
250+
{
251+
key: '1024x1024',
252+
name: '1:1',
253+
width: '1024',
254+
height: '1024',
255+
style: 'width: 30px; height: 30px;background-color: #dcdcdc;'
256+
},
257+
{
258+
key: '1024x1792',
259+
name: '3:5',
260+
width: '1024',
261+
height: '1792',
262+
style: 'width: 30px; height: 50px;background-color: #dcdcdc;'
263+
},
264+
{
265+
key: '1792x1024',
266+
name: '5:3',
267+
width: '1792',
268+
height: '1024',
269+
style: 'width: 50px; height: 30px;background-color: #dcdcdc;'
270+
}
271+
]

0 commit comments

Comments
 (0)