in experiments/arena/pages/arena.py [0:0]
def arena_page_content(app_state: me.state):
"""Arena Mesop Page"""
page_state = me.state(PageState)
prompt_manager.prompts_location = app_state.study_prompts_location
page_state.study = app_state.study
if page_state.study == "live":
app_state.study_models = load_default_models()
page_state.study_models = app_state.study_models
print(f"======> Starting Page state study models: {page_state.study_models}")
# TODO this is an initialization function that should be extracted
if not app_state.welcome_message:
app_state.welcome_message = generate_welcome()
if not page_state.arena_prompt:
page_state.arena_prompt = prompt_manager.random_prompt()
page_state.arena_model1, page_state.arena_model2 = random.sample(app_state.study_models, 2)
arena_images(page_state.arena_prompt, app_state.study)
with me.box(
style=me.Style(
display="flex",
flex_direction="column",
height="100%",
),
):
with me.box(
style=me.Style(
background=me.theme_var("background"),
height="100%",
overflow_y="scroll",
margin=me.Margin(bottom=20),
)
):
with me.box(
style=me.Style(
background=me.theme_var("background"),
padding=me.Padding(top=24, left=24, right=24, bottom=24),
display="flex",
flex_direction="column",
)
):
header("Arena" + (f" [Active Study: {app_state.study}]" if app_state.study != "live" else ""), "stadium")
# welcome message
with me.box(
style=me.Style(
flex_grow=1,
display="flex",
align_items="center",
justify_content="center",
),
on_click=reload_welcome,
):
me.text(
app_state.welcome_message,
style=me.Style(
width="80vw",
font_size="12pt",
font_style="italic",
color="gray",
),
)
me.box(style=me.Style(height="16px"))
with me.box(
style=me.Style(
margin=me.Margin(left="auto", right="auto"),
width="min(1024px, 100%)",
gap="24px",
flex_grow=1,
display="flex",
flex_wrap="wrap",
flex_direction="column",
align_items="center",
)
):
# Prompt
with me.box(
style=me.Style(
display="flex",
flex_direction="column",
align_items="center",
width="85%",
)
):
me.text(
"Select the output you prefer for the given prompt",
style=me.Style(font_weight=500, font_size="20px", text_transform="uppercase"),
)
me.box(style=me.Style(height=16))
me.text(page_state.arena_prompt, style=me.Style(font_size="20pt"))
# Image outputs
with me.box(style=_BOX_STYLE):
if page_state.is_loading:
with me.box(
style=me.Style(
display="grid",
justify_content="center",
justify_items="center",
)
):
me.progress_spinner()
if len(page_state.arena_output) != 0:
with me.box(
style=me.Style(
display="grid",
justify_content="center",
justify_items="center",
)
):
# Generated images row
with me.box(
style=me.Style(
flex_wrap="wrap", display="flex", gap="15px"
)
):
for idx, img in enumerate(page_state.arena_output, start=1):
print(f"===> idx: {idx}, img: {img}")
model_name = f"arena_model{idx}"
model_value = getattr(page_state, model_name)
replace_url = "https://storage.mtls.cloud.google.com/"
if Default.PUBLIC_BUCKET:
replace_url = "https://storage.googleapis.com/"
img_url = img.replace(
"gs://",
replace_url
)
with me.box(
style=me.Style(align_items="center", justify_content="center", display="flex", flex_direction="column"),
):
image_border_style = me.Style(
width="450px",
margin=me.Margin(top=10),
border_radius="35px",
)
if page_state.chosen_model:
if page_state.chosen_model == model_value:
# green border
image_border_style = me.Style(
width="450px",
margin=me.Margin(top=10),
border_radius="35px",
border=me.Border().all(me.BorderSide(color="green", style="inset", width="5px"))
)
else:
# opaque
image_border_style = me.Style(
width="450px",
margin=me.Margin(top=10),
border_radius="35px",
opacity=0.5,
)
me.image(
src=f"{img_url}",
style=image_border_style,
)
if page_state.chosen_model:
text_style = me.Style()
if page_state.chosen_model == model_value:
text_style = me.Style(font_weight="bold")
me.text(model_value, style=text_style)
else:
me.box(style=me.Style(height=18))
me.box(style=me.Style(height=15))
if len(page_state.arena_output) != 2:
disabled_choice = True
else:
disabled_choice = False
with me.box(
style=me.Style(
flex_direction="row",
display="flex",
gap=50,
)
):
# left choice button
with me.content_button(
type="flat",
key="arena_model1",
on_click=on_click_arena_vote,
disabled=disabled_choice,
):
with me.box(
style=me.Style(
display="flex", align_items="center"
)
):
me.icon("arrow_left")
me.text("left")
# skip button
me.button(
label="skip",
type="stroked",
on_click=on_click_reload_arena,
)
# right choice button
with me.content_button(
type="flat",
key="arena_model2",
on_click=on_click_arena_vote,
disabled=disabled_choice,
):
with me.box(
style=me.Style(
display="flex", align_items="center"
)
):
me.text("right")
me.icon("arrow_right")
else:
# skip button
me.button(
label="skip",
type="stroked",
on_click=on_click_reload_arena,
)
# show user choice
if page_state.chosen_model:
me.text(f"You voted {page_state.chosen_model}")