Update app.py

app.py

@@ -1,69 +1,172 @@
-# app.py - UPDATED VERSION
+# app.py - COMPLETE WORKING VERSION
 import streamlit as st
 import os
 
-def main():
-    st.set_page_config(
-        page_title="Social Media Data Extractor",
-        page_icon="🔍",
-        layout="wide"
-    )
-    
-    # Check if user is already logged in
-    if "authenticated" in st.session_state and st.session_state.authenticated:
-        show_dashboard()
-    else:
-        show_login_page()
+# ============================================
+# COMPATIBILITY FUNCTIONS
+# ============================================
+
+def get_query_params():
+    """Get query params with backward compatibility"""
+    try:
+        # Try new method (Streamlit 1.28+)
+        return st.query_params
+    except AttributeError:
+        # Fallback to old method
+        return st.experimental_get_query_params()
+
+def clear_query_params():
+    """Clear query params with backward compatibility"""
+    try:
+        st.query_params.clear()
+    except AttributeError:
+        st.experimental_set_query_params()
+
+# ============================================
+# MAIN DASHBOARD
+# ============================================
 
 def show_dashboard():
-    """Show main dashboard after login"""
+    """Show the main dashboard after login"""
     user = st.session_state.user_info
     
-    # Welcome message
-    st.title(f"👋 Welcome, {user.get('name', 'User')}!")
-    st.write(f"Email: {user.get('email')}")
+    # Apply your original styling
+    st.markdown("""
+    <style>
+        .stApp { background-color: #0e1117; color: white; }
+        .main-header { background: linear-gradient(135deg, #1a2a6c, #b21f1f); color: white; padding: 2rem; border-radius: 10px; text-align: center; margin-bottom: 2rem; }
+        .platform-card { background-color: #262730; padding: 1.5rem; border-radius: 10px; border-left: 4px solid; margin: 1rem 0; height: 280px; }
+        .linkedin-card { border-left-color: #0077B5; }
+        .facebook-card { border-left-color: #1877F2; }
+        .facebook-pro-card { border-left-color: #FF6B35; }
+        .feature-list { margin: 1rem 0; padding-left: 1.5rem; flex-grow: 1; }
+    </style>
+    """, unsafe_allow_html=True)
+    
+    # Header with user info
+    st.markdown(f"""
+    <div class="main-header">
+        <h1 style="margin:0;">🔍 Social Media Data Extractor</h1>
+        <p style="margin:0; opacity: 0.9;">Welcome back, {user.get('name', 'User')}! 👋</p>
+    </div>
+    """, unsafe_allow_html=True)
+
+    # Sidebar with user info and logout
+    with st.sidebar:
+        if user.get('picture'):
+            st.image(user.get('picture'), width=80)
+        else:
+            st.image("https://cdn-icons-png.flaticon.com/512/149/149071.png", width=80)
+        
+        st.write(f"**👤 {user.get('name', 'User')}**")
+        st.write(f"📧 {user.get('email', '')}")
+        st.markdown("---")
+        
+        if st.button("🚪 Logout", use_container_width=True):
+            st.session_state.clear()
+            st.rerun()
     
-    # Your original dashboard content here
+    # Platform selection
     st.markdown("## 🚀 Launch Extractors")
     
     col1, col2, col3 = st.columns(3)
     
     with col1:
-        if st.button("💼 LinkedIn Extractor", use_container_width=True):
+        st.markdown("""
+        <div class="platform-card linkedin-card">
+            <h3>💼 LinkedIn Extractor</h3>
+            <ul class="feature-list">
+                <li>No login required</li>
+                <li>Profile, company, and post analysis</li>
+                <li>Quick data extraction</li>
+                <li>AI-powered insights</li>
+                <li>100% Free</li>
+            </ul>
+        </div>
+        """, unsafe_allow_html=True)
+        
+        if st.button("🚀 Launch LinkedIn Extractor", key="linkedin_btn", use_container_width=True):
             st.switch_page("pages/linkedin_extractor.py")
-    
+
     with col2:
-        if st.button("📘 Facebook Extractor", use_container_width=True):
+        st.markdown("""
+        <div class="platform-card facebook-card">
+            <h3>📘 Facebook Extractor</h3>
+            <ul class="feature-list">
+                <li>Manual login required</li>
+                <li>Group post extraction</li>
+                <li>Works with private groups</li>
+                <li>AI conversation analysis</li>
+                <li>100% Free</li>
+            </ul>
+        </div>
+        """, unsafe_allow_html=True)
+        
+        if st.button("🚀 Launch Facebook Extractor", key="facebook_btn", use_container_width=True):
             st.switch_page("pages/facebook_extractor.py")
     
     with col3:
-        if st.button("🔥 Facebook Extractor 2.0", use_container_width=True):
+        st.markdown("""
+        <div class="platform-card facebook-pro-card">
+            <h3>🔥 Facebook Extractor 2.0</h3>
+            <ul class="feature-list">
+                <li>Enhanced Facebook data extraction</li>
+                <li>More powerful algorithms</li>
+                <li>Faster processing speed</li>
+                <li>Advanced AI analysis</li>
+                <li>100% Free</li>
+            </ul>
+        </div>
+        """, unsafe_allow_html=True)
+        
+        if st.button("🚀 Launch Facebook Extractor 2.0", key="facebook_pro_btn", use_container_width=True):
             st.switch_page("pages/facebook_extractor_pro.py")
