18 KiB

Raw Blame History

例句圖生成功能產品需求規格書 (PRD)

1. 功能概述

1.1 產品目標

為 DramaLing 詞彙學習平台開發智能例句圖生成功能，通過視覺化例句提升用戶學習效果和記憶保留率。

1.2 核心價值主張

視覺記憶增強：圖像結合文字，提高記憶效果 40-60%
學習體驗優化：直觀的視覺內容降低理解門檻
個性化學習：根據用戶程度和偏好生成適配內容
成本效益平衡：智能緩存和批量處理控制 AI 生成成本

1.3 目標用戶

主要用戶：英語學習者（A1-C2 所有等級）
使用場景：詞卡複習、新詞學習、例句理解
預期效果：提升學習效率 30%，延長學習時間 25%

2. 系統架構設計

2.1 雙環境架構策略

2.1.1 開發環境 (Development)

本地圖片儲存架構
├── wwwroot/images/examples/     # 靜態圖片存放
├── LocalImageStorageService     # 本地檔案管理
├── 快速測試與迭代             # 零雲端成本
└── 完整功能驗證               # 生產前測試

2.1.2 生產環境 (Production)

雲端圖片儲存架構
├── AWS S3 / Azure Blob         # 雲端圖片儲存
├── CDN 加速分發               # 全球訪問優化
├── 自動備份與容災             # 數據安全保障
└── 彈性擴展與監控             # 效能管理

2.2 核心系統元件

2.2.1 圖片生成引擎

AI 圖片生成服務 (DALL-E 3 / Midjourney API)
圖片品質檢測：自動過濾不當或低品質內容
批量處理佇列：非同步處理大量生成請求
生成參數優化：根據學習等級調整圖片風格

2.2.2 智能快取系統

語意快取：類似例句共享相同圖片
多層快取策略：記憶體 → 資料庫 → 檔案系統
快取失效機制：基於使用頻率和時間的清理
預生成策略：熱門詞彙預先生成圖片

2.2.3 儲存抽象層

public interface IImageStorageService
{
    Task<string> SaveImageAsync(Stream imageStream, string fileName);
    Task<string> GetImageUrlAsync(string imagePath);
    Task<bool> DeleteImageAsync(string imagePath);
    Task<StorageInfo> GetStorageInfoAsync();
}

// 實現類別
- LocalImageStorageService    // 開發環境
- CloudImageStorageService    // 生產環境
- HybridImageStorageService   // 混合策略

3. 資料庫設計

3.1 核心數據表結構

3.1.1 例句圖片表 (example_images)

