# ThreeDstyle

**Repository Path**: xiao-lving/three-dstyle

## Basic Information

- **Project Name**: ThreeDstyle
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-05
- **Last Updated**: 2026-05-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# META FIT — AI 虚拟穿搭实验室

> **2026 HarmonyOS 创新赛 · 极客赛道 参赛作品**

---

## 一、作品概述

**META FIT** 是一款基于 HarmonyOS NEXT (API 24 / HarmonyOS 6.0) 原生开发的 AI 虚拟试穿应用。用户仅需上传一张人物照片和一张服装照片（或在 8 大预设风格中任选其一），即可借助火山引擎豆包大模型的视觉理解与图像生成能力，在云端完成服装语义识别与高保真图像融合，实时返回逼真的换装效果图。作品深度融合了 ArkTS 声明式 UI、状态管理 V2、系统分享框架等 HarmonyOS 核心能力，致力于打造"所见即所穿"的下一代消费级 AI 体验。

| 项目 | 内容 |
|---|---|
| 作品名称 | META FIT |
| 赛道 | 极客赛道 |
| 应用包名 | `com.fashion.myapplication` |
| 目标 SDK | API 24 (HarmonyOS 6.0 / 6.0.2) |
| 设备类型 | Phone |
| 开发语言 | ArkTS (TypeScript) |
| AI 模型 | 豆包 Seed-1.6-Vision + Seedream 4.0 |
| AI 平台 | 火山引擎方舟 |

---

## 二、创作背景与解决痛点

### 2.1 行业痛点

- **线上购衣退货率高**：用户无法试穿，仅凭模特图判断，导致"买家秀与卖家秀"的巨大落差
- **穿搭决策耗时长**：用户需要在海量单品中脑补搭配效果，决策疲劳严重
- **虚拟试穿门槛高**：传统 3D 建模方案成本高、体验重，无法规模化落地

### 2.2 META FIT 的解法

借助 HarmonyOS 的原生系统能力与豆包大模型的多模态理解+图像生成能力，META FIT 实现了**零建模、纯视觉驱动的 AI 换装**——用户无需任何专业操作，拍照即生成。同时借助 HarmonyOS 的系统分享面板，实现一键分发至社交平台或保存至本地图库，闭环从"看到衣服"到"我穿上它"的完整链路。

---

## 三、核心功能矩阵

### 3.1 启动体验

| 功能 | 描述 |
|---|---|
| 品牌闪屏 SplashPage | Logo 渐入 + 光晕呼吸 + 缩放动画 → 自动跳转首页，营造科技品牌仪式感 |

### 3.2 首页导航

| 功能 | 描述 |
|---|---|
| 3D 粒子动画背景 | 24 个分层粒子（近/中/远景）以独立轨道运行，配合双呼吸光晕，营造沉浸式科技视觉 |
| 融合穿搭入口 | 人物+服装双图 AI 融合，支持穿搭描述自由输入 |
| 风格实验室入口 | 8 大预设风格 + 自定义风格，一键 AI 换装 |

### 3.3 AI 融合穿搭 (FittingRoomPage)

| 功能 | 描述 |
|---|---|
| 照片选取 | 调用系统 PhotoViewPicker 选取人物照和服装照 |
| 穿搭描述输入 | 自由文本输入（如"商务风、深灰西装"），覆盖默认 Prompt |
| AI 语义识别 | 豆包 Vision 模型分析服装特征（款式/颜色/材质/领型） |
| 图像融合生成 | Seedream 4.0 双图融合，返回高保真换装效果图 |
| 进度可视化 | 5 步管道动画 + 双环旋转 + 脉冲缩放 + 百分比进度条 |
| 3D 卡片结果展示 | 渐变背景板 + 发光边框 + 标签徽章 |
| 全屏图片预览 | 点击任意图片进入全屏沉浸预览 |
| 系统分享面板 | 通过 @kit.ShareKit 唤起系统原生分享 → 保存至图库/分享至社交应用 |

### 3.4 风格实验室 (StylePage)

