Update src/streamlit_app.py

src/streamlit_app.py

@@ -21,197 +21,57 @@ st.set_page_config(
     initial_sidebar_state="expanded"
 )
 
-# Custom CSS for beautiful black and white UI
+# Simple CSS styling
 st.markdown("""
 <style>
-    .main {
-        padding-top: 2rem;
-    }
-    
-    .stApp {
-        background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #2d2d2d 100%);
-        background-attachment: fixed;
-        color: white;
-    }
-    
-    .main .block-container {
-        background: rgba(255, 255, 255, 0.98);
-        color: #1a1a1a;
-        padding: 2rem;
-        border-radius: 20px;
-        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
-        backdrop-filter: blur(10px);
-        margin-top: 2rem;
-        border: 2px solid #e5e5e5;
-    }
-    
-    .stTabs > div > div > div > div {
-        background: linear-gradient(135deg, #f8f8f8 0%, #e8e8e8 100%);
-        border: 1px solid #d1d5db;
-        border-radius: 10px;
-        padding: 1rem;
-        margin: 0.5rem 0;
-        color: #1a1a1a;
-    }
-    
     .metric-card {
-        background: linear-gradient(135deg, #f9f9f9 0%, #eeeeee 100%);
-        border: 2px solid #d1d5db;
-        border-radius: 12px;
+        background: #f8f9fa;
+        border: 1px solid #dee2e6;
+        border-radius: 5px;
         padding: 1rem;
         margin: 0.5rem 0;
-        color: #1a1a1a;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }
     
     .success-card {
-        background: linear-gradient(135deg, #f8f8f8 0%, #e8e8e8 100%);
-        border: 2px solid #6b7280;
-        border-radius: 12px;
-        padding: 1rem;
-        margin: 0.5rem 0;
-        color: #1a1a1a;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    }
-    
-    .warning-card {
-        background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
-        border: 2px solid #9ca3af;
-        border-radius: 12px;
-        padding: 1rem;
-        margin: 0.5rem 0;
-        color: #1a1a1a;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    }
-    
-    .error-card {
-        background: linear-gradient(135deg, #f1f1f1 0%, #dddddd 100%);
-        border: 2px solid #6b7280;
-        border-radius: 12px;
+        background: #f8f9fa;
+        border: 1px solid #28a745;
+        border-radius: 5px;
         padding: 1rem;
         margin: 0.5rem 0;
-        color: #1a1a1a;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    }
-    
-    .stButton > button {
-        background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
-        color: white;
-        border-radius: 25px;
-        border: 2px solid #4a4a4a;
-        padding: 0.5rem 2rem;
-        font-weight: 600;
-        transition: all 0.3s ease;
-    }
-    
-    .stButton > button:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
-        background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
-        border-color: #6b7280;
-    }
-    
-    .sidebar .stSelectbox > div > div {
-        background: white;
-        color: #1a1a1a;
-        border: 1px solid #d1d5db;
-        border-radius: 10px;
-    }
-    
-    h1 {
-        background: linear-gradient(135deg, #000000 0%, #4a4a4a 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        text-align: center;
-        font-size: 3rem !important;
-        margin-bottom: 2rem !important;
-        font-weight: 800;
-    }
-    
-    .stProgress > div > div > div > div {
-        background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
     }
     
     .keyword-chip {
-        background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
+        background: #333;
         color: white;
-        padding: 0.3rem 0.8rem;
-        border-radius: 20px;
-        font-size: 0.8rem;
-        font-weight: 500;
-        margin: 0.2rem;
+        padding: 0.25rem 0.5rem;
+        border-radius: 15px;
+        font-size: 0.875rem;
         display: inline-block;
-        border: 1px solid #4a4a4a;
+        margin: 0.25rem;
     }
     
     .seo-score-excellent {
-        background: linear-gradient(135deg, #2d2d2d 0%, #000000 100%);
+        background: #333;
         color: white;
-        padding: 0.5rem 1rem;
-        border-radius: 10px;
-        font-weight: 600;
+        padding: 0.5rem;
+        border-radius: 5px;
         text-align: center;
-        border: 2px solid #4a4a4a;
     }
     
     .seo-score-good {
-        background: linear-gradient(135deg, #4a4a4a 0%, #2d2d2d 100%);
+        background: #666;
         color: white;
-        padding: 0.5rem 1rem;
-        border-radius: 10px;
-        font-weight: 600;
+        padding: 0.5rem;
+        border-radius: 5px;
         text-align: center;
-        border: 2px solid #6b7280;
     }
     
     .seo-score-poor {
-        background: linear-gradient(135deg, #6b7280 0%, #4a4a4a 100%);
+        background: #999;
         color: white;
-        padding: 0.5rem 1rem;
-        border-radius: 10px;
-        font-weight: 600;
+        padding: 0.5rem;
+        border-radius: 5px;
         text-align: center;
-        border: 2px solid #9ca3af;
-    }
-    
-    /* Sidebar styling */
-    .css-1d391kg {
-        background: linear-gradient(135deg, #f8f8f8 0%, #e8e8e8 100%);
-        color: #1a1a1a;
-    }
-    
-    /* Text inputs and textareas */
-    .stTextInput > div > div > input {
-        background: white;
-        color: #1a1a1a;
-        border: 2px solid #d1d5db;
-        border-radius: 8px;
-    }
-    
-    .stTextArea > div > div > textarea {
-        background: white;
-        color: #1a1a1a;
-        border: 2px solid #d1d5db;
-        border-radius: 8px;
-    }
-    
-    /* Select boxes */
-    .stSelectbox > div > div > select {
-        background: white;
-        color: #1a1a1a;
-        border: 2px solid #d1d5db;
-    }
-    
-    /* Markdown text in containers */
-    .stMarkdown p {
-        color: #1a1a1a;
-    }
-    
-    /* Code blocks */
-    .stCode {
-        background: #f8f8f8;
-        border: 1px solid #d1d5db;
-        color: #1a1a1a;
     }
 </style>
 """, unsafe_allow_html=True)
