feat(ai): 新增 AI 绘图功能

- 添加 AI 绘图相关的 API 接口和路由
- 实现 AI 绘图页面,支持不同平台的绘图功能
- 添加绘图作品列表和重新生成功能
- 优化绘图页面样式和布局
pull/145/head
gjd 2025-06-13 15:27:25 +08:00
parent 4596cd9fa5
commit 33b7a11a4e
24 changed files with 3035 additions and 23 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 121 KiB

View File

@ -40,7 +40,7 @@ export namespace AiImageApi {
export interface ImageMidjourneyImagineReqVO {
prompt: string; // 提示词
modelId: number; // 模型
base64Array: string[]; // size不能为空
base64Array?: string[]; // size不能为空
width: string; // 图片宽度
height: string; // 图片高度
version: string; // 版本
@ -62,7 +62,7 @@ export function getImagePageMy(params: PageParam) {
// 获取【我的】绘图记录
export function getImageMy(id: number) {
return requestClient.get<AiImageApi.ImageVO[]>(`/ai/image/get-my?id=${id}`);
return requestClient.get<AiImageApi.ImageVO>(`/ai/image/get-my?id=${id}`);
}
// 获取【我的】绘图记录列表

View File

@ -9,6 +9,18 @@ const routes: RouteRecordRaw[] = [
hideInMenu: true,
},
children: [
{
path: 'image/square',
component: () => import('#/views/ai/image/square/index.vue'),
name: 'AiImageSquare',
meta: {
noCache: true,
hidden: true,
canTo: true,
title: '绘图作品',
activePath: '/ai/image',
},
},
{
path: 'knowledge/document',
component: () => import('#/views/ai/knowledge/document/index.vue'),

View File

@ -30,7 +30,29 @@ export const AiModelTypeEnum = {
EMBEDDING: 5, // 向量
RERANK: 6, // 重排
};
export interface ImageModelVO {
key: string;
name: string;
image?: string;
}
export const OtherPlatformEnum: ImageModelVO[] = [
{
key: AiPlatformEnum.TONG_YI,
name: '通义万相',
},
{
key: AiPlatformEnum.YI_YAN,
name: '百度千帆',
},
{
key: AiPlatformEnum.ZHI_PU,
name: '智谱 AI',
},
{
key: AiPlatformEnum.SiliconFlow,
name: '硅基流动',
},
];
/**
* AI
*/
@ -55,6 +77,172 @@ export enum AiWriteTypeEnum {
WRITING = 1, // 撰写
REPLY, // 回复
}
// ========== 【图片 UI】相关的枚举 ==========
export const ImageHotWords = [
'中国旗袍',
'古装美女',
'卡通头像',
'机甲战士',
'童话小屋',
'中国长城',
]; // 图片热词
export const ImageHotEnglishWords = [
'Chinese Cheongsam',
'Ancient Beauty',
'Cartoon Avatar',
'Mech Warrior',
'Fairy Tale Cottage',
'The Great Wall of China',
]; // 图片热词(英文)
export const StableDiffusionSamplers: ImageModelVO[] = [
{
key: 'DDIM',
name: 'DDIM',
},
{
key: 'DDPM',
name: 'DDPM',
},
{
key: 'K_DPMPP_2M',
name: 'K_DPMPP_2M',
},
{
key: 'K_DPMPP_2S_ANCESTRAL',
name: 'K_DPMPP_2S_ANCESTRAL',
},
{
key: 'K_DPM_2',
name: 'K_DPM_2',
},
{
key: 'K_DPM_2_ANCESTRAL',
name: 'K_DPM_2_ANCESTRAL',
},
{
key: 'K_EULER',
name: 'K_EULER',
},
{
key: 'K_EULER_ANCESTRAL',
name: 'K_EULER_ANCESTRAL',
},
{
key: 'K_HEUN',
name: 'K_HEUN',
},
{
key: 'K_LMS',
name: 'K_LMS',
},
];
export const StableDiffusionStylePresets: ImageModelVO[] = [
{
key: '3d-model',
name: '3d-model',
},
{
key: 'analog-film',
name: 'analog-film',
},
{
key: 'anime',
name: 'anime',
},
{
key: 'cinematic',
name: 'cinematic',
},
{
key: 'comic-book',
name: 'comic-book',
},
{
key: 'digital-art',
name: 'digital-art',
},
{
key: 'enhance',
name: 'enhance',
},
{
key: 'fantasy-art',
name: 'fantasy-art',
},
{
key: 'isometric',
name: 'isometric',
},
{
key: 'line-art',
name: 'line-art',
},
{
key: 'low-poly',
name: 'low-poly',
},
{
key: 'modeling-compound',
name: 'modeling-compound',
},
// neon-punk origami photographic pixel-art tile-texture
{
key: 'neon-punk',
name: 'neon-punk',
},
{
key: 'origami',
name: 'origami',
},
{
key: 'photographic',
name: 'photographic',
},
{
key: 'pixel-art',
name: 'pixel-art',
},
{
key: 'tile-texture',
name: 'tile-texture',
},
];
export const StableDiffusionClipGuidancePresets: ImageModelVO[] = [
{
key: 'NONE',
name: 'NONE',
},
{
key: 'FAST_BLUE',
name: 'FAST_BLUE',
},
{
key: 'FAST_GREEN',
name: 'FAST_GREEN',
},
{
key: 'SIMPLE',
name: 'SIMPLE',
},
{
key: 'SLOW',
name: 'SLOW',
},
{
key: 'SLOWER',
name: 'SLOWER',
},
{
key: 'SLOWEST',
name: 'SLOWEST',
},
];
// ========== COMMON 模块 ==========
// 全局通用状态枚举
export const CommonStatusEnum = {
@ -142,7 +330,136 @@ export const InfraApiErrorLogProcessStatusEnum = {
DONE: 1, // 已处理
IGNORE: 2, // 已忽略
};
export interface ImageSizeVO {
key: string;
name?: string;
style: string;
width: string;
height: string;
}
export const Dall3SizeList: ImageSizeVO[] = [
{
key: '1024x1024',
name: '1:1',
width: '1024',
height: '1024',
style: 'width: 30px; height: 30px;background-color: #dcdcdc;',
},
{
key: '1024x1792',
name: '3:5',
width: '1024',
height: '1792',
style: 'width: 30px; height: 50px;background-color: #dcdcdc;',
},
{
key: '1792x1024',
name: '5:3',
width: '1792',
height: '1024',
style: 'width: 50px; height: 30px;background-color: #dcdcdc;',
},
];
export const Dall3Models: ImageModelVO[] = [
{
key: 'dall-e-3',
name: 'DALL·E 3',
image: `/static/dall2.jpg`,
},
{
key: 'dall-e-2',
name: 'DALL·E 2',
image: `/static/dall3.jpg`,
},
];
export const Dall3StyleList: ImageModelVO[] = [
{
key: 'vivid',
name: '清晰',
image: `/static/qingxi.jpg`,
},
{
key: 'natural',
name: '自然',
image: `/static/ziran.jpg`,
},
];
export const MidjourneyModels: ImageModelVO[] = [
{
key: 'midjourney',
name: 'MJ',
image: 'https://bigpt8.com/pc/_nuxt/mj.34a61377.png',
},
{
key: 'niji',
name: 'NIJI',
image: 'https://bigpt8.com/pc/_nuxt/nj.ca79b143.png',
},
];
export const MidjourneyVersions = [
{
value: '6.0',
label: 'v6.0',
},
{
value: '5.2',
label: 'v5.2',
},
{
value: '5.1',
label: 'v5.1',
},
{
value: '5.0',
label: 'v5.0',
},
{
value: '4.0',
label: 'v4.0',
},
];
export const NijiVersionList = [
{
value: '5',
label: 'v5',
},
];
export const MidjourneySizeList: ImageSizeVO[] = [
{
key: '1:1',
width: '1',
height: '1',
style: 'width: 30px; height: 30px;background-color: #dcdcdc;',
},
{
key: '3:4',
width: '3',
height: '4',
style: 'width: 30px; height: 40px;background-color: #dcdcdc;',
},
{
key: '4:3',
width: '4',
height: '3',
style: 'width: 40px; height: 30px;background-color: #dcdcdc;',
},
{
key: '9:16',
width: '9',
height: '16',
style: 'width: 30px; height: 50px;background-color: #dcdcdc;',
},
{
key: '16:9',
width: '16',
height: '9',
style: 'width: 50px; height: 30px;background-color: #dcdcdc;',
},
];
// ========== PAY 模块 ==========
/**
*

View File

@ -1,3 +1,79 @@
import dayjs from 'dayjs';
/**
*
* @param date new Date()
* @param format
* @description format `YYYY-MM、YYYY-MM-DD`
* @description format "YYYY-MM-DD HH:mm:ss QQQQ"
* @description format "YYYY-MM-DD HH:mm:ss WWW"
* @description format "YYYY-MM-DD HH:mm:ss ZZZ"
* @description format + + "YYYY-MM-DD HH:mm:ss WWW QQQQ ZZZ"
* @returns
*/
export function formatDate(date: Date, format?: string): string {
// 日期不存在,则返回空
if (!date) {
return '';
}
// 日期存在,则进行格式化
return date ? dayjs(date).format(format ?? 'YYYY-MM-DD HH:mm:ss') : '';
}
/**
* `几秒前``几分钟前``几小时前``几天前`
* @param param new Date()
* @param format
* @description param 10 10 * 1000
* @description param 1 60 * 1000
* @description param 1 60 * 60 * 1000
* @description param 2460 * 60 * 24 * 1000
* @description param 3 60 * 60* 24 * 1000 * 3
* @returns
*/
export function formatPast(
param: Date | string,
format = 'YYYY-MM-DD HH:mm:ss',
): string {
// 传入格式处理、存储转换值
let s: number, t: any;
// 获取js 时间戳
let time: number = Date.now();
// 是否是对象
typeof param === 'string' || typeof param === 'object'
? (t = new Date(param).getTime())
: (t = param);
// 当前时间戳 - 传入时间戳
time = Number.parseInt(`${time - t}`);
if (time < 10_000) {
// 10秒内
return '刚刚';
} else if (time < 60_000 && time >= 10_000) {
// 超过10秒少于1分钟内
s = Math.floor(time / 1000);
return `${s}秒前`;
} else if (time < 3_600_000 && time >= 60_000) {
// 超过1分钟少于1小时
s = Math.floor(time / 60_000);
return `${s}分钟前`;
} else if (time < 86_400_000 && time >= 3_600_000) {
// 超过1小时少于24小时
s = Math.floor(time / 3_600_000);
return `${s}小时前`;
} else if (time < 259_200_000 && time >= 86_400_000) {
// 超过1天少于3天内
s = Math.floor(time / 86_400_000);
return `${s}天前`;
} else {
// 超过3天
const date =
typeof param === 'string' || typeof param === 'object'
? new Date(param)
: param;
return formatDate(date, format);
}
}
/**
* xx
*
@ -30,3 +106,39 @@ export function formatPast2(ms: number): string {
}
return second > 0 ? `${second}` : `${0}`;
}
/**
* @param {Date | number | string} time
* @param {string} fmt yyyy-MM-ddyyyy-MM-dd HH:mm:ss
*/
export function formatTime(time: Date | number | string, fmt: string) {
if (time) {
const date = new Date(time);
const o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'H+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds(),
'q+': Math.floor((date.getMonth() + 3) / 3),
S: date.getMilliseconds(),
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(
RegExp.$1,
`${date.getFullYear()}`.slice(4 - RegExp.$1.length),
);
}
for (const k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length === 1 ? o[k] : `00${o[k]}`.slice(`${o[k]}`.length),
);
}
}
return fmt;
} else {
return '';
}
}

View File

@ -7,3 +7,4 @@ export * from './formCreate';
export * from './rangePickerProps';
export * from './routerHelper';
export * from './upload';
export * from './utils';

View File

@ -0,0 +1,13 @@
/**
* Created by
*
* AI
*
* src/utils/common-utils.ts
* AI /views/ai/utils/common-utils.ts
*/
/** 判断字符串是否包含中文 */
export const hasChinese = (str: string) => {
return /[\u4E00-\u9FA5]/.test(str);
};

View File

@ -0,0 +1,175 @@
<script setup lang="ts">
import type { PropType } from 'vue';
import type { AiImageApi } from '#/api/ai/image';
import { onMounted, ref, toRefs, watch } from 'vue';
import { confirm } from '@vben/common-ui';
import { Button, Card, Image, message } from 'ant-design-vue';
import { AiImageStatusEnum } from '#/utils/constants';
//
const props = defineProps({
detail: {
type: Object as PropType<AiImageApi.ImageVO>,
default: () => ({}),
},
});
const emits = defineEmits(['onBtnClick', 'onMjBtnClick']);
const cardImageRef = ref<any>(); // image ref
/** 处理点击事件 */
const handleButtonClick = async (type: string, detail: AiImageApi.ImageVO) => {
emits('onBtnClick', type, detail);
};
/** 处理 Midjourney 按钮点击事件 */
const handleMidjourneyBtnClick = async (
button: AiImageApi.ImageMidjourneyButtonsVO,
) => {
//
await confirm(`确认操作 "${button.label} ${button.emoji}" ?`);
emits('onMjBtnClick', button, props.detail);
};
// emits
/** 监听详情 */
const { detail } = toRefs(props);
watch(detail, async (newVal) => {
await handleLoading(newVal.status);
});
const loading = ref();
/** 处理加载状态 */
const handleLoading = async (status: number) => {
// loading
if (status === AiImageStatusEnum.IN_PROGRESS) {
loading.value = message.loading({
content: `生成中...`,
});
// loading
} else {
if (loading.value) setTimeout(loading.value, 100);
}
};
/** 初始化 */
onMounted(async () => {
await handleLoading(props.detail.status);
});
</script>
<template>
<Card body-class="" class="image-card">
<div class="image-operation">
<div>
<Button v-if="detail?.status === AiImageStatusEnum.IN_PROGRESS">
生成中
</Button>
<Button v-else-if="detail?.status === AiImageStatusEnum.SUCCESS">
已完成
</Button>
<Button danger v-else-if="detail?.status === AiImageStatusEnum.FAIL">
异常
</Button>
</div>
<!-- 操作区 -->
<div>
<Button
class="btn"
type="text"
@click="handleButtonClick('download', detail)"
>
<span class="icon-[ant-design--download-outlined]"></span>
</Button>
<Button
class="btn"
type="text"
@click="handleButtonClick('regeneration', detail)"
>
<span class="icon-[ant-design--redo-outlined]"></span>
</Button>
<Button
class="btn"
type="text"
@click="handleButtonClick('delete', detail)"
>
<span class="icon-[ant-design--delete-outlined]"></span>
</Button>
<Button
class="btn"
type="text"
@click="handleButtonClick('more', detail)"
>
<span class="icon-[ant-design--more-outlined]"></span>
</Button>
</div>
</div>
<div class="image-wrapper" ref="cardImageRef">
<Image class="image" :src="detail?.picUrl" />
<div v-if="detail?.status === AiImageStatusEnum.FAIL">
{{ detail?.errorMessage }}
</div>
</div>
<!-- Midjourney 专属操作 -->
<div class="image-mj-btns">
<Button
size="small"
v-for="(button, index) in detail?.buttons"
:key="index"
class="ml-0 mr-[10px] mt-[5px] min-w-[40px]"
@click="handleMidjourneyBtnClick(button)"
>
{{ button.label }}{{ button.emoji }}
</Button>
</div>
</Card>
</template>
<style scoped lang="scss">
.image-card {
position: relative;
display: flex;
flex-direction: column;
width: 320px;
height: auto;
border-radius: 10px;
.image-operation {
display: flex;
flex-direction: row;
justify-content: space-between;
.btn {
//border: 1px solid red;
padding: 10px;
margin: 0;
}
}
.image-wrapper {
flex: 1;
height: 280px;
margin-top: 20px;
overflow: hidden;
.image {
width: 100%;
border-radius: 10px;
}
}
.image-mj-btns {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
width: 100%;
margin-top: 5px;
}
}
</style>

View File

@ -0,0 +1,236 @@
<script setup lang="ts">
import type { AiImageApi } from '#/api/ai/image';
import type { ImageModelVO } from '#/utils/constants';
import { ref, toRefs, watch } from 'vue';
import { Image } from 'ant-design-vue';
import { getImageMy } from '#/api/ai/image';
import {
AiPlatformEnum,
Dall3StyleList,
StableDiffusionClipGuidancePresets,
StableDiffusionSamplers,
StableDiffusionStylePresets,
} from '#/utils/constants';
import { formatTime } from '#/utils/formatTime';
//
const props = defineProps({
id: {
type: Number,
required: true,
},
});
const detail = ref<AiImageApi.ImageVO>({} as AiImageApi.ImageVO);
/** 获取图片详情 */
const getImageDetail = async (id: number) => {
detail.value = await getImageMy(id);
};
const { id } = toRefs(props);
watch(
id,
async (newVal) => {
if (newVal) {
await getImageDetail(newVal);
}
},
{ immediate: true },
);
</script>
<template>
<div class="item">
<div class="body">
<Image class="image" :src="detail?.picUrl" />
</div>
</div>
<!-- 时间 -->
<div class="item">
<div class="tip">时间</div>
<div class="body">
<div>
提交时间{{ formatTime(detail.createTime, 'yyyy-MM-dd HH:mm:ss') }}
</div>
<div>
生成时间{{ formatTime(detail.finishTime, 'yyyy-MM-dd HH:mm:ss') }}
</div>
</div>
</div>
<!-- 模型 -->
<div class="item">
<div class="tip">模型</div>
<div class="body">
{{ detail.model }}({{ detail.height }}x{{ detail.width }})
</div>
</div>
<!-- 提示词 -->
<div class="item">
<div class="tip">提示词</div>
<div class="body">
{{ detail.prompt }}
</div>
</div>
<!-- 地址 -->
<div class="item">
<div class="tip">图片地址</div>
<div class="body">
{{ detail.picUrl }}
</div>
</div>
<!-- StableDiffusion 专属区域 -->
<div
class="item"
v-if="
detail.platform === AiPlatformEnum.STABLE_DIFFUSION &&
detail?.options?.sampler
"
>
<div class="tip">采样方法</div>
<div class="body">
{{
StableDiffusionSamplers.find(
(item: ImageModelVO) => item.key === detail?.options?.sampler,
)?.name
}}
</div>
</div>
<div
class="item"
v-if="
detail.platform === AiPlatformEnum.STABLE_DIFFUSION &&
detail?.options?.clipGuidancePreset
"
>
<div class="tip">CLIP</div>
<div class="body">
{{
StableDiffusionClipGuidancePresets.find(
(item: ImageModelVO) =>
item.key === detail?.options?.clipGuidancePreset,
)?.name
}}
</div>
</div>
<div
class="item"
v-if="
detail.platform === AiPlatformEnum.STABLE_DIFFUSION &&
detail?.options?.stylePreset
"
>
<div class="tip">风格</div>
<div class="body">
{{
StableDiffusionStylePresets.find(
(item: ImageModelVO) => item.key === detail?.options?.stylePreset,
)?.name
}}
</div>
</div>
<div
class="item"
v-if="
detail.platform === AiPlatformEnum.STABLE_DIFFUSION &&
detail?.options?.steps
"
>
<div class="tip">迭代步数</div>
<div class="body">
{{ detail?.options?.steps }}
</div>
</div>
<div
class="item"
v-if="
detail.platform === AiPlatformEnum.STABLE_DIFFUSION &&
detail?.options?.scale
"
>
<div class="tip">引导系数</div>
<div class="body">
{{ detail?.options?.scale }}
</div>
</div>
<div
class="item"
v-if="
detail.platform === AiPlatformEnum.STABLE_DIFFUSION &&
detail?.options?.seed
"
>
<div class="tip">随机因子</div>
<div class="body">
{{ detail?.options?.seed }}
</div>
</div>
<!-- Dall3 专属区域 -->
<div
class="item"
v-if="detail.platform === AiPlatformEnum.OPENAI && detail?.options?.style"
>
<div class="tip">风格选择</div>
<div class="body">
{{
Dall3StyleList.find(
(item: ImageModelVO) => item.key === detail?.options?.style,
)?.name
}}
</div>
</div>
<!-- Midjourney 专属区域 -->
<div
class="item"
v-if="
detail.platform === AiPlatformEnum.MIDJOURNEY && detail?.options?.version
"
>
<div class="tip">模型版本</div>
<div class="body">
{{ detail?.options?.version }}
</div>
</div>
<div
class="item"
v-if="
detail.platform === AiPlatformEnum.MIDJOURNEY &&
detail?.options?.referImageUrl
"
>
<div class="tip">参考图</div>
<div class="body">
<Image :src="detail.options.referImageUrl" />
</div>
</div>
</template>
<style scoped lang="scss">
.item {
width: 100%;
margin-bottom: 20px;
overflow: hidden;
word-wrap: break-word;
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.tip {
font-size: 16px;
font-weight: bold;
}
.body {
margin-top: 10px;
color: #616161;
.taskImage {
border-radius: 10px;
}
}
}
</style>

View File

@ -0,0 +1,250 @@
<script setup lang="ts">
import type { AiImageApi } from '#/api/ai/image';
import { onMounted, onUnmounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { confirm, useVbenDrawer } from '@vben/common-ui';
import { useDebounceFn } from '@vueuse/core';
import { Button, Card, message, Pagination } from 'ant-design-vue';
import {
deleteImageMy,
getImageListMyByIds,
getImagePageMy,
midjourneyAction,
} from '#/api/ai/image';
import { AiImageStatusEnum } from '#/utils/constants';
import { download } from '#/utils/download';
import ImageCard from './ImageCard.vue';
import ImageDetail from './ImageDetail.vue';
//
const emits = defineEmits(['onRegeneration']);
const router = useRouter(); //
const [Drawer, drawerApi] = useVbenDrawer({
title: '图片详情',
footer: false,
});
//
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
});
const pageTotal = ref<number>(0); // page size
const imageList = ref<AiImageApi.ImageVO[]>([]); // image
const imageListRef = ref<any>(); // ref
//
const inProgressImageMap = ref<{}>({}); // image key image value image
const inProgressTimer = ref<any>(); // image
const showImageDetailId = ref<number>(0); //
/** 处理查看绘图作品 */
const handleViewPublic = () => {
router.push({
name: 'AiImageSquare',
});
};
/** 查看图片的详情 */
const handleDetailOpen = async () => {
drawerApi.open();
};
/** 获得 image 图片列表 */
const getImageList = async () => {
const loading = message.loading({
content: `加载中...`,
});
try {
// 1.
const { list, total } = await getImagePageMy(queryParams);
imageList.value = list;
pageTotal.value = total;
// 2.
const newWatImages: any = {};
imageList.value.forEach((item: any) => {
if (item.status === AiImageStatusEnum.IN_PROGRESS) {
newWatImages[item.id] = item;
}
});
inProgressImageMap.value = newWatImages;
} finally {
// Loading
loading();
}
};
const debounceGetImageList = useDebounceFn(getImageList, 80);
/** 轮询生成中的 image 列表 */
const refreshWatchImages = async () => {
const imageIds = Object.keys(inProgressImageMap.value).map(Number);
if (imageIds.length === 0) {
return;
}
const list = (await getImageListMyByIds(imageIds)) as AiImageApi.ImageVO[];
const newWatchImages: any = {};
list.forEach((image) => {
if (image.status === AiImageStatusEnum.IN_PROGRESS) {
newWatchImages[image.id] = image;
} else {
const index = imageList.value.findIndex(
(oldImage) => image.id === oldImage.id,
);
if (index !== -1) {
// imageList
imageList.value[index] = image;
}
}
});
inProgressImageMap.value = newWatchImages;
};
/** 图片的点击事件 */
const handleImageButtonClick = async (
type: string,
imageDetail: AiImageApi.ImageVO,
) => {
//
if (type === 'more') {
showImageDetailId.value = imageDetail.id;
await handleDetailOpen();
return;
}
//
if (type === 'delete') {
await confirm(`是否删除照片?`);
await deleteImageMy(imageDetail.id);
await getImageList();
message.success('删除成功!');
return;
}
//
if (type === 'download') {
await download.image({ url: imageDetail.picUrl });
return;
}
//
if (type === 'regeneration') {
await emits('onRegeneration', imageDetail);
}
};
/** 处理 Midjourney 按钮点击事件 */
const handleImageMidjourneyButtonClick = async (
button: AiImageApi.ImageMidjourneyButtonsVO,
imageDetail: AiImageApi.ImageVO,
) => {
// 1. params
const data = {
id: imageDetail.id,
customId: button.customId,
} as AiImageApi.ImageMidjourneyActionVO;
// 2. action
await midjourneyAction(data);
// 3.
await getImageList();
};
defineExpose({ getImageList }); /** 组件挂在的时候 */
onMounted(async () => {
// image
await getImageList();
// image
inProgressTimer.value = setInterval(async () => {
await refreshWatchImages();
}, 1000 * 3);
});
/** 组件取消挂在的时候 */
onUnmounted(async () => {
if (inProgressTimer.value) {
clearInterval(inProgressTimer.value);
}
});
</script>
<template>
<Drawer class="w-[600px]">
<ImageDetail :id="showImageDetailId" />
</Drawer>
<Card
class="dr-task"
:body-style="{
margin: 0,
padding: 0,
height: '100%',
position: 'relative',
}"
>
<template #title>
绘画任务
<!-- TODO @fan看看怎么优化下这个样子哈 -->
<Button @click="handleViewPublic"></Button>
</template>
<div class="task-image-list" ref="imageListRef">
<ImageCard
v-for="image in imageList"
:key="image.id"
:detail="image"
@on-btn-click="handleImageButtonClick"
@on-mj-btn-click="handleImageMidjourneyButtonClick"
/>
</div>
<div class="task-image-pagination">
<Pagination
:total="pageTotal"
:show-total="(total: number) => `共 ${total} 条`"
show-quick-jumper
show-size-changer
v-model:current="queryParams.pageNo"
v-model:page-size="queryParams.pageSize"
@change="debounceGetImageList"
@show-size-change="debounceGetImageList"
/>
</div>
</Card>
</template>
<style lang="scss">
.dr-task {
width: 100%;
height: 100%;
}
.task-image-list {
position: relative;
box-sizing: border-box; /* 确保内边距不会增加高度 */
display: flex;
flex-flow: row wrap;
align-content: flex-start;
height: 100%;
padding: 20px 20px 140px;
overflow: auto;
> div {
margin-right: 20px;
margin-bottom: 20px;
}
> div:last-of-type {
//margin-bottom: 100px;
}
}
.task-image-pagination {
position: absolute;
bottom: 60px;
z-index: 999;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
height: 50px;
line-height: 90px;
background-color: #fff;
}
</style>

View File

@ -0,0 +1,248 @@
<!-- dall3 -->
<script setup lang="ts">
import type { AiImageApi } from '#/api/ai/image';
import type { AiModelModelApi } from '#/api/ai/model/model';
import { ref, watch } from 'vue';
import { confirm } from '@vben/common-ui';
import { Button, InputNumber, Select, Space, Textarea } from 'ant-design-vue';
import { drawImage } from '#/api/ai/image';
import {
AiPlatformEnum,
ImageHotWords,
OtherPlatformEnum,
} from '#/utils/constants';
//
//
const props = defineProps({
models: {
type: Array<AiModelModelApi.ModelVO>,
default: () => [] as AiModelModelApi.ModelVO[],
},
});
const emits = defineEmits(['onDrawStart', 'onDrawComplete']);
//
const drawIn = ref<boolean>(false); //
const selectHotWord = ref<string>(''); //
//
const prompt = ref<string>(''); //
const width = ref<number>(512); //
const height = ref<number>(512); //
const otherPlatform = ref<string>(AiPlatformEnum.TONG_YI); //
const platformModels = ref<AiModelModelApi.ModelVO[]>([]); //
const modelId = ref<number>(); //
/** 选择热词 */
const handleHotWordClick = async (hotWord: string) => {
//
if (selectHotWord.value === hotWord) {
selectHotWord.value = '';
return;
}
//
selectHotWord.value = hotWord; //
prompt.value = hotWord; //
};
/** 图片生成 */
const handleGenerateImage = async () => {
//
await confirm(`确认生成内容?`);
try {
//
drawIn.value = true;
//
emits('onDrawStart', otherPlatform.value);
//
const form = {
platform: otherPlatform.value,
modelId: modelId.value, //
prompt: prompt.value, //
width: width.value, //
height: height.value, //
options: {},
} as unknown as AiImageApi.ImageDrawReqVO;
await drawImage(form);
} finally {
//
emits('onDrawComplete', otherPlatform.value);
//
drawIn.value = false;
}
};
/** 填充值 */
const settingValues = async (detail: AiImageApi.ImageVO) => {
prompt.value = detail.prompt;
width.value = detail.width;
height.value = detail.height;
};
/** 平台切换 */
const handlerPlatformChange = async (platform: any) => {
//
platformModels.value = props.models.filter(
(item: AiModelModelApi.ModelVO) => item.platform === platform,
);
modelId.value =
platformModels.value.length > 0 && platformModels.value[0]
? platformModels.value[0].id
: undefined;
//
};
/** 监听 models 变化 */
watch(
() => props.models,
() => {
handlerPlatformChange(otherPlatform.value);
},
{ immediate: true, deep: true },
);
/** 暴露组件方法 */
defineExpose({ settingValues });
</script>
<template>
<div class="prompt">
<b>画面描述</b>
<p>建议使用形容词 + 动词 + 风格的格式使用隔开</p>
<Textarea
v-model:value="prompt"
:maxlength="1024"
:rows="5"
class="w-100% mt-[15px]"
placeholder="例如:童话里的小屋应该是什么样子?"
show-count
/>
</div>
<div class="hot-words">
<div>
<b>随机热词</b>
</div>
<Space wrap class="word-list">
<Button
shape="round"
class="btn"
:type="selectHotWord === hotWord ? 'primary' : 'default'"
v-for="hotWord in ImageHotWords"
:key="hotWord"
@click="handleHotWordClick(hotWord)"
>
{{ hotWord }}
</Button>
</Space>
</div>
<div class="group-item">
<div>
<b>平台</b>
</div>
<Space wrap class="group-item-body">
<Select
v-model:value="otherPlatform"
placeholder="Select"
size="large"
class="!w-[330px]"
@change="handlerPlatformChange"
>
<Select.Option
v-for="item in OtherPlatformEnum"
:key="item.key"
:value="item.key"
>
{{ item.name }}
</Select.Option>
</Select>
</Space>
</div>
<div class="group-item">
<div>
<b>模型</b>
</div>
<Space wrap class="group-item-body">
<Select
v-model:value="modelId"
placeholder="Select"
size="large"
class="!w-[330px]"
>
<Select.Option
v-for="item in platformModels"
:key="item.id"
:value="item.id"
>
{{ item.name }}
</Select.Option>
</Select>
</Space>
</div>
<div class="group-item">
<div>
<b>图片尺寸</b>
</div>
<Space wrap class="group-item-body">
<InputNumber
v-model:value="width"
class="mt-[10px] w-[170px]"
placeholder="图片宽度"
/>
<InputNumber
v-model:value="height"
class="w-[170px]"
placeholder="图片高度"
/>
</Space>
</div>
<div class="btns">
<Button
type="primary"
size="large"
shape="round"
:loading="drawIn"
:disabled="prompt.length === 0"
@click="handleGenerateImage"
>
{{ drawIn ? '生成中' : '生成内容' }}
</Button>
</div>
</template>
<style scoped lang="scss">
.hot-words {
display: flex;
flex-direction: column;
margin-top: 30px;
.word-list {
display: flex;
flex-flow: row wrap;
justify-content: start;
margin-top: 15px;
.btn {
margin: 0;
}
}
}
//
.group-item {
margin-top: 30px;
.group-item-body {
width: 100%;
margin-top: 15px;
}
}
.btns {
display: flex;
justify-content: center;
margin-top: 50px;
}
</style>

View File

@ -0,0 +1,389 @@
<!-- dall3 -->
<script setup lang="ts">
import type { AiImageApi } from '#/api/ai/image';
import type { AiModelModelApi } from '#/api/ai/model/model';
import type { ImageModelVO, ImageSizeVO } from '#/utils/constants';
import { ref } from 'vue';
import { confirm } from '@vben/common-ui';
import { Button, Image, message, Space, Textarea } from 'ant-design-vue';
import { drawImage } from '#/api/ai/image';
import {
AiPlatformEnum,
Dall3Models,
Dall3SizeList,
Dall3StyleList,
ImageHotWords,
} from '#/utils/constants';
//
const props = defineProps({
models: {
type: Array<AiModelModelApi.ModelVO>,
default: () => [] as AiModelModelApi.ModelVO[],
},
});
const emits = defineEmits(['onDrawStart', 'onDrawComplete']);
//
const prompt = ref<string>(''); //
const drawIn = ref<boolean>(false); //
const selectHotWord = ref<string>(''); //
const selectModel = ref<string>('dall-e-3'); //
const selectSize = ref<string>('1024x1024'); // size
const style = ref<string>('vivid'); // style
/** 选择热词 */
const handleHotWordClick = async (hotWord: string) => {
//
if (selectHotWord.value === hotWord) {
selectHotWord.value = '';
return;
}
//
selectHotWord.value = hotWord;
prompt.value = hotWord;
};
/** 选择 model 模型 */
const handleModelClick = async (model: ImageModelVO) => {
selectModel.value = model.key;
//
//
if (model.key === 'dall-e-3') {
// DALL-E-3
style.value = 'vivid'; // vivid
} else if (model.key === 'dall-e-2') {
// DALL-E-2
style.value = 'natural'; // DALL-E-2
}
//
//
const recommendedSize = Dall3SizeList.find(
(size) =>
(model.key === 'dall-e-3' && size.key === '1024x1024') ||
(model.key === 'dall-e-2' && size.key === '512x512'),
);
if (recommendedSize) {
selectSize.value = recommendedSize.key;
}
};
/** 选择 style 样式 */
const handleStyleClick = async (imageStyle: ImageModelVO) => {
style.value = imageStyle.key;
};
/** 选择 size 大小 */
const handleSizeClick = async (imageSize: ImageSizeVO) => {
selectSize.value = imageSize.key;
};
/** 图片生产 */
const handleGenerateImage = async () => {
// models
const matchedModel = props.models.find(
(item) =>
item.model === selectModel.value &&
item.platform === AiPlatformEnum.OPENAI,
);
if (!matchedModel) {
message.error('该模型不可用,请选择其它模型');
return;
}
//
await confirm(`确认生成内容?`);
try {
//
drawIn.value = true;
//
emits('onDrawStart', AiPlatformEnum.OPENAI);
const imageSize = Dall3SizeList.find(
(item) => item.key === selectSize.value,
) as ImageSizeVO;
const form = {
platform: AiPlatformEnum.OPENAI,
prompt: prompt.value, //
modelId: matchedModel.id, // 使
style: style.value, //
width: imageSize.width, // size
height: imageSize.height, // size
options: {
style: style.value, //
},
} as AiImageApi.ImageDrawReqVO;
//
await drawImage(form);
} finally {
//
emits('onDrawComplete', AiPlatformEnum.OPENAI);
//
drawIn.value = false;
}
};
/** 填充值 */
const settingValues = async (detail: AiImageApi.ImageVO) => {
prompt.value = detail.prompt;
selectModel.value = detail.model;
style.value = detail.options?.style;
const imageSize = Dall3SizeList.find(
(item) => item.key === `${detail.width}x${detail.height}`,
) as ImageSizeVO;
await handleSizeClick(imageSize);
};
/** 暴露组件方法 */
defineExpose({ settingValues });
</script>
<template>
<div class="prompt">
<b>画面描述</b>
<p>建议使用"形容词 + 动词 + 风格"的格式使用""隔开</p>
<Textarea
v-model:value="prompt"
:maxlength="1024"
:rows="5"
class="w-100% mt-[15px]"
placeholder="例如:童话里的小屋应该是什么样子?"
show-count
/>
</div>
<div class="hot-words">
<div>
<b>随机热词</b>
</div>
<Space wrap class="word-list">
<Button
shape="round"
class="btn"
:type="selectHotWord === hotWord ? 'primary' : 'default'"
v-for="hotWord in ImageHotWords"
:key="hotWord"
@click="handleHotWordClick(hotWord)"
>
{{ hotWord }}
</Button>
</Space>
</div>
<div class="model">
<div>
<b>模型选择</b>
</div>
<Space wrap class="model-list">
<div
:class="
selectModel === model.key ? 'modal-item selectModel' : 'modal-item'
"
v-for="model in Dall3Models"
:key="model.key"
>
<Image
:preview="false"
:src="model.image"
fit="contain"
@click="handleModelClick(model)"
/>
<div class="model-font">{{ model.name }}</div>
</div>
</Space>
</div>
<div class="image-style">
<div>
<b>风格选择</b>
</div>
<Space wrap class="image-style-list">
<div
:class="
style === imageStyle.key
? 'image-style-item selectImageStyle'
: 'image-style-item'
"
v-for="imageStyle in Dall3StyleList"
:key="imageStyle.key"
>
<Image
:preview="false"
:src="imageStyle.image"
fit="contain"
@click="handleStyleClick(imageStyle)"
/>
<div class="style-font">{{ imageStyle.name }}</div>
</div>
</Space>
</div>
<div class="image-size">
<div>
<b>画面比例</b>
</div>
<Space wrap class="size-list">
<div
class="size-item"
v-for="imageSize in Dall3SizeList"
:key="imageSize.key"
@click="handleSizeClick(imageSize)"
>
<div
:class="
selectSize === imageSize.key
? 'size-wrapper selectImageSize'
: 'size-wrapper'
"
>
<div :style="imageSize.style"></div>
</div>
<div class="size-font">{{ imageSize.name }}</div>
</div>
</Space>
</div>
<div class="btns">
<Button
type="primary"
size="large"
shape="round"
:loading="drawIn"
:disabled="prompt.length === 0"
@click="handleGenerateImage"
>
{{ drawIn ? '生成中' : '生成内容' }}
</Button>
</div>
</template>
<style scoped lang="scss">
//
.hot-words {
display: flex;
flex-direction: column;
margin-top: 30px;
.word-list {
display: flex;
flex-flow: row wrap;
justify-content: start;
margin-top: 15px;
.btn {
margin: 0;
}
}
}
//
.model {
margin-top: 30px;
.model-list {
margin-top: 15px;
.modal-item {
display: flex;
flex-direction: column;
align-items: center;
width: 110px;
//outline: 1px solid blue;
overflow: hidden;
cursor: pointer;
border: 3px solid transparent;
.model-font {
font-size: 14px;
font-weight: bold;
color: #3e3e3e;
}
}
.selectModel {
border: 3px solid #1293ff;
border-radius: 5px;
}
}
}
// style
.image-style {
margin-top: 30px;
.image-style-list {
margin-top: 15px;
.image-style-item {
display: flex;
flex-direction: column;
align-items: center;
width: 110px;
//outline: 1px solid blue;
overflow: hidden;
cursor: pointer;
border: 3px solid transparent;
.style-font {
font-size: 14px;
font-weight: bold;
color: #3e3e3e;
}
}
.selectImageStyle {
border: 3px solid #1293ff;
border-radius: 5px;
}
}
}
//
.image-size {
width: 100%;
margin-top: 30px;
.size-list {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
margin-top: 20px;
.size-item {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
.size-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
padding: 4px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 7px;
}
.size-font {
font-size: 14px;
font-weight: bold;
color: #3e3e3e;
}
}
}
.selectImageSize {
border: 1px solid #1293ff !important;
}
}
.btns {
display: flex;
justify-content: center;
margin-top: 50px;
}
</style>

