Upload app.py

app.py

@@ -36,7 +36,7 @@ st.set_page_config(
 # ── CSS — ChatGPT-style, compact font, clean dark theme ─────────────
 st.markdown("""
 <style>
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
 
 /* ── Base ── */
 html, body, [class*="css"] {
@@ -54,36 +54,69 @@ html, body, [class*="css"] {
 /* ── Header ── */
 .saad-header {
     text-align: center;
-    padding: 1.2rem 0 0.5rem 0;
+    padding: 1.4rem 0 0.6rem 0;
     margin-bottom: 0.5rem;
 }
 .saad-header h1 {
-    font-size: 1.5rem !important;
-    font-weight: 600;
-    color: #ffffff;
+    font-size: 2rem !important;
+    font-weight: 700;
+    background: linear-gradient(135deg, #3b82f6 0%, #a78bfa 50%, #60a5fa 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
     margin: 0;
-    letter-spacing: 0.5px;
+    letter-spacing: 1px;
 }
 .saad-header p {
-    font-size: 0.78rem;
-    color: #666;
-    margin: 0.2rem 0 0 0;
+    font-size: 0.82rem;
+    color: #555;
+    margin: 0.3rem 0 0 0;
+    letter-spacing: 0.3px;
 }
 .badge-row {
     display: flex;
     gap: 0.4rem;
     justify-content: center;
     flex-wrap: wrap;
-    margin-top: 0.6rem;
+    margin-top: 0.7rem;
 }
 .badge {
-    background: #1a1a1a;
-    border: 1px solid #2a2a2a;
-    color: #888;
-    padding: 2px 8px;
+    background: linear-gradient(135deg, #1a1a2e, #16213e);
+    border: 1px solid #2a3a5e;
+    color: #60a5fa;
+    padding: 3px 10px;
     border-radius: 20px;
     font-size: 0.68rem;
     font-family: 'JetBrains Mono', monospace;
+    letter-spacing: 0.3px;
+}
+
+/* ── Welcome screen cards ── */
+.subject-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.5rem;
+    margin: 1rem 0;
+}
+.subject-card {
+    background: #111827;
+    border: 1px solid #1f2937;
+    border-radius: 10px;
+    padding: 0.6rem 0.5rem;
+    text-align: center;
+    font-size: 0.75rem;
+    color: #9ca3af;
+    transition: all 0.2s;
+}
+.subject-card:hover {
+    border-color: #3b82f6;
+    color: #60a5fa;
+    background: #0f172a;
+}
+.subject-card .icon {
+    font-size: 1.3rem;
+    display: block;
+    margin-bottom: 0.2rem;
 }
 
 /* ── Chat messages — override Streamlit defaults ── */
@@ -101,7 +134,7 @@ html, body, [class*="css"] {
 }
 [data-testid="stChatMessage"]:has([data-testid="chatAvatarIcon-user"])
     [data-testid="stChatMessageContent"] {
-    background: #1e3a5f !important;
+    background: linear-gradient(135deg, #1e3a5f, #1a2f4a) !important;
     border: 1px solid #2a4a7f !important;
     border-radius: 18px 4px 18px 18px !important;
     padding: 0.6rem 0.9rem !important;
@@ -113,8 +146,8 @@ html, body, [class*="css"] {
 /* Assistant message */
 [data-testid="stChatMessage"]:has([data-testid="chatAvatarIcon-assistant"])
     [data-testid="stChatMessageContent"] {
-    background: #1a1a1a !important;
-    border: 1px solid #2a2a2a !important;
+    background: #111827 !important;
+    border: 1px solid #1f2937 !important;
     border-radius: 4px 18px 18px 18px !important;
     padding: 0.7rem 1rem !important;
     font-size: 0.88rem !important;
@@ -124,11 +157,11 @@ html, body, [class*="css"] {
 
 /* Math display blocks */
 .katex-display {
-    background: #161616 !important;
+    background: #0f172a !important;
     border-left: 3px solid #3b82f6 !important;
-    border-radius: 0 6px 6px 0 !important;
-    padding: 0.5rem 1rem !important;
-    margin: 0.4rem 0 !important;
+    border-radius: 0 8px 8px 0 !important;
+    padding: 0.6rem 1rem !important;
+    margin: 0.5rem 0 !important;
     overflow-x: auto !important;
 }
 .katex { font-size: 1em !important; }
@@ -142,9 +175,9 @@ html, body, [class*="css"] {
 
 /* ── Input box ── */
 [data-testid="stChatInput"] {
-    background: #1a1a1a !important;
-    border: 1px solid #2a2a2a !important;
-    border-radius: 12px !important;
+    background: #111827 !important;
+    border: 1px solid #1f2937 !important;
+    border-radius: 14px !important;
 }
 [data-testid="stChatInput"] textarea {
     font-size: 0.88rem !important;
@@ -154,18 +187,53 @@ html, body, [class*="css"] {
 
 /* ── Sidebar ── */
 [data-testid="stSidebar"] {
-    background: #0a0a0a !important;
-    border-right: 1px solid #1a1a1a !important;
+    background: linear-gradient(180deg, #080810 0%, #0a0a14 100%) !important;
+    border-right: 1px solid #1a1a2e !important;
 }
 [data-testid="stSidebar"] * {
     font-size: 0.82rem !important;
 }
 
+/* Sidebar topic chips */
+.topic-chip {
+    display: inline-block;
+    background: #111827;
+    border: 1px solid #1f2937;
+    color: #6b7280;
+    padding: 3px 10px;
+    border-radius: 20px;
+    font-size: 0.72rem;
+    margin: 2px 2px;
+    transition: all 0.15s;
+}
+.topic-chip:hover {
+    border-color: #3b82f6;
+    color: #60a5fa;
+}
+
+/* Sidebar engine info */
+.engine-row {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.25rem 0;
+    color: #4b5563;
+    font-size: 0.75rem;
+}
+.engine-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #22c55e;
+    flex-shrink: 0;
+    box-shadow: 0 0 4px #22c55e;
+}
+
 /* ── Buttons ── */
 .stButton > button {
-    background: #1a1a1a !important;
-    border: 1px solid #2a2a2a !important;
-    color: #888 !important;
+    background: #111827 !important;
+    border: 1px solid #1f2937 !important;
+    color: #6b7280 !important;
     border-radius: 8px !important;
     font-size: 0.78rem !important;
     padding: 0.3rem 0.8rem !important;
@@ -176,14 +244,14 @@ html, body, [class*="css"] {
 .stButton > button:hover {
     border-color: #3b82f6 !important;
     color: #ececec !important;
-    background: #161b2e !important;
+    background: #0f172a !important;
 }
 
-/* ── Copy button — Claude style ── */
+/* ── Copy button ── */
 [data-testid="stChatMessage"] .stButton > button {
     background: transparent !important;
-    border: 1px solid #2a2a2a !important;
-    color: #555 !important;
+    border: 1px solid #1f2937 !important;
+    color: #4b5563 !important;
     border-radius: 6px !important;
     font-size: 0.75rem !important;
     padding: 2px 6px !important;
@@ -195,23 +263,34 @@ html, body, [class*="css"] {
 [data-testid="stChatMessage"] .stButton > button:hover {
     border-color: #3b82f6 !important;
     color: #ececec !important;
-    background: #1a1f2e !important;
+    background: #0f172a !important;
 }
 
-/* ── Spinner ── */
+/* ── Spinner — custom math themed ── */
 .stSpinner > div { border-top-color: #3b82f6 !important; }
+.stSpinner p {
+    color: #3b82f6 !important;
+    font-size: 0.82rem !important;
+    font-family: 'JetBrains Mono', monospace !important;
+}
 
 /* ── Divider ── */
-hr { border-color: #1a1a1a !important; }
+hr { border-color: #1a1a2e !important; }
 
 /* ── Selectbox ── */
 .stSelectbox > div > div {
-    background: #1a1a1a !important;
-    border-color: #2a2a2a !important;
+    background: #111827 !important;
+    border-color: #1f2937 !important;
     color: #ececec !important;
     border-radius: 8px !important;
     font-size: 0.82rem !important;
 }
+
+/* ── Scrollbar ── */
+::-webkit-scrollbar { width: 4px; height: 4px; }
+::-webkit-scrollbar-track { background: #0f0f0f; }
+::-webkit-scrollbar-thumb { background: #1f2937; border-radius: 2px; }
+::-webkit-scrollbar-thumb:hover { background: #3b82f6; }
 </style>
 """, unsafe_allow_html=True)
 
@@ -1747,23 +1826,17 @@ def ask_ai(problem: str, sympy_info: dict, history: list) -> str:
         "  → Never skip this structure. Never merge steps. Never jump to answer without showing work.\n"
         "  → If user says plot/draw/graph/sketch/visualize: a real graph renders automatically.\n"
         "     Do NOT draw ASCII art. Do NOT say you cannot draw.\n"
-        "     Give this response — then graph renders below automatically:\n"
+        "     Give this SHORT response only — then graph renders below automatically:\n"
         "       📌 **Function:** state f(x) clearly in LaTeX\n"
         "       🔍 **Key Features:**\n"
         "         - Domain and range\n"
-        "         - x-intercepts: solve f(x)=0 and state exact values\n"
+        "         - x-intercepts: solve f(x)=0\n"
         "         - y-intercept: f(0)\n"
         "         - Turning points / vertex if any\n"
         "         - Behavior as $x \\to \\pm\\infty$\n"
-        "       ✏️ **How to Draw (step by step):**\n"
-        "         - Step 1: Mark the vertex or starting point on paper\n"
-        "         - Step 2: Mark all x-intercepts on x-axis\n"
-        "         - Step 3: Mark y-intercept on y-axis\n"
-        "         - Step 4: Calculate and plot 3-4 extra points showing the shape\n"
-        "         - Step 5: Connect all points smoothly with the correct curve shape\n"
-        "         - Step 6: Add arrows at ends if function extends to infinity\n"
-        "         → Give EXACT coordinates for every point. Student must be able to draw without a calculator.\n"
-        "       📊 **Graph** is shown below for verification.\n\n"
+        "       📊 **Graph** is shown below.\n"
+        "     Keep it SHORT — max 8 lines. No long paragraphs. No step-by-step for graph requests.\n\n"
+
         "RULE 2 — LATEX (zero exceptions):\n"
         "  - Inline math (inside a sentence): $expression$\n"
         "  - Display math (standalone line, centered): $$expression$$\n"
@@ -2071,14 +2144,21 @@ with st.sidebar:
         st.divider()
 
     st.markdown("**🎯 Topics**")
-    topics = [
-        "📈 Calculus", "🔢 Linear Algebra", "🔁 Number Theory",
-        "📉 Differential Equations", "🧮 Numerical Methods",
-        "📐 Differential Geometry", "🌊 Hydro Mechanics",
-        "🔍 Theory of Numbers", "📊 Real Analysis II", "➕ General Math"
-    ]
-    for t in topics:
-        st.caption(t)
+    st.markdown("""
+    <div style="padding:0.2rem 0 0.4rem 0; line-height:2;">
+        <span class="topic-chip">📈 Calculus</span>
+        <span class="topic-chip">🔢 Linear Algebra</span>
+        <span class="topic-chip">🔁 Number Theory</span>
+        <span class="topic-chip">📉 ODEs</span>
+        <span class="topic-chip">🧮 Numerical</span>
+        <span class="topic-chip">📐 Diff. Geometry</span>
+        <span class="topic-chip">🌊 Hydro Mechanics</span>
+        <span class="topic-chip">🔍 Theory of Numbers</span>
+        <span class="topic-chip">📊 Real Analysis II</span>
+        <span class="topic-chip">📈 Graph Plotting</span>
+        <span class="topic-chip">➕ General Math</span>
+    </div>
+    """, unsafe_allow_html=True)
 
     st.divider()
     st.markdown("**⚡ Example Problems**")
@@ -2106,9 +2186,14 @@ with st.sidebar:
 
     st.divider()
     st.markdown("**🔧 Engine**")
-    st.caption("🤖 Groq Llama 3.3 70B — reasoning")
-    st.caption("🧮 SymPy — verified computation")
-    st.caption("✅ Zero arithmetic errors")
+    st.markdown("""
+    <div style="padding:0.2rem 0;">
+        <div class="engine-row"><div class="engine-dot"></div>Groq Llama 3.3 70B — reasoning</div>
+        <div class="engine-row"><div class="engine-dot"></div>SymPy — verified computation</div>
+        <div class="engine-row"><div class="engine-dot"></div>6 providers — 46,400 req/day</div>
+        <div class="engine-row"><div class="engine-dot"></div>Zero arithmetic errors</div>
+    </div>
+    """, unsafe_allow_html=True)
 
     st.divider()
     if st.button("🗑️ Clear Chat", use_container_width=True):
@@ -2125,12 +2210,13 @@ with st.sidebar:
 st.markdown("""
 <div class="saad-header">
     <h1>📐 Saad.AI</h1>
-    <p>BSc Mathematics · Step-by-Step Solver</p>
+    <p>BSc Mathematics · Step-by-Step Solver · SymPy Verified</p>
     <div class="badge-row">
-        <span class="badge">Groq Free</span>
-        <span class="badge">SymPy Verified</span>
-        <span class="badge">Step-by-Step</span>
-        <span class="badge">LaTeX Rendered</span>
+        <span class="badge">⚡ Groq Free</span>
+        <span class="badge">🧮 SymPy Verified</span>
+        <span class="badge">📊 Step-by-Step</span>
+        <span class="badge">∑ LaTeX Rendered</span>
+        <span class="badge">📈 Graph Plotting</span>
     </div>
 </div>
 """, unsafe_allow_html=True)
@@ -2138,13 +2224,41 @@ st.markdown("""
 # Welcome message if no chat
 if not st.session_state.messages:
     st.markdown("""
-    <div style="text-align:center; padding:2rem 1rem; color:#444;">
-        <div style="font-size:2.5rem; margin-bottom:0.5rem;">🧮</div>
-        <div style="font-size:0.9rem; color:#555;">
-            Ask any BSc Mathematics problem below<br>
-            <span style="font-size:0.78rem; color:#333;">
-            Calculus · Linear Algebra · Number Theory · ODEs · Real Analysis · and more
-            </span>
+    <div style="text-align:center; padding:1.5rem 0 0.5rem 0;">
+        <div style="font-size:0.85rem; color:#4b5563; margin-bottom:1.2rem;">
+            Ask any BSc Mathematics problem — I'll solve it step by step
+        </div>
+        <div class="subject-grid">
+            <div class="subject-card">
+                <span class="icon">📈</span>Calculus
+            </div>
+            <div class="subject-card">
+                <span class="icon">🔢</span>Linear Algebra
+            </div>
+            <div class="subject-card">
+                <span class="icon">📉</span>ODEs
+            </div>
+            <div class="subject-card">
+                <span class="icon">🧮</span>Numerical Methods
+            </div>
+            <div class="subject-card">
+                <span class="icon">🔍</span>Number Theory
+            </div>
+            <div class="subject-card">
+                <span class="icon">📐</span>Diff. Geometry
+            </div>
+            <div class="subject-card">
+                <span class="icon">🌊</span>Hydro Mechanics
+            </div>
+            <div class="subject-card">
+                <span class="icon">📊</span>Real Analysis II
+            </div>
+            <div class="subject-card">
+                <span class="icon">📈</span>Graph Plotting
+            </div>
+        </div>
+        <div style="font-size:0.72rem; color:#374151; margin-top:1rem;">
+            💡 Tip: Select an example from the sidebar or type your problem below
         </div>
     </div>
     """, unsafe_allow_html=True)
@@ -2194,7 +2308,16 @@ if problem and problem != st.session_state.last_submitted:
     # Show AI response with streaming
     with st.chat_message("assistant", avatar="📐"):
         # Step 1: SymPy computation (instant)
-        with st.spinner("🧮 Computing..."):
+        import random
+        spinner_msgs = [
+            "🧮 Computing with SymPy...",
+            "∫ Integrating the solution...",
+            "∑ Summing it all up...",
+            "📐 Applying the formula...",
+            "🔢 Crunching the numbers...",
+            "📊 Verifying the answer...",
+        ]
+        with st.spinner(random.choice(spinner_msgs)):
             sympy_result = run_sympy(problem)
 
         # Step 2: Stream AI response word by word