挖得髮 (WowHair) - 淡江大學2024畢業專題佳作

🏆 淡江大學2024年大四畢業專題佳作作品

一個基於 AI 技術的虛擬髮型試換應用程式，讓用戶可以透過相機拍照或選擇照片來體驗不同的髮型效果。

📱 專案概述

「挖得髮」是淡江大學2024年大四畢業專題的作品，主要功能是讓用戶進行虛擬換髮體驗。用戶可以選擇作為顧客或設計師身份，瀏覽不同的髮型設計，並透過 AI 技術實時預覽換髮效果。

🎯 主要功能

• 雙重身份系統：支援顧客和髮型設計師兩種使用模式
• AI 換髮技術：使用 FaceFusion 技術進行即時髮型替換
• 相機整合：支援即時拍照和相冊選圖功能
• 設計師展示：設計師可以展示作品集和服務資訊
• 髮型推薦：根據性別提供男性和女性髮型推薦
• 預約系統：顧客可以預約設計師服務

🏗️ 技術架構

前端技術

• React Native - 跨平台行動應用框架
• Expo - React Native 開發平台
• TypeScript - 類型安全的 JavaScript 超集
• React Navigation - 應用導航管理

後端技術

• Node.js - 伺服器端 JavaScript 運行環境
• MySQL - 關聯式資料庫
• FaceFusion - AI 換臉/換髮技術

開發工具

• Expo CLI - Expo 命令列工具
• VS Code - 開發環境

🚀 安裝與設定

系統需求

確保您已安裝以下軟體：

• Node.js (v14 或更高版本)
• Git
• Expo CLI

安裝步驟

1. 複製專案

   git clone [您的倉庫URL]
   cd NEWNEW_ver4

2. 安裝依賴套件

   npm install

3. 啟動開發伺服器

   npx expo start

📱 在裝置上運行

iOS 裝置 (僅限 macOS)

1. 在終端機中按 i 鍵開啟 iOS 模擬器
2. 或參考 官方文件 在實體裝置上運行

Android 裝置

1. 在終端機中按 a 鍵開啟 Android 模擬器
2. 或參考 官方文件 在實體裝置上運行

📁 專案結構

NEWNEW_ver4/
├── App.tsx                 # 應用程式主入口
├── package.json           # 專案依賴和腳本
├── tsconfig.json          # TypeScript 配置
├── babel.config.js        # Babel 配置
├── eas.json              # Expo Application Services 配置
├── GlobalStyles.ts       # 全域樣式定義
├── assets/               # 靜態資源
│   ├── fonts/           # 字型檔案
│   └── *.png            # 圖片資源
├── components/           # 可重用元件
│   ├── Component.tsx
│   ├── Component1.tsx
│   └── DesignerORCustomer.tsx
└── screens/              # 應用程式畫面
    ├── StartPage.tsx         # 啟動頁面
    ├── MainPage.tsx          # 主頁面
    ├── LoginPage.tsx         # 登入頁面
    ├── CameraPage.tsx        # 相機頁面
    ├── AllDesigner.tsx       # 設計師列表
    ├── DesignerInfo.tsx      # 設計師資訊
    ├── DesignerRegister.tsx  # 設計師註冊
    ├── ExampleOfHairstyle.tsx # 髮型範例
    ├── WomensReconmmend.tsx  # 女性髮型推薦
    ├── MansReconmmend.tsx    # 男性髮型推薦
    └── PAULsReservation.tsx  # 預約頁面

🎨 主要功能介紹

1. 身份選擇

用戶可以選擇以顧客或設計師身份使用應用程式，享受不同的功能體驗。

2. 虛擬換髮

• 使用裝置相機拍攝照片
• 從相冊選擇現有照片
• AI 技術即時處理並顯示換髮效果

3. 設計師服務

• 設計師可以展示作品集
• 提供服務資訊和聯絡方式
• 顧客可以瀏覽並預約服務

4. 髮型推薦

• 根據性別分類的髮型推薦
• 豐富的髮型樣式選擇
• 即時預覽效果

🔧 開發說明

新增功能

1. 在 screens/ 目錄下創建新的畫面元件
2. 在 App.tsx 中註冊新的路由
3. 在 components/ 目錄下創建可重用元件

樣式管理

• 全域樣式定義在 GlobalStyles.ts
• 各元件有獨立的樣式定義
• 使用 React Native StyleSheet API

字型管理

• 自定義字型存放在 assets/fonts/
• 在 App.tsx 中載入字型
• 支援 Montaga 和 Inter 字型系列

🤝 貢獻指南

1. Fork 此專案
2. 創建功能分支 (git checkout -b feature/AmazingFeature)
3. 提交變更 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 開啟 Pull Request

📄 授權

此專題為淡江大學2024年大四畢業專題佳作「挖得髮」，僅供學術研究使用。

👨‍💻 作者

• 淡江大學資訊管理學系 - 2024年畢業專題
• 專題名稱: 挖得髮 (WowHair)

🏆 獲獎紀錄

• 淡江大學2024年大四畢業專題佳作 - 資訊工程學系

🙏 致謝

• 感謝淡江大學資訊管理學系指導教授的悉心指導
• 感謝淡江大學提供優質的學習環境和資源
• 感謝 FaceFusion 開源專案提供的 AI 技術支援
• 感謝 React Native 和 Expo 社群的技術支援
• 感謝評審委員對本專題的肯定與建議

---

注意: 此應用程式目前處於開發階段，部分功能可能尚未完全實現。如有任何問題或建議，歡迎提出 Issue。