Update app.py

app.py

@@ -25,6 +25,10 @@ DEFAULT_USER_ID = int(os.getenv("DEFAULT_USER_ID", "30"))
 DEFAULT_PERSONALIZATION_ID = int(os.getenv("DEFAULT_PERSONALIZATION_ID", "100"))
 API_TIMEOUT = int(os.getenv("API_TIMEOUT", "30"))
 
+# Authentication credentials from environment variables
+VALID_USERNAME = os.getenv("APP_USERNAME")
+VALID_PASSWORD = os.getenv("APP_PASSWORD")
+
 # Set page configuration
 st.set_page_config(
     page_title="Base Course Personalization",
@@ -50,6 +54,9 @@ st.markdown("""
         --border-color: #444444;
         --header-color: #4F97FF;
         --subheader-color: #FFFFFF;
+        --success-color: #10B981;
+        --warning-color: #F59E0B;
+        --error-color: #EF4444;
     }
     
     /* Main container styling */
@@ -65,6 +72,7 @@ st.markdown("""
         color: var(--header-color);
         margin-bottom: 1rem;
         text-align: center;
+        text-shadow: 0 2px 4px rgba(79, 151, 255, 0.3);
     }
     
     .section-header {
@@ -74,31 +82,50 @@ st.markdown("""
         margin-top: 2rem;
         margin-bottom: 1rem;
         padding-bottom: 0.5rem;
-        border-bottom: 1px solid var(--border-color);
+        border-bottom: 2px solid var(--border-color);
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
     }
     
     /* Form container */
     div[data-testid="stForm"] {
         background-color: var(--card-background);
-        padding: 1.5rem;
-        border-radius: 8px;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.3);
+        padding: 2rem;
+        border-radius: 12px;
+        box-shadow: 0 8px 25px rgba(0,0,0,0.4);
+        border: 1px solid var(--border-color);
+        margin-bottom: 1rem;
     }
     
     /* Button styling */
     .stButton>button {
-        background-color: var(--accent-color);
+        background: linear-gradient(135deg, var(--accent-color) 0%, #3B82F6 100%);
         color: white;
-        border-radius: 4px;
-        padding: 0.5rem 2rem;
-        font-weight: 500;
+        border-radius: 8px;
+        padding: 0.75rem 2rem;
+        font-weight: 600;
         border: none;
+        transition: all 0.3s ease;
+        box-shadow: 0 4px 15px rgba(79, 151, 255, 0.3);
+    }
+    
+    .stButton>button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 20px rgba(79, 151, 255, 0.4);
     }
     
-    /* Input fields */
+    /* Input fields styling */
     div[data-baseweb="select"] > div {
         background-color: var(--background-color);
-        border-color: var(--border-color);
+        border: 2px solid var(--border-color);
+        border-radius: 8px;
+        transition: border-color 0.3s ease;
+    }
+    
+    div[data-baseweb="select"] > div:focus-within {
+        border-color: var(--accent-color);
+        box-shadow: 0 0 0 3px rgba(79, 151, 255, 0.1);
     }
     
     .stTextInput > div > div > input,
@@ -106,64 +133,123 @@ st.markdown("""
     .stTextArea > div > div > textarea {
         background-color: var(--background-color);
         color: var(--text-color);
-        border-color: var(--border-color);
+        border: 2px solid var(--border-color);
+        border-radius: 8px;
+        padding: 0.75rem;
+        transition: border-color 0.3s ease;
     }
     
-    /* Radio buttons - Fix visibility */
-    .stRadio > div {
-        background-color: transparent;
+    .stTextInput > div > div > input:focus,
+    .stNumberInput > div > div > input:focus,
+    .stTextArea > div > div > textarea:focus {
+        border-color: var(--accent-color);
+        box-shadow: 0 0 0 3px rgba(79, 151, 255, 0.1);
     }
     
-    .stRadio > div > label > div {
-        color: var(--text-color) !important;
+    /* Topic container styling */
+    .topic-container {
+        background-color: var(--card-background);
+        padding: 1.5rem;
+        border-radius: 10px;
+        margin-bottom: 1rem;
+        border: 1px solid var(--border-color);
+        position: relative;
     }
     
-    /* Select box labels */
-    .stSelectbox > label {
-        color: var(--text-color) !important;
+    .topic-header {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        margin-bottom: 1rem;
+        font-weight: 600;
+        color: var(--accent-color);
     }
     
-    /* All form labels */
-    div[data-testid="stForm"] label {
+    /* Radio buttons */
+    .stRadio > div {
+        background-color: transparent;
+        gap: 1rem;
+    }
+    
+    .stRadio > div > label > div {
         color: var(--text-color) !important;
+        font-weight: 500;
     }
     
-    /* Radio button text */
-    .stRadio label {
+    /* Labels */
+    .stSelectbox > label,
+    .stTextInput > label,
+    .stNumberInput > label,
+    .stTextArea > label,
+    .stRadio > label {
         color: var(--text-color) !important;
+        font-weight: 500;
+        margin-bottom: 0.5rem;
     }
     
-    /* Fix for all input labels */
-    .st-emotion-cache-1gulkj5,
-    .st-emotion-cache-1aumxhf,
-    .st-emotion-cache-16txtl3 {
+    /* Toggle switch */
+    .stToggle > label {
         color: var(--text-color) !important;
+        font-weight: 500;
     }
     
     /* Spacing */
     div.block-container {
         padding-top: 2rem;
+        max-width: 1200px;
     }
     
     hr {
-        margin-top: 1rem;
-        margin-bottom: 1rem;
-        border-color: var(--border-color);
+        margin: 2rem 0;
+        border: none;
+        border-top: 1px solid var(--border-color);
     }
     
     /* API Response Container */
     .api-response {
         background-color: #1A1A1A;
-        border-radius: 8px;
-        padding: 1rem;
+        border-radius: 10px;
+        padding: 1.5rem;
         border-left: 4px solid var(--accent-color);
+        margin: 1rem 0;
     }
     
     .session-info {
         background-color: var(--card-background);
-        padding: 1rem;
+        padding: 1.5rem;
+        border-radius: 10px;
+        margin: 1rem 0;
+        border: 1px solid var(--border-color);
+        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+    }
+    
+    /* Action buttons container */
+    .action-buttons {
+        display: flex;
+        gap: 1rem;
+        margin: 1rem 0;
+        justify-content: flex-start;
+    }
+    
+    /* Small action buttons */
+    .small-button {
+        padding: 0.5rem 1rem;
+        font-size: 0.875rem;
+    }
+    
+    /* Success/Error styling */
+    .stSuccess, .stError, .stWarning, .stInfo {
         border-radius: 8px;
+        padding: 1rem;
         margin: 1rem 0;
+    }
+    
+    /* Login container */
+    .login-container {
+        background-color: var(--card-background);
+        padding: 3rem;
+        border-radius: 15px;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
         border: 1px solid var(--border-color);
     }
 </style>
@@ -177,54 +263,54 @@ if 'session_ids' not in st.session_state:
 if 'authenticated' not in st.session_state:
     st.session_state.authenticated = False
 
-# Hardcoded credentials (you can change these)
-VALID_USERNAME = "admin"
-VALID_PASSWORD = "techlearn2024"
-
 # Authentication check
 if not st.session_state.authenticated:
     st.markdown('<h1 class="main-header">🔐 Login to Course Personalization</h1>', unsafe_allow_html=True)
     
-    with st.form("login_form"):
-        st.markdown('<div class="section-header">🔑 Authentication Required</div>', unsafe_allow_html=True)
-        
-        col1, col2, col3 = st.columns([1, 2, 1])
-        with col2:
-            username = st.text_input("Username", placeholder="Enter username")
-            password = st.text_input("Password", placeholder="Enter password", type="password")
+    col1, col2, col3 = st.columns([1, 2, 1])
+    with col2:
+        with st.container():
+            st.markdown('<div class="login-container">', unsafe_allow_html=True)
             
-            login_submitted = st.form_submit_button("🚀 Login", use_container_width=True)
+            with st.form("login_form"):
+                st.markdown('<div class="section-header">🔑 Authentication Required</div>', unsafe_allow_html=True)
+                
+                username = st.text_input("Username", placeholder="Enter username", key="login_username")
+                password = st.text_input("Password", placeholder="Enter password", type="password", key="login_password")
+                
+                login_submitted = st.form_submit_button("🚀 Login", use_container_width=True)
+                
+                if login_submitted:
+                    if username == VALID_USERNAME and password == VALID_PASSWORD:
+                        st.session_state.authenticated = True
+                        st.success("Login successful! Redirecting...")
+                        time.sleep(1)
+                        st.rerun()
+                    else:
+                        st.error("❌ Invalid username or password")
             
-            if login_submitted:
-                if username == VALID_USERNAME and password == VALID_PASSWORD:
-                    st.session_state.authenticated = True
-                    st.success("Login successful! Redirecting...")
-                    time.sleep(1)
-                    st.rerun()
-                else:
-                    st.error(" Invalid username or password")
+            st.markdown('</div>', unsafe_allow_html=True)
     
     st.markdown("---")
-    st.markdown("""
+    st.markdown(f"""
     <div style="text-align: center; color: #888888;">
-    <small>Demo Credentials: admin / techlearn2024</small>
+    <small>Demo Credentials: {VALID_USERNAME} / {VALID_PASSWORD if len(VALID_PASSWORD) <= 10 else VALID_PASSWORD[:3] + '...'}</small>
     </div>
     """, unsafe_allow_html=True)
     st.stop()
 
-# Main app (only shown after authentication)
-# App Header
-col1, col2, col3 = st.columns([1, 2, 1])
-with col2:
-    st.markdown('<h1 class="main-header">📚 Base Course Personalization</h1>', unsafe_allow_html=True)
+# Main app header
+st.markdown('<h1 class="main-header">📚 Base Course Personalization</h1>', unsafe_allow_html=True)
+
+# Logout button in top right
+col1, col2, col3 = st.columns([2, 1, 1])
 with col3:
-    if st.button(" Logout"):
+    if st.button("🔓 Logout", key="logout_btn"):
         st.session_state.authenticated = False
         st.session_state.topics_list = [{"topic_title": "What is Flask", "chapter_title": "Introduction to Flask"}]
         st.session_state.session_ids = []
         st.rerun()
 
-
 # Main Form
 with st.form("personalization_form", clear_on_submit=False):
     # Topics Section
@@ -232,30 +318,59 @@ with st.form("personalization_form", clear_on_submit=False):
     
     # Option to choose single or multiple topics
     topic_mode = st.radio(
-        "Topic Mode",
+        "Select Topic Mode",
         ["Single Topic", "Multiple Topics"],
         horizontal=True,
         help="Choose whether to process one topic or multiple topics"
     )
     
     if topic_mode == "Single Topic":
-        st.subheader("Single Topic Details")
-        single_topic_title = st.text_input("Topic Title", value="What is Flask", help="Enter the topic title")
+        st.markdown('<div class="topic-container">', unsafe_allow_html=True)
+        st.markdown('<div class="topic-header">📝 Single Topic Configuration</div>', unsafe_allow_html=True)
+        
+        col1, col2 = st.columns(2)
+        with col1:
+            single_topic_title = st.text_input("Topic Title", value="What is Flask", help="Enter the topic title", key="single_topic")
+        with col2:
+            single_chapter_title = st.text_input("Chapter Title", value="Introduction to Flask", help="Enter the chapter title", key="single_chapter")
+        
+        st.markdown('</div>', unsafe_allow_html=True)
         
     else:
-        st.subheader("Multiple Topics")
+        st.markdown("### 📚 Multiple Topics Configuration")
         
-        # Display existing topics
+        # Display existing topics with better styling
         for i, topic in enumerate(st.session_state.topics_list):
-            col1, col2 = st.columns([4, 1])
+            st.markdown(f'<div class="topic-container">', unsafe_allow_html=True)
+            st.markdown(f'<div class="topic-header">📖 Topic {i+1}</div>', unsafe_allow_html=True)
+            
+            col1, col2, col3 = st.columns([3, 3, 1])
             with col1:
-                topic_title = st.text_input(f"Topic {i+1}", value=topic["topic_title"], key=f"topic_{i}")
+                topic_title = st.text_input(
+                    "Topic Title", 
+                    value=topic["topic_title"], 
+                    key=f"topic_title_{i}",
+                    help="Enter the topic title"
+                )
                 st.session_state.topics_list[i]["topic_title"] = topic_title
+            
             with col2:
+                chapter_title = st.text_input(
+                    "Chapter Title", 
+                    value=topic["chapter_title"], 
+                    key=f"chapter_title_{i}",
+                    help="Enter the chapter title"
+                )
+                st.session_state.topics_list[i]["chapter_title"] = chapter_title
+            
+            with col3:
                 if len(st.session_state.topics_list) > 1:
-                    if st.button("🗑️", key=f"remove_{i}", help="Remove topic"):
+                    st.markdown("<br>", unsafe_allow_html=True)  # Add spacing
+                    if st.button("🗑️", key=f"remove_{i}", help="Remove this topic"):
                         st.session_state.topics_list.pop(i)
                         st.rerun()
+            
+            st.markdown('</div>', unsafe_allow_html=True)
 
     # Language & Voice Settings Section  
     st.markdown('<div class="section-header">🗣️ Language & Voice Settings</div>', unsafe_allow_html=True)
@@ -264,9 +379,10 @@ with st.form("personalization_form", clear_on_submit=False):
     with col1:
         target_language = st.selectbox(
             "Target Language", 
-            ["english", "hindi", "telugu", "tamil", "other"],
+            ["english", "hindi", "marathi", "kannada", "punjabi","gujarati"],
             index=0,
-            format_func=lambda x: x.capitalize()
+            format_func=lambda x: x.capitalize(),
+            help="Select the target language for content generation"
         )
     
     with col2:
@@ -274,15 +390,17 @@ with st.form("personalization_form", clear_on_submit=False):
             "Voice Gender", 
             ["male", "female"], 
             index=0,
-            format_func=lambda x: x.capitalize()
+            format_func=lambda x: x.capitalize(),
+            help="Select the voice gender for text-to-speech"
         )
     
     with col3:
         tts_voice = st.selectbox(
             "Voice Style", 
             ["onyx", "echo", "soprano", "alto", "robotic"],
-            index=0,  # Default to "onyx"
-            format_func=lambda x: x.capitalize()
+            index=0,
+            format_func=lambda x: x.capitalize(),
+            help="Select the voice style for text-to-speech"
         )
 
     # Technical Settings Section
@@ -294,40 +412,59 @@ with st.form("personalization_form", clear_on_submit=False):
             "Programming Language", 
             ["python", "java", "javascript", "c++", "go"],
             index=0,
-            format_func=lambda x: x.capitalize()
+            format_func=lambda x: x.capitalize(),
+            help="Select the primary programming language for examples"
         )
     with col2:
-        toggle_hinglish = st.toggle("Enable Hinglish", value=True, help="Mix of Hindi and English")
+        st.markdown("<br>", unsafe_allow_html=True)  # Add spacing
+        toggle_hinglish = st.toggle("Enable Hinglish", value=True, help="Enable mixing of Hindi and English")
 
     # Submit button
     st.markdown("<br>", unsafe_allow_html=True)
     col1, col2, col3 = st.columns([1, 2, 1])
     with col2:
-        submitted = st.form_submit_button("Generate Personalized Course", use_container_width=True)
+        submitted = st.form_submit_button("🚀 Generate Base Course", use_container_width=True)
 
 # Add/Remove topic buttons outside the form (for multiple topics)
 if topic_mode == "Multiple Topics":
-    col1, col2, col3 = st.columns([1, 1, 2])
+    st.markdown('<div class="action-buttons">', unsafe_allow_html=True)
+    col1, col2, col3, col4 = st.columns([2, 2, 2, 4])
     with col1:
-        if st.button(" Add More Topic"):
-            st.session_state.topics_list.append({"topic_title": f"Topic {len(st.session_state.topics_list) + 1}"})
+        if st.button(" Add Topic", key="add_topic", help="Add a new topic"):
+            st.session_state.topics_list.append({
+                "topic_title": f"Topic {len(st.session_state.topics_list) + 1}", 
+                "chapter_title": f"Chapter {len(st.session_state.topics_list) + 1}"
+            })
             st.rerun()
     with col2:
-        if st.button(" Reset Topics"):
-            st.session_state.topics_list = [{"topic_title": "What is Flask"}]
+        if st.button(" Reset All", key="reset_topics", help="Reset to default topics"):
+            st.session_state.topics_list = [{"topic_title": "What is Flask", "chapter_title": "Introduction to Flask"}]
             st.rerun()
+    st.markdown('</div>', unsafe_allow_html=True)
 
 # Handle submission
 if submitted:
+    # Determine which topics to use based on mode
+    if topic_mode == "Single Topic":
+        topics_to_process = [{"topic_title": single_topic_title, "chapter_title": single_chapter_title}]
+    else:
+        topics_to_process = st.session_state.topics_list
+    
     # Validate inputs
-    valid_topics = [topic for topic in st.session_state.topics_list if topic["topic_title"].strip() and topic["chapter_title"].strip()]
+    valid_topics = []
+    for topic in topics_to_process:
+        if topic["topic_title"].strip() and topic["chapter_title"].strip():
+            valid_topics.append(topic)
     
     if not valid_topics:
-        st.error("Please enter at least one topic with both topic title and chapter title")
+        st.error("❌ Please enter at least one topic with both topic title and chapter title")
     else:
-        # Show loading state
-        with st.spinner("Generating your personalized course..."):
-            time.sleep(1.5)  # Simulating API call delay
+        # Show loading state with better animation
+        with st.spinner("🎬 Generating your personalized course... This may take a few moments."):
+            progress_bar = st.progress(0)
+            for i in range(100):
+                time.sleep(0.02)  # Simulating progress
+                progress_bar.progress(i + 1)
             
             # Hardcoded values
             course_id = DEFAULT_COURSE_ID
@@ -405,53 +542,44 @@ if submitted:
                     response_data = response.json()
                     session_ids = response_data.get("session_ids", [])
                     
-                    st.success(f"Course personalization started successfully!")
+                    st.success(" Base Course started successfully!")
                     
                     # Store session IDs in session state
                     st.session_state.session_ids.extend(session_ids)
                     
                     # Display results in a clean format
-                    st.markdown("### 🎉 Your personalized course generation has started!")
-                    st.markdown(f"""
-                    **Course ID**: {course_id}  
-                    **Programming Language**: {programming_language.capitalize()}  
-                    **Target Language**: {target_language.capitalize()}  
-                    **Voice**: {tts_voice.capitalize()} ({tts_gender.capitalize()})  
-                    **Topics**: {len(valid_topics)}
-                    """)
+                    st.markdown("###  Generation Summary")
+                    
+                    col1, col2 = st.columns(2)
+                    with col1:
+                        st.markdown(f"""
+                        **Course ID**: `{course_id}`  
+                        **Programming Language**: {programming_language.capitalize()}  
+                        **Target Language**: {target_language.capitalize()}  
+                        """)
+                    with col2:
+                        st.markdown(f"""
+                        **Voice**: {tts_voice.capitalize()} ({tts_gender.capitalize()})  
+                        **Topics Count**: {len(valid_topics)}  
+                        **Hinglish**: {"Enabled" if toggle_hinglish else "Disabled"}
+                        """)
                     
-                    # Display session IDs
-                    if session_ids:
-                        st.markdown("### 🔍 Session IDs for Tracking")
-                        for i, session_id in enumerate(session_ids, 1):
-                            st.markdown(f'<div class="session-info"><strong>Session {i}:</strong> <code>{session_id}</code></div>', unsafe_allow_html=True)
                     
-                    # Display API response
-                    st.markdown('<div class="section-header">📊 API Response</div>', unsafe_allow_html=True)
-                    st.markdown('<div class="api-response">', unsafe_allow_html=True)
-                    st.json(response_data)
-                    st.markdown('</div>', unsafe_allow_html=True)
                     
-                    # Information about tracking
-                    st.info(f"""
-                    💡 **Tracking Information**  
-                    You can track the progress of your video generation using the session IDs above.  
-                    The processing status will be updated in DynamoDB table: `{SESSION_TABLE}`  
-                    Region: `{DYNAMODB_REGION}`
-                    """)
                     
                 else:
-                    st.error(f"API Error: {response.status_code}")
+                    st.error(f" API Error: {response.status_code}")
                     if response.text:
-                        st.error(f"Error Details: {response.text}")
+                        st.error(f"**Error Details**: {response.text}")
                         
             except requests.exceptions.Timeout:
-                st.error("Request timed out. Please try again later.")
+                st.error(" Request timed out. Please try again later.")
             except requests.exceptions.ConnectionError:
-                st.error("Connection error. Please check your internet connection.")
+                st.error("🌐 Connection error. Please check your internet connection.")
             except Exception as e:
-                st.error(f"API call failed: {str(e)}")
+                st.error(f" API call failed: {str(e)}")
                 
                 # Show payload for debugging
-                st.warning("Request payload for debugging:")
-                st.json(payload)
+                with st.expander("🐛 Debug Information", expanded=False):
+                    st.warning("Request payload for debugging:")
+                    st.json(payload)