【代码评审】AI：图片 SD 的接入

68c573d9 · YunaiV · d800143a · 68c573d9
Commit 68c573d9 authored Jun 28, 2024 by YunaiV
Hide whitespace changes
Inline Side-by-side

Showing with 65 additions and 65 deletions

src/views/ai/image/stable-diffusion/index.vue
+65 -65

No files found.
--- a/src/views/ai/image/stable-diffusion/index.vue
+++ b/src/views/ai/image/stable-diffusion/index.vue
@@ -8,7 +8,7 @@
      v-model="prompt"
      maxlength="1024"
      rows="5"
-      style="width: 100%; margin-top: 15px;"
+      style="width: 100%; margin-top: 15px"
      input-style="border-radius: 7px;"
      placeholder="例如：童话里的小屋应该是什么样子？"
      show-word-limit
@@ -20,12 +20,13 @@
      <el-text tag="b">随机热词</el-text>
    </div>
    <el-space wrap class="word-list">
-      <el-button round
+      <el-button
-                 class="btn"
+        round
-                 :type="(selectHotWord === hotWord ? 'primary' : 'default')"
+        class="btn"
-                 v-for="hotWord in hotWords"
+        :type="selectHotWord === hotWord ? 'primary' : 'default'"
-                 :key="hotWord"
+        v-for="hotWord in hotWords"
-                 @click="handlerHotWordClick(hotWord)"
+        :key="hotWord"
+        @click="handlerHotWordClick(hotWord)"
      >
        {{ hotWord }}
      </el-button>
@@ -33,36 +34,20 @@
  </div>
  <div class="group-item">
    <div>
-      <el-text tag="b">采样</el-text>
+      <el-text tag="b">采样方法</el-text>
    </div>
    <el-space wrap class="group-item-body">
-      <el-select
+      <el-select v-model="selectSampler" placeholder="Select" size="large" style="width: 350px">
-        v-model="selectSampler"
+        <el-option v-for="item in sampler" :key="item.key" :label="item.name" :value="item.key" />
-        placeholder="Select"
-        size="large"
-        style="width: 350px;"
-      >
-        <el-option
-          v-for="item in sampler"
-          :key="item.key"
-          :label="item.name"
-          :value="item.key"
-        />
      </el-select>
    </el-space>
  </div>
  <div class="group-item">
    <div>
      <el-text tag="b">图片尺寸</el-text>
    </div>
    <el-space wrap class="group-item-body">
-      <el-select
+      <el-select v-model="selectImageSize" placeholder="Select" size="large" style="width: 350px">
-        v-model="selectImageSize"
-        placeholder="Select"
-        size="large"
-        style="width: 350px;"
-      >
        <el-option
          v-for="item in imageSizeList"
          :key="item.key"
@@ -77,29 +62,37 @@
      <el-text tag="b">迭代步数</el-text>
    </div>
    <el-space wrap class="group-item-body">
-      <el-input v-model="steps" type="number" size="large" style="width: 350px" placeholder="Please input" />
+      <el-input
+        v-model="steps"
+        type="number"
+        size="large"
+        style="width: 350px"
+        placeholder="Please input"
+      />
    </el-space>
  </div>
  <div class="group-item">
    <div>
-      <el-text tag="b">随机性</el-text>
+      <el-text tag="b">随机因子</el-text>
    </div>
    <el-space wrap class="group-item-body">
-      <el-input v-model="seed" type="number" size="large" style="width: 350px" placeholder="Please input" />
+      <el-input
+        v-model="seed"
+        type="number"
+        size="large"
+        style="width: 350px"
+        placeholder="Please input"
+      />
    </el-space>
  </div>
  <div class="btns">
-    <el-button type="primary"
+    <el-button type="primary" size="large" round :loading="drawIn" @click="handlerGenerateImage">
-               size="large"
+      {{ drawIn ? '生成中' : '生成内容' }}
-               round
-               :loading="drawIn"
-               @click="handlerGenerateImage">
-      {{drawIn ? '生成中' : '生成内容'}}
    </el-button>
  </div>
 </template>
 <script setup lang="ts">
