Update app.py

app.py

@@ -646,51 +646,293 @@ def show_main_app():
     username = st.session_state.username
     
     st.set_page_config(page_title="DilBot - Emotional AI", page_icon="🧠")
-     # --- PASTE YOUR CUSTOM CSS HERE FOR THE MAIN APP ---
+   # --- CUSTOM CSS FOR MAIN APP ---
     st.markdown("""
     <style>
-    /* Example: Styling for the main app page */
+    /* Global Styles & Background */
     .stApp {
-        background-color: #e6e9f0; /* Slightly different background */
+        background-color: #f0f2f6; /* Light, calming background */
+        color: #333333; /* Darker default text color for better readability */
+        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Modern, clean font */
     }
-    /* Chat message styling (more complex, but an idea) */
-    .user-message {
-        background-color: #dcf8c6; /* Light green for user */
+
+    /* Header & Titles */
+    h1, h2, h3, h4, h5, h6 {
+        color: #4A4A4A; /* Slightly darker grey for headings */
+        margin-top: 1.5rem;
+        margin-bottom: 0.8rem;
+    }
+    h1 {
+        font-size: 2.5em;
+        font-weight: 700;
+        color: #7289da; /* DilBot's primary color */
+    }
+    h2 {
+        font-size: 1.8em;
+        font-weight: 600;
+        border-bottom: 1px solid #e0e0e0; /* Subtle line under subheaders */
+        padding-bottom: 0.5rem;
+        margin-bottom: 1.5rem;
+    }
+    h3 {
+        font-size: 1.5em;
+        font-weight: 600;
+        color: #555555;
+    }
+
+    /* Metrics (Total Conversations, Most Common Emotion, Avg. Confidence) */
+    [data-testid="stMetric"] {
+        background-color: #ffffff;
+        border: 1px solid #e0e0e0;
         border-radius: 10px;
-        padding: 10px;
-        margin-bottom: 10px;
-        align-self: flex-end; /* Align to right */
+        padding: 15px;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.05);
+        text-align: center;
+        margin-bottom: 1rem;
+    }
+    [data-testid="stMetricLabel"] {
+        font-size: 0.9em;
+        color: #666666;
+        margin-bottom: 5px;
+    }
+    [data-testid="stMetricValue"] {
+        font-size: 2.2em;
+        font-weight: 700;
+        color: #7289da; /* Match DilBot's primary color */
+    }
+
+    /* Buttons */
+    .stButton>button {
+        background-color: #7289da; /* DilBot's primary blue/purple */
+        color: white;
+        border: none;
+        border-radius: 8px;
+        padding: 10px 20px;
+        font-size: 1em;
+        font-weight: bold;
+        transition: background-color 0.3s ease, transform 0.2s ease;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        cursor: pointer;
+    }
+    .stButton>button:hover {
+        background-color: #5b6fb8; /* Darker shade on hover */
+        transform: translateY(-2px); /* Slight lift effect */
+    }
+    .stButton>button:active {
+        background-color: #4a5a90;
+        transform: translateY(0);
+    }
+    /* Style for the logout button specifically if different */
+    [data-testid="stSidebarNav"] + div > .stButton > button { /* Adjust selector if needed for top-right logout */
+        background-color: #dc3545; /* Red for logout */
+    }
+    [data-testid="stSidebarNav"] + div > .stButton > button:hover {
+        background-color: #c82333;
+    }
+
+
+    /* Text Inputs and Text Areas */
+    .stTextInput>div>div>input, .stTextArea>div>div>textarea {
+        border-radius: 8px;
+        border: 1px solid #ced4da; /* Light grey border */
+        padding: 12px 15px;
+        font-size: 1em;
+        color: #333333;
+        box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
+        transition: border-color 0.3s ease, box-shadow 0.3s ease;
+    }
+    .stTextInput>div>div>input:focus, .stTextArea>div>div>textarea:focus {
+        border-color: #7289da; /* Highlight on focus */
+        box-shadow: 0 0 0 0.2rem rgba(114, 137, 218, 0.25);
+        outline: none;
+    }
+    .stTextInput>label, .stTextArea>label {
+        font-weight: 600;
+        color: #555555;
+        margin-bottom: 5px; /* Add some space below label */
+    }
+
+    /* Selectbox (Dropdown) */
+    .stSelectbox>div>div>div {
+        border-radius: 8px;
+        border: 1px solid #ced4da;
+        padding: 8px 12px;
+        font-size: 1em;
+        color: #333333;
+        box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
+    }
+    .stSelectbox>label {
+        font-weight: 600;
+        color: #555555;
     }
-    .bot-message {
-        background-color: #ffffff; /* White for bot */
+
+    /* File Uploader */
+    [data-testid="stFileUploaderDropzone"] {
         border-radius: 10px;
-        padding: 10px;
-        margin-bottom: 10px;
-        align-self: flex-start; /* Align to left */
-        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        border: 2px dashed #a0a8b4; /* Dashed border */
+        background-color: #ffffff;
+        padding: 20px;
+        transition: border-color 0.3s ease, background-color 0.3s ease;
+        margin-bottom: 1rem; /* Space below uploader */
+    }
+    [data-testid="stFileUploaderDropzone"]:hover {
+        border-color: #7289da; /* Highlight on hover */
+        background-color: #f7f7f7;
+    }
+    /* Hide the redundant 'Drag and drop file here' text */
+    [data-testid="stFileUploaderDropzone"] p:first-child {
+        display: none;
+    }
+    [data-testid="stFileUploaderFileName"] {
+        font-size: 0.9em;
+        color: #555;
+        margin-top: 5px;
+    }
+
+
+    /* Information, Success, Error, Warning Boxes */
+    [data-testid="stAlert"] {
+        border-radius: 8px;
+        padding: 15px 20px;
+        margin-bottom: 1rem;
+        font-size: 1em;
+        line-height: 1.5;
+    }
+    [data-testid="stAlert"] .css-1aumx4k { /* Inner div for icon/text */
+        align-items: center;
+    }
+    /* Specific styles for each type */
+    [data-testid="stAlert"] .streamlit-warning {
+        background-color: #fff3cd; /* Light yellow */
+        color: #664d03;
+        border-left: 5px solid #ffc107; /* Yellow border */
+    }
+    [data-testid="stAlert"] .streamlit-success {
+        background-color: #d1e7dd; /* Light green */
+        color: #0f5132;
+        border-left: 5px solid #198754; /* Green border */
+    }
+    [data-testid="stAlert"] .streamlit-error {
+        background-color: #f8d7da; /* Light red */
+        color: #842029;
+        border-left: 5px solid #dc3545; /* Red border */
+    }
+    [data-testid="stAlert"] .streamlit-info {
+        background-color: #cfe2ff; /* Light blue */
+        color: #055160;
+        border-left: 5px solid #0dcaf0; /* Cyan border */
+    }
+
+
+    /* Markdown for Quote and Response */
+    .stMarkdown h3 { /* For "DilBot's Response" title */
+        font-size: 1.6em;
+        color: #7289da;
+        margin-top: 2rem;
+        margin-bottom: 1rem;
+    }
+    /* Styling for the blockquote (DilBot's response) */
+    .stMarkdown blockquote {
+        background-color: #ffffff;
+        border-left: 6px solid #7289da; /* Accent border */
+        padding: 15px 20px;
+        margin: 1.5rem 0;
+        border-radius: 10px;
+        font-style: italic;
+        color: #4a4a4a;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+        line-height: 1.6;
+    }
+    .stMarkdown blockquote p { /* Ensure text inside blockquote is styled */
+        margin-bottom: 0;
+    }
+
+    /* Quote for you (st.info) */
+    .stInfo { /* Target the st.info for quotes specifically if needed */
+        background-color: #e6f7ff; /* Lighter blue for quote box */
+        border-left: 6px solid #4893c5; /* Accent border */
+        color: #004085;
+        border-radius: 8px;
+        padding: 15px 20px;
+        margin-top: 1.5rem;
+        font-style: italic;
+    }
+    .stInfo span[data-baseweb="tag"] { /* Targeting the '💭 Quote for you:' part */
+        font-weight: bold;
+        color: #004085;
+    }
+
+
+    /* Audio Player */
+    .stAudio {
+        margin-top: 1.5rem;
+        margin-bottom: 2rem;
+    }
+
+    /* Expander styling (for conversations) */
+    .streamlit-expanderContent {
+        background-color: #f8f9fa; /* Light background for content */
+        border-left: 3px solid #ced4da;
+        padding: 10px 15px;
+        border-bottom-left-radius: 8px;
+        border-bottom-right-radius: 8px;
+        margin-top: -10px; /* Adjust to sit right under header */
     }
-    /* Style for expanders */
     .streamlit-expanderHeader {
-        background-color: #f0f0f0;
-        border-radius: 5px;
-        padding: 10px;
-        margin-bottom: 5px;
+        background-color: #ffffff;
+        border: 1px solid #e0e0e0;
+        border-radius: 8px;
+        padding: 10px 15px;
+        margin-bottom: 0.5rem;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+    }
+    .streamlit-expanderHeader:hover {
+        background-color: #f5f5f5;
     }
+    .streamlit-expanderHeader > div > div > p { /* Target expander title text */
+        font-weight: 500;
+        color: #333333;
+    }
+    .stExpander.css-1r0f5rs.e1gf0vsg1 { /* specific class for closed expander */
+        /* You might need to inspect to get the exact class for closed/open state */
+        /* border-radius: 8px; */
+    }
+
+
+    /* Horizontal rule */
+    hr {
+        border-top: 1px solid #e0e0e0;
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+    }
+
+    /* Caption (footer) */
+    .stMarkdown small {
+        color: #888888;
+        font-size: 0.85em;
+        margin-top: 2rem;
+        display: block; /* Make sure it takes its own line */
+        text-align: center;
+    }
+
     </style>
     """, unsafe_allow_html=True)
     # --- END CUSTOM CSS ---
