Initial version of gradio demo to build upon

.gitignore

@@ -0,0 +1 @@
+.venv

gg-gradio-demo.py

@@ -0,0 +1,87 @@
+import gradio as gr
+
+# Content for each link
+def update_content(link):
+    if link == "Link 1":
+        return gr.update(value="<div class='large-title'>Test Case 1</div>"), 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="<div class='large-title'>Test Case 2</div>"), 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("<div class='large-title'>Test Cases</div>")  # 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("<div class='large-title'>Initial Title</div>")  # Dynamic title
+           
+            
+            # Top Section
+            gr.HTML("<div class='section-title'>Evaluation Criteria</div>")
+            
+            tb_criteria = gr.Textbox(label="", lines=3, interactive=False)
+            
+            # Middle Section
+            gr.Markdown("<div class='section-title'>Test Data</div>")
+            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("<div class='section-title'>Results</div>")
+            
+            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()