この画像は<span id="result"></span>です。(数秒後)
html,
body {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  line-height: 1.4rem;
}

#result {
  font-weight: bold;
  color: skyblue;
}

canvas {
  margin-top: 1rem;
}
let classifier, img;

function preload() {
  classifier = ml5.imageClassifier('MobileNet');
  img = loadImage('https://res.cloudinary.com/mwrote/image/upload/c_scale,w_200/v1560441316/bauhausify/_SDI0792.jpg');
}

function setup(){
  createCanvas(200, 133);
  classifier.classify(img, gotResult);
  image(img, 0, 0);
}

function gotResult(error, results) {
  console.log(results);
  const resultDom = document.querySelector('#result');
  resultDom.textContent = results[0]
    .label
    .split(',')
    .map((el) => el.trim().substring(0, 1).toUpperCase() + el.trim().substring(1))
    .join(' と ');
}

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js
  2. https://unpkg.com/ml5@0.3.1/dist/ml5.min.js