+
     
-    # Header with logout
+   # Header with logout
     col1, col2 = st.columns([4, 1])
     with col1:
         st.title(f"🧠 DilBot - Welcome back, {username}!")
-        st.markdown("Your personal emotional AI companion")
+        st.markdown("<p style='font-size: 1.1em; color: #666666;'>Your personal emotional AI companion</p>", unsafe_allow_html=True) # Styled tagline
     with col2:
         if st.button("Logout", key="logout_btn"):
             st.session_state.authenticated = False
             st.session_state.username = None
             st.rerun()
-    
+
     # Quote categories
     quote_categories = {
         "Grief": ["Grief is the price we pay for love.", "Tears are the silent language of grief.", "What we have once enjoyed we can never lose; all that we love deeply becomes a part of us."],
@@ -698,15 +940,28 @@ def show_main_app():
         "Healing": ["Every wound has its own time to heal.", "It's okay to take your time to feel better.", "Healing is not linear, and that's perfectly okay."],
         "Relationships": ["The best relationships are built on trust.", "Love is not about possession but appreciation.", "Healthy relationships require both people to show up authentically."]
     }
-    
+
     # UI for quote selection and file upload
-    col1, col2 = st.columns(2)
-    with col1:
-        selected_category = st.selectbox("🎯 Choose a quote theme:", list(quote_categories.keys()))
-    with col2:
-        uploaded_quotes = st.file_uploader("📁 Upload your own quotes (.txt)", type=["txt"])
-    
-    uploaded_audio = st.file_uploader("🎤 Upload a voice message (.wav)", type=["wav"])
+    # Use st.container for better visual grouping
+    st.markdown("### 📝 Input Your Thoughts") # New subheader for input section
+    with st.container(border=True): # New feature in Streamlit for container with border
+        col1, col2 = st.columns(2)
+        with col1:
+            selected_category = st.selectbox("🎯 Choose a quote theme:", list(quote_categories.keys()))
+        with col2:
+            st.markdown("##### 📁 Custom Quotes & Voice Input") # Smaller header
+            uploaded_quotes = st.file_uploader("Upload your own quotes (.txt)", type=["txt"], key="quote_uploader")
+            uploaded_audio = st.file_uploader("Upload a voice message (.wav)", type=["wav"], key="audio_uploader")
+
+            # Voice transcription button moved for better flow
+            if uploaded_audio and st.button("🎙️ Transcribe Voice Message", key="transcribe_btn"): # Updated button text
+                with st.spinner("Transcribing your voice..."):
+                    transcribed = transcribe_audio_file(uploaded_audio)
+                    if transcribed.startswith("Error:"):
+                        st.error(transcribed)
+                    else:
+                        st.session_state.transcribed_text = transcribed
+                        st.success("✅ Voice transcribed successfully!")
     
     # Handle vectorstore
     current_quotes = []
