import gradio as gr
# Content for each link
def update_content(link):
if link == "Link 1":
return gr.update(value="
Test Case 1
"), gr.update(label="Updated Label for Link 1", value="New Content for Link 1"), None, None, None
elif link == "Link 2":
return gr.update(value="Test Case 2
"), gr.update(label="Updated Label for Link 2", value="New Content for Link 2"), None, None, None
else:
return gr.update(label="Updated Label for Link 3", value="New Content for Link 3"), None, None, None
def submit_action(editable_text):
return f"Submitted: {editable_text}"
with gr.Blocks(css="""
.link-button {
background-color: white;
color: blue;
text-decoration: underline;
border: none;
cursor: pointer;
padding: 0;
font-size: 16px;
}
.link-button:focus {
outline: none;
}
.link-container {
display: flex;
flex-direction: column;
gap: 10px;
}
.section-title {
font-weight: bold;
margin-bottom: 10px;
font-size: 16px;
}
.large-title {
font-size: 24px; /* Adjust font size for large title */
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}
""") as demo:
with gr.Row():
with gr.Column(scale=3, elem_classes="link-container"):
title_display_left = gr.Markdown("Test Cases
") # Dynamic title
# Separate Buttons styled as links inside the Column
link1 = gr.Button("Link 1", elem_classes="link-button")
link2 = gr.Button("Link 2", elem_classes="link-button")
link3 = gr.Button("Link 3", elem_classes="link-button")
with gr.Column(scale=7):
title_display = gr.HTML("Initial Title
") # Dynamic title
# Top Section
gr.HTML("Evaluation Criteria
")
tb_criteria = gr.Textbox(label="", lines=3, interactive=False)
# Middle Section
gr.Markdown("Test Data
")
tb_context = gr.Textbox(label="Context", lines=3, interactive=True)
tb_user_message = gr.Textbox(label="User Message", lines=3, interactive=True)
tb_assistant_message = gr.Textbox(label="Assistant Message", lines=3, interactive=True)
submit_button = gr.Button("Evaluate")
# Bottom Section (for Submit Button and Result)
gr.Markdown("Results
")
result_display = gr.Textbox(label="Result:", interactive=False)
# Event handling: Each link updates the right column content separately
link1.click(fn=lambda: update_content("Link 1"), inputs=[], outputs=[title_display, tb_criteria, tb_context, tb_user_message, tb_assistant_message])
link2.click(fn=lambda: update_content("Link 2"), inputs=[], outputs=[title_display, tb_criteria, tb_context, tb_user_message, tb_assistant_message])
link3.click(fn=lambda: update_content("Link 3"), inputs=[], outputs=[title_display, tb_criteria, tb_context, tb_user_message, tb_assistant_message])
# Action for submit button
submit_button.click(fn=submit_action, inputs=[tb_criteria], outputs=[result_display])
demo.launch()