CREATE TABLE example_images (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    relative_path VARCHAR(500) NOT NULL,      -- 圖片相對路徑
    alt_text VARCHAR(200),                    -- 圖片描述文字
    generation_prompt TEXT,                   -- AI 生成時的提示詞
    generation_provider VARCHAR(50),          -- 生成服務供應商
    file_size INTEGER,                        -- 檔案大小 (bytes)
    image_width INTEGER,                      -- 圖片寬度
    image_height INTEGER,                     -- 圖片高度
    content_hash VARCHAR(64) UNIQUE,          -- 內容雜湊值 (防重複)
    quality_score DECIMAL(3,2),               -- 品質評分 (0.00-1.00)
    moderation_status VARCHAR(20) DEFAULT 'pending', -- 審核狀態
    moderation_notes TEXT,                    -- 審核備註
    access_count INTEGER DEFAULT 0,           -- 存取次數統計
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

3.1.2 詞卡圖片關聯表 (flashcard_example_images)

CREATE TABLE flashcard_example_images (
    flashcard_id UUID REFERENCES flashcards(id) ON DELETE CASCADE,
    example_image_id UUID REFERENCES example_images(id) ON DELETE CASCADE,
    display_order INTEGER DEFAULT 1,         -- 顯示順序
    is_primary BOOLEAN DEFAULT false,        -- 是否為主要圖片
    context_relevance DECIMAL(3,2),          -- 語境相關度評分
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    PRIMARY KEY (flashcard_id, example_image_id)
);

3.1.3 圖片生成請求表 (image_generation_requests)

CREATE TABLE image_generation_requests (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID REFERENCES user_profiles(id) ON DELETE CASCADE,
    flashcard_id UUID REFERENCES flashcards(id) ON DELETE CASCADE,
    request_prompt TEXT NOT NULL,            -- 生成請求提示詞
    generation_status VARCHAR(20) DEFAULT 'pending', -- 狀態: pending/processing/completed/failed
    generated_image_id UUID REFERENCES example_images(id),
    error_message TEXT,                      -- 錯誤訊息
    cost_credits DECIMAL(10,4),              -- 消耗的積分成本
    processing_time_ms INTEGER,              -- 處理時間 (毫秒)
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    completed_at TIMESTAMP
);

3.2 索引優化策略

-- 查詢效能索引
CREATE INDEX idx_example_images_content_hash ON example_images(content_hash);
CREATE INDEX idx_example_images_access_count ON example_images(access_count DESC);
CREATE INDEX idx_flashcard_images_primary ON flashcard_example_images(flashcard_id, is_primary);
CREATE INDEX idx_generation_requests_status ON image_generation_requests(generation_status, created_at);

4. API 設計規範

4.1 核心 API 端點

4.1.1 生成例句圖片

POST /api/flashcards/{flashcardId}/generate-example-image
Authorization: Bearer {token}
Content-Type: application/json

Request Body:
{
  "prompt": "A business meeting scene where someone is bringing up a topic",
  "style": "cartoon|realistic|minimal",     // 圖片風格
  "priority": "normal|high|low",           // 生成優先級
  "dimensions": {
    "width": 512,
    "height": 512
  },
  "additionalContext": {                   // 額外語境資訊
    "difficultyLevel": "B1",
    "scenario": "business",
    "learnerPreferences": ["visual", "colorful"]
  }
}

Response:
{
  "success": true,
  "data": {
    "requestId": "uuid",
    "status": "processing|completed",
    "estimatedTimeMinutes": 2,
    "imageUrl": "https://cdn.dramaling.com/images/examples/uuid.png", // 完成後才有
    "costCredits": 1.5,
    "queuePosition": 3                     // 佇列中的位置
  }
}

4.1.2 獲取圖片生成狀態

GET /api/image-generation/requests/{requestId}/status
Authorization: Bearer {token}

Response:
{
  "success": true,
  "data": {
    "status": "completed",
    "imageUrl": "https://cdn.dramaling.com/images/examples/uuid.png",
    "qualityScore": 0.95,
    "alternativeImages": [                 // 同時生成的其他選項
      {
        "imageUrl": "https://cdn.dramaling.com/images/examples/uuid-alt1.png",
        "qualityScore": 0.87
      }
    ],
    "completedAt": "2025-09-24T10:30:00Z"
  }
}

4.1.3 批量管理例句圖片

GET /api/admin/example-images
Authorization: Bearer {adminToken}
Query Parameters:
- status: pending|approved|rejected
- provider: dalle3|midjourney
- qualityScore: 0.8+ (minimum score)
- dateFrom: 2025-09-01
- dateTo: 2025-09-30
- page: 1
- pageSize: 50

Response:
{
  "success": true,
  "data": {
    "images": [...],
    "pagination": {
      "currentPage": 1,
      "totalPages": 10,
      "totalCount": 487
    },
    "statistics": {
      "pendingCount": 23,
      "approvedCount": 450,
      "rejectedCount": 14,
      "averageQualityScore": 0.89
    }
  }
}

5. 用戶體驗設計

5.1 互動流程設計

5.1.1 主要使用流程

1. 用戶在詞卡頁面點擊「生成例句圖」
   ↓
2. 系統檢查現有圖片：
   - 有圖片 → 直接顯示
   - 無圖片 → 進入生成流程
   ↓
3. 圖片生成流程：
   - 顯示生成中動畫 (預估 1-3 分鐘)
   - 提供取消選項
   - 實時更新進度狀態
   ↓
4. 生成完成：
   - 自動刷新顯示新圖片
   - 提供「重新生成」選項
   - 收集用戶滿意度回饋

5.1.2 錯誤處理與回退機制

生成失敗處理：
├── 網路錯誤 → 自動重試 3 次
├── AI 服務限制 → 提示稍後再試
├── 內容不當 → 顯示預設圖片
└── 積分不足 → 引導購買或升級

5.2 視覺設計規範

5.2.1 圖片容器設計

.example-image-container {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--border-color);
  background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
}

