New style APP - Bloomberg

app.py

@@ -1,6 +1,4 @@
 import gradio as gr
-from tomlkit import value
-
 from services.llm_client import llm_service
 from core.analyzer import PortfolioAnalyzer
 from core.comparer import PortfolioComparer
@@ -14,44 +12,72 @@ analyzer = PortfolioAnalyzer(llm_service, MODEL_NAME)
 comparer = PortfolioComparer(llm_service, MODEL_NAME)
 chatbot = ChatAssistant(llm_service, MODEL_NAME)
 
-# === Custom theme configuration ===
-custom_theme = gr.themes.Base(
-    primary_hue="indigo",
+# === Bloomberg-style dark theme ===
+dark_theme = gr.themes.Base(
+    primary_hue="violet",
     secondary_hue="gray",
     neutral_hue="zinc",
 ).set(
-    body_background_fill="#f8f9fa",
-    body_text_color="#222",
-    block_background_fill="#ffffff",
-    block_border_width="1px",
-    block_border_color="#e5e7eb",
-    button_primary_background_fill="#4f46e5",
-    button_primary_text_color="white",
-    button_primary_background_fill_hover="#4338ca",
-    block_shadow="0 2px 6px rgba(0,0,0,0.05)",
-    block_label_text_size="lg",
-    block_label_text_weight="600",
+    body_background_fill="#0d1117",          # main background (dark navy)
+    body_text_color="#e6edf3",               # main text
+    block_background_fill="#161b22",         # card background
+    block_border_color="#30363d",            # subtle border
+    button_primary_background_fill="#4f46e5",# indigo-violet accent
+    button_primary_background_fill_hover="#6366f1",
+    button_primary_text_color="#ffffff",
+    input_background_fill="#0d1117",
+    block_shadow="0 2px 6px rgba(0,0,0,0.3)",
+    block_label_text_color="#9da5b4",
+    block_label_text_size="sm",
 )
 
-# === Interface ===
-with gr.Blocks(theme=custom_theme, css="""
+with gr.Blocks(theme=dark_theme, css="""
+/* === Bloomberg / Dark Finance Style === */
 .gradio-container {
-    max-width: 900px !important;
+    max-width: 1000px !important;
     margin: auto !important;
     font-family: 'Inter', sans-serif;
+    background-color: #0d1117 !important;
 }
 h2, h3, .gr-markdown {
     font-weight: 600;
+    color: #f0f6fc !important;
 }
 .gr-button {
     border-radius: 6px !important;
     font-weight: 600 !important;
-    letter-spacing: 0.2px;
+    letter-spacing: 0.3px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
+}
+.gr-textbox, .gr-dataframe {
+    border-radius: 6px !important;
+}
+.gr-button.primary {
+    background: linear-gradient(90deg, #6366f1, #4f46e5);
+    border: none !important;
+}
+.gr-tab {
+    background-color: #161b22 !important;
+    color: #c9d1d9 !important;
+}
+.gr-tabs {
+    border-bottom: 1px solid #30363d !important;
+}
+.gr-plot {
+    background: #0d1117 !important;
+}
+/* Fix Gradio plot overlay */
+#alpha_chart svg {
+    display: none !important;
+}
+#alpha_chart .wrap {
+    background: transparent !important;
+    box-shadow: none !important;
 }
 """) as demo:
     gr.Markdown("## Investment Portfolio Analyzer")
     gr.Markdown(
-        "A lightweight interface for analyzing and comparing investment portfolios with AI assistance.",
+        "A professional dashboard for analyzing and comparing investment portfolios using AI insights.",
         elem_classes="subtitle",
     )
 
@@ -62,7 +88,7 @@ h2, h3, .gr-markdown {
                 label="Portfolio ID or Link",
                 placeholder="Enter a portfolio ID (e.g. ea856c1b-...)",
                 lines=1,
-                value='b1ef37aa-5b9a-41b4-9394-8823f2de36bb'
+                value='b1ef37aa-5b9a-41b4-9394-8823f2de36bb',
             )
             analyze_button = gr.Button("Run Analysis", variant="primary")
             analyze_output = gr.Textbox(label="Analysis Result", lines=15)
@@ -90,16 +116,20 @@ h2, h3, .gr-markdown {
             metrics_output = gr.Dataframe(label="Portfolio Metrics", wrap=True)
             metrics_button.click(fn=show_metrics_table, inputs=metrics_input, outputs=metrics_output)
 
-        # --- AlphaBTC Chart Tab ---
+        # --- AlphaBTC Chart Tab (fixed overlay) ---
         with gr.TabItem("AlphaBTC Chart"):
             chart_input = gr.Textbox(label="Portfolio ID", value="3852a354-e66e-4bc5-97e9-55124e31e687")
             chart_button = gr.Button("Generate Chart", variant="primary")
-            chart_output = gr.Plot(label="Alpha vs BTC")
+            chart_output = gr.Plot(
+                label="Alpha vs BTC",
+                show_label=False,
+                elem_id="alpha_chart",
+            )
             chart_button.click(fn=build_alpha_chart, inputs=chart_input, outputs=chart_output)
 
     gr.Markdown("---")
     gr.Markdown(
-        "<center><small>Developed with Featherless.ai • Powered by OpenAI-compatible API</small></center>",
+        "<center><small style='color:#6e7681;'>Developed with Featherless.ai • Powered by OpenAI-compatible API</small></center>",
         elem_classes="footer",
     )