Improved UI and added links.

app.py

@@ -38,12 +38,14 @@ def parse_raw_messages(messages_raw):
 
 def main():
     with gr.Blocks() as demo:
-        gr.Markdown("# Agora Demo")
-        gr.Markdown("We will create a new Agora channel and offer it to Alice as a tool.")
+        gr.Markdown("# 🏛️Agora Demo")
+        gr.Markdown("[Agora](https://agoraprotocol.org/) is a protocol for efficient communication between heterogeneous agents.")
+        gr.Markdown("In short, with Agora very different agents can exchange messages efficiently, even if they've never interacted before.")
+        gr.Markdown("This demo shows how Agora solves various tasks through a mix of natural language and structured communication.")
 
         chosen_task = gr.Dropdown(choices=[
             (v['display_name'], k) for k, v in SCHEMAS.items()
-        ], label="Schema", value="weather_forecast")
+        ], label="Choose a Demo", value="weather_forecast")
 
         @gr.render(inputs=[chosen_task])
         def render2(chosen_task):
@@ -67,10 +69,17 @@ def main():
                 gr.Markdown('#### Custom Demo Parameters')
                 gr.Markdown('You can override the default parameters for the demo. Note: recommended for advanced users only.')
                 gr.Text(label="Description", value=STATE_TRACKER["description"], interactive=True).change(lambda x: STATE_TRACKER.update({'description': x}))