| 功能 | 描述 |
|---|---|
| 8 大风格矩阵 | 日常 / 潮流 / 国风 / 甜酷 / 极简 / 复古 / 小众 / 自定义 |
| 风格详情展示 | 关键词标签 + 风格描述文案 |
| 补充细节描述 | 自由文本输入，覆盖风格默认值（如"换成黑色皮衣、加一条腰带"） |
| AI 风格转换 | Seedream 4.0 单图风格生成，保持人物面部/姿态/背景不变 |
| 3D 结果展示 + 系统分享 | 同上 |

### 3.5 数字藏品海报 (SharePoster)

| 功能 | 描述 |
|---|---|
| 专属凭证生成 | 赛博朋克风格数字藏品海报，含穿搭名/用户ID/时间戳 |
| 社交传播 | 可截图分享至社交平台，增强作品传播属性 |

---

## 四、技术架构

```
┌──────────────────────────────────────────────────────┐
│                    UI Layer (ArkTS)                   │
│  SplashPage  HomePage  FittingRoomPage  StylePage    │
│  SharePoster  GenerationOverlay  TopNavBar           │
├──────────────────────────────────────────────────────┤
│              State Management (API 24 V2)            │
│  @ComponentV2  @Local  @Param  @Computed            │
│  @ObservedV2 + @Trace (深层嵌套对象观测)              │
├──────────────────────────────────────────────────────┤
│                   Service Layer                       │
│  ┌─────────────────────┐ ┌─────────────────────────┐ │
│  │ AIGenerationService │ │ ImageFusionService      │ │
│  │ 融合任务调度/状态管理 │ │ 图片压缩/Seedream管道    │ │
│  └─────────────────────┘ └─────────────────────────┘ │
│  ┌─────────────────────┐ ┌─────────────────────────┐ │
│  │ PhotoPickerService  │ │ SharePoster Service     │ │
│  │ 系统相册选取封装      │ │ 分享/文件IO/UTD         │ │
│  └─────────────────────┘ └─────────────────────────┘ │
├──────────────────────────────────────────────────────┤
│             AI API Layer (火山引擎方舟)               │
│  doubao-seed-1-6-vision-250428 (多模态视觉理解)       │
│  doubao-seedream-4.0 (文生图/图生图/图像编辑)          │
├──────────────────────────────────────────────────────┤
│              HarmonyOS System Kit                    │
│  ┌──────────┐ ┌──────────┐ ┌────────────────────┐   │
│  │ @kit     │ │ @kit     │ │ @kit               │   │
│  │ ShareKit │ │ ArkUI    │ │ CoreFileKit        │   │
│  │ 系统分享  │ │ 声明式UI  │ │ fileIo / fileUri   │   │
│  └──────────┘ └──────────┘ └────────────────────┘   │
│  ┌──────────┐ ┌──────────┐ ┌────────────────────┐   │
│  │ @kit     │ │ @kit     │ │ @kit               │   │
│  │ ImageKit │ │ NetworkKit│ │ MediaLibraryKit    │   │
│  │ 图像压缩  │ │ HTTP请求  │ │ 相册权限/选取       │   │
│  └──────────┘ └──────────┘ └────────────────────┘   │
└──────────────────────────────────────────────────────┘
```

---

## 五、HarmonyOS 特性运用

### 5.1 状态管理 V2 深度应用

| 特性 | 应用场景 |
|---|---|
| `@ComponentV2` | 所有自定义组件 |
| `@Local` | 组件内部响应式状态（photoUri, resultDataUri, progress 等） |
| `@Param` | 父子组件数据传递（GenerationOverlay / SharePoster 等） |
| `@Computed` | 派生状态计算（canGenerate, showingResult, progressWidth 等） |
| `@ObservedV2 + @Trace` | AppState 深层嵌套对象自动观测 |
| `@Builder` | 列表项复用构建 |

### 5.2 Kit 模块深度集成

