【代码优化】AI：绘图 index.vue 代码梳理 80%（Dall3.vue）

ba8681e3 · YunaiV · e881b9ce · ba8681e3 · ba8681e3 · ba8681e3
Commit ba8681e3 authored Jul 09, 2024 by YunaiV
Showing with 192 additions and 178 deletions

src/views/ai/image/index/components/ImageDetail.vue
+19 -0

src/views/ai/image/index/components/midjourney/index.vue
+91 -172

src/views/ai/image/index/index.vue
+5 -5

src/views/ai/utils/constants.ts
+77 -1

No files found.
--- a/src/views/ai/image/index/components/ImageDetail.vue
+++ b/src/views/ai/image/index/components/ImageDetail.vue
@@ -119,6 +119,25 @@
        {{ Dall3StyleList.find((item: ImageModelVO) => item.key === detail?.options?.style)?.name }}
      </div>
    </div>
+    <!-- Midjourney 专属区域 -->
+    <div
+      class="item"
+      v-if="detail.platform === AiPlatformEnum.MIDJOURNEY && detail?.options?.version"
+    >
+      <div class="tip">模型版本</div>
+      <div class="body">
+        {{ detail?.options?.version }}
+      </div>
+    </div>
+    <div
+      class="item"
+      v-if="detail.platform === AiPlatformEnum.MIDJOURNEY && detail?.options?.referImageUrl"
+    >
+      <div class="tip">参考图</div>
+      <div class="body">
+        <el-image :src="detail.options.referImageUrl" />
+      </div>
+    </div>
  </el-drawer>
 </template>

--- a/src/views/ai/image/index/midjourney/index.vue
+++ b/src/views/ai/image/index/midjourney/index.vue
@@ -7,7 +7,7 @@
      v-model="prompt"
      maxlength="1024"
      rows="5"
-      style="width: 100%; margin-top: 15px;"
+      class="w-100% mt-15px"
      input-style="border-radius: 7px;"
      placeholder="例如：童话里的小屋应该是什么样子？"
      show-word-limit
@@ -19,12 +19,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 ImageHotWords"
-                 @click="handleHotWordClick(hotWord)"
+        :key="hotWord"
+        @click="handleHotWordClick(hotWord)"
      >
        {{ hotWord }}
      </el-button>
@@ -35,17 +36,36 @@
      <el-text tag="b">尺寸</el-text>
    </div>
    <el-space wrap class="size-list">
-      <div class="size-item"
+      <div
-           v-for="imageSize in imageSizeList"
+        class="size-item"
-           :key="imageSize.key"
+        v-for="imageSize in MidjourneySizeList"
-           @click="handleSizeClick(imageSize)">
+        :key="imageSize.key"
-        <div :class="selectImageSize === imageSize.key ? 'size-wrapper selectImageSize' : 'size-wrapper'">
+        @click="handleSizeClick(imageSize)"
+      >
+        <div
+          :class="selectSize === imageSize.key ? 'size-wrapper selectImageSize' : 'size-wrapper'"
+        >
          <div :style="imageSize.style"></div>
        </div>
        <div class="size-font">{{ imageSize.key }}</div>
      </div>
    </el-space>
  </div>
+  <div class="model">
+    <div>
+      <el-text tag="b">模型</el-text>
+    </div>
+    <el-space wrap class="model-list">
+      <div
+        :class="selectModel === model.key ? 'modal-item selectModel' : 'modal-item'"
+        v-for="model in MidjourneyModels"
+        :key="model.key"
+      >
+        <el-image :src="model.image" fit="contain" @click="handleModelClick(model)" />
+        <div class="model-font">{{ model.name }}</div>
+      </div>
+    </el-space>
+  </div>
  <div class="version">
    <div>
      <el-text tag="b">版本</el-text>
@@ -53,11 +73,9 @@
    <el-space wrap class="version-list">
      <el-select
        v-model="selectVersion"
-        class="version-select"
+        class="version-select !w-350px"
        clearable
        placeholder="请选择版本"
-        style="width: 350px"
-        @change="handleChangeVersion"
      >
        <el-option
          v-for="item in versionList"
@@ -70,226 +88,128 @@
  </div>
  <div class="model">
    <div>
