アパレルに特化させています
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Clarifaiサンプル</title>
</head>
<body>
<h1>Clarifaiサンプル</h1>
<script type="text/javascript" src="https://sdk.clarifai.com/js/clarifai-latest.js"></script>
<script type="text/javascript" src="const.js"></script>
<form>
<input type="file" id="files">
</form>
<div id="result"></div>
<p id="textul"></p>
<script type="text/javascript">
var ul = document.getElementById('textul');
var li;
//test2
//function poop() {
document.getElementById('files').addEventListener('change', function(){
//document.querySelector('input').addEventListener('change', function(){
var reader = new FileReader();
//reader.readAsDataURL(file);
reader.onload = function() {
var imageData = this.result;
var imageData2 = this.result;
document.getElementById('result').innerHTML = '<img src="'+ imageData +'" />';
imageData = imageData.replace(/^data:image\/(.*);base64,/, '');
doTheyEvenLift(imageData);
};
reader.readAsDataURL(this.files[0]);
}, false);
//}
function doTheyEvenLift(image) {
app.models.predict('e0be3b9d6a454f0493ac3a30784001ff', {base64: image}).then(function(r) {
console.log(r.outputs[0].data.concepts);
var mycount = r.outputs[0].data.concepts.length;
for(var i=0; i < mycount; i++){
li = document.createElement("li");
var p = r.outputs[0].data.concepts[i].value;
p = p * 100;
li.textContent = r.outputs[0].data.concepts[i].name +"_"+ p + "%";
//li.textContent = r.outputs[0].data.concepts[i].value;
ul.appendChild(li);
}
}, function(err) {
console.log(err);
});
}
///////test2
</script>
</body>
</html>
実働サンプル（毎回リロード）