Update app.py

app.py

@@ -240,55 +240,77 @@ refresh_leaderboard()
 # Gradio interface setup
 with gr.Blocks() as demo:
     state = gr.State({})
-    with gr.Tab("Chatbot Arena"):
+
+    with gr.Tab("🤖 Chatbot Arena"):
+        gr.Markdown("## 🥊 Let's see which chatbot wins!")
+        
         with gr.Row():
             with gr.Column():
-                chatbot1 = gr.Chatbot(label='Model A').style(height=600)
-                upvote_btn_a = gr.Button(value="👍 Upvote A", interactive=False)
-            
+                chatbot1 = gr.Chatbot(label='🤖 Model A').style(height=500)
+                upvote_btn_a = gr.Button(value="👍 Upvote A", interactive=False).style(full_width=True)
+
             with gr.Column():
-                chatbot2 = gr.Chatbot(label='Model B').style(height=600)
-                upvote_btn_b = gr.Button(value="👍 Upvote B", interactive=False)        
-    
-        textbox = gr.Textbox(placeholder="Enter your prompt (up to 200 characters)")
-        with gr.Row():
-            submit_btn = gr.Button(value="Send")
-            reset_btn = gr.Button(value="Reset")
+                chatbot2 = gr.Chatbot(label='🤖 Model B').style(height=500)
+                upvote_btn_b = gr.Button(value="👍 Upvote B", interactive=False).style(full_width=True)
+        
         with gr.Row():
-            submit_btn = gr.Button(value="Send")
-            reset_btn = gr.Button(value="Reset")
-            regenerate_btn = gr.Button(value="Regenerate")
+            with gr.Column(scale=5):
+                textbox = gr.Textbox(placeholder="🎤 Enter your prompt (up to 200 characters)", lines=2, max_lines=5)
+            with gr.Column(min_width=150):
+                submit_btn = gr.Button(value="🚀 Send")
+                regenerate_btn = gr.Button(value="🔄 Regenerate")
+                reset_btn = gr.Button(value="🗑️ Reset")
+
         # ...
+
         regenerate_btn.click(regenerate_responses, inputs=[state, chatbot1, chatbot2], outputs=[chatbot1, chatbot2])
-    
         reset_btn.click(clear_chat, inputs=[state], outputs=[state, chatbot1, chatbot2, upvote_btn_a, upvote_btn_b, textbox, submit_btn])
         textbox.submit(user_ask, inputs=[state, chatbot1, chatbot2, textbox], outputs=[state, chatbot1, chatbot2, textbox, upvote_btn_a, upvote_btn_b], queue=True)
         submit_btn.click(user_ask, inputs=[state, chatbot1, chatbot2, textbox], outputs=[state, chatbot1, chatbot2, textbox, upvote_btn_a, upvote_btn_b], queue=True)
-        
+
         collection = init_database()
+
         upvote_btn_a.click(vote_up_model, inputs=[state, chatbot1, chatbot2], outputs=[chatbot1, chatbot2, upvote_btn_a, upvote_btn_b, textbox, submit_btn])
         upvote_btn_b.click(vote_down_model, inputs=[state, chatbot1, chatbot2], outputs=[chatbot1, chatbot2, upvote_btn_a, upvote_btn_b, textbox, submit_btn])
-    with gr.Tab("Direct Chat"):
-        model_dropdown = gr.Dropdown(choices=chatbots, label="Select a model")
-        direct_chatbot = gr.Chatbot(label="Direct Chat").style(height=600)
-        direct_textbox = gr.Textbox(placeholder="Enter your message")
-        direct_submit_btn = gr.Button(value="Send")
-        direct_reset_btn = gr.Button(value="Reset Chat")  # Add this line
-        direct_regenerate_btn = gr.Button(value="Regenerate")
+
+    with gr.Tab("💬 Direct Chat"):
+        gr.Markdown("## 🗣️ Chat directly with a model!")
+        
+        with gr.Row():
+            with gr.Column(scale=4):
+                direct_chatbot = gr.Chatbot(label="💬 Direct Chat").style(height=500)
+            with gr.Column(scale=1):
+                model_dropdown = gr.Dropdown(choices=chatbots, label="🤖 Select a model")
+        
+        with gr.Row():
+            with gr.Column(scale=5):
+                direct_textbox = gr.Textbox(placeholder="💭 Enter your message", lines=2, max_lines=5)
+            with gr.Column(min_width=150):
+                direct_submit_btn = gr.Button(value="📩 Send")
+                direct_regenerate_btn = gr.Button(value="🔄 Regenerate")
+                direct_reset_btn = gr.Button(value="🗑️ Reset Chat")
+
         # ...
+
         direct_regenerate_btn.click(direct_regenerate, inputs=[model_dropdown, direct_textbox, direct_chatbot], outputs=[direct_textbox, direct_chatbot])
-    
         direct_textbox.submit(direct_chat, inputs=[model_dropdown, direct_textbox, direct_chatbot], outputs=[direct_textbox, direct_chatbot])
         direct_submit_btn.click(direct_chat, inputs=[model_dropdown, direct_textbox, direct_chatbot], outputs=[direct_textbox, direct_chatbot])
         direct_reset_btn.click(reset_direct_chat, None, [direct_textbox, direct_chatbot, model_dropdown])
-    with gr.Tab("Leaderboard"):
+
+    with gr.Tab("🏆 Leaderboard"):
+        gr.Markdown("## 📊 Check out the top-performing models!")
+        
         try:
             leaderboard = gr.Dataframe(refresh_leaderboard())
         except:
             leaderboard = gr.Dataframe()
-        refresh_btn = gr.Button("Refresh Leaderboard")
-        reset_db_btn = gr.Button("Reset Database")
+
+        with gr.Row():
+            refresh_btn = gr.Button("🔄 Refresh Leaderboard")
+            reset_db_btn = gr.Button("🗑️ Reset Database")
+        
         reset_message = gr.Textbox()
+
         reset_db_btn.click(reset_database, outputs=[reset_message])
         refresh_btn.click(refresh_leaderboard, outputs=[leaderboard])