forked from watson-developer-cloud/node-red-labs
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathalchvis_lab_webfaces_thumbs.json
More file actions
92 lines (92 loc) · 6.05 KB
/
Copy pathalchvis_lab_webfaces_thumbs.json
File metadata and controls
92 lines (92 loc) · 6.05 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
[{
"id": "af97dae4.435fb",
"type": "template",
"name": "Prompt Images",
"field": "payload",
"format": "html",
"template": "<h1>Welcome to the Watson Alchemy Image Analysis Demo on Node-RED</h1>\n<H2>Select an image</H2>\n<form action=\"{{req._parsedUrl.pathname}}\">\n <img src=\"http://visual-recognition-demo.mybluemix.net/images/4068.jpg\" height='100'/>\n <img src=\"http://www.ambafrance-mt.org/local/cache-vignettes/L945xH539/family_photo8851-b0e9b.jpg\" height='100'/>\n <img src=\"https://upload.wikimedia.org/wikipedia/commons/f/f1/34th_G8_summit_member_20080707.jpg\" height='100'/>\n <img src=\"http://demo1.alchemyapi.com/images/vision/politicians.jpg\" height='100'/>\n <br/>Copy above image location URL or enter any image URL:<br/>\n Image URL: <input type=\"text\" name=\"imageurl\"/>\n <input type=\"submit\" value=\"Analyze\"/>\n</form>",
"x": 529,
"y": 104,
"wires": [
["463b66cb.c3b3a8"]
]
}, {
"id": "1b26aed0.f80e01",
"type": "http in",
"name": "",
"url": "/alchthumbs",
"method": "get",
"swaggerDoc": "",
"x": 91,
"y": 118,
"wires": [
["cb43c07e.b03248"]
]
}, {
"id": "463b66cb.c3b3a8",
"type": "http response",
"name": "HTTP Response",
"x": 799,
"y": 187,
"wires": []
}, {
"id": "cb43c07e.b03248",
"type": "switch",
"name": "Check image url",
"property": "payload.imageurl",
"rules": [{
"t": "null"
}, {
"t": "else"
}],
"checkall": "false",
"outputs": 2,
"x": 220,
"y": 187,
"wires": [
["af97dae4.435fb"],
["b559cbff.9a594"]
]
}, {
"id": "cd91dfc8.158a18",
"type": "template",
"name": "Report Faces",
"field": "payload",
"format": "html",
"template": "<!DOCTYPE html>\n<html>\n<head>\n <title>Node-RED Alchemy Vision Face Recognition</title>\n<script>\n // This function draws the main canvas\n function drawCanvas(img,ctx,cv_w,cv_h) { \n // draw the image, resized to fit the canvas\n ctx.drawImage(img,0,0,cv_w,cv_h);\n }\n\n // This function draws a single thumbnail face on the mains\n // canvas context and then on the individual canvas\n function drawThumb(img,ctx,cv_w,cv_h,thumbX,thumbY,thumbW,thumbH,color,cvTh) {\n ctx.beginPath();\n // adjust thinkness of box depending on size vs canvas\n if(thumbW>=cv_w/12 || thumbH>=cv_w/12) {\n ctx.lineWidth=\"2\";\n } else {\n ctx.lineWidth=\"1\";\n }\n ctx.strokeStyle=color;\n ctx.rect(thumbX*cv_w/img.naturalWidth,\n thumbY*cv_h/img.naturalHeight,\n thumbW*cv_w/img.naturalWidth,\n thumbH*cv_h/img.naturalHeight);\n ctx.stroke();\n \n // handle the thumb canvas\n var ctxTh = cvTh.getContext(\"2d\");\n ctxTh.drawImage(img,thumbX,thumbY,thumbW,thumbH,\n 0,0,cvTh.width,cvTh.height);\n }\n\n function drawThumbs(img,ctx,cv_w,cv_h) {\n var cths=document.getElementsByClassName(\"cv_thumbs\");\n var iTh=0;\n var color;\n {{#result}}\n color=\"lightgreen\";\n {{^identity}}\n color=\"red\";\n {{/identity}}\n drawThumb(img,ctx,cv_w,cv_h,{{positionX}},{{positionY}},{{width}},{{height}},color,cths[iTh++]);\n {{/result}} \n }\n \n function drawAll() {\n // Find the image tag\n var img = document.getElementById(\"alchemy_image\");\n \n // get canvas\n var c = document.getElementById(\"imageCanvas\");\n var cv_w=c.width;\n var cv_h=c.height;\n\n // Adjust canvas size for correct aspect ratio\n if(img.naturalHeight>img.naturalWidth) {\n cv_w=cv_w*img.naturalWidth/img.naturalHeight;\n c.width=cv_w;\n } else {\n cv_h=cv_h*img.naturalHeight/img.naturalWidth;\n c.height=cv_h;\n }\n \n var ctx = c.getContext(\"2d\");\n drawCanvas(img,ctx,cv_w,cv_h);\n drawThumbs(img,ctx,cv_w,cv_h);\n }\n</script>\n</head>\n<body>\n<h1>Alchemy Vision Face Recognition on Node-RED</h1>\n<p>Analyzed image: <a href=\"{{payload}}\" target='_blank'>{{payload}}</a><br/>\n<img style=\"display: none;\" id=\"alchemy_image\" src=\"{{payload}}\" onload=\"drawAll()\"/></p>\n{{^result}}\n<P>No Face detected</P>\n{{/result}}\n<canvas id=\"imageCanvas\" width=\"400\" height=\"400\" style=\"border:1px solid #000000;\">\n <p>Sorry, HTML5 Canvas not supported in your browser</p>\n</canvas>\n<table border='1'>\n <col align=\"center\">\n <tr><th rowspan='2'>Thumb</th><th colspan='2'>Age</th><th colspan='2'>Gender</th><th colspan='2'>Name</th></tr>\n <tr><th>Range</th><th>Score</th><th>Found</th><th>Score</th><th>Name</th><th>Score</th></tr>\n {{#result}}\n <tr>\n <td style=\"text-align: center;\"><canvas class=\"cv_thumbs\" width='{{width}}' height='{{height}}'></canvas></td>\n <td><b>{{age.ageRange}}</b></td>\n <td><i>{{age.score}}</i></td>\n <td>{{gender.gender}}</td>\n <td>{{gender.score}}</td>\n {{#identity}}\n <td>{{identity.name}}</td><td>({{identity.score}})</td>\n {{/identity}}\n </tr>\n {{/result}}\n</table>\n\n<form action=\"{{req._parsedUrl.pathname}}\">\n <input type=\"submit\" value=\"Try again\"/>\n</form>\n</body>\n</html>",
"x": 630,
"y": 277,
"wires": [
["463b66cb.c3b3a8"]
]
}, {
"id": "b559cbff.9a594",
"type": "change",
"name": "Extract img URL",
"rules": [{
"t": "set",
"p": "payload",
"to": "msg.payload.imageurl"
}],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 321,
"y": 283,
"wires": [
["ec98cbcc.5ffb68"]
]
}, {
"id": "ec98cbcc.5ffb68",
"type": "alchemy-image-analysis",
"name": "",
"apikey": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
"image-feature": "imageFaces",
"x": 483,
"y": 343,
"wires": [
["cd91dfc8.158a18"]
]
}]