node-red-contrib-human-recognition
Version:
Provides a node-red node for Human Detection & Human Recognition.
426 lines (386 loc) • 19.2 kB
HTML
<script type="text/x-red" data-template-name="human-recognition">
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name">
</div>
<div class="form-row">
<label for="node-input-image"><i class="fa fa-ellipsis-h"></i> Image</label>
<input type="text" id="node-input-image" placeholder="payload" style="width:calc(70% - 1px)">
</div>
<div class="form-row">
<label for="node-input-OverRideMyConfigMSG"><i class="fa fa-ellipsis-h"></i> Config</label>
<input type="text" id="node-input-OverRideMyConfigMSG" placeholder="config" style="width:calc(70% - 1px)">
</div>
<div class="form-row">
<label for="node-input-UserEmbeddings"><i class="fa fa-ellipsis-h"></i> Embeddings</label>
<input type="text" id="node-input-UserEmbeddings" placeholder="embeddings" style="width:calc(70% - 1px)">
</div>
<div class="form-row">
<label for="node-input-bindings"><i class="fa fa-cog"></i> Bindings</label>
<select id="node-input-bindings" style="width: 70%">
<option value="CPU">CPU - @tensorflow/tfjs-node</option>
<option value="GPU">GPU - @tensorflow/tfjs-node-gpu</option>
</select>
</div>
<div class="form-row">
<label><i class="fa fa-cog"></i> Human</label>
<label>scoped</label>
<select id="node-input-scoped" style="width: 15%">
<option value="true">true</option>
<option value="false">false</option>
</select>
<br>
        <label>warmup</label>
<select id="node-input-warmup" style="width: 15%">
<option value="none">none</option>
<option value="face">face</option>
<option value="full">full</option>
</select>
</div>
<div class="form-row">
<label for="node-input-FaceDetector"><i class="fa fa-cog"></i> FaceDetect</label>
<select id="node-input-FaceDetector" style="width: 70%">
<option value="faceboxes">faceboxes</option>
<!-- <option value="blazeface-front">blazeface-front</option> -->
<!-- <option value="blazeface-back">blazeface-back</option> -->
<option value="disabled">disabled</option>
</select>
</div>
<div class="form-row node-type-FaceDetector_Options">
        <label>inputSize</label>
 <select id="node-input-FaceDetector_Options_inputSize" style="width: 15%">
<option value=128>128</option>
<option value=256>256</option>
</select>
</div>
<div class="form-row node-type-FaceDetector_Options">
        <label>rotation</label>
 <select id="node-input-FaceDetector_Options_rotation" style="width: 15%">
<option value="true">true</option>
<option value="false">false</option>
</select>
</div>
<div class="form-row node-type-FaceDetector_Options">
        <label>maxFaces</label>
 <input type="text" id="node-input-FaceDetector_Options_maxFaces" style="width:calc(10% - 1px)"/> (1-100)
</div>
<div class="form-row node-type-FaceDetector_Options">
        <label>iouThreshold</label>
 <input type="text" id="node-input-FaceDetector_Options_iouThreshold" style="width:calc(10% - 1px)"/> (0-1)
</div>
<div class="form-row node-type-FaceDetector_Options">
        <label>scoreThreshold</label>
 <input type="text" id="node-input-FaceDetector_Options_scoreThreshold" style="width:calc(10% - 1px)"/> (0-1)
</div>
<div class="form-row node-type-FaceDetector_Options">
        <label>minConfidence</label>
 <input type="text" id="node-input-FaceDetector_Options_minConfidence" style="width:calc(10% - 1px)"/> (0-1)
</div>
<div class="form-row node-type-FaceDetector_Options">
<div class="form-row">
<label for="node-input-FaceMesh"><i class="fa fa-cog"></i> FaceMesh</label>
<select id="node-input-FaceMesh" style="width: 70%">
<option value="true">enabled</option>
<option value="false">disabled</option>
</select>
</div>
<div class="form-row node-type-FaceMesh_Options">
        <label>returnRawData</label>
 <select id="node-input-FaceMesh_Options_returnRawData" style="width: 15%">
