Update app.py

app.py

@@ -1021,7 +1021,7 @@ def show_admin_dashboard():
         st.info("No admin activities logged yet")
     
     # Export functionality
-    st.header("💾 Data Export")
+    st.header("Data Export")
     col1, col2 = st.columns(2)
     
     with col1:
@@ -1068,11 +1068,77 @@ def transcribe_audio_file(uploaded_audio):
     except Exception as e:
         return f"Error: {str(e)}"
 
+My apologies for the persistent issue. It's clear that the previous CSS attempts were not sufficient to override Streamlit's internal styling for those specific elements, especially given the screenshots consistently show white text.
+
+The problem with directly setting color: black !important; on the .streamlit-success and .stInfo classes is that Streamlit's internal components might have even more specific rules or JavaScript that re-applies white color. The key is to target the actual text-holding elements (like p, span, div) within those containers, with higher specificity.
+
+Let's try a more robust and complete CSS solution within your show_main_app function. I will embed the full CSS block, with very targeted and aggressive !important rules for the problematic text colors, and ensure no other styles interfere.
+
+Here's the complete show_main_app function with the most robust CSS fixes for text color.
+
+Python
+
+import streamlit as st
+import os, json, datetime, hashlib
+from langchain_community.vectorstores import FAISS
+from langchain_community.embeddings import HuggingFaceEmbeddings
+from langchain_groq import ChatGroq
+from langchain.chains import LLMChain
+from langchain.prompts import PromptTemplate
+from gtts import gTTS
+from pathlib import Path
+from dotenv import load_dotenv
+from sentence_transformers import SentenceTransformer, util
+import altair as alt
+import speech_recognition as sr
+from transformers import pipeline
+import torch
+import pickle
+import re
+import pandas as pd
+
+# Load environment variables (ensure these are loaded at the top of your script)
+load_dotenv()
+GROQ_API_KEY = os.getenv("GROQ_API_KEY")
+CRISIS_KEYWORDS = ["suicide", "kill myself", "end it all", "worthless", "can't go on", "hurt myself", "self harm", "want to disappear", "no reason to live"]
+
+# Initialize session state (ensure these are at the top of your script)
+if "authenticated" not in st.session_state:
+    st.session_state.authenticated = False
+if "username" not in st.session_state:
+    st.session_state.username = None
+if "is_admin" not in st.session_state:
+    st.session_state.is_admin = False
+if "transcribed_text" not in st.session_state:
+    st.session_state.transcribed_text = ""
+
+# Admin configuration (ensure these are at the top of your script)
+ADMIN_USERNAME = os.getenv("ADMIN_USERNAME")
+ADMIN_PASSWORD = os.getenv("ADMIN_PASSWORD")
+
+# Assume these functions are defined elsewhere in your script:
+# login, signup, load_user_journal, save_user_journal,
+# detect_emotion, is_crisis, build_user_vectorstore, load_user_vectorstore,
+# transcribe_audio_file, speak
+
+# Example placeholder functions (REMOVE THESE IF YOU HAVE YOUR ACTUAL FUNCTIONS)
+def login(u, p): return True, "Logged in!", False
+def signup(u, p, e): return True, "Signed up!"
+def load_user_journal(u): return []
+def save_user_journal(u, i, e, c, r): pass
+def detect_emotion(text): return "neutral", 0.8
+def is_crisis(text): return False
+def build_user_vectorstore(u, q): return FAISS.from_texts(q, HuggingFaceEmbeddings())
+def load_user_vectorstore(u): return None
+def transcribe_audio_file(file): return "This is a transcribed voice message."
+def speak(text, username): st.audio(b"", format="audio/ogg") # Placeholder for actual speech
+
+
 def show_main_app():
     """Main DilBot application"""
     username = st.session_state.username
-    
-    st.set_page_config(page_title="DilBot - Emotional AI", page_icon="🧠", layout="wide") 
+
+    st.set_page_config(page_title="DilBot - Emotional AI", page_icon="🧠", layout="wide")
 
     # --- DEFINE QUOTE CATEGORIES HERE ---
     quote_categories = {
@@ -1083,7 +1149,7 @@ def show_main_app():
     }
     # --- END QUOTE CATEGORIES DEFINITION ---
 