View File

@ -0,0 +1,371 @@
<!-- dall3 -->
<script setup lang="ts">
import type { AiImageApi } from '#/api/ai/image';
import type { AiModelModelApi } from '#/api/ai/model/model';
import type { ImageModelVO, ImageSizeVO } from '#/utils/constants';
import { ref } from 'vue';
import { confirm } from '@vben/common-ui';
import {
Button,
Image,
message,
Select,
Space,
Textarea,
} from 'ant-design-vue';
import { midjourneyImagine } from '#/api/ai/image';
import { ImageUpload } from '#/components/upload';
import {
AiPlatformEnum,
ImageHotWords,
MidjourneyModels,
MidjourneySizeList,
MidjourneyVersions,
NijiVersionList,
} from '#/utils/constants';
//
//
const props = defineProps({
models: {
type: Array<AiModelModelApi.ModelVO>,
default: () => [] as AiModelModelApi.ModelVO[],
},
});
const emits = defineEmits(['onDrawStart', 'onDrawComplete']);
//
const drawIn = ref<boolean>(false); //
const selectHotWord = ref<string>(''); //
//
const prompt = ref<string>(''); //
const referImageUrl = ref<any>(); //
const selectModel = ref<string>('midjourney'); //
const selectSize = ref<string>('1:1'); // size
const selectVersion = ref<any>('6.0'); // version
const versionList = ref<any>(MidjourneyVersions); // version
/** 选择热词 */
const handleHotWordClick = async (hotWord: string) => {
//
if (selectHotWord.value === hotWord) {
selectHotWord.value = '';
return;
}
//
selectHotWord.value = hotWord; //
prompt.value = hotWord; //
};
/** 点击 size 尺寸 */
const handleSizeClick = async (imageSize: ImageSizeVO) => {
selectSize.value = imageSize.key;
};
/** 点击 model 模型 */
const handleModelClick = async (model: ImageModelVO) => {
selectModel.value = model.key;
versionList.value =
model.key === 'niji' ? NijiVersionList : MidjourneyVersions;
selectVersion.value = versionList.value[0].value;
};
/** 图片生成 */
const handleGenerateImage = async () => {
// models
const matchedModel = props.models.find(
(item) =>
item.model === selectModel.value &&
item.platform === AiPlatformEnum.MIDJOURNEY,
);
if (!matchedModel) {
message.error('该模型不可用,请选择其它模型');
return;
}
//
await confirm(`确认生成内容?`);
try {
//
drawIn.value = true;
//
emits('onDrawStart', AiPlatformEnum.MIDJOURNEY);
//
const imageSize = MidjourneySizeList.find(
(item) => selectSize.value === item.key,
) as ImageSizeVO;
const req = {
prompt: prompt.value,
modelId: matchedModel.id,
width: imageSize.width,
height: imageSize.height,
version: selectVersion.value,
referImageUrl: referImageUrl.value,
} as AiImageApi.ImageMidjourneyImagineReqVO;
await midjourneyImagine(req);
} finally {
//
emits('onDrawComplete', AiPlatformEnum.MIDJOURNEY);
//
drawIn.value = false;
}
};
/** 填充值 */
const settingValues = async (detail: AiImageApi.ImageVO) => {
//
prompt.value = detail.prompt;
// image size
const imageSize = MidjourneySizeList.find(
(item) => item.key === `${detail.width}:${detail.height}`,
) as ImageSizeVO;
selectSize.value = imageSize.key;
//
const model = MidjourneyModels.find(
(item) => item.key === detail.options?.model,
) as ImageModelVO;
await handleModelClick(model);
//
selectVersion.value = versionList.value.find(
(item: any) => item.value === detail.options?.version,
).value;
// image
referImageUrl.value = detail.options.referImageUrl;
};
/** 暴露组件方法 */
defineExpose({ settingValues });
</script>
<template>
<div class="prompt">
<b>画面描述</b>
<p>建议使用形容词+动词+风格的格式使用隔开.</p>
<Textarea
v-model:value="prompt"
:maxlength="1024"
:rows="5"
class="w-100% mt-[15px]"
placeholder="例如:童话里的小屋应该是什么样子?"
show-count
/>
</div>
<div class="hot-words">
<div>
<b>随机热词</b>
</div>
<Space wrap class="word-list">
<Button
shape="round"
class="btn"
:type="selectHotWord === hotWord ? 'primary' : 'default'"
v-for="hotWord in ImageHotWords"
:key="hotWord"
@click="handleHotWordClick(hotWord)"
>
{{ hotWord }}
</Button>
</Space>
</div>
<div class="image-size">
<div>
<b>尺寸</b>
</div>
<Space wrap class="size-list">
<div
class="size-item"
v-for="imageSize in MidjourneySizeList"
:key="imageSize.key"
@click="handleSizeClick(imageSize)"
>
<div
:class="
selectSize === imageSize.key
? 'size-wrapper selectImageSize'
: 'size-wrapper'
"
>
<div :style="imageSize.style"></div>
</div>
<div class="size-font">{{ imageSize.key }}</div>
</div>
</Space>
</div>
<div class="model">
<div>
<b>模型</b>
</div>
<Space wrap class="model-list">
<div
:class="
selectModel === model.key ? 'modal-item selectModel' : 'modal-item'
"
v-for="model in MidjourneyModels"
:key="model.key"
>
<Image
:preview="false"
:src="model.image"
fit="contain"
@click="handleModelClick(model)"
/>
<div class="model-font">{{ model.name }}</div>
</div>
</Space>
</div>
<div class="version">
<div>
<b>版本</b>
</div>
<Space wrap class="version-list">
<Select
v-model:value="selectVersion"
class="version-select !w-[330px]"
clearable
placeholder="请选择版本"
>
<Select.Option
v-for="item in versionList"
:key="item.value"
:value="item.value"
>
{{ item.label }}
</Select.Option>
</Select>
</Space>
</div>
<div class="model">
<div>
<b>参考图</b>
</div>
<Space wrap class="model-list">
<ImageUpload v-model:value="referImageUrl" :show-description="false" />
</Space>
</div>
<div class="btns">
<Button
type="primary"
size="large"
shape="round"
:disabled="prompt.length === 0"
@click="handleGenerateImage"
>
{{ drawIn ? '生成中' : '生成内容' }}
</Button>
</div>
</template>
<style scoped lang="scss">
//
.hot-words {
display: flex;
flex-direction: column;
margin-top: 30px;
.word-list {
display: flex;
flex-flow: row wrap;
justify-content: start;
margin-top: 15px;
.btn {
margin: 0;
}
}
}
// version
.version {
margin-top: 20px;
.version-list {
width: 100%;
margin-top: 20px;
}
}
//
.model {
margin-top: 30px;
.model-list {
margin-top: 15px;
.modal-item {
display: flex;
flex-direction: column;
align-items: center;
width: 150px;
//outline: 1px solid blue;
overflow: hidden;
cursor: pointer;
border: 3px solid transparent;
.model-font {
font-size: 14px;
font-weight: bold;
color: #3e3e3e;
}
}
.selectModel {
border: 3px solid #1293ff;
border-radius: 5px;
}
}
}
//
.image-size {
width: 100%;
margin-top: 30px;
.size-list {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
margin-top: 20px;
.size-item {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
.size-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
padding: 4px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 7px;
}
.size-font {
font-size: 14px;
font-weight: bold;
color: #3e3e3e;
}
}
}
.selectImageSize {
border: 1px solid #1293ff !important;
}
}
.btns {
display: flex;
justify-content: center;
margin-top: 50px;
}
</style>