-      <el-text tag="b">模型</el-text>
-    </div>
-    <el-space wrap class="model-list">
-      <div
-        :class="selectModel === model.key ? 'modal-item selectModel' : 'modal-item'"
-        v-for="model in models"
-        :key="model.key"
-      >
-        <el-image
-          :src="model.image"
-          fit="contain"
-          @click="handleModelClick(model)"
-        />
-        <div class="model-font">{{model.name}}</div>
-      </div>
-    </el-space>
-  </div>
-  <div class="model">
-    <div>
      <el-text tag="b">参考图</el-text>
    </div>
    <el-space wrap class="model-list">
-      <UploadImg v-model="referImage" height="80px" width="80px" />
+      <UploadImg v-model="referImageUrl" height="120px" width="120px" />
    </el-space>
  </div>
  <div class="btns">
-    <!--    <el-button size="large" round>重置内容</el-button>-->
+    <el-button type="primary" size="large" round @click="handleGenerateImage">
-    <el-button type="primary" size="large" round @click="handleGenerateImage">生成内容</el-button>
+      {{ drawIn ? '生成中' : '生成内容' }}
+    </el-button>
  </div>
 </template>
 <script setup lang="ts">
+import { ImageApi, ImageMidjourneyImagineReqVO, ImageVO } from '@/api/ai/image'
-// image 模型
+import {
-import {ImageApi, ImageMidjourneyImagineReqVO, ImageVO} from "@/api/ai/image";
+  AiPlatformEnum,
-// message
+  ImageHotWords,
-const message = useMessage()
+  ImageSizeVO,
-// 定义 emits
+  ImageModelVO,
-const emits = defineEmits(['onDrawStart', 'onDrawComplete'])
+  MidjourneyModels,
+  MidjourneySizeList,
-interface ImageModelVO {
+  MidjourneyVersions,
-  key: string
+  NijiVersionList
-  name: string
+} from '@/views/ai/utils/constants'
-  image: string
-}
+const message = useMessage() // 消息弹窗
-// image 大小
-interface ImageSizeVO {
-  key: string
-  style: string,
-  width: string,
-  height: string,
-}
 // 定义属性
-const prompt = ref<string>('')  // 提示词
+const drawIn = ref<boolean>(false) // 生成中
-const referImage = ref<any>()  // 参考图
 const selectHotWord = ref<string>('') // 选中的热词
-const hotWords = ref<string[]>(['中国旗袍', '古装美女', '卡通头像', '机甲战士', '童话小屋', '中国长城'])  // 热词
+// 表单
-const selectModel = ref<string>('midjourney') // 选中的热词
+const prompt = ref<string>('') // 提示词
-const models = ref<ImageModelVO[]>([
+const referImageUrl = ref<any>() // 参考图
-  {
+const selectModel = ref<string>('midjourney') // 选中的模型
-    key: 'midjourney',
+const selectSize = ref<string>('1:1') // 选中 size
-    name: 'MJ',
-    image: 'https://bigpt8.com/pc/_nuxt/mj.34a61377.png',
-  },
-  {
-    key: 'niji',
-    name: 'NIJI',
-    image: 'https://bigpt8.com/pc/_nuxt/nj.ca79b143.png',
-  },
-])  // 模型
-const selectImageSize = ref<string>('1:1') // 选中 size
-const imageSizeList = ref<ImageSizeVO[]>([
-  {
-    key: '1:1',
-    width: "1",
-    height: "1",
-    style: 'width: 30px; height: 30px;background-color: #dcdcdc;',
-  },
-  {
-    key: '3:4',
-    width: "3",
-    height: "4",
-    style: 'width: 30px; height: 40px;background-color: #dcdcdc;',
-  },
-  {
-    key: '4:3',
-    width: "4",
-    height: "3",
-    style: 'width: 40px; height: 30px;background-color: #dcdcdc;',
-  },
-  {
-    key: '9:16',
-    width: "9",
-    height: "16",
-    style: 'width: 30px; height: 50px;background-color: #dcdcdc;',
-  },
-  {
-    key: '16:9',
-    width: "16",
-    height: "9",
-    style: 'width: 50px; height: 30px;background-color: #dcdcdc;',
-  },
-]) // size
-// version
-const midjourneyVersionList = ref<any>([
-  {
-    value: '6.0',
-    label: 'v6.0',
-  },
-  {
-    value: '5.2',
-    label: 'v5.2',
-  },
-  {
-    value: '5.1',
-    label: 'v5.1',
-  },
-  {
-    value: '5.0',
-    label: 'v5.0',
-  },
-  {
-    value: '4.0',
-    label: 'v4.0',
-  },
-])
-const nijiVersionList = ref<any>([
-  {
-    value: '5',
-    label: 'v5',
-  },
-])
 const selectVersion = ref<any>('6.0') // 选中的 version
