Enhance UI with custom theme, improved layout and visual elements

app.py

@@ -6,6 +6,7 @@ from utils import (
     evaluate_expertise,
     get_crypto_data,
 )
+import random
 
 
 def run_chat(crypto, data_span):
@@ -46,25 +47,105 @@ def run_chat(crypto, data_span):
     yield chat_history, chat_history
 
 
-with gr.Blocks() as demo:
-    gr.Markdown("## 🧠 TranchVest AI - Crypto Behavior Analysis")
+# Define a custom theme with vibrant colors
+custom_theme = gr.themes.Soft().set(
+    primary_hue="indigo",
+    secondary_hue="emerald",
+    neutral_hue="slate",
+    font=[gr.themes.GoogleFont("Poppins"), "ui-sans-serif", "system-ui", "sans-serif"],
+)
 
-    with gr.Row():
-        crypto_dropdown = gr.Dropdown(
-            ["btc", "eth", "virtual", "bnb"], label="Select Crypto"
-        )
-        span_dropdown = gr.Dropdown(
-            ["24h", "7d", "14d", "30d", "60d"], label="Select Data Span"
+# Create emoji indicators for cryptocurrencies
+crypto_emojis = {
+    "btc": "₿ Bitcoin",
+    "eth": "Ξ Ethereum",
+    "virtual": "🔮 Virtual",
+    "bnb": "🪙 BNB"
+}
+
+# Create time span emojis
+time_emojis = {
+    "24h": "⏰ 24 Hours",
+    "7d": "📅 7 Days",
+    "14d": "🗓️ 14 Days",
+    "30d": "📆 30 Days",
+    "60d": "📈 60 Days"
+}
+
+with gr.Blocks(theme=custom_theme) as demo:
+    with gr.Box(css="padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);"):
+        gr.Markdown(
+            """
+            # 🧠 TranchVest AI - Crypto Risk Assessment
+            ### Analyze cryptocurrency behavior with AI-powered insights
+            """
         )
-        start_btn = gr.Button("Start Chat")
+        
+        with gr.Row(equal_height=True):
+            with gr.Column(scale=1):
+                gr.Markdown("### 🚀 Configuration")
+                with gr.Box(css="padding: 15px; border-radius: 8px; background: rgba(0, 0, 0, 0.03);"):
+                    crypto_dropdown = gr.Dropdown(
+                        list(crypto_emojis.values()), 
+                        label="Select Cryptocurrency",
+                        value="₿ Bitcoin",
+                        container=True,
+                        interactive=True
+                    )
+                    span_dropdown = gr.Dropdown(
+                        list(time_emojis.values()), 
+                        label="Select Time Frame",
+                        value="📅 7 Days",
+                        container=True,
+                        interactive=True
+                    )
+                    start_btn = gr.Button(
+                        "🔍 Start Analysis", 
+                        variant="primary",
+                        size="lg"
+                    )
+
+            with gr.Column(scale=2):
+                chatbot = gr.Chatbot(
+                    height=600,
+                    bubble_full_width=False,
+                    show_copy_button=True,
+                    avatar_images=("https://em-content.zobj.net/source/microsoft-teams/363/robot_1f916.png", None),
+                    css="border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);"
+                )
 
-    chatbot = gr.Chatbot(height=600)
+    # Tips and information section
+    with gr.Accordion("ℹ️ About This Tool", open=False):
+        gr.Markdown(
+            """
+            ### How to use this tool:
+            1. **Select a cryptocurrency** from the dropdown menu
+            2. **Choose a time frame** for analysis
+            3. **Click 'Start Analysis'** to begin the AI-driven assessment
+            4. The AI will ask a series of questions about risk factors
+            5. At the end, you'll receive a comprehensive risk evaluation
+            
+            This tool helps evaluate investment risk factors for different cryptocurrencies based on market behavior and trends.
+            """
+        )
+        
+    # Add hidden state
     state = gr.State([])
 
+    # Process the input values from the dropdowns to match the expected format in run_chat
+    def preprocess_input(crypto, span):
+        # Extract the crypto code from the dropdown display value
+        crypto_code = next((code for code, display in crypto_emojis.items() if display == crypto), "btc")
+        # Extract the span code from the dropdown display value
+        span_code = next((code for code, display in time_emojis.items() if display == span), "7d")
+        return crypto_code, span_code
+    
+    # Connect the button click
     start_btn.click(
-        run_chat,
+        lambda c, s: preprocess_input(c, s),
         [crypto_dropdown, span_dropdown],
-        [chatbot, state],
+        [lambda x, y: run_chat(x, y)[0], lambda x, y: run_chat(x, y)[1]],
+        _js="() => [{}, {}]"  # This ensures the outputs are passed correctly
     )
 
 demo.launch()