mirror of
https://github.com/pipipi-pikachu/PPTist.git
synced 2025-04-15 02:20:00 +08:00
revert: 移除AI配图实现
This commit is contained in:
pipipi-pikachu
parent
d89d1110f5
commit
a0deb19430
@ -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 { AIPPTSlide, PexelsImage } from '@/types/AIPPT'
|
||||
import type { PPTElement, PPTShapeElement, PPTTextElement, Slide, TextType } from '@/types/slides'
|
||||
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[]) => {
|
||||
imgPool.value = imgs
|
||||
|
||||
const AIPPT = (templateSlides: Slide[], _AISlides: AIPPTSlide[]) => {
|
||||
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,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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 })
|
||||
},
|
||||
}
|
||||
@ -38,11 +38,4 @@ export interface AIPPTEnd {
|
||||
type: 'end'
|
||||
}
|
||||
|
||||
export type AIPPTSlide = AIPPTCover | AIPPTContents | AIPPTTransition | AIPPTContent | AIPPTEnd
|
||||
|
||||
export interface PexelsImage {
|
||||
id: string
|
||||
src: string
|
||||
width: number
|
||||
height: number
|
||||
}
|
||||
export type AIPPTSlide = AIPPTCover | AIPPTContents | AIPPTTransition | AIPPTContent | AIPPTEnd
|
||||
@ -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: 3px;
|
||||
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>
|
||||
Loading…
x
Reference in New Issue
Block a user