-    # --- ENHANCED CUSTOM CSS FOR MAIN APP ---
+    # --- ENHANCED CUSTOM CSS FOR MAIN APP (INCLUDING ALL FIXES) ---
     st.markdown("""
     <style>
     /* Global Styles & Background */
@@ -1261,6 +1327,8 @@ def show_main_app():
     /* FIX: Selectbox selected value text color and ensure it fits properly */
     [data-testid="stSelectbox"] input[type="text"] {
         color: black !important; /* Force text to be black */
+        -webkit-text-fill-color: black !important; /* For Webkit browsers like Chrome, Safari */
+        opacity: 1 !important; /* Ensure no transparency issues */
         flex-grow: 1; /* Allow input to take up most space */
         padding: 12px 5px; /* Adjust vertical padding within the input */
         font-size: 1.05em; /* Ensure consistent font size */
@@ -1296,30 +1364,41 @@ def show_main_app():
         fill: black !important;
     }
 
+
     /* File Uploader */
-   [data-testid="stFileUploaderDropzone"] {
+    [data-testid="stFileUploaderDropzone"] {
         border-radius: 12px; /* More rounded */
         border: 2px dashed #a0a8b4;
-        background-color: #ffffff;
+        background-color: #ffffff !important; /* Ensure background is white */
         padding: 25px; /* More padding */
         transition: border-color 0.3s ease, background-color 0.3s ease;
         margin-bottom: 1.5rem;
+        display: flex; /* Ensure content is centered */
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        min-height: 120px;
+        overflow: hidden; /* Hide overflowing content */
     }
     [data-testid="stFileUploaderDropzone"]:hover {
         border-color: #5d6dbe; /* Highlight on hover */
         background-color: #f7f9fb;
     }
-   
-    [data-testid="stFileUploaderDropzone"] *, 
+
+    /* FIX: File Uploader text color */
+    /* Target all relevant text elements inside the file uploader dropzone */
+    [data-testid="stFileUploaderDropzone"] *,
     [data-testid="stFileUploaderDropzone"] p,
     [data-testid="stFileUploaderDropzone"] span,
-    [data-testid="stFileUploaderDropzone"] div { 
-        color: black !important; 
-        white-space: normal !important; 
-        word-break: break-word !important; 
-        font-weight: normal !important; 
-        opacity: 1 !important; 
+    [data-testid="stFileUploaderDropzone"] div {
+        color: black !important; /* Force all text to black */
+        white-space: normal !important; /* Prevent text clipping */
+        word-break: break-word !important; /* Allow long words to break */
+        font-weight: normal !important; /* Reset any bolding that might make text appear thinner */
+        opacity: 1 !important; /* Ensure full visibility */
     }
+    /* More specific selectors for file uploader text, often containing the "Drag and drop..." message */
     [data-testid="stFileUploaderDropzone"] > div > div > div:nth-child(2) > div:first-child {
         color: black !important;
     }
@@ -1327,6 +1406,7 @@ def show_main_app():
         color: black !important;
     }
 
+
     [data-testid="stFileUploaderFileName"] {
         font-size: 0.95em;
         color: #495057;
@@ -1355,18 +1435,44 @@ def show_main_app():
     /* Specific styles for each type with slightly richer colors */
     [data-testid="stAlert"] .streamlit-warning {
         background-color: #fef7e0; color: #7a5f00; border-left: 6px solid #ffcc00;
-          }
+    }
+    /* FIX: Emotion Detected (st.success) text color to black */
     [data-testid="stAlert"] .streamlit-success {
-        background-color: #e6ffe6; /* Your existing background */
-        border-left: 6px solid #4CAF50; /* Your existing border */
-        color: black !important; /* FORCED BLACK TEXT COLOR */
-      }
+        background-color: #e6ffe6;
+        border-left: 6px solid #4CAF50;
+        /* Set color here as fallback, but specific p/span/div below are more robust */
+        color: black !important;
+    }
+    /* More aggressive targeting for text inside st.success alert */
+    [data-testid="stAlert"] .streamlit-success p,
+    [data-testid="stAlert"] .streamlit-success span,
+    [data-testid="stAlert"] .streamlit-success div {
+        color: black !important;
+    }
+
     [data-testid="stAlert"] .streamlit-error {
-         background-color: #ffe6e6; color: #8c0a0a; border-left: 6px solid #e74c3c;
-      }
-    [data-testid="stAlert"] .streamlit-info {
-         background-color: #e6f7ff; color: #0a4d6e; border-left: 6px solid #3498db;
-      }
+        background-color: #ffe6e6; color: #8c0a0a; border-left: 6px solid #e74c3c;
+    }
+    /* FIX: Quote for you (st.info) text color to black */
+    .stInfo {
+        background-color: #e6f7ff; /* Lighter blue for quote box */
+        border-left: 6px solid #64b5f6; /* Accent border, slightly brighter blue */
+        /* Set color here as fallback, but specific p/span/strong/div below are more robust */
+        color: black !important;
+        border-radius: 10px;
+        padding: 18px 25px;
+        margin-top: 2rem;
+        font-style: italic;
+        font-size: 1.05em;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+    }
+    /* More aggressive targeting for text inside st.info alert */
+    .stInfo p,
+    .stInfo span,
+    .stInfo strong,
+    .stInfo div {
+        color: black !important;
+    }
 
 
     /* Chat Message Bubbles */
@@ -1414,22 +1520,6 @@ def show_main_app():
         margin-bottom: 2rem;
     }
 
-    /* Quote for you (st.info) */
-    .stInfo {
-        background-color: #e6f7ff; /* Lighter blue for quote box */
-        border-left: 6px solid #64b5f6; /* Accent border, slightly brighter blue */
-        color: black !important; /* FORCED BLACK TEXT COLOR */
-        border-radius: 10px;
-        padding: 18px 25px;
-        margin-top: 2rem;
-        font-style: italic;
-        font-size: 1.05em;
-         box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-            }
-    .stInfo span, .stInfo strong { /* Ensure any span/bold text inside is also black */
-        color: black !important;
-           }
-
 
     /* Audio Player */
     .stAudio {
@@ -1501,7 +1591,6 @@ def show_main_app():
 
     </style>
     """, unsafe_allow_html=True)