@@ -427,35 +287,33 @@ def main():
         st.session_state.generated_content = ""
     if 'seo_analysis' not in st.session_state:
         st.session_state.seo_analysis = {}
-    
-    # Header
-    st.markdown("# ✨ SEO Content Writer")
-    st.markdown("### AI-powered content creation with real-time SEO optimization")
-    
-    # Sidebar with workflow progress
+      # Header
+    st.title("SEO Content Writer")
+    st.write("AI-powered content creation with real-time SEO optimization")
+      # Sidebar with workflow progress
     with st.sidebar:
-        st.markdown("## 🚀 Workflow Progress")
+        st.subheader("Workflow Progress")
         
         steps = [
-            "🔍 Keyword Research",
-            "📝 Title Generation", 
-            "📋 Topic Selection",
-            "✍️ Content Creation"
+            "Keyword Research",
+            "Title Generation", 
+            "Topic Selection",
+            "Content Creation"
         ]
         
         for i, step in enumerate(steps):
             if i < st.session_state.current_step:
-                st.markdown(f"✅ {step}")
+                st.write(f"✓ {step}")
             elif i == st.session_state.current_step:
-                st.markdown(f"➡️ **{step}**")
+                st.write(f"→ **{step}**")
             else:
-                st.markdown(f"⏳ {step}")
-        
-        progress = (st.session_state.current_step + 1) / len(steps)
+                st.write(f"○ {step}")
+          progress = (st.session_state.current_step + 1) / len(steps)
         st.progress(progress)
