mirror of
https://github.com/adams549659584/go-proxy-bingai.git
synced 2025-06-03 15:02:30 +08:00
66 lines
2.3 KiB
Vue
66 lines
2.3 KiB
Vue
<script setup lang="ts">
|
||
import { ref } from 'vue';
|
||
import { NButton, NEmpty, NInput, NModal, useMessage } from 'naive-ui';
|
||
import { computed } from 'vue';
|
||
|
||
const props = defineProps<{
|
||
show: boolean;
|
||
}>();
|
||
|
||
const emit = defineEmits<{
|
||
'update:show': [value: boolean];
|
||
}>();
|
||
|
||
const message = useMessage();
|
||
|
||
const DEMO_KEYWORD = '骑着摩托的小猫咪，疾驰在路上，动漫场景，详细的细节。';
|
||
const keyword = ref('');
|
||
const iframeSrc = ref('');
|
||
const isCreating = ref(false);
|
||
|
||
const isShowModal = computed({
|
||
get: () => props.show,
|
||
set: (value) => emit('update:show', value),
|
||
});
|
||
|
||
const createImage = () => {
|
||
if (!keyword.value) {
|
||
message.error('请先输入关键词');
|
||
return;
|
||
}
|
||
isCreating.value = true;
|
||
iframeSrc.value = `/images/create?re=1&showselective=1&sude=1&kseed=7500&SFX=2&q=${encodeURIComponent(keyword.value)}&t=${Date.now()}`;
|
||
};
|
||
|
||
const onClose = () => {
|
||
keyword.value = '';
|
||
iframeSrc.value = '';
|
||
};
|
||
|
||
const useDemo = () => {
|
||
keyword.value = DEMO_KEYWORD;
|
||
return createImage();
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<NModal class="w-11/12 lg:w-[540px] select-none" v-model:show="isShowModal" :on-close="onClose" preset="card" title="图像创建">
|
||
<head class="flex justify-center gap-3 px-8">
|
||
<NInput class="flex-1" placeholder="提示词" v-model:value="keyword" :clearable="true" @keyup.enter="createImage" maxlength="100"></NInput>
|
||
<NButton secondary type="info" @click="createImage" :loading="isCreating">开始创建</NButton>
|
||
</head>
|
||
<main class="flex justify-center items-center">
|
||
<iframe v-if="iframeSrc" class="w-[310px] h-[350px] xl:w-[475px] xl:h-[520px] my-4" :src="iframeSrc" frameborder="0" @load="isCreating = false"></iframe>
|
||
<NEmpty v-else class="h-[40vh] xl:h-[60vh] flex justify-center items-center" description="暂未创建">
|
||
<template #extra>
|
||
<NButton secondary type="info" @click="useDemo">使用示例创建</NButton>
|
||
<div class="text-[#c2c2c2] px-2 xl:px-10">
|
||
<p class="text-left">提示：形容词+名词+动词+风格，描述得越详细时，效果越好。</p>
|
||
<p class="text-left">示例：{{ DEMO_KEYWORD }}</p>
|
||
</div>
|
||
</template>
|
||
</NEmpty>
|
||
</main>
|
||
</NModal>
|
||
</template>
|