171 lines
3.2 KiB
Markdown
171 lines
3.2 KiB
Markdown
# 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 原則
|
||
- 卡片導向
|
||
- 可讀性優先
|
||
- 不追求動畫
|
||
- 結構穩定、可擴充
|