124 lines
4.7 KiB
Vue
124 lines
4.7 KiB
Vue
<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>
|