| Kit | 用途 |
|---|---|
| `@kit.ShareKit` | 系统分享面板：SharedRecord → SharedData → ShareController.show() |
| `@kit.ArkData` | 统一数据类型 UTD (`UniformDataType.JPEG`) |
| `@kit.CoreFileKit` | 沙箱文件读写 (`fileIo`) + 沙箱路径转文件URI (`fileUri.getUriFromPath`) |
| `@kit.MediaLibraryKit` | 系统相册选取 (`PhotoViewPicker`) |
| `@kit.ImageKit` | 图像压缩 (`ImageSource` → `PixelMap` → `ImagePacker`) |
| `@kit.NetworkKit` | HTTP POST 调用火山引擎 API (`http.createHttp`) |
| `@kit.ArkUI` | 声明式 UI 构建 + Toast 提示 |
| `@kit.PerformanceAnalysisKit` | 日志追踪 (`hilog`) |
| `@kit.ArkTS` | Base64 编解码 (`util.Base64Helper`) |

### 5.3 动画与视觉

- **声明式动画**：`animateTo()` 驱动闪屏 Logo 缩放/淡入/淡出
- **循环帧动画**：`setInterval(40ms)` + `@Local animPhase` 驱动 24 粒子独立轨道运动
- **呼吸光晕**：`@Computed` 计算 `Math.sin()` 动态透明度 + `blur()` 高斯模糊
- **3D 层级**：粒子按速度/模糊度分近中远三层模拟景深
- **统一色彩系统**：赛博朋克 cyan/purple 双色体系，所有页面一致

---

## 六、AI 能力集成说明

### 6.1 模型选型

| 环节 | 模型 | 用途 |
|---|---|---|
| 服装语义识别 | `doubao-seed-1-6-vision-250428` | 多模态视觉模型，输入服装图片，输出 15 字中文服装描述 |
| 图像融合/风格生成 | `doubao-seedream-4.0` | 图像编辑模型，输入人物图+服装图/风格描述，输出融合结果 |

### 6.2 融合管道解析

```
人物原图 ──→ compressUri(1024px) ──→ base64 ──┐
                                                 ├─→ Seedream 4.0 ──→ 融合结果
服装原图 ──→ compressUri(512px)  ──→ base64 ──┤         ↑
                                                    describeClothes()
                                                         ↓
                                                  服装语义文本
                                                    + 用户穿搭描述
```

### 6.3 Seedream Prompt 策略

- **双图融合**：`"Put the reference clothing onto this person. Keep face, identity, expression, skin tone, hair, pose, and background EXACTLY the same. Only modify the clothing area."`
- **风格转换**：`"Change this person's entire outfit to [风格名] style. Keep face, identity, skin tone, hair, body pose, and background EXACTLY the same. Only change clothing, accessories, and footwear."`
- **用户覆盖**：`"User specific requirements (these override style defaults): [用户输入]"`

---

## 七、系统权限声明

| 权限 | 用途说明 |
|---|---|
| `ohos.permission.INTERNET` | HTTP 调用火山引擎 AI API |
| `ohos.permission.READ_MEDIA` | 从系统相册读取用户照片 |
| `ohos.permission.WRITE_MEDIA` | 保存生成结果至系统相册 |
| `ohos.permission.CAMERA` | 拍照获取人物/服装照片（预留） |

---

## 八、项目文件结构