View File

@ -0,0 +1,324 @@
<!-- dall3 -->
<script setup lang="ts">
import type { AiImageApi } from '#/api/ai/image';
import type { AiModelModelApi } from '#/api/ai/model/model';
import { ref } from 'vue';
import { alert, confirm } from '@vben/common-ui';
import {
Button,
Input,
InputNumber,
message,
Select,
Space,
Textarea,
} from 'ant-design-vue';
import { drawImage } from '#/api/ai/image';
import {
AiPlatformEnum,
ImageHotEnglishWords,
StableDiffusionClipGuidancePresets,
StableDiffusionSamplers,
StableDiffusionStylePresets,
} from '#/utils/constants';
import { hasChinese } from '#/utils/utils';
//
//
const props = defineProps({
models: {
type: Array<AiModelModelApi.ModelVO>,
default: () => [] as AiModelModelApi.ModelVO[],
},
});
const emits = defineEmits(['onDrawStart', 'onDrawComplete']);
//
const drawIn = ref<boolean>(false); //
const selectHotWord = ref<string>(''); //
//
const prompt = ref<string>(''); //
const width = ref<number>(512); //
const height = ref<number>(512); //
const sampler = ref<string>('DDIM'); //
const steps = ref<number>(20); //
const seed = ref<number>(42); //
const scale = ref<number>(7.5); //
const clipGuidancePreset = ref<string>('NONE'); // (clip_guidance_preset) CLIP
const stylePreset = ref<string>('3d-model'); //
/** 选择热词 */
const handleHotWordClick = async (hotWord: string) => {
//
if (selectHotWord.value === hotWord) {
selectHotWord.value = '';
return;
}
//
selectHotWord.value = hotWord; //
prompt.value = hotWord; //
};
/** 图片生成 */
const handleGenerateImage = async () => {
// models
const selectModel = 'stable-diffusion-v1-6';
const matchedModel = props.models.find(
(item) =>
item.model === selectModel &&
item.platform === AiPlatformEnum.STABLE_DIFFUSION,
);
if (!matchedModel) {
message.error('该模型不可用,请选择其它模型');
return;
}
//
if (hasChinese(prompt.value)) {
alert('暂不支持中文!');
return;
}
await confirm(`确认生成内容?`);
try {
//
drawIn.value = true;
//
emits('onDrawStart', AiPlatformEnum.STABLE_DIFFUSION);
//
const form = {
modelId: matchedModel.id,
prompt: prompt.value, //
width: width.value, //
height: height.value, //
options: {
seed: seed.value, //
steps: steps.value, //
scale: scale.value, //
sampler: sampler.value, //
clipGuidancePreset: clipGuidancePreset.value, // CLIP
stylePreset: stylePreset.value, //
},
} as unknown as AiImageApi.ImageDrawReqVO;
await drawImage(form);
} finally {
//
emits('onDrawComplete', AiPlatformEnum.STABLE_DIFFUSION);
//
drawIn.value = false;
}
};
/** 填充值 */
const settingValues = async (detail: AiImageApi.ImageVO) => {
prompt.value = detail.prompt;
width.value = detail.width;
height.value = detail.height;
seed.value = detail.options?.seed;
steps.value = detail.options?.steps;
scale.value = detail.options?.scale;
sampler.value = detail.options?.sampler;
clipGuidancePreset.value = detail.options?.clipGuidancePreset;
stylePreset.value = detail.options?.stylePreset;
};
/** 暴露组件方法 */
defineExpose({ settingValues });
</script>
<template>
<div class="prompt">
<b>画面描述</b>
<p>建议使用形容词 + 动词 + 风格的格式使用隔开</p>
<Textarea
v-model:value="prompt"
:maxlength="1024"
:rows="5"
class="w-100% mt-[15px]"
placeholder="例如:童话里的小屋应该是什么样子?"
show-count
/>
</div>
<div class="hot-words">
<div>
<b>随机热词</b>
</div>
<Space wrap class="word-list">
<Button
shape="round"
class="btn"
:type="selectHotWord === hotWord ? 'primary' : 'default'"
v-for="hotWord in ImageHotEnglishWords"
:key="hotWord"
@click="handleHotWordClick(hotWord)"
>
{{ hotWord }}
</Button>
</Space>
</div>
<div class="group-item">
<div>
<b>采样方法</b>
</div>
<Space wrap class="group-item-body">
<Select
v-model:value="sampler"
placeholder="Select"
size="large"
class="!w-[330px]"
>
<Select.Option
v-for="item in StableDiffusionSamplers"
:key="item.key"
:value="item.key"
>
{{ item.name }}
</Select.Option>
</Select>
</Space>
</div>
<div class="group-item">
<div>
<b>CLIP</b>
</div>
<Space wrap class="group-item-body">
<Select
v-model:value="clipGuidancePreset"
placeholder="Select"
size="large"
class="!w-[330px]"
>
<Select.Option
v-for="item in StableDiffusionClipGuidancePresets"
:key="item.key"
:value="item.key"
>
{{ item.name }}
</Select.Option>
</Select>
</Space>
</div>
<div class="group-item">
<div>
<b>风格</b>
</div>
<Space wrap class="group-item-body">
<Select
v-model:value="stylePreset"
placeholder="Select"
size="large"
class="!w-[330px]"
>
<Select.Option
v-for="item in StableDiffusionStylePresets"
:key="item.key"
:label="item.name"
:value="item.key"
>
{{ item.name }}
</Select.Option>
</Select>
</Space>
</div>
<div class="group-item">
<div>
<b>图片尺寸</b>
</div>
<Space wrap class="group-item-body">
<Input v-model="width" class="w-[170px]" placeholder="图片宽度" />
<Input v-model="height" class="w-[170px]" placeholder="图片高度" />
</Space>
</div>
<div class="group-item">
<div>
<b>迭代步数</b>
</div>
<Space wrap class="group-item-body">
<InputNumber
v-model="steps"
size="large"
class="!w-[330px]"
placeholder="Please input"
/>
</Space>
</div>
<div class="group-item">
<div>
<b>引导系数</b>
</div>
<Space wrap class="group-item-body">
<InputNumber
v-model="scale"
type="number"
size="large"
class="!w-[330px]"
placeholder="Please input"
/>
</Space>
</div>
<div class="group-item">
<div>
<b>随机因子</b>
</div>
<Space wrap class="group-item-body">
<InputNumber
v-model:value="seed"
size="large"
class="!w-[330px]"
placeholder="Please input"
/>
</Space>
</div>
<div class="btns">
<Button
type="primary"
size="large"
shape="round"
:loading="drawIn"
:disabled="prompt.length === 0"
@click="handleGenerateImage"
>
{{ drawIn ? '生成中' : '生成内容' }}
</Button>
</div>
</template>
<style scoped lang="scss">
//
.hot-words {
display: flex;
flex-direction: column;
margin-top: 30px;
.word-list {
display: flex;
flex-flow: row wrap;
justify-content: start;
margin-top: 15px;
.btn {
margin: 0;
}
}
}
//
.group-item {
margin-top: 30px;
.group-item-body {
width: 100%;
margin-top: 15px;
}
}
.btns {
display: flex;
justify-content: center;
margin-top: 50px;
}
</style>

