图像路径

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
+  //      }
+  //    }
+  //  }
+  //}
 })

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%);")
+    div.flex(:class="{'justify-center': !views.cardMode, 'flex-col':views.cardMode}")
-        img(:src="ImageDemo" class="rounded-md object-contain")
+      template(v-for="task in tasks" :key="task.id")
-        div.rounded-md.absolute.inset-0.flex.flex-col.items-center.justify-center.transition-opacity.bg-gradient-to-t.to-transparent.opacity-0(
+        div.relative.bg-green-600.rounded-md(v-if="task.data" style="max-width: min(512px, 100%);")
-          class="hover:cursor-pointer hover:opacity-100 from-black/90"
+          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([
+const images = ref([])
-  // 以图生成图, 正面描述词, 反面描述词, 生成数量, 生成质量, 生成尺寸, 生成模型, 生成图片, 随机种子, 生成指导
+const tasks  = ref([])
-  { tid:'sjaksjka0', model:'Colorpop0', image:'', width:768, height:768, number:1, seed:1, quality:1, prompt:'prompt0' },
+const sizes  = ref([
-  { 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([
   { 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)
+  fetch('/api/drawing', {
-  tasks.value.push(new_task.value)
-  fetch('/api/task', {
     method: 'POST',
     headers: {'Content-Type': 'application/json'},
     body: JSON.stringify(new_task.value)
-  })
+  }).then(res => res.json()).then(data => {
-}
+    console.log(`${data.id}: ${data.status}`)
-
+    tasks.value.push(data)
-// 查询任务状态
+    // 轮询任务状态
-const TaskQuery = (tid) => {
+    let t2 = window.setInterval(() => {
-  console.log(tid)
+      fetch('/api/drawing/'+data.id).then(res => res.json()).then(data => {
-  fetch('/api/task/'+tid, {
+        console.log(data.id, data.status, data.progress)
-    method: 'GET',
+        tasks.value = tasks.value.map(x => x.id == data.id ? data : x)
-    headers: {'Content-Type': 'application/json'},
+        if (data.status == 'done') {
+          //data.data = ['https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png']
+          window.clearInterval(t2)
+        }
+      })
+    }, 1000)
   })
 }
 

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"