refactor!: 升级 @nuxt/ui@3，重构所有页面和组件，调整配置，移除不在需求中的页面
This commit is contained in:
@@ -1,554 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import ChatItem from '~/components/aigc/chat/ChatItem.vue'
|
||||
import Message from '~/components/aigc/chat/Message.vue'
|
||||
import {
|
||||
type Assistant,
|
||||
type ChatMessage,
|
||||
type ChatMessageId,
|
||||
type ChatSession,
|
||||
type ChatSessionId,
|
||||
llmModels,
|
||||
type ModelTag,
|
||||
} from '~/typings/llm'
|
||||
import { useHistory } from '~/composables/useHistory'
|
||||
import { uuidv4 } from '@uniiem/uuid'
|
||||
import { useLLM } from '~/composables/useLLM'
|
||||
import { trimObject } from '@uniiem/object-trim'
|
||||
import ModalAuthentication from '~/components/ModalAuthentication.vue'
|
||||
import NewSessionScreen from '~/components/aigc/chat/NewSessionScreen.vue'
|
||||
|
||||
useSeoMeta({
|
||||
title: '聊天',
|
||||
})
|
||||
|
||||
const dayjs = useDayjs()
|
||||
const toast = useToast()
|
||||
const modal = useModal()
|
||||
const loginState = useLoginState()
|
||||
const historyStore = useHistory()
|
||||
const { chatSessions } = storeToRefs(historyStore)
|
||||
const { setChatSessions } = historyStore
|
||||
|
||||
const currentSessionId = ref<ChatSessionId | null>(null)
|
||||
const messagesWrapperRef = ref<HTMLDivElement | null>(null)
|
||||
|
||||
const showSidebar = ref(false)
|
||||
const user_input = ref('')
|
||||
const responding = ref(false)
|
||||
const currentModel = ref<ModelTag>('spark3_5')
|
||||
const currentAssistant = computed<Assistant | null>(
|
||||
() => getSessionCopyById(currentSessionId.value || '')?.assistant || null
|
||||
)
|
||||
const modals = reactive({
|
||||
modelSelect: false,
|
||||
assistantSelect: false,
|
||||
newSessionScreen: false,
|
||||
})
|
||||
|
||||
/**
|
||||
* 获取指定 ID 的会话数据
|
||||
* @param chatSessionId
|
||||
*/
|
||||
const getSessionCopyById = (
|
||||
chatSessionId: ChatSessionId
|
||||
): ChatSession | undefined =>
|
||||
chatSessions.value.find((s) => s.id === chatSessionId)
|
||||
/**
|
||||
* 切换当前会话
|
||||
* @param chatSessionId 指定会话 ID，不传则切换到列表中第一个会话
|
||||
*/
|
||||
const selectCurrentSessionId = (chatSessionId?: ChatSessionId) => {
|
||||
if (chatSessions.value.length > 0) {
|
||||
if (chatSessionId) {
|
||||
// 切换到指定 ID
|
||||
// 保存当前输入并清空输入框
|
||||
setChatSessions(
|
||||
chatSessions.value.map((s) =>
|
||||
s.id === currentSessionId.value
|
||||
? {
|
||||
...s,
|
||||
last_input: user_input.value,
|
||||
}
|
||||
: s
|
||||
)
|
||||
)
|
||||
user_input.value = ''
|
||||
// 切换到指定 ID 会话
|
||||
currentSessionId.value = chatSessionId
|
||||
// 恢复输入
|
||||
user_input.value = getSessionCopyById(chatSessionId)?.last_input || ''
|
||||
// 清除已恢复的输入
|
||||
setChatSessions(
|
||||
chatSessions.value.map((s) =>
|
||||
s.id === chatSessionId
|
||||
? {
|
||||
...s,
|
||||
last_input: '',
|
||||
}
|
||||
: s
|
||||
)
|
||||
)
|
||||
} else {
|
||||
// 切换到第一个会话
|
||||
currentSessionId.value = chatSessions.value[0].id
|
||||
}
|
||||
} else {
|
||||
handleClickCreateSession()
|
||||
}
|
||||
nextTick(() => {
|
||||
showSidebar.value = false
|
||||
modals.newSessionScreen = false
|
||||
scrollToMessageListBottom()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建新会话处理函数
|
||||
* @param assistant 指定助手，不传或空值则不指定助手
|
||||
*/
|
||||
const createSession = (assistant: Assistant | null) => {
|
||||
// 生成一个新的会话 ID
|
||||
const sessionId = uuidv4()
|
||||
// 新会话数据
|
||||
const newChat = !!assistant
|
||||
? {
|
||||
id: sessionId,
|
||||
subject: '新对话',
|
||||
messages: [],
|
||||
create_at: dayjs().unix(),
|
||||
assistant,
|
||||
}
|
||||
: {
|
||||
id: sessionId,
|
||||
subject: '新对话',
|
||||
messages: [],
|
||||
create_at: dayjs().unix(),
|
||||
}
|
||||
// 插入新会话数据
|
||||
setChatSessions([newChat, ...chatSessions.value])
|
||||
// 切换到新的会话
|
||||
selectCurrentSessionId(sessionId)
|
||||
// 关闭新建会话屏幕
|
||||
modals.newSessionScreen = false
|
||||
nextTick(() => {
|
||||
if (!!currentAssistant.value) {
|
||||
insetMessage({
|
||||
id: uuidv4(),
|
||||
role: 'system',
|
||||
content: currentAssistant.value?.role || '',
|
||||
preset: true,
|
||||
})
|
||||
insetMessage({
|
||||
id: uuidv4(),
|
||||
role: 'user',
|
||||
content: `${currentAssistant.value?.target}，${currentAssistant.value?.demand}`,
|
||||
preset: true,
|
||||
})
|
||||
insetMessage({
|
||||
id: uuidv4(),
|
||||
role: 'assistant',
|
||||
content: currentAssistant.value?.input_tpl || '',
|
||||
preset: true,
|
||||
})
|
||||
} else {
|
||||
insetMessage({
|
||||
id: uuidv4(),
|
||||
role: 'assistant',
|
||||
content: '你好，有什么可以帮助你的吗？',
|
||||
preset: true,
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理点击新建会话按钮事件
|
||||
*/
|
||||
const handleClickCreateSession = () => {
|
||||
showSidebar.value = false
|
||||
modals.newSessionScreen = true
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理发送消息操作
|
||||
* @param event
|
||||
*/
|
||||
const handleClickSend = (event: any) => {
|
||||
if (!loginState.is_logged_in) {
|
||||
modal.open(ModalAuthentication)
|
||||
return
|
||||
}
|
||||
if (event.ctrlKey) {
|
||||
return
|
||||
}
|
||||
if (responding.value) return
|
||||
if (!user_input.value) return
|
||||
if (!currentSessionId.value) {
|
||||
toast.add({
|
||||
title: '发送失败',
|
||||
description: '请先选择一个会话',
|
||||
color: 'red',
|
||||
icon: 'i-tabler-circle-x',
|
||||
})
|
||||
return
|
||||
}
|
||||
// 插入用户消息
|
||||
insetMessage({
|
||||
id: uuidv4(),
|
||||
role: 'user',
|
||||
content: user_input.value,
|
||||
create_at: dayjs().unix(),
|
||||
})
|
||||
user_input.value = ''
|
||||
// 进入响应中状态
|
||||
responding.value = true
|
||||
// 插入空助手消息(加载状态)
|
||||
const assistantReplyId = insetMessage({
|
||||
id: uuidv4(),
|
||||
role: 'assistant',
|
||||
content: '',
|
||||
})
|
||||
// 请求模型回复
|
||||
const trimmedMessages = trimObject(getMessages(), 2000, {
|
||||
keys: ['content'],
|
||||
})
|
||||
useLLM(trimmedMessages, {
|
||||
modelTag: currentModel.value,
|
||||
})
|
||||
.then((reply) => {
|
||||
modifyMessageContent(assistantReplyId, reply)
|
||||
})
|
||||
.catch((err) => {
|
||||
modifyMessageContent(assistantReplyId, err, true)
|
||||
})
|
||||
.finally(() => {
|
||||
responding.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const scrollToMessageListBottom = () => {
|
||||
nextTick(() => {
|
||||
messagesWrapperRef.value?.scrollTo({
|
||||
top: messagesWrapperRef.value.scrollHeight,
|
||||
behavior: 'smooth',
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const insetMessage = (message: ChatMessage): ChatMessageId => {
|
||||
setChatSessions(
|
||||
chatSessions.value.map((s) =>
|
||||
s.id === currentSessionId.value
|
||||
? {
|
||||
...s,
|
||||
messages: [...s.messages, message],
|
||||
}
|
||||
: s
|
||||
)
|
||||
)
|
||||
scrollToMessageListBottom()
|
||||
return message.id
|
||||
}
|
||||
|
||||
const getMessages = () =>
|
||||
getSessionCopyById(currentSessionId.value!)?.messages || []
|
||||
|
||||
const modifyMessageContent = (
|
||||
messageId: ChatMessageId,
|
||||
content: string,
|
||||
interrupted: boolean = false,
|
||||
updateTime: boolean = true
|
||||
) => {
|
||||
setChatSessions(
|
||||
chatSessions.value.map((s) =>
|
||||
s.id === currentSessionId.value
|
||||
? {
|
||||
...s,
|
||||
messages: s.messages.map((m) =>
|
||||
m.id === messageId
|
||||
? {
|
||||
...m,
|
||||
content,
|
||||
interrupted,
|
||||
create_at: updateTime ? dayjs().unix() : m.create_at,
|
||||
}
|
||||
: m
|
||||
),
|
||||
}
|
||||
: s
|
||||
)
|
||||
)
|
||||
scrollToMessageListBottom()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 切换到第一个会话, 没有会话会自动创建
|
||||
selectCurrentSessionId()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full flex relative">
|
||||
<div
|
||||
class="absolute -translate-x-full md:sticky md:translate-x-0 z-10 flex flex-col h-[calc(100vh-4rem)] bg-neutral-100 dark:bg-neutral-900 p-4 w-full md:w-[300px] shadow-sidebar border-r border-transparent dark:border-neutral-700 transition-all duration-300 ease-out"
|
||||
:class="{ 'translate-x-0': showSidebar }"
|
||||
>
|
||||
<div class="flex-1 flex flex-col overflow-auto overflow-x-hidden">
|
||||
<!-- list -->
|
||||
<div class="flex flex-col gap-3 relative">
|
||||
<!-- ClientOnly avoids hydrate exception -->
|
||||
<ClientOnly>
|
||||
<TransitionGroup name="chat-item">
|
||||
<div v-if="chatSessions.length === 0">
|
||||
<div
|
||||
class="text-center text-neutral-400 dark:text-neutral-500 py-4 flex flex-col items-center gap-2"
|
||||
>
|
||||
<Icon
|
||||
name="i-tabler-messages"
|
||||
class="text-2xl"
|
||||
/>
|
||||
<span>没有会话</span>
|
||||
</div>
|
||||
</div>
|
||||
<ChatItem
|
||||
v-for="session in chatSessions"
|
||||
:chat-session="session"
|
||||
:key="session.id"
|
||||
:active="session.id === currentSessionId"
|
||||
@click="selectCurrentSessionId(session.id)"
|
||||
@remove="
|
||||
() => {
|
||||
chatSessions.splice(
|
||||
chatSessions.findIndex((s) => s.id === session.id),
|
||||
1
|
||||
)
|
||||
session.id === currentSessionId && selectCurrentSessionId()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</TransitionGroup>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4 flex justify-between items-center">
|
||||
<div></div>
|
||||
<div>
|
||||
<UButton
|
||||
color="white"
|
||||
variant="solid"
|
||||
icon="i-tabler-message-circle-plus"
|
||||
@click="handleClickCreateSession"
|
||||
>
|
||||
新建聊天
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-[calc(100vh-4rem)] flex-1 bg-white dark:bg-neutral-900">
|
||||
<Transition
|
||||
name="message"
|
||||
mode="out-in"
|
||||
>
|
||||
<div
|
||||
v-if="!loginState.is_logged_in"
|
||||
class="w-full h-full"
|
||||
>
|
||||
<div
|
||||
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"
|
||||
color="black"
|
||||
variant="solid"
|
||||
size="xs"
|
||||
@click="modal.open(ModalAuthentication)"
|
||||
>
|
||||
登录
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
<NewSessionScreen
|
||||
v-else-if="
|
||||
modals.newSessionScreen ||
|
||||
getSessionCopyById(currentSessionId!) === undefined
|
||||
"
|
||||
:non-back="!getSessionCopyById(currentSessionId!)"
|
||||
@select="createSession"
|
||||
@cancel="modals.newSessionScreen = false"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="w-full h-full flex flex-col"
|
||||
>
|
||||
<div
|
||||
class="w-full p-4 bg-neutral-50 dark:bg-neutral-800/50 border-b dark:border-neutral-700/50 flex items-center gap-2"
|
||||
>
|
||||
<UButton
|
||||
class="md:hidden"
|
||||
color="black"
|
||||
variant="ghost"
|
||||
icon="i-tabler-menu-2"
|
||||
@click="showSidebar = !showSidebar"
|
||||
></UButton>
|
||||
<h1 class="font-medium">
|
||||
{{ getSessionCopyById(currentSessionId!)?.subject || '新对话' }}
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
ref="messagesWrapperRef"
|
||||
class="flex-1 flex flex-col overflow-auto overflow-x-hidden"
|
||||
>
|
||||
<div class="flex flex-col gap-8 px-4 py-8">
|
||||
<TransitionGroup name="message">
|
||||
<Message
|
||||
v-for="message in getMessages() || []"
|
||||
:message="message"
|
||||
:key="message.id"
|
||||
/>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<div
|
||||
class="w-full p-4 pt-2 flex flex-col gap-2 bg-neutral-50 dark:bg-neutral-800/50 border-t dark:border-neutral-700/50"
|
||||
>
|
||||
<div
|
||||
class="flex items-center gap-2 overflow-auto overflow-y-hidden"
|
||||
>
|
||||
<button
|
||||
class="chat-option-btn"
|
||||
@click="modals.modelSelect = true"
|
||||
>
|
||||
<Icon name="tabler:box" />
|
||||
<span class="text-xs">
|
||||
{{
|
||||
llmModels
|
||||
.find((m) => m.tag === currentModel)
|
||||
?.name.toUpperCase() || '模型'
|
||||
}}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="currentAssistant?.tpl_name"
|
||||
class="chat-option-btn"
|
||||
>
|
||||
<Icon name="tabler:robot-face" />
|
||||
<span class="text-xs">
|
||||
{{ currentAssistant.tpl_name }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<UTextarea
|
||||
v-model="user_input"
|
||||
size="lg"
|
||||
autoresize
|
||||
:rows="5"
|
||||
:maxrows="12"
|
||||
class="font-sans"
|
||||
placeholder="Enter 发送, Ctrl + Enter 换行"
|
||||
@keydown.ctrl.enter="user_input += '\n'"
|
||||
@keydown.enter.prevent="handleClickSend"
|
||||
/>
|
||||
<UButton
|
||||
color="black"
|
||||
variant="solid"
|
||||
icon="i-tabler-send-2"
|
||||
class="absolute bottom-2.5 right-3"
|
||||
@click.stop="handleClickSend"
|
||||
>
|
||||
发送
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
<!-- Modals -->
|
||||
<UModal v-model="modals.modelSelect">
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h3
|
||||
class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
|
||||
>
|
||||
选择大语言模型
|
||||
</h3>
|
||||
</template>
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<div
|
||||
v-for="(llm, index) in llmModels"
|
||||
:key="index"
|
||||
@click="currentModel = llm.tag"
|
||||
class="flex flex-col gap-2 justify-center items-center w-full aspect-1/1 border-2 rounded-xl cursor-pointer transition duration-150 select-none"
|
||||
:class="
|
||||
llm.tag === currentModel
|
||||
? 'border-primary shadow-xl bg-primary text-white'
|
||||
: 'dark:border-neutral-800 bg-white dark:bg-black shadow-card'
|
||||
"
|
||||
>
|
||||
<Icon
|
||||
v-if="llm?.icon"
|
||||
:name="llm.icon"
|
||||
class="text-4xl opacity-80"
|
||||
/>
|
||||
<div class="flex flex-col gap-0.5 items-center">
|
||||
<h1 class="font-bold drop-shadow-sm opacity-90">
|
||||
{{ llm.name || 'unknown' }}
|
||||
</h1>
|
||||
<p class="text-xs opacity-60">{{ llm.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div
|
||||
class="flex justify-end items-center"
|
||||
@click="modals.modelSelect = false"
|
||||
>
|
||||
<UButton>确定</UButton>
|
||||
</div>
|
||||
</template>
|
||||
</UCard>
|
||||
</UModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!--suppress CssUnusedSymbol -->
|
||||
<style scoped>
|
||||
.message-enter-active {
|
||||
@apply transition duration-300;
|
||||
}
|
||||
|
||||
.message-enter-from {
|
||||
@apply translate-y-4 opacity-0;
|
||||
}
|
||||
|
||||
.chat-item-move,
|
||||
.chat-item-enter-active,
|
||||
.chat-item-leave-active {
|
||||
@apply transition-all duration-300;
|
||||
}
|
||||
|
||||
.chat-item-enter-from,
|
||||
.chat-item-leave-to {
|
||||
@apply opacity-0 scale-90;
|
||||
}
|
||||
|
||||
.chat-item-leave-active {
|
||||
@apply absolute inset-x-0;
|
||||
}
|
||||
|
||||
.chat-option-btn {
|
||||
@apply text-lg px-2 py-1.5 flex gap-1 justify-center items-center rounded-lg;
|
||||
@apply bg-white border border-neutral-300 shadow-xs hover:shadow-card;
|
||||
@apply dark:bg-neutral-800 dark:border-neutral-600;
|
||||
}
|
||||
</style>
|
||||
@@ -1,557 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
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'
|
||||
import { del, set } from 'idb-keyval'
|
||||
import ReferenceFigureSelector from '~/components/aigc/ReferenceFigureSelector.vue'
|
||||
|
||||
useSeoMeta({
|
||||
title: '绘画',
|
||||
})
|
||||
|
||||
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 showSidebar = ref(false)
|
||||
|
||||
const generating = ref(false)
|
||||
|
||||
const handle_stick_mousedown = (
|
||||
e: MouseEvent,
|
||||
min: number = 240,
|
||||
max: number = 400
|
||||
) => {
|
||||
const handler = leftHandler.value
|
||||
if (handler) {
|
||||
const startX = e.clientX
|
||||
const startWidth = handler.parentElement?.offsetWidth || 0
|
||||
const handle_mousemove = (e: MouseEvent) => {
|
||||
let newWidth = startWidth + e.clientX - startX
|
||||
if (newWidth < min || newWidth > max) {
|
||||
newWidth = Math.min(Math.max(newWidth, min), max)
|
||||
}
|
||||
handler.parentElement!.style.width = `${newWidth}px`
|
||||
}
|
||||
const handle_mouseup = () => {
|
||||
leftSection.value?.classList.add('transition-all')
|
||||
leftHandler.value?.lastElementChild?.classList.remove(
|
||||
'bg-indigo-300',
|
||||
'dark:bg-indigo-700',
|
||||
'w-[3px]'
|
||||
)
|
||||
window.removeEventListener('mousemove', handle_mousemove)
|
||||
window.removeEventListener('mouseup', handle_mouseup)
|
||||
}
|
||||
leftSection.value?.classList.remove('transition-all')
|
||||
leftHandler.value?.lastElementChild?.classList.add(
|
||||
'bg-indigo-300',
|
||||
'dark:bg-indigo-700',
|
||||
'w-[3px]'
|
||||
)
|
||||
window.addEventListener('mousemove', handle_mousemove)
|
||||
window.addEventListener('mouseup', handle_mouseup)
|
||||
}
|
||||
}
|
||||
|
||||
const defaultRatios = [
|
||||
{
|
||||
ratio: '1:1',
|
||||
value: '768:768',
|
||||
},
|
||||
{
|
||||
ratio: '4:3',
|
||||
value: '1024:768',
|
||||
},
|
||||
{
|
||||
ratio: '3:4',
|
||||
value: '768:1024',
|
||||
},
|
||||
]
|
||||
|
||||
interface StyleItem {
|
||||
label: string
|
||||
value: number
|
||||
avatar?: { src: string }
|
||||
}
|
||||
|
||||
const defaultStyles: StyleItem[] = [
|
||||
{
|
||||
label: '通用写实风格',
|
||||
value: 401,
|
||||
},
|
||||
{
|
||||
label: '日系动漫',
|
||||
value: 201,
|
||||
},
|
||||
{
|
||||
label: '科幻风格',
|
||||
value: 114,
|
||||
},
|
||||
{
|
||||
label: '怪兽风格',
|
||||
value: 202,
|
||||
},
|
||||
{
|
||||
label: '唯美古风',
|
||||
value: 203,
|
||||
},
|
||||
{
|
||||
label: '复古动漫',
|
||||
value: 204,
|
||||
},
|
||||
{
|
||||
label: '游戏卡通手绘',
|
||||
value: 301,
|
||||
},
|
||||
{
|
||||
label: '水墨画',
|
||||
value: 101,
|
||||
},
|
||||
{
|
||||
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 img2imgStyles: StyleItem[] = [
|
||||
{
|
||||
label: '水彩画',
|
||||
value: 106,
|
||||
},
|
||||
{
|
||||
label: '2.5D',
|
||||
value: 110,
|
||||
},
|
||||
{
|
||||
label: '日系动漫',
|
||||
value: 201,
|
||||
},
|
||||
{
|
||||
label: '美系动漫',
|
||||
value: 202,
|
||||
},
|
||||
{
|
||||
label: '唯美古风',
|
||||
value: 203,
|
||||
},
|
||||
]
|
||||
|
||||
const defaultFormSchema = object({
|
||||
prompt: string().required('请输入提示词'),
|
||||
negative_prompt: string(),
|
||||
resolution: string().required('请选择分辨率'),
|
||||
styles: object<StyleItem>({
|
||||
label: string(),
|
||||
value: number(),
|
||||
}).required('请选择风格'),
|
||||
file: string().nullable(),
|
||||
})
|
||||
|
||||
type DefaultFormSchema = InferType<typeof defaultFormSchema>
|
||||
|
||||
const defaultFormState = reactive({
|
||||
prompt: '',
|
||||
negative_prompt: '',
|
||||
resolution: '1024:768',
|
||||
styles: defaultStyles.find((item) => item.value === 401),
|
||||
file: null,
|
||||
})
|
||||
watch(
|
||||
() => defaultFormState.file,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
defaultFormState.styles = img2imgStyles[0]
|
||||
} else {
|
||||
defaultFormState.styles = defaultStyles.find((item) => item.value === 401)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
|
||||
if (!loginState.is_logged_in) {
|
||||
modal.open(ModalAuthentication)
|
||||
return
|
||||
}
|
||||
generating.value = true
|
||||
const styleItem = event.data.styles as StyleItem
|
||||
if (!event.data.file) delete event.data.file
|
||||
// generate a uuid
|
||||
const fid = Math.random().toString(36).substring(2)
|
||||
const meta: ResultBlockMeta = {
|
||||
cost: '1000',
|
||||
modal: '混元大模型',
|
||||
style: styleItem.label,
|
||||
ratio: event.data.resolution,
|
||||
datetime: dayjs().unix(),
|
||||
type: event.data.file ? '智能图生图' : '智能文生图',
|
||||
}
|
||||
history.text2img.unshift({
|
||||
fid,
|
||||
meta,
|
||||
prompt: event.data.prompt,
|
||||
})
|
||||
useFetchWrapped<
|
||||
(HunYuan.Text2Img.req | HunYuan.Img2Img.req) & AuthedRequest,
|
||||
BaseResponse<HunYuan.resp>
|
||||
>(
|
||||
event.data.file
|
||||
? 'App.Assistant_HunYuan.TenImgToImg'
|
||||
: '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',
|
||||
})
|
||||
history.text2img = history.text2img.filter((item) => item.fid !== fid)
|
||||
return
|
||||
}
|
||||
history.text2img = history.text2img.map((item) => {
|
||||
if (item.fid === fid) {
|
||||
set(`${item.fid}`, [
|
||||
`data:image/png;base64,${res.data.request_image}`,
|
||||
])
|
||||
item.meta = {
|
||||
...item.meta,
|
||||
id: res.data.data_id as string,
|
||||
}
|
||||
}
|
||||
return item
|
||||
})
|
||||
})
|
||||
.catch((err) => {
|
||||
toast.add({
|
||||
title: '生成失败',
|
||||
description: err.msg || '网络错误',
|
||||
color: 'red',
|
||||
icon: 'i-tabler-circle-x',
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
generating.value = false
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full flex relative">
|
||||
<div
|
||||
ref="leftSection"
|
||||
:class="{ 'translate-x-0': showSidebar }"
|
||||
class="absolute -translate-x-full md:sticky md:translate-x-0 z-10 md:block h-[calc(100vh-4rem)] bg-neutral-200 dark:bg-neutral-800 transition-all"
|
||||
style="width: 320px"
|
||||
>
|
||||
<div
|
||||
ref="leftHandler"
|
||||
class="absolute inset-0 left-auto hidden xl:flex flex-col justify-center items-center cursor-ew-resize px-1 group"
|
||||
@dblclick="leftSection?.style.setProperty('width', '320px')"
|
||||
@mousedown.prevent="handle_stick_mousedown"
|
||||
>
|
||||
<span
|
||||
class="w-px h-full bg-neutral-300 dark:bg-neutral-700 group-hover:bg-indigo-300 dark:group-hover:bg-indigo-700 group-hover:w-[3px] transition-all group-hover:delay-500 translate-x-1"
|
||||
></span>
|
||||
</div>
|
||||
<div
|
||||
class="absolute bottom-28 -right-12 w-12 h-12 z-10 bg-neutral-100 dark:bg-neutral-900 rounded-r-lg shadow-lg flex md:hidden justify-center items-center"
|
||||
>
|
||||
<UButton
|
||||
color="black"
|
||||
icon="i-tabler-brush"
|
||||
size="lg"
|
||||
square
|
||||
@click="showSidebar = !showSidebar"
|
||||
></UButton>
|
||||
</div>
|
||||
<div class="h-full flex flex-col overflow-y-auto">
|
||||
<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="提示词"
|
||||
>
|
||||
<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_prompt">
|
||||
<UTextarea
|
||||
v-model="defaultFormState.negative_prompt"
|
||||
:rows="2"
|
||||
autoresize
|
||||
placeholder="请输入作品中不要出现的提示词，每个提示词之间用英文逗号隔开"
|
||||
resize
|
||||
/>
|
||||
</UFormGroup>
|
||||
</OptionBlock>
|
||||
<OptionBlock
|
||||
icon="i-tabler-library-photo"
|
||||
label="参考图片"
|
||||
>
|
||||
<UFormGroup name="input_image">
|
||||
<ReferenceFigureSelector
|
||||
:value="defaultFormState.file"
|
||||
text="选择参考图片"
|
||||
text-on-select="已选择参考图"
|
||||
@update="
|
||||
(file) => {
|
||||
defaultFormState.file = file
|
||||
}
|
||||
"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</OptionBlock>
|
||||
<OptionBlock
|
||||
icon="i-tabler-photo-hexagon"
|
||||
label="图片风格"
|
||||
>
|
||||
<UFormGroup name="styles">
|
||||
<USelectMenu
|
||||
v-model="defaultFormState.styles"
|
||||
:options="
|
||||
defaultFormState.file ? img2imgStyles : defaultStyles
|
||||
"
|
||||
></USelectMenu>
|
||||
</UFormGroup>
|
||||
</OptionBlock>
|
||||
<OptionBlock
|
||||
icon="i-tabler-article-off"
|
||||
label="图片比例"
|
||||
>
|
||||
<UFormGroup name="resolution">
|
||||
<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
|
||||
:loading="generating"
|
||||
block
|
||||
class="font-bold"
|
||||
color="indigo"
|
||||
size="lg"
|
||||
type="submit"
|
||||
>
|
||||
{{ generating ? '生成中' : '生成' }}
|
||||
</UButton>
|
||||
<p class="text-xs text-neutral-400 dark:text-neutral-500 font-bold">
|
||||
生成即代表您同意
|
||||
<a
|
||||
class="underline underline-offset-2"
|
||||
href="#"
|
||||
target="_blank"
|
||||
>
|
||||
用户许可协议
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</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
|
||||
class="text-7xl text-neutral-300 dark:text-neutral-700"
|
||||
name="i-tabler-user-circle"
|
||||
/>
|
||||
<p class="text-sm text-neutral-500 dark:text-neutral-400">
|
||||
请登录后使用
|
||||
</p>
|
||||
<UButton
|
||||
class="mt-2 font-bold"
|
||||
color="black"
|
||||
size="xs"
|
||||
variant="solid"
|
||||
@click="modal.open(ModalAuthentication)"
|
||||
>
|
||||
登录
|
||||
</UButton>
|
||||
</div>
|
||||
<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
|
||||
class="text-7xl text-neutral-300 dark:text-neutral-700"
|
||||
name="i-tabler-photo-hexagon"
|
||||
/>
|
||||
<p class="text-sm text-neutral-500 dark:text-neutral-400">没有记录</p>
|
||||
</div>
|
||||
<ResultBlock
|
||||
v-for="(result, k) in history.text2img"
|
||||
v-else
|
||||
:key="result.fid"
|
||||
:fid="result.fid"
|
||||
:meta="result.meta"
|
||||
:prompt="result.prompt"
|
||||
@use-reference="
|
||||
(file) => {
|
||||
defaultFormState.file = file
|
||||
}
|
||||
"
|
||||
>
|
||||
<template #header-right>
|
||||
<UPopover overlay>
|
||||
<UButton
|
||||
color="black"
|
||||
icon="i-tabler-trash"
|
||||
size="xs"
|
||||
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
|
||||
class="font-bold"
|
||||
color="gray"
|
||||
size="xs"
|
||||
@click="close"
|
||||
>
|
||||
取消
|
||||
</UButton>
|
||||
<UButton
|
||||
class="font-bold"
|
||||
color="red"
|
||||
size="xs"
|
||||
@click="
|
||||
() => {
|
||||
history.text2img.splice(k, 1)
|
||||
del(result.fid)
|
||||
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></style>
|
||||
Reference in New Issue
Block a user