in experiments/babel/app/main.py [0:0]
def babel():
"""Main Mesop App Page: Chirp 3: HD Voices"""
state = me.state(AppState)
with me.box(
style=me.Style(
display="flex",
flex_direction="column",
height="100%",
),
):
# header
with me.box(
style=me.Style(
flex_direction="row",
display="flex",
gap=5,
padding=me.Padding(top=10, left=10, right=10, bottom=0),
align_items="",
# background=me.theme_var("surface-container"),
# border=me.Border(bottom=me.BorderSide(width="0.01em", style="solid", color="#c3c5dd",))
),
):
with me.content_button(on_click=on_click_menu):
me.icon("menu")
me.text("Babel", type="headline-5")
me.box(style=me.Style(width=10))
me.button(
label="Experiment",
type="stroked",
disabled="true",
style=me.Style(
font_size="9pt",
height="25px",
color="grey",
text_transform="uppercase",
),
)
# with me.content_button(
# type="icon",
# style=me.Style(position="absolute", right=44, top=8),
# #on_click=link_to_feedback
# ):
# me.icon("feedback")
me.link(
text="feedback",
url="https://cloud.google.com/text-to-speech/docs/chirp3-hd", # your feedback form URL here
open_in_new_tab=True,
style=me.Style(
position="absolute",
right=48,
top=18,
text_decoration="none",
color=me.theme_var("on-surface"),
),
)
with me.content_button(
type="icon",
style=me.Style(position="absolute", right=4, top=8),
on_click=toggle_theme,
):
me.icon(
"light_mode" if me.theme_brightness() == "dark" else "dark_mode"
)
# content area
# side menu
with me.sidenav(
opened=True,
style=me.Style(
width=SIDENAV_MAX_WIDTH if state.sidenav_open else SIDENAV_MIN_WIDTH,
margin=me.Margin(top=60),
padding=me.Padding(top=10, left=5, right=5, bottom=0),
background=me.theme_var("surface-container-lowest"),
border_radius="0 30px 0 0",
),
):
with me.box(style=me.Style(display="flex", flex_direction="column")):
# Home: Journey Voices
with me.content_button(
style=me.Style(align_content="start"),
on_click=on_click_page_choice,
key="home",
):
with me.box(
style=me.Style(
display="flex",
flex_direction="row",
gap=5,
align_items="center",
)
):
me.icon(
"equalizer",
)
if not state.sidenav_open:
me.text(
"Chirp 3: HD",
)
with me.content_button(
style=me.Style(align_content="start"),
on_click=on_click_page_choice,
key="welcome",
):
with me.box(
style=me.Style(
display="flex",
flex_direction="row",
gap=5,
align_items="center",
)
):
me.icon(
"spa",
)
if not state.sidenav_open:
me.text(
"Welcome",
)
with me.content_button(
style=me.Style(align_content="start"),
on_click=on_click_page_choice,
key="world_tour",
):
with me.box(
style=me.Style(
display="flex",
flex_direction="row",
gap=5,
align_items="center",
)
):
me.icon(
"explore",
)
if not state.sidenav_open:
me.text(
"Explore",
)
# Bottom buttons
with me.box(
style=me.Style(
position="absolute",
bottom=8,
)
):
# About
with me.content_button(
style=me.Style(align_content="start"),
on_click=on_click_page_choice,
key="about",
):
with me.box(
style=me.Style(
display="flex",
flex_direction="row",
gap=5,
align_items="center",
)
):
me.icon(
"info",
)
if not state.sidenav_open:
me.text(
"About",
)
# Settings
with me.content_button(
style=me.Style(align_content="start"),
on_click=on_click_page_choice,
key="settings",
):
with me.box(
style=me.Style(
display="flex",
flex_direction="row",
gap=5,
align_items="center",
)
):
me.icon(
"settings",
)
if not state.sidenav_open:
me.text(
"Settings",
)
# primary content
with me.box(
style=me.Style(
margin=me.Margin(
left=SIDENAV_MAX_WIDTH if state.sidenav_open else SIDENAV_MIN_WIDTH
),
padding=me.Padding(top=10, left=10, right=10, bottom=0),
),
):
show_page(state.current_page)