XuanShengHua/xsh-assistant-next
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 绘画页面对接腾讯混元文生图

Browse Source
This commit is contained in:
Timothy Yin
2024-03-15 18:01:32 +08:00
parent 350a7ec626
commit e69774679a
8 changed files with 360 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
components/aigc/RatioSelector.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import type {PropType} from "vue";
import type {PropType} from 'vue';
const props = defineProps({
ratios: {
@@ -8,13 +8,25 @@ const props = defineProps({
label?: string,
value: string | number
}[]>,
required: true
}
required: true,
},
modelValue: {
type: [String, Number],
default: '',
},
})
const emit = defineEmits(['update:modelValue'])
const selected = ref<string | number>('')
onMounted(() => {
if (props.modelValue) {
handle_select(props.modelValue)
} else {
handle_select(props.ratios[0].value)
}
})
const handle_select = (value: string | number) => {
selected.value = value
emit('update:modelValue', value)
@@ -24,7 +36,7 @@ const getRatio = (ratio: string) => {
const [w, h] = ratio.split(/[:\/]/).map(Number)
return {
w: w,
h: h
h: h,
}
}
@@ -33,12 +45,12 @@ const getShapeSize = (r: { w: number, h: number }, size: number) => {
if (r.w > r.h) {
return {
w: size,
h: size / ratio
h: size / ratio,
}
} else {
return {
w: size * ratio,
h: size
h: size,
}
}
}
@@ -47,17 +59,19 @@ const getShapeSize = (r: { w: number, h: number }, size: number) => {
<template>
<div class="grid grid-cols-4 gap-2">
<div v-for="(ratio, k) in ratios" :key="ratio.value" @click="handle_select(ratio.value)"
class="w-full aspect-square bg-neutral-200/50 rounded-lg flex flex-col justify-around items-center cursor-pointer"
:class="[ratio.value === selected && 'bg-sky-200/50']">
<div class="bg-neutral-300/50 text-neutral-900 rounded flex justify-center items-center"
:class="[ratio.value === selected && 'bg-sky-300/50']" :style="{
width: getShapeSize(getRatio(ratio.ratio), 30).w * 2 + '%',
height: getShapeSize(getRatio(ratio.ratio), 30).h * 2 + '%'
class="w-full aspect-square bg-neutral-200/50 dark:bg-neutral-700/50 rounded-lg py-1.5 flex flex-col justify-between items-center cursor-pointer select-none"
:class="[ratio.value === selected && 'bg-sky-200/50 dark:bg-sky-700/50']">
<div class="bg-neutral-300/50 dark:bg-neutral-600/50 text-neutral-600 dark:text-neutral-300 rounded flex justify-center items-center"
:class="[ratio.value === selected && 'bg-sky-300/50 dark:bg-sky-600/50']" :style="{
width: getShapeSize(getRatio(ratio.ratio), 30).w * 1.1 + 'px',
height: getShapeSize(getRatio(ratio.ratio), 30).h * 1.1 + 'px'
}">
<span class="text-xs font-thin">{{ ratio.ratio }}</span>
<span class="text-xs font-thin font-mono">{{ ratio.ratio }}</span>
</div>
<span class="text-[10px]">
{{ ratio?.label || getRatio(ratio.ratio).w > getRatio(ratio.ratio).h ? '横向' : '纵向' }}
{{
ratio?.label || getRatio(ratio.ratio).w === getRatio(ratio.ratio).h ? '正方形' : (getRatio(ratio.ratio).w > getRatio(ratio.ratio).h ? '横向' : '纵向')
}}
</span>
</div>
</div>

27
components/aigc/drawing/ResultBlock.vue
View File

@@ -1,26 +1,26 @@
<script setup lang="ts">
import type {ResultBlockMeta} from "~/components/aigc/drawing/index";
import type {PropType} from "vue";
import dayjs from "dayjs";
import type {ResultBlockMeta} from '~/components/aigc/drawing/index';
import type {PropType} from 'vue';
import dayjs from 'dayjs';
const props = defineProps({
icon: {
type: String,
default: 'i-tabler-photo-filled'
default: 'i-tabler-photo-filled',
},
title: {
type: String
type: String,
},
prompt: {
type: String
type: String,
},
images: {
type: Array,
default: (): Array<string> => []
default: (): Array<string> => [],
},
meta: {
type: Object as PropType<ResultBlockMeta>
}
type: Object as PropType<ResultBlockMeta>,
},
})
const expand_prompt = ref(false)
@@ -50,7 +50,10 @@ const show_meta = ref(true)
<UButton color="gray" size="xs" icon="i-tabler-copy" variant="ghost" class="-mt-1"></UButton>
</div>
<div v-if="images.length > 0" class="flex items-center overflow-x-auto h-64 gap-2 pb-2 snap-x">
<img v-for="(url, i) in images" class="result-image" :src="url" alt="" :key="i">
<img v-for="(url, i) in images" class="result-image" :src="useBlobUrlFromB64(url)" alt="AI Generated" :key="i"/>
</div>
<div v-else class="h-64 aspect-[3/4] mb-4 rounded-lg placeholder-gradient flex justify-center items-center">
<UIcon name="i-svg-spinners-tadpole" class="text-3xl" />
</div>
<Transition v-if="meta" name="meta">
<div v-if="show_meta" class="w-full flex items-center gap-2 flex-wrap whitespace-nowrap pb-2 mt-2">
@@ -94,4 +97,8 @@ const show_meta = ref(true)
@apply snap-start;
@apply h-full aspect-auto object-cover rounded-lg shadow-md;
}
.placeholder-gradient {
@apply animate-pulse bg-gradient-to-br from-neutral-200 to-neutral-300 dark:from-neutral-700 dark:to-neutral-800;
}
</style>

