一 ,ml5.js是什么
ml5.js 它是基于Tensorflow.js的一个非常简便易用的接口,目的是让更广泛的受众更容易使用机器学习。(结合官网食用)
其他知识点索引点这里
FeatureExtractor特征提取器
您可以使用神经网络来识别图像的内容。大多数情况下,您将使用在大型数据集上训练的“预训练”模型将图像分类为一组固定的类别。但是,您也可以使用预训练模型的一部分:features。这些功能允许您为新的自定义任务“重新训练”或“重用”模型。这被称为迁移学习。
此类允许您通过预先训练的模型提取图像的特征,并使用新数据重新训练该模型。
classification识别视频里面的是个什么东西demo
<html>
<head>
<meta charset="UTF-8">
<title>Image classification using MobileNet and p5.js</title>
<script src="../p5.min.js"></script>
<script src="../ml5.js"></script>
</head>
<!-- 特征提取器 -->
<body>
<!-- <h1>Image Regression using Feature Extraction with MobileNet. Built with p5.js</h1>
<h2>(Train a Neural Network to move the red square)</h2>
<div id="videoContainer"></div>
<h6><span id="modelStatus">Loading base model...</span> | <span id="videoStatus">Loading video...</span></h6>
<p>
<input type="range" name="slider" id="slider" min="0.01" max="1.0" step="0.01" value="0.5" />
</p>
<br />
<p>
<button id="addSample">Add Sample</button>
</p><p><span id="amountOfSamples">0</span> Sample Images</p>
<br />
<p><button id="train">Train</button><span id="loss"></span></p>
<br />
<p>
<button id="buttonPredict">Start predicting!</button><br />
</p>
<script src="./script.js"></script>
-->
<button onclick="add()">add</button>
<button onclick="train()">train</button>
<button onclick="classify()">classify</button>
<script src="./script2.js"></script>
</body>
</html>
let video
let classifier
function setup() { // p5自动调用
createCanvas(340, 280);
// Create a video element
video = createCapture(VIDEO);
video.hide();
// 创建特征提取器
// 可以使用的模型“MobileNet”、“Darknet”和“Darknet-tiny”、“DoodleNet”,或在 Teachable Machine 中训练的任何图像分类模型,或者导入自己的训练集
const featureExtractor = ml5.featureExtractor('MobileNet', modelLoaded);
// 模块加载成功
function modelLoaded() {
console.log('Model Loaded!');
}
// 创建一个分类器 (视频,回调函数)会调浏览器的摄像头(谷歌浏览器会有权限localhost/127.0.0.1或者https证书的才能调用摄像头)
classifier = featureExtractor.classification(video, videoReady);
// Triggers when the video is ready
function videoReady() {
console.log('The video is ready!');
}
}
function add() {
// 添加要你要预测的视频中的物品('物品名',回调函数)
classifier.addImage('man',()=>{
console.log("train ok");
});
}
function train() {
// 训练
classifier.train((lossValue) => {
console.log('Loss is', lossValue);
});
}
function classify() {
// 得到预测的训练结果集
classifier.classify((err, result) => {
console.log(result); // Should output 'man'
});
}
function draw() {// p5自动不断调用
// 显示视频内容
image(video, 0, 0, 340, 280);
}
运行效果
首先点击add按钮添加训练集
然后点击train按钮训练
然后点击classify按钮识别视频中的物品是个什么
可以看出控制台输出men的概率为1(100%)
你还可以添加不同的训练集
classifier.addImage('woman',()=>{
console.log("train ok");
});
classifier.addImage('dog',()=>{
console.log("train ok");
});
如果你想你可以导出你的训练集,提供下次使用
classifier.save(?callback, ?name);//回调函数,名字
classifier.load(input,callback)//加载源,回调函数
下面是一个regression demo
<html>
<head>
<meta charset="UTF-8">
<title>Image classification using MobileNet and p5.js</title>
<script src="../p5.min.js"></script>
<script src="../ml5.js"></script>
</head>
<!-- 特征提取器 -->
<body>
<h1>Image Regression using Feature Extraction with MobileNet. Built with p5.js</h1>
<h2>(Train a Neural Network to move the red square)</h2>
<div id="videoContainer"></div>
<h6><span id="modelStatus">Loading base model...</span> | <span id="videoStatus">Loading video...</span></h6>
<p>
<input type="range" name="slider" id="slider" min="0.01" max="1.0" step="0.01" value="0.5" />
</p>
<br />
<p>
<button id="addSample">Add Sample</button>
</p><p><span id="amountOfSamples">0</span> Sample Images</p>
<br />
<p><button id="train">Train</button><span id="loss"></span></p>
<br />
<p>
<button id="buttonPredict">Start predicting!</button><br />
</p>
<script src="./script.js"></script>
<!-- <button onclick="add()">add</button>
<button onclick="train()">train</button>
<button onclick="classify()">classify</button> -->
<!-- <script src="./script2.js"></script> -->
</body>
</html>
let featureExtractor;
let regressor;
let video;
let loss;
let slider;
let samples = 0;
let positionX = 140;
function setup() {
createCanvas(340, 280);
// Create a video element
video = createCapture(VIDEO);
// Append it to the videoContainer DOM element
video.hide();
// Extract the features from MobileNet
featureExtractor = ml5.featureExtractor("MobileNet", modelReady);
// Create a new regressor using those features and give the video we want to use
regressor = featureExtractor.regression(video, videoReady);
// Create the UI buttons
setupButtons();
}
function draw() {
image(video, 0, 0, 340, 280);
noStroke();
fill(255, 0, 0);
rect(positionX, 120, 50, 50);
}
// A function to be called when the model has been loaded
function modelReady() {
select("#modelStatus").html("Model loaded!");
}
// A function to be called when the video has loaded
function videoReady() {
select("#videoStatus").html("Video ready!");
}
// Classify the current frame.
function predict() {
regressor.predict(gotResults);
}
// A util function to create UI buttons
function setupButtons() {
slider = select("#slider");
// When the Dog button is pressed, add the current frame
// from the video with a label of "dog" to the classifier
select("#addSample").mousePressed(function() {
regressor.addImage(slider.value());
select("#amountOfSamples").html((samples += 1));
});
// Train Button
select("#train").mousePressed(function() {
regressor.train(function(lossValue) {
if (lossValue) {
loss = lossValue;
select("#loss").html(`Loss: ${loss}`);
} else {
select("#loss").html(`Done Training! Final Loss: ${loss}`);
}
});
});
// Predict Button
select("#buttonPredict").mousePressed(predict);
}
// Show the results
function gotResults(err, result) {
if (err) {
console.error(err);
}
if (result && result.value) {
positionX = map(result.value, 0, 1, 0, width);
slider.value(result.value);
predict();
}
}
。。。。。。