{"id":13603998,"url":"https://github.com/hi-our/hi-face","last_synced_at":"2025-04-11T22:32:22.418Z","repository":{"id":39024106,"uuid":"236683821","full_name":"hi-our/hi-face","owner":"hi-our","description":"Hi头像——让头像有趣一点。","archived":false,"fork":false,"pushed_at":"2023-03-05T12:12:56.000Z","size":24177,"stargazers_count":336,"open_issues_count":43,"forks_count":64,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-11-07T08:41:54.784Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.xiaoxili.com/hi-face","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hi-our.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-01-28T07:53:07.000Z","updated_at":"2024-10-22T10:53:44.000Z","dependencies_parsed_at":"2024-01-14T16:21:45.937Z","dependency_job_id":"77650b34-1f4e-4070-aa50-8cb6563aca69","html_url":"https://github.com/hi-our/hi-face","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hi-our%2Fhi-face","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hi-our%2Fhi-face/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hi-our%2Fhi-face/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hi-our%2Fhi-face/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hi-our","download_url":"https://codeload.github.com/hi-our/hi-face/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248489824,"owners_count":21112648,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T19:00:37.864Z","updated_at":"2025-04-11T22:32:19.980Z","avatar_url":"https://github.com/hi-our.png","language":"JavaScript","funding_links":[],"categories":["开源项目","JavaScript"],"sub_categories":["Taro2"],"readme":"# Hi头像\r\n\r\n让头像有趣一点\r\n\u003c!-- \r\n## 核心亮点\r\n\r\n| 特性        | 介绍                                  |\r\n| ----------- | ------------------------------------ |\r\n| 云开发      |基于腾讯云云开发，易部署、扩展性很好                                 |\r\n| 人工智能 | 基于腾讯云的人脸五官分析服务自动为头像戴皇冠、圣诞帽或口罩，支持多人识别 |\r\n| 多端运行 | 基于 Taro 打造，有微信小程序端和 Web 端 |\r\n| 用户体验好 | UI设计精美，易于操作，交互动画友好且动感 |\r\n| 部署文档详细 | 本项目的部署文档非常详细，详情请查看《[DEPLOYMENT](https://github.com/hi-our/hi-face/blob/master/DEPLOYMENT.md)》文档 |\r\n| 数据管理方便 | 使用 CloudBase CMS 管理数据，并贴心地给出初始化数据模型及默认数据 |\r\n| 前端工程化 | 核心配置已抽取，基于 Cloudbase Framework 完成云函数、Web 端 和小程序端部署|\r\n| 技术小册 | 独家拥有技术小册《**[从0到1开发一个智能头像识别小程序](https://www.xiaoxili.com/hi-face/docs/README.html)**》，详细说明 Hi 头像主要实现思路 | --\u003e\r\n\r\n\r\n## 功能体验\r\n\r\n小程序二维码\r\n\r\n![](https://image-hosting.xiaoxili.com/img/img/20200911/6f53bfa6573da16bec899f169fe58ae4-977c15.png)\r\n\r\nWeb 体验版：[https://face.xiaoxili.com](https://face.xiaoxili.com)\r\n\r\n**DEMO 体验版**\r\n前台功能：https://face-demo.xiaoxili.com\r\nCMS 数据体验：https://face-demo.xiaoxili.com/tcb-cms/\r\n账号： cmsAdmin\r\n密码： cmsAdmin123==\r\n\r\n如有问题，可以提 Issue\r\n请勿修改密码，上传敏感数据。环境数据可能会被清空，勿做私人使用。\r\n\r\n## 愿景\r\n\r\n### 使用场景\u0026目标用户\u0026背景\r\n\r\n在节日的时候，我们可以使用符合节日七夕的头像，比如在国庆节使用含国旗的头像表达对祖国的祝福；在圣诞节的时候，我们能给亲朋送一个带圣诞帽的头像传递快乐。\r\n\r\n### 需求分析\r\n\r\n在一些特定节日里，很多人尤其是年轻人喜欢新潮的头像，比如近几年的圣诞节，会有“@官方微信，送我一顶圣诞帽“的需求，对此，我们做这个小程序，来解决特定时候头像的制作。\r\n\r\n### 设计理念\r\n\r\n**标语：让头像有趣一点**\r\n\r\n「Hi头像」结合节日特点，微信头像进行智能化处理，让头像更加符合节日氛围。\r\n\r\n1、紧跟节日热点\r\n\r\n国庆节头戴国旗、圣诞节智能戴帽子，增加节日乐趣\r\n\r\n2、简单易操作\r\n\r\n不同于各类app的繁琐，小程序更简洁易操作\r\n\r\n3、乐于分享\r\n\r\n借助微信社交机制，头像处理后可以分享给好友或分享到朋友圈，展示头像成果\r\n\r\n### 用户画像\r\n\r\n20-35喜欢分享的年轻人\r\n\r\n### 作品效果图\r\n![](https://image-hosting.xiaoxili.com/img/img/20200921/6562b94a148b112a6c6b092821bee6f3-4768c7.png)\r\n![](https://image-hosting.xiaoxili.com/img/img/20200921/236e9b57e5c2a8ad170c1edada9c2724-149cab.png)\r\n\r\n### 产品介绍视频\r\n\r\n[Hi头像小程序介绍视频-完整版](https://v.qq.com/x/page/l3152qjx9e8.html)\r\n\r\n## 主创人员\r\n\r\n**小溪里，技术研发**\r\n\r\n个人网站：[https://www.xiaoxili.com](https://www.xiaoxili.com)\r\n\r\n公众号：小溪里\r\n\r\n\r\n**不二雪，UI设计**\r\n\r\n\u003c!-- 作品集地址：待补充 --\u003e\r\n\r\n公众号：不二诗旅\r\n\r\n## 技术栈\r\n* ❤️ UI侧 —— Taro，文档见 https://taro.jd.com/\r\n* ❤️ 服务 —— 云开发 CloudBase，文档见 https://docs.cloudbase.net/\r\n* ❤️ 部署 —— 基于 CloudBase Framework 完成小程序端、Web端、云函数、数据模型构建，官网见 https://cloudbase.net/framework.html\r\n* ❤️ 内容管理 —— 基于 CloudBase CMS 管理数据，文档见 https://docs.cloudbase.net/cms/intro.html\r\n\r\n\r\n## 部署文档\r\n\r\n本项目的部署文档非常详细，详情请查看《[DEPLOYMENT](https://github.com/hi-our/hi-face/blob/master/DEPLOYMENT.md)》文档。\r\n\r\n\r\n## RoadMap\r\n\r\n🚀 表示已经实现的功能，👷 表示进行中的功能，⏳ 表示规划中的功能，🏹 表示技术方案设计中的功能。\r\n\r\n| 功能                                                     | 状态      | 发布版本 |\r\n| -------------------------------------------------------- | --------- | -------- |\r\n| UI 重构、页面流程优化                                        | 🚀 已实现 | V2.0     |\r\n| 云函数合并，使用 `tcb-router` 进行路由匹配        | 🚀 已实现 | V2.0     |\r\n| 云函数优化，封装更完毕的错误处理信息        | ⏳ 规划中 | V3.0     |\r\n| 使用 `cloudbase-framework` 来发布 Web 端、云函数    | 🚀 已实现 | V2.0     |\r\n| 使用 `cloudbase-framework` 来部署小程序的预览、体验版      | 🚀 已实现 | V2.0     |\r\n| `Cloudbase CMS v1` 版数据模型快速生成集合字段      | 🚀 已实现  | V2.0     |\r\n| `Cloudbase CMS v2` 版数据模型快速生成集合字段及提供默认数据      | ⏳ 已实现  | V2.0     |\r\n| 贴纸编辑器调研      | 🏹 设计中  | V3.0     |\r\n| 小程序冷启动数据预加载      | 🏹 设计中  | V3.0     |\r\n| 海报换为 `canvas 2d` 版      | 🏹 设计中  | V3.0     |\r\n| Web 版云开发登录鉴权设计      | 🏹 设计中  | V3.0     |\r\n| 云环境共享调研      | 🏹 设计中  | V3.0     |\r\n| 更多的腾讯云人工智能服务      | 🏹 设计中  | V3.0     |\r\n\r\n\r\n\r\n## 贡献榜\r\n\r\n阅读我们的贡献指南，让我们一起建立一个更好的头像小程序。\r\n\r\n我们欢迎所有贡献。 请先阅读我们的 《[CONTRIBUTING.md](https://github.com/hi-our/hi-face/blob/master/https://github.com/hi-our/hi-face/blob/master/CONTRIBUTING.md.md)》。 您可以提交任何想法到[pull requests ](https://github.com/hi-our/hi-face/pulls)或[ GitHub issues](https://github.com/hi-our/hi-face/issues)。 如果您想改善代码，请查阅《[DEPLOYMENT](https://github.com/hi-our/hi-face/blob/master/DEPLOYMENT.md)》文档，祝您玩得愉快！ :)\r\n\r\n## 特别鸣谢\r\n\r\n从 v1到v2版迭代过程中，有4位同学参与了一些工作。\r\n\r\n\r\n* [王宝国](https://github.com/wangbaoguo88)：产品助理，撰写了 v1.0 的产品文档\r\n* [李欢](https://github.com/huan-x)：开发助理，编写了 v1.x 中原生小程序的人像魅力、图片标签等页面\r\n* [任乐乐](https://github.com/wolf-lang)、[康鸿](https://github.com/daxiakang)：协助 v2.0 版的功能测试\r\n* [忍者无敌](https://github.com/LoserTeach)：协助 v2.0 部署文档内容的补充\r\n\r\n若想贡献代码或者提供建议，请先查阅《[CONTRIBUTING](https://github.com/hi-our/hi-face/blob/master/https://github.com/hi-our/hi-face/blob/master/CONTRIBUTING.md.md)》文档。\r\n\r\n## 开发交流\r\n\r\n[官方交流微信群](https://github.com/hi-our/hi-face/issues/43)\r\n\r\n## 更新记录\r\n\r\n本项目遵从[Angular Style Commit Message Conventions](https://gist.github.com/stephenparish/9941e89d80e2bc58a153)，更新日志请查阅 《[CHANGELOG](https://github.com/hi-our/hi-face/blob/master/https://github.com/hi-our/hi-face/blob/master/CHANGELOG.md.md)》\r\n\r\n## 学习资源\r\n\r\n《**[从0到1开发一个智能头像识别小程序](https://www.xiaoxili.com/hi-face/docs/README.html)**》\r\n\r\n\u003e本技术小册基于Hi 头像 v1版本编写，v2 版本正在撰写中。\r\n\r\n从产品功能规划、技术选型到实战开发，全方位介绍基于小程序云开发来实现智能人像识别小程序，不仅能完成跨端开发，更能学习到当今炙手可热的 ServerLess 开发实战（即小程序与 Web 云开发），更能将高深的人工智能技术落地到真实项目中，甚至，我们还将探索如何将小程序与Web端完成前端工程化实践。\r\n\r\n**你会学到什么？**\r\n\r\n\r\n* 小程序云开发配置与开发技巧，亲历云开发的实战场景\r\n    * 基于 tcb-router 封装多功能的 API 服务\r\n    * 基于静态网站托管部署 Web 版\r\n    * 基于 CMS 内容管理系统来统一管理数据\r\n    * 基于 Cloudbase-Framework 来部署云函数、小程序和 Web 端\r\n* 体验及实战腾讯云人工智能特色功能，如人脸识别、五官分析、人像转换等\r\n* Taro 跨端使用技巧，在实战中了解Canvas在小程序与web端的差异，以及图片裁剪、压缩、上传的各种技术细节\r\n* 产品需求、项目规划的实战知识\r\n## 项目综述\r\n\r\n本项目在小程序和Web端使用 Taro 构建，功能服务基于[腾讯云云开发](https://www.cloudbase.net/)及腾讯云人工智能服务，使用 CMS 内容管理系统来管理数据，基于[Cloudbase Framework](https://github.com/TencentCloudBase/cloudbase-framework)完成小程序端、Web端、云函数端构建。\r\n\r\n## 架构图\r\n\r\n### 整体关系图\r\n\r\n![](https://image-hosting.xiaoxili.com/img/img/20200911/ba367852e79f4acfcbc15855adca3545-3ed2a1.png)\r\n\r\n### 页面间调用关系图\r\n\r\n在`taro/src`中，有以下文件\r\n\r\n```\r\n|-config.js 配置AppId、云环境Id及其它\r\n|-components 全局组件\r\n|-pages\r\n|-|- avatar-edit 头像编辑页\r\n|-|- avatar-poster 头像分享页\r\n|-|- theme-list 主题列表\r\n|-|- self 我的，含个人头像列表\r\n```\r\n\r\n![](https://image-hosting.xiaoxili.com/img/img/20200911/8eac43d66cafebcdd0eb76042f414572-e11a3a.png)\r\n\r\n### 头像编辑页流程图\r\n\r\n头像编辑是Hi 头像的主逻辑，下面这个流程图充分展示了从加载主题数据、到头像编辑、再到头像生成的完整流程。\r\n\r\nHi 头像功能以小程序端为主，功能齐全，而在 web端能制作头像并保存图片，暂不提供头像保存和分享功能。\r\n\r\n![](https://image-hosting.xiaoxili.com/img/img/20200917/19cd0697d023f9bb6f0836a1ee35a2dc-df21f2.png)\r\n\r\n### 五官分析时序图\r\n\r\nv1版中使用图示“第五版”时序图来完成主逻辑，而v2版中使用“第六版”时序图，这两者差异点就是基于已有服务来完成功能，更容易初学者掌握。\r\n\r\n![](https://image-hosting.xiaoxili.com/img/img/20200917/c4ea86ffa18c6bead6cffa6a76d9b926-f19204.png)\r\n\r\n### 核心语法\r\n\r\n1、云函数`hiface-api`基于`tcb-router`做路由跳转\r\n\r\n主要功能有头像、主题、用户信息的获取与更新，还有创建小程序码的功能。\r\n\r\n路径为`cloud/functions/hiface-api`\r\n\r\n2、核心算法\r\n\r\n基于五官分析为多个人脸戴上贴纸，具体可以查看《[通过五官分析实现为人脸佩戴贴纸](https://www.xiaoxili.com/hi-face/docs/4-development/3-analyze-face-shape.html)》\r\n\r\n## License\r\n\r\n* 前后端技术源码为 MIT License\r\n* 页面UI设计版权为作者不二雪所有，如玫红色UI、含小象logo的背景图等\r\n* 节日主题及贴纸来源为 iconfont，版权归原作者所有\r\n* 依据 Hi 头像完整功能进行上线时，请在页脚备注“技术支持来自小溪里”\r\n\r\nCopyright (c) 2020 Hanqin\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhi-our%2Fhi-face","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhi-our%2Fhi-face","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhi-our%2Fhi-face/lists"}