-
Notifications
You must be signed in to change notification settings - Fork 14
/
nodered.json
1 lines (1 loc) · 22 KB
/
nodered.json
1
[{"id":"7e0b0fe1.12e1c","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"36eeec17.142b74","type":"visual-recognition-v3","z":"7e0b0fe1.12e1c","name":"","apikey":"nphRX4i75EFNlg7HycpJoHQGWODqHJhuPDqiEn3s2Ugv","vr-service-endpoint":"https://gateway.watsonplatform.net/visual-recognition/api","image-feature":"classifyImage","lang":"en","x":790,"y":360,"wires":[["c0b5e42.1bfaf18"]]},{"id":"8d903bfa.c75d98","type":"http response","z":"7e0b0fe1.12e1c","name":"HTTP Response","statusCode":"","headers":{},"x":1140,"y":200,"wires":[]},{"id":"e02900cb.0bef3","type":"switch","z":"7e0b0fe1.12e1c","name":"Check image param","property":"payload.url","propertyType":"msg","rules":[{"t":"null"},{"t":"else"}],"checkall":"false","repair":false,"outputs":2,"x":250,"y":277,"wires":[["f75974ac.4b5ee8"],["2177cf3d.9d00b"]]},{"id":"4c82940e.7a6d5c","type":"template","z":"7e0b0fe1.12e1c","name":"Get Image URL","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<html>\n<head>\n <link href=\"https://fonts.googleapis.com/css?family=Barlow+Condensed\" rel=\"stylesheet\">\n <title>Watson Visual Recognition on Node-RED</title>\n <style>\n @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);\n \n div.container {\n display:inline-block;\n }\n \n p {\n text-align:center;\n }\n \n .centered { \n margin: 0 auto; \n width: 50%;\n }\n \n .button {\n background-color: #4CAF50; /* Green */\n border: none;\n color: white;\n padding: 3px 35px;\n text-align: center;\n text-decoration: none;\n display: inline-block;\n font-size: 16px;\n margin: 4px 2px;\n -webkit-transition-duration: 0.4s; /* Safari */\n transition-duration: 0.4s;\n cursor: pointer;\n }\n \n .button2 {\n background-color: white; \n color: black; \n border: 2px solid #008CBA;\n }\n \n .button2:hover {\n background-color: #008CBA;\n color: white;\n } \n \n h1, h2, h3, h4, h5, h6 {\n font-family: 'Barlow Condensed', sans-serif;\n font-weight: 500;\n color: WHITE;\n margin-top:5px;\n margin-bottom:5px;\n }\n \n h1, h2, h3 {\n text-transform:uppercase;\n }\n \n img {\n background-color: white;\n margin-top: 85px;\n display: block;\n margin-left: auto;\n margin-right: auto;\n border: 1px solid #ddd;\n border-radius: 4px;\n padding: 5px;\n }\n \n .center {\n margin: auto;\n width: 100%;\n }\n \n .wrapper {\n text-align: center;\n }\n \n .textforms {\n color: white;\n font-family: 'Barlow Condensed', sans-serif;\n font-size: 1.1vw;\n line-height: 180%;\n padding: 20px 40px 60px;\n margin: 20px 0px 60px;\n }\n \n textarea {\n height: 32px;\n color: white;\n text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);\n background-color: \t#152934;\n border: 1px solid white;\n border-radius: 4px;\n }\n \n textarea:focus {\n background-color: #152934;\n border: 2px solid BLACK;\n color: WHITE\n }\n \n input[type=text] {\n color: white;\n text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);\n background-color: \t#152934;\n border: 1px solid #152934;\n padding: 12px 20px;\n margin: 8px 0;\n box-sizing: border-box;\n -webkit-border-radius: 4px;\n -moz-border-radius: 4px;\n border-radius: 4px;\n }\n \n input[type=text]:focus {\n background-color: #152934;\n border: 2px solid BLACK;\n color: WHITE\n }\n \n .btn-primary {\n background: #5aaafa;\n color: #2d3f49;\n }\n \n /* TABLE INFO */\n \n body {\n /* background-color: #3e94ec; */\n background-color: #2d3f49;\n font-family: \"Roboto\", helvetica, arial, sans-serif;\n font-size: 16px;\n font-weight: 400;\n text-rendering: optimizeLegibility;\n }\n \n div.table-title {\n display: block;\n margin: auto;\n max-width: 800px;\n padding:5px;\n width: 100%;\n }\n \n .table-title h3 {\n color: #fafafa;\n font-size: 30px;\n font-weight: 400;\n font-style:normal;\n font-family: \"Roboto\", helvetica, arial, sans-serif;\n text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);\n text-transform:uppercase;\n }\n \n .table-title h1 {\n color: #fafafa;\n font-size: 40px;\n font-weight: 400;\n font-style:normal;\n font-family: \"Roboto\", helvetica, arial, sans-serif;\n text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);\n text-transform:uppercase;\n }\n \n /*** Table Styles **/\n \n .table-fill {\n height: 14px\n background: white;\n border-radius:3px;\n border-collapse: collapse;\n height: 150px;\n margin: auto;\n max-width: 800px;\n padding: 5px;\n width: 800px;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);\n animation: float 5s infinite;\n }\n \n th {\n color:#D5DDE5;;\n background:#1b1e24;\n border-bottom:4px solid #9ea7af;\n border-right: 1px solid #343a45;\n font-size:32px;\n font-weight: 100;\n padding: 24px;\n text-align:left;\n text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);\n vertical-align:middle;\n }\n \n th:first-child {\n border-top-left-radius:3px;\n }\n \n th:last-child {\n border-top-right-radius:3px;\n border-right:none;\n }\n \n tr {\n border-top: 1px solid #C1C3D1;\n border-bottom: 1px solid #C1C3D1;\n color:#666B85;\n font-size:20px;\n font-weight:normal;\n text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);\n }\n \n tr:hover td {\n background:#4E5066;\n color:#FFFFFF;\n border-top: 1px solid #22262e;\n }\n \n tr:first-child {\n border-top:none;\n }\n \n tr:last-child {\n border-bottom:none;\n }\n \n tr:nth-child(odd) td {\n background:#EBEBEB;\n }\n \n tr:nth-child(odd):hover td {\n background:#4E5066;\n }\n \n tr:last-child td:first-child {\n border-bottom-left-radius:3px;\n }\n \n tr:last-child td:last-child {\n border-bottom-right-radius:3px;\n }\n \n td {\n background:#FFFFFF;\n padding: 20px;\n text-align:left;\n vertical-align:middle;\n font-weight:300;\n font-size:20px;\n text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);\n border-right: 1px solid #C1C3D1;\n }\n \n td:last-child {\n border-right: 0px;\n }\n \n th.text-left {\n text-align: left;\n }\n \n th.text-center {\n text-align: center;\n }\n \n th.text-right {\n text-align: right;\n }\n \n td.text-left {\n text-align: left;\n }\n \n td.text-center {\n text-align: center;\n }\n \n td.text-right {\n text-align: right;\n }\n </style>\n</head>\n\n<body>\n <div class = \"center wrapper\">\n \n <br>\n <br>\n \n <div class=\"table-title\">\n <h1>Bem Vindo ao meu Aplicativo Web de Reconhecimento de Imagens!</h1>\n </div>\n \n <div class=\"textforms\">\n <form action=\"{{req._parsedUrl.pathname}}\">\n \n <div class=\"container\">\n <img src=\"https://raw.githubusercontent.com/munhozpf/Watson-VR_on_Node-RED/master/elantra.jpg\" height=\"300\" />\n <p>Elantra Touring Hatchback</p>\n </div>\n \n <div class=\"container\">\n <img class=\"middle-img\" src=\"https://raw.githubusercontent.com/munhozpf/Watson-VR_on_Node-RED/master/volvo-x90-suv.jpg\" height=\"300\" />\n <p>Volvo X-90 SUV</p>\n </div>\n \n <div class=\"container\">\n <img src=\"https://raw.githubusercontent.com/munhozpf/Watson-VR_on_Node-RED/master/bmw.jpg\" height=\"300\" />\n <p>BMW M3 Coupe</p>\n </div>\n \n <br>\n <br>\n \n <div class=\"table-title\">\n <h3>Classificadores de Imagem Conectados</h3>\n </div>\n <table class=\"table-fill\">\n <thead>\n <tr>\n <th>Model Name</th> <th>Model ID</th> <th>Status</th>\n </tr>\n </thead>\n <tbody class=\"table-hover\">\n <tr>\n <td>Default Watson Classifier</td>\n <td>default</td>\n <td><i>ready</i></td>\n </tr>\n \n {{#result.classifiers}}\n <tr>\n <td><b>{{name}}</b></td> <td><b>{{classifier_id}}</b></td> <td><i>{{status}}</i></td>\n </tr>\n {{/result.classifiers}}\n </tbody>\n </table>\n \n <br>\n <br>\n \n Para analisar uma imagem, insira a URL (terminando em .jpg ou .png) e um Model ID abaixo.\n <br>\n <p>\n Image URL:\n <input type=\"text\" name=\"url\"/>   \n Model ID:\n <input type=\"text\" name=\"classifier_id\" value=\"default\"/>  \n <input class=\"button button2\" type=\"submit\" value=\"Analisar\"/>\n </p>\n <br>\n <br>\n <br>\n \n </form>\n </div>\n </div>\n</body>\n</html>","x":839,"y":272,"wires":[["8d903bfa.c75d98"]]},{"id":"c0b5e42.1bfaf18","type":"template","z":"7e0b0fe1.12e1c","name":"Report Default","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<html>\n<head>\n <link href=\"https://fonts.googleapis.com/css?family=Barlow+Condensed\" rel=\"stylesheet\">\n <title>Watson Visual Recognition on Node-RED</title>\n <style>\n @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);\n \n div.container {\n display:inline-block;\n }\n \n p {\n text-align:center;\n }\n \n .centered { \n margin: 0 auto; \n width: 50%;\n }\n \n .button {\n background-color: #4CAF50; /* Green */\n border: none;\n color: white;\n padding: 3px 35px;\n text-align: center;\n text-decoration: none;\n display: inline-block;\n font-size: 16px;\n margin: 4px 2px;\n -webkit-transition-duration: 0.4s; /* Safari */\n transition-duration: 0.4s;\n cursor: pointer;\n }\n \n .button2 {\n background-color: white; \n color: black; \n border: 2px solid #008CBA;\n }\n \n .button2:hover {\n background-color: #008CBA;\n color: white;\n } \n \n h1, h2, h3, h4, h5, h6 {\n font-family: 'Barlow Condensed', sans-serif;\n font-weight: 500;\n color: WHITE;\n margin-top:5px;\n margin-bottom:5px;\n }\n \n h1, h2, h3 {\n text-transform:uppercase;\n }\n \n img {\n background-color: white;\n margin-top: 85px;\n display: block;\n margin-left: auto;\n margin-right: auto;\n border: 1px solid #ddd;\n border-radius: 4px;\n padding: 5px;\n }\n \n .center {\n margin: auto;\n width: 100%;\n }\n \n .wrapper {\n text-align: center;\n }\n \n .textforms {\n color: white;\n font-family: 'Barlow Condensed', sans-serif;\n font-size: 1.1vw;\n line-height: 180%;\n padding: 20px 40px 60px;\n margin: 20px 0px 60px;\n }\n \n textarea {\n height: 32px;\n color: white;\n text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);\n background-color: \t#152934;\n border: 1px solid white;\n border-radius: 4px;\n }\n \n textarea:focus {\n background-color: #152934;\n border: 2px solid BLACK;\n color: WHITE\n }\n \n input[type=text] {\n color: white;\n text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);\n background-color: \t#152934;\n border: 1px solid #152934;\n padding: 12px 20px;\n margin: 8px 0;\n box-sizing: border-box;\n -webkit-border-radius: 4px;\n -moz-border-radius: 4px;\n border-radius: 4px;\n }\n \n input[type=text]:focus {\n background-color: #152934;\n border: 2px solid BLACK;\n color: WHITE\n }\n \n .btn-primary {\n background: #5aaafa;\n color: #2d3f49;\n }\n \n /* TABLE INFO */\n \n body {\n /* background-color: #3e94ec; */\n background-color: #2d3f49;\n font-family: \"Roboto\", helvetica, arial, sans-serif;\n font-size: 16px;\n font-weight: 400;\n text-rendering: optimizeLegibility;\n }\n \n div.table-title {\n display: block;\n margin: auto;\n max-width: 800px;\n padding:5px;\n width: 100%;\n }\n \n .table-title h3 {\n color: #fafafa;\n font-size: 30px;\n font-weight: 400;\n font-style:normal;\n font-family: \"Roboto\", helvetica, arial, sans-serif;\n text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);\n text-transform:uppercase;\n }\n \n .table-title h1 {\n color: #fafafa;\n font-size: 40px;\n font-weight: 400;\n font-style:normal;\n font-family: \"Roboto\", helvetica, arial, sans-serif;\n text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);\n text-transform:uppercase;\n }\n \n /*** Table Styles **/\n \n .table-fill {\n height: 14px\n background: white;\n border-radius:3px;\n border-collapse: collapse;\n height: 150px;\n margin: auto;\n max-width: 800px;\n padding: 5px;\n width: 800px;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);\n animation: float 5s infinite;\n }\n \n th {\n color:#D5DDE5;;\n background:#1b1e24;\n border-bottom:4px solid #9ea7af;\n border-right: 1px solid #343a45;\n font-size:32px;\n font-weight: 100;\n padding: 24px;\n text-align:left;\n text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);\n vertical-align:middle;\n }\n \n th:first-child {\n border-top-left-radius:3px;\n }\n \n th:last-child {\n border-top-right-radius:3px;\n border-right:none;\n }\n \n tr {\n border-top: 1px solid #C1C3D1;\n border-bottom: 1px solid #C1C3D1;\n color:#666B85;\n font-size:20px;\n font-weight:normal;\n text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);\n }\n \n tr:hover td {\n background:#4E5066;\n color:#FFFFFF;\n border-top: 1px solid #22262e;\n }\n \n tr:first-child {\n border-top:none;\n }\n \n tr:last-child {\n border-bottom:none;\n }\n \n tr:nth-child(odd) td {\n background:#EBEBEB;\n }\n \n tr:nth-child(odd):hover td {\n background:#4E5066;\n }\n \n tr:last-child td:first-child {\n border-bottom-left-radius:3px;\n }\n \n tr:last-child td:last-child {\n border-bottom-right-radius:3px;\n }\n \n td {\n background:#FFFFFF;\n padding: 20px;\n text-align:left;\n vertical-align:middle;\n font-weight:300;\n font-size:20px;\n text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);\n border-right: 1px solid #C1C3D1;\n }\n \n td:last-child {\n border-right: 0px;\n }\n \n th.text-left {\n text-align: left;\n }\n \n th.text-center {\n text-align: center;\n }\n \n th.text-right {\n text-align: right;\n }\n \n td.text-left {\n text-align: left;\n }\n \n td.text-center {\n text-align: center;\n }\n \n td.text-right {\n text-align: right;\n }\n </style>\n</head>\n\n<body>\n <div class = \"center wrapper\">\n \n <br>\n <br>\n \n <div class=\"table-title\">\n <h1>Watson Visual Recognition</h1>\n </div>\n <br>\n <br>\n <h3>Imagem Analisada: {{payload}}<br/><img src=\"{{payload}}\" height='300'/></h3><br>\n <div class=\"textforms\">\n <div class=\"table-title\">\n <h3>Resultados</h3>\n </div>\n <table class=\"table-fill\">\n <thead>\n <tr>\n <th>Classe</th> <th>Pontuação</th>\n </tr>\n </thead>\n <tbody class=\"table-hover\">\n {{#result.images.0.classifiers.0.classes}}\n <tr><td><b>{{class}}</b></td><td><i>{{score}}</i></td></tr>\n {{/result.images.0.classifiers.0.classes}}\n </tbody>\n </table>\n \n <form action=\"{{req._parsedUrl.pathname}}\">\n <br>\n <input class=\"button button2\" type=\"submit\" value=\"Retornar\"/>\n </form>\n </div>\n </div>\n</body>\n</html>","x":1000,"y":360,"wires":[["8d903bfa.c75d98"]]},{"id":"8d4759a8.aa4d18","type":"change","z":"7e0b0fe1.12e1c","name":"Extract img URL","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.url","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":580,"y":360,"wires":[["36eeec17.142b74"]]},{"id":"c7a3e86c.d930f8","type":"http in","z":"7e0b0fe1.12e1c","name":"","url":"/aulaovr","method":"get","upload":false,"swaggerDoc":"","x":68,"y":189,"wires":[["e02900cb.0bef3"]]},{"id":"89f5a55b.bd3148","type":"comment","z":"7e0b0fe1.12e1c","name":"ATENÇÃO!!! Configurar manualmente os dois nós do VR com a API-KEY do serviço!","info":"","x":530,"y":60,"wires":[]},{"id":"2177cf3d.9d00b","type":"switch","z":"7e0b0fe1.12e1c","name":"Check classifier param","property":"payload.classifier_id","propertyType":"msg","rules":[{"t":"null"},{"t":"else"}],"checkall":"false","repair":false,"outputs":2,"x":305.5,"y":368.75,"wires":[["8d4759a8.aa4d18"],["aed5bdc3.1538c"]]},{"id":"aed5bdc3.1538c","type":"function","z":"7e0b0fe1.12e1c","name":"set classifier_id","func":"var cid = msg.payload.classifier_id\nmsg.params = []; \nmsg.params[\"classifier_ids\"] = cid; \nreturn msg;","outputs":1,"noerr":0,"x":462,"y":480.75,"wires":[["8d4759a8.aa4d18"]]},{"id":"f75974ac.4b5ee8","type":"visual-recognition-util-v3","z":"7e0b0fe1.12e1c","name":"retrieve custom classifiers list","apikey":"nphRX4i75EFNlg7HycpJoHQGWODqHJhuPDqiEn3s2Ugv","vr-service-endpoint":"https://gateway.watsonplatform.net/visual-recognition/api","image-feature":"retrieveClassifiersList","x":514.36669921875,"y":271.25,"wires":[["4c82940e.7a6d5c","2d7fb5dc.c4fb7a"]]},{"id":"2d7fb5dc.c4fb7a","type":"debug","z":"7e0b0fe1.12e1c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"result","x":838.36669921875,"y":196.25,"wires":[]},{"id":"cf2912c7.13e16","type":"comment","z":"7e0b0fe1.12e1c","name":"Para acessar a aplicação: https://sua_url_do_nodered.mybluemix.net/aulaovr","info":"","x":530,"y":100,"wires":[]}]