-let versionList = ref<any>([]) // version 列表
+const versionList = ref<any>(MidjourneyVersions) // version 列表
-versionList.value = midjourneyVersionList.value // 默认选择 midjourney
+const emits = defineEmits(['onDrawStart', 'onDrawComplete']) // 定义 emits
-/**  热词 - click  */
+/** 选择热词 */
 const handleHotWordClick = async (hotWord: string) => {
-  // 取消
+  // 情况一：取消选中
  if (selectHotWord.value == hotWord) {
    selectHotWord.value = ''
    return
  }
-  // 选中
-  selectHotWord.value = hotWord
+  // 情况二：选中
-  // 设置提示次
+  selectHotWord.value = hotWord // 选中
-  prompt.value = hotWord
+  prompt.value = hotWord // 设置提示次
 }
-/**  size - click  */
+/** 点击 size 尺寸 */
 const handleSizeClick = async (imageSize: ImageSizeVO) => {
-  selectImageSize.value = imageSize.key
+  selectSize.value = imageSize.key
 }
-/**  模型 - click  */
+/** 点击 model 模型 */
 const handleModelClick = async (model: ImageModelVO) => {
  selectModel.value = model.key
  if (model.key === 'niji') {
-    versionList.value = nijiVersionList.value // 默认选择 niji
+    versionList.value = NijiVersionList // 默认选择 niji
  } else {
-    versionList.value = midjourneyVersionList.value // 默认选择 midjourney
+    versionList.value = MidjourneyVersions // 默认选择 midjourney
  }
  selectVersion.value = versionList.value[0].value
 }
-/**  version - click  */
+/** 图片生成 */
-const handleChangeVersion = async (version) => {
-  console.log('version', version)
-}
-/** 图片生产  */
 const handleGenerateImage = async () => {
  // 二次确认
  await message.confirm(`确认生成内容?`)
-  // todo @芋艿 图片生产逻辑
  try {
+    // 加载中
+    drawIn.value = true
    // 回调
-    emits('onDrawStart', selectModel.value)
+    emits('onDrawStart', AiPlatformEnum.MIDJOURNEY)
    // 发送请求
-    const imageSize = imageSizeList.value.find(item => selectImageSize.value === item.key) as ImageSizeVO
+    const imageSize = MidjourneySizeList.find(
+      (item) => selectSize.value === item.key
+    ) as ImageSizeVO
    const req = {
      prompt: prompt.value,
      model: selectModel.value,
      width: imageSize.width,
      height: imageSize.height,
      version: selectVersion.value,
-      referImageUrl: referImage.value,
+      referImageUrl: referImageUrl.value
    } as ImageMidjourneyImagineReqVO
    await ImageApi.midjourneyImagine(req)
  } finally {
    // 回调
-    emits('onDrawComplete', selectModel.value)
+    emits('onDrawComplete', AiPlatformEnum.MIDJOURNEY)
+    // 加载结束
+    drawIn.value = false
  }
 }
 /** 填充值 */
