Update app.py

app.py

@@ -52,38 +52,66 @@ user_vectorstores = {}
 # Dictionary to store chart data
 chart_data_store = {}
 
-# Custom CSS for Finance theme with new voice and speech buttons
+# Custom CSS for Finance theme with modern UI enhancements
 custom_css = """
-:root {
-    --primary-color: #0C4160;
-    --secondary-color: #0D6980;
-    --accent-color: #16A6DB;
-    --light-color: #EBF5FA;
-    --dark-text: #333333;
-    --light-text: #F5F5F5;
-    --border-color: #E5E7EB;
+@import url('shared-base.css');
+
+/* Finance-specific styles */
+.finance-card {
+    background: var(--surface-2);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    padding: var(--spacing-lg);
+    margin: var(--spacing-md) 0;
+    box-shadow: var(--shadow-md);
+    transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.finance-card:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-lg);
+}
+
+.chart-container {
+    background: var(--white);
+    border-radius: var(--radius-md);
+    padding: var(--spacing-md);
+    margin: var(--spacing-md) 0;
+    box-shadow: var(--shadow-sm);
+}
+
+.news-feed {
+    max-height: 400px;
+    overflow-y: auto;
+    padding: var(--spacing-md);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    background: var(--surface-1);
+}
+
+.news-item {
+    margin-bottom: var(--spacing-md);
+    padding-bottom: var(--spacing-md);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.news-title {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--text-color);
+    margin-bottom: var(--spacing-sm);
+}
+
+.news-summary {
+    color: var(--text-color-secondary);
+    line-height: 1.6;
+}
+
+.sentiment-gauge {
+    width: 100%;
+    height: 200px;
+    margin: var(--spacing-md) 0;
 }
-body { background-color: var(--light-color); font-family: 'IBM Plex Sans', sans-serif; }
-.container { max-width: 1200px !important; margin: 0 auto !important; padding: 10px; }
-.header { background-color: var(--primary-color); padding: 20px 0; margin-bottom: 20px; border-radius: 12px 12px 0 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
-.header-title { color: var(--light-text); font-size: 1.8rem; font-weight: 700; text-align: center; }
-.header-subtitle { color: var(--light-text); opacity: 0.8; font-size: 1rem; text-align: center; margin-top: 5px; }
-.chat-container { border-radius: 12px !important; box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important; background-color: #FFFFFF !important; border: 1px solid var(--border-color) !important; min-height: 500px; }
-.message-user { background-color: var(--accent-color) !important; color: var(--light-text) !important; border-radius: 18px 18px 4px 18px !important; padding: 12px 16px !important; margin-left: auto !important; max-width: 80% !important; }
-.message-bot { background-color: #F5F7FA !important; color: var(--dark-text) !important; border-radius: 18px 18px 18px 4px !important; padding: 12px 16px !important; margin-right: auto !important; max-width: 80% !important; }
-.input-area { background-color: #FFFFFF !important; border-top: 1px solid var(--border-color) !important; padding: 12px !important; border-radius: 0 0 12px 12px !important; }
-.input-box { border: 1px solid var(--border-color) !important; border-radius: 24px !important; padding: 12px 16px !important; box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important; }
-.send-btn { background-color: var(--accent-color) !important; border-radius: 24px !important; color: var(--light-text) !important; padding: 10px 20px !important; font-weight: 500 !important; }
-.clear-btn { background-color: #F0F0F0 !important; border: 1px solid var(--border-color) !important; border-radius: 24px !important; color: var(--dark-text) !important; padding: 8px 16px !important; font-weight: 500 !important; }
-.pdf-viewer-container { border-radius: 12px !important; box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important; background-color: #FFFFFF !important; border: 1px solid var(--border-color) !important; padding: 20px; }
-.pdf-viewer-image { max-width: 100%; height: auto; border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
-.stats-box { background-color: var(--light-color); padding: 10px; border-radius: 8px; margin-top: 10px; }
-.tool-container { background-color: white; border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); padding: 15px; margin-bottom: 20px; }
-.tool-title { font-weight: bold; color: var(--primary-color); margin-bottom: 10px; font-size: 1.1rem; }
-.chart-container { height: 400px; width: 100%; border-radius: 8px; overflow: hidden; }
-.toggle-container { display: flex; align-items: center; margin-bottom: 15px; }
-.toggle-label { margin-right: 10px; font-weight: 500; }
-.search-toggle { margin-left: 5px; }
 """
 
 # Function to process PDF files
@@ -860,6 +888,6 @@ gr.HTML("""
 </div>
 """)
 
-# Launch the app
+# Launch the app with modern UI
 if __name__ == "__main__":
-    demo.launch()  # Launch the demo directly instead of using create_interface()
+    demo.launch()