```
META_FIT/
├── AppScope/
│   ├── app.json5                 # 应用全局配置
│   └── resources/                # 应用图标/启动图
├── entry/
│   └── src/main/
│       ├── ets/
│       │   ├── common/constants/
│       │   │   ├── AppColors.ets           # 全局色彩系统
│       │   │   └── AppDimensions.ets       # 尺寸常量
│       │   ├── components/
│       │   │   ├── TopNavBar.ets           # 顶部导航栏
│       │   │   ├── GenerationOverlay.ets   # AI生成进度覆盖层
│       │   │   ├── SharePoster.ets         # 数字藏品海报
│       │   │   ├── ClothesCard.ets         # 服装卡片
│       │   │   ├── UploadButton.ets        # 上传按钮
│       │   │   └── ViewAngleButton.ets     # 视角切换按钮
│       │   ├── models/
│       │   │   ├── AppState.ets            # 全局状态模型 (@ObservedV2)
│       │   │   ├── ClothesItemModel.ets    # 服装数据模型
│       │   │   └── ViewAngle.ets           # 视角枚举
│       │   ├── pages/
│       │   │   ├── SplashPage.ets          # 品牌闪屏页
│       │   │   ├── HomePage.ets            # 首页(3D粒子背景)
│       │   │   ├── FittingRoomPage.ets     # AI融合穿搭页
│       │   │   └── StylePage.ets           # 风格实验室页
│       │   ├── services/
│       │   │   ├── AIGenerationService.ets  # AI融合调度引擎
│       │   │   ├── ImagePipeline.ets        # Seedream图像管道
│       │   │   ├── PhotoPickerService.ets   # 系统相册选取
│       │   │   └── ImageSegmentationService.ets  # 图像分割服务
│       │   ├── entryability/
│       │   │   └── EntryAbility.ets
│       │   └── entrybackupability/
│       │       └── EntryBackupAbility.ets
│       ├── module.json5            # 模块配置
│       └── resources/              # 字符串/颜色/媒体资源
├── hvigor/                         # 构建配置
├── build-profile.json5             # 签名/编译配置
├── oh-package.json5                # 依赖清单
└── README.md                       # 本文件
```

---

## 九、创新点总结

| 维度 | 创新点 |
|---|---|
| **AI 原生** | 火山引擎豆包大模型全链路集成（视觉理解+图像生成），零建模 AI 换装 |
| **系统深度集成** | @kit.ShareKit 系统分享面板、UTD 统一数据类型、fileUri 沙箱映射 |
| **状态管理 V2** | @ObservedV2 + @Trace 深层嵌套观测，无需逐层 @ObjectLink |
| **3D 视觉体验** | 24 粒子分层轨道动画 + 双呼吸光晕，纯声明式驱动，无 Canvas 开销 |
| **全屏预览** | 点击任意图片进入沉浸式预览，支持手势交互 |
| **8 风格+自定义** | 预设 8 种穿搭风格 + 自由文本覆盖，满足个性化需求 |
| **系统分享闭环** | 生成→分享面板→保存至图库/社交分发，完整闭环 |
| **代码架构** | 单例服务层 + 声明式 UI + V2 状态管理，清晰分层 |

---

## 十、构建与运行

### 环境要求

- DevEco Studio 5.0+ (支持 API 24)
- HarmonyOS NEXT SDK 6.0.2 (API 24)
- 火山引擎方舟 API Key（需自行申请）

### 构建步骤

1. 在 DevEco Studio 中打开项目
2. 在 `FittingRoomPage.ets` / `StylePage.ets` 的 `aboutToAppear()` 中填入火山引擎 API Key
3. 选择 `Release` 构建模式（Unsigned），生成未签名 hap
4. 安装至 HarmonyOS NEXT 设备运行

### 依赖

```json5
{
  "devDependencies": {
    "@ohos/hypium": "1.0.25",
    "@ohos/hamock": "1.0.0"
  }
}
```

无第三方开源库依赖，全部使用 HarmonyOS 原生 Kit 模块。

---

## 十一、赛事提交清单

| # | 要求 | 状态 |
|---|---|---|
| 1 | 未签名 hap 包 | ⬜ 待构建（Release Unsigned 模式） |
| 2 | 演示及讲解视频（真人出镜, mp4） | ⬜ 待录制 |
| 3 | 作品介绍文档 | ✅ 本文档 |
| 4 | ZIP 压缩包 (≤200M) | ⬜ 待打包 |
| 5 | 命名: `2026 HarmonyOS 创新赛·极客赛道-META_FIT` | ⬜ 待命名 |

---

> **META FIT — 让 AI 替你试穿，所见即所穿。**
>
> Built with ❤️ on HarmonyOS NEXT