-    
-    # Logout button
-    if st.button("🚪 Logout"):
-        st.session_state.clear()
-        st.rerun()
+
+    # Instructions
+    with st.expander("📋 How to Use", expanded=True):
+        st.markdown(f"""
+        1. **Click any extractor to launch**
+        2. **For LinkedIn:** Enter any LinkedIn URL
+        3. **For Facebook:** Public data extraction available
+        4. **AI Analysis:** Chat with extracted data
+        
+        **Note:** All extractors are 100% free and require no local setup.
+        
+        **Logged in as:** {user.get('email', 'User')}
+        """)
+
+# ============================================
+# LOGIN PAGE
+# ============================================
 
 def show_login_page():
-    """Show login page"""
+    """Show login page if user is not authenticated"""
     GOOGLE_CLIENT_ID = os.getenv("GOOGLE_CLIENT_ID", "")
     
     if not GOOGLE_CLIENT_ID:
-        st.error("Google OAuth not configured")
+        st.error("""
+        ⚠️ **Google OAuth not configured!**
+        
+        Please add these secrets to HuggingFace Space Settings:
+        
+        1. Go to: Settings → Repository Secrets
+        2. Add: `GOOGLE_CLIENT_ID` (your Google Client ID)
+        3. Add: `GOOGLE_CLIENT_SECRET` (your Google Client Secret)
+        4. Restart the Space
+        """)
         return
     
-    st.title("🔐 Social Media Data Extractor")
-    st.markdown("### Welcome! Please login to continue")
-    
-    # Create login URL
-    redirect_uri = "https://refat81-social-media-data-extractor-chatbot.hf.space/oauth_callback"
-    login_url = f"https://accounts.google.com/o/oauth2/v2/auth?client_id={GOOGLE_CLIENT_ID}&redirect_uri={redirect_uri}&response_type=code&scope=openid%20email%20profile&access_type=offline&prompt=consent"
-    
-    st.markdown(f"""
-    <a href="{login_url}">
-        <div style="
-            background-color: #4285F4;
+    # Apply styling for login page
+    st.markdown("""
+    <style>
+        .login-container {
+            max-width: 500px;
+            margin: 0 auto;
+            padding: 2rem;
+            text-align: center;
+        }
+        .google-btn {
+            background: linear-gradient(135deg, #4285F4, #34A853);
             color: white;
             padding: 15px 30px;
             border-radius: 8px;
@@ -71,15 +174,78 @@ def show_login_page():
             cursor: pointer;
             font-size: 18px;
             font-weight: 600;
-            text-align: center;
-            margin: 30px 0;
-            display: inline-block;
-        ">
-            <img src="https://cdn-icons-png.flaticon.com/512/2991/2991148.png" width="24" height="24" style="vertical-align: middle; margin-right: 12px;">
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+            margin: 20px 0;
+            text-decoration: none;
+            transition: all 0.3s ease;
+        }
+        .google-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(66, 133, 244, 0.4);
+        }
+    </style>
+    """, unsafe_allow_html=True)
+    
+    # Login page content
+    st.markdown("""
+    <div class="login-container">
+        <h1>🔐 Social Media Data Extractor</h1>
+        <p style="font-size: 1.2rem; opacity: 0.9;">Secure login required to access extraction tools</p>
+        <hr style="margin: 2rem 0;">
+    </div>
+    """, unsafe_allow_html=True)
+    
+    st.markdown("### Welcome! Please login to continue")
+    
+    # Create login URL
+    redirect_uri = "https://refat81-social-media-data-extractor-chatbot.hf.space/oauth_callback"
+    login_url = f"https://accounts.google.com/o/oauth2/v2/auth?client_id={GOOGLE_CLIENT_ID}&redirect_uri={redirect_uri}&response_type=code&scope=openid%20email%20profile&access_type=offline&prompt=consent"
+    
+    # Google login button
+    st.markdown(f"""
+    <div style="text-align: center;">
+        <a href="{login_url}" class="google-btn">
+            <img src="https://cdn-icons-png.flaticon.com/512/2991/2991148.png" width="24" height="24">
             Sign in with Google
-        </div>
-    </a>
+        </a>
+    </div>
     """, unsafe_allow_html=True)
+    
+    # Instructions
+    st.markdown("---")
+    with st.expander("ℹ️ About this login", expanded=False):
+        st.markdown("""
+        **Why login is required:**
+        - Securely store your extracted data
+        - Prevent unauthorized access
+        - Personalize your experience
+        - Track your usage history
+        
+        **Privacy:** We only access your email and profile picture.
+        Your data is never shared with third parties.
+        """)
+
+# ============================================
+# MAIN APP
+# ============================================
+
+def main():
+    """Main app routing"""
+    st.set_page_config(
+        page_title="Social Media Data Extractor",
+        page_icon="🔍",
+        layout="wide",
+        initial_sidebar_state="expanded"
+    )
+    
+    # Check if user is logged in
+    if "authenticated" in st.session_state and st.session_state.authenticated:
+        show_dashboard()
+    else:
+        show_login_page()
 
 if __name__ == "__main__":
     main()