def display_ui()

in gemini/sample-apps/accelerating_product_innovation/app/pages_utils/editor_ui.py [0:0]


    def display_ui(self) -> tuple[st_canvas, Image.Image, io.BytesIO]:
        """Renders the main UI components of the image editor."""
        # - Load the image for editing
        image_bytes = self.load_image(
            f"""{st.session_state.image_file_prefix}{st.session_state.image_to_edit + 1}.png"""
        )
        bg_image = Image.open(image_bytes)

        st.markdown("<h1>Edit Image</h1>", unsafe_allow_html=True)

        # Stroke Width Control
        # - Add a slider to control drawing/mask stroke width
        self.stroke_width = st.slider(
            "Stroke width: ",
            10,
            50,
            self.stroke_width,
            key="canvas_slider",
        )

        # Image Prompt Section
        with st.form("Image prompt"):
            # - Provide a description of the form's purpose
            st.write("Input a query to generate the product.")
            img_prompt = st.text_input("Enter your custom query", "")
            edit_img_btn = st.form_submit_button("Submit prompt", type="primary")

            # - Handle form submission
            if edit_img_btn:
                # -- Update session state to trigger image generation
                st.session_state.generate_images = True
                st.session_state.image_prompt = img_prompt

        # Mask Drawing Setup
        drawing_dict = {  # - Dictionary mapping descriptive names to drawing modes.
            "⬜ Rectangle": "rect",
            "🖌️ Brush": "freedraw",
            "⚪ Circle": "circle",
            "📏 Move/Scale/Rotate": "transform",
        }
        self.drawing_mode = st.selectbox(
            "[Optional] Draw a mask where you want to edit the image",
            drawing_dict.keys(),
            key="canvas_select_box",
        )

        # Canvas Setup
        height = (
            int(bg_image.size[1] / (bg_image.size[0] / 704)) // 2
        )  # - Calculate canvas height dynamically
        canvas_result = st_canvas(
            fill_color="rgba(255, 255, 255, 1)",
            stroke_width=self.stroke_width,
            stroke_color="rgba(255, 255, 255, 1)",
            background_color="#000",
            background_image=bg_image,  # Use loaded image as background
            update_streamlit=self.realtime_update,
            height=height,
            initial_drawing=None,
            width=352,
            drawing_mode=drawing_dict[self.drawing_mode],
            point_display_radius=0,  # - Hide cursor on canvas
            key="canvas",
        )

        # Background Editing Control
        if st.checkbox("Edit Image Background"):
            st.session_state.bg_editing = True  # - Enable background editing mode
            st.write("       Please mask the area you want to preserve")
        else:
            st.session_state.bg_editing = False  # - Disable background editing

        # Return Values
        return (
            canvas_result,
            bg_image,
            image_bytes,
        )  # - Return values likely used elsewhere