def image_furniture_tab()

in gemini/sample-apps/gemini-mesop-cloudrun/main.py [0:0]


def image_furniture_tab() -> None:
    """Image furniture tab"""
    state = me.state(State)
    me.box(style=me.Style(height=12))
    me.text("Furniture Recommendation", style=me.Style(font_weight="bold"))
    me.box(style=me.Style(height=12))

    me.text(
        "In this example, you'll be presented with a scene (e.g. a living room) and will use the Gemini model to perform visual understanding. You will see how Gemini can be used to recommend an item (e.g., a chair) from a list of furniture options as input. You can use Gemini to recommend a chair that would complement the given scene and will be provided with its rationale for such selections from the provided list."
    )
    me.box(style=me.Style(height=12))

    with me.box(style=me.Style(display="flex", flex_direction="column", gap=2)):
        me.image(
            src=ROOM_IMAGE_URI,
            alt="living room",
            style=me.Style(width="350px"),
        )
        with me.box(
            style=me.Style(align_content="center", flex_grow=1, display="flex")
        ):
            me.text(
                "Image of a living room",
                style=me.Style(color="rgba(49, 51, 63, 0.6)", font_size="14px"),
            )

    me.box(style=me.Style(height=12))

    with me.box(
        style=me.Style(display="grid", gap=0, grid_template_columns="repeat(4, 1fr)")
    ):
        with me.box(
            style=me.Style(
                display="grid",
                flex_direction="column",
                gap=2,
            )
        ):
            me.image(
                src=CHAIR_1_IMAGE_URI,
                alt="chair1",
                style=me.Style(width="200px"),
            )
            with me.box(
                style=me.Style(align_content="center", flex_grow=1, display="flex")
            ):
                me.text(
                    "Chair 1",
                    style=me.Style(color="rgba(49, 51, 63, 0.6)", font_size="14px"),
                )
        with me.box(style=me.Style(display="grid", flex_direction="column", gap=2)):
            me.image(
                src=CHAIR_2_IMAGE_URI,
                alt="chair2",
                style=me.Style(width="200px"),
            )
            with me.box(
                style=me.Style(align_content="center", flex_grow=1, display="flex")
            ):
                me.text(
                    "Chair 2",
                    style=me.Style(color="rgba(49, 51, 63, 0.6)", font_size="14px"),
                )
        with me.box(style=me.Style(display="grid", flex_direction="column", gap=2)):
            me.image(
                src=CHAIR_3_IMAGE_URI,
                alt="chair3",
                style=me.Style(width="200px"),
            )
            with me.box(
                style=me.Style(align_content="center", flex_grow=1, display="flex")
            ):
                me.text(
                    "Chair 3",
                    style=me.Style(color="rgba(49, 51, 63, 0.6)", font_size="14px"),
                )
        with me.box(style=me.Style(display="grid", flex_direction="column", gap=2)):
            me.image(
                src=CHAIR_4_IMAGE_URI,
                alt="chair4",
                style=me.Style(width="200px"),
            )
            with me.box(
                style=me.Style(align_content="center", flex_grow=1, display="flex")
            ):
                me.text(
                    "Chair 4",
                    style=me.Style(color="rgba(49, 51, 63, 0.6)", font_size="14px"),
                )

    me.box(style=me.Style(height=12))

    with me.box(style=me.Style(display="flex", gap=10, padding=me.Padding(bottom=20))):
        me.button(
            "Clear",
            color="primary",
            type="stroked",
            on_click=on_click_clear_furniture_recommendation,
        )
        me.button(
            "Generate a recommendation",
            color="primary",
            type="flat",
            on_click=generate_furniture_recommendation,
        )

    with me.box(style=_BOX_STYLE):
        me.text("Recommendation", style=me.Style(font_weight=500))
        if state.furniture_recommendation_output:
            with me.box(
                style=me.Style(
                    display="grid",
                    justify_content="center",
                    justify_items="center",
                )
            ):
                me.markdown(
                    key="furniture_recommendation_output",
                    text=state.furniture_recommendation_output,
                    style=me.Style(width="100%", margin=me.Margin(top=10)),
                )