-        st.markdown(f"**{int(progress * 100)}% Complete**")
-          # Reset workflow button
-        if st.button("🔄 Start New Project", help="Reset the entire workflow"):
+        st.write(f"**{int(progress * 100)}% Complete**")
+        
+        # Reset workflow button
+        if st.button("Start New Project"):
             for key in ['current_step', 'seed_keyword', 'keywords', 'selected_keyword', 
                        'titles', 'selected_title', 'topics', 'selected_topic', 
                        'generated_content', 'seo_analysis']:
@@ -472,20 +330,20 @@ def main():
                         st.session_state[key] = ""
             st.rerun()
         
-        # GitHub repository link
+        # Project info
         st.markdown("---")
-        st.markdown("### 📁 Project Info")
-        st.markdown("[🔗 Full Project Repository](https://github.com/akshayram1/AI_Content_Writer_Prototype)")
-        st.markdown("**Note:** Originally attempted deployment on Vercel and Railway, but free tier limitations prevented deploying the full LLM service stack. This Streamlit version provides a simpler, self-contained alternative.")
-        st.markdown("*Built with ❤️ using Streamlit and OpenAI*")
+        st.write("**Project Info**")
+        st.write("[Full Project Repository](https://github.com/akshayram1/AI_Content_Writer_Prototype)")
+        st.caption("Originally attempted deployment on Vercel and Railway, but free tier limitations prevented deploying the full LLM service stack.")
+        st.caption("Built with Streamlit and OpenAI")
     
     # Main content area with tabs
-    tab1, tab2, tab3, tab4, tab5 = st.tabs(["🔍 Keywords", "📝 Titles", "📋 Topics", "✍️ Content", "📊 SEO Test"])
+    tab1, tab2, tab3, tab4, tab5 = st.tabs(["Keywords", "Titles", "Topics", "Content", "SEO Test"])
     
     # Tab 1: Keyword Research
     with tab1:
-        st.markdown("## 🔍 Keyword Research")
-        st.markdown("Discover high-impact keywords to boost your content's SEO potential")
+        st.subheader("Keyword Research")
+        st.write("Discover high-impact keywords to boost your content's SEO potential")
         
         col1, col2 = st.columns([2, 1])
         
@@ -497,7 +355,7 @@ def main():
             )
             
         with col2:
-            research_button = st.button("🔍 Research Keywords", type="primary")
+            research_button = st.button("Research Keywords", type="primary")
         
         if research_button and seed_keyword:
             with st.spinner("Analyzing your keyword and finding related suggestions..."):
@@ -508,23 +366,23 @@ def main():
                     st.session_state.current_step = max(st.session_state.current_step, 1)
         
         if st.session_state.keywords:
-            st.markdown("### ✨ Suggested Keywords")
+            st.write("**Suggested Keywords**")
             st.markdown(f'<div class="keyword-chip">Based on: "{st.session_state.seed_keyword}"</div>', unsafe_allow_html=True)
             
             cols = st.columns(2)
             for i, keyword in enumerate(st.session_state.keywords):
                 with cols[i % 2]:
-                    if st.button(f"📌 {keyword}", key=f"keyword_{i}", use_container_width=True):
+                    if st.button(f"{keyword}", key=f"keyword_{i}", use_container_width=True):
                         st.session_state.selected_keyword = keyword
                         st.session_state.current_step = max(st.session_state.current_step, 1)
-                        st.success(f"✅ Selected keyword: **{keyword}**")
+                        st.success(f"Selected keyword: **{keyword}**")
                         time.sleep(1)
                         st.rerun()
             
             if st.session_state.selected_keyword:
                 st.markdown('<div class="success-card">', unsafe_allow_html=True)
-                st.markdown(f"🎉 **Great choice!** Keyword selected: **{st.session_state.selected_keyword}**")
-                st.markdown("Ready to generate titles! The workflow will continue automatically.")
+                st.write(f"**Great choice!** Keyword selected: **{st.session_state.selected_keyword}**")
+                st.write("Ready to generate titles! The workflow will continue automatically.")
                 st.markdown('</div>', unsafe_allow_html=True)
     
     # Tab 2: Title Generation