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

7706e46b · YunaiV · 75af4f07 · 7706e46b · 7706e46b · 7706e46b
Commit 7706e46b authored Jul 09, 2024 by YunaiV
Hide whitespace changes
Inline Side-by-side

Showing with 75 additions and 80 deletions

src/views/ai/image/index/components/dall3/index.vue
+58 -77

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

src/views/ai/utils/constants.ts
+14 -0

No files found.
--- a/src/views/ai/image/index/dall3/index.vue
+++ b/src/views/ai/image/index/dall3/index.vue
@@ -3,12 +3,11 @@
  <div class="prompt">
    <el-text tag="b">画面描述</el-text>
    <el-text tag="p">建议使用“形容词+动词+风格”的格式，使用“，”隔开</el-text>
-    <!-- TODO @fan：style 看看能不能哟 unocss 替代 @芋艿 尝试了下没效果，哪个地方有使用么，我看看  -->
    <el-input
      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
@@ -20,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>
@@ -37,17 +37,12 @@
    </div>
    <el-space wrap class="model-list">
      <div
-        :class="selectModel === model.key ? 'modal-item selectModel' : 'modal-item'"
+        :class="model === model.key ? 'modal-item selectModel' : 'modal-item'"
-        v-for="model in models"
+        v-for="model in Dall3Models"
        :key="model.key"
      >
-        <el-image
+        <el-image :src="model.image" fit="contain" @click="handleModelClick(model)" />
-          :src="model.image"
+        <div class="model-font">{{ model.name }}</div>
-          fit="contain"
-          @click="handleModelClick(model)"
-        />
-        <div class="model-font">{{model.name}}</div>
      </div>
    </el-space>
  </div>
@@ -57,16 +52,16 @@
    </div>
    <el-space wrap class="image-style-list">
      <div
-        :class="selectImageStyle === imageStyle.key ? 'image-style-item selectImageStyle' : 'image-style-item'"
+        :class="
+          selectImageStyle === imageStyle.key
+            ? 'image-style-item selectImageStyle'
+            : 'image-style-item'
+        "
        v-for="imageStyle in imageStyleList"
        :key="imageStyle.key"
      >
-        <el-image
+        <el-image :src="imageStyle.image" fit="contain" @click="handleStyleClick(imageStyle)" />
-          :src="imageStyle.image"
+        <div class="style-font">{{ imageStyle.name }}</div>
-          fit="contain"
-          @click="handleStyleClick(imageStyle)"
-        />
-        <div class="style-font">{{imageStyle.name}}</div>
      </div>
    </el-space>
  </div>
@@ -75,11 +70,13 @@
      <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 imageSizeList"
-           @click="handleSizeClick(imageSize)">
+        :key="imageSize.key"
-        <div :class="selectImageSize === imageSize.key ? 'size-wrapper selectImageSize' : 'size-wrapper'">
+        @click="handleSizeClick(imageSize)"
+      >
+        <div :class="size === imageSize.key ? 'size-wrapper selectImageSize' : 'size-wrapper'">
          <div :style="imageSize.style"></div>
        </div>
        <div class="size-font">{{ imageSize.name }}</div>
@@ -87,17 +84,16 @@
    </el-space>
  </div>
  <div class="btns">
-    <el-button type="primary"
+    <el-button type="primary" size="large" round :loading="drawIn" @click="handleGenerateImage">
-               size="large"
+      {{ drawIn ? '生成中' : '生成内容' }}
-               round
-               :loading="drawIn"
-               @click="handleGenerateImage">
-      {{drawIn ? '生成中' : '生成内容'}}
    </el-button>
  </div>
 </template>
 <script setup lang="ts">
-import {ImageApi, ImageDrawReqVO, ImageVO} from '@/api/ai/image';
+import { ImageApi, ImageDrawReqVO, ImageVO } from '@/api/ai/image'
+import { Dall3Models, ImageHotWords } from '@/views/ai/utils/constants'
+const message = useMessage() // 消息弹窗
 // image 模型
 interface ImageModelVO {
@@ -109,32 +105,18 @@ interface ImageModelVO {
 // image 大小
 interface ImageSizeVO {
  key: string
-  name: string,
+  name: string
-  style: string,
+  style: 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 model = ref<string>('dall-e-3') // 模型
-const selectModel = ref<string>('dall-e-3') // 模型
+const size = ref<string>('1024x1024') // 选中 size
-// message
-const message = useMessage()
-const models = ref<ImageModelVO[]>([
-  {
-    key: 'dall-e-3',
-    name: 'DALL·E 3',
-    image: `/src/assets/ai/dall2.jpg`,
-  },
-  {
-    key: 'dall-e-2',
-    name: 'DALL·E 2',
-    image: `/src/assets/ai/dall3.jpg`,
-  },
-])  // 模型
 const selectImageStyle = ref<string>('vivid') // style 样式
@@ -142,37 +124,36 @@ const imageStyleList = ref<ImageModelVO[]>([
  {
    key: 'vivid',
    name: '清晰',
-    image: `/src/assets/ai/qingxi.jpg`,
+    image: `/src/assets/ai/qingxi.jpg`
  },
  {
    key: 'natural',
    name: '自然',
-    image: `/src/assets/ai/ziran.jpg`,
+    image: `/src/assets/ai/ziran.jpg`
-  },
+  }
-])  // style
+]) // style
-const selectImageSize = ref<string>('1024x1024') // 选中 size
 const imageSizeList = ref<ImageSizeVO[]>([
  {
    key: '1024x1024',
    name: '1:1',
    width: '1024',
    height: '1024',
-    style: 'width: 30px; height: 30px;background-color: #dcdcdc;',
+    style: 'width: 30px; height: 30px;background-color: #dcdcdc;'
  },
  {
    key: '1024x1792',
    name: '3:5',
    width: '1024',
    height: '1792',
-    style: 'width: 30px; height: 50px;background-color: #dcdcdc;',
+    style: 'width: 30px; height: 50px;background-color: #dcdcdc;'
  },
  {
    key: '1792x1024',
    name: '5:3',
    width: '1792',
    height: '1024',
-    style: 'width: 50px; height: 30px;background-color: #dcdcdc;',
+    style: 'width: 50px; height: 30px;background-color: #dcdcdc;'
  }
 ]) // size
