feat(ui): Add simple side-by-side ui for comparison

app.py

@@ -1,15 +1,119 @@
 import gradio as gr
+import random
 
 
-def greet(name, intensity):
-    return "Hello, " + name + "!" * int(intensity)
+# Dummy model functions for demonstration
+def recommend_sadaimrec(query: str):
+    return f"SADAIMREC: response to '{query}'"
 
 
-app = gr.Interface(
-    fn=greet,
-    inputs=["text", "slider"],
-    outputs=["text"],
-)
+def recommend_chatgpt(query: str):
+    return f"CHATGPT: response to '{query}'"
+
+
+# Mapping names to functions
+pipelines = {
+    "sadaimrec": recommend_sadaimrec,
+    "chatgpt": recommend_chatgpt,
+}
+
+
+# Interface logic
+def generate_responses(query):
+    # Randomize model order
+    pipeline_names = list(pipelines.keys())
+    random.shuffle(pipeline_names)
+
+    # Generate responses
+    resp1 = pipelines[pipeline_names[0]](query)
+    resp2 = pipelines[pipeline_names[1]](query)
+
+    # Return texts and hidden labels
+    return resp1, resp2, pipeline_names[0], pipeline_names[1]
+
+
+# Callback to capture vote
+def handle_vote(selected, label1, label2, resp1, resp2):
+    chosen_name = label1 if selected == "Option 1" else label2
+    chosen_resp = resp1 if selected == "Option 1" else resp2
+    print(f"User voted for {chosen_name}: '{chosen_resp}'")
+    return (
+        "Thank you for your vote! Restarting in 2 seconds...",
+        gr.update(active=True),
+    )
+
+
+def reset_ui():
+    return (
+        gr.update(value="", visible=False),  # hide row
+        gr.update(value=""),  # clear query
+        gr.update(visible=False),  # hide radio
+        gr.update(visible=False),  # hide vote button
+        gr.update(value=""),  # clear Option 1 text
+        gr.update(value=""),  # clear Option 2 text
+        gr.update(value=""),  # clear result
+        gr.update(active=False),
+    )
+
+
+with gr.Blocks() as demo:
+    gr.Markdown("# Music Genre Recommendation Side-By-Side Comparison")
+    query = gr.Textbox(label="Your Query")
+    submit_btn = gr.Button("Submit")
+    # timer that resets ui after feedback is sent
+    reset_timer = gr.Timer(value=2.0, active=False)
+
+    # Hidden components to store model responses and names
+    with gr.Row(visible=False) as response_row:
+        response_1 = gr.Textbox(label="Option 1", interactive=False)
+        response_2 = gr.Textbox(label="Option 2", interactive=False)
+    model_label_1 = gr.Textbox(visible=False)
+    model_label_2 = gr.Textbox(visible=False)
+
+    # Feedback
+    vote = gr.Radio(
+        ["Option 1", "Option 2"], label="Select Best Response", visible=False
+    )
+    vote_btn = gr.Button("Vote", visible=False)
+    result = gr.Textbox(label="Console", interactive=False)
+
+    # On submit
+    submit_btn.click(  # generate
+        fn=generate_responses,
+        inputs=[query],
+        outputs=[response_1, response_2, model_label_1, model_label_2],
+    )
+    submit_btn.click(  # update ui
+        fn=lambda: (
+            gr.update(visible=True),
+            gr.update(visible=True),
+            gr.update(visible=True),
+        ),
+        inputs=None,
+        outputs=[response_row, vote, vote_btn],
+    )
+
+    # Feedback handling
+    vote_btn.click(
+        fn=handle_vote,
+        inputs=[vote, model_label_1, model_label_2, response_1, response_2],
+        outputs=[result, reset_timer],
+    )
+    reset_timer.tick(
+        fn=reset_ui,
+        inputs=None,
+        outputs=[
+            response_row,
+            query,
+            vote,
+            vote_btn,
+            response_1,
+            response_2,
+            result,
+            reset_timer,
+        ],
+        trigger_mode="once",
+    )
 
 if __name__ == "__main__":
-    app.launch(server_name="0.0.0.0", server_port=7860)
+    demo.launch(server_name="0.0.0.0", server_port=7860)