剃亮希望 Shave for Hope

CCF 兒童癌病基金 AI 籌款活動專案計劃書

📋 技術開發計劃: [[2026-01-06-ccf-shave-for-hope-technical-plan]]

行政摘要 Executive Summary

剃亮希望 是一個創新的數碼籌款活動，運用 AI 技術讓支持者體驗「虛擬剃頭」，以此表達對癌症兒童的支持，並透過社交媒體分享來擴大籌款影響力。

核心價值主張

專案快覽

Head Shaving Day 2026 實體活動

活動目標

1. 提高社會關注 - 透過「剃亮希望」社交活動吸引公眾參與
2. 推廣實體活動 - 宣傳 Head Shaving Day 2026
3. 鼓勵捐款 - 引導用戶設定籌款目標並捐款支持 CCF

Demo 展示

首頁 - AI 光頭變身前後對比

光頭變身頁面 - 照片上載介面

體驗連結

用戶旅程 User Journey

Flow A: 訪客用戶 (無需登入)

flowchart TD
    subgraph ANONYMOUS["🌐 訪客用戶流程"]
        A[🏠 首頁] --> B[查看示範]
        B --> C{點擊<br/>'開始變身'}
        C --> D[📸 變身頁面]
        D --> E[上載照片]
        E --> F[⏳ AI 處理中<br/>2-5 秒]
        F --> G[✨ 查看結果]

        G --> H[📥 下載圖片]
        G --> I[📤 立即分享]

        I --> J[Instagram]
        I --> K[WhatsApp]
        I --> L[Facebook]

        J --> X[🎉 感謝頁面<br/>支持剃亮希望！]
        K --> X
        L --> X
        H --> X

        X --> M{💡 想製作影片？<br/>捐款 $50 解鎖！}

        M -->|是| N[前往註冊 + 捐款]
        M -->|否| O[結束]
    end

    style X fill:#F5A623
    style Z fill:#4A90D9

Flow B: 註冊用戶 (Virtual Shaver)

flowchart TD
    subgraph SIGNUP["🔐 註冊流程"]
        A[訪客 CTA] --> B[登入頁面]
        B --> C{選擇方式}
        C -->|Google| D[🔵 Google 登入]
        C -->|Email| E[📧 電郵註冊]
        D --> F[首次登入?]
        E --> F
        F -->|是| G[完成資料<br/>顯示名稱 必填<br/>其他 選填]
        F -->|否| H[控制台]
        G --> H
    end

    subgraph DASHBOARD["📊 用戶控制台"]
        H[控制台] --> I[查看統計]
        I --> J{動作}
        J -->|變身| K[新變身]
        J -->|影片| L[製作影片]
        J -->|設定| M[編輯資料]
    end

    subgraph VIDEO["🎬 影片製作 (需捐款 ≥$50)"]
        L --> L1{已捐款<br/>≥$50?}
        L1 -->|否| L2[💳 PayMe 捐款<br/>最低 HK$50]
        L2 --> L3[⏳ 驗證捐款...]
        L3 --> L4{驗證成功?}
        L4 -->|是| N
        L4 -->|否| L5[❌ 重試]
        L5 --> L2
        L1 -->|是| N[選擇語言<br/>廣東話 / English]
        N --> O[確認製作]
        O --> P[⏳ 製作中<br/>30秒 - 6分鐘]
        P --> Q[✅ 影片完成]
        Q --> R[🎥 預覽影片]
        R --> S[📥 下載]
        R --> T[📤 分享]
        T --> U[🎉 感謝頁面]
        U --> X[結束]
    end

完整用戶旅程

flowchart LR
    subgraph ENTRY["入口"]
        A1[社交媒體]
        A2[直接訪問]
        A3[朋友分享]
    end

    subgraph ANONYMOUS["訪客"]
        B[首頁] --> C[變身]
        C --> D[分享圖片]
        D --> X[感謝頁面]
    end

    subgraph REGISTERED["註冊用戶"]
        E[註冊] --> F[資料]
        F --> G[控制台]
        G --> H[製作影片]
        H --> I[分享影片]
    end

    subgraph CONVERSION["轉化"]
        J[捐款 CCF]
        K[參與活動<br/>3月7日]
    end

    A1 --> B
    A2 --> B
    A3 --> B

    X --> J
    X -->|CTA| E
    I --> J
    I --> K

    style X fill:#F5A623
    style J fill:#4A90D9