-    # --- END CUSTOM CSS ---
 
     # --- Streamlit UI Components ---
     # Header with logout button
@@ -1521,8 +1610,9 @@ def show_main_app():
     with st.container(border=True): # Streamlit's built-in container with border
         col1, col2 = st.columns(2)
         with col1:
-            st.markdown("<label class='stSelectbox>label' style='margin-bottom:0.6rem;padding-left:5px;'>Choose a quote theme:</label>", unsafe_allow_html=True) # Custom label for selectbox
-            selected_category = st.selectbox("Choose a quote theme", list(quote_categories.keys()), label_visibility="collapsed") # Hide default label
+            # Using a custom markdown for the label as selectbox label_visibility is collapsed
+            st.markdown("<label class='stSelectbox>label' style='margin-bottom:0.6rem;padding-left:5px;'>🎯 Choose a quote theme:</label>", unsafe_allow_html=True)
+            selected_category = st.selectbox("Choose a quote theme", list(quote_categories.keys()), label_visibility="collapsed")
 
         with col2:
             st.markdown("<h5>📁 Custom Quotes & Voice Input</h5>", unsafe_allow_html=True)
@@ -1542,7 +1632,7 @@ def show_main_app():
     # Handle vectorstore (ORIGINAL LOGIC - NO CHANGE)
     current_quotes = []
     vectorstore = None
-    
+
     if uploaded_quotes:
         custom_quotes = uploaded_quotes.read().decode("utf-8").splitlines()
         custom_quotes = [quote.strip() for quote in custom_quotes if quote.strip()]
@@ -1555,7 +1645,7 @@ def show_main_app():
         if vectorstore is None:
             vectorstore = build_user_vectorstore(username, default_quotes)
         current_quotes = default_quotes
-    
+
     # Input area for user message
     st.markdown("<h3>💬 What's on your mind?</h3>", unsafe_allow_html=True)
     user_input = st.text_area(
@@ -1565,11 +1655,12 @@ def show_main_app():
         placeholder="Type here or use your transcribed voice message...",
         label_visibility="collapsed" # Hide default label
     )
-    st.markdown("<label class='stTextArea>label' style='margin-bottom:0.6rem;padding-left:5px;'>Share your thoughts, feelings, or experiences...</label>", unsafe_allow_html=True) # Custom label
+    # Custom label for text area
+    st.markdown("<label class='stTextArea>label' style='margin-bottom:0.6rem;padding-left:5px;'>Share your thoughts, feelings, or experiences...</label>", unsafe_allow_html=True)
 
 
     final_input = user_input.strip() or st.session_state.transcribed_text.strip()
