def explore_page()

in experiments/babel/app/pages/explore.py [0:0]


def explore_page(app_state: me.state):
    """Describe an image  page"""
    state = me.state(PageState)
    state.voices = get_chosen_voices()
    if not state.loaded:
        print("There're no voices to display")
        state.audio_output_metadata = filter_babel_metadata("pages/explore_paris.json")
        state.loaded = True
        print(f"loaded {len(state.audio_output_metadata)} voices")

    with me.box(style=CONTENT_STYLE):
        with me.box(
            # on_click=regenerate_welcome,
        ):
            me.text(
                # state.welcome_statement,
                "Explore",
                type="headline-4",
                style=me.Style(
                    # text_align="center",
                    # color="transparent",
                    # background=(
                    #    "linear-gradient(74deg,#4285f4 0%,#9b72cb 9%,#d96570 20%,#d96570 24%,#9b72cb 35%,#4285f4 44%,#9b72cb 50%,#d96570 56%, #fff 75%, #fff 100%)"
                    #    " text"
                    # ),
                ),
            )
        with me.box(
            style=me.Style(text_align="center", flex_direction="row", display="flex", justify_content="center", align_items="center")
        ):
            with me.content_button(
                on_click=change_location, key="back",
            ):
                me.icon("navigate_before")
            location_image = photos[state.location]["photo"].replace(
                "local_assets/",
                "static/"
            )
            location_credit = photos[state.location]["credit"]
            location_audio = photos[state.location]["audio"]
            print(f"{location_audio} & {location_image}")
            state.audio_output_metadata = filter_babel_metadata(location_audio)
            with me.box(style=me.Style(display="flex", flex_direction="column", gap=5  )):
                me.image(
                    src=location_image,
                    style=me.Style(
                        width="600px",
                        #height="400px",
                        border_radius="16px",
                    ),
                )
                me.text(location_credit, style=me.Style(font_style="italic", font_size="10pt"))

            with me.content_button(
                on_click=change_location, key="forward",
            ):
                me.icon("navigate_next")
        # me.text("Enter text to voice", type="headline-6")
        # me.text(
        #    f"Using {len(state.voices)} Chirp 3: HD voices",
        #    style=me.Style(font_style="italic"),
        # )
        # subtle_chat_input_journey()

        if state.is_loading:
            with me.box(style=me.Style(text_align="center")):
                me.progress_spinner()
        elif state.audio_output_metadata:
            with me.box(
                style=me.Style(
                    display="grid", grid_template_columns="1fr 1fr", text_align="center"
                )
            ):
                # for uri in state.audio_output_infos:
                #  me.audio(src=uri)
                sorted_metadata = sorted(
                    state.audio_output_metadata,
                    key=lambda voice: voice["language_code"],
                )
                for item in sorted_metadata:
                    # print(item)
                    audio_url = f"{BUCKET_PATH}/{item['audio_path']}"
                    # print(audio_url)
                    with me.box(
                        style=me.Style(
                            display="flex",
                            flex_direction="column",
                            gap=5,
                            padding=me.Padding(top=10, left=10, right=10, bottom=12),
                        )
                    ):
                        me.text(
                            f"{item["language_code"]} ({item["gender"].lower()}, {item["voice_name"]})",
                            style=me.Style(font_weight="bold"),
                        )
                        me.audio(src=audio_url)
                        me.text(item["text"])