Skip to content

Commit 3c4327e

Browse files
YunaiVYunaiV
committed
【代码评审】AI：绘制功能的测试和 review
1 parent 1eacbe6 commit 3c4327e

File tree

6 files changed

+67
-45
lines changed

6 files changed

+67
-45
lines changed

‎src/api/ai/image/index.ts

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import request from '@/config/axios'
22

33
// AI API 密钥 VO
4+
// TODO @fan：要不前端不弄太多 VO，就用这个 ImageDetailVO？！
45
export interface ImageDetailVO {
56
id: number // 编号
67
prompt: string // 提示词
7-
status: string // 状态
8+
status: number // 状态
89
errorMessage: string // 错误信息
910
type: string // 模型下分不同的类型(清晰、真实...)
1011
taskId: number // dr 任务id
@@ -31,11 +32,14 @@ export interface ImageDallReqVO {
3132
height: string // 图片高度
3233
}
3334

34-
export interface ImageDallReqVO {
35+
export interface ImageDrawReqVO {
36+
platform: string // 平台
3537
prompt: string // 提示词
3638
model: string // 模型
3739
style: string // 图像生成的风格
38-
size: string // size不能为空
40+
width: string // 图片宽度
41+
height: string // 图片高度
42+
options: object // 绘制参数，Map<String, String>
3943
}
4044

4145
export interface ImageMidjourneyImagineReqVO {
@@ -57,9 +61,9 @@ export const ImageApi = {
5761
getImageDetail: async (id: number) => {
5862
return await request.get({ url: `/ai/image/get-my?id=${id}`})
5963
},
60-
// dall2、dall3 调用
61-
dall: async (data: ImageDallReqVO)=> {
62-
return await request.post({ url: `/ai/image/dall`, data })
64+
// 生成图片
65+
drawImage: async (data: ImageDrawReqVO)=> {
66+
return await request.post({ url: `/ai/image/draw`, data })
6367
},
6468
// midjourney - imagine
6569
midjourneyImagine: async (data: ImageMidjourneyImagineReqVO)=> {

‎src/views/ai/image/ImageDetailDrawer.vue

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@
55
@close="handlerDrawerClose"
66
custom-class="drawer-class"
77
>
8-
<!-- 图片 -->
8+
<!-- 图片 -->
99
<div class="item">
1010
<!-- <div class="header">-->
1111
<!-- <div>图片</div>-->
1212
<!-- <div>-->
1313
<!-- </div>-->
1414
<!-- </div>-->
1515
<div class="body">
16+
<!-- TODO @fan: 要不，这里只展示图片？？？不用 ImageTaskCard -->
1617
<ImageTaskCard :image-detail="imageDetail" />
1718
</div>
1819
</div>
@@ -21,6 +22,7 @@
2122
<div class="tip">时间</div>
2223
<div class="body">
2324
<div>提交时间：{{imageDetail.createTime}}</div>
25+
<!-- TODO @fan：要不加个完成时间的字段 finishTime？updateTime 不算特别合理哈 -->
2426
<div>生成时间：{{imageDetail.updateTime}}</div>
2527
</div>
2628
</div>
@@ -38,34 +40,35 @@
3840
{{imageDetail.prompt}}
3941
</div>
4042
</div>
41-
<!-- 风格 -->
42-
<div class="item">
43-
<div class="tip">风格</div>
44-
<div class="body">
45-
{{imageDetail.style}}
46-
</div>
47-
</div>
4843
<!-- 地址 -->
4944
<div class="item">
50-
<div class="tip">地址</div>
45+
<div class="tip">图片地址</div>
5146
<div class="body">
5247
{{imageDetail.picUrl}}
5348
</div>
5449
</div>
55-
<!-- 生成地址 -->
50+
<!-- 生成地址 TODO @fan：这个字段我删除了，要不干掉？ -->
5651
<div class="item">
5752
<div class="tip">生成地址</div>
5853
<div class="body">
5954
{{imageDetail.originalPicUrl}}
6055
</div>
6156
</div>
57+
<!-- 风格 -->
58+
<div class="item">
59+
<div class="tip">风格</div>
60+
<div class="body">
61+
<!-- TODO @fan：貌似需要把 imageStyleList 搞到 api/image/index.ts 枚举起来？ -->
62+
<!-- TODO @fan：这里的展示，可能需要按照平台做区分 -->
63+
{{imageDetail.options.style}}
64+
</div>
65+
</div>
6266
</el-drawer>
6367
</template>
6468

6569
<script setup lang="ts">
6670
import {ImageApi, ImageDetailVO} from '@/api/ai/image';
6771
import ImageTaskCard from './ImageTaskCard.vue';
68-
import {Delete, Download, More} from "@element-plus/icons-vue";
6972
7073
const showDrawer = ref<boolean>(false) // 是否显示
7174
const imageDetail = ref<ImageDetailVO>({} as ImageDetailVO) // 图片详细信息

‎src/views/ai/image/ImageTask.vue

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
<template>
32
<el-card class="dr-task" body-class="task-card" shadow="never">
43
<template #header>绘画任务</template>
@@ -19,15 +18,16 @@
1918
import {ImageApi, ImageDetailVO} from '@/api/ai/image';
2019
import ImageDetailDrawer from './ImageDetailDrawer.vue'
2120
import ImageTaskCard from './ImageTaskCard.vue'
22-
import {bool} from "vue-types";
2321
2422
const message = useMessage() // 消息弹窗
2523
2624
const imageList = ref<ImageDetailVO[]>([]) // image 列表
2725
const imageListInterval = ref<any>() // image 列表定时器，刷新列表
28-
const isShowImageDetail = ref<bool>(false) // 是否显示 task 详情
26+
const isShowImageDetail = ref<boolean>(false) // 是否显示 task 详情
2927
const showImageDetailId = ref<number>(0) // 是否显示 task 详情
3028
29+
// TODO @fan：如果是简单注释，建议用 /** */，主要是现在项目里是这种风格哈，保持一致好点~
30+
3131
/**
3232
* 抽屉 - close
3333
*/
@@ -72,6 +72,7 @@ const handlerImageBtnClick = async (type, imageDetail: ImageDetailVO) => {
7272
/**
7373
* 下载 - image
7474
*/
75+
// TODO @fan：貌似可以考虑抽到 download 里面，作为一个方法
7576
const downloadImage = async (imageUrl) => {
7677
const image = new Image()
7778
image.setAttribute('crossOrigin', 'anonymous')

‎src/views/ai/image/ImageTaskCard.vue

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@
22
<el-card body-class="" class="image-card">
33
<div class="image-operation">
44
<div>
5-
<el-button type="" text bg v-if="imageDetail.status === '10'">生成中</el-button>
6-
<el-button type="" text bg v-else-if="imageDetail.status === '20'">已完成</el-button>
7-
<el-button type="danger" text bg v-else-if="imageDetail.status === '30'">异常</el-button>
5+
<el-button type="primary" text bg v-if="imageDetail?.status === 10">生成中</el-button>
6+
<el-button text bg v-else-if="imageDetail?.status === 20">已完成</el-button>
7+
<el-button type="danger" text bg v-else-if="imageDetail?.status === 30">异常</el-button>
88
</div>
9+
<!-- TODO @fan：1）按钮要不调整成详情、下载、再次生成、删除？；2）如果是再次生成，就把当前的参数填写到左侧的框框里？ -->
910
<div>
1011
<el-button class="btn" text :icon="Download"
1112
@click="handlerBtnClick('download', imageDetail)"/>
@@ -14,8 +15,9 @@
1415
</div>
1516
</div>
1617
<div class="image-wrapper" ref="cardImageRef">
18+
<!-- TODO @fan：要不加个点击，大图预览？ -->
1719
<img class="image" :src="imageDetail?.picUrl"/>
18-
<div v-if="imageDetail.status === '30'">{{imageDetail.errorMessage}}</div>
20+
<div v-if="imageDetail?.status === 30">{{imageDetail?.errorMessage}}</div>
1921
</div>
2022
</el-card>
2123
</template>
@@ -42,8 +44,9 @@ const handlerBtnClick = async (type, imageDetail: ImageDetailVO) => {
4244
emits('onBtnClick', type, imageDetail)
4345
}
4446
45-
const handlerLoading = async (status: string) => {
46-
if (status === '10') {
47+
const handlerLoading = async (status: number) => {
48+
// TODO @fan：这个搞成 Loading 组件，然后通过数据驱动，这样搞可以哇？
49+
if (status === 10) {
4750
cardImageLoadingInstance.value = ElLoading.service({
4851
target: cardImageRef.value,
4952
text: '生成中...'

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

Lines changed: 28 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
<template>
33
<div class="prompt">
44
<el-text tag="b">画面描述</el-text>
5-
<el-text tag="p">建议使用“形容词+动词+风格”的格式，使用“，”隔开.</el-text>
5+
<el-text tag="p">建议使用“形容词+动词+风格”的格式，使用“，”隔开</el-text>
6+
<!-- TODO @fan：style 看看能不能哟 unocss 替代 -->
67
<el-input
78
v-model="prompt"
89
maxlength="1024"
@@ -32,7 +33,7 @@
3233
</div>
3334
<div class="model">
3435
<div>
35-
<el-text tag="b">模型</el-text>
36+
<el-text tag="b">模型选择</el-text>
3637
</div>
3738
<el-space wrap class="model-list">
3839
<div
@@ -52,14 +53,13 @@
5253
</div>
5354
<div class="image-style">
5455
<div>
55-
<el-text tag="b">样式</el-text>
56+
<el-text tag="b">风格选择</el-text>
5657
</div>
5758
<el-space wrap class="image-style-list">
5859
<div
5960
:class="selectImageStyle === imageStyle ? 'image-style-item selectImageStyle' : 'image-style-item'"
6061
v-for="imageStyle in imageStyleList"
61-
:key="imageStyle"
62-
62+
:key="imageStyle.key"
6363
>
6464
<el-image
6565
:src="imageStyle.image"
@@ -72,7 +72,7 @@
7272
</div>
7373
<div class="image-size">
7474
<div>
75-
<el-text tag="b">尺寸</el-text>
75+
<el-text tag="b">画面比例</el-text>
7676
</div>
7777
<el-space wrap class="size-list">
7878
<div class="size-item"
@@ -97,7 +97,7 @@
9797
</div>
9898
</template>
9999
<script setup lang="ts">
100-
import {ImageApi, ImageDallReqVO} from '@/api/ai/image';
100+
import {ImageApi, ImageDrawReqVO} from '@/api/ai/image';
101101
102102
// image 模型
103103
interface ImageModelVO {
@@ -109,6 +109,7 @@ interface ImageModelVO {
109109
// image 大小
110110
interface ImageSizeVO {
111111
key: string
112+
name: string,
112113
style: string,
113114
width: string,
114115
height: string,
@@ -120,21 +121,24 @@ const drawIn = ref<boolean>(false) // 生成中
120121
const selectHotWord = ref<string>('') // 选中的热词
121122
const hotWords = ref<string[]>(['中国旗袍', '古装美女', '卡通头像', '机甲战士', '童话小屋', '中国长城']) // 热词
122123
const selectModel = ref<any>({}) // 模型
124+
// TODO @fan：image 改成项目里自己的哈
125+
// TODO @fan：这个 image，要不看看网上有没合适的图片，作为占位符，啊哈哈
123126
const models = ref<ImageModelVO[]>([
124-
{
125-
key: 'dall-e-2',
126-
name: 'dall2',
127-
image: 'https://h5.cxyhub.com/images/model_1.png',
128-
},
129127
{
130128
key: 'dall-e-3',
131-
name: 'dall3',
129+
name: 'DALL·E 3',
132130
image: 'https://h5.cxyhub.com/images/model_2.png',
133131
},
132+
{
133+
key: 'dall-e-2',
134+
name: 'DALL·E 2',
135+
image: 'https://h5.cxyhub.com/images/model_1.png',
136+
},
134137
]) // 模型
135138
selectModel.value = models.value[0]
136139
137140
const selectImageStyle = ref<any>({}) // style 样式
141+
// TODO @fan：image 改成项目里自己的哈
138142
const imageStyleList = ref<ImageModelVO[]>([
139143
{
140144
key: 'vivid',
@@ -180,11 +184,13 @@ const props = defineProps({})
180184
// 定义 emits
181185
const emits = defineEmits(['onDrawStart', 'onDrawComplete'])
182186
187+
// TODO @fan：如果是简单注释，建议用 /** */，主要是现在项目里是这种风格哈，保持一致好点~
188+
// TODO @fan：handler 应该改成 handle 哈
183189
/**
184190
* 热词 - click
185191
*/
186192
const handlerHotWordClick = async (hotWord: string) => {
187-
// 取消
193+
// 取消选中
188194
if (selectHotWord.value == hotWord) {
189195
selectHotWord.value = ''
190196
return
@@ -238,14 +244,17 @@ const handlerGenerateImage = async () => {
238244
// 回调
239245
emits('onDrawStart', selectModel.value.key)
240246
const form = {
247+
platform: 'OpenAI',
241248
prompt: prompt.value, // 提示词
242249
model: selectModel.value.key, // 模型
243-
style: selectImageStyle.value.key, // 图像生成的风格
244-
width: selectImageSize.value.width, // size不能为空
245-
height: selectImageSize.value.height, // size不能为空
246-
} as ImageDallReqVO
250+
width: selectImageSize.value.width, // size 不能为空
251+
height: selectImageSize.value.height, // size 不能为空
252+
options: {
253+
style: selectImageStyle.value.key, // 图像生成的风格
254+
}
255+
} as ImageDrawReqVO
247256
// 发送请求
248-
await ImageApi.dall(form)
257+
await ImageApi.drawImage(form)
249258
} finally {
250259
// 回调
251260
emits('onDrawComplete', selectModel.value.key)

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<el-segmented v-model="selectModel" :options="modelOptions" />
77
</div>
88
<div class="modal-switch-container">
9+
<!-- TODO @fan：1）建议 Dall3 改成 OpenAI 绘图。因为 dall3 其实本质是模型；2）涉及到中英文的地方，中文和英文之间，有个空格哈 -->
910
<Dall3 v-if="selectModel === 'DALL3绘画'"
1011
@on-draw-start="handlerDrawStart"
1112
@on-draw-complete="handlerDrawComplete" />
@@ -19,6 +20,7 @@
1920
</template>
2021

2122
<script setup lang="ts">
23+
// TODO @fan：在整个挪到 /views/ai/image/index 目录。因为我想在 /views/ai/image/manager 做管理的功能，进行下区分！
2224
import Dall3 from './dall3/index.vue'
2325
import Midjourney from './midjourney/index.vue'
2426
import ImageTask from './ImageTask.vue'

0 commit comments

Comments
 (0)