def image_glasses_recommendations_tab()

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

• 102 lines of code
• 2 McCabe index (conditional complexity)

def image_glasses_recommendations_tab() -> None:
    """Image glasses recommendations tab"""
    state = me.state(State)
    me.box(style=me.Style(height=12))
    me.text("Glasses Recommendation", style=me.Style(font_weight="bold"))
    me.box(style=me.Style(height=12))

    me.text(
        "Gemini 2.0 is capable of image comparison and providing recommendations. This may be useful in industries like e-commerce and retail. Below is an example of choosing which pair of glasses would be better suited to various face types:"
    )
    me.box(style=me.Style(height=12))

    with me.box(style=me.Style(margin=me.Margin.all(15))):
        me.text("What is your face shape?")
        me.radio(
            on_change=on_change_image_glasses,
            key="glasses_shape",
            options=[
                me.RadioOption(label="Oval", value="oval"),
                me.RadioOption(label="Round", value="round"),
                me.RadioOption(label="Square", value="square"),
                me.RadioOption(label="Heart", value="heart"),
                me.RadioOption(label="Diamond", value="diamond"),
            ],
            value=state.image_glasses_shape_radio_value,
        )
        me.text("Select the output type")
        me.radio(
            on_change=on_change_image_glasses,
            key="glasses_output",
            options=[
                me.RadioOption(label="text", value="text"),
                me.RadioOption(label="table", value="table"),
                me.RadioOption(label="json", value="json"),
            ],
            value=state.image_glasses_output_radio_value,
        )

    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=IMAGE_GLASSES_1,
                alt="glasses 1",
                style=me.Style(width="350px"),
            )
            with me.box(
                style=me.Style(align_content="center", flex_grow=1, display="flex")
            ):
                me.text(
                    "Glasses type 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=IMAGE_GLASSES_2,
                alt="glasses 2",
                style=me.Style(width="350px"),
            )
            with me.box(
                style=me.Style(align_content="center", flex_grow=1, display="flex")
            ):
                me.text(
                    "Glasses type 2",
                    style=me.Style(color="rgba(49, 51, 63, 0.6)", font_size="14px"),
                )

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

    me.text(
        f"Our expectation: Suggest which glasses type is better for the {state.image_glasses_shape_radio_value} face shape"
    )
    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_glasses_rec,
        )
        me.button(
            "Generate recommendation",
            color="primary",
            type="flat",
            on_click=generate_glasses_rec,
        )

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