Skip to content

Commit

Permalink
docs: 更新项目说明
Browse files Browse the repository at this point in the history
  • Loading branch information
TsMask committed Apr 8, 2024
1 parent d1466af commit dfda3f3
Showing 1 changed file with 53 additions and 37 deletions.
90 changes: 53 additions & 37 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,41 +2,50 @@

使用 `Vue` 框架搭建演示,`H5``Web``NodeJS` 实现人脸检测识别,基于 `TensorFlowJS` 实现的 `face-api.js` 人脸识别库。

模型文件放在 `public/models` 目录下,部署时请确保网络路径能访问到模型文件。
识别模型文件放在 `public/models` 目录下,部署时请确保网络路径能访问到模型文件。

npm 主要安装以下
npm 主要安装识别库

```shell
npm i --save face-api.js
# 升级版作者库
npm i --save @vladmandic/face-api
# 原作者库
# npm i --save face-api.js
```

安装识别库库后在 `node_modules/@vladmandic/face-api/model` 可以拿到模型文件。

- [本人在线示例-aliyun](https://env-00jxgaqjulpu-static.normal.cloudstatic.cn/face-api-demo-vue/index.html#/)
- [本人在线示例-vercel](https://face-api-demo-vue-mu.vercel.app/)
- [本人仓库 browser 示例 0.13.8 含 dist/文档/模型/示例](https://github.com/TsMask/face-api-demo)
- [GitHub face-api 使用文档](https://justadudewhohacks.github.io/face-api.js/docs/globals.html)
- [GitHub 作者识别库源码](https://github.com/justadudewhohacks/face-api.js)
- [GitHub 作者在线示例](https://justadudewhohacks.github.io/face-api.js)
- [GitHub 原作者face-api 使用文档](https://justadudewhohacks.github.io/face-api.js/docs/globals.html)
- [GitHub 原作者识别库源码](https://github.com/justadudewhohacks/face-api.js)
- [GitHub 原作者在线示例](https://justadudewhohacks.github.io/face-api.js)
- [GitHub 升级版作者face-api 使用文档](https://vladmandic.github.io/face-api/typedoc/index.html)
- [GitHub 升级版作者识别库源码](https://github.com/vladmandic/face-api)
- [GitHub 升级版作者在线示例](https://vladmandic.github.io/face-api/demo/index.html)

## 其他

### 使用前引入模型

[关于mtcnn模型弃用](https://github.com/justadudewhohacks/face-api.js/issues/511)

```js
console.log(faceapi.nets);
// ageGenderNet
// faceExpressionNet
// faceLandmark68Net
// faceLandmark68TinyNet
// faceRecognitionNet
// ssdMobilenetv1
// tinyFaceDetector
// tinyYolov2
// const nets: {
// ssdMobilenetv1: SsdMobilenetv1;
// tinyFaceDetector: TinyFaceDetector;
// tinyYolov2: TinyYolov2;
// faceLandmark68Net: FaceLandmark68Net;
// faceLandmark68TinyNet: FaceLandmark68TinyNet;
// faceRecognitionNet: FaceRecognitionNet;
// faceExpressionNet: FaceExpressionNet;
// ageGenderNet: AgeGenderNet;
// }
//
// 放在public/models内
// 通过url地址访问
// 载入模型
// await faceapi.nets.ssdMobilenetv1.load("/models");
// 通过url地址
// await faceapi.nets.ssdMobilenetv1.loadFromUri("/models");
// 本地路径
// 本地相对路径
// await faceapi.nets.ssdMobilenetv1.loadFromDisk("../../public/models");
```

Expand All @@ -61,14 +70,18 @@ const detections2 = await faceapi.detectSingleFace(输入, 使用的模型参数
### 识别库工具

```js
// 请求json格式文件数据
// 请求json格式文件数据 Any
const json = await faceapi.fetchJson("http://www.example.com/file/example.json");
// 请求视频文件 HTMLImageElement
const imageEl = await faceapi.fetchImage("http://www.example.com/file/example.jpg");
// 请求视频文件 HTMLVideoElement
const videoEl = await faceapi.fetchVideo("http://www.example.com/file/example.mp4");

// 从Blob/File对象创建HTMLImageElement
const imgEl = await faceapi.bufferToImage(imgFile);
const imageEl = await faceapi.bufferToImage(fileBlob);

// 从图像或视频元素创建画布元素
const canvas = faceapi.createCanvasFromMedia(HTMLImageElement | HTMLVideoElement)
const canvasEl = faceapi.createCanvasFromMedia(HTMLImageElement | HTMLVideoElement)
```

----
Expand Down Expand Up @@ -97,26 +110,29 @@ const canvas = faceapi.createCanvasFromMedia(HTMLImageElement | HTMLVideoElement
编译执行环境:

- NodeJS:`[email protected]`
- Vite 脚手架:`[email protected]`
- Vue:`[email protected]`
- face-api:`[email protected]`
- Vite:`[email protected]`
- Vue:`[email protected]`
- VueRouter:`[email protected]`
- face-api:`@vladmandic/[email protected]`

## 项目结构

```text
face-api-demo-vue
┌─public 应用引用静态资源的目录
┌─public 目录-静态资源
├─src
│ ├─components 复用组件目录
│ ├─router 页面路由配置文件目录
│ ├─utils 常用函数工具文件目录
│ ├─views 页面视图文件目录
│ ├─App.vue 配置App全局应用页面
│ └─main.js Vue初始化入口文件
├─babel.config.js Babel格式规范化配置
├─package-lock.json 依赖版本校验信息
├─package.json 项目依赖包、编译配置
└─README.md 项目说明
│ ├─assets 目录-编译资源
│ ├─components 目录-复用组件
│ ├─router 目录-页面路由配置
│ ├─utils 目录-常用函数工具
│ ├─views 目录-页面视图
│ ├─App.vue 文件-配置App全局
│ └─main.js 文件-Vue初始化
├─index.html 文件-页面容器
├─package-lock.json 文件-项目依赖版本锁
├─package.json 文件-项目信息
├─README.md 文件-项目说明
└─vite.config.js 文件-Vite配置
```

## Project setup / 项目依赖安装初始化
Expand Down

0 comments on commit dfda3f3

Please sign in to comment.