{"id":969,"date":"2021-09-25T19:35:59","date_gmt":"2021-09-25T10:35:59","guid":{"rendered":"http:\/\/ringo-apple-web.com\/?p=969"},"modified":"2021-09-25T19:43:38","modified_gmt":"2021-09-25T10:43:38","slug":"%e5%86%99%e7%9c%9f%e3%81%ab%e5%86%99%e3%81%a3%e3%81%a6%e3%81%84%e3%82%8b%e3%82%82%e3%81%ae%e3%82%92ai%e3%81%a7%e5%88%a4%e5%88%a5%e3%81%97%e3%81%a6%e3%81%bf%e3%82%8b%e3%80%80javascript%e7%b7%a8","status":"publish","type":"post","link":"http:\/\/ringo-apple-web.com\/?p=969","title":{"rendered":"\u5199\u771f\u306b\u5199\u3063\u3066\u3044\u308b\u3082\u306e\u3092AI\u3067\u5224\u5225\u3057\u3066\u307f\u308b\u3000JavaScript\u7de8"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

\u4eca\u56de\u306f\u4eba\u5de5\u77e5\u80fd\u3092\u4f7f\u3044\u753b\u50cf\u304b\u3089\u4eba\u7269\u3084\u7269\u3092\u898b\u3064\u3051\u51fa\u3059\u30d7\u30ed\u30b0\u30e9\u30e0\u3092\u4f5c\u3063\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n\n\n\n

\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u306fCocoSSD\u3068\u3044\u3046\u5b66\u7fd2\u6e08\u307f\u306e\u7269\u4f53\u691c\u51fa\u30e2\u30c7\u30eb\u3092\u5229\u7528\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n

\u4e0a\u8a18\u306e\u753b\u50cf\u3067\u306f\u6211\u304c\u5bb6\u306e\u30d0\u30e9\u306e\u753b\u50cf\u3092\u8aad\u307f\u8fbc\u3093\u3067\u307f\u307e\u3057\u305f\u3002<\/p>\n\n\n\n

88%\u306e\u4fe1\u983c\u3067potted plant\u300c\u89b3\u8449\u690d\u7269\u300d\u3068\u8868\u793a\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n

\u3061\u306a\u307f\u306b\u6700\u5c11\u30b9\u30b3\u30a2\u306e\u6570\u5024\u3092\u5c0f\u3055\u304f\u3059\u308b\u3053\u3068\u306b\u3088\u3063\u3066\u4fe1\u983c\u5ea6\u304c\u4f4e\u304f\u3066\u3082\u305d\u306e\u7269\u4f53\u3060\u3068\u307f\u306a\u3059\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n

sample~<\/p>\n\n\n\n

http:\/\/ringo-apple-web.com\/html\/object_detection.html<\/a><\/p>\n\n\n\n

\n <!DOCTYPE html>\n <html>\n <head>\n \t<meta charset="utf-8">\n \t<title>\u7269\u4f53\u691c\u51fa<\/title>\n \t<script src="https:\/\/cdn.jsdelivr.net\/npm\/@tensorflow\/tfjs"><\/script>\n \t<script src="https:\/\/cdn.jsdelivr.net\/npm\/@tensorflow-models\/coco-ssd"><\/script>\n \t<script>\n \t\tlet canvas,context; \/\/\u30ad\u30e3\u30f3\u30d0\u30b9\n \t\tconst image = new Image(); \/\/\u753b\u50cf\n \t\tlet objectLabel = new Array(); \/\/\u691c\u51fa\u3057\u305f\u7269\u4f53\u306e\u30e9\u30d9\u30eb\n\n \t\tconst init = () => {\n \t\t\t\/\/\u30ad\u30e3\u30f3\u30d0\u30b9\n \t\t\tcanvas = document.getElementById("image"); \/\/\u30ad\u30e3\u30f3\u30d0\u30b9147\u884c\u76ee\u53d6\u5f97\n \t\t\tcontext = canvas.getContext("2d");\n \t\t\t\/\/\u691c\u51fa\u30dc\u30bf\u30f3\u3092\u7121\u52b9\n \t\t\tdocument.getElementById("detectButton").disabled = true;\n \t\t}\n\n \t\tconst loadImage = files => {\n \t\t\t\/\/\u753b\u50cf\u306e\u8aad\u307f\u8fbc\u307f\n \t\t\timage.src = URL.createObjectURL(files[0]);\n \t\t\timage.onload = () => {\n \t\t\t\t\/\/\u753b\u50cf\u3092\u63cf\u753b\uff08\u7e26\u6a2a\u6700\u5927600\u30d4\u30af\u30bb\u30eb\uff09\n \t\t\t\tlet width,height,size = 600;\n \t\t\t\tif (image.width > image.height) {\n \t\t\t\t\t[width,height] = [siz,image.height\/image.width * size];\n \t\t\t\t} else {\n \t\t\t\t\t[width,height] = [image.width\/image.height * size,size];\n \t\t\t\t}\n \t\t\t[canvas.width,canvas.height] = [width,height];\n \t\t\tcontext.clearRect(0,0,width,height);\n \t\t\tcontext.drawImage(image,0,0,width,height);\n \t\t\t\/\/\u691c\u51fa\u7d50\u679c\u3092\u30af\u30ea\u30a2\u3001\u300c\u691c\u51fa\u30dc\u30bf\u30f3\u300d\u3092\u6709\u52b9\n \t\t\tdocument.getElementById("list").innerHTML = "";\n \t\t\tdocument.getElementById("message").innerText = "";\n \t\t\tdocument.getElementById("detectButton").disabled = false;\n \t\t\t}\n \t\t}\n\n \t\tconst detect = () => {\n \t\t\t\/\/\u691c\u51fa\n \t\t\tconst minScore = document.getElementById("min").value \/ 100; \n \t\t\tdocument.getElementById("list").innerHTML ="";\n \t\t\tobjectLabel = [];\n \t\t\tconst message = document.getElementById("message");\n \t\t\tmessage.innerText = "\u691c\u51fa\u4e2d.....";\n \t\t\tcocoSsd.load().then(model => {\n \t\t\t\tmodel.detect(canvas,100,minScore).then(predictions => {\n \t\t\t\t\tfor (let i = 0; i<predictions.length; i++) {\n \t\t\t\t\t\taddObject(predictions[i]);\n \t\t\t\t\t}\n \t\t\t\t\tmessage.innerText += "\u5b8c\u4e86";\n \t\t\t\t\tif (predictions.length == 0) {\n \t\t\t\t\t\tmessage.innerText = "\u691c\u51fa\u3055\u308c\u307e\u305b\u3093\u3067\u3057\u305f\u3002";\n \t\t\t\t\t}\n \t\t\t\t})\n \t\t\t})\n \t\t}\n\n \t\tconst addObject = prediction => {\n \t\t\t\/\/\u691c\u51fa\u3057\u305f\u7269\u4f53\u306e\u30e9\u30d9\u30eb\u3092\u8ffd\u52a0\n \t\t\tif (objectLabel.indexOf(prediction.class) == -1) {\n \t\t\t\tobjectLabel.push(prediction.class);\n \t\t\t\tconst label = document.createElement("div");\n \t\t\t\tlabel.innerText = prediction.class;\n \t\t\t\tlabel.className = "label";\n \t\t\t\tdocument.getElementById("list").appendChild(label);\n \t\t\t\tconst object = document.createElement("div");\n \t\t\t\tobject.id = prediction.class;\n \t\t\t\tdocument.getElementById("list").appendChild(object);\n \t\t\t}\n \t\t\t\/\/\u691c\u51fa\u3057\u305f\u60c5\u5831\u3092\u53d6\u5f97\n \t\t\tconst [x,y,w,h] = prediction.bbox;\n \t\t\tconst scale = image.width \/canvas.width;\n \t\t\tconst[x1,y1,w1,h1] =  [x * scale,y * scale,w * scale,h * scale];\n \t\t\tconst score = (prediction.score * 100). toFixed(2);\n \t\t\t\/\/\u30b9\u30b3\u30a2\n \t\t\tconst div = document.createElement("div");\n \t\t\tdiv.className = "block";\n \t\t\tconst scoreDiv = document.createElement("div");\n \t\t\tscoreDiv.innerText  = `(${score}%)`;\n \t\t\tdiv.appendChild(scoreDiv);\n \t\t\t\/\/\u753b\u50cf\n \t\t\tconst miniCanvas = document.createElement("canvas");\n \t\t\tconst miniContext = miniCanvas.getContext("2d");\n \t\t\tlet w2,h2,size = 100;\n \t\t\tif (w > h) {\n \t\t\t\t[w2,h2] = [size,h\/w * size];\n \t\t\t} else {\n \t\t\t\t[w2,h2] = [w\/h * size,size];\n \t\t\t}\n \t\t\tminiCanvas.width = w2;\n \t\t\tminiCanvas.height = h2;\n \t\t\tminiContext.drawImage(image,x1,y1,w1,h1,0,0,w2,h2);\n \t\t\t\/\/\u30de\u30a6\u30b9\u30ab\u30fc\u30bd\u30eb\u304c\u5165\u3063\u305f\u3068\u304d\u306b\u691c\u51fa\u3057\u305f\u77ed\u5f62\u3092\u63cf\u753b\n \t\t\tminiCanvas.onmouseenter = () => {\n \t\t\t\tminiCanvas.classList.add("select");\n \t\t\t\tcontext.strokeStyle = "#00CCFF";\n \t\t\t\tcontext.lineWidth = 4;\n \t\t\t\tcontext.strokeRect(x,y,w,h);\n \t\t\t}\n \t\t\t\/\/\u30de\u30a6\u30b9\u30ab\u30fc\u30bd\u30eb\u304c\u51fa\u305f\u3068\u304d\u77ed\u5f62\u3092\u6d88\u53bb\n \t\t\tminiCanvas.onmouseleave = () => {\n \t\t\t\tminiCanvas.classList.remove("select");\n \t\t\t\tcontext.clearRect(0,0,canvas.width,canvas.height);\n \t\t\t\tcontext.drawImage(image,0,0,canvas.width,canvas.height);\n \t\t\t}\n \t\t\tdiv.appendChild(miniCanvas);\n \t\t\tdocument.getElementById(prediction.class).appendChild(div);\n \t\t}\n \t<\/script>\n<style>\n\tinput[type="number"] {width: 40px;}\n\t#message {color: #009900;}\n\tcanvas {border: 4px solid #CCCCCC;}\n\t#image {\n\t\tfloat: left;\n\t\tmargin-right: 5px;\n\t}\n\t#list {\n\t\theight: 600px;\n\t\toverflow: auto;\n\t}\n\t.label {\n\t\tpadding-left: 5px;\n\t\tcolor: #FFFFFF;\n\t\tbackground-color:  #0000FF;\n\t}\n\t.block {\n\t\tdisplay: inline-block;\n\t\tmargin: 0px 10px;\n\t\ttext-align: center;\n\t\tvertical-align: top;\n\t}\n\t.select {border: 4px solid #00CCFF;}\n<\/style>\n<\/head>\n <body onload="init()">\n \t<p>\u7269\u4f53\u691c\u51faver\u308a\u3093\u3054<\/p>\n \t<input type="file" accept="image\/*" onchange="loadImage(this.files)">\n \t\u6700\u5c0f\u30b9\u30b3\u30a2:<input type="number" id="min" value="50" min="1" max="100">%\n \t<input type="button" id="detectButton" value="\u691c\u51fa" onclick="detect()">\n \t<span id="message"><\/span>\n \t<hr>\n \t<canvas id="image"><\/canvas>\n \t<div id="list"><\/div> \n <\/html><\/code><\/pre><\/div>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
\u4eca\u56de\u306f\u4eba\u5de5\u77e5\u80fd\u3092\u4f7f\u3044\u753b\u50cf\u304b\u3089\u4eba\u7269\u3084\u7269\u3092\u898b\u3064\u3051\u51fa\u3059\u30d7\u30ed\u30b0\u30e9\u30e0\u3092\u4f5c\u3063\u3066\u307f\u307e\u3057\u305f\u3002 \u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u306fCocoSSD\u3068\u3044\u3046\u5b66\u7fd2\u6e08\u307f\u306e\u7269\u4f53\u691c\u51fa\u30e2\u30c7\u30eb\u3092\u5229\u7528\u3057\u3066\u3044\u307e\u3059\u3002 \u4e0a\u8a18\u306e\u753b\u50cf\u3067\u306f\u6211\u304c\u5bb6\u306e\u30d0\u30e9\u306e\u753b\u50cf\u3092\u8aad\u307f\u8fbc\u3093\u3067\u307f\u307e\u3057\u305f\u3002 88%\u306e […]<\/p>\n","protected":false},"author":1,"featured_media":970,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[25,1],"tags":[],"_links":{"self":[{"href":"http:\/\/ringo-apple-web.com\/index.php?rest_route=\/wp\/v2\/posts\/969"}],"collection":[{"href":"http:\/\/ringo-apple-web.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ringo-apple-web.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ringo-apple-web.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ringo-apple-web.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=969"}],"version-history":[{"count":4,"href":"http:\/\/ringo-apple-web.com\/index.php?rest_route=\/wp\/v2\/posts\/969\/revisions"}],"predecessor-version":[{"id":974,"href":"http:\/\/ringo-apple-web.com\/index.php?rest_route=\/wp\/v2\/posts\/969\/revisions\/974"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/ringo-apple-web.com\/index.php?rest_route=\/wp\/v2\/media\/970"}],"wp:attachment":[{"href":"http:\/\/ringo-apple-web.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ringo-apple-web.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=969"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ringo-apple-web.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}