init project
This commit is contained in:
王性驊
commit
beccc8e652
|
|
@ -0,0 +1,24 @@
|
|||
# Nuxt dev/build outputs
|
||||
.output
|
||||
.data
|
||||
.nuxt
|
||||
.nitro
|
||||
.cache
|
||||
dist
|
||||
|
||||
# Node dependencies
|
||||
node_modules
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Misc
|
||||
.DS_Store
|
||||
.fleet
|
||||
.idea
|
||||
|
||||
# Local env files
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
# Nuxt Minimal Starter
|
||||
|
||||
Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
||||
|
||||
## Setup
|
||||
|
||||
Make sure to install dependencies:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm install
|
||||
|
||||
# pnpm
|
||||
pnpm install
|
||||
|
||||
# yarn
|
||||
yarn install
|
||||
|
||||
# bun
|
||||
bun install
|
||||
```
|
||||
|
||||
## Development Server
|
||||
|
||||
Start the development server on `http://localhost:3000`:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run dev
|
||||
|
||||
# pnpm
|
||||
pnpm dev
|
||||
|
||||
# yarn
|
||||
yarn dev
|
||||
|
||||
# bun
|
||||
bun run dev
|
||||
```
|
||||
|
||||
## Production
|
||||
|
||||
Build the application for production:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run build
|
||||
|
||||
# pnpm
|
||||
pnpm build
|
||||
|
||||
# yarn
|
||||
yarn build
|
||||
|
||||
# bun
|
||||
bun run build
|
||||
```
|
||||
|
||||
Locally preview production build:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run preview
|
||||
|
||||
# pnpm
|
||||
pnpm preview
|
||||
|
||||
# yarn
|
||||
yarn preview
|
||||
|
||||
# bun
|
||||
bun run preview
|
||||
```
|
||||
|
||||
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
|
||||
<NuxtRouteAnnouncer />
|
||||
<NuxtPage />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@import './assets/css/main.css';
|
||||
|
||||
/* iOS 風格增強 */
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<button
|
||||
@click="handleBack"
|
||||
class="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
<span>返回</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const router = useRouter()
|
||||
|
||||
function handleBack() {
|
||||
if (window.history.length > 1) {
|
||||
router.back()
|
||||
} else {
|
||||
router.push('/')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<button
|
||||
:type="type"
|
||||
:disabled="disabled"
|
||||
:class="buttonClass"
|
||||
@click="$emit('click', $event)"
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
type?: 'button' | 'submit' | 'reset'
|
||||
variant?: 'primary' | 'secondary' | 'outline'
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
type: 'button',
|
||||
variant: 'primary',
|
||||
disabled: false
|
||||
})
|
||||
|
||||
defineEmits<{
|
||||
click: [event: MouseEvent]
|
||||
}>()
|
||||
|
||||
const buttonClass = computed(() => {
|
||||
const base = 'px-6 py-3 rounded-xl font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 active:scale-95'
|
||||
|
||||
const variants = {
|
||||
primary: 'bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-400 shadow-lg shadow-blue-500/30 disabled:bg-gray-300 disabled:shadow-none disabled:cursor-not-allowed',
|
||||
secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed',
|
||||
outline: 'border-2 border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-400 disabled:border-gray-200 disabled:text-gray-400 disabled:cursor-not-allowed'
|
||||
}
|
||||
|
||||
return `${base} ${variants[props.variant]}`
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<div :class="cardClass">
|
||||
<div v-if="$slots.header" class="px-6 py-4 border-b border-gray-200 text-gray-900">
|
||||
<slot name="header" />
|
||||
</div>
|
||||
<div class="px-6 py-4 text-gray-900">
|
||||
<slot />
|
||||
</div>
|
||||
<div v-if="$slots.footer" class="px-6 py-4 border-t border-gray-200 bg-gray-50/50 text-gray-900">
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
variant?: 'default' | 'elevated'
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
variant: 'default'
|
||||
})
|
||||
|
||||
const cardClass = computed(() => {
|
||||
const base = 'bg-white/80 backdrop-blur-xl rounded-2xl border border-white/20 overflow-hidden text-gray-900'
|
||||
const variants = {
|
||||
default: `${base} shadow-sm`,
|
||||
elevated: `${base} shadow-2xl shadow-black/5`
|
||||
}
|
||||
return variants[props.variant]
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<div class="flex flex-col">
|
||||
<label v-if="label" :for="inputId" class="mb-1 text-sm font-medium text-gray-700">
|
||||
{{ label }}
|
||||
</label>
|
||||
<input
|
||||
:id="inputId"
|
||||
:type="type"
|
||||
:value="modelValue"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:required="required"
|
||||
class="px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 disabled:bg-gray-50 disabled:cursor-not-allowed transition-all bg-white/90 backdrop-blur-sm text-gray-900 placeholder:text-gray-400"
|
||||
@input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
<span v-if="error" class="mt-1 text-sm text-red-600">{{ error }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
modelValue: string
|
||||
type?: string
|
||||
label?: string
|
||||
placeholder?: string
|
||||
disabled?: boolean
|
||||
required?: boolean
|
||||
error?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
type: 'text',
|
||||
disabled: false,
|
||||
required: false
|
||||
})
|
||||
|
||||
defineEmits<{
|
||||
'update:modelValue': [value: string]
|
||||
}>()
|
||||
|
||||
const inputId = computed(() => `input-${Math.random().toString(36).substr(2, 9)}`)
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<div class="flex flex-col">
|
||||
<label v-if="label" :for="textareaId" class="mb-1 text-sm font-medium text-gray-700">
|
||||
{{ label }}
|
||||
</label>
|
||||
<textarea
|
||||
:id="textareaId"
|
||||
:value="modelValue"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:required="required"
|
||||
:rows="rows"
|
||||
class="px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 disabled:bg-gray-50 disabled:cursor-not-allowed resize-y transition-all bg-white/90 backdrop-blur-sm text-gray-900 placeholder:text-gray-400"
|
||||
@input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
|
||||
/>
|
||||
<span v-if="error" class="mt-1 text-sm text-red-600">{{ error }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
modelValue: string
|
||||
label?: string
|
||||
placeholder?: string
|
||||
disabled?: boolean
|
||||
required?: boolean
|
||||
rows?: number
|
||||
error?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
disabled: false,
|
||||
required: false,
|
||||
rows: 4
|
||||
})
|
||||
|
||||
defineEmits<{
|
||||
'update:modelValue': [value: string]
|
||||
}>()
|
||||
|
||||
const textareaId = computed(() => `textarea-${Math.random().toString(36).substr(2, 9)}`)
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,242 @@
|
|||
<template>
|
||||
<div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm" @click.self="handleClose">
|
||||
<BaseCard variant="elevated" class="w-full max-w-2xl max-h-[90vh] overflow-y-auto m-4">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-xl font-semibold text-gray-900">編輯人物：{{ character?.name }}</h2>
|
||||
<button @click="handleClose" class="text-gray-500 hover:text-gray-700">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="character" class="space-y-6">
|
||||
<!-- 基本資訊 -->
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 mb-4">基本資訊</h3>
|
||||
<div class="space-y-4">
|
||||
<BaseInput
|
||||
v-model="editedCharacter.name"
|
||||
label="角色名稱"
|
||||
:required="true"
|
||||
/>
|
||||
<BaseTextarea
|
||||
v-model="editedCharacter.description"
|
||||
label="角色描述"
|
||||
:rows="3"
|
||||
/>
|
||||
<BaseInput
|
||||
v-model="editedCharacter.role"
|
||||
label="角色定位"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 外觀設定 -->
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 mb-4">外觀設定</h3>
|
||||
<div class="space-y-4">
|
||||
<BaseInput
|
||||
v-model="editedCharacter.clothing"
|
||||
label="服裝"
|
||||
placeholder="例如：T恤、牛仔褲"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label class="block mb-2 text-sm font-medium text-gray-700">配件</label>
|
||||
<div class="flex flex-wrap gap-2 mb-2">
|
||||
<span
|
||||
v-for="(accessory, index) in editedCharacter.accessories"
|
||||
:key="index"
|
||||
class="inline-flex items-center gap-1 px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm"
|
||||
>
|
||||
{{ accessory }}
|
||||
<button
|
||||
@click="removeAccessory(index)"
|
||||
class="text-blue-600 hover:text-blue-800"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<BaseInput
|
||||
v-model="newAccessory"
|
||||
placeholder="輸入配件名稱"
|
||||
class="flex-1"
|
||||
@keyup.enter="addAccessory"
|
||||
/>
|
||||
<BaseButton variant="outline" @click="addAccessory">新增</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 顏色設定 -->
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 mb-4">顏色設定</h3>
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label class="block mb-2 text-sm font-medium text-gray-700">髮色</label>
|
||||
<input
|
||||
v-model="editedCharacter.colors.hair"
|
||||
type="color"
|
||||
class="w-full h-10 rounded-lg border border-gray-200"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block mb-2 text-sm font-medium text-gray-700">膚色</label>
|
||||
<input
|
||||
v-model="editedCharacter.colors.skin"
|
||||
type="color"
|
||||
class="w-full h-10 rounded-lg border border-gray-200"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block mb-2 text-sm font-medium text-gray-700">服裝顏色</label>
|
||||
<input
|
||||
v-model="editedCharacter.colors.clothing"
|
||||
type="color"
|
||||
class="w-full h-10 rounded-lg border border-gray-200"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 三視圖預覽 -->
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 mb-4">三視圖</h3>
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<div class="text-center">
|
||||
<div class="aspect-square bg-white border-2 border-gray-200 rounded-lg flex items-center justify-center mb-2">
|
||||
<span v-if="!editedCharacter.frontView" class="text-gray-400 text-sm">正面</span>
|
||||
<img v-else :src="editedCharacter.frontView" alt="正面" class="w-full h-full object-contain rounded-lg" />
|
||||
</div>
|
||||
<BaseButton variant="outline" @click="generateView('front')" class="text-sm px-3 py-1 w-full">
|
||||
生成
|
||||
</BaseButton>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="aspect-square bg-white border-2 border-gray-200 rounded-lg flex items-center justify-center mb-2">
|
||||
<span v-if="!editedCharacter.sideView" class="text-gray-400 text-sm">側面</span>
|
||||
<img v-else :src="editedCharacter.sideView" alt="側面" class="w-full h-full object-contain rounded-lg" />
|
||||
</div>
|
||||
<BaseButton variant="outline" @click="generateView('side')" class="text-sm px-3 py-1 w-full">
|
||||
生成
|
||||
</BaseButton>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="aspect-square bg-white border-2 border-gray-200 rounded-lg flex items-center justify-center mb-2">
|
||||
<span v-if="!editedCharacter.backView" class="text-gray-400 text-sm">背面</span>
|
||||
<img v-else :src="editedCharacter.backView" alt="背面" class="w-full h-full object-contain rounded-lg" />
|
||||
</div>
|
||||
<BaseButton variant="outline" @click="generateView('back')" class="text-sm px-3 py-1 w-full">
|
||||
生成
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按鈕 -->
|
||||
<div class="flex justify-end gap-4 pt-4 border-t border-gray-200">
|
||||
<BaseButton variant="outline" @click="handleClose">取消</BaseButton>
|
||||
<BaseButton variant="primary" @click="handleSave">儲存</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</BaseCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { CharacterAsset } from '~/types/storyboard'
|
||||
import { useAIImageGeneration } from '~/composables/useAIImageGeneration'
|
||||
|
||||
interface Props {
|
||||
isOpen: boolean
|
||||
character: CharacterAsset | null
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
save: [character: CharacterAsset]
|
||||
}>()
|
||||
|
||||
const { generateCharacterView: generateCharacterViewImage, isLoading: isGenerating } = useAIImageGeneration()
|
||||
|
||||
const editedCharacter = ref<CharacterAsset | null>(null)
|
||||
const newAccessory = ref('')
|
||||
const generatingView = ref<'front' | 'side' | 'back' | null>(null)
|
||||
|
||||
watch(() => props.character, (newChar) => {
|
||||
if (newChar) {
|
||||
editedCharacter.value = {
|
||||
...newChar,
|
||||
accessories: [...(newChar.accessories || [])],
|
||||
colors: {
|
||||
hair: newChar.colors?.hair || '#000000',
|
||||
skin: newChar.colors?.skin || '#FFDBAC',
|
||||
clothing: newChar.colors?.clothing || '#000000'
|
||||
}
|
||||
}
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
function handleClose() {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
if (editedCharacter.value) {
|
||||
emit('save', editedCharacter.value)
|
||||
handleClose()
|
||||
}
|
||||
}
|
||||
|
||||
function addAccessory() {
|
||||
if (newAccessory.value.trim() && editedCharacter.value) {
|
||||
if (!editedCharacter.value.accessories) {
|
||||
editedCharacter.value.accessories = []
|
||||
}
|
||||
editedCharacter.value.accessories.push(newAccessory.value.trim())
|
||||
newAccessory.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
function removeAccessory(index: number) {
|
||||
if (editedCharacter.value?.accessories) {
|
||||
editedCharacter.value.accessories.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
async function generateView(view: 'front' | 'side' | 'back') {
|
||||
if (!editedCharacter.value) return
|
||||
|
||||
generatingView.value = view
|
||||
try {
|
||||
const style = '寫實風格' // 可以從 workflow 中取得
|
||||
const imageUrl = await generateCharacterViewImage(
|
||||
editedCharacter.value.name,
|
||||
editedCharacter.value.description,
|
||||
view,
|
||||
style
|
||||
)
|
||||
|
||||
if (view === 'front') {
|
||||
editedCharacter.value.frontView = imageUrl
|
||||
} else if (view === 'side') {
|
||||
editedCharacter.value.sideView = imageUrl
|
||||
} else if (view === 'back') {
|
||||
editedCharacter.value.backView = imageUrl
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('生成視圖失敗:', err)
|
||||
} finally {
|
||||
generatingView.value = null
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,214 @@
|
|||
<template>
|
||||
<div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm" @click.self="handleClose">
|
||||
<BaseCard variant="elevated" class="w-full max-w-2xl max-h-[90vh] overflow-y-auto m-4">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-xl font-semibold text-gray-900">編輯場景：{{ scene?.name }}</h2>
|
||||
<button @click="handleClose" class="text-gray-500 hover:text-gray-700">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="scene" class="space-y-6">
|
||||
<!-- 基本資訊 -->
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 mb-4">基本資訊</h3>
|
||||
<div class="space-y-4">
|
||||
<BaseInput
|
||||
v-model="editedScene.name"
|
||||
label="場景名稱"
|
||||
:required="true"
|
||||
/>
|
||||
<BaseTextarea
|
||||
v-model="editedScene.description"
|
||||
label="場景描述"
|
||||
:rows="3"
|
||||
/>
|
||||
<BaseInput
|
||||
v-model="editedScene.environment"
|
||||
label="環境設定"
|
||||
placeholder="例如：室內、室外、城市、森林"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 場景設定 -->
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 mb-4">場景設定</h3>
|
||||
<div class="space-y-4">
|
||||
<BaseInput
|
||||
v-model="editedScene.lighting"
|
||||
label="光線設定"
|
||||
placeholder="例如：自然光、人工光、昏暗"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label class="block mb-2 text-sm font-medium text-gray-700">道具</label>
|
||||
<div class="flex flex-wrap gap-2 mb-2">
|
||||
<span
|
||||
v-for="(prop, index) in editedScene.props"
|
||||
:key="index"
|
||||
class="inline-flex items-center gap-1 px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm"
|
||||
>
|
||||
{{ prop }}
|
||||
<button
|
||||
@click="removeProp(index)"
|
||||
class="text-green-600 hover:text-green-800"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<BaseInput
|
||||
v-model="newProp"
|
||||
placeholder="輸入道具名稱"
|
||||
class="flex-1"
|
||||
@keyup.enter="addProp"
|
||||
/>
|
||||
<BaseButton variant="outline" @click="addProp">新增</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 顏色設定 -->
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 mb-4">顏色設定</h3>
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label class="block mb-2 text-sm font-medium text-gray-700">主色</label>
|
||||
<input
|
||||
v-model="editedScene.colors.primary"
|
||||
type="color"
|
||||
class="w-full h-10 rounded-lg border border-gray-200"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block mb-2 text-sm font-medium text-gray-700">次色</label>
|
||||
<input
|
||||
v-model="editedScene.colors.secondary"
|
||||
type="color"
|
||||
class="w-full h-10 rounded-lg border border-gray-200"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block mb-2 text-sm font-medium text-gray-700">強調色</label>
|
||||
<input
|
||||
v-model="editedScene.colors.accent"
|
||||
type="color"
|
||||
class="w-full h-10 rounded-lg border border-gray-200"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 場景圖片預覽 -->
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 mb-4">場景圖片</h3>
|
||||
<div class="aspect-video bg-white border-2 border-gray-200 rounded-lg flex items-center justify-center mb-2">
|
||||
<span v-if="!editedScene.image" class="text-gray-400">場景圖片</span>
|
||||
<img v-else :src="editedScene.image" alt="場景" class="w-full h-full object-contain rounded-lg" />
|
||||
</div>
|
||||
<BaseButton
|
||||
variant="outline"
|
||||
@click="generateImage"
|
||||
:disabled="isGenerating"
|
||||
class="w-full"
|
||||
>
|
||||
{{ isGenerating ? '生成中...' : '生成場景圖片' }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
|
||||
<!-- 操作按鈕 -->
|
||||
<div class="flex justify-end gap-4 pt-4 border-t border-gray-200">
|
||||
<BaseButton variant="outline" @click="handleClose">取消</BaseButton>
|
||||
<BaseButton variant="primary" @click="handleSave">儲存</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</BaseCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { SceneAsset } from '~/types/storyboard'
|
||||
import { useAIImageGeneration } from '~/composables/useAIImageGeneration'
|
||||
|
||||
interface Props {
|
||||
isOpen: boolean
|
||||
scene: SceneAsset | null
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
save: [scene: SceneAsset]
|
||||
}>()
|
||||
|
||||
const { generateSceneImage: generateSceneImageUrl, isLoading: isGenerating } = useAIImageGeneration()
|
||||
|
||||
const editedScene = ref<SceneAsset | null>(null)
|
||||
const newProp = ref('')
|
||||
|
||||
watch(() => props.scene, (newScene) => {
|
||||
if (newScene) {
|
||||
editedScene.value = {
|
||||
...newScene,
|
||||
props: [...(newScene.props || [])],
|
||||
colors: {
|
||||
primary: newScene.colors?.primary || '#FFFFFF',
|
||||
secondary: newScene.colors?.secondary || '#CCCCCC',
|
||||
accent: newScene.colors?.accent || '#000000'
|
||||
}
|
||||
}
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
function handleClose() {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
if (editedScene.value) {
|
||||
emit('save', editedScene.value)
|
||||
handleClose()
|
||||
}
|
||||
}
|
||||
|
||||
function addProp() {
|
||||
if (newProp.value.trim() && editedScene.value) {
|
||||
if (!editedScene.value.props) {
|
||||
editedScene.value.props = []
|
||||
}
|
||||
editedScene.value.props.push(newProp.value.trim())
|
||||
newProp.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
function removeProp(index: number) {
|
||||
if (editedScene.value?.props) {
|
||||
editedScene.value.props.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
async function generateImage() {
|
||||
if (!editedScene.value) return
|
||||
|
||||
try {
|
||||
const style = '寫實風格' // 可以從 workflow 中取得
|
||||
const imageUrl = await generateSceneImageUrl(
|
||||
editedScene.value.name,
|
||||
editedScene.value.description,
|
||||
style
|
||||
)
|
||||
editedScene.value.image = imageUrl
|
||||
} catch (err) {
|
||||
console.error('生成場景圖片失敗:', err)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
/**
|
||||
* AI 圖像生成 Composable
|
||||
* 用於生成人物三視圖和場景圖片
|
||||
*/
|
||||
|
||||
import { useAIProvider } from './useAIProvider'
|
||||
import { getImageGenerationModel } from '~/utils/storage'
|
||||
import { DEFAULT_IMAGE_GENERATION_MODEL } from '~/utils/clients/gemini-models'
|
||||
import { getModelProvider } from '~/utils/clients/all-models'
|
||||
|
||||
export function useAIImageGeneration() {
|
||||
const isLoading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
/**
|
||||
* 生成圖像
|
||||
* 注意：目前 Gemini 和 Grok 的圖像生成 API 可能需要不同的實現
|
||||
* 這裡先提供一個基礎框架，實際 API 調用需要根據各 provider 的文檔調整
|
||||
*/
|
||||
async function generateImage(prompt: string): Promise<string> {
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
const modelName = getImageGenerationModel() || DEFAULT_IMAGE_GENERATION_MODEL
|
||||
const provider = useAIProvider(modelName)
|
||||
const providerType = getModelProvider(modelName)
|
||||
|
||||
// 根據不同的 provider 使用不同的圖像生成方式
|
||||
// 目前 Gemini 和 Grok 可能沒有直接的圖像生成 API
|
||||
// 這裡使用文字生成模型來生成圖像描述的 prompt，然後由前端處理
|
||||
// 實際應用中，可能需要整合專門的圖像生成服務（如 DALL-E, Midjourney 等）
|
||||
|
||||
// 暫時返回一個提示，說明需要整合圖像生成服務
|
||||
// 實際實作時，這裡應該調用圖像生成 API
|
||||
throw new Error('圖像生成功能需要整合專門的圖像生成服務。目前可以使用文字模型生成圖像描述，然後手動生成圖像。')
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : '未知錯誤'
|
||||
error.value = errorMessage
|
||||
throw err
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成人物三視圖
|
||||
*/
|
||||
async function generateCharacterView(
|
||||
characterName: string,
|
||||
characterDescription: string,
|
||||
view: 'front' | 'side' | 'back',
|
||||
style?: string
|
||||
): Promise<string> {
|
||||
const viewNames = {
|
||||
front: '正面',
|
||||
side: '側面',
|
||||
back: '背面'
|
||||
}
|
||||
|
||||
const prompt = `請生成一個${viewNames[view]}視圖的人物圖片，要求：
|
||||
- 角色名稱：${characterName}
|
||||
- 角色描述：${characterDescription}
|
||||
- 視圖角度：${viewNames[view]}
|
||||
- 背景：純白色
|
||||
- 風格：${style || '寫實風格'}
|
||||
- 圖片格式：PNG，透明背景或白色背景
|
||||
- 解析度：512x512 或更高
|
||||
|
||||
請確保圖片清晰，角色特徵明顯。`
|
||||
|
||||
// 目前返回提示文字，實際應該返回圖像 URL 或 base64
|
||||
// 這裡可以整合實際的圖像生成 API
|
||||
return await generateImage(prompt)
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成場景圖片
|
||||
*/
|
||||
async function generateSceneImage(
|
||||
sceneName: string,
|
||||
sceneDescription: string,
|
||||
style?: string
|
||||
): Promise<string> {
|
||||
const prompt = `請生成一個場景圖片，要求：
|
||||
- 場景名稱：${sceneName}
|
||||
- 場景描述：${sceneDescription}
|
||||
- 背景：純白色或透明
|
||||
- 風格：${style || '寫實風格'}
|
||||
- 圖片格式：PNG
|
||||
- 解析度：1024x1024 或更高
|
||||
|
||||
請確保場景清晰，細節豐富。`
|
||||
|
||||
return await generateImage(prompt)
|
||||
}
|
||||
|
||||
return {
|
||||
generateImage,
|
||||
generateCharacterView,
|
||||
generateSceneImage,
|
||||
isLoading: readonly(isLoading),
|
||||
error: readonly(error)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
/**
|
||||
* AI Provider Selector Composable
|
||||
* 根據模型名稱自動選擇對應的 provider
|
||||
*/
|
||||
|
||||
import type { AIProvider } from '~/types/ai'
|
||||
import { GeminiClient } from '~/utils/clients/gemini'
|
||||
import { GrokClient } from '~/utils/clients/grok'
|
||||
import { getProviderForModel } from '~/utils/clients/all-models'
|
||||
|
||||
/**
|
||||
* 取得指定模型對應的 AI Provider 實例
|
||||
* @param modelName - 模型名稱，如果不提供則使用預設（Gemini）
|
||||
*/
|
||||
export function useAIProvider(modelName?: string): AIProvider {
|
||||
if (modelName) {
|
||||
const provider = getProviderForModel(modelName)
|
||||
return provider === 'grok' ? new GrokClient() : new GeminiClient()
|
||||
}
|
||||
|
||||
// 預設使用 Gemini
|
||||
return new GeminiClient()
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
/**
|
||||
* AI 分鏡表 Composable
|
||||
* 統一處理錯誤，UI 只呼叫此 composable
|
||||
*/
|
||||
|
||||
import { useAIProvider } from './useAIProvider'
|
||||
import { buildStoryboardPrompt, type StoryboardInput } from '~/utils/ai/prompts'
|
||||
import { getTextModel } from '~/utils/storage'
|
||||
import { DEFAULT_TEXT_MODEL as DEFAULT_MODEL } from '~/utils/clients/gemini-models'
|
||||
|
||||
export function useAIStoryboard() {
|
||||
const isLoading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
async function generate(input: StoryboardInput): Promise<string> {
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
// 根據選擇的模型自動選擇對應的 provider
|
||||
const modelName = getTextModel() || DEFAULT_MODEL
|
||||
const provider = useAIProvider(modelName)
|
||||
|
||||
const prompt = buildStoryboardPrompt(input)
|
||||
const result = await provider.generateStoryboard(prompt)
|
||||
return result
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : '未知錯誤'
|
||||
error.value = errorMessage
|
||||
throw err
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
generate,
|
||||
isLoading: readonly(isLoading),
|
||||
error: readonly(error)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
/**
|
||||
* AI 故事分析 Composable
|
||||
* 用於分析故事並提取資產
|
||||
*/
|
||||
|
||||
import { useAIProvider } from './useAIProvider'
|
||||
import { buildStoryAnalysisPrompt, type StoryAnalysisInput } from '~/utils/ai/prompts'
|
||||
import { getTextModel } from '~/utils/storage'
|
||||
import { DEFAULT_TEXT_MODEL } from '~/utils/clients/gemini-models'
|
||||
import { getVisionModel } from '~/utils/storage'
|
||||
import { DEFAULT_VISION_MODEL } from '~/utils/clients/gemini-models'
|
||||
import type { StoryAnalysis } from '~/types/storyboard'
|
||||
|
||||
export function useAIStoryboardAnalysis() {
|
||||
const isLoading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
async function analyze(input: StoryAnalysisInput): Promise<StoryAnalysis> {
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
// 如果有圖片，使用視覺模型；否則使用文字模型
|
||||
const modelName = input.styleImage
|
||||
? (getVisionModel() || DEFAULT_VISION_MODEL)
|
||||
: (getTextModel() || DEFAULT_TEXT_MODEL)
|
||||
const provider = useAIProvider(modelName)
|
||||
|
||||
let prompt = buildStoryAnalysisPrompt(input)
|
||||
|
||||
// 如果有風格圖片，需要傳遞圖片給 API
|
||||
if (input.styleImage) {
|
||||
// 這裡需要根據 provider 類型處理圖片
|
||||
// 暫時先傳遞文字 prompt，實際實作時需要處理圖片
|
||||
const result = await provider.analyzeCamera({
|
||||
prompt,
|
||||
image: {
|
||||
mimeType: 'image/jpeg',
|
||||
data: input.styleImage.replace(/^data:image\/\w+;base64,/, '')
|
||||
}
|
||||
})
|
||||
|
||||
// 解析 JSON 結果
|
||||
const jsonMatch = result.match(/\{[\s\S]*\}/)
|
||||
if (jsonMatch) {
|
||||
return JSON.parse(jsonMatch[0]) as StoryAnalysis
|
||||
}
|
||||
throw new Error('無法解析分析結果')
|
||||
} else {
|
||||
const result = await provider.generateStoryboard(prompt)
|
||||
|
||||
// 解析 JSON 結果
|
||||
const jsonMatch = result.match(/\{[\s\S]*\}/)
|
||||
if (jsonMatch) {
|
||||
return JSON.parse(jsonMatch[0]) as StoryAnalysis
|
||||
}
|
||||
throw new Error('無法解析分析結果')
|
||||
}
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : '未知錯誤'
|
||||
error.value = errorMessage
|
||||
throw err
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
analyze,
|
||||
isLoading: readonly(isLoading),
|
||||
error: readonly(error)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,580 @@
|
|||
<template>
|
||||
<div class="max-w-7xl mx-auto px-8 py-8">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<BaseBackButton />
|
||||
<div class="flex-1 flex justify-between items-center">
|
||||
<h1 class="text-3xl font-bold text-gray-900">AI 分鏡表</h1>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="text-sm text-gray-700">
|
||||
使用模型：<span class="font-medium text-gray-900">{{ currentModelDisplay }}</span>
|
||||
</div>
|
||||
<BaseButton variant="outline" @click="navigateTo('/app/settings')">
|
||||
設定
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 步驟指示器 -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center justify-between">
|
||||
<div
|
||||
v-for="(step, index) in steps"
|
||||
:key="step.id"
|
||||
class="flex items-center flex-1"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
:class="[
|
||||
'w-10 h-10 rounded-full flex items-center justify-center font-semibold transition-all',
|
||||
currentStepIndex >= index
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'bg-gray-200 text-gray-600'
|
||||
]"
|
||||
>
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<span
|
||||
:class="[
|
||||
'ml-2 text-sm font-medium',
|
||||
currentStepIndex >= index ? 'text-gray-900' : 'text-gray-500'
|
||||
]"
|
||||
>
|
||||
{{ step.name }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="index < steps.length - 1"
|
||||
:class="[
|
||||
'flex-1 h-0.5 mx-4',
|
||||
currentStepIndex > index ? 'bg-blue-500' : 'bg-gray-200'
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 步驟 1: 輸入故事 -->
|
||||
<BaseCard v-if="currentStep === 'input'" variant="elevated" class="mb-6">
|
||||
<template #header>
|
||||
<h2 class="text-xl font-semibold text-gray-900">輸入故事</h2>
|
||||
</template>
|
||||
|
||||
<div class="flex flex-col gap-6">
|
||||
<BaseTextarea
|
||||
v-model="workflow.story"
|
||||
label="故事內容"
|
||||
placeholder="請輸入完整的故事內容..."
|
||||
:rows="10"
|
||||
:required="true"
|
||||
/>
|
||||
|
||||
<div class="flex justify-end gap-4">
|
||||
<BaseButton variant="primary" @click="handleNextStep" :disabled="!workflow.story.trim()">
|
||||
下一步：選擇風格
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</BaseCard>
|
||||
|
||||
<!-- 步驟 2: 選擇風格 -->
|
||||
<BaseCard v-if="currentStep === 'style'" variant="elevated" class="mb-6">
|
||||
<template #header>
|
||||
<h2 class="text-xl font-semibold text-gray-900">選擇風格</h2>
|
||||
</template>
|
||||
|
||||
<div class="flex flex-col gap-6">
|
||||
<!-- 預設風格選擇 -->
|
||||
<div>
|
||||
<label class="block mb-3 font-semibold text-gray-900">預設風格</label>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div
|
||||
v-for="preset in stylePresets"
|
||||
:key="preset.id"
|
||||
:class="[
|
||||
'p-4 border-2 rounded-xl cursor-pointer transition-all hover:shadow-lg',
|
||||
workflow.style.preset === preset.id
|
||||
? 'border-blue-500 bg-blue-50'
|
||||
: 'border-gray-200 hover:border-gray-300'
|
||||
]"
|
||||
@click="selectStylePreset(preset.id)"
|
||||
>
|
||||
<div class="font-semibold text-gray-900 mb-1">{{ preset.name }}</div>
|
||||
<div class="text-sm text-gray-600">{{ preset.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 或上傳圖片分析風格 -->
|
||||
<div>
|
||||
<label class="block mb-3 font-semibold text-gray-900">或上傳圖片分析風格</label>
|
||||
<div class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center">
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
@change="handleStyleImageUpload"
|
||||
class="hidden"
|
||||
ref="styleImageInput"
|
||||
/>
|
||||
<div v-if="!workflow.style.customImage" class="space-y-4">
|
||||
<svg class="w-12 h-12 mx-auto text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<p class="text-gray-600">點擊上傳或拖放圖片</p>
|
||||
<BaseButton variant="outline" @click="() => styleImageInput?.click()">
|
||||
選擇圖片
|
||||
</BaseButton>
|
||||
</div>
|
||||
<div v-else class="space-y-4">
|
||||
<img :src="workflow.style.customImage" alt="風格圖片" class="max-h-48 mx-auto rounded-lg" />
|
||||
<BaseButton variant="outline" @click="workflow.style.customImage = ''">
|
||||
重新選擇
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 節奏選擇 -->
|
||||
<div>
|
||||
<label class="block mb-3 font-semibold text-gray-900">節奏</label>
|
||||
<select
|
||||
v-model="workflow.pace"
|
||||
class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition-all bg-white/90 backdrop-blur-sm text-gray-900"
|
||||
>
|
||||
<option value="">請選擇節奏</option>
|
||||
<option v-for="pace in paceOptions" :key="pace.id" :value="pace.id">
|
||||
{{ pace.name }} - {{ pace.description }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between gap-4">
|
||||
<BaseButton variant="outline" @click="handlePrevStep">
|
||||
上一步
|
||||
</BaseButton>
|
||||
<BaseButton variant="primary" @click="handleAnalyzeStory" :disabled="isAnalyzing">
|
||||
{{ isAnalyzing ? '分析中...' : '分析故事' }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</BaseCard>
|
||||
|
||||
<!-- 步驟 3: 資產管理 -->
|
||||
<div v-if="currentStep === 'assets'" class="space-y-6">
|
||||
<!-- 人物資產 -->
|
||||
<BaseCard variant="elevated">
|
||||
<template #header>
|
||||
<h2 class="text-xl font-semibold text-gray-900">人物資產</h2>
|
||||
</template>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div
|
||||
v-for="character in workflow.characters"
|
||||
:key="character.id"
|
||||
class="p-4 border border-gray-200 rounded-xl"
|
||||
>
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900">{{ character.name }}</h3>
|
||||
<p class="text-sm text-gray-600">{{ character.description }}</p>
|
||||
<span class="inline-block mt-2 px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded">
|
||||
{{ character.role }}
|
||||
</span>
|
||||
</div>
|
||||
<BaseButton variant="outline" @click="editCharacter(character.id)" class="text-sm px-3 py-1">
|
||||
編輯
|
||||
</BaseButton>
|
||||
</div>
|
||||
|
||||
<!-- 三視圖預覽 -->
|
||||
<div class="grid grid-cols-3 gap-4 mt-4">
|
||||
<div class="text-center">
|
||||
<div class="aspect-square bg-white border-2 border-gray-200 rounded-lg flex items-center justify-center mb-2">
|
||||
<span v-if="!character.frontView" class="text-gray-400 text-sm">正面</span>
|
||||
<img v-else :src="character.frontView" alt="正面" class="w-full h-full object-contain rounded-lg" />
|
||||
</div>
|
||||
<BaseButton variant="outline" @click="generateCharacterView(character.id, 'front')" class="text-sm px-3 py-1">
|
||||
生成
|
||||
</BaseButton>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="aspect-square bg-white border-2 border-gray-200 rounded-lg flex items-center justify-center mb-2">
|
||||
<span v-if="!character.sideView" class="text-gray-400 text-sm">側面</span>
|
||||
<img v-else :src="character.sideView" alt="側面" class="w-full h-full object-contain rounded-lg" />
|
||||
</div>
|
||||
<BaseButton variant="outline" size="sm" @click="generateCharacterView(character.id, 'side')">
|
||||
生成
|
||||
</BaseButton>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="aspect-square bg-white border-2 border-gray-200 rounded-lg flex items-center justify-center mb-2">
|
||||
<span v-if="!character.backView" class="text-gray-400 text-sm">背面</span>
|
||||
<img v-else :src="character.backView" alt="背面" class="w-full h-full object-contain rounded-lg" />
|
||||
</div>
|
||||
<BaseButton variant="outline" size="sm" @click="generateCharacterView(character.id, 'back')">
|
||||
生成
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BaseCard>
|
||||
|
||||
<!-- 場景資產 -->
|
||||
<BaseCard variant="elevated">
|
||||
<template #header>
|
||||
<h2 class="text-xl font-semibold text-gray-900">場景資產</h2>
|
||||
</template>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div
|
||||
v-for="scene in workflow.scenes"
|
||||
:key="scene.id"
|
||||
class="p-4 border border-gray-200 rounded-xl"
|
||||
>
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900">{{ scene.name }}</h3>
|
||||
<p class="text-sm text-gray-600">{{ scene.description }}</p>
|
||||
<span class="inline-block mt-2 px-2 py-1 text-xs bg-green-100 text-green-800 rounded">
|
||||
{{ scene.environment }}
|
||||
</span>
|
||||
</div>
|
||||
<BaseButton variant="outline" @click="editScene(scene.id)" class="text-sm px-3 py-1">
|
||||
編輯
|
||||
</BaseButton>
|
||||
</div>
|
||||
|
||||
<!-- 場景預覽 -->
|
||||
<div class="mt-4">
|
||||
<div class="aspect-video bg-white border-2 border-gray-200 rounded-lg flex items-center justify-center mb-2">
|
||||
<span v-if="!scene.image" class="text-gray-400">場景圖片</span>
|
||||
<img v-else :src="scene.image" alt="場景" class="w-full h-full object-contain rounded-lg" />
|
||||
</div>
|
||||
<BaseButton variant="outline" @click="generateSceneImage(scene.id)" class="text-sm px-3 py-1">
|
||||
生成場景圖片
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BaseCard>
|
||||
|
||||
<div class="flex justify-between gap-4">
|
||||
<BaseButton variant="outline" @click="handlePrevStep">
|
||||
上一步
|
||||
</BaseButton>
|
||||
<BaseButton variant="primary" @click="handleGenerateStoryboard" :disabled="isGenerating">
|
||||
{{ isGenerating ? '生成中...' : '生成分鏡表' }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 步驟 4: 分鏡表結果 -->
|
||||
<BaseCard v-if="currentStep === 'result'" variant="elevated">
|
||||
<template #header>
|
||||
<h2 class="text-xl font-semibold text-gray-900">分鏡表結果</h2>
|
||||
</template>
|
||||
|
||||
<div v-if="error" class="p-4 bg-red-50/80 backdrop-blur-sm border border-red-200 rounded-xl text-red-800 shadow-sm">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<div v-else-if="workflow.result" class="space-y-4">
|
||||
<div class="p-4 bg-blue-50 rounded-xl">
|
||||
<h3 class="font-semibold text-gray-900 mb-2">{{ workflow.result.title }}</h3>
|
||||
<div class="text-sm text-gray-700">
|
||||
<p><strong>風格：</strong>{{ workflow.result.style }}</p>
|
||||
<p><strong>節奏：</strong>{{ workflow.result.pace }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div
|
||||
v-for="shot in workflow.result.shots"
|
||||
:key="shot.shotNumber"
|
||||
class="p-4 border border-gray-200 rounded-xl"
|
||||
>
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<h4 class="font-semibold text-gray-900">鏡頭 {{ shot.shotNumber }}</h4>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<p class="text-gray-600"><strong>場景：</strong>{{ shot.scene }}</p>
|
||||
<p v-if="shot.dialogue" class="text-gray-600"><strong>對話：</strong>{{ shot.dialogue }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-600"><strong>鏡頭：</strong>{{ shot.camera.shot }}</p>
|
||||
<p class="text-gray-600"><strong>運鏡：</strong>{{ shot.camera.movement }}</p>
|
||||
<p class="text-gray-600"><strong>構圖：</strong>{{ shot.camera.composition }}</p>
|
||||
<p class="text-gray-600"><strong>光線：</strong>{{ shot.camera.lighting }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="text-gray-700 text-center py-16">
|
||||
請完成前面的步驟以生成分鏡表
|
||||
</div>
|
||||
</BaseCard>
|
||||
|
||||
<!-- 人物編輯對話框 -->
|
||||
<CharacterEditor
|
||||
:is-open="isCharacterEditorOpen"
|
||||
:character="editingCharacter"
|
||||
@close="isCharacterEditorOpen = false"
|
||||
@save="handleCharacterSave"
|
||||
/>
|
||||
|
||||
<!-- 場景編輯對話框 -->
|
||||
<SceneEditor
|
||||
:is-open="isSceneEditorOpen"
|
||||
:scene="editingScene"
|
||||
@close="isSceneEditorOpen = false"
|
||||
@save="handleSceneSave"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useAIStoryboard } from '~/composables/useAIStoryboard'
|
||||
import { useAIStoryboardAnalysis } from '~/composables/useAIStoryboardAnalysis'
|
||||
import { useAIImageGeneration } from '~/composables/useAIImageGeneration'
|
||||
import CharacterEditor from '~/components/feature/CharacterEditor.vue'
|
||||
import SceneEditor from '~/components/feature/SceneEditor.vue'
|
||||
import { getTextModel } from '~/utils/storage'
|
||||
import { DEFAULT_TEXT_MODEL } from '~/utils/clients/gemini-models'
|
||||
import { getModelInfo } from '~/utils/clients/all-models'
|
||||
import { STYLE_PRESETS } from '~/utils/storyboard/styles'
|
||||
import { PACE_OPTIONS } from '~/utils/storyboard/pace'
|
||||
import type { StoryboardWorkflow, StoryboardStep, CharacterAsset, SceneAsset } from '~/types/storyboard'
|
||||
|
||||
const { generate, isLoading, error } = useAIStoryboard()
|
||||
const { analyze: analyzeStory, isLoading: isAnalyzing, error: analysisError } = useAIStoryboardAnalysis()
|
||||
|
||||
// 工作流程狀態
|
||||
const currentStep = ref<StoryboardStep>('input')
|
||||
const workflow = ref<StoryboardWorkflow>({
|
||||
step: 'input',
|
||||
story: '',
|
||||
style: {},
|
||||
characters: [],
|
||||
scenes: []
|
||||
})
|
||||
|
||||
const steps = [
|
||||
{ id: 'input', name: '輸入故事' },
|
||||
{ id: 'style', name: '選擇風格' },
|
||||
{ id: 'assets', name: '資產管理' },
|
||||
{ id: 'result', name: '分鏡表結果' }
|
||||
]
|
||||
|
||||
const currentStepIndex = computed(() => steps.findIndex(s => s.id === currentStep.value))
|
||||
|
||||
const stylePresets = STYLE_PRESETS
|
||||
const paceOptions = PACE_OPTIONS
|
||||
const styleImageInput = ref<HTMLInputElement>()
|
||||
|
||||
// 顯示目前使用的模型
|
||||
const currentModel = computed(() => getTextModel() || DEFAULT_TEXT_MODEL)
|
||||
const currentModelInfo = computed(() => getModelInfo(currentModel.value))
|
||||
const currentModelDisplay = computed(() => currentModelInfo.value?.displayName || currentModel.value)
|
||||
|
||||
function handleNextStep() {
|
||||
const currentIndex = steps.findIndex(s => s.id === currentStep.value)
|
||||
if (currentIndex >= 0 && currentIndex < steps.length - 1) {
|
||||
const nextStep = steps[currentIndex + 1]
|
||||
if (nextStep) {
|
||||
currentStep.value = nextStep.id as StoryboardStep
|
||||
workflow.value.step = currentStep.value
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handlePrevStep() {
|
||||
const currentIndex = steps.findIndex(s => s.id === currentStep.value)
|
||||
if (currentIndex > 0) {
|
||||
const prevStep = steps[currentIndex - 1]
|
||||
if (prevStep) {
|
||||
currentStep.value = prevStep.id as StoryboardStep
|
||||
workflow.value.step = currentStep.value
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function selectStylePreset(presetId: string) {
|
||||
workflow.value.style.preset = presetId
|
||||
workflow.value.style.customImage = ''
|
||||
}
|
||||
|
||||
function handleStyleImageUpload(event: Event) {
|
||||
const file = (event.target as HTMLInputElement).files?.[0]
|
||||
if (file) {
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
workflow.value.style.customImage = e.target?.result as string
|
||||
workflow.value.style.preset = undefined
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAnalyzeStory() {
|
||||
if (!workflow.value.story.trim()) return
|
||||
|
||||
try {
|
||||
const styleText = workflow.value.style.preset
|
||||
? stylePresets.find(s => s.id === workflow.value.style.preset)?.name
|
||||
: undefined
|
||||
|
||||
const analysis = await analyzeStory({
|
||||
story: workflow.value.story,
|
||||
style: styleText,
|
||||
styleImage: workflow.value.style.customImage
|
||||
})
|
||||
|
||||
workflow.value.analysis = analysis
|
||||
workflow.value.characters = analysis.characters
|
||||
workflow.value.scenes = analysis.scenes
|
||||
|
||||
if (analysis.suggestedStyle && !workflow.value.style.preset) {
|
||||
workflow.value.style.analyzedStyle = analysis.suggestedStyle
|
||||
}
|
||||
|
||||
if (analysis.suggestedPace && !workflow.value.pace) {
|
||||
workflow.value.pace = analysis.suggestedPace
|
||||
}
|
||||
|
||||
handleNextStep()
|
||||
} catch (err) {
|
||||
// 錯誤已由 composable 統一處理
|
||||
}
|
||||
}
|
||||
|
||||
// 編輯對話框狀態
|
||||
const editingCharacter = ref<CharacterAsset | null>(null)
|
||||
const editingScene = ref<SceneAsset | null>(null)
|
||||
const isCharacterEditorOpen = ref(false)
|
||||
const isSceneEditorOpen = ref(false)
|
||||
|
||||
// 圖像生成
|
||||
const { generateCharacterView: generateCharacterViewImage, generateSceneImage: generateSceneImageUrl, isLoading: isGeneratingImage } = useAIImageGeneration()
|
||||
|
||||
function editCharacter(characterId: string) {
|
||||
const character = workflow.value.characters.find(c => c.id === characterId)
|
||||
if (character) {
|
||||
editingCharacter.value = character
|
||||
isCharacterEditorOpen.value = true
|
||||
}
|
||||
}
|
||||
|
||||
function handleCharacterSave(updatedCharacter: CharacterAsset) {
|
||||
const index = workflow.value.characters.findIndex(c => c.id === updatedCharacter.id)
|
||||
if (index >= 0) {
|
||||
workflow.value.characters[index] = updatedCharacter
|
||||
}
|
||||
}
|
||||
|
||||
async function generateCharacterView(characterId: string, view: 'front' | 'side' | 'back') {
|
||||
const character = workflow.value.characters.find(c => c.id === characterId)
|
||||
if (!character) return
|
||||
|
||||
try {
|
||||
const style = workflow.value.style.preset
|
||||
? stylePresets.find(s => s.id === workflow.value.style.preset)?.name
|
||||
: workflow.value.style.analyzedStyle || '寫實風格'
|
||||
|
||||
const imageUrl = await generateCharacterViewImage(
|
||||
character.name,
|
||||
character.description,
|
||||
view,
|
||||
style
|
||||
)
|
||||
|
||||
if (view === 'front') {
|
||||
character.frontView = imageUrl
|
||||
} else if (view === 'side') {
|
||||
character.sideView = imageUrl
|
||||
} else if (view === 'back') {
|
||||
character.backView = imageUrl
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('生成人物視圖失敗:', err)
|
||||
}
|
||||
}
|
||||
|
||||
function editScene(sceneId: string) {
|
||||
const scene = workflow.value.scenes.find(s => s.id === sceneId)
|
||||
if (scene) {
|
||||
editingScene.value = scene
|
||||
isSceneEditorOpen.value = true
|
||||
}
|
||||
}
|
||||
|
||||
function handleSceneSave(updatedScene: SceneAsset) {
|
||||
const index = workflow.value.scenes.findIndex(s => s.id === updatedScene.id)
|
||||
if (index >= 0) {
|
||||
workflow.value.scenes[index] = updatedScene
|
||||
}
|
||||
}
|
||||
|
||||
async function generateSceneImage(sceneId: string) {
|
||||
const scene = workflow.value.scenes.find(s => s.id === sceneId)
|
||||
if (!scene) return
|
||||
|
||||
try {
|
||||
const style = workflow.value.style.preset
|
||||
? stylePresets.find(s => s.id === workflow.value.style.preset)?.name
|
||||
: workflow.value.style.analyzedStyle || '寫實風格'
|
||||
|
||||
const imageUrl = await generateSceneImageUrl(
|
||||
scene.name,
|
||||
scene.description,
|
||||
style
|
||||
)
|
||||
|
||||
scene.image = imageUrl
|
||||
} catch (err) {
|
||||
console.error('生成場景圖片失敗:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const isGenerating = ref(false)
|
||||
|
||||
async function handleGenerateStoryboard() {
|
||||
if (!workflow.value.story.trim()) return
|
||||
|
||||
isGenerating.value = true
|
||||
try {
|
||||
const styleText = workflow.value.style.preset
|
||||
? stylePresets.find(s => s.id === workflow.value.style.preset)?.name
|
||||
: (workflow.value.style.analyzedStyle || workflow.value.style.customImage
|
||||
? '根據上傳圖片分析'
|
||||
: undefined)
|
||||
|
||||
const paceText = workflow.value.pace
|
||||
? paceOptions.find(p => p.id === workflow.value.pace)?.name || undefined
|
||||
: undefined
|
||||
|
||||
const resultText = await generate({
|
||||
story: workflow.value.story,
|
||||
style: styleText,
|
||||
pace: paceText,
|
||||
styleImage: workflow.value.style.customImage
|
||||
})
|
||||
|
||||
// 解析 JSON 結果
|
||||
const jsonMatch = resultText.match(/\{[\s\S]*\}/)
|
||||
if (jsonMatch) {
|
||||
workflow.value.result = JSON.parse(jsonMatch[0])
|
||||
handleNextStep()
|
||||
} else {
|
||||
throw new Error('無法解析分鏡表結果')
|
||||
}
|
||||
} catch (err) {
|
||||
// 錯誤已由 composable 統一處理
|
||||
} finally {
|
||||
isGenerating.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<div class="max-w-7xl mx-auto px-8 py-8">
|
||||
<div class="flex justify-between items-center mb-8">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold mb-2 text-gray-900">儀表板</h1>
|
||||
<div class="text-sm text-gray-700 flex flex-wrap items-center gap-2">
|
||||
<span>文字：<span class="font-medium text-gray-900">{{ currentTextModelDisplay }}</span></span>
|
||||
<span class="text-gray-500">|</span>
|
||||
<span>視覺：<span class="font-medium text-gray-900">{{ currentVisionModelDisplay }}</span></span>
|
||||
<span class="text-gray-500">|</span>
|
||||
<span>圖像生成：<span class="font-medium text-gray-900">{{ currentImageGenerationModelDisplay }}</span></span>
|
||||
<span class="text-gray-500">|</span>
|
||||
<span>語音：<span class="font-medium text-gray-900">{{ currentTTSModelDisplay }}</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<BaseButton variant="outline" @click="() => router.push('/app/settings')">
|
||||
設定
|
||||
</BaseButton>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div
|
||||
class="cursor-pointer"
|
||||
@click="goToStoryboard"
|
||||
>
|
||||
<BaseCard
|
||||
variant="elevated"
|
||||
class="hover:shadow-2xl transition-all hover:-translate-y-1 active:scale-95 h-full"
|
||||
>
|
||||
<h3 class="text-lg font-semibold mb-2 text-gray-900">AI 分鏡表</h3>
|
||||
<p class="text-gray-700 text-sm">
|
||||
輸入故事內容，AI 自動生成專業分鏡表
|
||||
</p>
|
||||
</BaseCard>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="cursor-pointer"
|
||||
@click="goToCamera"
|
||||
>
|
||||
<BaseCard
|
||||
variant="elevated"
|
||||
class="hover:shadow-2xl transition-all hover:-translate-y-1 active:scale-95 h-full"
|
||||
>
|
||||
<h3 class="text-lg font-semibold mb-2 text-gray-900">AI 攝影機</h3>
|
||||
<p class="text-gray-700 text-sm">
|
||||
上傳圖片，AI 分析鏡位與運鏡建議
|
||||
</p>
|
||||
</BaseCard>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="cursor-pointer"
|
||||
@click="goToSoraDirector"
|
||||
>
|
||||
<BaseCard
|
||||
variant="elevated"
|
||||
class="hover:shadow-2xl transition-all hover:-translate-y-1 active:scale-95 h-full"
|
||||
>
|
||||
<h3 class="text-lg font-semibold mb-2 text-gray-900">Sora 導演</h3>
|
||||
<p class="text-gray-700 text-sm">
|
||||
一句話 prompt，AI 生成影片規劃
|
||||
</p>
|
||||
</BaseCard>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="cursor-pointer"
|
||||
@click="goToCutAgent"
|
||||
>
|
||||
<BaseCard
|
||||
variant="elevated"
|
||||
class="hover:shadow-2xl transition-all hover:-translate-y-1 active:scale-95 h-full"
|
||||
>
|
||||
<h3 class="text-lg font-semibold mb-2 text-gray-900">Cut Agent</h3>
|
||||
<p class="text-gray-700 text-sm">
|
||||
素材與劇情，AI 提供剪輯建議
|
||||
</p>
|
||||
</BaseCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getTextModel, getVisionModel, getImageGenerationModel, getTTSModel } from '~/utils/storage'
|
||||
import { DEFAULT_TEXT_MODEL, DEFAULT_VISION_MODEL, DEFAULT_IMAGE_GENERATION_MODEL, DEFAULT_TTS_MODEL } from '~/utils/clients/gemini-models'
|
||||
import { getModelInfo } from '~/utils/clients/all-models'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 顯示目前使用的模型
|
||||
const currentTextModel = computed(() => getTextModel() || DEFAULT_TEXT_MODEL)
|
||||
const currentVisionModel = computed(() => getVisionModel() || DEFAULT_VISION_MODEL)
|
||||
const currentImageGenerationModel = computed(() => getImageGenerationModel() || DEFAULT_IMAGE_GENERATION_MODEL)
|
||||
const currentTTSModel = computed(() => getTTSModel() || DEFAULT_TTS_MODEL)
|
||||
|
||||
const currentTextModelInfo = computed(() => getModelInfo(currentTextModel.value))
|
||||
const currentVisionModelInfo = computed(() => getModelInfo(currentVisionModel.value))
|
||||
const currentImageGenerationModelInfo = computed(() => getModelInfo(currentImageGenerationModel.value))
|
||||
const currentTTSModelInfo = computed(() => getModelInfo(currentTTSModel.value))
|
||||
|
||||
const currentTextModelDisplay = computed(() => currentTextModelInfo.value?.displayName || currentTextModel.value)
|
||||
const currentVisionModelDisplay = computed(() => currentVisionModelInfo.value?.displayName || currentVisionModel.value)
|
||||
const currentImageGenerationModelDisplay = computed(() => currentImageGenerationModelInfo.value?.displayName || currentImageGenerationModel.value)
|
||||
const currentTTSModelDisplay = computed(() => currentTTSModelInfo.value?.displayName || currentTTSModel.value)
|
||||
|
||||
function goToStoryboard() {
|
||||
router.push('/app/ai-storyboard')
|
||||
}
|
||||
|
||||
function goToCamera() {
|
||||
router.push('/app/ai-camera')
|
||||
}
|
||||
|
||||
function goToSoraDirector() {
|
||||
router.push('/app/sora-director')
|
||||
}
|
||||
|
||||
function goToCutAgent() {
|
||||
router.push('/app/cut-agent')
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,299 @@
|
|||
<template>
|
||||
<div class="max-w-4xl mx-auto px-8 py-8">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<BaseBackButton />
|
||||
<h1 class="text-3xl font-bold text-gray-900">設定</h1>
|
||||
</div>
|
||||
|
||||
<BaseCard variant="elevated" class="mb-6">
|
||||
<template #header>
|
||||
<h2 class="text-xl font-semibold text-gray-900">API Key 設定</h2>
|
||||
</template>
|
||||
|
||||
<div class="flex flex-col gap-6">
|
||||
<!-- Gemini Token -->
|
||||
<BaseInput
|
||||
v-model="geminiToken"
|
||||
label="Gemini API Key"
|
||||
type="password"
|
||||
placeholder="請輸入 Gemini API Key"
|
||||
/>
|
||||
|
||||
<!-- Grok Token -->
|
||||
<BaseInput
|
||||
v-model="grokToken"
|
||||
label="Grok API Key (選填)"
|
||||
type="password"
|
||||
placeholder="請輸入 Grok API Key"
|
||||
/>
|
||||
|
||||
<p class="text-sm text-gray-700 -mt-2">
|
||||
提示：系統會根據您選擇的模型自動使用對應的 API Key
|
||||
</p>
|
||||
</div>
|
||||
</BaseCard>
|
||||
|
||||
<!-- 模型選擇 -->
|
||||
<BaseCard variant="elevated" class="mb-6">
|
||||
<template #header>
|
||||
<h2 class="text-xl font-semibold text-gray-900">模型選擇</h2>
|
||||
</template>
|
||||
|
||||
<div class="flex flex-col gap-8">
|
||||
<!-- 文字模型選擇 -->
|
||||
<div>
|
||||
<label class="block mb-3 font-semibold text-gray-800">文字生成模型</label>
|
||||
|
||||
<!-- Gemini 模型 -->
|
||||
<div class="mb-4">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="w-2 h-2 rounded-full bg-blue-500"></div>
|
||||
<span class="text-sm font-medium text-gray-700">Gemini</span>
|
||||
</div>
|
||||
<select
|
||||
v-model="textModel"
|
||||
class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition-all bg-white/90 backdrop-blur-sm text-gray-900"
|
||||
>
|
||||
<optgroup label="Gemini 模型">
|
||||
<option v-for="model in geminiTextModels" :key="model.name" :value="model.name">
|
||||
{{ model.displayName }}
|
||||
</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Grok 模型 -->
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="w-2 h-2 rounded-full bg-purple-500"></div>
|
||||
<span class="text-sm font-medium text-gray-700">Grok</span>
|
||||
</div>
|
||||
<select
|
||||
v-model="textModel"
|
||||
class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-purple-400 transition-all bg-white/90 backdrop-blur-sm text-gray-900"
|
||||
>
|
||||
<optgroup label="Grok 模型">
|
||||
<option v-for="model in grokTextModels" :key="model.name" :value="model.name">
|
||||
{{ model.displayName }}
|
||||
</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<p v-if="currentTextModelInfo" class="mt-3 text-sm text-gray-700">
|
||||
{{ currentTextModelInfo.description }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 視覺模型選擇 -->
|
||||
<div>
|
||||
<label class="block mb-3 font-semibold text-gray-800">視覺分析模型</label>
|
||||
|
||||
<!-- Gemini 模型 -->
|
||||
<div class="mb-4">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="w-2 h-2 rounded-full bg-blue-500"></div>
|
||||
<span class="text-sm font-medium text-gray-700">Gemini</span>
|
||||
</div>
|
||||
<select
|
||||
v-model="visionModel"
|
||||
class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition-all bg-white/90 backdrop-blur-sm text-gray-900"
|
||||
>
|
||||
<optgroup label="Gemini 模型">
|
||||
<option v-for="model in geminiVisionModels" :key="model.name" :value="model.name">
|
||||
{{ model.displayName }}
|
||||
</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Grok 模型 -->
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="w-2 h-2 rounded-full bg-purple-500"></div>
|
||||
<span class="text-sm font-medium text-gray-700">Grok</span>
|
||||
</div>
|
||||
<select
|
||||
v-model="visionModel"
|
||||
class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-purple-400 transition-all bg-white/90 backdrop-blur-sm text-gray-900"
|
||||
>
|
||||
<optgroup label="Grok 模型">
|
||||
<option v-for="model in grokVisionModels" :key="model.name" :value="model.name">
|
||||
{{ model.displayName }}
|
||||
</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<p v-if="currentVisionModelInfo" class="mt-3 text-sm text-gray-700">
|
||||
{{ currentVisionModelInfo.description }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 圖像生成模型選擇 -->
|
||||
<div>
|
||||
<label class="block mb-3 font-semibold text-gray-800">圖像生成模型</label>
|
||||
|
||||
<!-- Gemini 模型 -->
|
||||
<div class="mb-4">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="w-2 h-2 rounded-full bg-blue-500"></div>
|
||||
<span class="text-sm font-medium text-gray-700">Gemini</span>
|
||||
</div>
|
||||
<select
|
||||
v-model="imageGenerationModel"
|
||||
class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition-all bg-white/90 backdrop-blur-sm text-gray-900"
|
||||
>
|
||||
<optgroup label="Gemini 模型">
|
||||
<option v-for="model in geminiImageGenerationModels" :key="model.name" :value="model.name">
|
||||
{{ model.displayName }}
|
||||
</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Grok 模型 -->
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="w-2 h-2 rounded-full bg-purple-500"></div>
|
||||
<span class="text-sm font-medium text-gray-700">Grok</span>
|
||||
</div>
|
||||
<select
|
||||
v-model="imageGenerationModel"
|
||||
class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-purple-400 transition-all bg-white/90 backdrop-blur-sm text-gray-900"
|
||||
>
|
||||
<optgroup label="Grok 模型">
|
||||
<option v-for="model in grokImageGenerationModels" :key="model.name" :value="model.name">
|
||||
{{ model.displayName }}
|
||||
</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<p v-if="currentImageGenerationModelInfo" class="mt-3 text-sm text-gray-700">
|
||||
{{ currentImageGenerationModelInfo.description }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- TTS 模型選擇 -->
|
||||
<div>
|
||||
<label class="block mb-3 font-semibold text-gray-800">語音生成模型 (TTS)</label>
|
||||
|
||||
<!-- Gemini 模型 -->
|
||||
<div class="mb-4">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="w-2 h-2 rounded-full bg-blue-500"></div>
|
||||
<span class="text-sm font-medium text-gray-700">Gemini</span>
|
||||
</div>
|
||||
<select
|
||||
v-model="ttsModel"
|
||||
class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition-all bg-white/90 backdrop-blur-sm text-gray-900"
|
||||
>
|
||||
<optgroup label="Gemini 模型">
|
||||
<option v-for="model in geminiTTSModels" :key="model.name" :value="model.name">
|
||||
{{ model.displayName }}
|
||||
</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Grok 模型 -->
|
||||
<div v-if="grokTTSModels.length > 0">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="w-2 h-2 rounded-full bg-purple-500"></div>
|
||||
<span class="text-sm font-medium text-gray-700">Grok</span>
|
||||
</div>
|
||||
<select
|
||||
v-model="ttsModel"
|
||||
class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-purple-400 transition-all bg-white/90 backdrop-blur-sm text-gray-900"
|
||||
>
|
||||
<optgroup label="Grok 模型">
|
||||
<option v-for="model in grokTTSModels" :key="model.name" :value="model.name">
|
||||
{{ model.displayName }}
|
||||
</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<p v-if="currentTTSModelInfo" class="mt-3 text-sm text-gray-700">
|
||||
{{ currentTTSModelInfo.description }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 儲存按鈕 -->
|
||||
<div class="flex justify-end gap-4 pt-4">
|
||||
<BaseButton variant="outline" @click="handleCancel">取消</BaseButton>
|
||||
<BaseButton variant="primary" @click="handleSave">儲存</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</BaseCard>
|
||||
|
||||
<!-- 成功訊息 -->
|
||||
<div
|
||||
v-if="showSuccess"
|
||||
class="mt-4 p-4 bg-green-100/80 backdrop-blur-sm border border-green-300 rounded-xl text-green-800 shadow-lg"
|
||||
>
|
||||
設定已儲存
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getGeminiToken, setGeminiToken, getGrokToken, setGrokToken, getTextModel, setTextModel, getVisionModel, setVisionModel, getImageGenerationModel, setImageGenerationModel, getTTSModel, setTTSModel } from '~/utils/storage'
|
||||
import { DEFAULT_TEXT_MODEL, DEFAULT_VISION_MODEL, DEFAULT_IMAGE_GENERATION_MODEL, DEFAULT_TTS_MODEL } from '~/utils/clients/gemini-models'
|
||||
import { getModelsByCapability, getModelInfo, getModelsByProvider } from '~/utils/clients/all-models'
|
||||
|
||||
const geminiToken = ref(getGeminiToken() || '')
|
||||
const grokToken = ref(getGrokToken() || '')
|
||||
const textModel = ref(getTextModel() || DEFAULT_TEXT_MODEL)
|
||||
const visionModel = ref(getVisionModel() || DEFAULT_VISION_MODEL)
|
||||
const imageGenerationModel = ref(getImageGenerationModel() || DEFAULT_IMAGE_GENERATION_MODEL)
|
||||
const ttsModel = ref(getTTSModel() || DEFAULT_TTS_MODEL)
|
||||
const showSuccess = ref(false)
|
||||
|
||||
// 按 Provider 分組的模型
|
||||
const allTextModels = computed(() => getModelsByCapability('text'))
|
||||
const allVisionModels = computed(() => getModelsByCapability('vision'))
|
||||
const allImageGenerationModels = computed(() => getModelsByCapability('imageGeneration'))
|
||||
const allTTSModels = computed(() => getModelsByCapability('tts'))
|
||||
|
||||
const geminiTextModels = computed(() => allTextModels.value.filter(m => m.provider === 'gemini'))
|
||||
const grokTextModels = computed(() => allTextModels.value.filter(m => m.provider === 'grok'))
|
||||
|
||||
const geminiVisionModels = computed(() => allVisionModels.value.filter(m => m.provider === 'gemini'))
|
||||
const grokVisionModels = computed(() => allVisionModels.value.filter(m => m.provider === 'grok'))
|
||||
|
||||
const geminiImageGenerationModels = computed(() => allImageGenerationModels.value.filter(m => m.provider === 'gemini'))
|
||||
const grokImageGenerationModels = computed(() => allImageGenerationModels.value.filter(m => m.provider === 'grok'))
|
||||
|
||||
const geminiTTSModels = computed(() => allTTSModels.value.filter(m => m.provider === 'gemini'))
|
||||
const grokTTSModels = computed(() => allTTSModels.value.filter(m => m.provider === 'grok'))
|
||||
|
||||
function handleSave() {
|
||||
setGeminiToken(geminiToken.value)
|
||||
setGrokToken(grokToken.value)
|
||||
setTextModel(textModel.value)
|
||||
setVisionModel(visionModel.value)
|
||||
setImageGenerationModel(imageGenerationModel.value)
|
||||
setTTSModel(ttsModel.value)
|
||||
|
||||
showSuccess.value = true
|
||||
setTimeout(() => {
|
||||
showSuccess.value = false
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
geminiToken.value = getGeminiToken() || ''
|
||||
grokToken.value = getGrokToken() || ''
|
||||
textModel.value = getTextModel() || DEFAULT_TEXT_MODEL
|
||||
visionModel.value = getVisionModel() || DEFAULT_VISION_MODEL
|
||||
imageGenerationModel.value = getImageGenerationModel() || DEFAULT_IMAGE_GENERATION_MODEL
|
||||
ttsModel.value = getTTSModel() || DEFAULT_TTS_MODEL
|
||||
}
|
||||
|
||||
const currentTextModelInfo = computed(() => getModelInfo(textModel.value))
|
||||
const currentVisionModelInfo = computed(() => getModelInfo(visionModel.value))
|
||||
const currentImageGenerationModelInfo = computed(() => getModelInfo(imageGenerationModel.value))
|
||||
const currentTTSModelInfo = computed(() => getModelInfo(ttsModel.value))
|
||||
</script>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<template>
|
||||
<div class="max-w-7xl mx-auto px-8 py-16">
|
||||
<div class="text-center mb-16">
|
||||
<h1 class="text-5xl font-bold mb-4 text-gray-900">Cut AI</h1>
|
||||
<p class="text-xl text-gray-700 mb-8">
|
||||
一站式 AI 影像製作工具
|
||||
</p>
|
||||
<BaseButton variant="primary" @click="navigateToDashboard">
|
||||
開始使用
|
||||
</BaseButton>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<BaseCard variant="elevated" class="hover:shadow-2xl transition-all hover:-translate-y-1 active:scale-95">
|
||||
<h3 class="text-xl font-semibold mb-4 text-gray-900">AI 分鏡表</h3>
|
||||
<p class="text-gray-700 mb-4">
|
||||
輸入故事內容，AI 自動生成專業分鏡表
|
||||
</p>
|
||||
<BaseButton variant="outline" @click="() => navigateTo('/app/ai-storyboard')">
|
||||
前往
|
||||
</BaseButton>
|
||||
</BaseCard>
|
||||
|
||||
<BaseCard variant="elevated" class="hover:shadow-2xl transition-all hover:-translate-y-1 active:scale-95">
|
||||
<h3 class="text-xl font-semibold mb-4 text-gray-900">AI 攝影機</h3>
|
||||
<p class="text-gray-700 mb-4">
|
||||
上傳圖片，AI 分析鏡位與運鏡建議
|
||||
</p>
|
||||
<BaseButton variant="outline" @click="() => navigateTo('/app/ai-camera')">
|
||||
前往
|
||||
</BaseButton>
|
||||
</BaseCard>
|
||||
|
||||
<BaseCard variant="elevated" class="hover:shadow-2xl transition-all hover:-translate-y-1 active:scale-95">
|
||||
<h3 class="text-xl font-semibold mb-4 text-gray-900">Sora 導演</h3>
|
||||
<p class="text-gray-700 mb-4">
|
||||
一句話 prompt，AI 生成影片規劃
|
||||
</p>
|
||||
<BaseButton variant="outline" @click="() => navigateTo('/app/sora-director')">
|
||||
前往
|
||||
</BaseButton>
|
||||
</BaseCard>
|
||||
|
||||
<BaseCard variant="elevated" class="hover:shadow-2xl transition-all hover:-translate-y-1 active:scale-95">
|
||||
<h3 class="text-xl font-semibold mb-4 text-gray-900">Cut Agent</h3>
|
||||
<p class="text-gray-700 mb-4">
|
||||
素材與劇情，AI 提供剪輯建議
|
||||
</p>
|
||||
<BaseButton variant="outline" @click="() => navigateTo('/app/cut-agent')">
|
||||
前往
|
||||
</BaseButton>
|
||||
</BaseCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
function navigateToDashboard() {
|
||||
return navigateTo('/app/dashboard')
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
/**
|
||||
* AI Provider Interface
|
||||
* 定義所有 AI Provider 必須實作的方法
|
||||
*/
|
||||
export interface AIProvider {
|
||||
/**
|
||||
* 生成分鏡表
|
||||
* @param input - 輸入參數（故事、風格、節奏等）
|
||||
* @returns 分鏡表文字結果
|
||||
*/
|
||||
generateStoryboard(input: unknown): Promise<string>
|
||||
|
||||
/**
|
||||
* 分析攝影機鏡位與運鏡
|
||||
* @param input - 輸入參數（圖片或描述）
|
||||
* @returns 鏡位分析結果
|
||||
*/
|
||||
analyzeCamera(input: unknown): Promise<string>
|
||||
|
||||
/**
|
||||
* 生成影片規劃
|
||||
* @param input - 輸入參數（prompt 或描述）
|
||||
* @returns 影片規劃文字結果
|
||||
*/
|
||||
generateVideoPlan(input: unknown): Promise<string>
|
||||
|
||||
/**
|
||||
* 生成剪輯建議
|
||||
* @param input - 輸入參數（素材、劇情等）
|
||||
* @returns 剪輯建議文字結果
|
||||
*/
|
||||
generateEditSuggestion(input: unknown): Promise<string>
|
||||
}
|
||||
|
||||
/**
|
||||
* AI Provider 類型
|
||||
*/
|
||||
export type AIProviderType = 'gemini' | 'grok'
|
||||
|
||||
/**
|
||||
* AI Provider 設定
|
||||
*/
|
||||
export interface AIProviderConfig {
|
||||
type: AIProviderType
|
||||
token: string
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
/**
|
||||
* 鏡頭語言系統類型定義
|
||||
*
|
||||
* 此結構為 AI 知識層，前端不硬編、不限制
|
||||
* 僅結構化呈現 AI 的選擇結果
|
||||
*
|
||||
* 設計為可擴充：透過 Record<string, unknown> 允許動態欄位
|
||||
*/
|
||||
|
||||
/**
|
||||
* 基礎鏡頭語言結構
|
||||
* 包含核心欄位與可擴充的額外欄位
|
||||
*/
|
||||
export interface CameraLanguage {
|
||||
/**
|
||||
* 鏡頭與景別（Shot Size & Lens）
|
||||
* 例如：Extreme Long Shot (XLS), Long Shot (LS), Medium Shot (MS),
|
||||
* Close-Up (CU), Extreme Close-Up (ECU), Over-the-Shoulder (OTS), POV
|
||||
*/
|
||||
shot: string
|
||||
|
||||
/**
|
||||
* 運鏡（Camera Movement）
|
||||
* 例如：Pan, Tilt, Dolly In/Out, Truck, Crane, Handheld, Dolly Zoom
|
||||
*/
|
||||
movement: string
|
||||
|
||||
/**
|
||||
* 構圖（Composition）
|
||||
* 例如：Rule of Thirds, Leading Lines, Depth of Field, Dutch Angle,
|
||||
* Headroom, 180-degree Rule
|
||||
*/
|
||||
composition: string
|
||||
|
||||
/**
|
||||
* 光線（Lighting）
|
||||
* 例如：Three-Point Lighting, High Key, Low Key, Hard Light, Soft Light
|
||||
*/
|
||||
lighting: string
|
||||
|
||||
/**
|
||||
* 描述（Description）
|
||||
* 鏡頭的詳細描述或說明
|
||||
*/
|
||||
description: string
|
||||
|
||||
/**
|
||||
* 可擴充欄位
|
||||
* 允許 AI 或使用者動態添加額外的鏡頭語言資訊
|
||||
* 例如：lens, focalLength, aperture, iso, colorGrading 等
|
||||
*/
|
||||
[key: string]: unknown
|
||||
}
|
||||
|
||||
/**
|
||||
* 分鏡表單一鏡頭結構
|
||||
*/
|
||||
export interface StoryboardShot {
|
||||
/**
|
||||
* 鏡頭編號
|
||||
*/
|
||||
shotNumber: number
|
||||
|
||||
/**
|
||||
* 鏡頭語言
|
||||
*/
|
||||
camera: CameraLanguage
|
||||
|
||||
/**
|
||||
* 場景描述
|
||||
*/
|
||||
scene: string
|
||||
|
||||
/**
|
||||
* 對話或旁白
|
||||
*/
|
||||
dialogue?: string
|
||||
|
||||
/**
|
||||
* 時長（秒）
|
||||
*/
|
||||
duration?: number
|
||||
|
||||
/**
|
||||
* 可擴充欄位
|
||||
*/
|
||||
[key: string]: unknown
|
||||
}
|
||||
|
||||
/**
|
||||
* 完整分鏡表結構
|
||||
*/
|
||||
export interface Storyboard {
|
||||
/**
|
||||
* 標題
|
||||
*/
|
||||
title: string
|
||||
|
||||
/**
|
||||
* 風格描述
|
||||
*/
|
||||
style?: string
|
||||
|
||||
/**
|
||||
* 節奏描述
|
||||
*/
|
||||
pace?: string
|
||||
|
||||
/**
|
||||
* 鏡頭列表
|
||||
*/
|
||||
shots: StoryboardShot[]
|
||||
|
||||
/**
|
||||
* 可擴充欄位
|
||||
*/
|
||||
[key: string]: unknown
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
/**
|
||||
* 分鏡表相關類型定義
|
||||
*/
|
||||
|
||||
import type { Storyboard, StoryboardShot } from './camera'
|
||||
|
||||
/**
|
||||
* 預設風格選項
|
||||
*/
|
||||
export interface StylePreset {
|
||||
id: string
|
||||
name: string
|
||||
description: string
|
||||
imageUrl?: string
|
||||
keywords: string[]
|
||||
}
|
||||
|
||||
/**
|
||||
* 節奏選項
|
||||
*/
|
||||
export interface PaceOption {
|
||||
id: string
|
||||
name: string
|
||||
description: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 工作流程步驟
|
||||
*/
|
||||
export type StoryboardStep = 'input' | 'style' | 'assets' | 'characters' | 'scenes' | 'result'
|
||||
|
||||
/**
|
||||
* 故事分析結果
|
||||
*/
|
||||
export interface StoryAnalysis {
|
||||
title: string
|
||||
summary: string
|
||||
characters: CharacterAsset[]
|
||||
scenes: SceneAsset[]
|
||||
suggestedStyle?: string
|
||||
suggestedPace?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 人物資產
|
||||
*/
|
||||
export interface CharacterAsset {
|
||||
id: string
|
||||
name: string
|
||||
description: string
|
||||
role: string
|
||||
// 三視圖（白色背景）
|
||||
frontView?: string // base64 或 URL
|
||||
sideView?: string
|
||||
backView?: string
|
||||
// 可編輯屬性
|
||||
clothing?: string
|
||||
accessories?: string[]
|
||||
colors?: {
|
||||
hair?: string
|
||||
skin?: string
|
||||
clothing?: string
|
||||
}
|
||||
// 可擴充欄位
|
||||
[key: string]: unknown
|
||||
}
|
||||
|
||||
/**
|
||||
* 場景資產
|
||||
*/
|
||||
export interface SceneAsset {
|
||||
id: string
|
||||
name: string
|
||||
description: string
|
||||
environment: string
|
||||
// 場景圖片（白色背景）
|
||||
image?: string // base64 或 URL
|
||||
// 可編輯屬性
|
||||
lighting?: string
|
||||
props?: string[]
|
||||
colors?: {
|
||||
primary?: string
|
||||
secondary?: string
|
||||
accent?: string
|
||||
}
|
||||
// 可擴充欄位
|
||||
[key: string]: unknown
|
||||
}
|
||||
|
||||
/**
|
||||
* 分鏡表工作流程狀態
|
||||
*/
|
||||
export interface StoryboardWorkflow {
|
||||
step: StoryboardStep
|
||||
story: string
|
||||
style: {
|
||||
preset?: string
|
||||
customImage?: string
|
||||
analyzedStyle?: string
|
||||
}
|
||||
pace?: string
|
||||
analysis?: StoryAnalysis
|
||||
characters: CharacterAsset[]
|
||||
scenes: SceneAsset[]
|
||||
result?: Storyboard
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,232 @@
|
|||
/**
|
||||
* AI Prompt 組裝工具
|
||||
* 所有 Prompt 組裝邏輯只存在於此
|
||||
*/
|
||||
|
||||
export interface StoryboardInput {
|
||||
story: string
|
||||
style?: string
|
||||
pace?: string
|
||||
styleImage?: string // base64 圖片用於風格分析
|
||||
}
|
||||
|
||||
export interface StoryAnalysisInput {
|
||||
story: string
|
||||
style?: string
|
||||
styleImage?: string
|
||||
}
|
||||
|
||||
export interface AssetGenerationInput {
|
||||
story: string
|
||||
analysis: string
|
||||
characterName?: string
|
||||
sceneName?: string
|
||||
}
|
||||
|
||||
export interface CameraAnalysisInput {
|
||||
image?: string
|
||||
description?: string
|
||||
}
|
||||
|
||||
export interface VideoPlanInput {
|
||||
prompt: string
|
||||
}
|
||||
|
||||
export interface EditSuggestionInput {
|
||||
materials: string
|
||||
storyline: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 分析故事 Prompt
|
||||
*/
|
||||
export function buildStoryAnalysisPrompt(input: StoryAnalysisInput): string {
|
||||
const { story, style, styleImage } = input
|
||||
|
||||
let prompt = `請分析以下故事，提取關鍵資訊。請以 JSON 格式回傳，結構如下：
|
||||
{
|
||||
"title": "故事標題",
|
||||
"summary": "故事摘要",
|
||||
"characters": [
|
||||
{
|
||||
"id": "character_1",
|
||||
"name": "角色名稱",
|
||||
"description": "角色描述",
|
||||
"role": "角色定位（主角、配角等）"
|
||||
}
|
||||
],
|
||||
"scenes": [
|
||||
{
|
||||
"id": "scene_1",
|
||||
"name": "場景名稱",
|
||||
"description": "場景描述",
|
||||
"environment": "環境設定"
|
||||
}
|
||||
],
|
||||
"suggestedStyle": "建議的視覺風格",
|
||||
"suggestedPace": "建議的節奏"
|
||||
}
|
||||
|
||||
故事內容：
|
||||
${story}`
|
||||
|
||||
if (style) {
|
||||
prompt += `\n\n風格要求：${style}`
|
||||
}
|
||||
|
||||
if (styleImage) {
|
||||
prompt += `\n\n已提供風格參考圖片，請分析圖片中的視覺風格特徵並應用。`
|
||||
}
|
||||
|
||||
prompt += `\n\n請確保回傳的是有效的 JSON 格式，可以直接被解析。`
|
||||
|
||||
return prompt
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成人物三視圖 Prompt
|
||||
*/
|
||||
export function buildCharacterViewPrompt(input: AssetGenerationInput): string {
|
||||
return `請為角色「${input.characterName || '角色'}」生成白色背景的三視圖（正面、側面、背面）。
|
||||
角色描述：${input.analysis}
|
||||
|
||||
請以 JSON 格式回傳，包含三視圖的描述或生成指令：
|
||||
{
|
||||
"characterName": "角色名稱",
|
||||
"frontView": "正面視圖描述",
|
||||
"sideView": "側面視圖描述",
|
||||
"backView": "背面視圖描述",
|
||||
"description": "角色詳細描述"
|
||||
}
|
||||
|
||||
請確保回傳的是有效的 JSON 格式。`
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成場景 Prompt
|
||||
*/
|
||||
export function buildScenePrompt(input: AssetGenerationInput): string {
|
||||
return `請為場景「${input.sceneName || '場景'}」生成白色背景的場景圖。
|
||||
場景描述：${input.analysis}
|
||||
|
||||
請以 JSON 格式回傳：
|
||||
{
|
||||
"sceneName": "場景名稱",
|
||||
"description": "場景詳細描述",
|
||||
"environment": "環境設定",
|
||||
"lighting": "光線建議",
|
||||
"props": ["道具1", "道具2"],
|
||||
"imageDescription": "場景圖片描述"
|
||||
}
|
||||
|
||||
請確保回傳的是有效的 JSON 格式。`
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成分鏡表 Prompt
|
||||
*/
|
||||
export function buildStoryboardPrompt(input: StoryboardInput): string {
|
||||
const { story, style, pace, styleImage } = input
|
||||
|
||||
let prompt = `請為以下故事生成分鏡表。請以 JSON 格式回傳，結構如下：
|
||||
{
|
||||
"title": "標題",
|
||||
"style": "風格描述",
|
||||
"pace": "節奏描述",
|
||||
"shots": [
|
||||
{
|
||||
"shotNumber": 1,
|
||||
"camera": {
|
||||
"shot": "鏡頭類型（如：Extreme Long Shot, Long Shot, Medium Shot, Close-Up 等）",
|
||||
"movement": "運鏡方式（如：Pan, Tilt, Dolly In/Out, Truck, Crane, Handheld 等）",
|
||||
"composition": "構圖方式（如：Rule of Thirds, Leading Lines, Depth of Field 等）",
|
||||
"lighting": "光線設定（如：Three-Point Lighting, High Key, Low Key 等）",
|
||||
"description": "鏡頭詳細描述"
|
||||
},
|
||||
"scene": "場景描述",
|
||||
"dialogue": "對話或旁白（選填）",
|
||||
"duration": 時長秒數（選填）
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
故事內容：
|
||||
${story}`
|
||||
|
||||
if (style) {
|
||||
prompt += `\n\n風格要求：${style}`
|
||||
}
|
||||
|
||||
if (pace) {
|
||||
prompt += `\n\n節奏要求：${pace}`
|
||||
}
|
||||
|
||||
if (styleImage) {
|
||||
prompt += `\n\n已提供風格參考圖片，請參考圖片中的視覺風格。`
|
||||
}
|
||||
|
||||
prompt += `\n\n請確保回傳的是有效的 JSON 格式，可以直接被解析。`
|
||||
|
||||
return prompt
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成攝影機分析 Prompt
|
||||
*/
|
||||
export function buildCameraAnalysisPrompt(input: CameraAnalysisInput): string {
|
||||
let prompt = `請分析以下影像的攝影機鏡位與運鏡建議。請以 JSON 格式回傳，結構如下：
|
||||
{
|
||||
"camera": {
|
||||
"shot": "建議的鏡頭類型",
|
||||
"movement": "建議的運鏡方式",
|
||||
"composition": "構圖分析",
|
||||
"lighting": "光線分析",
|
||||
"description": "詳細分析與建議"
|
||||
}
|
||||
}`
|
||||
|
||||
if (input.image) {
|
||||
prompt += `\n\n圖片已上傳（base64 或 URL）`
|
||||
}
|
||||
|
||||
if (input.description) {
|
||||
prompt += `\n\n影像描述：${input.description}`
|
||||
}
|
||||
|
||||
prompt += `\n\n請確保回傳的是有效的 JSON 格式，可以直接被解析。`
|
||||
|
||||
return prompt
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成影片規劃 Prompt
|
||||
*/
|
||||
export function buildVideoPlanPrompt(input: VideoPlanInput): string {
|
||||
return `請為以下 prompt 生成詳細的影片規劃。請以結構化的文字格式回傳，包含：
|
||||
- 影片主題與概念
|
||||
- 分鏡建議
|
||||
- 視覺風格
|
||||
- 節奏與剪輯建議
|
||||
|
||||
Prompt：${input.prompt}
|
||||
|
||||
請提供詳細且實用的規劃建議。`
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成剪輯建議 Prompt
|
||||
*/
|
||||
export function buildEditSuggestionPrompt(input: EditSuggestionInput): string {
|
||||
return `請根據以下素材和劇情，提供剪輯建議。請以結構化的文字格式回傳，包含：
|
||||
- 剪輯順序建議
|
||||
- 轉場方式
|
||||
- 節奏控制
|
||||
- 重點鏡頭選擇
|
||||
|
||||
素材描述：${input.materials}
|
||||
|
||||
劇情：${input.storyline}
|
||||
|
||||
請提供詳細且實用的剪輯建議。`
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
/**
|
||||
* 統一的模型列表
|
||||
* 包含 Gemini 和 Grok 所有可用模型
|
||||
*/
|
||||
|
||||
import { GEMINI_MODELS, type GeminiModel } from './gemini-models'
|
||||
import { GROK_MODELS, type GrokModel } from './grok-models'
|
||||
|
||||
export interface UnifiedModel {
|
||||
name: string
|
||||
displayName: string
|
||||
description: string
|
||||
provider: 'gemini' | 'grok'
|
||||
capabilities: {
|
||||
text: boolean
|
||||
vision: boolean
|
||||
audio: boolean
|
||||
video: boolean
|
||||
imageGeneration: boolean
|
||||
tts: boolean
|
||||
}
|
||||
category: 'text' | 'vision' | 'multimodal' | 'image-generation' | 'video-generation' | 'audio' | 'tts' | 'robotics'
|
||||
}
|
||||
|
||||
/**
|
||||
* 將 Gemini 模型轉換為統一格式
|
||||
*/
|
||||
function convertGeminiModel(model: GeminiModel): UnifiedModel {
|
||||
return {
|
||||
name: model.name,
|
||||
displayName: model.displayName,
|
||||
description: model.description,
|
||||
provider: 'gemini',
|
||||
capabilities: model.capabilities,
|
||||
category: model.category
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 將 Grok 模型轉換為統一格式
|
||||
*/
|
||||
function convertGrokModel(model: GrokModel): UnifiedModel {
|
||||
return {
|
||||
name: model.name,
|
||||
displayName: model.displayName,
|
||||
description: model.description,
|
||||
provider: 'grok',
|
||||
capabilities: model.capabilities,
|
||||
category: model.category
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 所有可用模型列表（Gemini + Grok）
|
||||
*/
|
||||
export const ALL_MODELS: UnifiedModel[] = [
|
||||
...GEMINI_MODELS.map(convertGeminiModel),
|
||||
...GROK_MODELS.map(convertGrokModel)
|
||||
]
|
||||
|
||||
/**
|
||||
* 根據功能過濾模型
|
||||
*/
|
||||
export function getModelsByCapability(capability: keyof UnifiedModel['capabilities']): UnifiedModel[] {
|
||||
return ALL_MODELS.filter(m => m.capabilities[capability] === true)
|
||||
}
|
||||
|
||||
/**
|
||||
* 根據 Provider 過濾模型
|
||||
*/
|
||||
export function getModelsByProvider(provider: 'gemini' | 'grok'): UnifiedModel[] {
|
||||
return ALL_MODELS.filter(m => m.provider === provider)
|
||||
}
|
||||
|
||||
/**
|
||||
* 根據類別過濾模型
|
||||
*/
|
||||
export function getModelsByCategory(category: UnifiedModel['category']): UnifiedModel[] {
|
||||
return ALL_MODELS.filter(m => m.category === category)
|
||||
}
|
||||
|
||||
/**
|
||||
* 取得模型資訊
|
||||
*/
|
||||
export function getModelInfo(modelName: string): UnifiedModel | undefined {
|
||||
return ALL_MODELS.find(m => m.name === modelName)
|
||||
}
|
||||
|
||||
/**
|
||||
* 根據模型名稱判斷 Provider
|
||||
*/
|
||||
export function getProviderForModel(modelName: string): 'gemini' | 'grok' {
|
||||
const model = getModelInfo(modelName)
|
||||
if (model) {
|
||||
return model.provider
|
||||
}
|
||||
// 如果找不到模型，根據名稱判斷
|
||||
if (modelName.toLowerCase().includes('grok')) {
|
||||
return 'grok'
|
||||
}
|
||||
return 'gemini'
|
||||
}
|
||||
|
||||
/**
|
||||
* 根據模型名稱判斷 Provider（別名，為了向後兼容）
|
||||
*/
|
||||
export function getModelProvider(modelName: string): 'gemini' | 'grok' {
|
||||
return getProviderForModel(modelName)
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,271 @@
|
|||
/**
|
||||
* Gemini API 可用模型列表
|
||||
* 根據 Google Gemini API 官方文檔整理
|
||||
* 參考：https://ai.google.dev/gemini-api/docs?hl=zh-tw
|
||||
*/
|
||||
|
||||
export interface GeminiModel {
|
||||
name: string
|
||||
displayName: string
|
||||
description: string
|
||||
capabilities: {
|
||||
text: boolean
|
||||
vision: boolean
|
||||
audio: boolean
|
||||
video: boolean
|
||||
imageGeneration: boolean
|
||||
tts: boolean
|
||||
}
|
||||
category: 'text' | 'vision' | 'multimodal' | 'image-generation' | 'video-generation' | 'audio' | 'tts' | 'robotics'
|
||||
}
|
||||
|
||||
/**
|
||||
* Gemini 可用模型列表
|
||||
* 根據 2025 年最新官方文檔
|
||||
*/
|
||||
export const GEMINI_MODELS: GeminiModel[] = [
|
||||
// Gemini 3 系列
|
||||
{
|
||||
name: 'gemini-3-pro',
|
||||
displayName: 'Gemini 3 Pro',
|
||||
description: 'Google 最聰明的模型，全球最出色的多模態理解模型，建立在最先進的推論技術基礎',
|
||||
capabilities: {
|
||||
text: true,
|
||||
vision: true,
|
||||
audio: true,
|
||||
video: true,
|
||||
imageGeneration: false,
|
||||
tts: false
|
||||
},
|
||||
category: 'multimodal'
|
||||
},
|
||||
// Gemini 2.5 系列
|
||||
{
|
||||
name: 'gemini-2.5-pro',
|
||||
displayName: 'Gemini 2.5 Pro',
|
||||
description: 'Google 強大的推理模型，擅長程式設計和複雜的推理工作',
|
||||
capabilities: {
|
||||
text: true,
|
||||
vision: true,
|
||||
audio: true,
|
||||
video: true,
|
||||
imageGeneration: false,
|
||||
tts: false
|
||||
},
|
||||
category: 'multimodal'
|
||||
},
|
||||
{
|
||||
name: 'gemini-2.5-pro-tts',
|
||||
displayName: 'Gemini 2.5 Pro TTS',
|
||||
description: 'Gemini 2.5 模型變體，具備原生文字轉語音 (TTS) 功能',
|
||||
capabilities: {
|
||||
text: true,
|
||||
vision: true,
|
||||
audio: true,
|
||||
video: true,
|
||||
imageGeneration: false,
|
||||
tts: true
|
||||
},
|
||||
category: 'tts'
|
||||
},
|
||||
{
|
||||
name: 'gemini-2.5-flash',
|
||||
displayName: 'Gemini 2.5 Flash',
|
||||
description: '表現最均衡的模型，脈絡窗口達 100 萬個詞元，執行更多工作',
|
||||
capabilities: {
|
||||
text: true,
|
||||
vision: true,
|
||||
audio: true,
|
||||
video: true,
|
||||
imageGeneration: false,
|
||||
tts: false
|
||||
},
|
||||
category: 'multimodal'
|
||||
},
|
||||
{
|
||||
name: 'gemini-2.5-flash-lite',
|
||||
displayName: 'Gemini 2.5 Flash-Lite',
|
||||
description: '多模態模型，兼具速度和成本效益，效能優異，適合處理高頻率工作',
|
||||
capabilities: {
|
||||
text: true,
|
||||
vision: true,
|
||||
audio: true,
|
||||
video: true,
|
||||
imageGeneration: false,
|
||||
tts: false
|
||||
},
|
||||
category: 'multimodal'
|
||||
},
|
||||
{
|
||||
name: 'gemini-2.5-flash-image',
|
||||
displayName: 'Gemini 2.5 Flash Image',
|
||||
description: '使用原生圖像生成功能，可生成及編輯高度情境化的圖片',
|
||||
capabilities: {
|
||||
text: true,
|
||||
vision: true,
|
||||
audio: false,
|
||||
video: false,
|
||||
imageGeneration: true,
|
||||
tts: false
|
||||
},
|
||||
category: 'image-generation'
|
||||
},
|
||||
// Gemini 1.5 系列（向後相容）
|
||||
{
|
||||
name: 'gemini-1.5-pro-latest',
|
||||
displayName: 'Gemini 1.5 Pro (Latest)',
|
||||
description: '最新版本的 Gemini 1.5 Pro，支援文字、圖像、音頻、視頻多模態處理',
|
||||
capabilities: {
|
||||
text: true,
|
||||
vision: true,
|
||||
audio: true,
|
||||
video: true,
|
||||
imageGeneration: false,
|
||||
tts: false
|
||||
},
|
||||
category: 'multimodal'
|
||||
},
|
||||
{
|
||||
name: 'gemini-1.5-pro',
|
||||
displayName: 'Gemini 1.5 Pro',
|
||||
description: 'Gemini 1.5 Pro，支援文字、圖像、音頻、視頻多模態處理',
|
||||
capabilities: {
|
||||
text: true,
|
||||
vision: true,
|
||||
audio: true,
|
||||
video: true,
|
||||
imageGeneration: false,
|
||||
tts: false
|
||||
},
|
||||
category: 'multimodal'
|
||||
},
|
||||
{
|
||||
name: 'gemini-1.5-flash-latest',
|
||||
displayName: 'Gemini 1.5 Flash (Latest)',
|
||||
description: '最新版本的 Gemini 1.5 Flash，輕量級快速響應，支援多模態',
|
||||
capabilities: {
|
||||
text: true,
|
||||
vision: true,
|
||||
audio: true,
|
||||
video: true,
|
||||
imageGeneration: false,
|
||||
tts: false
|
||||
},
|
||||
category: 'multimodal'
|
||||
},
|
||||
{
|
||||
name: 'gemini-1.5-flash',
|
||||
displayName: 'Gemini 1.5 Flash',
|
||||
description: 'Gemini 1.5 Flash，輕量級快速響應，支援多模態',
|
||||
capabilities: {
|
||||
text: true,
|
||||
vision: true,
|
||||
audio: true,
|
||||
video: true,
|
||||
imageGeneration: false,
|
||||
tts: false
|
||||
},
|
||||
category: 'multimodal'
|
||||
},
|
||||
// 其他模型
|
||||
{
|
||||
name: 'gemini-pro',
|
||||
displayName: 'Gemini Pro',
|
||||
description: 'Gemini Pro，支援文字和圖像處理',
|
||||
capabilities: {
|
||||
text: true,
|
||||
vision: true,
|
||||
audio: false,
|
||||
video: false,
|
||||
imageGeneration: false,
|
||||
tts: false
|
||||
},
|
||||
category: 'multimodal'
|
||||
},
|
||||
// 機器人模型
|
||||
{
|
||||
name: 'gemini-robotics-er-1.5',
|
||||
displayName: 'Gemini Robotics-ER 1.5',
|
||||
description: '視覺語言模型 (VLM)，可將 Gemini 的代理功能帶入機器人領域，在實體世界中進行進階推理',
|
||||
capabilities: {
|
||||
text: true,
|
||||
vision: true,
|
||||
audio: false,
|
||||
video: false,
|
||||
imageGeneration: false,
|
||||
tts: false
|
||||
},
|
||||
category: 'robotics'
|
||||
}
|
||||
]
|
||||
|
||||
/**
|
||||
* 預設模型（用於文字生成）
|
||||
*/
|
||||
export const DEFAULT_TEXT_MODEL = 'gemini-2.5-flash'
|
||||
|
||||
/**
|
||||
* 預設視覺模型（用於圖像分析）
|
||||
*/
|
||||
export const DEFAULT_VISION_MODEL = 'gemini-2.5-flash'
|
||||
|
||||
/**
|
||||
* 預設音頻模型（用於音頻處理）
|
||||
*/
|
||||
export const DEFAULT_AUDIO_MODEL = 'gemini-2.5-flash'
|
||||
|
||||
/**
|
||||
* 預設圖像生成模型
|
||||
*/
|
||||
export const DEFAULT_IMAGE_GENERATION_MODEL = 'gemini-2.5-flash-image'
|
||||
|
||||
/**
|
||||
* 預設 TTS 模型（文字轉語音）
|
||||
*/
|
||||
export const DEFAULT_TTS_MODEL = 'gemini-2.5-pro-tts'
|
||||
|
||||
/**
|
||||
* 根據功能需求取得適合的模型
|
||||
*/
|
||||
export function getModelForTask(
|
||||
task: 'text' | 'vision' | 'audio' | 'video' | 'image-generation' | 'tts'
|
||||
): string {
|
||||
switch (task) {
|
||||
case 'text':
|
||||
return DEFAULT_TEXT_MODEL
|
||||
case 'vision':
|
||||
return DEFAULT_VISION_MODEL
|
||||
case 'audio':
|
||||
return DEFAULT_AUDIO_MODEL
|
||||
case 'video':
|
||||
return DEFAULT_VISION_MODEL // 視頻使用視覺模型
|
||||
case 'image-generation':
|
||||
return DEFAULT_IMAGE_GENERATION_MODEL
|
||||
case 'tts':
|
||||
return DEFAULT_TTS_MODEL
|
||||
default:
|
||||
return DEFAULT_TEXT_MODEL
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 根據類別取得模型列表
|
||||
*/
|
||||
export function getModelsByCategory(category: GeminiModel['category']): GeminiModel[] {
|
||||
return GEMINI_MODELS.filter(model => model.category === category)
|
||||
}
|
||||
|
||||
/**
|
||||
* 取得支援特定功能的模型列表
|
||||
*/
|
||||
export function getModelsByCapability(capability: keyof GeminiModel['capabilities']): GeminiModel[] {
|
||||
return GEMINI_MODELS.filter(model => model.capabilities[capability] === true)
|
||||
}
|
||||
|
||||
/**
|
||||
* 取得模型資訊
|
||||
*/
|
||||
export function getModelInfo(modelName: string): GeminiModel | undefined {
|
||||
return GEMINI_MODELS.find(m => m.name === modelName)
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
/**
|
||||
* Gemini Client
|
||||
* 單一責任：呼叫 Gemini API
|
||||
* 從 localStorage 讀取 token
|
||||
*/
|
||||
|
||||
import type { AIProvider } from '~/types/ai'
|
||||
import { getGeminiToken, getTextModel, getVisionModel } from '~/utils/storage'
|
||||
import { DEFAULT_TEXT_MODEL, DEFAULT_VISION_MODEL, getModelForTask } from './gemini-models'
|
||||
|
||||
const GEMINI_API_BASE = 'https://generativelanguage.googleapis.com/v1beta'
|
||||
|
||||
/**
|
||||
* Gemini API Client
|
||||
*/
|
||||
export class GeminiClient implements AIProvider {
|
||||
private token: string | null
|
||||
|
||||
constructor() {
|
||||
this.token = getGeminiToken()
|
||||
}
|
||||
|
||||
/**
|
||||
* 取得 API Token
|
||||
*/
|
||||
private getToken(): string {
|
||||
const token = getGeminiToken()
|
||||
if (!token) {
|
||||
throw new Error('Gemini API Token 未設定，請至設定頁面輸入')
|
||||
}
|
||||
return token
|
||||
}
|
||||
|
||||
/**
|
||||
* 呼叫 Gemini API
|
||||
* @param prompt - 文字提示
|
||||
* @param model - 模型名稱，預設使用儲存的模型或 DEFAULT_TEXT_MODEL
|
||||
* @param parts - 多模態內容（圖像、音頻等）
|
||||
*/
|
||||
private async callAPI(
|
||||
prompt: string,
|
||||
model?: string,
|
||||
parts?: Array<{ text?: string; inlineData?: { mimeType: string; data: string } }>
|
||||
): Promise<string> {
|
||||
// 如果沒有指定模型，使用儲存的模型或預設模型
|
||||
const selectedModel = model || getTextModel() || DEFAULT_TEXT_MODEL
|
||||
const token = this.getToken()
|
||||
const url = `${GEMINI_API_BASE}/models/${selectedModel}:generateContent?key=${token}`
|
||||
|
||||
// 組裝 parts
|
||||
const contentParts: Array<{ text?: string; inlineData?: { mimeType: string; data: string } }> = []
|
||||
|
||||
if (prompt) {
|
||||
contentParts.push({ text: prompt })
|
||||
}
|
||||
|
||||
if (parts) {
|
||||
contentParts.push(...parts)
|
||||
}
|
||||
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
contents: [{
|
||||
parts: contentParts
|
||||
}]
|
||||
})
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json().catch(() => ({ error: { message: 'Unknown error' } }))
|
||||
throw new Error(error.error?.message || `API 錯誤: ${response.status}`)
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
return data.candidates?.[0]?.content?.parts?.[0]?.text || ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成分鏡表
|
||||
*/
|
||||
async generateStoryboard(input: unknown): Promise<string> {
|
||||
// Prompt 組裝將由 utils/ai 處理，這裡只負責呼叫 API
|
||||
const prompt = typeof input === 'string' ? input : JSON.stringify(input)
|
||||
return this.callAPI(prompt)
|
||||
}
|
||||
|
||||
/**
|
||||
* 分析攝影機鏡位與運鏡
|
||||
* 支援圖像輸入（base64 或 URL）
|
||||
*/
|
||||
async analyzeCamera(input: unknown): Promise<string> {
|
||||
const model = getVisionModel() || DEFAULT_VISION_MODEL
|
||||
|
||||
// 如果 input 是物件且包含圖像
|
||||
if (typeof input === 'object' && input !== null) {
|
||||
const inputObj = input as { prompt?: string; image?: { mimeType: string; data: string } }
|
||||
const prompt = inputObj.prompt || '請分析這張圖片的攝影機鏡位與運鏡建議'
|
||||
const parts: Array<{ text?: string; inlineData?: { mimeType: string; data: string } }> = []
|
||||
|
||||
if (inputObj.image) {
|
||||
parts.push({ inlineData: inputObj.image })
|
||||
}
|
||||
|
||||
return this.callAPI(prompt, model, parts)
|
||||
}
|
||||
|
||||
const prompt = typeof input === 'string' ? input : JSON.stringify(input)
|
||||
return this.callAPI(prompt, model)
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成影片規劃
|
||||
*/
|
||||
async generateVideoPlan(input: unknown): Promise<string> {
|
||||
const prompt = typeof input === 'string' ? input : JSON.stringify(input)
|
||||
return this.callAPI(prompt)
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成剪輯建議
|
||||
*/
|
||||
async generateEditSuggestion(input: unknown): Promise<string> {
|
||||
const prompt = typeof input === 'string' ? input : JSON.stringify(input)
|
||||
return this.callAPI(prompt)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,217 @@
|
|||
/**
|
||||
* Grok API 可用模型列表
|
||||
* 根據 x.ai 控制台整理
|
||||
*/
|
||||
|
||||
export interface GrokModel {
|
||||
name: string
|
||||
displayName: string
|
||||
description: string
|
||||
capabilities: {
|
||||
text: boolean
|
||||
vision: boolean
|
||||
audio: boolean
|
||||
video: boolean
|
||||
imageGeneration: boolean
|
||||
tts: boolean
|
||||
}
|
||||
category: 'text' | 'vision' | 'multimodal' | 'image-generation' | 'video-generation' | 'audio' | 'tts'
|
||||
}
|
||||
|
||||
/**
|
||||
* Grok 可用模型列表
|
||||
* 根據 x.ai 控制台整理
|
||||
*/
|
||||
export const GROK_MODELS: GrokModel[] = [
|
||||
// Grok 4.1 系列
|
||||
{
|
||||
name: 'grok-4-1-fast-reasoning',
|
||||
displayName: 'Grok 4.1 Fast Reasoning',
|
||||
description: 'Grok 4.1 Fast Reasoning 模型，支援文字和圖像，具備推理能力，Context: 2,000,000',
|
||||
capabilities: {
|
||||
text: true,
|
||||
vision: true,
|
||||
audio: false,
|
||||
video: false,
|
||||
imageGeneration: false,
|
||||
tts: false
|
||||
},
|
||||
category: 'multimodal'
|
||||
},
|
||||
{
|
||||
name: 'grok-4-1-fast-non-reasoning',
|
||||
displayName: 'Grok 4.1 Fast Non-Reasoning',
|
||||
description: 'Grok 4.1 Fast Non-Reasoning 模型，支援文字和圖像，Context: 2,000,000',
|
||||
capabilities: {
|
||||
text: true,
|
||||
vision: true,
|
||||
audio: false,
|
||||
video: false,
|
||||
imageGeneration: false,
|
||||
tts: false
|
||||
},
|
||||
category: 'multimodal'
|
||||
},
|
||||
// Grok 4 系列
|
||||
{
|
||||
name: 'grok-4-fast-reasoning',
|
||||
displayName: 'Grok 4 Fast Reasoning',
|
||||
description: 'Grok 4 Fast Reasoning 模型，支援文字和圖像，具備推理能力，Context: 2,000,000',
|
||||
capabilities: {
|
||||
text: true,
|
||||
vision: true,
|
||||
audio: false,
|
||||
video: false,
|
||||
imageGeneration: false,
|
||||
tts: false
|
||||
},
|
||||
category: 'multimodal'
|
||||
},
|
||||
{
|
||||
name: 'grok-4-fast-non-reasoning',
|
||||
displayName: 'Grok 4 Fast Non-Reasoning',
|
||||
description: 'Grok 4 Fast Non-Reasoning 模型，支援文字和圖像，Context: 2,000,000',
|
||||
capabilities: {
|
||||
text: true,
|
||||
vision: true,
|
||||
audio: false,
|
||||
video: false,
|
||||
imageGeneration: false,
|
||||
tts: false
|
||||
},
|
||||
category: 'multimodal'
|
||||
},
|
||||
{
|
||||
name: 'grok-4-0709',
|
||||
displayName: 'Grok 4 (0709)',
|
||||
description: 'Grok 4 模型，支援文字和圖像，Context: 256,000',
|
||||
capabilities: {
|
||||
text: true,
|
||||
vision: true,
|
||||
audio: false,
|
||||
video: false,
|
||||
imageGeneration: false,
|
||||
tts: false
|
||||
},
|
||||
category: 'multimodal'
|
||||
},
|
||||
// Grok 3 系列
|
||||
{
|
||||
name: 'grok-3',
|
||||
displayName: 'Grok 3',
|
||||
description: 'Grok 3 模型，支援文字和圖像，Context: 131,072',
|
||||
capabilities: {
|
||||
text: true,
|
||||
vision: true,
|
||||
audio: false,
|
||||
video: false,
|
||||
imageGeneration: false,
|
||||
tts: false
|
||||
},
|
||||
category: 'multimodal'
|
||||
},
|
||||
{
|
||||
name: 'grok-3-mini',
|
||||
displayName: 'Grok 3 Mini',
|
||||
description: 'Grok 3 Mini 模型，支援文字和圖像，Context: 131,072',
|
||||
capabilities: {
|
||||
text: true,
|
||||
vision: true,
|
||||
audio: false,
|
||||
video: false,
|
||||
imageGeneration: false,
|
||||
tts: false
|
||||
},
|
||||
category: 'multimodal'
|
||||
},
|
||||
// Grok Code 系列
|
||||
{
|
||||
name: 'grok-code-fast-1',
|
||||
displayName: 'Grok Code Fast 1',
|
||||
description: 'Grok Code Fast 1 模型，專為程式碼優化，支援文字和圖像，Context: 256,000',
|
||||
capabilities: {
|
||||
text: true,
|
||||
vision: true,
|
||||
audio: false,
|
||||
video: false,
|
||||
imageGeneration: false,
|
||||
tts: false
|
||||
},
|
||||
category: 'multimodal'
|
||||
},
|
||||
// Grok 2 系列
|
||||
{
|
||||
name: 'grok-2-vision-1212',
|
||||
displayName: 'Grok 2 Vision (1212)',
|
||||
description: 'Grok 2 Vision 模型，支援文字和圖像理解，Context: 32,768',
|
||||
capabilities: {
|
||||
text: true,
|
||||
vision: true,
|
||||
audio: false,
|
||||
video: false,
|
||||
imageGeneration: false,
|
||||
tts: false
|
||||
},
|
||||
category: 'vision'
|
||||
},
|
||||
// 圖像生成模型
|
||||
{
|
||||
name: 'grok-2-image-1212',
|
||||
displayName: 'Grok 2 Image (1212)',
|
||||
description: 'Grok 2 Image 模型，支援圖像生成，支援文字和圖像輸入',
|
||||
capabilities: {
|
||||
text: true,
|
||||
vision: true,
|
||||
audio: false,
|
||||
video: false,
|
||||
imageGeneration: true,
|
||||
tts: false
|
||||
},
|
||||
category: 'image-generation'
|
||||
}
|
||||
]
|
||||
|
||||
/**
|
||||
* 預設文字模型
|
||||
*/
|
||||
export const DEFAULT_GROK_TEXT_MODEL = 'grok-4-1-fast-reasoning'
|
||||
|
||||
/**
|
||||
* 預設視覺模型
|
||||
*/
|
||||
export const DEFAULT_GROK_VISION_MODEL = 'grok-4-1-fast-reasoning'
|
||||
|
||||
/**
|
||||
* 預設圖像生成模型
|
||||
*/
|
||||
export const DEFAULT_GROK_IMAGE_GENERATION_MODEL = 'grok-2-image-1212'
|
||||
|
||||
/**
|
||||
* 取得模型資訊
|
||||
*/
|
||||
export function getGrokModelInfo(modelName: string): GrokModel | undefined {
|
||||
return GROK_MODELS.find(m => m.name === modelName)
|
||||
}
|
||||
|
||||
/**
|
||||
* 根據功能需求取得適合的 Grok 模型
|
||||
*/
|
||||
export function getGrokModelForTask(
|
||||
task: 'text' | 'vision' | 'audio' | 'video' | 'image-generation' | 'tts'
|
||||
): string {
|
||||
switch (task) {
|
||||
case 'text':
|
||||
return DEFAULT_GROK_TEXT_MODEL
|
||||
case 'vision':
|
||||
return DEFAULT_GROK_VISION_MODEL
|
||||
case 'image-generation':
|
||||
return DEFAULT_GROK_IMAGE_GENERATION_MODEL
|
||||
case 'audio':
|
||||
case 'video':
|
||||
case 'tts':
|
||||
default:
|
||||
return DEFAULT_GROK_TEXT_MODEL
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
/**
|
||||
* Grok Client
|
||||
* 與 Gemini 相同介面
|
||||
* 預設不啟用
|
||||
*/
|
||||
|
||||
import type { AIProvider } from '~/types/ai'
|
||||
import { getGrokToken, getTextModel, getVisionModel } from '~/utils/storage'
|
||||
import { DEFAULT_GROK_TEXT_MODEL, DEFAULT_GROK_VISION_MODEL, getGrokModelForTask } from './grok-models'
|
||||
|
||||
const GROK_API_BASE = 'https://api.x.ai/v1'
|
||||
|
||||
/**
|
||||
* Grok API Client
|
||||
*/
|
||||
export class GrokClient implements AIProvider {
|
||||
/**
|
||||
* 取得 API Token
|
||||
*/
|
||||
private getToken(): string {
|
||||
const token = getGrokToken()
|
||||
if (!token) {
|
||||
throw new Error('Grok API Token 未設定，請至設定頁面輸入')
|
||||
}
|
||||
return token
|
||||
}
|
||||
|
||||
/**
|
||||
* 呼叫 Grok API
|
||||
* @param prompt - 文字提示
|
||||
* @param model - 模型名稱，預設使用 grok-2
|
||||
* @param parts - 多模態內容（圖像等）
|
||||
*/
|
||||
private async callAPI(
|
||||
prompt: string,
|
||||
model: string = DEFAULT_GROK_TEXT_MODEL,
|
||||
parts?: Array<{ text?: string; image_url?: { url: string } }>
|
||||
): Promise<string> {
|
||||
const token = this.getToken()
|
||||
const url = `${GROK_API_BASE}/chat/completions`
|
||||
|
||||
// 組裝 messages
|
||||
const messages: Array<{ role: string; content: Array<{ type: string; text?: string; image_url?: { url: string } }> }> = []
|
||||
|
||||
const contentParts: Array<{ type: string; text?: string; image_url?: { url: string } }> = []
|
||||
|
||||
if (prompt) {
|
||||
contentParts.push({ type: 'text', text: prompt })
|
||||
}
|
||||
|
||||
if (parts) {
|
||||
parts.forEach(part => {
|
||||
if (part.image_url) {
|
||||
contentParts.push({ type: 'image_url', image_url: part.image_url })
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
messages.push({
|
||||
role: 'user',
|
||||
content: contentParts
|
||||
})
|
||||
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
model,
|
||||
messages
|
||||
})
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json().catch(() => ({ error: { message: 'Unknown error' } }))
|
||||
throw new Error(error.error?.message || `API 錯誤: ${response.status}`)
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
return data.choices?.[0]?.message?.content || ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成分鏡表
|
||||
*/
|
||||
async generateStoryboard(input: unknown): Promise<string> {
|
||||
// 如果選擇的模型是 Grok 模型，使用選擇的模型；否則使用預設
|
||||
const selectedModel = getTextModel()
|
||||
const model = selectedModel && selectedModel.includes('grok')
|
||||
? selectedModel
|
||||
: getGrokModelForTask('text')
|
||||
const prompt = typeof input === 'string' ? input : JSON.stringify(input)
|
||||
return this.callAPI(prompt, model)
|
||||
}
|
||||
|
||||
/**
|
||||
* 分析攝影機鏡位與運鏡
|
||||
* 支援圖像輸入
|
||||
*/
|
||||
async analyzeCamera(input: unknown): Promise<string> {
|
||||
// 如果選擇的模型是 Grok 模型，使用選擇的模型；否則使用預設
|
||||
const selectedModel = getVisionModel()
|
||||
const model = selectedModel && selectedModel.includes('grok')
|
||||
? selectedModel
|
||||
: getGrokModelForTask('vision')
|
||||
|
||||
// 如果 input 是物件且包含圖像
|
||||
if (typeof input === 'object' && input !== null) {
|
||||
const inputObj = input as { prompt?: string; image?: { url: string } }
|
||||
const prompt = inputObj.prompt || '請分析這張圖片的攝影機鏡位與運鏡建議'
|
||||
const parts: Array<{ text?: string; image_url?: { url: string } }> = []
|
||||
|
||||
if (inputObj.image) {
|
||||
parts.push({ image_url: inputObj.image })
|
||||
}
|
||||
|
||||
return this.callAPI(prompt, model, parts)
|
||||
}
|
||||
|
||||
const prompt = typeof input === 'string' ? input : JSON.stringify(input)
|
||||
return this.callAPI(prompt, model)
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成影片規劃
|
||||
*/
|
||||
async generateVideoPlan(input: unknown): Promise<string> {
|
||||
const prompt = typeof input === 'string' ? input : JSON.stringify(input)
|
||||
return this.callAPI(prompt)
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成剪輯建議
|
||||
*/
|
||||
async generateEditSuggestion(input: unknown): Promise<string> {
|
||||
const prompt = typeof input === 'string' ? input : JSON.stringify(input)
|
||||
return this.callAPI(prompt)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
/**
|
||||
* 列出可用的 Gemini 模型
|
||||
* 呼叫 Google API 取得實際可用的模型列表
|
||||
*/
|
||||
|
||||
import { getGeminiToken } from '~/utils/storage'
|
||||
|
||||
const GEMINI_API_BASE = 'https://generativelanguage.googleapis.com/v1'
|
||||
|
||||
/**
|
||||
* 取得所有可用的模型列表
|
||||
*/
|
||||
export async function listAvailableModels(): Promise<Array<{
|
||||
name: string
|
||||
displayName: string
|
||||
description: string
|
||||
supportedGenerationMethods: string[]
|
||||
}>> {
|
||||
const token = getGeminiToken()
|
||||
if (!token) {
|
||||
throw new Error('Gemini API Token 未設定，請至設定頁面輸入')
|
||||
}
|
||||
|
||||
const url = `${GEMINI_API_BASE}/models?key=${token}`
|
||||
|
||||
try {
|
||||
const response = await fetch(url)
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json().catch(() => ({ error: { message: 'Unknown error' } }))
|
||||
throw new Error(error.error?.message || `API 錯誤: ${response.status}`)
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
// 過濾出支援 generateContent 的模型
|
||||
const models = (data.models || [])
|
||||
.filter((model: any) =>
|
||||
model.supportedGenerationMethods?.includes('generateContent')
|
||||
)
|
||||
.map((model: any) => ({
|
||||
name: model.name.replace('models/', ''),
|
||||
displayName: model.displayName || model.name,
|
||||
description: model.description || '',
|
||||
supportedGenerationMethods: model.supportedGenerationMethods || []
|
||||
}))
|
||||
|
||||
return models
|
||||
} catch (error) {
|
||||
console.error('取得模型列表失敗:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
/**
|
||||
* localStorage 工具函數
|
||||
* 用於管理 AI Token 和 Provider 設定
|
||||
*/
|
||||
|
||||
const STORAGE_KEYS = {
|
||||
GEMINI_TOKEN: 'ai_token_gemini',
|
||||
GROK_TOKEN: 'ai_token_grok',
|
||||
PROVIDER: 'ai_provider',
|
||||
TEXT_MODEL: 'ai_text_model',
|
||||
VISION_MODEL: 'ai_vision_model',
|
||||
IMAGE_GENERATION_MODEL: 'ai_image_generation_model',
|
||||
TTS_MODEL: 'ai_tts_model'
|
||||
} as const
|
||||
|
||||
/**
|
||||
* 取得 Gemini Token
|
||||
*/
|
||||
export function getGeminiToken(): string | null {
|
||||
if (typeof window === 'undefined') return null
|
||||
return localStorage.getItem(STORAGE_KEYS.GEMINI_TOKEN)
|
||||
}
|
||||
|
||||
/**
|
||||
* 設定 Gemini Token
|
||||
*/
|
||||
export function setGeminiToken(token: string): void {
|
||||
if (typeof window === 'undefined') return
|
||||
localStorage.setItem(STORAGE_KEYS.GEMINI_TOKEN, token)
|
||||
}
|
||||
|
||||
/**
|
||||
* 取得 Grok Token
|
||||
*/
|
||||
export function getGrokToken(): string | null {
|
||||
if (typeof window === 'undefined') return null
|
||||
return localStorage.getItem(STORAGE_KEYS.GROK_TOKEN)
|
||||
}
|
||||
|
||||
/**
|
||||
* 設定 Grok Token
|
||||
*/
|
||||
export function setGrokToken(token: string): void {
|
||||
if (typeof window === 'undefined') return
|
||||
localStorage.setItem(STORAGE_KEYS.GROK_TOKEN, token)
|
||||
}
|
||||
|
||||
/**
|
||||
* 取得當前 Provider
|
||||
*/
|
||||
export function getProvider(): 'gemini' | 'grok' {
|
||||
if (typeof window === 'undefined') return 'gemini'
|
||||
const provider = localStorage.getItem(STORAGE_KEYS.PROVIDER)
|
||||
return (provider === 'grok' ? 'grok' : 'gemini') as 'gemini' | 'grok'
|
||||
}
|
||||
|
||||
/**
|
||||
* 設定 Provider
|
||||
*/
|
||||
export function setProvider(provider: 'gemini' | 'grok'): void {
|
||||
if (typeof window === 'undefined') return
|
||||
localStorage.setItem(STORAGE_KEYS.PROVIDER, provider)
|
||||
}
|
||||
|
||||
/**
|
||||
* 取得當前 Provider 的 Token
|
||||
*/
|
||||
export function getCurrentProviderToken(): string | null {
|
||||
const provider = getProvider()
|
||||
return provider === 'gemini' ? getGeminiToken() : getGrokToken()
|
||||
}
|
||||
|
||||
/**
|
||||
* 取得文字模型
|
||||
*/
|
||||
export function getTextModel(): string | null {
|
||||
if (typeof window === 'undefined') return null
|
||||
return localStorage.getItem(STORAGE_KEYS.TEXT_MODEL)
|
||||
}
|
||||
|
||||
/**
|
||||
* 設定文字模型
|
||||
*/
|
||||
export function setTextModel(model: string): void {
|
||||
if (typeof window === 'undefined') return
|
||||
localStorage.setItem(STORAGE_KEYS.TEXT_MODEL, model)
|
||||
}
|
||||
|
||||
/**
|
||||
* 取得視覺模型
|
||||
*/
|
||||
export function getVisionModel(): string | null {
|
||||
if (typeof window === 'undefined') return null
|
||||
return localStorage.getItem(STORAGE_KEYS.VISION_MODEL)
|
||||
}
|
||||
|
||||
/**
|
||||
* 設定視覺模型
|
||||
*/
|
||||
export function setVisionModel(model: string): void {
|
||||
if (typeof window === 'undefined') return
|
||||
localStorage.setItem(STORAGE_KEYS.VISION_MODEL, model)
|
||||
}
|
||||
|
||||
/**
|
||||
* 取得圖像生成模型
|
||||
*/
|
||||
export function getImageGenerationModel(): string | null {
|
||||
if (typeof window === 'undefined') return null
|
||||
return localStorage.getItem(STORAGE_KEYS.IMAGE_GENERATION_MODEL)
|
||||
}
|
||||
|
||||
/**
|
||||
* 設定圖像生成模型
|
||||
*/
|
||||
export function setImageGenerationModel(model: string): void {
|
||||
if (typeof window === 'undefined') return
|
||||
localStorage.setItem(STORAGE_KEYS.IMAGE_GENERATION_MODEL, model)
|
||||
}
|
||||
|
||||
/**
|
||||
* 取得 TTS 模型
|
||||
*/
|
||||
export function getTTSModel(): string | null {
|
||||
if (typeof window === 'undefined') return null
|
||||
return localStorage.getItem(STORAGE_KEYS.TTS_MODEL)
|
||||
}
|
||||
|
||||
/**
|
||||
* 設定 TTS 模型
|
||||
*/
|
||||
export function setTTSModel(model: string): void {
|
||||
if (typeof window === 'undefined') return
|
||||
localStorage.setItem(STORAGE_KEYS.TTS_MODEL, model)
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
/**
|
||||
* 節奏選項
|
||||
*/
|
||||
|
||||
import type { PaceOption } from '~/types/storyboard'
|
||||
|
||||
/**
|
||||
* 節奏選項列表
|
||||
*/
|
||||
export const PACE_OPTIONS: PaceOption[] = [
|
||||
{
|
||||
id: 'very-slow',
|
||||
name: '非常緩慢',
|
||||
description: '靜態鏡頭為主，長時間停留，適合情感表達'
|
||||
},
|
||||
{
|
||||
id: 'slow',
|
||||
name: '緩慢',
|
||||
description: '平穩節奏，從容不迫，適合敘事'
|
||||
},
|
||||
{
|
||||
id: 'moderate',
|
||||
name: '中等',
|
||||
description: '平衡節奏，標準剪輯速度'
|
||||
},
|
||||
{
|
||||
id: 'fast',
|
||||
name: '快速',
|
||||
description: '快速剪輯，動態感強，適合動作場景'
|
||||
},
|
||||
{
|
||||
id: 'very-fast',
|
||||
name: '非常快速',
|
||||
description: '極速剪輯，緊張刺激，適合高潮場景'
|
||||
},
|
||||
{
|
||||
id: 'variable',
|
||||
name: '變化',
|
||||
description: '根據劇情需要動態調整節奏'
|
||||
}
|
||||
]
|
||||
|
||||
/**
|
||||
* 取得節奏選項
|
||||
*/
|
||||
export function getPaceOption(id: string): PaceOption | undefined {
|
||||
return PACE_OPTIONS.find(p => p.id === id)
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
/**
|
||||
* 風格預設選項
|
||||
*/
|
||||
|
||||
import type { StylePreset } from '~/types/storyboard'
|
||||
|
||||
/**
|
||||
* 預設風格列表
|
||||
*/
|
||||
export const STYLE_PRESETS: StylePreset[] = [
|
||||
{
|
||||
id: 'simpsons',
|
||||
name: '辛普森家庭',
|
||||
description: '美式卡通風格，鮮豔色彩，簡化線條',
|
||||
keywords: ['cartoon', 'yellow', 'simplified', 'vibrant']
|
||||
},
|
||||
{
|
||||
id: 'anime',
|
||||
name: '日式動漫',
|
||||
description: '日式動畫風格，大眼睛，精緻細節',
|
||||
keywords: ['anime', 'manga', 'detailed', 'expressive']
|
||||
},
|
||||
{
|
||||
id: 'pixar',
|
||||
name: '皮克斯',
|
||||
description: '3D 動畫風格，寫實光影，豐富細節',
|
||||
keywords: ['3d', 'realistic', 'lighting', 'detailed']
|
||||
},
|
||||
{
|
||||
id: 'minimalist',
|
||||
name: '極簡風格',
|
||||
description: '簡約線條，少數色彩，乾淨設計',
|
||||
keywords: ['minimal', 'clean', 'simple', 'geometric']
|
||||
},
|
||||
{
|
||||
id: 'noir',
|
||||
name: '黑色電影',
|
||||
description: '高對比黑白，戲劇性光影，復古氛圍',
|
||||
keywords: ['black', 'white', 'dramatic', 'vintage']
|
||||
},
|
||||
{
|
||||
id: 'cyberpunk',
|
||||
name: '賽博龐克',
|
||||
description: '霓虹色彩，未來科技，都市夜景',
|
||||
keywords: ['neon', 'futuristic', 'tech', 'urban']
|
||||
},
|
||||
{
|
||||
id: 'watercolor',
|
||||
name: '水彩風格',
|
||||
description: '柔和色彩，流動筆觸，藝術感',
|
||||
keywords: ['watercolor', 'soft', 'artistic', 'flowing']
|
||||
},
|
||||
{
|
||||
id: 'realistic',
|
||||
name: '寫實風格',
|
||||
description: '真實光影，細節豐富，電影級質感',
|
||||
keywords: ['realistic', 'photorealistic', 'cinematic', 'detailed']
|
||||
}
|
||||
]
|
||||
|
||||
/**
|
||||
* 取得風格預設
|
||||
*/
|
||||
export function getStylePreset(id: string): StylePreset | undefined {
|
||||
return STYLE_PRESETS.find(s => s.id === id)
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
# Cut AI — Frontend Specification (Nuxt 4 · Gemini-First)
|
||||
|
||||
## 1. 專案定位
|
||||
Cut AI 是一個「一站式 AI 影像製作工具」的前端應用。
|
||||
本專案以 **真實 AI（Gemini）即時產出** 為核心，不使用 mock data。
|
||||
|
||||
核心原則：
|
||||
- 真實 AI 結果優先
|
||||
- 架構穩定、可長期演進
|
||||
- 前端作為 AI Orchestrator，而非單純 UI
|
||||
|
||||
---
|
||||
|
||||
## 2. 既有技術基底（已鎖定）
|
||||
|
||||
```json
|
||||
{
|
||||
"nuxt": "^4.2.2",
|
||||
"vue": "^3.5.x",
|
||||
"vue-router": "^4.x"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Dependency 使用政策（兩階段制）
|
||||
|
||||
### 3.1 規劃階段（Planning Phase）
|
||||
- 允許「討論」是否需要新增 dependency
|
||||
- 僅限提出建議與理由
|
||||
- **不得實際安裝或引入**
|
||||
|
||||
### 3.2 實作階段（Execution Phase）
|
||||
- ❌ 禁止新增任何 dependency
|
||||
- ❌ 禁止隱性引入（UI library / helper library）
|
||||
- ✅ 僅使用既有 dependency 與原生能力
|
||||
|
||||
> 一旦進入實作階段，dependency 清單視為「鎖定狀態」。
|
||||
|
||||
---
|
||||
|
||||
## 4. AI Provider 策略
|
||||
|
||||
### Primary
|
||||
- **Gemini API**
|
||||
- 預設唯一啟用
|
||||
|
||||
### Secondary（預留）
|
||||
- Grok API
|
||||
- 僅保留 client 與切換能力，不預設啟用
|
||||
|
||||
---
|
||||
|
||||
## 5. Token 管理（前端）
|
||||
|
||||
- Token 由使用者於設定頁手動輸入
|
||||
- 儲存於 localStorage
|
||||
- `ai_token_gemini`
|
||||
- `ai_token_grok`
|
||||
- 不 hardcode token
|
||||
- 不驗證 token 正確性（由 API 回傳錯誤）
|
||||
|
||||
---
|
||||
|
||||
## 6. 專案目錄結構（建議）
|
||||
|
||||
```
|
||||
/components
|
||||
/base
|
||||
/cards
|
||||
/layout
|
||||
|
||||
/pages
|
||||
index.vue
|
||||
/app
|
||||
dashboard.vue
|
||||
ai-storyboard.vue
|
||||
ai-camera.vue
|
||||
sora-director.vue
|
||||
cut-agent.vue
|
||||
settings.vue
|
||||
|
||||
/composables
|
||||
/utils
|
||||
/types
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. 鏡頭語言系統（Camera Language System）
|
||||
|
||||
鏡頭語言為 **AI 知識層**，非 UI 邏輯。
|
||||
前端不硬編、不限制，僅結構化呈現 Gemini 的選擇。
|
||||
|
||||
### 7.1 鏡頭與景別（Shot Size & Lens）
|
||||
- Extreme Long Shot (XLS / ELS)
|
||||
- Long Shot (LS)
|
||||
- Medium Shot (MS)
|
||||
- Close-Up (CU)
|
||||
- Extreme Close-Up (ECU)
|
||||
- Over-the-Shoulder Shot (OTS)
|
||||
- Point of View (POV)
|
||||
|
||||
### 7.2 運鏡（Camera Movement）
|
||||
- Pan
|
||||
- Tilt
|
||||
- Dolly In / Dolly Out
|
||||
- Truck / Tracking Shot
|
||||
- Crane / Boom
|
||||
- Handheld
|
||||
- Dolly Zoom / Vertigo Effect
|
||||
|
||||
### 7.3 分鏡構圖（Composition & Storyboarding）
|
||||
- Rule of Thirds
|
||||
- Leading Lines
|
||||
- Depth of Field（Shallow / Deep）
|
||||
- Dutch Angle / Canted Angle
|
||||
- Headroom / Look Room
|
||||
- 180-degree Rule
|
||||
|
||||
### 7.4 光線（Lighting & Tone）
|
||||
- Three-Point Lighting（Key / Fill / Back）
|
||||
- High Key
|
||||
- Low Key
|
||||
- Hard Light
|
||||
- Soft Light
|
||||
- Practical Light
|
||||
|
||||
---
|
||||
|
||||
## 8. 頁面功能規格
|
||||
|
||||
### 8.1 Landing Page（/pages/index.vue）
|
||||
- 專案介紹
|
||||
- 功能卡片（靜態）
|
||||
- CTA → Dashboard
|
||||
|
||||
### 8.2 Dashboard（/pages/app/dashboard.vue）
|
||||
- 工具入口卡片
|
||||
- 不顯示 AI 結果
|
||||
|
||||
### 8.3 Settings（/pages/app/settings.vue）
|
||||
- Gemini API Key
|
||||
- Grok API Key（optional）
|
||||
- Provider 切換
|
||||
|
||||
### 8.4 AI 分鏡表
|
||||
- 輸入故事、風格、節奏
|
||||
- Gemini 回傳真實分鏡結果
|
||||
- 以卡片顯示
|
||||
|
||||
### 8.5 AI 攝影機
|
||||
- 上傳圖片
|
||||
- Gemini 回傳鏡位與運鏡建議
|
||||
|
||||
### 8.6 Sora 導演
|
||||
- 一句話 prompt
|
||||
- Gemini 回傳影片規劃文字
|
||||
|
||||
### 8.7 Cut Agent
|
||||
- 素材 + 劇情
|
||||
- Gemini 回傳剪輯建議
|
||||
|
||||
---
|
||||
|
||||
## 9. UI 原則
|
||||
- 卡片導向
|
||||
- 可讀性優先
|
||||
- 不追求動畫
|
||||
- 結構穩定、可擴充
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
# Cursor 開發最高準則（Nuxt 4 · Gemini Direct）
|
||||
|
||||
## 1. 前提
|
||||
- 專案已存在
|
||||
- 使用 Nuxt 4
|
||||
- 使用真實 Gemini API
|
||||
- Token 由使用者於設定頁輸入
|
||||
|
||||
---
|
||||
|
||||
## 2. Dependency 規則
|
||||
|
||||
### 規劃階段
|
||||
- 允許討論是否需要新增 dependency
|
||||
- 需說明必要性與替代方案
|
||||
|
||||
### 實作階段（預設）
|
||||
- ❌ 不新增任何 dependency
|
||||
- ❌ 不安裝任何套件
|
||||
- ❌ 不隱性引入 library
|
||||
|
||||
---
|
||||
|
||||
## 3. Component 拆解原則（Token 最小化）
|
||||
|
||||
只允許三層：
|
||||
|
||||
### Base
|
||||
- BaseButton
|
||||
- BaseInput
|
||||
- BaseTextarea
|
||||
- BaseCard
|
||||
|
||||
### Feature
|
||||
- ToolCard
|
||||
- SceneCard
|
||||
- CameraShotCard
|
||||
|
||||
### Page
|
||||
- pages/*.vue
|
||||
- 僅組合元件與呼叫 composable
|
||||
|
||||
---
|
||||
|
||||
## 4. 拆 component 的唯一判斷
|
||||
是否會被兩個以上頁面重用：
|
||||
- 是 → 拆
|
||||
- 否 → 留在頁面
|
||||
|
||||
---
|
||||
|
||||
## 5. AI 呼叫規則
|
||||
|
||||
- UI 不得直接呼叫 Gemini
|
||||
- UI 只呼叫 composable
|
||||
- Prompt 組裝只存在於 utils/ai
|
||||
|
||||
---
|
||||
|
||||
## 6. AI Provider 架構
|
||||
|
||||
### Interface（/types/ai.ts）
|
||||
|
||||
```ts
|
||||
export interface AIProvider {
|
||||
generateStoryboard(input: unknown): Promise<string>
|
||||
analyzeCamera(input: unknown): Promise<string>
|
||||
generateVideoPlan(input: unknown): Promise<string>
|
||||
}
|
||||
```
|
||||
|
||||
### Gemini Client
|
||||
- 從 localStorage 讀取 token
|
||||
- 單一責任：呼叫 API
|
||||
|
||||
### Grok Client
|
||||
- 與 Gemini 相同介面
|
||||
- 預設不啟用
|
||||
|
||||
### Provider Selector
|
||||
- 依設定頁選擇 provider
|
||||
- 預設 Gemini
|
||||
|
||||
---
|
||||
|
||||
## 7. 鏡頭語言處理規則
|
||||
|
||||
- 不 hardcode 鏡頭語言
|
||||
- 不寫 enum
|
||||
- 不驗證 AI 選擇是否合理
|
||||
- UI 僅顯示結構化結果
|
||||
|
||||
建議結構：
|
||||
|
||||
```ts
|
||||
{
|
||||
shot: string
|
||||
movement: string
|
||||
composition: string
|
||||
lighting: string
|
||||
description: string
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 8. Cursor 輸出限制
|
||||
|
||||
- 一次只產生一個檔案
|
||||
- 不跨檔案修改
|
||||
- 不自動優化
|
||||
- 不補未使用功能
|
||||
|
||||
---
|
||||
|
||||
## 9. 開發順序（不可跳）
|
||||
1. Settings Page
|
||||
2. Gemini Client
|
||||
3. Provider Selector
|
||||
4. AI 分鏡表
|
||||
5. 其他工具頁
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
compatibilityDate: '2025-07-15',
|
||||
devtools: { enabled: true },
|
||||
modules: ['@nuxtjs/tailwindcss']
|
||||
})
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"name": "nuxt-app",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare"
|
||||
},
|
||||
"dependencies": {
|
||||
"nuxt": "^4.2.2",
|
||||
"vue": "^3.5.25",
|
||||
"vue-router": "^4.6.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxtjs/tailwindcss": "^6.14.0",
|
||||
"autoprefixer": "^10.4.23",
|
||||
"postcss": "^8.5.6",
|
||||
"tailwindcss": "^3.4.19"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,2 @@
|
|||
User-Agent: *
|
||||
Disallow:
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
'./app/components/**/*.{js,vue,ts}',
|
||||
'./app/layouts/**/*.vue',
|
||||
'./app/pages/**/*.vue',
|
||||
'./app/plugins/**/*.{js,ts}',
|
||||
'./app/app.vue',
|
||||
'./app/error.vue',
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
// https://nuxt.com/docs/guide/concepts/typescript
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./.nuxt/tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
"path": "./.nuxt/tsconfig.server.json"
|
||||
},
|
||||
{
|
||||
"path": "./.nuxt/tsconfig.shared.json"
|
||||
},
|
||||
{
|
||||
"path": "./.nuxt/tsconfig.node.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue