Update pages/Overview.py

pages/Overview.py

@@ -1,95 +1,116 @@
 import streamlit as st
-import streamlit as st
 from streamlit_lottie import st_lottie
 import requests
 
+# --- CUSTOM CSS FOR STYLING ---
 st.markdown("""
     <style>
     .stApp {
-        background-image: linear-gradient(to right, #ece9e6, #ffffff);
-        background-size: cover;
+        background-image: linear-gradient(to right, #f4f4f4, #ffffff);
         color: #333333;
         font-family: 'Segoe UI', sans-serif;
     }
-    h1 {
+    h1, h2, h3 {
         text-align: center;
         color: #1a1a1a;
     }
-    .stCheckbox > div {
-        padding: 5px;
+    .highlight {
+        background-color: #f0f8ff;
+        border-left: 6px solid #1890ff;
+        padding: 10px 15px;
+        margin: 15px 0;
+        border-radius: 5px;
+    }
+    .section-title {
+        font-size: 20px;
+        font-weight: bold;
+        color: #005691;
+        margin-top: 30px;
     }
-    .css-1cpxqw2 {
-        background-color: transparent !important;
+    .info-box {
+        background-color: #fffbe6;
+        border-left: 6px solid #faad14;
+        padding: 12px;
+        border-radius: 6px;
+        margin-bottom: 15px;
     }
     </style>
 """, unsafe_allow_html=True)
 
-
-st.markdown("<h1 style='text-align: center;'>📝 Text Summarization App</h1>", unsafe_allow_html=True)
-
+# --- HEADER TITLE ---
+st.markdown("<h1>📝 Text Summarization App</h1>", unsafe_allow_html=True)
 st.markdown("---")
 
-st.subheader("🔍 About the App")
-st.write("""
-This is a powerful, interactive **Text Summarization App** that lets you convert **long-form content into concise summaries** in just one click — using state-of-the-art **Transformer models** from Hugging Face 🤖.
+# --- ABOUT APP ---
+st.markdown("<div class='section-title'>🔍 About the App</div>", unsafe_allow_html=True)
+st.markdown("""
+<div class='highlight'>
+This is a powerful, interactive <b>Text Summarization App</b> that lets you convert <b>long-form content into concise summaries</b> with just one click — powered by state-of-the-art <b>Transformer models</b> from Hugging Face 🤖.
+</div>
 Built using:
-- 🧠 `transformers` library from Hugging Face for NLP
-- 🧰 Streamlit for a fast, intuitive web interface
-- 💫 Lottie animations for smooth experience
-""")
+- 🧠 <code>transformers</code> (Hugging Face)
+- 🧰 Streamlit for the web interface
+- 💫 Lottie animations for smoother experience
+""", unsafe_allow_html=True)
 
-st.subheader("💡 What Can You Do?")
-st.write("""
-You can:
+# --- WHAT YOU CAN DO ---
+st.markdown("<div class='section-title'>💡 What Can You Do?</div>", unsafe_allow_html=True)
+st.markdown("""
 - Paste any **long text** (job description, blog, article, etc.)
 - Choose summarization models:
-  - `facebook/bart-large-cnn` (BART)
-  - `t5-small` (T5)
-  - `google/pegasus-cnn_dailymail` (PEGASUS)
-- Select your preferred output format:
-  - 📄 Paragraph
-  - 🔹 Bullet Points
-  - 🛠️ Custom (via sliders)
-Control the **summary length** with:
-- 📉 Short (40–150 words)
-- 📈 Medium (up to 300 words)
-- 🛠️ Custom sliders for `min` and `max`
+    - `facebook/bart-large-cnn` (BART)
+    - `t5-small` (T5)
+    - `google/pegasus-cnn_dailymail` (PEGASUS)
+- Select output format:
+    - 📄 Paragraph
+    - 🔹 Bullet Points
+    - 🛠️ Custom (via sliders)
+- Control summary length with:
+    - 📉 Short (40–150 words)
+    - 📈 Medium (up to 300 words)
+    - 🎛️ Custom sliders for min/max
 """)
 
-st.subheader("🧮 Smart Features")
-st.write("""
-- Real-time **word count display** (before & after summary)
-- 💾 Save your summaries with:
-  - Timestamp
-  - Model used
-  - Input text & output summary
-- 📚 View saved **summary history**
-- 📥 One-click download of summary as `.txt` file
-Everything runs locally — no cloud sync, no data sharing 🌐
-""")
+# --- SMART FEATURES ---
+st.markdown("<div class='section-title'>🧮 Smart Features</div>", unsafe_allow_html=True)
+st.markdown("""
+<div class='info-box'>
+✔️ Real-time <b>word count display</b> (before & after summary)  
+✔️ 💾 Save summaries with: timestamp, model used, original + summarized text  
+✔️ 📚 View saved summary history  
+✔️ 📥 One-click download of summaries as <code>.txt</code> files  
+✔️ <b>Everything runs locally</b> — no data shared 🌐
+</div>
+""", unsafe_allow_html=True)
 
-st.subheader("🎯 Why This App?")
-st.write("""
-Because no one wants to read 1000 words when 100 will do 😅
+# --- WHY THIS APP ---
+st.markdown("<div class='section-title'>🎯 Why This App?</div>", unsafe_allow_html=True)
+st.markdown("""
+Because no one wants to read 1000 words when 100 will do 😅  
 Whether you're:
 - A student summarizing notes or papers
 - A recruiter simplifying job posts
 - A writer condensing blogs
 - Or just text-fatigued
-This app is for you 💪
+
+👉 <b>This app is for you.</b> 💪
 """)
 
 st.markdown("---")
 
-# About Me
-st.subheader("🙋‍♂️ About Me")
-st.write("""
-Hey, I'm **Mula Vamshi** — a Python-powered human who builds smart, minimal apps with clean UI and real use cases.
-I work with Data Science, NLP, Automation & app development.  
-This summarizer? Just a part of what I love doing!
-**Let’s connect:**
-- 🔗 [LinkedIn](https://www.linkedin.com/in/vamshi-mula-946743321)
+# --- ABOUT ME ---
+st.markdown("<div class='section-title'>🙋‍♂️ About Me</div>", unsafe_allow_html=True)
+st.markdown("""
+Hey, I'm **Mula Vamshi** — a Python-powered human who builds smart, minimal apps with clean UI and real use cases.  
+I work with **Data Science, NLP, Automation & App Development**.
+
+This summarizer? Just one example of what I enjoy building.
+
+📬 **Let’s Connect**:  
+- 🔗 [LinkedIn](https://www.linkedin.com/in/vamshi-mula-946743321)  
 - 📧 [Email Me](mailto:[email protected])
-> 💬 “Simplicity is my power tool. Python is my wand. Streamlit is my canvas.”  
-> — MULA VAMSHI
-""")
+
+> 💬 “<i>Simplicity is my power tool. Python is my wand. Streamlit is my canvas.</i>”  
+> — <b>MULA VAMSHI</b>
+""", unsafe_allow_html=True)
+