View File

@ -1,28 +1,171 @@
<script lang="ts" setup>
import type { AiImageApi } from '#/api/ai/image';
import type { AiModelModelApi } from '#/api/ai/model/model';
import { nextTick, onMounted, ref } from 'vue';
import { Page } from '@vben/common-ui';
import { Button } from 'ant-design-vue';
import { Segmented } from 'ant-design-vue';
import { getModelSimpleList } from '#/api/ai/model/model';
import { AiModelTypeEnum, AiPlatformEnum } from '#/utils/constants';
import Common from './components/common/index.vue';
import Dall3 from './components/dall3/index.vue';
import ImageList from './components/ImageList.vue';
import Midjourney from './components/midjourney/index.vue';
import StableDiffusion from './components/stableDiffusion/index.vue';
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<AiModelModelApi.ModelVO[]>([]); //
/** 绘画 start */
const handleDrawStart = async () => {};
/** 绘画 complete */
const handleDrawComplete = async () => {
await imageListRef.value.getImageList();
};
/** 重新生成:将画图详情填充到对应平台 */
const handleRegeneration = async (image: AiImageApi.ImageVO) => {
//
selectPlatform.value = image.platform;
// image
await nextTick();
switch (image.platform) {
case AiPlatformEnum.MIDJOURNEY: {
midjourneyRef.value.settingValues(image);
break;
}
case AiPlatformEnum.OPENAI: {
dall3Ref.value.settingValues(image);
break;
}
case AiPlatformEnum.STABLE_DIFFUSION: {
stableDiffusionRef.value.settingValues(image);
break;
}
// No default
}
// TODO @fan other
};
/** 组件挂载的时候 */
onMounted(async () => {
//
models.value = await getModelSimpleList(AiModelTypeEnum.IMAGE);
});
</script>
<template>
<Page>
<Button
danger
type="link"
target="_blank"
href="https://github.com/yudaocode/yudao-ui-admin-vue3"
>
该功能支持 Vue3 + element-plus 版本
</Button>
<br />
<Button
type="link"
target="_blank"
href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/ai/image/index/index.vue"
>
可参考
https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/ai/image/index/index.vue
代码pull request 贡献给我们
</Button>
<Page auto-content-height>
<div class="ai-image">
<div class="left">
<div class="segmented flex justify-center">
<Segmented
v-model:value="selectPlatform"
:options="platformOptions"
/>
</div>
<div class="modal-switch-container">
<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="main">
<ImageList ref="imageListRef" @on-regeneration="handleRegeneration" />
</div>
</div>
</Page>
</template>
<style scoped lang="scss">
.ai-image {
position: absolute;
inset: 0;
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
.left {
display: flex;
flex-direction: column;
width: 390px;
padding: 20px;
.segmented .ant-segmented {
background-color: #ececec;
}
.modal-switch-container {
height: 100%;
margin-top: 30px;
overflow-y: auto;
}
}
.main {
flex: 1;
background-color: #fff;
}
.right {
width: 350px;
background-color: #f7f8fa;
}
}
</style>

