Ganesh Chintalapati
final version v2
2b14256
import gradio as gr
from core import submit_query, clear_history
# Define Gradio interface
with gr.Blocks(theme=gr.themes.Soft(), css=".full-height { height: 100%; display: flex; align-items: stretch; min-height: 40px; } .full-height button { height: 100%; padding: 8px 16px; } .providers-row { height: 100%; display: flex; align-items: stretch; min-height: 40px; } .providers-row .checkbox-group { height: 100%; display: flex; flex-direction: row; align-items: center; gap: 10px; }") as demo:
gr.Markdown("# Multi-Model Chat")
gr.Markdown("Chat with OpenAI, Anthropic, or Gemini. Select providers and compare responses side by side!")
with gr.Row(elem_classes="providers-row"):
providers = gr.CheckboxGroup(choices=["OpenAI", "Anthropic", "Gemini"], label="Select Providers", value=["OpenAI"], elem_classes="checkbox-group")
with gr.Row(elem_classes="full-height"):
query = gr.Textbox(
label="Enter your query",
placeholder="e.g., What is the capital of the United States?",
scale=4,
autofocus=True # This will focus the textbox on load
)
submit_button = gr.Button("Submit", scale=1)
with gr.Row():
clear_button = gr.Button("Clear History")
with gr.Row():
openai_chatbot = gr.Chatbot(label="OpenAI", type="messages", scale=1)
anthropic_chatbot = gr.Chatbot(label="Anthropic", type="messages", scale=1)
gemini_chatbot = gr.Chatbot(label="Gemini", type="messages", scale=1)
chat_history = gr.State([])
# Handle both button click and Enter key
query.submit(
fn=submit_query,
inputs=[query, providers, chat_history],
outputs=[query, openai_chatbot, anthropic_chatbot, gemini_chatbot, chat_history]
)
submit_button.click(
fn=submit_query,
inputs=[query, providers, chat_history],
outputs=[query, openai_chatbot, anthropic_chatbot, gemini_chatbot, chat_history]
)
clear_button.click(
fn=clear_history,
inputs=[],
outputs=[openai_chatbot, anthropic_chatbot, gemini_chatbot, chat_history]
)
demo.launch()