20
composables/useBlobUrlFromB64.ts Normal file
View File

@@ -0,0 +1,20 @@
export const useBlobUrlFromB64 = (dataurl: string): string => {
// data:image/jpeg;base64,/9j/...
const arr = dataurl.split(',')
if (arr.length < 2) {
throw new Error('dataurl is not a valid base64 image')
}
const mimeMatches = arr[0].match(/:(.*?);/)
if (mimeMatches === null) {
throw new Error('dataurl is not a valid base64 image')
}
const mime = mimeMatches[1] //image/png
const b64data = atob(arr[1])
let length = b64data.length
const u8arr = new Uint8Array(length)
while (length--) {
u8arr[length] = b64data.charCodeAt(length)
}
const blob = new Blob([u8arr], {type: mime})
return URL.createObjectURL(blob)
}

22
composables/useHistory.ts Normal file
View File

@@ -0,0 +1,22 @@
import {string} from 'yup';
import type {ResultBlockMeta} from '~/components/aigc/drawing';
export interface HistoryItem {
fid: string
data_id?: string
prompt: string
meta: ResultBlockMeta
images: string[]
}
export const useHistory = defineStore('aigc_history', () => {
const text2img = ref<HistoryItem[]>([])
return {
text2img
}
}, {
persist: {
storage: persistedState.localStorage
}
})

2
composables/useLoginState.ts
View File

@@ -59,6 +59,6 @@ export const useLoginState = defineStore('loginState', () => {
persist: {
key: 'xsh_assistant_persisted_state',
storage: persistedState.localStorage,
paths: ['token', 'user']
paths: ['is_logged_in', 'token', 'user']
}
})

