v3.html

<!--
  Copyright 2013,2015 IBM Corp.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->

<script type="text/x-red" data-template-name="visual-recognition-v3">
    <div id="credentials-check" class="form-row">
        <div class="form-tips">
            <i class="fa fa-question-circle"></i><b> Please wait: </b> Checking for bound service credentials...
        </div>
    </div>
    <div class="form-row credentials" style="display: none;">
        <label for="node-input-apikey"><i class="fa fa-key"></i> <span data-i18n="visualRecognition.label.apiKey"></span></label>
        <input type="password" id="node-input-apikey" data-i18n="[placeholder]visualRecognition.label.apiKey">
    </div>
    <div class="form-row credentials">
        <label for="node-input-vr-service-endpoint"><i class="fa fa-tag"></i> <span data-i18n="visualRecognition.label.serviceEndpoint"></label>
        <select type="text" id="node-input-vr-service-endpoint" style="display: inline-block; width: 70%;" >
            <option value="https://gateway-a.watsonplatform.net/visual-recognition/api">https://gateway-a.watsonplatform.net/visual-recognition/api</option>
            <option value="https://gateway.watsonplatform.net/visual-recognition/api">https://gateway.watsonplatform.net/visual-recognition/api</option>
        </select>
    </div>

    <div class="form-row">
        <label for="node-input-image-feature"><i class="fa fa-book"></i> <span data-i18n="visualRecognition.label.detect"> </label>
        <select type="text" id="node-input-image-feature" style="display: inline-block; width: 70%;">
            <option selected="selected" value="classifyImage" data-i18n="visualRecognition.label.classifyAnImage"></option>
            <option value="detectFaces" data-i18n="visualRecognition.label.detectFaces"></option>
        </select>
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
    </div>
    <div class="form-row" id="lang-group">
        <label for="node-input-lang"><i class="fa fa-language"></i> <span data-i18n="visualRecognition.label.language"></label>
        <select type="text" id="node-input-lang" style="display: inline-block; width: 70%;" >
            <option selected="selected" value="en" data-i18n="visualRecognition.label.english"></option>
            <option value="es" data-i18n="visualRecognition.label.spanish"></option>
            <option value="de" data-i18n="visualRecognition.label.german"></option>
            <option value="fr" data-i18n="visualRecognition.label.french"></option>
            <option value="it" data-i18n="visualRecognition.label.italian"></option>
            <option value="pt-br" data-i18n="visualRecognition.label.portugueseBrazilian"></option>
            <option value="zh-cn" data-i18n="visualRecognition.label.chineseSimplified"></option>
            <option value="zh-tw" data-i18n="visualRecognition.label.chineseTraditional"></option>
            <option value="ar" data-i18n="visualRecognition.label.arabic"></option>
            <option value="ja" data-i18n="visualRecognition.label.japanese"></option>
            <option value="ko" data-i18n="visualRecognition.label.korean"></option>
        </select>
    </div>
</script>


<script type="text/x-red" data-template-name="visual-recognition-util-v3">
    <div id="credentials-check" class="form-row">
        <div class="form-tips">
            <i class="fa fa-question-circle"></i><b> Please wait: </b> Checking for bound service credentials...
        </div>
    </div>
    <div class="form-row credentials" style="display: none;">
        <label for="node-input-apikey"><i class="fa fa-key"></i> API Key</label>
        <input type="password" id="node-input-apikey" placeholder="API Key">
    </div>
    <div class="form-row credentials">
        <label for="node-input-vr-service-endpoint"><i class="fa fa-tag"></i> Service Endpoint</label>
        <select type="text" id="node-input-vr-service-endpoint" style="display: inline-block; width: 70%;" >
            <option value="https://gateway-a.watsonplatform.net/visual-recognition/api">https://gateway-a.watsonplatform.net/visual-recognition/api</option>
            <option value="https://gateway.watsonplatform.net/visual-recognition/api">https://gateway.watsonplatform.net/visual-recognition/api</option>
        </select>
    </div>

    <div class="form-row">
        <label for="node-input-image-feature"><i class="fa fa-book"></i> Detect: </label>
        <select type="text" id="node-input-image-feature" style="display: inline-block; width: 70%;">
            <option value="createClassifier">Create a classifier</option>
            <option value="retrieveClassifiersList">Retrieve a list of classifiers</option>
            <option value="retrieveClassifierDetails">Retrieve Classifier Details</option>
            <option value="updateClassifier">Update a classifier</option>
            <option value="deleteClassifier">Delete a classifier</option>
            <option value="deleteAllClassifiers">Delete all classifiers</option>
        </select>
    </div>
    <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>
</script>

<script type="text/x-red" data-help-name="visual-recognition-v3">
	<p>Using the Visual Recognition v3 node, you can use the Watson Visual Recognition service V3 to identify scenes, objects, faces, and text in images you upload to the service. You can create and train a custom classifier to identify subjects that suit your needs.</p>
    <p>The following features are available :</p>
    <ul>
        <li><b>Classify an image</b> Upload images or URLs to identify built-in classifiers by default. To identify custom classifiers, include the classifier_ids or owners parameters. Images must be in .jpeg, .jpg or .png format.</li>
        <li><b>Detect Faces</b> : analyze faces in images and get data about them, such as estimated age and gender. Images must be in .jpeg, .jpg or .png format.</li>
        <li><b>Recognize Text</b> : recognizes text in images. This is a beta function of the Visual Recognition service that supports only English language text identification</li>
    </ul>

    <p>All Results will made available at <code>msg.result</code></p>
    <p>Important : Maximum image size is 2 MB</p>
    <br/>

    <p><b>Classify an image</b></p>
    <p>This feature should be provided in input : </p>
    <ul>
    <li><code>msg.payload</code> : the URL or the Node.js Buffer of an image. Redirects are followed, so you can use shortened URLs. (Required)</li>
    <li><code>msg.params["detect_mode"]</code> : A setting of "classify" or "faces" indicating the visual recognition feature required. "Default" is "classify" (string) (Optional)</li>
    <li><code>msg.params["classifier_ids"]</code> : A comma-separated list of the classifier IDs used to classify the images. "Default" is the classifier_id of the built-in classifier. (string) (Optional)</li>
    <li><code>msg.params["owners"]</code> : A comma-separated list with the value(s) "IBM" and/or "me" to specify which classifiers to run. (string) (Optional)</li>
    <li><code>msg.params["threshold"]</code> : A floating value (in string format) that specifies the minimum score a class must have to be displayed in the response (Optional)</li>
    <li><code>msg.params["accept_language"]</code> : Specifies the language of the output class names. Can be 'en' (English as default), 'es' (Spanish), 'ar' (Arabic) or 'ja' (Japanese). Classes for which no translation is available are omitted. If specified, it overrides the language specified in the node configuration (Optional)</li>
    </ul>
    <p>More information on this <a href="http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/visual-recognition/api/v3/?curl#classify_an_image">API documentation</a>.</p>

    <p><b>Detect Faces</b></p>
    <p>This feature should be provided in input : </p>
    <ul>
    <li><code>msg.payload</code> : the URL or the Node.js Buffer of an image. Redirects are followed, so you can use shortened URLs. (Required)</li>
    </ul>
    <p>More information on this <a href="http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/visual-recognition/api/v3/?curl#detect_faces">API documentation</a>.</p>

    <p><b>Text Recognition</b></p>
    <p>This feature should be provided in input : </p>
    <ul>
    <li><code>msg.payload</code> : the URL or the Node.js Buffer of an image. Redirects are followed, so you can use shortened URLs. (Required)</li>
    </ul>
    <p>More information on this <a href="http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/visual-recognition/api/v3/?curl#recognize_text">API documentation</a>.</p>

    <br/>
    <p>For full details on the feature details and response values, please see the <a href="http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/visual-recognition/api/v3/">Watson Visual Recognition (v3) API documentation</a></p>

    <p>Check the sample Flow for this node on  <a href="https://github.com/watson-developer-cloud/node-red-bluemix-starter">Watson Node-RED Starter</a></p>
</script>




<script type="text/javascript">

