Idea to Code

アイデアをコードへ
独学でプログラミング関係にいろいろ手を出すサイト

hawk

JavaScript

Clarifaiを利用した人工知能デモ　その３2017/08/12

Clarifaiを使って人工知能のデモを作ってみた。

任意の画像で解析を行えるように改良。

環境はPCのfirefox, IE, Chrome、画像ファイルはjpgのみ動作を確認。


【対象画像】

【解析結果】

clarifai-ai-3.js 
const img_area = $("#img_area");
const img = $("<img>");
const field = $("#field");

var img_file;
var datas;

const app = new Clarifai.App({
  apiKey: 'f4e2e5ffe87c472883962a126db5401d'
});

function execute(file){
  app.models.predict({id: Clarifai.GENERAL_MODEL,language: 'ja'}, {base64: file}).then(
    function(response) {
      var output_obj = response;
      datas = output_obj.outputs[0].data.concepts;
      output_datas(datas);
    },
    function(err) {
      console.error(err);
    }
  );
}

function set_img(file){
  if(file === "no"){
    img.attr("src", "");
  }else{
    img.attr("src", file);
    if(parseInt(img.css("width")) > 850){
      img.css("width", "850px");
    }else{
      img.css("width", "");
    }
  }
}

function output_datas(d){
  var str = "";
  if(d !== "no"){
    if(d === "doing"){
      str = "処理中";
    }else{
      str = d[0].name;
      for(var i=1; i<d.length; i++){
        str += ", " + d[i].name;
      }
    }
  }
  field.text(str);
}

document.getElementById( "input_tag" ).addEventListener( "change", function() {
  set_img("no");
  output_datas("no");

  var fileList = this.files ;
  var fr = new FileReader();
  fr.onload = function(){
    set_img(fr.result);
    var bs = fr.result.slice(fr.result.search("base64") + 7);
    output_datas("doing");
    execute(bs);
  };
  fr.readAsDataURL(this.files[0]);
});

$("#input_tag").val("");
img_area.append(img);