Search code examples
kubeflowkubeflow-pipelines

Kubeflow Pipelines How can we create static HTML visualization with embedded iFrame using inline storage?

I am wondering how could I create a simple static HTML visualization for kubeflow pipelines using inline storage?
My use case is I'd like to pass a string with raw html containing a simple iframe.

The sample from the doc does not work for me (kfp sdk v1).
Here is the doc I followed : https://www.kubeflow.org/docs/components/pipelines/sdk/output-viewer/#web-app

Thanks

Solution

  • UPDATE:
    I tested the Output[HTML] from kfp sdk v2 and it works but I came across other issues.
    First of all, Kubeflow html viewer creates an iframe with blank src and srcdoc="your static html". This made it impossible to use an iframe in your html as you'd have a nested iframe (the parent from the html viewer and the nested one from your actual html).

    Solution :

    I found a solution that works on KFP SDK v1 and v2 for all use cases, I used markdown visualization instead of HTML visualization. Since markdown supports inline HTML, I was able to directly paste my html to the markdown output. Compared to using HTML visualization, this supports iframe.

    Here is some code to illustrate the solution :

    from kfp.components import create_component_from_func


def markdown_vis(mlpipeline_ui_metadata_path: kfp.components.OutputPath()):
    import json

    metadata = {
    'outputs' : [
    {
      'storage': 'inline',
      'source': f"<iframe src=\"https://www.google.ca/\" frameborder=\"0\" allowFullScreen=\"true\" width=\"950\" height=\"600\"/>",
      'type': 'markdown',
    }]
    }

    with open(mlpipeline_ui_metadata_path, 'w') as metadata_file:
        json.dump(metadata, metadata_file)

markdown_op = create_component_from_func(markdown_vis)

    I also tested the doc and it works :