@@ -736,17 +991,18 @@ def show_main_app():
                 st.success("✅ Voice transcribed successfully!")
     
     # Input area
+    st.markdown("##### 💬 What's on your mind?")
     user_input = st.text_area(
-        "💬 What's on your mind?",
+        "Share your thoughts, feelings, or experiences...", # Removed redundant label
         value=st.session_state.transcribed_text,
-        height=100,
-        placeholder="Share your thoughts, feelings, or experiences..."
+        height=150, # Slightly increased height
+        placeholder="Type here or use your transcribed voice message..."
     )
-    
+
     final_input = user_input.strip() or st.session_state.transcribed_text.strip()
     
     # Main interaction button
-    if st.button("🧠 Talk to DilBot", type="primary"):
+    if st.button("🧠 Talk to DilBot", type="primary", use_container_width=True):
         if not final_input:
             st.warning("⚠️ Please enter something to share or upload a voice message.")
         else:
@@ -779,32 +1035,31 @@ Respond as DilBot with warmth, empathy, and understanding. Keep it conversationa
                 save_user_journal(username, final_input, emotion, score, response)
                 
                 # Display results
-                col1, col2 = st.columns([2, 1])
-                with col1:
+                st.markdown("### 🤖 DilBot's Conversation:") # New title for conversation output
+                with st.container(border=True): # Container for the conversation output
+                    # User's input presented in a div
+                    st.markdown(f"<div class='user-message'>**You:** {final_input}</div>", unsafe_allow_html=True)
                     st.success(f"**Emotion Detected:** {emotion.capitalize()} ({round(score*100)}% confidence)")