-const settingValues = async (imageDetail: ImageVO) => {
+const settingValues = async (detail: ImageVO) => {
  // 提示词
-  prompt.value = imageDetail.prompt
+  prompt.value = detail.prompt
  // image size
-  const imageSize = imageSizeList.value.find(item => item.key === `${imageDetail.width}:${imageDetail.height}`) as ImageSizeVO
+  const imageSize = MidjourneySizeList.find(
-  selectImageSize.value = imageSize.key
+    (item) => item.key === `${detail.width}:${detail.height}`
+  ) as ImageSizeVO
+  selectSize.value = imageSize.key
  // 选中模型
-  const model = models.value.find(item => item.key === imageDetail.options?.model) as ImageModelVO
+  const model = MidjourneyModels.find((item) => item.key === detail.options?.model) as ImageModelVO
  await handleModelClick(model)
  // 版本
-  selectVersion.value = versionList.value.find(item => item.value === imageDetail.options?.version).value
+  selectVersion.value = versionList.value.find(
+    (item) => item.value === detail.options?.version
+  ).value
  // image
-  referImage.value = imageDetail.options.referImageUrl
+  referImageUrl.value = detail.options.referImageUrl
 }
 /** 暴露组件方法 */
 defineExpose({ settingValues })
 </script>
 <style scoped lang="scss">
 // 提示词
 .prompt {
 }
@@ -354,7 +274,6 @@ defineExpose({ settingValues })
  }
 }
 // 尺寸
 .image-size {
  width: 100%;

--- a/src/views/ai/image/index/index.vue
+++ b/src/views/ai/image/index/index.vue
@@ -31,7 +31,7 @@ import ImageList from './components/ImageList.vue'
 import { AiPlatformEnum } from '@/views/ai/utils/constants'
 import { ImageVO } from '@/api/ai/image'
 import Dall3 from './components/dall3/index.vue'
-import Midjourney from './midjourney/index.vue'
+import Midjourney from './components/midjourney/index.vue'
 import StableDiffusion from './components/stableDiffusion/index.vue'
 const imageListRef = ref<any>() // image 列表 ref
@@ -40,7 +40,7 @@ const midjourneyRef = ref<any>() // midjourney ref
 const stableDiffusionRef = ref<any>() // stable diffusion ref
 // 定义属性
-const selectPlatform = ref(AiPlatformEnum.OPENAI)
+const selectPlatform = ref(AiPlatformEnum.MIDJOURNEY)
 const platformOptions = [
  {
    label: 'DALL3 绘画',
@@ -57,10 +57,10 @@ const platformOptions = [
 ]
 /** 绘画 start  */
-const handleDrawStart = async (type) => {}
+const handleDrawStart = async (platform: string) => {}
-/** 绘画 complete  */
+/** 绘画 complete */
-const handleDrawComplete = async (type) => {
+const handleDrawComplete = async (platform: string) => {
  await imageListRef.value.getImageList()
 }

--- a/src/views/ai/utils/constants.ts
+++ b/src/views/ai/utils/constants.ts
@@ -238,7 +238,7 @@ export const Dall3StyleList: ImageModelVO[] = [
  }
 ]
-interface ImageSizeVO {
+export interface ImageSizeVO {
  key: string
  name: string
  style: string
@@ -269,3 +269,79 @@ export const Dall3SizeList: ImageSizeVO[] = [
    style: 'width: 50px; height: 30px;background-color: #dcdcdc;'
  }
 ]
+export const MidjourneyModels: ImageModelVO[] = [
+  {
+    key: 'midjourney',
+    name: 'MJ',
+    image: 'https://bigpt8.com/pc/_nuxt/mj.34a61377.png'
+  },
+  {
+    key: 'niji',
+    name: 'NIJI',
+    image: 'https://bigpt8.com/pc/_nuxt/nj.ca79b143.png'
+  }
+]
+export const MidjourneySizeList: ImageSizeVO[] = [
+  {
+    key: '1:1',
+    width: '1',
+    height: '1',
+    style: 'width: 30px; height: 30px;background-color: #dcdcdc;'
+  },
+  {
+    key: '3:4',
+    width: '3',
+    height: '4',
+    style: 'width: 30px; height: 40px;background-color: #dcdcdc;'
+  },
+  {
+    key: '4:3',
+    width: '4',
+    height: '3',
+    style: 'width: 40px; height: 30px;background-color: #dcdcdc;'
+  },
+  {
+    key: '9:16',
+    width: '9',
+    height: '16',
+    style: 'width: 30px; height: 50px;background-color: #dcdcdc;'
+  },
+  {
+    key: '16:9',
+    width: '16',
+    height: '9',
+    style: 'width: 50px; height: 30px;background-color: #dcdcdc;'
+  }
+]
+export const MidjourneyVersions = [
+  {
+    value: '6.0',
+    label: 'v6.0'
+  },
+  {
+    value: '5.2',
+    label: 'v5.2'
+  },
+  {
+    value: '5.1',
+    label: 'v5.1'
+  },
+  {
+    value: '5.0',
+    label: 'v5.0'
+  },
+  {
+    value: '4.0',
+    label: 'v4.0'
+  }
+]
+export const NijiVersionList = [
+  {
+    value: '5',
+    label: 'v5'
+  }
+]