Visualize Results in the Pipelines UI

Visualizing the results of your pipelines component

This page shows you how to use the Kubeflow Pipelines UI to visualize outputfrom a Kubeflow Pipelines component.For details about how to build a component, see the guide tobuilding your own component.

Kubeflow Pipelines provides a new method of generating visualizations. See theguide to Python Based Visualizations.

Introduction

The Kubeflow Pipelines UI offers built-in support for several types ofvisualizations, which you can use to provide rich performance evaluation andcomparison data. To make use of this programmable UI, your pipeline componentmust write a JSON file to the component’s local filesystem. You can do this atany point during the pipeline execution.

You can view the output visualizations in the following places on the KubeflowPipelines UI:

• The Run output tab shows the visualizations for all pipeline steps in theselected run. To open the tab in the Kubeflow Pipelines UI:

  • Click Experiments to see your current pipeline experiments.
  • Click the experiment name of the experiment that you want to view.
  • Click the run name of the run that you want to view.
  • Click the Run output tab.

• The Artifacts tab shows the visualization for the selected pipeline step.To open the tab in the Kubeflow Pipelines UI:

  • Click Experiments to see your current pipeline experiments.
  • Click the experiment name of the experiment that you want to view.
  • Click the run name of the run that you want to view.
  • On the Graph tab, click the step representing the pipeline componentthat you want to view. The step details slide into view, showing theArtifacts tab.

All screenshots and code snippets on this page come from asample pipeline that you can run directly from the Kubeflow Pipelines UI.See the sample description and links below.

Writing out metadata for the output viewers

The pipeline component must write a JSON file specifying metadata for theoutput viewer(s) that you want to use for visualizing the results. The file namemust be /mlpipeline-ui-metadata.json, and the component must write the fileto the root level of the container filesystem.

The JSON specifies an array of outputs. Each outputs entry describes themetadata for an output viewer. The JSON structure looks like this:

{
  "version": 1,
  "outputs": [
    {
      "type": "confusion_matrix",
      "format": "csv",
      "source": "my-dir/my-matrix.csv",
      "schema": [
        {"name": "target", "type": "CATEGORY"},
        {"name": "predicted", "type": "CATEGORY"},
        {"name": "count", "type": "NUMBER"},
      ],
      "labels": "vocab"
    },
    {
      ...
    }
  ]
}

If the component writes such a file to its container filesystem, the KubeflowPipelines system extracts the file, and the Kubeflow Pipelines UI uses the fileto generate the specified viewer(s). The metadata specifies where to load theartifact data from. The Kubeflow Pipelines UI loads the data into memoryand renders it. Note: You should keep this data at a volume that’s manageableby the UI, for example by running a sampling step before exporting the file asan artifact.

The table below shows the available metadata fields that you can specify in theoutputs array. Each outputs entry must have a type. Depending on value oftype, other fields may also be required as described in the list of outputviewers later on the page.

Available output viewers

The sections below describe the available viewer types and the requiredmetadata fields for each type.

Confusion matrix

Type: confusion_matrix

Required metadata fields:

• format
• labels
• schema
• source

The confusion_matrix viewer plots a confusion matrix visualization of the datafrom the given source path, using the schema to parse the data. The labelsprovide the names of the classes to be plotted on the x and y axes.

Example:

  metadata = {
    'outputs' : [{
      'type': 'confusion_matrix',
      'format': 'csv',
      'schema': [
        {'name': 'target', 'type': 'CATEGORY'},
        {'name': 'predicted', 'type': 'CATEGORY'},
        {'name': 'count', 'type': 'NUMBER'},
      ],
      'source': cm_file,
      # Convert vocab to string because for bealean values we want "True|False" to match csv data.
      'labels': list(map(str, vocab)),
    }]
  }
  with file_io.FileIO('/mlpipeline-ui-metadata.json', 'w') as f:
    json.dump(metadata, f)

Visualization on the Kubeflow Pipelines UI:

Markdown

Type: markdown

Required metadata fields:

• source
• storage

The markdown viewer renders Markdown strings on the Kubeflow Pipelines UI.The viewer can read the Markdown data from the following locations:

• A Markdown-formatted string embedded in the source field. The value of thestorage field must be inline.
• Markdown code in a remote file, at a path specified in the source field.The storage field can contain any value except inline.

Example:

  metadata = {
    'outputs' : [
    # Markdown that is hardcoded inline
    {
      'storage': 'inline',
      'source': '# Inline Markdown\n[A link](https://www.kubeflow.org/)',
      'type': 'markdown',
    },
    # Markdown that is read from a file
    {
      'source': 'gs://your_project/your_bucket/your_markdown_file',
      'type': 'markdown',
    }]
  }
  with file_io.FileIO('/mlpipeline-ui-metadata.json', 'w') as f:
    json.dump(metadata, f)

