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()