-import {ImageApi, ImageDrawReqVO} from '@/api/ai/image';
+import { ImageApi, ImageDrawReqVO } from '@/api/ai/image'
 // image 模型
 interface ImageModelVO {
@@ -110,91 +103,101 @@ interface ImageModelVO {
 // image 大小
 interface ImageSizeVO {
  key: string
-  width: string,
+  width: string
-  height: string,
+  height: string
 }
 // 定义属性
-const prompt = ref<string>('')  // 提示词
+const prompt = ref<string>('') // 提示词
-const drawIn = ref<boolean>(false)  // 生成中
+const drawIn = ref<boolean>(false) // 生成中
 const selectHotWord = ref<string>('') // 选中的热词
-const hotWords = ref<string[]>(['中国旗袍', '古装美女', '卡通头像', '机甲战士', '童话小屋', '中国长城'])  // 热词
+const hotWords = ref<string[]>([
+  '中国旗袍',
+  '古装美女',
+  '卡通头像',
+  '机甲战士',
+  '童话小屋',
+  '中国长城'
+]) // 热词
 const selectSampler = ref<any>({}) // 模型
 // message
 const message = useMessage()
-// 模型
+// 采样方法 TODO @fan：有 Euler a；DPM++ 2S a；DPM++ 2M；DPM++ SDE；DPM++ 2M SDE；UniPC；Restart；另外，要不这种枚举，我们都放到 image 里？写成 stableDiffusionSampler ？
 const sampler = ref<ImageModelVO[]>([
  {
    key: 'Euler a',
-    name: 'Euler a',
+    name: 'Euler a'
  },
  {
    key: 'DPM++ 2S a Karras',
-    name: 'DPM++ 2S a Karras',
+    name: 'DPM++ 2S a Karras'
  },
  {
    key: 'DPM++ 2M Karras',
-    name: 'DPM++ 2M Karras',
+    name: 'DPM++ 2M Karras'
  },
  {
    key: 'DPM++ SDE Karras',
-    name: 'DPM++ SDE Karras',
+    name: 'DPM++ SDE Karras'
  },
  {
    key: 'DPM++ 2M SDE Karras',
-    name: 'DPM++ 2M SDE Karras',
+    name: 'DPM++ 2M SDE Karras'
-  },
+  }
-])  // 模型
+])
 selectSampler.value = sampler.value[0]
+// TODO @fan：是不是还有个，采样调度器
+// TODO @fan：是不是还有个，引导系数
 const selectImageSize = ref<ImageSizeVO>({} as ImageSizeVO) // 选中 size
+// TODO @fan：这个我们是不是只写 width、height 就好啦。key 可以在 option 拼接出来？
 const imageSizeList = ref<ImageSizeVO[]>([
  {
    key: '512x512',
    width: '512',
-    height: '512',
+    height: '512'
  },
  {
    key: '1024x1024',
    width: '1024',
-    height: '1024',
+    height: '1024'
  },
  {
    key: '1024x1792',
    width: '1024',
-    height: '1792',
+    height: '1792'
  },
  {
    key: '1792x1024',
    width: '1792',
-    height: '1024',
+    height: '1024'
  },
  {
    key: '2048x2048',
    width: '2048',
-    height: '2048',
+    height: '2048'
  },
  {
    key: '720x1280',
    width: '720',
-    height: '1280',
+    height: '1280'
  },
  {
    key: '1080x1920',
    width: '1080',
-    height: '1920',
+    height: '1920'
  },
  {
    key: '1440x2560',
    width: '1440',
-    height: '2560',
+    height: '2560'
  },
  {
    key: '2160x3840',
    width: '2160',
-    height: '3840',
+    height: '3840'
-  },
+  }
 ]) // size
 selectImageSize.value = imageSizeList.value[0]
@@ -239,8 +242,8 @@ const handlerGenerateImage = async () => {
      options: {
        sampler: selectSampler.value.key, // 采样算法
        seed: seed.value, // 随机种子
-        steps: steps.value, // 图片生成步数
+        steps: steps.value // 图片生成步数
-      },
+      }
    } as ImageDrawReqVO
    // 发送请求
    await ImageApi.drawImage(form)
@@ -251,10 +254,8 @@ const handlerGenerateImage = async () => {
    drawIn.value = false
  }
 }
 </script>
 <style scoped lang="scss">
 // 提示词
 .prompt {
 }
@@ -288,7 +289,6 @@ const handlerGenerateImage = async () => {
  }
 }
 .btns {
  display: flex;
  justify-content: center;