revert: 移除AI配图实现

src/hooks/useAIPPT.ts

@@ -1,7 +1,6 @@
-import { ref } from 'vue'
 import { nanoid } from 'nanoid'
-import type { ImageClipDataRange, PPTElement, PPTImageElement, PPTShapeElement, PPTTextElement, Slide, TextType } from '@/types/slides'
+import type { PPTElement, PPTShapeElement, PPTTextElement, Slide, TextType } from '@/types/slides'
-import type { AIPPTSlide, PexelsImage } from '@/types/AIPPT'
+import type { AIPPTSlide } from '@/types/AIPPT'
 import { useSlidesStore } from '@/store'
 import useAddSlidesOrElements from './useAddSlidesOrElements'
 import useSlideHandler from './useSlideHandler'
@@ -11,8 +10,6 @@ export default () => {
   const { addSlidesFromData } = useAddSlidesOrElements()
   const { isEmptySlide } = useSlideHandler()
 
-  const imgPool = ref<PexelsImage[]>([])
-
   const checkTextType = (el: PPTElement, type: TextType) => {
     return (el.type === 'text' && el.textType === type) || (el.type === 'shape' && el.text && el.text.type === type)
   }
@@ -160,45 +157,6 @@ export default () => {
     return el.type === 'text' ? { ...el, content, lineHeight: size < 15 ? 1.2 : el.lineHeight } : { ...el, text: { ...el.text!, content } }
   }
   
-  const getNewImgElement = (el: PPTImageElement): PPTImageElement => {
-    let targetImg: PexelsImage | null = null
-  
-    let imgs = []
-  
-    if (el.width === el.height) imgs = imgPool.value.filter(img => img.width === img.height)
-    else if (el.width > el.height) imgs = imgPool.value.filter(img => img.width > img.height)
-    else imgs = imgPool.value.filter(img => img.width <= img.height)
-    if (!imgs.length) imgs = imgPool.value
-  
-    targetImg = imgs[Math.floor(Math.random() * imgs.length)]
-    imgPool.value = imgPool.value.filter(item => item.id !== targetImg!.id)
-  
-    if (!targetImg) return el
-  
-    let scale = 1
-    let w = el.width
-    let h = el.height
-    let range: ImageClipDataRange = [[0, 0], [0, 0]]
-    const radio = el.width / el.height
-    if (targetImg.width / targetImg.height >= radio) {
-      scale = targetImg.height / el.height
-      w = targetImg.width / scale
-      const diff = (w - el.width) / 2 / w * 100
-      range = [[diff, 0], [100 - diff, 100]]
-    }
-    else {
-      scale = targetImg.width / el.width
-      h = targetImg.height / scale
-      const diff = (h - el.height) / 2 / h * 100
-      range = [[0, diff], [100, 100 - diff]]
-    }
-    const clipShape = (el.clip && el.clip.shape) ? el.clip.shape : 'rect'
-    const clip = { range, shape: clipShape }
-    const src = targetImg.src
-  
-    return { ...el, src, clip }
-  }
-  
   const getMdContent = (content: string) => {
     const regex = /```markdown([^```]*)```/
     const match = content.match(regex)
@@ -206,9 +164,7 @@ export default () => {
     return content.replace('```markdown', '').replace('```', '')
   }
 
-  const AIPPT = (templateSlides: Slide[], _AISlides: AIPPTSlide[], imgs: PexelsImage[]) => {
+  const AIPPT = (templateSlides: Slide[], _AISlides: AIPPTSlide[]) => {
-    imgPool.value = imgs
-
     const AISlides: AIPPTSlide[] = []
     for (const template of _AISlides) {
       if (template.type === 'content') {
@@ -299,7 +255,6 @@ export default () => {
     for (const item of AISlides) {
       if (item.type === 'cover') {
         const elements = coverTemplate.elements.map(el => {
-          if (el.type === 'image' && el.imageType && imgPool.value.length) return getNewImgElement(el)
           if (el.type !== 'text' && el.type !== 'shape') return el
           if (checkTextType(el, 'title') && item.data.title) {
             return getNewTextElement({ el, text: item.data.title, maxLine: 1 })
@@ -334,7 +289,6 @@ export default () => {
         const longestText = item.data.items.reduce((longest, current) => current.length > longest.length ? current : longest, '')
 
         const elements = contentsTemplate.elements.map(el => {
-          if (el.type === 'image' && el.imageType && imgPool.value.length) return getNewImgElement(el)
           if (el.type !== 'text' && el.type !== 'shape') return el
           if (checkTextType(el, 'item')) {
             const index = sortedItemIds.findIndex(id => id === el.id)
@@ -357,7 +311,6 @@ export default () => {
       else if (item.type === 'transition') {
         transitionIndex++
         const elements = transitionTemplate.elements.map(el => {
-          if (el.type === 'image' && el.imageType && imgPool.value.length) return getNewImgElement(el)
           if (el.type !== 'text' && el.type !== 'shape') return el
           if (checkTextType(el, 'title') && item.data.title) {
             return getNewTextElement({ el, text: item.data.title, maxLine: 1 })
@@ -409,7 +362,6 @@ export default () => {
         const longestText = itemTexts.reduce((longest, current) => current.length > longest.length ? current : longest, '')
 
         const elements = contentTemplate.elements.map(el => {
-          if (el.type === 'image' && el.imageType && imgPool.value.length) return getNewImgElement(el)
           if (el.type !== 'text' && el.type !== 'shape') return el
           if (item.data.items.length === 1) {
             const contentItem = item.data.items[0]
@@ -450,14 +402,9 @@ export default () => {
         })
       }
       else if (item.type === 'end') {
-        const elements = endTemplate.elements.map(el => {
-          if (el.type === 'image' && el.imageType && imgPool.value.length) return getNewImgElement(el)
-          return el
-        })
         slides.push({
           ...endTemplate,
           id: nanoid(10),
-          elements,
         })
       }
     }

src/plugins/icon.ts

@@ -36,6 +36,7 @@ import {
   AlignHorizontally,
   BringToFront,
   SendToBack,
+  Send,
   AlignTextLeft,
   AlignTextRight,
   AlignTextCenter,
@@ -166,6 +167,7 @@ export const icons: Icons = {
   IconAlignHorizontally: AlignHorizontally,
   IconBringToFront: BringToFront,
   IconSendToBack: SendToBack,
+  IconSend: Send,
   IconAlignTextLeft: AlignTextLeft,
   IconAlignTextRight: AlignTextRight,
   IconAlignTextCenter: AlignTextCenter,

src/services/index.ts

@@ -19,8 +19,4 @@ export default {
   AIPPT(content: string, language: string) {
     return axios.post(`${SERVER_URL}/tools/aippt`, { content, language })
   },
-
-  AISearchImage(text: string) {
-    return axios.post(`${SERVER_URL}/tools/ai_search_image`, { text })
-  },
 }

src/types/AIPPT.ts

@@ -39,10 +39,3 @@ export interface AIPPTEnd {
 }
 
 export type AIPPTSlide = AIPPTCover | AIPPTContents | AIPPTTransition | AIPPTContent | AIPPTEnd
-
-export interface PexelsImage {
-  id: string
-  src: string
-  width: number
-  height: number
-}

src/views/Editor/AIPPTDialog.vue

@@ -22,29 +22,9 @@
       >
         <template #suffix>
           <span class="count">{{ keyword.length }} / 50</span>
+          <div class="submit" type="primary" @click="createOutline()"><IconSend class="icon" /> AI 生成</div>
         </template>
       </Input>
-      <div class="configs">
-        <div class="items">
-          <Select 
-            class="item"
-            v-model:value="language"
-            :options="[
-              { label: '中文', value: 'zh' },
-              { label: '英文', value: 'en' },
-            ]"
-          />
-          <Select 
-            class="item"
-            v-model:value="imageMatching"
-            :options="[
-              { label: '无需配图', value: 'none' },
-              { label: 'AI搜图匹配', value: 'search' },
-            ]"
-          />
-        </div>
-        <Button class="submit" type="primary" @click="createOutline()">AI 生成</Button>
-      </div>
       <div class="recommends">
         <div class="recommend" v-for="(item, index) in recommends" :key="index" @click="keyword = item">{{ item }}</div>
       </div>
@@ -58,20 +38,18 @@
 import { ref, onMounted } from 'vue'
 import api from '@/services'
 import useAIPPT from '@/hooks/useAIPPT'
-import type { AIPPTSlide, PexelsImage } from '@/types/AIPPT'
+import type { AIPPTSlide } from '@/types/AIPPT'
 import type { Slide } from '@/types/slides'
 import message from '@/utils/message'
 import { useMainStore } from '@/store'
 import Input from '@/components/Input.vue'
 import Button from '@/components/Button.vue'
-import Select from '@/components/Select.vue'
 import FullscreenSpin from '@/components/FullscreenSpin.vue'
 
 const mainStore = useMainStore()
 const { getMdContent, AIPPT } = useAIPPT()
 
 const language = ref<'zh' | 'en'>('zh')
-const imageMatching = ref<'none' | 'search'>('none')
 const keyword = ref('')
 const outline = ref('')
 const loading = ref(false)
@@ -112,20 +90,9 @@ const createPPT = async () => {
     const obj = JSON.parse(ret.data[0].content)
     return obj.data
   })
-  let imgs: PexelsImage[] = []
-  if (imageMatching.value === 'search') {
-    imgs = await api.AISearchImage(keyword.value).then(ret => {
-      return ret.data.photos.map((item: any) => ({
-        id: item.id,
-        src: item.src.large,
-        width: item.width,
-        height: item.height,
-      }))
-    })
-  }
   const templateSlides: Slide[] = await api.getFileData('template_1').then(ret => ret.slides)
 
-  AIPPT(templateSlides, AISlides, imgs)
+  AIPPT(templateSlides, AISlides)
 
   loading.value = false
 
@@ -199,6 +166,26 @@ const createPPT = async () => {
 .count {
   font-size: 12px;
   color: #999;
+  margin-right: 5px;
+}
+.submit {
+  height: 20px;
+  font-size: 12px;
+  background-color: $themeColor;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  padding: 0 5px;
+  border-radius: $borderRadius;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $themeHoverColor;
+  }
+
+  .icon {
+    font-size: 15px;
     margin-right: 3px;
+  }
 }
 </style>