def image_er_diagrams_tab()

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

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

def image_er_diagrams_tab() -> None:
    """Image ER diagrams tab"""
    state = me.state(State)
    me.box(style=me.Style(height=12))
    me.text("ER Diagrams", style=me.Style(font_weight="bold"))
    me.box(style=me.Style(height=12))

    me.text(
        "Gemini 2.0 multimodal capabilities empower it to comprehend diagrams and take actionable steps, such as optimization or code generation. The following example demonstrates how Gemini can decipher an Entity Relationship (ER) diagram."
    )
    me.box(style=me.Style(height=12))

    with me.box(style=me.Style(display="grid", flex_direction="column", gap=2)):
        me.image(
            src=IMAGE_ER_DIAGRAM,
            alt="image of an entity relationship diagram",
            style=me.Style(width="350px"),
        )
        with me.box(
            style=me.Style(align_content="center", flex_grow=1, display="flex")
        ):
            me.text(
                "Image of an ER diagram",
                style=me.Style(color="rgba(49, 51, 63, 0.6)", font_size="14px"),
            )
    me.box(style=me.Style(height=12))

    me.text(
        "Our expectation: Document the entities and relationships in this ER diagram."
    )
    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_er_doc
        )
        me.button(
            "Generate documentation",
            color="primary",
            type="flat",
            on_click=generate_er_doc,
        )

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