Visualization on the Kubeflow Pipelines UI:

ROC curve

Type: roc

Required metadata fields:

• format
• schema
• source

The roc viewer plots a receiver operating characteristic(ROC)curve using the data from the given source path. The Kubeflow Pipelines UIassumes that the schema includes three columns with the following names:

• fpr (false positive rate)
• tpr (true positive rate)
• thresholds

When viewing the ROC curve, you can hover your cursor over the ROC curve to seethe threshold value used for the cursor’s closest fpr and tpr values.

Example:

  df_roc = pd.DataFrame({'fpr': fpr, 'tpr': tpr, 'thresholds': thresholds})
  roc_file = os.path.join(args.output, 'roc.csv')
  with file_io.FileIO(roc_file, 'w') as f:
    df_roc.to_csv(f, columns=['fpr', 'tpr', 'thresholds'], header=False, index=False)
  metadata = {
    'outputs': [{
      'type': 'roc',
      'format': 'csv',
      'schema': [
        {'name': 'fpr', 'type': 'NUMBER'},
        {'name': 'tpr', 'type': 'NUMBER'},
        {'name': 'thresholds', 'type': 'NUMBER'},
      ],
      'source': roc_file
    }]
  }
  with file_io.FileIO('/mlpipeline-ui-metadata.json', 'w') as f:
    json.dump(metadata, f)

Visualization on the Kubeflow Pipelines UI:

Table

Type: table

Required metadata fields:

• format
• header
• source

The table viewer builds an HTML table out of the data at the given sourcepath, where the header field specifies the values to be shown in the first rowof the table. The table supports pagination.

Example:

  metadata = {
    'outputs' : [{
      'type': 'table',
      'storage': 'gcs',
      'format': 'csv',
      'header': [x['name'] for x in schema],
      'source': prediction_results
    }]
  }
  with open('/mlpipeline-ui-metadata.json', 'w') as f:
    json.dump(metadata, f)

Visualization on the Kubeflow Pipelines UI:

TensorBoard

Type: tensorboard

Required metadata Fields:

• source

The tensorboard viewer adds a Start Tensorboard button to the output page.

When viewing the output page, you can:

• Click Start Tensorboard to start aTensorBoard Podin your Kubeflow cluster. The button text switches to Open Tensorboard.
• Click Open Tensorboard to open the TensorBoard interface in a new tab,pointing to the logdir data specified in the source field.

Note: The Kubeflow Pipelines UI doesn’t fully manage your TensorBoardinstances. The “Start Tensorboard” button is a convenience feature so thatyou don’t have to interrupt your workflow when looking at pipeline runs. You’reresponsible for recycling or deleting the TensorBoard Pods using your Kubernetesmanagement tools.

Example:

  metadata = {
    'outputs' : [{
      'type': 'tensorboard',
      'source': args.job_dir,
    }]
  }
  with open('/mlpipeline-ui-metadata.json', 'w') as f:
    json.dump(metadata, f)

Visualization on the Kubeflow Pipelines UI:

Web app

Type: web-app

Required metadata fields:

• source

The web-app viewer provides flexibility for rendering custom output. You canspecify an HTML file that your component creates, and the Kubeflow Pipelines UIrenders that HTML in the output page. The HTML file must be self-contained, withno references to other files in the filesystem. The HTML file can containabsolute references to files on the web. Content running inside the web app isisolated in an iframe and cannot communicate with the Kubeflow Pipelines UI.

Example:

  static_html_path = os.path.join(output_dir, _OUTPUT_HTML_FILE)
  file_io.write_string_to_file(static_html_path, rendered_template)
  metadata = {
    'outputs' : [{
      'type': 'web-app',
      'storage': 'gcs',
      'source': static_html_path,
    }]
  }
  with file_io.FileIO('/mlpipeline-ui-metadata.json', 'w') as f:
    json.dump(metadata, f)

Visualization on the Kubeflow Pipelines UI:

Source of examples on this page

The above examples come from the tax tip prediction sample that ispre-installed when you deploy Kubeflow.

You can run the sample by selecting[Sample] ML - TFX - Taxi Tip Prediction Model Trainer from theKubeflow Pipelines UI. For help getting started with the UI, follow theKubeflow Pipelines quickstart. The pipeline uses a number of prebuilt, reusable components, including:

• The Confusion Matrixcomponentwhich writes out the data for the confusion_matrix viewer.
• The ROCcomponentwhich writes out the data for the roc viewer.
• The dnntrainercomponentwhich writes out the data for the tensorboard viewer.
• The tfmacomponentwhich writes out the data for the web-app viewer.
• The dataflow predictcomponentwhich writes out the data for the table viewer.

Next step

See how to export metrics from yourpipeline.