.loading-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: var(--loading-bg);
}

.generate-button {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

5.2.2 載入動畫設計

初始載入：脈衝效果，顯示 "正在生成圖片..."
處理中：進度條，顯示預估剩餘時間
完成：淡入效果，圖片平滑顯示

6. 技術實現細節

6.1 AI 圖片生成整合

6.1.1 提示詞優化策略

public class PromptBuilder
{
    public string BuildPrompt(Flashcard flashcard)
    {
        var basePrompt = $"Create an educational illustration for the English word '{flashcard.Word}'";
        var context = $"Context: {flashcard.Example}";
        var style = GetStyleForDifficulty(flashcard.DifficultyLevel);
        var constraints = "Style: clean, educational, appropriate for language learning";

        return $"{basePrompt}. {context}. {style}. {constraints}";
    }

    private string GetStyleForDifficulty(string level)
    {
        return level switch
        {
            "A1" or "A2" => "Simple cartoon style with bright colors",
            "B1" or "B2" => "Semi-realistic style with clear details",
            "C1" or "C2" => "Realistic style with nuanced visual elements",
            _ => "Balanced educational illustration"
        };
    }
}

6.1.2 品質檢測機制

public class ImageQualityValidator
{
    public async Task<QualityResult> ValidateAsync(Stream imageStream)
    {
        var results = await Task.WhenAll(
            CheckImageClarity(imageStream),
            CheckContentAppropriateness(imageStream),
            CheckEducationalRelevance(imageStream)
        );

        return new QualityResult
        {
            OverallScore = results.Average(r => r.Score),
            Issues = results.SelectMany(r => r.Issues).ToList(),
            Approved = results.All(r => r.Score >= 0.7)
        };
    }
}

6.2 儲存服務實現

6.2.1 環境配置

// appsettings.Development.json
{
  "ImageStorage": {
    "Provider": "Local",
    "Local": {
      "BasePath": "wwwroot/images/examples",
      "BaseUrl": "https://localhost:5001/images/examples",
      "MaxFileSize": 5242880,  // 5MB
      "AllowedFormats": ["png", "jpg", "webp"]
    }
  }
}

// appsettings.Production.json
{
  "ImageStorage": {
    "Provider": "AWS",
    "AWS": {
      "BucketName": "dramaling-example-images",
      "Region": "ap-northeast-1",
      "CDNDomain": "https://cdn.dramaling.com",
      "AccessKeyId": "{from-environment}",
      "SecretAccessKey": "{from-environment}"
    }
  }
}

6.2.2 儲存服務實現

public class ImageStorageFactory
{
    public static IImageStorageService Create(IConfiguration config, ILogger logger)
    {
        var provider = config["ImageStorage:Provider"];

        return provider.ToLower() switch
        {
            "local" => new LocalImageStorageService(config, logger),
            "aws" => new AwsImageStorageService(config, logger),
            "azure" => new AzureImageStorageService(config, logger),
            _ => throw new NotSupportedException($"Storage provider '{provider}' not supported")
        };
    }
}

7. 成本控制與優化策略

7.1 智能成本管理

7.1.1 積分系統設計

新用戶：免費 10 張圖片生成額度
基礎用戶：每月 50 張額度
進階用戶：每月 200 張額度
企業用戶：無限制

7.1.2 生成優化策略

語意去重：檢測類似例句，共享圖片資源
批量處理：合併相似請求，降低 API 呼叫成本
離峰生成：非繁忙時段優先處理，降低服務成本
品質預篩：提示詞優化，提高首次生成成功率

7.2 快取策略優化

7.2.1 多層快取架構

L1: 記憶體快取 (1小時) → 最熱門圖片
L2: Redis 快取 (24小時) → 常用圖片
L3: 資料庫快取 (永久) → 所有已生成圖片
L4: CDN 快取 (30天) → 公共訪問圖片

7.2.2 預生成策略

熱門詞彙：基於學習統計，預先生成高頻詞彙圖片
新詞預測：AI 預測可能成為熱門的新詞彙
季節性內容：節慶、時事相關詞彙提前準備

8. 監控與分析指標

8.1 關鍵效能指標 (KPIs)

8.1.1 生成效能指標

生成成功率：目標 ≥ 95%
平均生成時間：目標 ≤ 90 秒
圖片品質評分：目標平均 ≥ 0.85
用戶滿意度：目標 ≥ 4.2/5.0

8.1.2 業務影響指標

學習效果提升：使用例句圖 vs 純文字的記憶測試對比
用戶參與度：有圖片詞卡的複習頻率 vs 無圖片詞卡
留存率影響：使用例句圖功能用戶的留存率提升
付費轉換：例句圖功能對付費訂閱的貢獻度

8.2 實時監控告警

8.2.1 系統健康監控

alerts:
  - name: high_generation_failure_rate
    condition: failure_rate > 0.1  # 10%失敗率告警
    duration: 5m
    action: slack_notification

  - name: slow_generation_time
    condition: avg_generation_time > 120s
    duration: 3m
    action: email_alert

  - name: storage_quota_warning
    condition: storage_usage > 0.85  # 85%容量告警
    action: admin_dashboard_alert

9. 開發里程碑與排程

9.1 Phase 1: 核心功能開發 (4-6 週)

Week 1-2: 基礎架構

資料庫 schema 設計與建立
儲存抽象層實現 (本地 + 雲端)
基礎 API 端點開發
AI 圖片生成服務整合

Week 3-4: 前端整合

詞卡頁面新增圖片生成功能
載入狀態與動畫實現
錯誤處理與用戶回饋機制
響應式設計適配

Week 5-6: 優化與測試

快取機制實現
批量處理佇列開發
單元測試與整合測試
效能測試與優化

9.2 Phase 2: 進階功能 (3-4 週)

Week 7-8: 智能優化

提示詞優化引擎
圖片品質自動檢測
語意去重機制
預生成策略實現

Week 9-10: 管理功能

管理後台圖片審核
成本統計與報表
用戶積分系統整合
監控告警系統

9.3 Phase 3: 上線與優化 (2-3 週)

Week 11-12: 生產部署

雲端儲存服務配置
CDN 設定與優化
生產環境部署測試
灰度發布與 A/B 測試

Week 13: 後續優化

用戶回饋收集與分析
效能調優與成本優化
新功能規劃
文檔完善與團隊培訓

10. 風險評估與應對策略

10.1 技術風險

10.1.1 AI 服務依賴風險

風險：第三方 AI 服務中斷或限制
機率：中等
影響：高
應對策略：
- 多供應商備援 (DALL-E 3 + Midjourney + Stable Diffusion)
- 離線 fallback 機制 (預設圖片庫)
- 服務降級策略 (優雅處理失敗)

10.1.2 儲存成本失控風險

風險：圖片儲存成本超出預算
機率：低
影響：中等
應對策略：
- 自動清理未使用圖片機制
- 壓縮與格式優化 (WebP)
- 儲存層級管理 (熱/溫/冷數據分層)

10.2 產品風險

10.2.1 用戶接受度風險

風險：用戶對 AI 生成圖片品質不滿意
機率：中等
影響：中等
應對策略：
- 提供手動上傳選項
- 多候選圖片讓用戶選擇
- 持續的品質改進機制

10.2.2 內容合規風險

風險：AI 生成不當內容
機率：低
影響：高
應對策略：
- 多層內容過濾機制
- 人工審核流程
- 用戶舉報與快速處理機制

11. 成功指標與驗證方式

11.1 量化成功指標

11.1.1 技術指標

圖片生成成功率 ≥ 95%
平均生成時間 ≤ 90 秒
系統可用性 ≥ 99.5%
圖片載入速度 ≤ 2 秒

11.1.2 業務指標

用戶對圖片品質滿意度 ≥ 4.2/5.0
使用例句圖功能的詞卡複習率提升 ≥ 30%
用戶留存率提升 ≥ 15%
功能使用率 ≥ 60% (活躍用戶中)

11.2 驗證方式

11.2.1 A/B 測試設計

測試組 A：使用例句圖功能的用戶
對照組 B：僅使用文字例句的用戶
測試指標：學習效果、用戶參與度、留存率
測試週期：4-6 週

11.2.2 用戶回饋收集

功能滿意度問卷調查
用戶訪談與深度回饋
應用商店評分變化追蹤
客服反饋問題分析

文檔版本資訊

版本：v1.0
創建日期：2025-09-24
最後更新：2025-09-24
負責人：產品開發團隊
審核狀態：待審核

本文檔將隨著開發進展持續更新，確保與實際實現保持同步。如有疑問或建議，請聯繫產品團隊。

18 KiB Raw Blame History Unescape Escape

例句圖生成功能產品需求規格書 (PRD)

1. 功能概述

1.1 產品目標

1.2 核心價值主張

1.3 目標用戶

2. 系統架構設計

2.1 雙環境架構策略

2.1.1 開發環境 (Development)

2.1.2 生產環境 (Production)

2.2 核心系統元件

2.2.1 圖片生成引擎

2.2.2 智能快取系統

2.2.3 儲存抽象層

3. 資料庫設計

3.1 核心數據表結構

3.1.1 例句圖片表 (example_images)

3.1.2 詞卡圖片關聯表 (flashcard_example_images)

3.1.3 圖片生成請求表 (image_generation_requests)

3.2 索引優化策略

4. API 設計規範

4.1 核心 API 端點

4.1.1 生成例句圖片

4.1.2 獲取圖片生成狀態

4.1.3 批量管理例句圖片

5. 用戶體驗設計

5.1 互動流程設計

5.1.1 主要使用流程

5.1.2 錯誤處理與回退機制

5.2 視覺設計規範

5.2.1 圖片容器設計

5.2.2 載入動畫設計

6. 技術實現細節

6.1 AI 圖片生成整合

6.1.1 提示詞優化策略

6.1.2 品質檢測機制

6.2 儲存服務實現

6.2.1 環境配置

6.2.2 儲存服務實現

7. 成本控制與優化策略

7.1 智能成本管理

7.1.1 積分系統設計

7.1.2 生成優化策略

7.2 快取策略優化

7.2.1 多層快取架構

7.2.2 預生成策略

8. 監控與分析指標

8.1 關鍵效能指標 (KPIs)

8.1.1 生成效能指標

8.1.2 業務影響指標

8.2 實時監控告警

8.2.1 系統健康監控

9. 開發里程碑與排程

9.1 Phase 1: 核心功能開發 (4-6 週)

Week 1-2: 基礎架構

Week 3-4: 前端整合

Week 5-6: 優化與測試

9.2 Phase 2: 進階功能 (3-4 週)

Week 7-8: 智能優化

Week 9-10: 管理功能

9.3 Phase 3: 上線與優化 (2-3 週)

Week 11-12: 生產部署

Week 13: 後續優化

10. 風險評估與應對策略

10.1 技術風險

10.1.1 AI 服務依賴風險

10.1.2 儲存成本失控風險

10.2 產品風險

10.2.1 用戶接受度風險

10.2.2 內容合規風險

11. 成功指標與驗證方式

11.1 量化成功指標

11.1.1 技術指標

11.1.2 業務指標

11.2 驗證方式

11.2.1 A/B 測試設計

11.2.2 用戶回饋收集

文檔版本資訊

18 KiB

Raw Blame History