View File

@ -0,0 +1,116 @@
<script setup lang="ts">
import type { AiImageApi } from '#/api/ai/image';
import { onMounted, reactive, ref } from 'vue';
import { Page } from '@vben/common-ui';
import { useDebounceFn } from '@vueuse/core';
import { Input, Pagination } from 'ant-design-vue';
import { getImagePageMy } from '#/api/ai/image';
// TODO @fan loading
const loading = ref(true); //
const list = ref<AiImageApi.ImageVO[]>([]); //
const total = ref(0); //
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
publicStatus: true,
prompt: undefined,
});
/** 查询列表 */
const getList = async () => {
loading.value = true;
try {
const data = await getImagePageMy(queryParams);
list.value = data.list;
total.value = data.total;
} finally {
loading.value = false;
}
};
const debounceGetList = useDebounceFn(getList, 80);
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1;
getList();
};
/** 初始化 */
onMounted(async () => {
await getList();
});
</script>
<template>
<Page auto-content-height>
<div class="square-container">
<!-- TODO @fanstyle 建议换成 unocss -->
<!-- TODO @fanSearch 可以换成 Icon 组件么 -->
<Input.Search
v-model="queryParams.prompt"
style="width: 100%; margin-bottom: 20px"
size="large"
placeholder="请输入要搜索的内容"
@keyup.enter="handleQuery"
/>
<div class="gallery">
<!-- TODO @fan这个图片的风格要不和 ImageCard.vue 界面一致只有卡片没有操作因为看着更有相框的感觉~~~ -->
<div v-for="item in list" :key="item.id" class="gallery-item">
<img :src="item.picUrl" class="img" />
</div>
</div>
<!-- TODO @fan缺少翻页 -->
<!-- 分页 -->
<Pagination
:total="total"
:show-total="(total: number) => `共 ${total} 条`"
show-quick-jumper
show-size-changer
v-model:current="queryParams.pageNo"
v-model:page-size="queryParams.pageSize"
@change="debounceGetList"
@show-size-change="debounceGetList"
/>
</div>
</Page>
</template>
<style scoped lang="scss">
.square-container {
padding: 20px;
background-color: #fff;
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
//max-width: 1000px;
background-color: #fff;
box-shadow: 0 0 10px rgb(0 0 0 / 10%);
}
.gallery-item {
position: relative;
overflow: hidden;
cursor: pointer;
background: #f0f0f0;
transition: transform 0.3s;
}
.gallery-item img {
display: block;
width: 100%;
height: auto;
transition: transform 0.3s;
}
.gallery-item:hover img {
transform: scale(1.1);
}
.gallery-item:hover {
transform: scale(1.05);
}
}
</style>

