如何开始使用 ml5.js？

ml5.js 的设计初衷是让每个人都能轻松接触机器学习，这其中包括艺术家、教育工作者和学生。基于 TensorFlow.js 构建，ml5.js 抽象了机器学习的复杂性，并提供了一个简单的高级 API。这使得开发者能够轻松地将机器学习模型集成到他们的 Web 应用程序中，而无需对底层的算法有深入的了解。本文将涵盖 ml5.js 的基础知识，包括安装方法、使用库的不同方式、详细的语法解释以及带有预期输出的实际示例。

安装 ml5.js

开始使用 ml5.js 非常简单。我们可以通过 CDN 或使用 npm 将 ml5.js 包含在我们的项目中。

通过 CDN 引入 ml5.js

要通过 CDN 引入 ml5.js，只需在 HTML 文件中添加以下 script 标签即可：

通过 npm 安装 ml5.js

如果您更喜欢使用像 Webpack 或 Parcel 这样的模块打包工具，可以通过 npm 安装 ml5.js：

npm install ml5

此外，由于 ml5.js 依赖于 TensorFlow.js，我们也需要安装它：

npm install @tensorflow/tfjs

图像分类

图像分类涉及识别图像中的物体或特征。为此，ml5.js 提供了一个简单的接口来使用像 MobileNet 这样的预训练模型。

let classifier;

function setup() {
  classifier = ml5.imageClassifier(‘MobileNet‘, modelReady);
}

function modelReady() {
  classifier.classify(image, gotResult);
}

function gotResult(error, results) {
  if (error) {
    console.error(error);
  } else {
    console.log(results);
  }
}

姿态估计

姿态估计用于检测人体部位及其在图像或视频流中的位置。ml5.js 使用 PoseNet 模型来完成这项任务。

let poseNet;

function setup() {
  poseNet = ml5.poseNet(video, modelReady);
  poseNet.on(‘pose‘, gotPoses);
}

function modelReady() {
  console.log(‘Model Loaded!‘);
}

function gotPoses(poses) {
  console.log(poses);
}

文本生成

文本生成涉及根据从给定数据集中学习的模式来创建新文本。ml5.js 提供了对用于文本生成的预训练模型的访问。

let rnn;

function setup() {
  rnn = ml5.charRNN(‘models/shakespeare/‘, modelReady);
}

function modelReady() {
  rnn.generate({ seed: ‘To be or not to be‘, length: 50, temperature: 0.5 }, gotData);
}

function gotData(err, result) {
  console.log(result);
}

风格迁移

风格迁移允许我们将一张图像的艺术风格应用到另一张图像上。ml5.js 为此使用预训练模型提供了一个简单的接口。

let styleTransfer;

function setup() {
  styleTransfer = ml5.styleTransfer(‘models/wave‘, video, modelReady);
}

function modelReady() {
  styleTransfer.transfer(gotResult);
}

function gotResult(err, result) {
  image(result.image, 0, 0);
}

示例： 图像分类

HTML


“

<meta http-equiv="X-UA-Compatible"

content="IE=edge" />

<meta name="viewport"

content="width=device-width,

initial-scale=1.0" />

<script src=

"https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js">

<script src=

"https://unpkg.com/[email protected]/dist/ml5.min.js">

body {

display: flex;

justify-content: center;