updated main UI for agentx

.gitignore

@@ -172,3 +172,5 @@ cython_debug/
 
 # PyPI configuration file
 .pypirc
+
+graph.png

src/chatbot/main.py

@@ -5,10 +5,40 @@ from app_interface import create_expense_register_page
 expense_register_page = create_expense_register_page()
 dashboard_page = create_dashboard_page()
 
-dashboard = gr.TabbedInterface(
-    [expense_register_page, dashboard_page],
-    ["expense_register", "dashboard"],
-)
+how_to = """
+## Hello AgentX judges
+
+Our team is building a AI-agent-empowered platform to seamlessly connect all parties that help fight the climate change.
+
+In the first phase, we focus on connecting between local forest-protecting communities and NGOs in Thailand 🇹🇭.
+
+For now, the prototype of the platform has two main components:
+1. Expense Register, where community members can submit their expense receipts to NGOs effortlessly.
+2. Dashboard, where NGOs can check project status and audit the expenses submitted by community members with AI-agent assistance and intelligence
+
+As we are currently building other tools of the platform, we are excited to invite you to try out the prototype and appreciate your feedback.
+
+Best regards 🙏🏻,
+
+Case Done Team
+
+---
+
+## How to use this demo:
+1. Select "Expense Register" to submit your expense receipts. You can upload an image of a receipt and the AI agent will do its task.
+2. Select "Dashboard" to check project status and audit the expenses related to the community's project.
+
+---
+"""
+
+with gr.Blocks() as dashboard:
+    gr.Markdown("# Hello Earth 🌍")
+    with gr.Accordion("README", open=False):
+        gr.Markdown(how_to)
+    tabs = gr.TabbedInterface(
+        [expense_register_page, dashboard_page],
+        ["Expense Register", "Dashboard"],
+    )
 
 if __name__ == "__main__":
     dashboard.launch()