Add a web UI with JustPy

JustPy

The JustPy framework is an object oriented high-level Python Web Framework that requires no JavaScript programming, while at the same time providing the full flexibility of a frontend framework.

Additionally, it provides a higher level API called Quasar with stylized components.

You can install justpy from PyPi.

pip install justpy

Example

In the following example, we are creating a simple UI with 2 buttons. When clicking the first button, the flow state counter is incremented and re-rendered on the UI.

First of all, you would need to import the JustPyFrontend and return it from the configure_layout hook of the flow.

from typing import Callable

from lightning import LightningApp, LightningFlow
from lightning.app.frontend import JustPyFrontend


class Flow(LightningFlow):
    def __init__(self):
        super().__init__()
        self.counter = 0

    def run(self):
        print(self.counter)

    def configure_layout(self):
        return JustPyFrontend(render_fn=render_fn)

Secondly, you would need to implement a render_fn that takes as input a get_state function and return a function.

def render_fn(get_state: Callable) -> Callable:
    import justpy as jp

    def webpage():
        wp = jp.QuasarPage(dark=True)
        # the `a=wp` argument adds the div to the web page
        d = jp.Div(classes="q-pa-md q-gutter-sm", a=wp)
        container = jp.QBtn(color="primary", text="Counter: 0")

        async def click(*_):
            state = get_state()
            state.counter += 1
            container.text = f"Counter: {state.counter}"

        button = jp.QBtn(color="primary", text="Click Me!", click=click)

        d.add(button)
        d.add(container)

        return wp

    return webpage

Finally, you can wrap your flow in a LightningAp.

app = LightningApp(Flow())

Now, you can run the Lightning App with:

lightning_app run app app.py