Update app.py

app.py

@@ -31,7 +31,7 @@ embeddings = HuggingFaceEmbeddings(model_name="sentence-transformers/all-MiniLM-
 # Set page config
 st.set_page_config(page_title="Neural-Vision Enhanced", layout="wide")
 
-# Custom CSS matching previous theme
+# Updated Custom CSS with a modern feel
 st.markdown("""
     <style>
     :root {
@@ -42,62 +42,104 @@ st.markdown("""
         --light-grey: #F3F4F6;
         --white: #FFFFFF;
         --border-grey: #E5E7EB;
+        --gradient-bg: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
     }
     .stApp {
-        background-color: var(--light-grey);
+        background: var(--gradient-bg);
         font-family: 'Inter', sans-serif;
         max-width: 1200px;
         margin: 0 auto;
+        transition: all 0.3s ease;
     }
     .header {
-        background-color: var(--white);
+        background: linear-gradient(90deg, var(--white) 80%, var(--light-blue) 100%);
         border-bottom: 2px solid var(--border-grey);
-        padding: 15px;
-        border-radius: 12px 12px 0 0;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+        padding: 20px;
+        border-radius: 16px 16px 0 0;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
         text-align: center;
+        transition: transform 0.2s ease;
+    }
+    .header:hover {
+        transform: translateY(-2px);
     }
     .header-title {
         color: var(--dark-blue);
-        font-size: 1.8rem;
-        font-weight: 700;
+        font-size: 1.9rem;
+        font-weight: 800;
         margin: 0;
+        letter-spacing: -0.5px;
     }
     .header-subtitle {
         color: var(--medium-grey);
-        font-size: 1rem;
-        margin-top: 5px;
+        font-size: 1.1rem;
+        margin-top: 8px;
+        font-weight: 500;
+        opacity: 0.9;
     }
     .sidebar .sidebar-content {
-        background-color: var(--white);
-        border-radius: 12px;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-        padding: 15px;
+        background: var(--white);
+        border-radius: 16px;
+        box-shadow: 0 6px 16px rgba(0,0,0,0.12);
+        padding: 20px;
+        transition: box-shadow 0.3s ease;
+    }
+    .sidebar .sidebar-content:hover {
+        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
     }
     .chat-container {
-        background-color: var(--white);
-        border-radius: 12px;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-        padding: 15px;
-        margin-top: 20px;
+        background: var(--white);
+        border-radius: 16px;
+        box-shadow: 0 6px 16px rgba(0,0,0,0.12);
+        padding: 20px;
+        margin-top: 25px;
+        transition: box-shadow 0.3s ease;
+    }
+    .chat-container:hover {
+        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
     }
     .user-message {
-        background-color: var(--primary-blue);
+        background: linear-gradient(45deg, var(--primary-blue), #60A5FA);
         color: var(--white);
-        border-radius: 18px 18px 4px 18px;
-        padding: 12px 16px;
+        border-radius: 20px 20px 6px 20px;
+        padding: 14px 18px;
         margin-left: auto;
         max-width: 80%;
-        margin-bottom: 10px;
+        margin-bottom: 12px;
+        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
+        transition: transform 0.2s ease;
+    }
+    .user-message:hover {
+        transform: scale(1.02);
     }
     .bot-message {
-        background-color: var(--light-grey);
+        background: var(--light-grey);
         color: var(--medium-grey);
-        border-radius: 18px 18px 18px 4px;
-        padding: 12px 16px;
+        border-radius: 20px 20px 20px 6px;
+        padding: 14px 18px;
         margin-right: auto;
         max-width: 80%;
-        margin-bottom: 10px;
+        margin-bottom: 12px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+        transition: transform 0.2s ease;
+    }
+    .bot-message:hover {
+        transform: scale(1.02);
+    }
+    div.stButton > button {
+        background: var(--primary-blue);
+        color: var(--white);
+        border-radius: 12px;
+        padding: 10px 20px;
+        font-weight: 600;
+        border: none;
+        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+        transition: all 0.3s ease;
+    }
+    div.stButton > button:hover {
+        background: #2563EB;
+        transform: translateY(-2px);
+        box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
     }
     </style>
 """, unsafe_allow_html=True)
@@ -109,6 +151,8 @@ if 'chat_history' not in st.session_state:
     st.session_state.chat_history = []
 if 'vector_store' not in st.session_state:
     st.session_state.vector_store = None
+if 'tavily_api_key' not in st.session_state:
+    st.session_state.tavily_api_key = None
 
 # Helper Functions
 def convert_df_to_text(df):
@@ -142,7 +186,8 @@ def get_groq_response(prompt, mode, use_web_search=False):
         docs = st.session_state.vector_store.similarity_search(prompt, k=3)
         context = "\n\nDataset Context:\n" + "\n".join([f"- {doc.page_content}" for doc in docs])
     
-    if use_web_search:
+    if use_web_search and st.session_state.tavily_api_key:
+        os.environ["TAVILY_API_KEY"] = st.session_state.tavily_api_key
         tavily = TavilySearchResults(max_results=3)
         web_results = tavily.invoke(prompt)
         context += "\n\nWeb Search Results:\n" + "\n".join([f"- {res['content'][:200]}..." for res in web_results])
@@ -329,7 +374,16 @@ with st.sidebar:
     st.session_state.active_page = page
     st.markdown("---")
     st.markdown("**Environment Setup**")
-    os.environ["TAVILY_API_KEY"] = st.text_input("Tavily API Key", type="password", help="For web search functionality")
+    
+    # Tavily API Key Input and Submit Button
+    tavily_api_input = st.text_input("Tavily API Key", type="password", help="Enter your Tavily API key for web search functionality")
+    if st.button("Submit API Key"):
+        if tavily_api_input:
+            st.session_state.tavily_api_key = tavily_api_input
+            st.success("Tavily API Key submitted successfully!")
+        else:
+            st.warning("Please enter a valid API key.")
+    
     st.markdown("---")
     st.markdown("v5.0 | © 2025 Neural-Vision")