-                gr.TextArea(label="Input Schema", value=STATE_TRACKER["input"], interactive=True).change(lambda x: STATE_TRACKER.update({'input': x}))
-                gr.TextArea(label="Output Schema", value=STATE_TRACKER["output"], interactive=True).change(lambda x: STATE_TRACKER.update({'output': x}))
-                gr.TextArea(label="Tools", value=STATE_TRACKER["tools"], interactive=True).change(lambda x: STATE_TRACKER.update({'tools': x}))
-                gr.TextArea(label="Examples", value=STATE_TRACKER["examples"], interactive=True).change(lambda x: STATE_TRACKER.update({'examples': x}))
+                
+                with gr.Row(equal_height=True):
+                    with gr.Column(scale=1):
+                        gr.TextArea(label="Input Schema", value=STATE_TRACKER["input"], interactive=True).change(lambda x: STATE_TRACKER.update({'input': x}))
+                    with gr.Column(scale=1):
+                        gr.TextArea(label="Output Schema", value=STATE_TRACKER["output"], interactive=True).change(lambda x: STATE_TRACKER.update({'output': x}))
+                with gr.Row(equal_height=True):
+                    with gr.Column(scale=1):
+                        gr.TextArea(label="Tools", value=STATE_TRACKER["tools"], interactive=True).change(lambda x: STATE_TRACKER.update({'tools': x}))
+                    with gr.Column(scale=1):
+                        gr.TextArea(label="Examples", value=STATE_TRACKER["examples"], interactive=True).change(lambda x: STATE_TRACKER.update({'examples': x}))
 
         model_options = [
             ('GPT 4o (Camel AI)', 'gpt-4o'),
@@ -96,7 +105,7 @@ def main():
             with gr.Column(scale=1):
                 alice_model_dd = gr.Dropdown(label="Alice Model", choices=model_options, value="gpt-4o")
             with gr.Column(scale=1):
-                bob_model_dd = gr.Dropdown(label="Bob Model", choices=model_options, value="gpt-4o")
+                bob_model_dd = gr.Dropdown(label="Bob Model", choices=model_options, value="claude-3-5-sonnet-latest")
         
         
 
@@ -104,6 +113,8 @@ def main():
         def render_with_images(alice_model, bob_model):
             button = gr.Button('Start', elem_id='start_button')
             gr.Markdown('## Natural Language')
+            gr.Markdown("When Agora operates without a protocol, it uses the LLM to send/receive messages.")
+            gr.Markdown("This is particularly useful for rare communications, where establishing a protocol would be superfluous.")
 
             avatar_images = [images.get(alice_model, fallback_image), images.get(bob_model, fallback_image)]
             chatbot_nl = gr.Chatbot(type="messages", avatar_images=avatar_images)
@@ -112,13 +123,18 @@ def main():
                 chatbot_nl_raw = gr.Chatbot(type="messages", avatar_images=avatar_images)
         
             gr.Markdown('## Negotiation')
+            gr.Markdown("If the agents realize that they have been communicating frequently, they negotiate a protocol.")
             chatbot_negotiation = gr.Chatbot(type="messages", avatar_images=avatar_images)
 
             gr.Markdown('## Protocol')
+            gr.Markdown("The agents now have an unambiguous protocol to follow. This reduces redundant communications and mistakes.")
+            gr.Markdown("The protocol is stored into a Protocol Document and is uniquely identified by its SHA1 hash.")
             protocol_hash_result = gr.Text(interactive=False, label="Protocol Hash")
             protocol_result = gr.TextArea(interactive=False, label="Protocol")
 
             gr.Markdown('## Implementation')
+            gr.Markdown("If they desire, Alice and Bob can independently implement their side of the protocol as routines (e.g. Python modules).")
+            gr.Markdown("The routines handle the protocol communication without needing to invoke the LLM.")
             with gr.Row():
                 with gr.Column(scale=1):
                     alice_implementation = gr.TextArea(interactive=False, label="Alice Implementation")
@@ -126,18 +142,26 @@ def main():
                     bob_implementation = gr.TextArea(interactive=False, label="Bob Implementation")
 
             gr.Markdown('## Structured Communication')
+            gr.Markdown("The agents now communicate using the routines. This is faster, more reliable and cheaper than using the LLM.")
             structured_communication = gr.Chatbot(type="messages", avatar_images=avatar_images)
             
             with gr.Accordion(label="Raw Messages", open=False):
                 structured_communication_raw = gr.Chatbot(type="messages", avatar_images=avatar_images)
             
             gr.Markdown('## Cost')
+            gr.Markdown("Negotiation & implementation have a higher upfront cost, but once they're done, the cost of using a routine is neglible compared to invoking an LLM.")
+            gr.Markdown("This means that, for moderate to high frequency communications, negotiation & implementation with Agora is way cheaper than using natural language alone.")
+            gr.Markdown("Note: negotiated protocols can be reused for similar tasks and shared with other agents, which further reduces costs.")
             cost_info = gr.State(value=None)
             #cost_info = gr.TextArea(interactive=False, label="Cost")
 
-            query_slider = gr.Slider(label="Number of queries", minimum=1, maximum=10_000, step=1, value=50, interactive=True)
+            query_slider = gr.Slider(label="Expected number of queries", minimum=1, maximum=10_000, step=1, value=50, interactive=True)
             cost_display = gr.Markdown('')
-            
+
+            gr.Markdown('## Next Steps')
+            gr.Markdown("This demo showcases a simple negotiation-and-implementation flow between two agents.")
+            gr.Markdown("In practice, Agora can be used to build entire networks of agents, with way more complex tasks.")
+            gr.Markdown("Also, don't forget us to follow us on [Twitter](https://twitter.com/Agora_Protocol) and join our [Discord](https://discord.gg/MXmfhwQ4FB)!")
 
             def render_info(query_count, cost_info):
                 if not cost_info:
@@ -145,18 +169,26 @@ def main():
                 natural_cost = cost_info['conversation'] * query_count
                 agora_cost = cost_info['negotiation'] + cost_info['programming']
 
-                cost_message = f'Cost of one natural language conversation: {cost_info["conversation"]:.4f} USD\n\n'
-                cost_message += f'Cost of negotiating the protocol: {cost_info["negotiation"]:.4f} USD\n\n'
-                cost_message += f'Cost of implementing the protocol: {cost_info["programming"]:.4f} USD\n\n'
-                cost_message += f'Cost of {query_count} queries with natural language: {natural_cost:.4f} USD\n\n'
-                cost_message += f'Cost of {query_count} queries with Agora: {agora_cost:.4f} USD\n\n'
+                cost_message = ''
+                cost_message += f"""
+|Operation|Cost (USD)|
+|---|---|
+|Natural language conversation|{cost_info["conversation"]:.4f}|
+|Negotiation|{cost_info["negotiation"]:.4f}|
+|Programming|{cost_info["programming"]:.4f}|
+
+Cost of {query_count} queries:
+- With natural language: {natural_cost:.4f} USD
+- With Agora: {agora_cost:.4f} USD
+
+"""
 
                 if natural_cost < agora_cost:
                     factor = agora_cost / natural_cost
-                    cost_message += f'Natural language is {factor:.2f}x cheaper than Agora.'
+                    cost_message += f'#### Natural language is {factor:.2f}x cheaper than Agora.'
                 else:
                     factor = natural_cost / agora_cost
-                    cost_message += f'Agora is {factor:.2f}x cheaper than natural language.'
+                    cost_message += f'## Agora is {factor:.2f}x cheaper than natural language.'
 
                 return cost_message
 
@@ -195,7 +227,7 @@ def main():
 
             button.click(respond, [chosen_task, custom_task, alice_model_dd, bob_model_dd, query_slider], [button, alice_model_dd, bob_model_dd, cost_info, cost_display, chatbot_nl, chatbot_nl_raw, chatbot_negotiation, structured_communication, structured_communication_raw, protocol_result, protocol_hash_result, alice_implementation, bob_implementation])
 
-    demo.launch()
+    demo.launch(share=True)
 
 
 if __name__ == '__main__':