New tabs and functions v2.4

app.py

@@ -70,28 +70,39 @@ with gr.Blocks(css=custom_css) as demo:
             chart_out = gr.Plot(label="Alpha vs BTC")
             chart_btn.click(fn=build_alpha_chart, inputs=chart_in, outputs=chart_out)
 
-        # --- Crypto Intelligence Dashboard (Coinlore, Altair) ---
+        # --- Crypto Intelligence Dashboard (Refined layout) ---
         with gr.TabItem("Crypto Intelligence Dashboard"):
             gr.Markdown("### 💹 Coinlore Market Dashboard (Altair Edition)")
 
+            # Controls
             with gr.Row():
-                top_slider = gr.Slider(label="Top N coins", minimum=20, maximum=100, step=10, value=50)
-                load_btn = gr.Button("Generate Dashboard", variant="primary")
+                top_slider = gr.Slider(
+                    label="Top N coins", minimum=20, maximum=100, step=10, value=50, scale=70
+                )
+                load_btn = gr.Button("Generate Dashboard", variant="primary", scale=30)
 
-            with gr.Row():
-                treemap_plot = gr.Plot(label="Market Composition", scale=70)
-                movers_plot = gr.Plot(label="Top Movers", scale=30)
+            # Main layout
+            with gr.Row(equal_height=True):
+                with gr.Column(scale=70):
+                    treemap_plot = gr.Plot(label="Market Composition")
+                with gr.Column(scale=30):
+                    ai_box = gr.Textbox(label="AI Market Summary", lines=18, elem_id="ai_summary_sidebar")
 
-            with gr.Row():
-                scatter_plot = gr.Plot(label="Market Cap vs Volume")
+            with gr.Row(equal_height=True):
+                movers_plot = gr.Plot(label="Top Movers", scale=50)
+                scatter_plot = gr.Plot(label="Market Cap vs Volume", scale=50)
+
+            from core.crypto_dashboard import build_crypto_dashboard
 
-            ai_box = gr.Textbox(label="AI Market Summary", lines=8, elem_id="llm_comment_box")
 
             def run_dash(n): return build_crypto_dashboard(n)
-            load_btn.click(fn=run_dash,
-                           inputs=top_slider,
-                           outputs=[treemap_plot, movers_plot, scatter_plot, ai_box],
-                           show_progress="minimal")
+
+            load_btn.click(
+                fn=run_dash,
+                inputs=top_slider,
+                outputs=[treemap_plot, movers_plot, scatter_plot, ai_box],
+                show_progress="minimal",
+            )
 
     gr.Markdown("---")
     gr.Markdown(

core/ui_style.css

@@ -26,36 +26,80 @@ h2, h3, .gr-markdown {
 /* === Plot Sizing and Spacing === */
 [data-testid="plot-container"] {
     width: 100% !important;
-    margin: 0 auto 24px auto !important;
+    margin: 0 auto 22px auto !important;
+    background: transparent !important;
+    border: none !important;
 }
 [data-testid="plot-container"] canvas {
     width: 100% !important;
     height: auto !important;
 }
 
-/* === Sliders, Buttons, Text === */
-.gr-button {
-    border-radius: 6px !important;
-    font-weight: 600 !important;
-    background: linear-gradient(90deg, #6366f1, #4f46e5) !important;
-    border: none !important;
-}
-.gr-slider input[type=range]::-webkit-slider-thumb {
-    background: #6366f1 !important;
+/* === Dashboard Layout === */
+.gr-row { gap: 18px !important; }
+
+/* Верхний график (Treemap) */
+#root [label="Market Composition"] canvas {
+    height: 360px !important;
 }
 
-/* === Dashboard Layout === */
-[data-testid="plot-container"] { margin-bottom: 24px !important; }
-.gr-row { gap: 20px !important; }
+/* Нижние графики (Movers + Scatter) */
+#root [label="Top Movers"] canvas,
+#root [label="Market Cap vs Volume"] canvas {
+    height: 320px !important;
+}
 
-/* === Textbox Styling === */
+/* === Sidebar (AI Summary) === */
+#ai_summary_sidebar textarea,
 #llm_comment_box textarea {
+    height: 360px !important;
     background-color: #161b22 !important;
     color: #f0f6fc !important;
     border: 1px solid #30363d !important;
     border-radius: 6px !important;
     font-family: 'JetBrains Mono', monospace !important;
-    font-size: 14px !important;
+    font-size: 13.5px !important;
     line-height: 1.5 !important;
     padding: 12px !important;
+    resize: none !important;
+}
+
+/* === Sliders, Buttons, Text === */
+.gr-button {
+    border-radius: 6px !important;
+    font-weight: 600 !important;
+    letter-spacing: 0.3px;
+    height: 52px !important;
+    background: linear-gradient(90deg, #4f46e5, #6366f1) !important;
+    border: none !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+    transition: all 0.2s ease-in-out;
+}
+.gr-button:hover {
+    filter: brightness(1.08);
+    transform: translateY(-1px);
+}
+.gr-slider {
+    height: 52px !important;
+}
+.gr-slider input[type=range]::-webkit-slider-thumb {
+    background: #6366f1 !important;
+}
+
+/* === Tables === */
+.gr-dataframe table {
+    width: 100% !important;
+    color: #c9d1d9 !important;
+    background: #161b22 !important;
+}
+.gr-dataframe th {
+    background-color: #21262d !important;
+    color: #f0f6fc !important;
+    border-bottom: 1px solid #30363d !important;
+    text-transform: uppercase;
+    font-weight: 600 !important;
+}
+.gr-dataframe td {
+    border-top: 1px solid #30363d !important;
+    padding: 8px !important;
 }