-    
+
     # Main interaction button
     if st.button("🧠 Talk to DilBot", type="primary", use_container_width=True):
         if not final_input:
@@ -1578,11 +1669,11 @@ def show_main_app():
             with st.spinner("DilBot is thinking and feeling..."):
                 # Emotion detection (ORIGINAL LOGIC - NO CHANGE)
                 emotion, score = detect_emotion(final_input)
-                
+
                 # Get AI response (ORIGINAL LOGIC - NO CHANGE)
                 prompt_template = PromptTemplate(
                     input_variables=["context", "user_input", "username"],
-                    template="""You are DilBot, an empathetic emotional support AI companion for {username}. 
+                    template="""You are DilBot, an empathetic emotional support AI companion for {username}.
 Use the following emotional quote context to respond gently, supportively, and personally.
 Context quotes:
 {context}
@@ -1590,19 +1681,19 @@ User's message:
 {user_input}
 Respond as DilBot with warmth, empathy, and understanding. Keep it conversational and supportive."""
                 )
-                
+
                 # Get similar quotes (ORIGINAL LOGIC - NO CHANGE)
                 similar_docs = vectorstore.similarity_search(final_input, k=2)
                 context = "\n".join([doc.page_content for doc in similar_docs])
-                
+
                 # Generate response (ORIGINAL LOGIC - NO CHANGE)
                 groq_llm = ChatGroq(api_key=GROQ_API_KEY, model="llama3-70b-8192")
                 chain = LLMChain(llm=groq_llm, prompt=prompt_template)
                 response = chain.run(context=context, user_input=final_input, username=username)
-                
+
                 # Save to user's journal (ORIGINAL LOGIC - NO CHANGE)
                 save_user_journal(username, final_input, emotion, score, response)
-                
+
                 # Display results with new chat bubble styling
                 st.markdown("<h3 class='chat-title'>🤖 DilBot's Conversation:</h3>", unsafe_allow_html=True)
                 with st.container(border=True): # Container for the conversation output
@@ -1628,7 +1719,7 @@ Respond as DilBot with warmth, empathy, and understanding. Keep it conversationa
 
                     speak(response, username)
                     st.session_state.transcribed_text = ""
-            
+
             # Add a visual separator after each conversation turn (optional)
             st.markdown("<div class='chat-separator'></div>", unsafe_allow_html=True)
 
@@ -1636,10 +1727,10 @@ Respond as DilBot with warmth, empathy, and understanding. Keep it conversationa
     # User's personal dashboard
     st.markdown("---")
     st.header("📊 Your Personal Dashboard")
-    
+
     # Load user's journal (ORIGINAL LOGIC - NO CHANGE)
     journal_data = load_user_journal(username)
-    
+
     if journal_data:
         # Statistics
         st.subheader("📈 Your Emotional Statistics") # Moved statistics to the top of dashboard for prominence
@@ -1672,7 +1763,7 @@ Respond as DilBot with warmth, empathy, and understanding. Keep it conversationa
                 })
             if df_data:
                 df_chart = pd.DataFrame(df_data) # Use pandas DataFrame for better Altair integration
-                
+
                 chart = alt.Chart(df_chart).mark_bar().encode(
                 x=alt.X('date:N', title='Date', sort=None), # Sort by date ensures correct order
                 y=alt.Y('count():Q', title='Frequency'),
@@ -1698,13 +1789,12 @@ Respond as DilBot with warmth, empathy, and understanding. Keep it conversationa
                         st.markdown(f"**DilBot replied:** {entry['response']}")
             else:
                 st.info("No recent conversations yet. Start talking to DilBot!")
-            
+
     else:
         st.info("🌟 Start your first conversation with DilBot to see your personal dashboard and insights!")
 
     st.markdown("---")
-    st.markdown("<p class='footer-caption'>Built by Members of CSG Hackathon Team | Your data is stored privately and securely</p>", unsafe_allow_html=True)
-
+    st.markdown("<p class='footer-caption'>Built by Members of CSG Hackathon Team | Your data is stored privately and securely</p>", unsafe_allow_html=True) 
 # Main app logic
 def main():
     if not st.session_state.authenticated: