wit-inference-panel.html

<!--
@license
Copyright 2018 The TensorFlow Authors. All Rights Reserved.

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.
-->

<link rel="import" href="../paper-button/paper-button.html" />
<link rel="import" href="../paper-input/paper-input.html" />
<link rel="import" href="../paper-radio-button/paper-radio-button.html" />
<link rel="import" href="../paper-radio-group/paper-radio-group.html" />
<link rel="import" href="../tf-plugin-lib/polymer-interop.html" />

<!--
  Setup dialog for what-if tool.
-->
<dom-module id="wit-inference-panel">
  <template>
    <style id="linter-paper-button-style">
      /**
       * This style preserves the styling previous to
       * https://github.com/PolymerElements/paper-button/pull/115
       * This change can break the layout of paper-button content.
       * Remove this style to apply the change.
       */
      paper-button {
        display: inline-block;
        text-align: center;
        font-family: inherit;
      }
    </style>
    <style>
      :host {
        display: block;
        font-size: 14px;
      }
      tf-option-selector .model-type-button {
        width: auto;
      }
      .flex-holder {
        display: flex;
      }
      .title {
        font-size: 32px;
        margin-bottom: 20px;
      }
      .help-icon {
        width: 15px;
        height: 15px;
        padding: 0;
        color: #757575;
      }
      .tooltip {
        width: 500px;
      }
      .input-in-row {
        margin-right: 10px;
      }
      .flex-grow {
        flex-grow: 1;
      }
      .model-type-label {
        padding-top: 10px;
      }
      .add-model-button-holder {
        display: flex;
      }
      .checkbox {
        margin-top: 30px;
        margin-left: 10px;
      }
      .predict-checkbox {
        margin-top: 43px;
        margin-left: 10px;
      }
      paper-input {
        --paper-input-container-focus-color: #f57c00;
      }
      paper-radio-button {
        --paper-radio-button-unchecked-color: #3c4043;
        --paper-radio-button-unchecked-ink-color: #3c4043;
        --paper-radio-button-checked-color: #3c4043;
        --paper-radio-button-checked-ink-color: #3c4043;
      }
    </style>
    <div class="title">Set up your data and model</div>
    <paper-input
      always-float-label
      label="Inference address"
      placeholder="[[inferenceAddress1]]"
      value="{{inferenceAddress1}}"
    >
    </paper-input>
    <div class="flex-holder">
      <paper-input
        always-float-label
        label="Model name"
        placeholder="[[modelName1]]"
        value="{{modelName1}}"
        class="input-in-row"
      >
      </paper-input>
      <paper-input
        always-float-label
        label="Model version (optional)"
        placeholder="[[modelVersion1]]"
        value="{{modelVersion1}}"
        class="input-in-row"
      >
      </paper-input>
      <paper-input
        always-float-label
        label="Model signature (optional)"
        placeholder="[[modelSignature1]]"
        value="{{modelSignature1}}"
        class="input-in-row"
      >
      </paper-input>
    </div>
    <div hidden$="{{hideModelPane2}}">
      <paper-input
        always-float-label
        label="Inference address"
        placeholder="[[inferenceAddress2]]"
        value="{{inferenceAddress2}}"
      >
      </paper-input>
      <div class="flex-holder">
        <paper-input
          always-float-label
          label="Model name"
          placeholder="[[modelName2]]"
          value="{{modelName2}}"
          class="input-in-row"
        >
        </paper-input>
        <paper-input
          always-float-label
          label="Model version (optional)"
          placeholder="[[modelVersion2]]"
          value="{{modelVersion2}}"
          class="input-in-row"
        >
        </paper-input>
        <paper-input
          always-float-label
          label="Model signature (optional)"
          placeholder="[[modelSignature2]]"
          value="{{modelSignature2}}"
          class="input-in-row"
        >
        </paper-input>
      </div>
    </div>
    <div class="add-model-button-holder" hidden$="{{!hideModelPane2}}">
      <paper-button on-tap="addModelClicked_" class="main-button">
        Add another model for comparison
      </paper-button>
    </div>
    <div class="flex-holder">
      <div>
        <div class="model-type-label">Model Type</div>
        <paper-radio-group selected="{{modelType}}">
          <paper-radio-button name="classification"
            >Classification</paper-radio-button
          >
          <paper-radio-button name="regression">Regression</paper-radio-button>
        </paper-radio-group>
      </div>
      <paper-checkbox checked="{{usePredictApi}}" class="predict-checkbox">
        Uses Predict API
      </paper-checkbox>
    </div>
    <div class="flex-holder">
      <paper-input
        always-float-label
        label="Input tensor name"
        placeholder="[[predictInputTensor]]"
        value="{{predictInputTensor}}"
        class="input-in-row"
        hidden$="[[shouldDisablePredictTensorControls_(usePredictApi)]]"
      >
      </paper-input>
      <paper-input
        always-float-label
        label="Output tensor name"
        placeholder="[[predictOutputTensor]]"
        value="{{predictOutputTensor}}"
        class="input-in-row"
        hidden$="[[shouldDisablePredictTensorControls_(usePredictApi)]]"
      >
      </paper-input>
    </div>
    <div class="flex-holder">
      <paper-input
        always-float-label
        label="Path to examples"
        value="{{examplesPath}}"
        class="flex-grow"
      >
      </paper-input>
      <paper-checkbox checked="{{sequenceExamples}}" class="checkbox">
        SequenceExamples
      </paper-checkbox>
    </div>
    <div class="flex-holder">
      <paper-input
        always-float-label
        type="number"
        class="input-in-row flex-grow"
        label="Maximum number of examples to load"
        placeholder="[[maxExamples]]"
        value="{{maxExamples}}"
      >
      </paper-input>
      <paper-input
        always-float-label
        type="number"
        class="input-in-row flex-grow"
        label="Sampling ratio (0.2 = sample ~20% of examples)"
        placeholder="[[samplingOdds]]"
        value="{{samplingOdds}}"
      >
      </paper-input>
    </div>
    <paper-input
      always-float-label
      label="Path to label dictionary (optional)"
      placeholder="[[labelVocabPath]]"
      value="{{labelVocabPath}}"
      disabled="[[shouldDisableClassificationControls_(modelType)]]"
    >
    </paper-input>
    <div class="flex-holder">
      <paper-icon-button icon="help" class="help-icon"></paper-icon-button>
      <div>Maps predicted class indices to labels from text file</div>
      <paper-tooltip
        class="tooltip"
        animation-delay="0"
        position="bottom"
        offset="0"
      >
        An optional text file for use with the results of a classification
        model. Classification models return predicted classes as indices. If a
        vocab file is provided, each predicted class index will be mapped to a
        label from this file for use in the display. Each line in the file
        corresponds to a label, with the first line corresponding to class index
        0.
      </paper-tooltip>
    </div>
    <div class="flex-holder">
      <paper-input
        always-float-label
        type="number"
        label="Max classes to display"
        placeholder="[[maxClassesToDisplay]]"
        value="{{maxClassesToDisplay}}"
        class="input-in-row"
        disabled="[[shouldDisableMultiClassControls_(multiClass)]]"
      >
      </paper-input>
      <paper-checkbox
        disabled="[[shouldDisableClassificationControls_(modelType)]]"
        checked="{{multiClass}}"
        class="checkbox"
      >
        Multi-class classification model
      </paper-checkbox>
    </div>
  </template>

  <script>
    const defaultExamplesPath = '';
    const defaultModelName = '';
    const defaultModelVersion = '';
    const defaultModelSignature = '';
    const defaultInferenceAddress = '';
    const defaultModelType = 'classification';
    const defaultMaxExamples = '1000';
    const defaultLabelVocabPath = '';
    const defaultMaxClassesToDisplay = '5';
    const defaultSamplingOdds = '1';
    const defaultHideModelPane2 = true;
    const defaultPredictOutputTensor = 'probabilities';
    const defaultPredictInputTensor = 'examples';

    Polymer({
      is: 'wit-inference-panel',
      properties: {
        // Fields for interactive inference plugin.
        examplesPath: {
          type: String,
          value: defaultExamplesPath,
          notify: true,
        },
        hideModelPane2: {
          type: Boolean,
          value: defaultHideModelPane2,
        },
        modelName: {
          type: String,
          value: '',
          notify: true,
        },
        modelName1: {
          type: String,
          value: defaultModelName,
          notify: true,
        },
        modelName2: {
          type: String,
          value: defaultModelName,
          notify: true,
        },
        inferenceAddress: {
          type: String,
          value: '',
          notify: true,
        },
        inferenceAddress1: {
          type: String,
          value: defaultInferenceAddress,
          notify: true,
        },
        inferenceAddress2: {
          type: String,
          value: defaultInferenceAddress,
          notify: true,
        },
        modelType: {
          type: String,
          value: defaultModelType,
          notify: true,
        },
        modelVersion: {
          type: String,
          value: '',
          notify: true,
        },
        modelVersion1: {
          type: String,
          value: defaultModelVersion,
          notify: true,
        },
        modelVersion2: {
          type: String,
          value: defaultModelVersion,
          notify: true,
        },
        modelSignature: {
          type: String,
          value: '',
          notify: true,
        },
        modelSignature1: {
          type: String,
          value: defaultModelSignature,
          notify: true,
        },
        modelSignature2: {
          type: String,
          value: defaultModelSignature,
          notify: true,
        },
        maxExamples: {
          type: Number,
          value: defaultMaxExamples,
          notify: true,
        },
        labelVocabPath: {
          type: String,
          value: defaultLabelVocabPath,
          notify: true,
        },
        multiClass: {
          type: Boolean,
          notify: true,
          value: false,
        },
        sequenceExamples: {
          type: Boolean,
          notify: true,
          value: false,
        },
        maxClassesToDisplay: {
          type: Number,
          value: defaultMaxClassesToDisplay,
          notify: true,
        },
        samplingOdds: {
          type: Number,
          value: defaultSamplingOdds,
          notify: true,
        },
        usePredictApi: {
          type: Boolean,
          notify: true,
          value: false,
        },
        predictInputTensor: {
          type: String,
          value: defaultPredictInputTensor,
          notify: true,
        },
        predictOutputTensor: {
          type: String,
          value: defaultPredictOutputTensor,
          notify: true,
        },
      },

      observers: [
        'updateModelName(modelName1, modelName2)',
        'updateInferenceAddress(inferenceAddress1, inferenceAddress2)',
        'updateModelVersion(modelVersion1, modelVersion2)',
        'updateModelSignature(modelSignature1, modelSignature2)',
      ],

      async ready() {
        // Early exit if this is called in environment outside of Tensorboard.
        if (!tb_plugin_lib) {
          return;
        }
        // Get URL params for the WIT plugin and set this element's properties
        // based on those params.
        // TODO(jameswex): When TB supports setting URL params, update them based on
        // changes to the properties of this element.
        const urlParams =
          await tb_plugin_lib.experimental.core.getURLPluginData();
        const paramList = Object.keys(urlParams);
        for (let i = 0; i < paramList.length; i++) {
          const param = paramList[i];
          this.set(param, urlParams[param]);
        }
      },

      updateModelName: function(modelName1, modelName2) {
        this.modelName = modelName1 + ',' + modelName2;
        // Strip trailing and leading commas in case one model is missing
        this.modelName = this.modelName.replace(/(^,)|(,$)/g, '');
      },

      updateInferenceAddress: function(inferenceAddress1, inferenceAddress2) {
        this.inferenceAddress = inferenceAddress1 + ',' + inferenceAddress2;
        // Strip trailing and leading commas in case one model is missing
        this.inferenceAddress = this.inferenceAddress.replace(/(^,)|(,$)/g, '');
      },

      updateModelVersion: function(modelVersion1, modelVersion2) {
        // Always have comma for optional fields
        this.modelVersion = modelVersion1 + ',' + modelVersion2;
      },

      updateModelSignature: function(modelSignature1, modelSignature2) {
        // Always have comma for optional fields
        this.modelSignature = modelSignature1 + ',' + modelSignature2;
      },

      addModelClicked_: function() {
        this.hideModelPane2 = !this.hideModelPane2;
      },

      shouldDisableClassificationControls_: function(modelType) {
        return modelType == 'regression';
      },

      shouldDisableMultiClassControls_: function(multiClass) {
        return !multiClass;
      },

      shouldDisablePredictTensorControls_: function(usePredictApi) {
        return !usePredictApi;
      },
    });
  </script>
</dom-module>