@@ -196,7 +177,7 @@ const handleHotWordClick = async (hotWord: string) => {
 /**  模型 - click  */
 const handleModelClick = async (model: ImageModelVO) => {
-  selectModel.value = model.key
+  model.value = model.key
 }
 /**  样式 - click  */
@@ -206,7 +187,7 @@ const handleStyleClick = async (imageStyle: ImageModelVO) => {
 /**  size - click  */
 const handleSizeClick = async (imageSize: ImageSizeVO) => {
-  selectImageSize.value = imageSize.key
+  size.value = imageSize.key
 }
 /**  图片生产  */
@@ -217,23 +198,23 @@ const handleGenerateImage = async () => {
    // 加载中
    drawIn.value = true
    // 回调
-    emits('onDrawStart', selectModel.value)
+    emits('onDrawStart', model.value)
-    const imageSize = imageSizeList.value.find(item => item.key === selectImageSize.value) as ImageSizeVO
+    const imageSize = imageSizeList.value.find((item) => item.key === size.value) as ImageSizeVO
    const form = {
      platform: 'OpenAI',
      prompt: prompt.value, // 提示词
-      model: selectModel.value, // 模型
+      model: model.value, // 模型
      width: imageSize.width, // size 不能为空
      height: imageSize.height, // size 不能为空
      options: {
-        style: selectImageStyle.value, // 图像生成的风格
+        style: selectImageStyle.value // 图像生成的风格
      }
    } as ImageDrawReqVO
    // 发送请求
    await ImageApi.drawImage(form)
  } finally {
    // 回调
-    emits('onDrawComplete', selectModel.value)
+    emits('onDrawComplete', model.value)
    // 加载结束
    drawIn.value = false
  }
@@ -242,17 +223,18 @@ const handleGenerateImage = async () => {
 /** 填充值 */
 const settingValues = async (imageDetail: ImageVO) => {
  prompt.value = imageDetail.prompt
-  selectModel.value = imageDetail.model
+  model.value = imageDetail.model
  //
  selectImageStyle.value = imageDetail.options?.style
  //
-  const imageSize = imageSizeList.value.find(item => item.key === `${imageDetail.width}x${imageDetail.height}`) as ImageSizeVO
+  const imageSize = imageSizeList.value.find(
+    (item) => item.key === `${imageDetail.width}x${imageDetail.height}`
+  ) as ImageSizeVO
  await handleSizeClick(imageSize)
 }
 /** 暴露组件方法 */
 defineExpose({ settingValues })
 </script>
 <style scoped lang="scss">
 // 提示词
@@ -309,7 +291,6 @@ defineExpose({ settingValues })
  }
 }
 // 样式 style
 .image-style {
  margin-top: 30px;

--- a/src/views/ai/image/index/index.vue
+++ b/src/views/ai/image/index/index.vue
@@ -30,17 +30,17 @@
 import ImageList from './components/ImageList.vue'
 import { AiPlatformEnum } from '@/views/ai/utils/constants'
 import { ImageVO } from '@/api/ai/image'
-import Dall3 from './dall3/index.vue'
+import Dall3 from './components/dall3/index.vue'
 import Midjourney from './midjourney/index.vue'
 import StableDiffusion from './components/stableDiffusion/index.vue'
 const imageListRef = ref<any>() // image 列表 ref
-const dall3Ref = ref<any>() // openai ref
+const dall3Ref = ref<any>() // dall3(openai) ref
 const midjourneyRef = ref<any>() // midjourney ref
 const stableDiffusionRef = ref<any>() // stable diffusion ref
 // 定义属性
-const selectPlatform = ref('StableDiffusion')
+const selectPlatform = ref(AiPlatformEnum.OPENAI)
 const platformOptions = [
  {
    label: 'DALL3 绘画',

--- a/src/views/ai/utils/constants.ts
+++ b/src/views/ai/utils/constants.ts
@@ -63,6 +63,7 @@ export const ImageHotEnglishWords = [
 export interface ImageModelVO {
  key: string
  name: string
+  image?: string
 }
 export const StableDiffusionSamplers = ref<ImageModelVO[]>([
@@ -210,3 +211,16 @@ export const StableDiffusionClipGuidancePresets = ref<ImageModelVO[]>([
    name: 'SLOWEST'
  }
 ])
+export const Dall3Models = ref<ImageModelVO[]>([
+  {
+    key: 'dall-e-3',
+    name: 'DALL·E 3',
+    image: `/src/assets/ai/dall2.jpg`
+  },
+  {
+    key: 'dall-e-2',
+    name: 'DALL·E 2',
+    image: `/src/assets/ai/dall3.jpg`
+  }
+])