View File

@ -5,6 +5,7 @@ import { ref, unref } from 'vue';
import { Page } from '@vben/common-ui';
import List from './list/index.vue';
import Mode from './mode/index.vue';
defineOptions({ name: 'Index' });

View File

@ -0,0 +1,116 @@
<script lang="ts" setup>
import type { Nullable } from '@vben/types';
import { inject, reactive, ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { Image, Slider } from 'ant-design-vue';
import { formatPast } from '#/utils/formatTime';
defineOptions({ name: 'Index' });
const currentSong = inject('currentSong', {});
const audioRef = ref<Nullable<HTMLElement>>(null);
// https://www.runoob.com/tags/ref-av-dom.html
const audioProps = reactive<any>({
autoplay: true,
paused: false,
currentTime: '00:00',
duration: '00:00',
muted: false,
volume: 50,
});
function toggleStatus(type: string) {
audioProps[type] = !audioProps[type];
if (type === 'paused' && audioRef.value) {
if (audioProps[type]) {
audioRef.value.pause();
} else {
audioRef.value.play();
}
}
}
//
function audioTimeUpdate(args: any) {
audioProps.currentTime = formatPast(new Date(args.timeStamp), 'mm:ss');
}
</script>
<template>
<div
class="b-solid b-1 b-l-none flex h-[72px] items-center justify-between px-2"
style="background-color: #fffffd; border-color: #dcdfe6"
>
<!-- 歌曲信息 -->
<div class="flex gap-[10px]">
<Image
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
:width="45"
/>
<div>
<div>{{ currentSong.name }}</div>
<div class="text-[12px] text-gray-400">{{ currentSong.singer }}</div>
</div>
</div>
<!-- 音频controls -->
<div class="flex items-center gap-[12px]">
<IconifyIcon
icon="majesticons:back-circle"
:size="20"
class="cursor-pointer text-gray-300"
/>
<IconifyIcon
:icon="
audioProps.paused
? 'mdi:arrow-right-drop-circle'
: 'solar:pause-circle-bold'
"
:size="30"
class="cursor-pointer"
@click="toggleStatus('paused')"
/>
<IconifyIcon
icon="majesticons:next-circle"
:size="20"
class="cursor-pointer text-gray-300"
/>
<div class="flex items-center gap-[16px]">
<span>{{ audioProps.currentTime }}</span>
<Slider
v-model:value="audioProps.duration"
color="#409eff"
class="w-[160px!important]"
/>
<span>{{ audioProps.duration }}</span>
</div>
<!-- 音频 -->
<audio
v-bind="audioProps"
ref="audioRef"
controls
v-show="!audioProps"
@timeupdate="audioTimeUpdate"
>
<!-- <source :src="audioUrl" /> -->
</audio>
</div>
<div class="flex items-center gap-[16px]">
<IconifyIcon
:icon="audioProps.muted ? 'tabler:volume-off' : 'tabler:volume'"
:size="20"
class="cursor-pointer"
@click="toggleStatus('muted')"
/>
<Slider
v-model:value="audioProps.volume"
color="#409eff"
class="w-[160px!important]"
/>
</div>
</div>
</template>

View File

@ -0,0 +1,113 @@
<script setup lang="ts">
import type { Recordable } from '@vben/types';
import { provide, ref } from 'vue';
import { Col, Empty, Row, TabPane, Tabs } from 'ant-design-vue';
import audioBar from './audioBar/index.vue';
import songCard from './songCard/index.vue';
import songInfo from './songInfo/index.vue';
defineOptions({ name: 'Index' });
const currentType = ref('mine');
// loading
const loading = ref(false);
//
const currentSong = ref({});
const mySongList = ref<Recordable<any>[]>([]);
const squareSongList = ref<Recordable<any>[]>([]);
/*
*@Description: 调接口生成音乐列表
*@MethodAuthor: xiaohong
*@Date: 2024-06-27 17:06:44
*/
function generateMusic(formData: Recordable<any>) {
loading.value = true;
setTimeout(() => {
mySongList.value = Array.from({ length: 20 }, (_, index) => {
return {
id: index,
audioUrl: '',
videoUrl: '',
title: `我走后${index}`,
imageUrl:
'https://www.carsmp3.com/data/attachment/forum/201909/19/091020q5kgre20fidreqyt.jpg',
desc: 'Metal, symphony, film soundtrack, grand, majesticMetal, dtrack, grand, majestic',
date: '2024年04月30日 14:02:57',
lyric: `<div class="_words_17xen_66"><div>大江东去,浪淘尽,千古风流人物。
</div><div>故垒西边人道是三国周郎赤壁
</div><div>乱石穿空惊涛拍岸卷起千堆雪
</div><div>江山如画一时多少豪杰
</div><div>
</div><div>遥想公瑾当年小乔初嫁了雄姿英发
</div><div>羽扇纶巾谈笑间樯橹灰飞烟灭
</div><div>故国神游多情应笑我早生华发
</div><div>人生如梦一尊还酹江月</div></div>`,
};
});
loading.value = false;
}, 3000);
}
/*
*@Description: 设置当前播放的音乐
*@MethodAuthor: xiaohong
*@Date: 2024-07-19 11:22:33
*/
function setCurrentSong(music: Recordable<any>) {
currentSong.value = music;
}
defineExpose({
generateMusic,
});
provide('currentSong', currentSong);
</script>
<template>
<div class="flex flex-col">
<div class="flex flex-auto overflow-hidden">
<Tabs
v-model:active-key="currentType"
class="flex-auto px-[20px]"
tab-position="bottom"
>
<!-- 我的创作 -->
<TabPane key="mine" tab="我的创作" v-loading="loading">
<Row v-if="mySongList.length > 0" :gutter="12">
<Col v-for="song in mySongList" :key="song.id" :span="24">
<songCard :song-info="song" @play="setCurrentSong(song)" />
</Col>
</Row>
<Empty v-else description="暂无音乐" />
</TabPane>
<!-- 试听广场 -->
<TabPane key="square" tab="试听广场" v-loading="loading">
<Row v-if="squareSongList.length > 0" :gutter="12">
<Col v-for="song in squareSongList" :key="song.id" :span="24">
<songCard :song-info="song" @play="setCurrentSong(song)" />
</Col>
</Row>
<Empty v-else description="暂无音乐" />
</TabPane>
</Tabs>
<!-- songInfo -->
<songInfo class="flex-none" />
</div>
<audioBar class="flex-none" />
</div>
</template>
<style lang="scss" scoped>
:deep(.ant-tabs) {
.ant-tabs__content {
padding: 0 7px;
overflow: auto;
}
}
</style>

View File

@ -0,0 +1,50 @@
<script lang="ts" setup>
import { inject } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { Image } from 'ant-design-vue';
defineOptions({ name: 'Index' });
defineProps({
songInfo: {
type: Object,
default: () => ({}),
},
});
const emits = defineEmits(['play']);
const currentSong = inject('currentSong', {});
function playSong() {
emits('play');
}
</script>
<template>
<div class="rounded-1 mb-[12px] flex p-[12px]">
<div class="relative" @click="playSong">
<Image :src="songInfo.imageUrl" class="w-80px flex-none" />
<div
class="bg-op-40 absolute left-0 top-0 flex h-full w-full cursor-pointer items-center justify-center bg-black"
>
<IconifyIcon
:icon="
currentSong.id === songInfo.id
? 'solar:pause-circle-bold'
: 'mdi:arrow-right-drop-circle'
"
:size="30"
/>
</div>
</div>
<div class="ml-[8px]">
<div>{{ songInfo.title }}</div>
<div class="mt-[8px] line-clamp-2 text-[12px]">
{{ songInfo.desc }}
</div>
</div>
</div>
</template>

View File

@ -0,0 +1,25 @@
<script lang="ts" setup>
import { inject } from 'vue';
import { Button, Card, Image } from 'ant-design-vue';
defineOptions({ name: 'Index' });
const currentSong = inject('currentSong', {});
</script>
<template>
<Card class="line-height-24px mb-[0!important] w-[300px]">
<Image :src="currentSong.imageUrl" style="width: 100%; height: 100%" />
<div class="">{{ currentSong.title }}</div>
<div class="line-clamp-1 text-[12px]">
{{ currentSong.desc }}
</div>
<div class="text-[12px]">
{{ currentSong.date }}
</div>
<Button size="small" shape="round" class="my-[6px]">信息复用</Button>
<div class="text-[12px]" v-html="currentSong.lyric"></div>
</Card>
</template>