26
layouts/default.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import ModalAuthentication from "~/components/ModalAuthentication.vue";
import ModalAuthentication from '~/components/ModalAuthentication.vue';
const colorMode = useColorMode()
const dayjs = useDayjs()
@@ -13,33 +13,33 @@ const isDark = computed({
},
set() {
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
}
},
})
const links = [
{
label: '绘画',
icon: 'i-tabler-brush',
to: '/aigc/drawing'
to: '/aigc/drawing',
}, {
label: '聊天',
icon: 'i-tabler-message-2',
to: '/aigc/chat'
to: '/aigc/chat',
}, {
label: 'PPT',
icon: 'i-tabler-file-type-ppt',
to: '/aigc/ppt-course-gen'
}
to: '/aigc/ppt-course-gen',
},
]
const items = [
[{
label: 'support@fenshenzhike.com',
slot: 'account',
disabled: true
disabled: true,
}], [{
label: '账号资料',
icon: 'i-tabler-user-circle'
icon: 'i-tabler-user-circle',
}], [{
label: '注销登录',
icon: 'i-tabler-logout',
@@ -47,9 +47,9 @@ const items = [
title: '退出登录',
description: `您已成功退出登录账号`,
color: 'indigo',
icon: 'i-tabler-logout-2'
}))
}]
icon: 'i-tabler-logout-2',
})),
}],
]
const open_login_modal = () => {
@@ -78,11 +78,9 @@ const open_login_modal = () => {
/>
<UButton v-if="!loginState.is_logged_in" label="登录或注册" size="xs" class="font-bold" color="indigo"
@click="open_login_modal"/>
</ClientOnly>
<UDropdown v-if="loginState.is_logged_in" :items="items" :popper="{ placement: 'bottom-start' }"
:ui="{ item: { disabled: 'cursor-text select-text' } }">
<UAvatar :src="void 0" icon="i-tabler-user" size="md"/>
<template #account="{ item }">
<div class="text-left">
<p class="flex items-center gap-1">
@@ -96,12 +94,12 @@ const open_login_modal = () => {
</p>
</div>
</template>
<template #item="{ item }">
<span class="truncate">{{ item.label }}</span>
<UIcon :name="item.icon" class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto"/>
</template>
</UDropdown>
</ClientOnly>
</div>
</header>

300
pages/aigc/drawing/index.vue
View File

@@ -1,25 +1,30 @@
<script setup lang="ts">
import image1 from '~/assets/example/1.jpg';
import image2 from '~/assets/example/2.jpg';
import image3 from '~/assets/example/3.jpg';
import OptionBlock from "~/components/aigc/drawing/OptionBlock.vue";
import ResultBlock from "~/components/aigc/drawing/ResultBlock.vue";
import {useLoginState} from "~/composables/useLoginState";
import ModalAuthentication from "~/components/ModalAuthentication.vue";
import {type InferType, number, object, string} from "yup";
import type {FormSubmitEvent} from "#ui/types";
import RatioSelector from "~/components/aigc/RatioSelector.vue";
import OptionBlock from '~/components/aigc/drawing/OptionBlock.vue';
import ResultBlock from '~/components/aigc/drawing/ResultBlock.vue';
import {useLoginState} from '~/composables/useLoginState';
import ModalAuthentication from '~/components/ModalAuthentication.vue';
import {type InferType, number, object, string} from 'yup';
import type {FormSubmitEvent} from '#ui/types';
import RatioSelector from '~/components/aigc/RatioSelector.vue';
import {useFetchWrapped} from '~/composables/useFetchWrapped';
import type {ResultBlockMeta} from '~/components/aigc/drawing';
import {useHistory} from '~/composables/useHistory';
useHead({
title: '绘画 | XSH AI'
title: '绘画 | XSH AI',
})
const toast = useToast()
const modal = useModal()
const dayjs = useDayjs()
const history = useHistory()
const loginState = useLoginState()
const leftSection = ref<HTMLElement | null>(null)
const leftHandler = ref<HTMLElement | null>(null)
const generating = ref(false)
const handle_stick_mousedown = (e: MouseEvent, min: number = 240, max: number = 400) => {
const handler = leftHandler.value
if (handler) {
@@ -45,91 +50,208 @@ const handle_stick_mousedown = (e: MouseEvent, min: number = 240, max: number =
}
}
// const histories = ref<HistoryItem[]>([])
const defaultRatios = [
{
ratio: '1:1',
value: '768:768',
},
{
ratio: '4:3',
label: '横向',
value: '1024:768',
},
{
ratio: '3:4',
label: '竖向',
value: '768:1024',
},
]
interface StyleItem {
label: string
value: number
avatar?: { src: string }
}
const defaultStyles: StyleItem[] = [
{
ratio: '16:9',
label: '横向',
value: '1920:1080',
label: '通用写实风格',
value: 401,
},
{
ratio: '9:16',
label: '竖向',
value: '1080:1920',
label: '日系动漫',
value: 201,
},
{
ratio: '1:1',
label: '方形',
value: '1024:1024',
label: '科幻风格',
value: 114,
},
{
ratio: '3:2',
label: '横向',
value: '960:640',
label: '怪兽风格',
value: 202,
},
{
ratio: '2:3',
label: '竖向',
value: '640:960',
label: '唯美古风',
value: 203,
},
{
ratio: '16:10',
label: '横向',
value: '1920:1200',
label: '复古动漫',
value: 204,
},
{
ratio: '10:16',
label: '竖向',
value: '1200:1920',
label: '游戏卡通手绘',
value: 301,
},
{
ratio: '21:9',
label: '横向',
value: '2560:1080',
label: '水墨画',
value: 101,
},
{
ratio: '9:21',
label: '竖向',
value: '1080:2560',
label: '概念艺术',
value: 102,
},
{
label: '水彩画',
value: 104,
},
{
label: '像素画',
value: 105,
},
{
label: '厚涂风格',
value: 106,
},
{
label: '插图',
value: 107,
},
{
label: '剪纸风格',
value: 108,
},
{
label: '印象派',
value: 119,
},
{
label: '印象派（莫奈）',
value: 109,
},
{
label: '油画',
value: 103,
},
{
label: '油画（梵高）',
value: 118,
},
{
label: '古典肖像画',
value: 111,
},
{
label: '黑白素描画',
value: 112,
},
{
label: '赛博朋克',
value: 113,
},
{
label: '暗黑风格',
value: 115,
},
{
label: '蒸汽波',
value: 117,
},
{
label: '2.5D',
value: 110,
},
{
label: '3D',
value: 116,
},
]
const defaultFormSchema = object({
prompts: string().required('请输入提示词'),
negative_prompts: string().required('请输入负面提示词'),
prompt: string().required('请输入提示词'),
negative_prompt: string(),
resolution: string().required('请选择分辨率'),
style: number().required('请选择风格')
styles: object<StyleItem>({
label: string(),
value: number(),
}).required('请选择风格'),
})
type DefaultFormSchema = InferType<typeof defaultFormSchema>
const defaultFormState = reactive({
prompts: '',
negative_prompts: '',
prompt: '',
negative_prompt: '',
resolution: '1024:768',
style: 100
styles: defaultStyles.find(item => item.value === 401),
})
const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
console.log(event)
if (!loginState.is_logged_in) {
modal.open(ModalAuthentication)
return
}
generating.value = true
// generate a uuid
const fid = Math.random().toString(36).substring(2)
const meta: ResultBlockMeta = {
cost: '1000',
modal: '混元大模型',
ratio: event.data.resolution,
datetime: dayjs().unix(),
}
history.text2img.unshift({
fid,
meta,
prompt: event.data.prompt,
images: [],
})
const styleItem = event.data.styles as StyleItem
useFetchWrapped<
HunYuan.Text2Img.req & AuthedRequest,
BaseResponse<HunYuan.Text2Img.resp>
>('App.Assistant_HunYuan.TenTextToImg', {
token: loginState.token as string,
user_id: loginState.user.id,
device_id: 'web',
...event.data,
styles: styleItem.value,
}).then(res => {
if (res.ret !== 200) {
toast.add({
title: '生成失败',
description: res.msg || '未知错误',
color: 'red',
icon: 'i-tabler-circle-x',
})
return
}
const record = history.text2img.find(item => item.fid === fid)
record!.images = [`data:image/png;base64,${res.data.request_image}`]
record!.meta = {
...record!.meta,
id: res.data.data_id as string,
}
}).catch(err => {
toast.add({
title: '生成失败',
description: err.msg || '网络错误',
color: 'red',
icon: 'i-tabler-circle-x',
})
}).finally(() => {
generating.value = false
})
}
const images = [
image1,
image2,
image3,
'https://w.wallhaven.cc/full/jx/wallhaven-jxl31y.png',
'https://w.wallhaven.cc/full/6d/wallhaven-6d7xmx.jpg',
]
</script>
<template>
@@ -148,32 +270,35 @@ const images = [
<UForm :schema="defaultFormSchema" :state="defaultFormState" @submit="onDefaultFormSubmit">
<div class="flex flex-col gap-2 p-4 pb-28">
<OptionBlock comment="Prompts" icon="i-tabler-article" label="提示词">
<template #actions>
<!-- <UBadge color="sky" size="xs">按钮A</UBadge>-->
<!-- <UBadge color="indigo" size="xs">按钮B</UBadge>-->
</template>
<UFormGroup name="prompts">
<UTextarea v-model="defaultFormState.prompts" :rows="2" autoresize
<UFormGroup name="prompt">
<UTextarea v-model="defaultFormState.prompt" :rows="2" autoresize
placeholder="请输入英文提示词，每个提示词之间用英文逗号隔开" resize/>
</UFormGroup>
</OptionBlock>
<OptionBlock comment="Negative Prompts" icon="i-tabler-article-off" label="负面提示词">
<UFormGroup name="negative_prompts">
<UTextarea v-model="defaultFormState.negative_prompts" :rows="2" autoresize
<UFormGroup name="negative_prompt">
<UTextarea v-model="defaultFormState.negative_prompt" :rows="2" autoresize
placeholder="请输入作品中不要出现的提示词，每个提示词之间用英文逗号隔开"
resize/>
</UFormGroup>
</OptionBlock>
<OptionBlock icon="i-tabler-photo-hexagon" label="图片风格">
<UFormGroup name="styles">
<USelectMenu v-model="defaultFormState.styles" :options="defaultStyles"></USelectMenu>
</UFormGroup>
</OptionBlock>
<OptionBlock icon="i-tabler-article-off" label="图片比例">
<UFormGroup name="resolution">
<RatioSelector v-model="defaultFormState.resolution" :ratios="defaultRatios" />
<RatioSelector v-model="defaultFormState.resolution" :ratios="defaultRatios"/>
</UFormGroup>
</OptionBlock>
</div>
<div class="absolute bottom-0 inset-x-0 flex flex-col items-center gap-2
bg-neutral-200 dark:bg-neutral-800 p-4 border-t border-neutral-400
dark:border-neutral-700">
<UButton type="submit" color="indigo" size="lg" class="font-bold" block>生成</UButton>
<UButton type="submit" color="indigo" size="lg" class="font-bold" :loading="generating" block>
{{ generating ? '生成中' : '生成' }}
</UButton>
<p class="text-xs text-neutral-400 dark:text-neutral-500 font-bold">
生成即代表您同意<a href="https://baidu.com" target="_blank"
class="underline underline-offset-2">用户许可协议</a>
@@ -182,31 +307,52 @@ const images = [
</UForm>
</div>
</div>
<ClientOnly>
<div class="flex-1 h-screen flex flex-col gap-4 bg-neutral-100 dark:bg-neutral-900 p-4 pb-20 overflow-y-auto">
<div v-if="!loginState.is_logged_in"
class="w-full h-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900">
<Icon name="i-tabler-user-circle" class="text-7xl text-neutral-300 dark:text-neutral-700"/>
<p class="text-sm text-neutral-500 dark:text-neutral-400">请登录后使用</p>
<UButton class="mt-2 font-bold" @click="modal.open(ModalAuthentication)" color="black" variant="solid"
size="xs">登录
size="xs">
登录
</UButton>
</div>
<ResultBlock v-else :images="images" v-for="i in 1" :key="i"
title="XX大模型 · 文生图" :meta="{
id: 'd166429411dfc6722e54c032cdba97a2',
aspect: '9:16',
cost: '1500',
modal: '混元大模型',
ratio: '16:9',
datetime: 1709106270
}"
prompt="这是, 一组, 测试用的, 提示词, 很长, 很长很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长">
<div v-else-if="history.text2img.length === 0"
class="w-full h-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900">
<Icon name="i-tabler-photo-hexagon" class="text-7xl text-neutral-300 dark:text-neutral-700"/>
<p class="text-sm text-neutral-500 dark:text-neutral-400">没有记录</p>
</div>
<ResultBlock v-else v-for="(result, k) in history.text2img"
title="文生图" :images="result.images" :meta="result.meta"
:prompt="result.prompt">
<template #header-right>
<UButton color="gray" size="xs" icon="i-tabler-trash" variant="ghost"></UButton>
<UPopover overlay>
<UButton color="black" size="xs" icon="i-tabler-trash" variant="ghost"></UButton>
<template #panel="{close}">
<div class="p-4 flex flex-col gap-4">
<h2 class="text-sm">删除后无法恢复，确定删除？</h2>
<div class="flex items-center justify-end gap-2">
<UButton color="gray" size="xs" class="font-bold" @click="close">
取消
</UButton>
<UButton color="red" size="xs" class="font-bold"
@click="() => {history.text2img.splice(k, 1); close();}">
仍然删除
</UButton>
</div>
</div>
</template>
</UPopover>
</template>
</ResultBlock>
<div class="flex justify-center items-center gap-1 text-neutral-400 dark:text-neutral-600">
<UIcon name="i-tabler-info-triangle" />
<p class="text-xs font-bold">所有图片均为 AI 生成，服务器不会保存任何图像，数据仅保存在浏览器本地</p>
</div>
</div>
</ClientOnly>
</div>
</template>
<style scoped>

2
typings/schema.d.ts vendored
View File

@@ -84,7 +84,7 @@ namespace HunYuan {
interface req {
device_id: string
prompt: string
negative_prompt: string
negative_prompt?: string
styles: number
resolution: string
}