// Need to simulate a namespace, as some of the variables had started to leak across nodes
  function VISUALRECOGNITIONV3 () {
  }

  // This is the namespace for visualrecognitionv3. Currently only contains models, but more vars and functions may need to be
  // moved in if there is a clash with other nodes.
  var visualrecognitionv3 = new VISUALRECOGNITIONV3();
  visualrecognitionv3.language_selected = '';

  // Save the values in the dynamic lists to the hidden fields.
  function oneditsave(){
    visualrecognitionv3.language_selected = $('#node-input-lang').val();
  }

    (function() {
        RED.nodes.registerType('visual-recognition-v3', {
            category: 'IBM Watson',
            defaults: {
              name: {value: ""},
              'vr-service-endpoint' :{value: 'https://gateway-a.watsonplatform.net/visual-recognition/api'},
              "image-feature": {value: ""},
              "lang": {value: ""},
            },
            credentials: {
              apikey: {type:"password"}
            },
            color: 'rgb(228, 189, 255)',
            inputs: 1,
            outputs: 1,
            icon: "VR-v3-pink.png",
            paletteLabel: "visual recognition",
            label: function() {
                return this.name || "visual recognition";
            },
            labelStyle: function() {
                return this.name ? "node_label_italic" : "";
            },
            oneditprepare: function() {
              var node = this;
              $.getJSON('watson-visual-recognition/vcap/')
                  .done(function (service) {
                    $('.credentials').toggle(!service);
                  })
                  .fail(function () {
                    $('.credentials').show();
                  })
                  .always(function () {
                    $('#credentials-check').hide();
                  });

              // Default the type of extraction, as its coming up blank,
              // which is confusing our users
              var currfeature = $('#node-input-image-feature').val();
              if (!currfeature) {
                $("#node-input-image-feature option[value='classifyImage']").prop('selected', true);
              }

              // update list of ruleset for the selected service when the service changes
              // The language is needed for the classifyImage, and if not set causes
              // problems downstream. So if it is not set will default to English.
              // Even though selected='selected' is set in the html for the dialog it
              // doesn't appear.
              $('#node-input-image-feature').change(function() {
                var selectedFeature = $('#node-input-image-feature');
                if (selectedFeature.val() == 'classifyImage') {
                    var currvalue = $('#node-input-lang').val();
                    if (!currvalue) {
                      if (!visualrecognitionv3.language_selected) {
                        visualrecognitionv3.language_selected = 'en';
                        $("#node-input-lang option[value='en']").prop('selected', true);
                      }
                    }
                    $('#lang-group').show();
                }
                else {
                    $('#lang-group').hide();
                }
              });
            },
            oneditsave: oneditsave
        });


        RED.nodes.registerType('visual-recognition-util-v3', {
            category: 'IBM Watson',
            defaults: {
              name: {value: ""},
              'vr-service-endpoint' :{value: 'https://gateway-a.watsonplatform.net/visual-recognition/api'},
              "image-feature": {value: ""}
            },
            credentials: {
              apikey: {type:"password"}
            },
            color: 'rgb(228, 189, 255)',
            inputs: 1,
            outputs: 1,
            icon: "VR-v3-pink.png",
            paletteLabel: "visual recognition util",
            label: function() {
                return this.name || "visual recognition util";
            },
            labelStyle: function() {
                return this.name ? "node_label_italic" : "";
            },
            oneditprepare: function() {
              $.getJSON('watson-visual-recognition/vcap/')
                  .done(function (service) {
                    $('.credentials').toggle(!service);
                  })
                  .fail(function () {
                    $('.credentials').show();
                  })
                  .always(function () {
                    $('#credentials-check').hide();
                  })
            }
        });
    })();
</script>

<script type="text/x-red" data-help-name="visual-recognition-util-v3">
	<p> This node enables you to use the training features of the Watson Visual Recognition service V3 that aims to identify scenes, objects, faces, and text in images you upload to the service. Using this node you can create and train a custom classifier to identify subjects that suit your needs.</p>
    <p>The following features are available :</p>
    <ul>
        <li><b>Create a classifier</b> </li>
        <li><b>Retrieve a list of custom classifier</b></li>
        <li><b>Retrieve classifier details</b></li>
        <li><b>Delete a classifier</b></li>
        <li><b>Delete all classifiers</b></li>
    </ul>

    <p>All Results will made available at <code>msg.result</code></p>

    <p><b>Create a Classifier</b></p>
    <p>this feature should be provided in input : </p>
    <ul>
    <li><code>msg.params["name"]</code> : a string name that will be used as prefix for the returned classifier_id (Required)</li>
    <li><code>msg.params["{classname}_positive_examples"]</code> : a Node.js binary Buffer of the ZIP that contains a minimum of 10 images. (Required)</li>
    <li><code>msg.params["negative_examples"]</code> : a Node.js binary Buffer of the ZIP that contains a minimum of 10 images.(Optional)</li>
    </ul>
    <p>More information on this <a href="http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/visual-recognition/api/v3/?curl#create_a_classifier">API documentation</a>.</p>

    <p><b>Retrieve classifiers list</b></p>
    <p>this feature does not need input params.</p>

    <p>More information on this <a href="http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/visual-recognition/api/v3/?curl#retrieve_a_list_of_classifiers">API documentation</a>.</p>

    <p><b>Retrieve a classifier details</b></p>
    <p>this feature should be provided in input : </p>
    <ul>
    <li><code>msg.params["classifier_id"]</code> : the classifier_id (string) (Required)</li>
    </ul>
    <p>More information on this <a href="http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/visual-recognition/api/v3/?curl#retrieve_classifier_details">API documentation</a>.</p>

    <p><b>Delete a classifier </b></p>
    <p>this feature should be provided in input : </p>
    <ul>
    <li><code>msg.params["classifier_id"]</code> : the classifier_id (string) (Required)</li>
    </ul>
    <p>More information on this <a href="http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/visual-recognition/api/v3/?curl#delete_a_classifier">API documentation</a>.</p>

    <p>For full details on the feature details and response values, please see the <a href="http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/visual-recognition/api/v3/">Watson Visual Recognition (v3) API documentation</a></p>

    <p><b>Delete All Classifiers</b></p>
    <p>This feature simply delete all custom classifiers associated to the service instance. This feature does not need input params.</p>

    <br/>
    <p>For full details on the feature details and response values, please see the <a href="http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/visual-recognition/api/v3/">Watson Visual Recognition (v3) API documentation</a></p>

    <p>Check the sample Flow for this node on  <a href="https://github.com/watson-developer-cloud/node-red-bluemix-starter">Watson Node-RED Starter</a></p>

</script>