Skip to content

Commit d1466af

Browse files
TsMaskTsMask
committed
feat: 更换升级版face-api库，移除mtcnn
1 parent 0526d42 commit d1466af

14 files changed

+323
-206
lines changed

‎src/views/AgeAndGenderRecognition.vue‎

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import * as faceapi from "face-api.js";
2+
import * as faceapi from "@vladmandic/face-api";
33
import { onMounted, reactive, watch } from "vue";
44
55
/**属性状态 */
@@ -12,7 +12,6 @@ const state = reactive({
1212
netsOptions: {
1313
ssdMobilenetv1: undefined,
1414
tinyFaceDetector: undefined,
15-
mtcnn: undefined,
1615
},
1716
/**box面框分值, landmark面部轮廓, ageGender年龄性别 */
1817
draws: ["box", "ageGender"],
@@ -24,29 +23,37 @@ const state = reactive({
2423
2524
/**初始化模型加载 */
2625
async function fnLoadModel() {
26+
// 模型文件访问路径
27+
const modelsPath = `/models`;
2728
// 面部轮廓模型
28-
await faceapi.loadFaceLandmarkModel("/models");
29+
await faceapi.nets.faceLandmark68Net.load(modelsPath);
2930
// 年龄性别模型
30-
await faceapi.loadAgeGenderModel("/models");
31+
await faceapi.nets.ageGenderNet.load(modelsPath);
3132
3233
// 模型参数-ssdMobilenetv1
33-
await faceapi.nets.ssdMobilenetv1.loadFromUri("/models");
34+
await faceapi.nets.ssdMobilenetv1.load(modelsPath);
3435
state.netsOptions.ssdMobilenetv1 = new faceapi.SsdMobilenetv1Options({
35-
minConfidence: 0.5, // 0.1 ~ 0.9
36+
minConfidence: 0.5, // 0 ~ 1
37+
maxResults: 50, // 0 ~ 100
3638
});
3739
// 模型参数-tinyFaceDetector
38-
await faceapi.nets.tinyFaceDetector.loadFromUri("/models");
40+
await faceapi.nets.tinyFaceDetector.load(modelsPath);
3941
state.netsOptions.tinyFaceDetector = new faceapi.TinyFaceDetectorOptions({
40-
inputSize: 512, // 160 224 320 416 512 608
41-
scoreThreshold: 0.5, // 0.1 ~ 0.9
42-
});
43-
// 模型参数-mtcnn 已弃用，将很快被删除
44-
await faceapi.nets.mtcnn.loadFromUri("/models");
45-
state.netsOptions.mtcnn = new faceapi.MtcnnOptions({
46-
minFaceSize: 20, // 1 ~ 50
47-
scaleFactor: 0.66, // 0.1 ~ 0.9
42+
inputSize: 416, // 160 224 320 416 512 608
43+
scoreThreshold: 0.5, // 0 ~ 1
4844
});
4945
46+
// 输出库版本
47+
console.log(
48+
`FaceAPI Version: ${
49+
faceapi?.version || "(not loaded)"
50+
} \nTensorFlow/JS Version: ${
51+
faceapi.tf?.version_core || "(not loaded)"
52+
} \nBackend: ${
53+
faceapi.tf?.getBackend() || "(not loaded)"
54+
} \nModels loaded: ${faceapi.tf.engine().state.numTensors} tensors`
55+
);
56+
5057
// 节点元素
5158
state.imgEl = document.getElementById("page_draw-img");
5259
state.canvasEl = document.getElementById("page_draw-canvas");
@@ -153,7 +160,6 @@ onMounted(() => {
153160
<select v-model="state.netsType">
154161
<option value="ssdMobilenetv1">SSD Mobilenet V1</option>
155162
<option value="tinyFaceDetector">Tiny Face Detector</option>
156-
<option value="mtcnn">MTCNN</option>
157163
</select>
158164
</div>
159165
</div>

‎src/views/BBTFaceRecognition.vue‎

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import * as faceapi from "face-api.js";
2+
import * as faceapi from "@vladmandic/face-api";
33
import { onMounted, reactive, watch } from "vue";
44
55
/**属性状态 */
@@ -12,7 +12,6 @@ const state = reactive({
1212
netsOptions: {
1313
ssdMobilenetv1: undefined,
1414
tinyFaceDetector: undefined,
15-
mtcnn: undefined,
1615
},
1716
/**目标图片数据匹配对象 */
1817
faceMatcher: {},
@@ -25,49 +24,57 @@ const state = reactive({
2524
{
2625
name: "张伟",
2726
imgs: [
28-
"/images/zw/face/zw01.png",
29-
"/images/zw/face/zw02.png",
30-
"/images/zw/face/zw03.png",
31-
"/images/zw/face/zw04.png",
27+
`/images/zw/face/zw01.png`,
28+
`/images/zw/face/zw02.png`,
29+
`/images/zw/face/zw03.png`,
30+
`/images/zw/face/zw04.png`,
3231
],
3332
},
3433
{
3534
name: "曾小贤",
3635
imgs: [
37-
"/images/zxx/face/zxx01.png",
38-
"/images/zxx/face/zxx02.png",
39-
"/images/zxx/face/zxx03.png",
40-
"/images/zxx/face/zxx04.png",
36+
`/images/zxx/face/zxx01.png`,
37+
`/images/zxx/face/zxx02.png`,
38+
`/images/zxx/face/zxx03.png`,
39+
`/images/zxx/face/zxx04.png`,
4140
],
4241
},
4342
],
4443
});
4544
4645
/**初始化模型加载 */
4746
async function fnLoadModel() {
47+
// 模型文件访问路径
48+
const modelsPath = `/models`;
4849
// 面部轮廓模型
49-
await faceapi.loadFaceLandmarkModel("/models");
50+
await faceapi.nets.faceLandmark68Net.load(modelsPath);
5051
// 面部识别模型
51-
await faceapi.loadFaceRecognitionModel("/models");
52+
await faceapi.nets.faceRecognitionNet.load(modelsPath);
5253
5354
// 模型参数-ssdMobilenetv1
54-
await faceapi.nets.ssdMobilenetv1.loadFromUri("/models");
55+
await faceapi.nets.ssdMobilenetv1.load(modelsPath);
5556
state.netsOptions.ssdMobilenetv1 = new faceapi.SsdMobilenetv1Options({
56-
minConfidence: 0.6, // 0.1 ~ 0.9
57+
minConfidence: 0.5, // 0 ~ 1
58+
maxResults: 50, // 0 ~ 100
5759
});
5860
// 模型参数-tinyFaceDetector
59-
await faceapi.nets.tinyFaceDetector.loadFromUri("/models");
61+
await faceapi.nets.tinyFaceDetector.load(modelsPath);
6062
state.netsOptions.tinyFaceDetector = new faceapi.TinyFaceDetectorOptions({
61-
inputSize: 512, // 160 224 320 416 512 608
62-
scoreThreshold: 0.5, // 0.1 ~ 0.9
63-
});
64-
// 模型参数-mtcnn 已弃用，将很快被删除
65-
await faceapi.nets.mtcnn.loadFromUri("/models");
66-
state.netsOptions.mtcnn = new faceapi.MtcnnOptions({
67-
minFaceSize: 20, // 1 ~ 50
68-
scaleFactor: 0.709, // 0.1 ~ 0.9
63+
inputSize: 416, // 160 224 320 416 512 608
64+
scoreThreshold: 0.5, // 0 ~ 1
6965
});
7066
67+
// 输出库版本
68+
console.log(
69+
`FaceAPI Version: ${
70+
faceapi?.version || "(not loaded)"
71+
} \nTensorFlow/JS Version: ${
72+
faceapi.tf?.version_core || "(not loaded)"
73+
} \nBackend: ${
74+
faceapi.tf?.getBackend() || "(not loaded)"
75+
} \nModels loaded: ${faceapi.tf.engine().state.numTensors} tensors`
76+
);
77+
7178
// 节点元素
7279
state.targetImgEl = document.getElementById("page_draw-img-target");
7380
state.targetCanvasEl = document.getElementById("page_draw-canvas-target");
@@ -190,7 +197,6 @@ onMounted(() => {
190197
<select v-model="state.netsType">
191198
<option value="ssdMobilenetv1">SSD Mobilenet V1</option>
192199
<option value="tinyFaceDetector">Tiny Face Detector</option>
193-
<option value="mtcnn">MTCNN</option>
194200
</select>
195201
</div>
196202
<div style="color: #f44336">

‎src/views/BBTFaceSimilarity.vue‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import * as faceapi from "face-api.js";
2+
import * as faceapi from "@vladmandic/face-api";
33
import { onMounted, reactive } from "vue";
44
55
/**属性状态 */
@@ -20,8 +20,21 @@ const state = reactive({
2020
2121
/**初始化模型加载 */
2222
async function fnLoadModel() {
23+
// 模型文件访问路径
24+
const modelsPath = `/models`;
2325
// 面部识别模型
24-
await faceapi.loadFaceRecognitionModel("/models");
26+
await faceapi.nets.faceRecognitionNet.load(modelsPath);
27+
28+
// 输出库版本
29+
console.log(
30+
`FaceAPI Version: ${
31+
faceapi?.version || "(not loaded)"
32+
} \nTensorFlow/JS Version: ${
33+
faceapi.tf?.version_core || "(not loaded)"
34+
} \nBackend: ${
35+
faceapi.tf?.getBackend() || "(not loaded)"
36+
} \nModels loaded: ${faceapi.tf.engine().state.numTensors} tensors`
37+
);
2538
2639
// 节点元素
2740
state.targetImgEl = document.getElementById("page_draw-img-target");

‎src/views/BBTFaceSimilarityMore.vue‎

Lines changed: 27 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import * as faceapi from "face-api.js";
2+
import * as faceapi from "@vladmandic/face-api";
33
import { onMounted, reactive } from "vue";
44
55
/**属性状态 */
@@ -11,28 +11,28 @@ const state = reactive({
1111
{
1212
name: "张伟",
1313
imgs: [
14-
"/images/zw/zw01.jpg",
15-
"/images/zw/zw02.jpg",
16-
"/images/zw/zw03.jpg",
17-
"/images/zw/zw04.jpg",
14+
`/images/zw/zw01.jpg`,
15+
`/images/zw/zw02.jpg`,
16+
`/images/zw/zw03.jpg`,
17+
`/images/zw/zw04.jpg`,
1818
],
1919
},
2020
{
2121
name: "曾小贤",
2222
imgs: [
23-
"/images/zxx/zxx01.jpg",
24-
"/images/zxx/zxx02.jpg",
25-
"/images/zxx/zxx03.jpg",
26-
"/images/zxx/zxx04.jpg",
23+
`/images/zxx/zxx01.jpg`,
24+
`/images/zxx/zxx02.jpg`,
25+
`/images/zxx/zxx03.jpg`,
26+
`/images/zxx/zxx04.jpg`,
2727
],
2828
},
2929
],
3030
// 匹配图，支持本地，网络，beas64
3131
detArr: [
32-
"/images/zw/zw02.jpg",
33-
"/images/zw/zw04.jpg",
34-
"/images/zxx/zxx02.jpg",
35-
"/images/zxx/zxx04.jpg",
32+
`/images/zw/zw02.jpg`,
33+
`/images/zw/zw04.jpg`,
34+
`/images/zxx/zxx02.jpg`,
35+
`/images/zxx/zxx04.jpg`,
3636
],
3737
// 匹配结果
3838
resultArr: [],
@@ -42,8 +42,21 @@ const state = reactive({
4242
4343
/**初始化模型加载 */
4444
async function fnLoadModel() {
45+
// 模型文件访问路径
46+
const modelsPath = `/models`;
4547
// 面部识别模型
46-
await faceapi.loadFaceRecognitionModel("/models");
48+
await faceapi.nets.faceRecognitionNet.load(modelsPath);
49+
50+
// 输出库版本
51+
console.log(
52+
`FaceAPI Version: ${
53+
faceapi?.version || "(not loaded)"
54+
} \nTensorFlow/JS Version: ${
55+
faceapi.tf?.version_core || "(not loaded)"
56+
} \nBackend: ${
57+
faceapi.tf?.getBackend() || "(not loaded)"
58+
} \nModels loaded: ${faceapi.tf.engine().state.numTensors} tensors`
59+
);
4760
4861
// 关闭模型加载
4962
state.netsLoadModel = false;

‎src/views/FaceExpressionRecognition.vue‎

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import * as faceapi from "face-api.js";
2+
import * as faceapi from "@vladmandic/face-api";
33
import { onMounted, reactive, watch } from "vue";
44
55
/**属性状态 */
@@ -12,7 +12,6 @@ const state = reactive({
1212
netsOptions: {
1313
ssdMobilenetv1: undefined,
1414
tinyFaceDetector: undefined,
15-
mtcnn: undefined,
1615
},
1716
/**box面框分值, landmark面部轮廓, expression面部表情 */
1817
draws: ["box", "expression"],
@@ -24,29 +23,37 @@ const state = reactive({
2423
2524
/**初始化模型加载 */
2625
async function fnLoadModel() {
26+
// 模型文件访问路径
27+
const modelsPath = `/models`;
2728
// 面部轮廓模型
28-
await faceapi.loadFaceLandmarkModel("/models");
29+
await faceapi.nets.faceLandmark68Net.load(modelsPath);
2930
// 面部表情模型
30-
await faceapi.loadFaceExpressionModel("/models");
31+
await faceapi.nets.faceExpressionNet.load(modelsPath);
3132
3233
// 模型参数-ssdMobilenetv1
33-
await faceapi.nets.ssdMobilenetv1.loadFromUri("/models");
34+
await faceapi.nets.ssdMobilenetv1.load(modelsPath);
3435
state.netsOptions.ssdMobilenetv1 = new faceapi.SsdMobilenetv1Options({
35-
minConfidence: 0.5, // 0.1 ~ 0.9
36+
minConfidence: 0.5, // 0 ~ 1
37+
maxResults: 50, // 0 ~ 100
3638
});
3739
// 模型参数-tinyFaceDetector
38-
await faceapi.nets.tinyFaceDetector.loadFromUri("/models");
40+
await faceapi.nets.tinyFaceDetector.load(modelsPath);
3941
state.netsOptions.tinyFaceDetector = new faceapi.TinyFaceDetectorOptions({
40-
inputSize: 224, // 160 224 320 416 512 608
41-
scoreThreshold: 0.5, // 0.1 ~ 0.9
42-
});
43-
// 模型参数-mtcnn 已弃用，将很快被删除
44-
await faceapi.nets.mtcnn.loadFromUri("/models");
45-
state.netsOptions.mtcnn = new faceapi.MtcnnOptions({
46-
minFaceSize: 20, // 1 ~ 50
47-
scaleFactor: 0.56, // 0.1 ~ 0.9
42+
inputSize: 416, // 160 224 320 416 512 608
43+
scoreThreshold: 0.5, // 0 ~ 1
4844
});
4945
46+
// 输出库版本
47+
console.log(
48+
`FaceAPI Version: ${
49+
faceapi?.version || "(not loaded)"
50+
} \nTensorFlow/JS Version: ${
51+
faceapi.tf?.version_core || "(not loaded)"
52+
} \nBackend: ${
53+
faceapi.tf?.getBackend() || "(not loaded)"
54+
} \nModels loaded: ${faceapi.tf.engine().state.numTensors} tensors`
55+
);
56+
5057
// 节点元素
5158
state.imgEl = document.getElementById("page_draw-img");
5259
state.canvasEl = document.getElementById("page_draw-canvas");
@@ -144,7 +151,6 @@ onMounted(() => {
144151
<select v-model="state.netsType">
145152
<option value="ssdMobilenetv1">SSD Mobilenet V1</option>
146153
<option value="tinyFaceDetector">Tiny Face Detector</option>
147-
<option value="mtcnn">MTCNN</option>
148154
</select>
149155
</div>
150156
</div>

0 commit comments

Comments
 (0)