<option value="true">true</option>
<option value="false">false</option>
</select>
</div>
<div class="form-row">
<label for="node-input-Iris"><i class="fa fa-cog"></i> Iris</label>
<select id="node-input-Iris" style="width: 70%">
<option value="true">enabled</option>
<option value="false">disabled</option>
</select>
</div>
<div class="form-row">
<label for="node-input-Age"><i class="fa fa-cog"></i> Age</label>
<select id="node-input-Age" style="width: 70%">
<option value="age-ssrnet-imdb">age-ssrnet-imdb</option>
<option value="age-ssrnet-wiki">age-ssrnet-wiki</option>
<option value="disabled">disabled</option>
</select>
</div>
<div class="form-row">
<label for="node-input-Gender"><i class="fa fa-cog"></i> Gender</label>
<select id="node-input-Gender" style="width: 70%">
<option value="gender-ssrnet-imdb">gender-ssrnet-imdb</option>
<option value="gender-ssrnet-wiki">gender-ssrnet-wiki</option>
<option value="gender">gender</option>
<option value="disabled">disabled</option>
</select>
</div>
<div class="form-row node-type-Gender_Options">
        <label>minConfidence</label>
 <input type="text" id="node-input-Gender_Options_minConfidence" style="width:calc(10% - 1px)"/> (0-1)
</div>
<div class="form-row">
<label for="node-input-Emotion"><i class="fa fa-cog"></i> Emotion</label>
<select id="node-input-Emotion" style="width: 70%">
<option value="emotion-large">emotion-large</option>
<option value="emotion-mini">emotion-mini</option>
<option value="disabled">disabled</option>
</select>
</div>
<div class="form-row node-type-Emotion_Options">
        <label>minConfidence</label>
 <input type="text" id="node-input-Emotion_Options_minConfidence" style="width:calc(10% - 1px)"/> (0-1)
</div>
<div class="form-row">
<label for="node-input-Embedding"><i class="fa fa-cog"></i> Embedding</label>
<select id="node-input-Embedding" style="width: 70%">
<option value="true">enabled</option>
<option value="false">disabled</option>
</select>
</div>
</div>
<div class="form-row">
<label for="node-input-BodyDetector"><i class="fa fa-cog"></i> BodyDetect</label>
<select id="node-input-BodyDetector" style="width: 70%">
<option value="true">enabled</option>
<option value="false">disabled</option>
</select>
</div>
<div class="form-row node-type-BodyDetector_Options">
        <label>maxDetections</label>
 <input type="text" id="node-input-BodyDetector_Options_maxDetections" style="width:calc(10% - 1px)"/> (1-100)
</div>
<div class="form-row node-type-BodyDetector_Options">
        <label>scoreThreshold</label>
 <input type="text" id="node-input-BodyDetector_Options_scoreThreshold" style="width:calc(10% - 1px)"/> (0-1)
</div>
<div class="form-row node-type-BodyDetector_Options">
        <label>nmsRadius</label>
 <input type="text" id="node-input-BodyDetector_Options_nmsRadius" style="width:calc(10% - 1px)"/> (0-40)
</div>
<div class="form-row node-type-BodyDetector_Options">
        <label>inputSize</label>
 <select id="node-input-BodyDetector_Options_outputStride" style="width: 15%">
<option value=8>8</option>
<option value=16>16</option>
<option value=32>32</option>
</select>
</div>
<div class="form-row">
<label for="node-input-HandDetector"><i class="fa fa-cog"></i> HandDetect</label>
<select id="node-input-HandDetector" style="width: 70%">
<option value="true">enabled</option>
<option value="false">disabled</option>
</select>
</div>
<div class="form-row node-type-HandDetector_Options">
        <label>rotation</label>
 <select id="node-input-HandDetector_Options_rotation" style="width: 15%">