-                with col2:
+
                     if is_crisis(final_input):
-                        st.error("🚨 Crisis detected! Please reach out to a mental health professional immediately.")
-                
-                # Show relevant quote
-                if current_quotes:
-                    model = SentenceTransformer("all-MiniLM-L6-v2")
-                    quote_embeddings = model.encode(current_quotes, convert_to_tensor=True)
-                    user_embedding = model.encode(final_input, convert_to_tensor=True)
-                    sims = util.pytorch_cos_sim(user_embedding, quote_embeddings)[0]
-                    best_match = sims.argmax().item()
-                    selected_quote = current_quotes[best_match]
-                    st.info(f"💭 **Quote for you:** *{selected_quote}*")
-                
-                # Show response
-                st.markdown("### 🤖 DilBot's Response:")
-                st.markdown(f"> {response}")
-                
-                # Audio response
-                speak(response, username)
-                
-                # Clear transcribed text after successful interaction
-                st.session_state.transcribed_text = ""
+                        st.error("🚨 Crisis detected! Please reach out to a mental health professional immediately. "
+                                 "You are not alone. Consider contacting a helpline like the National Suicide Prevention Lifeline (988 in the US) or a local emergency service.") # Enhanced crisis message
+
+                    if current_quotes:
+                        model = SentenceTransformer("all-MiniLM-L6-v2")
+                        quote_embeddings = model.encode(current_quotes, convert_to_tensor=True)
+                        user_embedding = model.encode(final_input, convert_to_tensor=True)
+                        sims = util.pytorch_cos_sim(user_embedding, quote_embeddings)[0]
+                        best_match = sims.argmax().item()
+                        selected_quote = current_quotes[best_match]
+                        st.info(f"💭 **Quote for you:** *{selected_quote}*")
+
+                    # DilBot's response presented in a blockquote with custom styling
+                    st.markdown("### 🤖 DilBot's Response:")
+                    st.markdown(f"> {response}") # Using your existing markdown blockquote
+
+                    speak(response, username)
+                    st.session_state.transcribed_text = ""
     
     # User's personal dashboard
     st.markdown("---")
