From 830710ae1da5c30c8553411ad027970b874c50b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A1=9C=E8=8F=AF?= Date: Sun, 19 Feb 2023 03:28:36 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E5=83=8F=E8=B7=AF=E5=BE=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nuxt.config.ts | 22 +++++++++++++++ pages/index.vue | 73 ++++++++++++++++++++----------------------------- server.py | 3 +- 3 files changed, 53 insertions(+), 45 deletions(-) diff --git a/nuxt.config.ts b/nuxt.config.ts index 88ebcc5..784c8ae 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -13,4 +13,26 @@ export default defineNuxtConfig({ } } }, + nitro: { + devProxy: { + '/api': { + target: 'http://106.15.192.42:3000/api' + } + }, + }, + //devServer: { + // host: '106.15.192.42', + // port: 3000, + // url: 'http://106.15.192.42:3000' + //}, + //vite: { + // server: { + // proxy: { + // '/api': { + // target: 'http://106.15.192.42:3000', + // changeOrigin: true + // } + // } + // } + //} }) diff --git a/pages/index.vue b/pages/index.vue index 2a25cf6..933f884 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -65,7 +65,7 @@ div(class="mt-[60px] grid grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 text-white b img.relative.right-6.w-4(:src="IconEdit" style="filter: drop-shadow(#ffffff 24px 0);") span 画点什么 div - button.mt-4.rounded-lg.h-9.w-full.px-4.py-2.bg-gray-500.bg-opacity-5.border.border-gray-500.border-opacity-20.text-gray-500(value="Search" type="text" class="focus:outline-none") 开始绘制 + button.mt-4.rounded-lg.h-9.w-full.px-4.py-2.bg-gray-500.bg-opacity-5.border.border-gray-500.border-opacity-20.text-gray-500(value="Search" type="text" class="focus:outline-none" @click="TaskSubmit()") 开始绘制 // 中间输出 main(class="xl:col-span-3 lg:col-span-2 lg:overflow-y-auto lg:overflow-x-hidden border-x border-white/10 relative scrollbar-hide") div.flex.gap-2.pb-8 @@ -79,12 +79,16 @@ div(class="mt-[60px] grid grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 text-white b @click="views.cardMode = !views.cardMode" ) img(:src="IconStack") - div.flex(:class="{'justify-center': !views.cardMode, 'flex-col':views.cardMode }") - div.bg-red-500.relative(style="max-width: min(512px, 100%);") - img(:src="ImageDemo" class="rounded-md object-contain") - div.rounded-md.absolute.inset-0.flex.flex-col.items-center.justify-center.transition-opacity.bg-gradient-to-t.to-transparent.opacity-0( - class="hover:cursor-pointer hover:opacity-100 from-black/90" - ) + // 卡片模式 + div.flex(:class="{'justify-center': !views.cardMode, 'flex-col':views.cardMode}") + template(v-for="task in tasks" :key="task.id") + div.relative.bg-green-600.rounded-md(v-if="task.data" style="max-width: min(512px, 100%);") + div.object-contain + img(loading="lazy" :src="img" alt="task" v-for="img in task.data" :key="img") + div.absolute.left-2.right-2.bottom-2.h-8.bg-green-500.rounded-full.overflow-hidden.text-green-900.text-xs + div.h-full.flex.items-center.text-center.px-2.bg-green-400(:style="`width:${task.progress*100}%`") {{ task.status }} {{ task.progress*100 }}% + div.absolute.inset-0.flex.flex-col.items-center.justify-center.transition-opacity.bg-gradient-to-t.to-transparent.opacity-0(class="hover:cursor-pointer hover:opacity-100 from-black/90") + pre {{ task }} // 右侧参数 aside(class="lg:overflow-y-auto relative z-20 transition-all scrollbar-hide") div(class="px-6 divide-y divide-white/10") @@ -215,22 +219,6 @@ const imageCreate = ref({ filter_list: [0, 1, 2, 3, 4, 5, 6], exclude_on: false, // 排除开关 models_show: false, // 模型列表开关 - // 输入: - // 输入关键词 - // 排除关键词 - // 预训练风格 - // 图片生成图片 - // 图像强度 - - // 输出: - // model - // 图片尺寸 - // 图像指导 - // 质量与细节 - // 随机数种子 - // 采样器 - // 图片数量 - // 私有会话 }) // 新任务表单 @@ -261,15 +249,9 @@ const models = ref([ { name:'Colorpop7', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' }, ]) -const tasks = ref([ - // 以图生成图, 正面描述词, 反面描述词, 生成数量, 生成质量, 生成尺寸, 生成模型, 生成图片, 随机种子, 生成指导 - { tid:'sjaksjka0', model:'Colorpop0', image:'', width:768, height:768, number:1, seed:1, quality:1, prompt:'prompt0' }, - { tid:'sjaksjka1', model:'Colorpop1', image:'', width:768, height:768, number:1, seed:1, quality:1, prompt:'prompt1' }, - { tid:'sjaksjka2', model:'Colorpop2', image:'', width:768, height:768, number:1, seed:1, quality:1, prompt:'prompt2' }, - { tid:'sjaksjka3', model:'Colorpop3', image:'', width:768, height:768, number:1, seed:1, quality:1, prompt:'prompt3' }, -]) - -const sizes = ref([ +const images = ref([]) +const tasks = ref([]) +const sizes = ref([ { id:'image-dim-1', width:512, height:512 }, { id:'image-dim-2', width:768, height:768 }, { id:'image-dim-3', width:1024, height:1024 }, @@ -302,21 +284,24 @@ const ModelsSelect = (index, model) => { // 提交新任务 const TaskSubmit = () => { - console.log(new_task.value) - tasks.value.push(new_task.value) - fetch('/api/task', { + fetch('/api/drawing', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(new_task.value) - }) -} - -// 查询任务状态 -const TaskQuery = (tid) => { - console.log(tid) - fetch('/api/task/'+tid, { - method: 'GET', - headers: {'Content-Type': 'application/json'}, + }).then(res => res.json()).then(data => { + console.log(`${data.id}: ${data.status}`) + tasks.value.push(data) + // 轮询任务状态 + let t2 = window.setInterval(() => { + fetch('/api/drawing/'+data.id).then(res => res.json()).then(data => { + console.log(data.id, data.status, data.progress) + tasks.value = tasks.value.map(x => x.id == data.id ? data : x) + if (data.status == 'done') { + //data.data = ['https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png'] + window.clearInterval(t2) + } + }) + }, 1000) }) } diff --git a/server.py b/server.py index b1caafe..6f3eaf5 100644 --- a/server.py +++ b/server.py @@ -267,7 +267,8 @@ def main_dev(opt): # 检查输出目录是否存在 os.makedirs(opt.outdir, exist_ok=True) - outpath = opt.outdir + # 绝对路径 + outpath = os.path.join(opt.outdir) # 创建水印编码器 wm = "SDV2"