新增功能 New Features (5 Jan 2026 Update)

🎬 影片製作功能 (Video Generation)

• 技術: Google Gemini Veo 3.1
• 內容: 用戶照片從「有頭髮」優雅變身至「光頭」
• 語音: 用戶可選擇廣東話或英語
  • 廣東話: 「剃亮希望。我支持！」
  • English: “Shave for Hope. I support!”
• 時長: 約 8 秒
• 對象: 已捐款 HK$50 或以上的註冊用戶

💳 捐款驗證機制 (Donation Verification)

• 最低金額: HK$50
• 支付方式: PayMe for Business (主要)
• 驗證方式: Webhook + Donation ID 連結
• 流程: 用戶登入 → 點擊製作影片 → 確認捐款 → PayMe 付款 → Webhook 驗證 → 解鎖影片製作

👤 用戶分級

📝 註冊資料

社群分享功能 Community Gallery (6 Jan 2026)

首頁新增「社群分享」區塊，展示 #shaveforhopehk Instagram 貼文，取代原有的排行榜功能。

功能特色

技術實現

src/components/community-gallery.tsx    # 畫廊組件
src/lib/firebase/instagramPostsServer.ts # 伺服器端資料獲取
src/app/api/seed-demo-posts/route.ts     # 管理 API
scripts/upload-ig-images.ts              # 圖片上傳腳本

資料結構 (Firestore: instagramPosts)

{
  postUrl: "https://instagram.com/p/ABC123/",
  igUsername: "username",
  mediaUrl: "firebase_storage_url",
  mediaType: "image", // or "video"
  caption: "貼文內容...",
  postedAt: timestamp,
  harvestedAt: timestamp,
  matchedUserId: null, // 如配對到用戶則填入 userId
  source: "manual" // or "scraper"
}

成功指標 KPIs

用戶漏斗模型 User Funnel Model

籌款預測 Fundraising Projection

第一階段目標 (首 3 個月)

長期價值

• 建立可重複使用的數碼籌款平台
• 累積支持者數據庫
• 創造病毒式傳播潛力

GCP 成本預算 GCP Cost Projection

AI 圖片生成成本 (Gemini 2.5 Flash @ $0.14/image)

AI 影片生成成本 (Veo 3 Fast @ $0.15/sec × 8s = $1.20/video)

Firebase 基礎設施成本 (3 個月)

GCP 總成本摘要

投資回報分析 ROI Analysis

專案時間表 Timeline

風險評估與緩解 Risk Assessment

品牌與設計規範

社交分享模板

我為希望剃頭！🎗️ 支持兒童癌病基金

立即參與：[APP_LINK]

#shaveforhopehk #剃亮希望 #兒童癌病基金

下一步行動 Next Steps

需要 CCF 配合事項

• 確認品牌使用授權 (Logo、顏色、名稱)
• 提供官方捐款頁面連結整合方式
• 指定項目聯絡人
• 審批活動條款與私隱政策
• 提供新 GCP 專案憑證
• 確認 Head Shaving Day 活動詳情

開發團隊待辦事項

已完成 ✅

• 實現用戶登入系統 (Google OAuth + Email)
• 實現社交分享功能 (IG, WhatsApp, FB)
• 社群分享畫廊 (Community Gallery) - 8 張 IG 貼文
• 用量限制系統 (每日/每週/終身配額) - 1月7日
• 匿名用戶配額控制 (伺服器端驗證) - 1月7日
• 改善註冊流程 - AI 處理期間即時註冊 - 1月7日
• 公開用戶主頁 /u/[userId] - 顯示變身記錄及 IG 貼文
• 用戶控制台 Dashboard - 統計、變身記錄、影片製作入口
• Master Concept 品牌標誌整合
• 圖片優化系統 (85% 檔案大小節省) - 1月9日
• Firebase Storage DLC (訪客圖片 7天→歸檔→90天刪除) - 1月9日
• 統計追蹤系統 (用戶/圖片/分享數據) - 1月9日
• OG 縮圖優化 (1200x630, WhatsApp/FB 預覽) - 1月9日
• 手機相機支援 (前後鏡頭切換) - 1月9日
• Instagram 分享優化 (Web Share API + 下載) - 1月9日

