<html>
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
<script src="https://unpkg.com/ml5@0.4.2/dist/ml5.min.js"></script> type="text/javascript"
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>PoseNet example using p5.js</h1>
<p id="status">Loading model...</p >
<script src="sketch.js"></script>
</body>
</html>
let video;
let poseNet;
let pose;
let skeleton; //骨架连接
let brain;
let state = 'waiting';
let targetLabel;
function keyPressed(){
if (key == 's'){
brain.saveData();
} else {
targetLabel = key;
console.log(targetLabel);
setTimeout(function() {
console.log('collecting');
state = 'collecting';
setTimeout(function() {
console.log('not collecting');
state = 'waiting';
}, 10000); //延迟过后停止收集
}, 10000); //按键收集姿势,需点击预览
}
}
function setup() {
createCanvas(640, 460);//页面大小
video = createCapture(VIDEO);
video.hide();
poseNet = ml5.poseNet(video, modelLoaded);
poseNet.on('pose', gotPoses);
let options = {
inputs: 34,
//outputs: 4,
outputs: ['zishi1', 'zishi2', 'zishi3', 'zihsi'],
task: 'classification',
debug: true
}
brain = ml5.neuralNetwork(options);
}
function gotPoses(poses){
//console.log(poses); //显示实时位置数据
if (poses.length > 0){ //poses数组不为0
pose = poses[0].pose;
skeleton = poses[0].skeleton;
if (state == 'collecting'){
let inputs = [];
for (let i = 0; i < pose.keypoints.length; i++) { //keypoints包含一个画面的17个位置点，一个一个选取
let x = pose.keypoints[i].position.x;
let y = pose.keypoints[i].position.y;
inputs.push(x);
inputs.push(y);
}
let target = [targetLabel]; //收集数据
brain.addData(inputs, target);
}
}
}
function modelLoaded(){
console.log('poseNet ready');
}
function draw(){
translate(video.width, 0);
scale(-1, 1);
image(video, 0, 0, video.width, video.height); //镜像
if (pose) {
for (let i = 0; i < pose.keypoints.length; i++){ //keypoints包含一个画面的17个位置点，一个一个进行绘制
let x = pose.keypoints[i].position.x;
let y = pose.keypoints[i].position.y;
fill(255,255,255); //画出关键点
ellipse(x, y, 7, 7);
}
for (let i = 0; i < skeleton.length; i++){ //骨架数组每一个值
let a = skeleton[i][0];
let b = skeleton[i][1]; //a的下一个骨架
strokeWeight(2);
stroke(255);
line(a.position.x, a.position.y, b.position.x, b.position.y); //连线
}
}
}
仔细看，html中posenet已经不是latest了，而是我给出的一个具体的版本，这一步很关键，因为我如果是latest就一直没显示画面，无法确定是什么问题。
在这个代码里，我实现字母预测时是用的outputs：4，关于它的意义，我暂时无法用准确的语言来描述，我对此也是十分模糊，但是根据我后面的经验，我认为我这个4会代表输出了4个结果，这句话看起来像个废话，主要时我确实没法准确说明，如果往下看，我还做了一个outputs为1的，这两个进行对比，相信你也会对此有了一些模糊的概念。说回这个代码，我设置了按下键盘上的键就进行数据收集，在我收集了4个按键之后，按s能导出我收集的数据。在此时第一步就完成了。
第二步是数据训练。
let video;
let poseNet;
let pose;
let skeleton; //骨架连接
let brain;
let state = 'waiting';
let targetLabel;
function keyPressed(){
if (key == 's'){
brain.saveData();
} else {
targetLabel = key;
console.log(targetLabel);
setTimeout(function() {
console.log('collecting');
state = 'collecting';
setTimeout(function() {
console.log('not collecting');
state = 'waiting';
}, 10000); //延迟过后停止收集
}, 10000); //按键收集姿势,需点击预览
}
}
function setup() {
createCanvas(640, 460);//页面大小
video = createCapture(VIDEO);
video.hide();
poseNet = ml5.poseNet(video, modelLoaded);
poseNet.on('pose', gotPoses);
let options = {
inputs: 34,
//outputs: 4,
outputs: ['zishi1', 'zishi2', 'zishi3', 'zihsi'],
task: 'classification',
debug: true
}
brain = ml5.neuralNetwork(options);
brain.loadData('zishi.json', dataReady);
}
function dataReady() {
brain.normalizeData();
brain.train({epochs: 50}, finished);//数据训练
}
function finished() {
console.log('model trained');
brain.save();
}
function gotPoses(poses){
//console.log(poses); //显示实时位置数据
if (poses.length > 0){ //poses数组不为0
pose = poses[0].pose;
skeleton = poses[0].skeleton;
if (state == 'collecting'){
let inputs = [];
for (let i = 0; i < pose.keypoints.length; i++){ //keypoints包含一个画面的17个位置点，一个一个选取
let x = pose.keypoints[i].position.x;
let y = pose.keypoints[i].position.y;
inputs.push(x);
inputs.push(y);
}
let target = [targetLabel]; //收集数据
brain.addData(inputs, target);
}
}
}
function modelLoaded(){
console.log('poseNet ready');
}
function draw(){
translate(video.width, 0);
scale(-1, 1);
image(video, 0, 0, video.width, video.height); //镜像
if (pose) {
for (let i = 0; i < pose.keypoints.length; i++){ //keypoints包含一个画面的17个位置点，一个一个进行绘制
let x = pose.keypoints[i].position.x;
let y = pose.keypoints[i].position.y;
fill(255,255,255); //画出关键点
ellipse(x, y, 7, 7);
}
for (let i = 0; i < skeleton.length; i++){ //骨架数组每一个值
let a = skeleton[i][0];
let b = skeleton[i][1]; //a的下一个骨架
strokeWeight(2);
stroke(255);
line(a.position.x, a.position.y, b.position.x, b.position.y); //连线
}
}
}