Pipelines: Unable to visualize any HTML content

Created on 24 Feb 2020 · 8Comments · Source: kubeflow/pipelines

What steps did you take:

[A clear and concise description of what the bug is.]
I tried

    df = pd.read_csv(prediction_result_path)
    hello_world = """
    <html>
        <body>
            Hello_World
        </body>
    </html>
    """
    metadata = {
    'outputs' : [{
      'type': 'web-app',
      'storage': 'gcs',
      'source': df.to_html(),
    }]
  }
    with open('/mlpipeline_ui_metadata.json', "w") as f:
        json.dump(metadata, f)

What happened:

I'm unable to see the output artifacts, also tried it in visualize.
KFP version:
0.2.4
/kind bug

/area frontend

arefrontend kinbug prioritp1 statutriaged

Source

damngamerz

Most helpful comment

and if you are using lightweight component, here's how to do it

import kfp
import kfp.components as comp

from typing import NamedTuple


#Define a Python function
def hello_world(name) -> NamedTuple('HelloWorldOutput', [(
        'echo', 'string'), ('mlpipeline_ui_metadata', 'UI_metadata')]):

    import json
    hello_world = """
    <html>
        <body>
            Hello_World
        </body>
    </html>
    """
    metadata = {
        'outputs': [{
            'storage': 'inline',
            'source': '# Inline Markdown\n[A link](https://www.kubeflow.org/)',
            'type': 'markdown',
        }, {
            'storage': 'inline',
            'source': hello_world,
            'type': 'web-app',
        }]
    }
    from collections import namedtuple
    output = namedtuple('HelloWorldOutput', ['echo', 'mlpipeline_ui_metadata'])
    return output(name + ': Hello, Wolrd!', json.dumps(metadata))


hello_world_op = comp.func_to_container_op(hello_world)

import kfp.dsl as dsl


@dsl.pipeline(
    name='Calculation pipeline',
    description='A toy pipeline that performs arithmetic calculations.')
def calc_pipeline(name='Placeholder'):
    #Passing pipeline parameter and a constant value as operation arguments
    add_task = hello_world_op(name)  #Returns a dsl.ContainerOp class instance.


#Specify pipeline argument values
arguments = {'name': 'Bob'}

#Submit a pipeline run
import kfp
client = kfp.Client(
    host='<FILL YOUR HOST HERE>')
client.list_pipelines()
result = client.create_run_from_pipeline_func(calc_pipeline,
                                              arguments=arguments)

print(result)

Bobgy on 27 Feb 2020

🚀1 👍1

All 8 comments

Thanks for the report! I'll try to reproduce

Bobgy on 25 Feb 2020

👍1

I think source field doesn't mean HTML source, but a source url where you stored the html content.
reference: https://www.kubeflow.org/docs/pipelines/sdk/output-viewer/#web-app

but I haven't got it working too

@numerology @Ark-kun Can you help with this?

Bobgy on 26 Feb 2020

👍1

IIRC you need to declare /mlpipeline_ui_metadata.json as an output artifact. You can check it's usage at confusion matrix component. Merely dumping the file without declaring the output might not be sufficient.

numerology on 26 Feb 2020

👍1

I think @Ark-kun is working on de-hardcoding that constraint.

numerology on 26 Feb 2020

@damngamerz FYI, I just sent a PR to support inlining HTML visualization #3133 .
You need to store metadata like when it is merged

    hello_world = """
    <html>
        <body>
            Hello_World
        </body>
    </html>
    """
    metadata = {
        'outputs': [{
            'storage': 'inline',
            'source': '# Inline Markdown\n[A link](https://www.kubeflow.org/)',
            'type': 'markdown',
        }, {
            'storage': 'inline',
            'source': hello_world,
            'type': 'web-app',
        }]
    }

Bobgy on 27 Feb 2020

and if you are using lightweight component, here's how to do it

import kfp
import kfp.components as comp

from typing import NamedTuple


#Define a Python function
def hello_world(name) -> NamedTuple('HelloWorldOutput', [(
        'echo', 'string'), ('mlpipeline_ui_metadata', 'UI_metadata')]):

    import json
    hello_world = """
    <html>
        <body>
            Hello_World
        </body>
    </html>
    """
    metadata = {
        'outputs': [{
            'storage': 'inline',
            'source': '# Inline Markdown\n[A link](https://www.kubeflow.org/)',
            'type': 'markdown',
        }, {
            'storage': 'inline',
            'source': hello_world,
            'type': 'web-app',
        }]
    }
    from collections import namedtuple
    output = namedtuple('HelloWorldOutput', ['echo', 'mlpipeline_ui_metadata'])
    return output(name + ': Hello, Wolrd!', json.dumps(metadata))


hello_world_op = comp.func_to_container_op(hello_world)

import kfp.dsl as dsl


@dsl.pipeline(
    name='Calculation pipeline',
    description='A toy pipeline that performs arithmetic calculations.')
def calc_pipeline(name='Placeholder'):
    #Passing pipeline parameter and a constant value as operation arguments
    add_task = hello_world_op(name)  #Returns a dsl.ContainerOp class instance.


#Specify pipeline argument values
arguments = {'name': 'Bob'}

#Submit a pipeline run
import kfp
client = kfp.Client(
    host='<FILL YOUR HOST HERE>')
client.list_pipelines()
result = client.create_run_from_pipeline_func(calc_pipeline,
                                              arguments=arguments)

print(result)

Bobgy on 27 Feb 2020

🚀1 👍1

Looks like problem solved.
/close

Bobgy on 10 Mar 2020

@Bobgy: Closing this issue.

In response to this:

Looks like problem solved.
/close

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.