進行中 🔄

• 開發影片製作功能 (Veo 3.1) - 程式碼已完成，等待 API 配額測試
• 新增雙語支援 - 影片語音已支援廣東話/英語，UI 翻譯待完成
• PayMe 捐款驗證整合 - 影片製作需捐款 ≥$50 解鎖

待開始 ⏳

• PayMe for Business API 整合 - Webhook + Donation ID 連結
• 捐款狀態 UI - 顯示捐款記錄、解鎖狀態
• 設定正式網域 (建議: shaveforhope.ccf.org.hk)
• 整合 CCF 官方捐款系統
• 設計 Instagram 分享圖片模板（加入 CCF 標誌）
• 上線前安全審查
• 設定 Google Analytics 追蹤
• IG 貼文自動爬蟲 (每 4 小時執行)

技術附錄 Technical Appendix

以下內容供開發團隊參考

技術架構

前端

• 框架: Next.js 15 + Tailwind CSS
• 語言: TypeScript
• UI 組件: Shadcn/ui

後端 (Firebase)

• 驗證: Firebase Authentication (Google、電郵)
• 資料庫: Cloud Firestore
• 儲存: Firebase Storage (相片、影片)
• 託管: Firebase App Hosting

AI 模型

• 圖片變身: gemini-2.5-flash-image-preview
• 影片製作: veo-3.1 (Google Gemini)
• 功能: 人像照片 → 光頭變身 → 影片製作

資料結構

用戶資料 (Firestore: users)

{
  displayName: "用戶名稱",
  email: "user@example.com",
  avatar: "url",
  instagramHandle: "@username",
  language: "zh", // or "en"
  createdAt: timestamp,
  fundraisingTarget: 5000,  // HKD (選填)
  personalStory: "支持原因...", // (選填)

  // 捐款狀態 (新增)
  donationStatus: "verified", // "none" | "pending" | "verified"
  totalDonated: 100,          // HKD 累計捐款金額
  videoUnlocked: true,        // 是否已解鎖影片製作 (≥$50)
  lastDonationAt: timestamp
}

捐款記錄 (Firestore: donations)

{
  donationId: "D00059848",           // 系統生成的 Donation ID
  userId: "user_id",
  amount: 100,                        // HKD
  paymentMethod: "payme",             // "payme" | "credit_card" | "fps"
  paymeOrderId: "65fdc085-...",       // PayMe Transaction ID
  status: "verified",                 // "pending" | "verified" | "failed"
  walletIndicator: "7ad077b9...",     // PayMe 用戶 hash (用於識別回頭客)
  createdAt: timestamp,
  verifiedAt: timestamp
}

變身記錄 (Firestore: transformations)

{
  userId: "user_id",
  originalImageUrl: "firebase_storage_url",
  transformedImageUrl: "firebase_storage_url",
  videoUrl: "firebase_storage_url", // 選填
  videoStatus: "completed", // pending, processing, completed, failed
  videoLanguage: "cantonese", // or "english"
  createdAt: timestamp,
  shareCount: 15
}

頁面結構

Note: /leaderboard 已移除 - 由首頁「社群分享」取代，顯示 #shaveforhopehk Instagram 貼文

系統限制

註冊用戶配額

匿名訪客配額

其他限制

Note: 配額每日於香港時間午夜重置，每週於星期一午夜重置

儲存架構 Storage Architecture (1月9日)

Firebase Storage 路徑

圖片優化

成本節省: 85% (從 ~1.9MB 降至 ~300KB)

數據生命週期 (DLC)

開發資源連結

#project #ccf #firebase-studio #fundraising #charity #ai-image-generation