@@ -816,6 +1071,7 @@ Respond as DilBot with warmth, empathy, and understanding. Keep it conversationa
     if journal_data:
         # Mood tracker
         st.subheader("📈 Your Daily Mood Tracker")
+        with st.container(border=True):
         
         # Prepare data for chart
         df_data = []
@@ -827,47 +1083,48 @@ Respond as DilBot with warmth, empathy, and understanding. Keep it conversationa
             })
         
         if df_data:
-            chart = alt.Chart(alt.Data(values=df_data)).mark_bar().encode(
-                x=alt.X('date:N', title='Date'),
-                y=alt.Y('count():Q', title='Frequency'),
-                color=alt.Color('emotion:N', title='Emotion'),
-                tooltip=['date:N', 'emotion:N', 'count():Q']
-            ).properties(
-                width=600,
-                height=300,
-                title="Your Emotional Journey Over Time"
-            )
-            st.altair_chart(chart, use_container_width=True)
+                chart = alt.Chart(alt.Data(values=df_data)).mark_bar().encode(
+                    x=alt.X('date:N', title='Date'),
+                    y=alt.Y('count():Q', title='Frequency'),
+                    color=alt.Color('emotion:N', title='Emotion'),
+                    tooltip=['date:N', 'emotion:N', 'count():Q']
+                ).properties(
+                    width=600,
+                    height=300,
+                    title="Your Emotional Journey Over Time"
+                ).interactive() # Make chart interactive for zoom/pan
+                st.altair_chart(chart, use_container_width=True)
         
         # Recent conversations
         st.subheader("💬 Recent Conversations")
         recent_entries = journal_data[-5:] if len(journal_data) >= 5 else journal_data
-        
-        for i, entry in enumerate(reversed(recent_entries)):
-            with st.expander(f"📅 {entry['date']} - {entry['emotion'].capitalize()} ({entry['confidence']}%)"):
-                st.markdown(f"**You said:** {entry['user_input']}")
-                st.markdown(f"**DilBot replied:** {entry['response']}")
+
+        with st.container(border=True): # Wrap recent conversations in a container
+            if recent_entries:
+                for i, entry in enumerate(reversed(recent_entries)):
+                    with st.expander(f"📅 {entry['date']} - {entry['emotion'].capitalize()} ({entry['confidence']}%)"):
+                        st.markdown(f"**You said:** {entry['user_input']}")
+                        st.markdown(f"**DilBot replied:** {entry['response']}")
+            else:
+                st.info("No recent conversations yet. Start talking to DilBot!")
         
         # Statistics
         st.subheader("📊 Your Emotional Statistics")
         col1, col2, col3 = st.columns(3)
-        
+
         with col1:
             st.metric("Total Conversations", len(journal_data))
-        
         with col2:
             emotions = [entry['emotion'] for entry in journal_data]
             most_common = max(set(emotions), key=emotions.count) if emotions else "None"
             st.metric("Most Common Emotion", most_common.capitalize())
-        
         with col3:
             if journal_data:
                 avg_confidence = sum(entry['confidence'] for entry in journal_data) / len(journal_data)
                 st.metric("Avg. Confidence", f"{avg_confidence:.1f}%")
-    
     else:
         st.info("🌟 Start your first conversation with DilBot to see your personal dashboard!")
-    
+
     st.markdown("---")
     st.caption("Built by Members of CSG Hackathon Team | Your data is stored privately and securely")