<option value="true">true</option>
<option value="false">false</option>
</select>
</div>
<div class="form-row node-type-HandDetector_Options">
        <label>landmarks</label>
 <select id="node-input-HandDetector_Options_landmarks" style="width: 15%">
<option value="true">true</option>
<option value="false">false</option>
</select>
</div>
<div class="form-row node-type-HandDetector_Options">
        <label>minConfidence</label>
 <input type="text" id="node-input-HandDetector_Options_minConfidence" style="width:calc(10% - 1px)"/> (0-1)
</div>
<div class="form-row node-type-HandDetector_Options">
        <label>iouThreshold</label>
 <input type="text" id="node-input-HandDetector_Options_iouThreshold" style="width:calc(10% - 1px)"/> (0-1)
</div>
<div class="form-row node-type-HandDetector_Options">
        <label>scoreThreshold</label>
 <input type="text" id="node-input-HandDetector_Options_scoreThreshold" style="width:calc(10% - 1px)"/> (0-1)
</div>
<div class="form-row node-type-HandDetector_Options">
        <label>maxHands</label>
 <input type="text" id="node-input-HandDetector_Options_maxHands" style="width:calc(10% - 1px)"/> (1-100)
</div>
</script>
<script type="text/html" data-help-name="human-recognition">
<p>Provides a node-red node for human Detection & human Recognition.</p>
<h3>Inputs</h3>
<dl class="message-properties">
<dt>payload
<span class="property-type">buffered image</span>
</dt>
<dd> Takes a buffered image and runs TensorFlow human Detection and/or human Recognition. </dd>
<dt class="optional">Config <span class="property-type">object</span></dt>
<dd> This is optional, you do not have to send it anything. Used to override settings in the nodes config Properties menu.</dd>
</dl>
<h3>Outputs</h3>
<ol class="node-ports">
<li>Standard output
<dl class="message-properties">
<dt>payload <span class="property-type">object</span></dt>
<dd>object containing processed TensorFlow and other values.</dd>
</dl>
</li>
</ol>
<h3>References</h3>
<ul>
<li><a href="https://github.com/meeki007/node-red-contrib-human-recognition/" target="_blank">Full Documentation</a> for this node. Here you will finde examples and explinations on how to use every aspect of this node.</li>
</ul>
</script>
<script type="text/javascript">
RED.nodes.registerType('human-recognition',{
category: 'function',
color: "#00abb0",
defaults: {
image: {value:"payload",required:true},
OverRideMyConfigMSG: {value:"config",required:true},
UserEmbeddings: {value:"embeddings",required:true},
name: {value:""},
bindings: {value:"CPU"},
scoped: {value:"false"},
warmup: {value:"full"},
FaceDetector: {value:"faceboxes"},
FaceDetector_Options_inputSize: {value:256,validate:RED.validators.number()},
FaceDetector_Options_rotation: {value:"false"},
FaceDetector_Options_maxFaces: {value:3,validate:RED.validators.number()},
FaceDetector_Options_iouThreshold: {value:0.2,validate:RED.validators.number()},
FaceDetector_Options_scoreThreshold: {value:0.5,validate:RED.validators.number()},
FaceDetector_Options_minConfidence: {value:0.5,validate:RED.validators.number()},
FaceMesh: {value:"false"},
FaceMesh_Options_returnRawData: {value:"false"},
Iris: {value:"false"},
Age: {value:"disabled"},
Gender: {value:"disabled"},
Gender_Options_minConfidence: {value:0.1,validate:RED.validators.number()},
Emotion: {value:"disabled"},
Emotion_Options_minConfidence: {value:0.2,validate:RED.validators.number()},
Embedding: {value:"false"},
BodyDetector: {value:"false"},
BodyDetector_Options_maxDetections: {value:3,validate:RED.validators.number()},
BodyDetector_Options_scoreThreshold: {value:0.5,validate:RED.validators.number()},
BodyDetector_Options_nmsRadius: {value:20,validate:RED.validators.number()},
BodyDetector_Options_outputStride: {value:16},
HandDetector: {value:"false"},
HandDetector_Options_rotation: {value:"false"},
HandDetector_Options_landmarks: {value:"false"},
HandDetector_Options_maxHands: {value:3,validate:RED.validators.number()},
HandDetector_Options_minConfidence: {value:0.1,validate:RED.validators.number()},
HandDetector_Options_iouThreshold: {value:0.1,validate:RED.validators.number()},
HandDetector_Options_scoreThreshold: {value:0.5,validate:RED.validators.number()},
},
paletteLabel: 'human-recognition',
inputs:1,
outputs:1,
icon: "human-recognition.png",
label: function() {
return this.name||"human-recognition";
},
oneditprepare: function() {
// defaults
//set depfault value for propery if undefined, else use user defined
if (this.image === undefined)
{
$("#node-input-image").val("payload");
}
$("#node-input-image").typedInput({default:'msg',types:['msg']});
//set depfault value for config if undefined, else use user defined
if (this.OverRideMyConfigMSG === undefined)
{
$("#node-input-OverRideMyConfigMSG").val("config");
}
$("#node-input-OverRideMyConfigMSG").typedInput({default:'msg',types:['msg']});
//set depfault value for embeddings if undefined, else use user defined
if (this.UserEmbeddings === undefined)
{
$("#node-input-UserEmbeddings").val("embeddings");
}
$("#node-input-UserEmbeddings").typedInput({default:'msg',types:['msg']});
//set default selection for dropdown of node-input-FaceDetector
this.FaceDetector = !this.FaceDetector ? "faceboxes" : this.FaceDetector;
//show selection hide other
$("#node-input-FaceDetector").change(function()
{
if ($(this).val() == "disabled")
{
$(".node-type-FaceDetector_Options").hide();
}
else
{
$(".node-type-FaceDetector_Options").show();
}
});
//set default selection for dropdown of node-input-FaceMesh
this.FaceMesh = !this.FaceMesh ? "false" : this.FaceMesh;
//show selection hide other
$("#node-input-FaceMesh").change(function()
{
if ($(this).val() == "false")
{
$(".node-type-FaceMesh_Options").hide();
}
else
{
$(".node-type-FaceMesh_Options").show();
}
});
//set default selection for dropdown of node-input-Gender
this.Gender = !this.Gender ? "disabled" : this.Gender;
//show selection hide other
$("#node-input-Gender").change(function()
{
if ($(this).val() == "disabled")
{
$(".node-type-Gender_Options").hide();
}
else
{
$(".node-type-Gender_Options").show();
}
});
//set default selection for dropdown of node-input-Emotion
this.Emotion = !this.Emotion ? "disabled" : this.Emotion;
//show selection hide other
$("#node-input-Emotion").change(function()
{
if ($(this).val() == "disabled")
{
$(".node-type-Emotion_Options").hide();
}
else
{
$(".node-type-Emotion_Options").show();
}
});
//set default selection for dropdown of node-input-BodyDetector
this.BodyDetector = !this.BodyDetector ? "false" : this.BodyDetector;
//show selection hide other
$("#node-input-BodyDetector").change(function()
{
if ($(this).val() == "false")
{
$(".node-type-BodyDetector_Options").hide();
}
else
{
$(".node-type-BodyDetector_Options").show();
}
});
//set default selection for dropdown of node-input-HandDetector
this.HandDetector = !this.HandDetector ? "false" : this.HandDetector;
//show selection hide other
$("#node-input-HandDetector").change(function()
{
if ($(this).val() == "false")
{
$(".node-type-HandDetector_Options").hide();
}
else
{
$(".node-type-HandDetector_Options").show();
}
});
}
});
</script>