この画像は<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;
}
View Compiled
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
This Pen doesn't use any external CSS resources.