Upload 3 files

README.md

@@ -1,20 +1,101 @@
----
-title: Base Course Personalization
-emoji: 🚀
-colorFrom: red
-colorTo: red
-sdk: docker
-app_port: 8501
-tags:
-- streamlit
-pinned: false
-short_description: Base Course Personalization
-license: apache-2.0
----
-
-# Welcome to Streamlit!
-
-Edit `/src/streamlit_app.py` to customize this app to your heart's desire. :heart:
-
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
+# Base Course Personalization
+
+![Banner](https://img.shields.io/badge/Streamlit-App-FF4B4B?style=for-the-badge&logo=streamlit&logoColor=white)
+![Python](https://img.shields.io/badge/Python-3.7+-blue?style=for-the-badge&logo=python&logoColor=white)
+
+## 📚 Overview
+
+Base Course Personalization is an interactive web application that tailors educational content to match individual learning preferences. By collecting user profile information and preferences, the system generates personalized course materials optimized for each learner's unique needs.
+
+## ✨ Features
+
+- **Personalized User Profiles**: Customize learning experiences based on user demographics and preferences
+- **Adaptive Learning Styles**: Support for visual, auditory, and kinesthetic learning approaches
+- **Language Customization**: Set your preferred language and voice settings
+- **Technical Preferences**: Specify programming language preferences
+- **Dark Mode Interface**: Easy-on-the-eyes interface for extended learning sessions
+
+## 🚀 Quick Start
+
+The application is hosted on Hugging Face Spaces. You can access it here:
+
+[Launch Base Course Personalization App](https://huggingface.co/spaces/YOUR_USERNAME/base-course-personalization)
+
+## 🛠️ Local Development
+
+### Prerequisites
+- Python 3.7+
+- Streamlit
+
+### Installation
+
+1. Clone this repository
+```bash
+git clone https://github.com/yourusername/base-course-personalization.git
+cd base-course-personalization
+```
+
+2. Install dependencies
+```bash
+pip install -r requirements.txt
+```
+
+3. Run the application
+```bash
+streamlit run main.py
+```
+
+## 📋 How It Works
+
+1. **Fill Your Profile**: Enter personal details and preferences
+2. **Specify Learning Style**: Choose your preferred learning style (visual, auditory, kinesthetic)
+3. **Set Language Preferences**: Select language settings and voice preferences
+4. **Submit**: Generate your personalized course structure
+5. **View Results**: See your personalized course outline and settings
+
+## 🔧 Technical Details
+
+The application generates a JSON payload that can be processed by the backend learning management system to create personalized course content. Key components include:
+
+- **User Profile**: Demographic and preference information
+- **Topics**: Course structure and content links
+- **Settings**: Language, voice, and technical preferences
+
+### API Integration
+
+The application integrates with a personalization API that processes the user preferences and returns customized course content. The API endpoint accepts POST requests with a JSON payload containing all collected user information.
+
+```python
+# Example API call
+import requests
+
+response = requests.post(
+    "https://api.example.com/personalize-course", 
+    json=payload
+)
+```
+
+Response format:
+```json
+{
+  "success": true,
+  "course_id": "personalized-123",
+  "topics": [...]
+}
+```
+
+## 🔒 Privacy
+
+All data is processed in the browser and is not stored unless explicitly submitted to the API. Your preferences are used solely to tailor the learning experience.
+
+## 📝 License
+
+This project is licensed under the MIT License - see the LICENSE file for details.
+
+## 👥 Contact
+
+For questions, feedback, or support, please [open an issue](https://github.com/yourusername/base-course-personalization/issues).
+
+---
+
+© 2025 Base Course Personalization | All Rights Reserved

main.py

@@ -0,0 +1,373 @@
+import streamlit as st
+import json
+from datetime import datetime
+import time
+import requests
+
+# API endpoint (replace with your actual endpoint)
+API_ENDPOINT = "https://api.example.com/personalize-course"
+
+# Set page configuration
+st.set_page_config(
+    page_title="Base Course Personalization",
+    layout="wide",
+    initial_sidebar_state="collapsed",
+    page_icon="📚",
+    menu_items={
+        'Get Help': None,
+        'Report a bug': None,
+        'About': None
+    }
+)
+
+# Custom CSS for dark theme styling
+st.markdown("""
+<style>
+    /* Dark theme colors */
+    :root {
+        --background-color: #1E1E1E;
+        --card-background: #2D2D2D;
+        --text-color: #E0E0E0;
+        --accent-color: #4F97FF;
+        --border-color: #444444;
+        --header-color: #4F97FF;
+        --subheader-color: #BBBBBB;
+    }
+    
+    /* Main container styling */
+    .stApp {
+        background-color: var(--background-color);
+        color: var(--text-color);
+    }
+    
+    /* Headers */
+    .main-header {
+        font-size: 2.5rem;
+        font-weight: 600;
+        color: var(--header-color);
+        margin-bottom: 1rem;
+    }
+    
+    .section-header {
+        font-size: 1.5rem;
+        font-weight: 500;
+        color: var(--subheader-color);
+        margin-top: 2rem;
+        margin-bottom: 1rem;
+        padding-bottom: 0.5rem;
+        border-bottom: 1px solid var(--border-color);
+    }
+    
+    /* 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);
+    }
+    
+    /* Button styling */
+    .stButton>button {
+        background-color: var(--accent-color);
+        color: white;
+        border-radius: 4px;
+        padding: 0.5rem 2rem;
+        font-weight: 500;
+        border: none;
+    }
+    
+    /* Input fields */
+    div[data-baseweb="select"] > div {
+        background-color: var(--background-color);
+        border-color: var(--border-color);
+    }
+    
+    .stTextInput > div > div > input {
+        background-color: var(--background-color);
+        color: var(--text-color);
+        border-color: var(--border-color);
+    }
+    
+    .stNumberInput > div > div > input {
+        background-color: var(--background-color);
+        color: var(--text-color);
+    }
+    
+    .stTextArea > div > div > textarea {
+        background-color: var(--background-color);
+        color: var(--text-color);
+        border-color: var(--border-color);
+    }
+    
+    /* Radio buttons */
+    .stRadio > div {
+        background-color: transparent;
+    }
+    
+    /* Spacing */
+    div.block-container {
+        padding-top: 2rem;
+    }
+    
+    hr {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+        border-color: var(--border-color);
+    }
+    
+    /* Footer */
+    footer {
+        color: #888888;
+    }
+    
+    /* API Response Container */
+    .api-response {
+        background-color: #1A1A1A;
+        border-radius: 8px;
+        padding: 1rem;
+        border-left: 4px solid var(--accent-color);
+    }
+</style>
+""", unsafe_allow_html=True)
+
+# App Header
+col1, col2, col3 = st.columns([1, 3, 1])
+with col2:
+    st.markdown('<h1 class="main-header">📚 Base Course Personalization</h1>', unsafe_allow_html=True)
+    st.markdown("""
+    Complete this form to tailor your learning experience to your preferences.
+    Your personalized course will be generated based on the information you provide below.
+    """)
+
+# Main Form
+with st.form("personalization_form", clear_on_submit=False):
+    # Personal Information Section
+    st.markdown('<div class="section-header">👤 Personal Details</div>', unsafe_allow_html=True)
+    
+    col1, col2 = st.columns(2)
+    with col1:
+        user_name = st.text_input("Full Name", placeholder="Enter your full name")
+        user_age = st.number_input("Age", min_value=10, max_value=100, value=22)
+    
+    with col2:
+        user_gender = st.selectbox(
+            "Gender", 
+            ["male", "female", "other"], 
+            index=0,
+            format_func=lambda x: x.capitalize()
+        )
+        tech_knowledge = st.select_slider(
+            "Technical Knowledge",
+            options=["beginner", "intermediate", "advanced"],
+            value="beginner"
+        )
+    
+    st.markdown('<div class="section-header">🎯 Preferences</div>', unsafe_allow_html=True)
+    col1, col2 = st.columns(2)
+    
+    with col1:
+        preferred_activity = st.text_area(
+            "Preferred Activities", 
+            placeholder="e.g., movies, painting, shopping",
+            help="Enter activities separated by commas"
+        )
+        physical_activities = st.text_area(
+            "Physical Activities", 
+            placeholder="e.g., badminton, cricket, yoga",
+            help="Enter activities separated by commas"
+        )
+    
+    with col2:
+        food = st.text_area(
+            "Food Preferences", 
+            placeholder="e.g., vegetarian, paneer, pizza",
+            help="Enter food items separated by commas"
+        )
+    
+    # Learning Style Section
+    st.markdown('<div class="section-header">🎓 Learning Preferences</div>', unsafe_allow_html=True)
+    
+    learning_style = st.radio(
+        "Learning Style",
+        ["visual", "auditory", "kinesthetic"],
+        index=0,
+        help="Visual: learn by seeing, Auditory: learn by hearing, Kinesthetic: learn by doing",
+        horizontal=True,
+        format_func=lambda x: x.capitalize()
+    )
+    
+    with st.expander("Learn more about learning styles"):
+        st.info("""
+        - **Visual learners** prefer images, diagrams, and spatial understanding
+        - **Auditory learners** learn best through listening and verbal instructions
+        - **Kinesthetic learners** prefer hands-on activities and learning by doing
+        """)
+    
+    # Language Settings Section
+    st.markdown('<div class="section-header">🗣️ Language & Voice Settings</div>', unsafe_allow_html=True)
+    
+    col1, col2, col3 = st.columns(3)
+    with col1:
+        target_language = st.selectbox(
+            "Target Language", 
+            ["english", "hindi", "telugu", "tamil", "other"],
+            index=0,
+            format_func=lambda x: x.capitalize()
+        )
+    
+    with col2:
+        tts_gender = st.selectbox(
+            "Voice Gender", 
+            ["male", "female"], 
+            index=0,
+            format_func=lambda x: x.capitalize()
+        )
+    
+    with col3:
+        tts_voice = st.selectbox(
+            "Voice Style", 
+            ["echo", "soprano", "alto", "robotic"],
+            index=0,
+            format_func=lambda x: x.capitalize()
+        )
+    
+    toggle_hinglish = st.toggle("Enable Hinglish", value=True, help="Mix of Hindi and English")
+
+    # Course Settings Section
+    st.markdown('<div class="section-header">💻 Technical Preferences</div>', unsafe_allow_html=True)
+    
+    programming_language = st.selectbox(
+        "Programming Language", 
+        ["python", "java", "javascript", "c++", "go"],
+        index=0,
+        format_func=lambda x: x.capitalize()
+    )
+    
+    # Show sample lesson structure
+    with st.expander("📋 Sample Course Structure"):
+        st.markdown("""
+        ### Introduction to Flask
+        1. What is Flask
+        2. Setting Up Flask Environment
+        3. Understanding Flask Project Structure
+        """)
+    
+    # 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)
+
+# Handle submission
+if submitted:
+    # Validate inputs
+    if not user_name:
+        st.error("Please enter your name")
+    elif not preferred_activity:
+        st.warning("Adding preferred activities will help us personalize your content better")
+    else:
+        # Show loading state
+        with st.spinner("Generating your personalized course..."):
+            time.sleep(1.5)  # Simulating API call delay
+            
+            # Create payload
+            payload = {
+                "personalization_id": 100,
+                "user_id": 30,
+                "course_id": 47,
+                "total_videos": 3,
+                "created_at": datetime.utcnow().isoformat(),
+                "user_profile": {
+                    "personalized": True,
+                    "user_name": user_name,
+                    "user_age": user_age,
+                    "user_gender": user_gender,
+                    "user_tech_knowledge": tech_knowledge,
+                    "user_preferred_activity": preferred_activity,
+                    "user_food": food,
+                    "user_physical_activities": physical_activities,
+                    "learning_style": learning_style,
+                    "target_language": target_language,
+                    "tts_gender": tts_gender,
+                    "tts_voice": tts_voice,
+                    "toggle_hinglish": toggle_hinglish,
+                    "run_visualization": False,
+                    "subtitle": "",
+                    "age_group": "18-25",
+                },
+                "topics": [
+                    {
+                        "topic_id": 10834,
+                        "topic_title": "Setting Up Flask Environment",
+                        "chapter_id": 647,
+                        "chapter_title": "Introduction to Flask",
+                        "course_id": 47,
+                        "video_url": "https://techlearn-dev.s3.ap-south-1.amazonaws.com/course_videos/47/647/1729064365.mp4",
+                        "video_duration": 462,
+                        "sequence_number": 2
+                    },
+                    {
+                        "topic_id": 10835,
+                        "topic_title": "Understanding Flask Project Structure",
+                        "chapter_id": 647,
+                        "chapter_title": "Introduction to Flask",
+                        "course_id": 47,
+                        "video_url": "https://techlearn-dev.s3.ap-south-1.amazonaws.com/course_videos/47/647/1729064412.mp4",
+                        "video_duration": 429,
+                        "sequence_number": 3
+                    },
+                    {
+                        "topic_id": 10833,
+                        "topic_title": "What is Flask",
+                        "chapter_id": 647,
+                        "chapter_title": "Introduction to Flask",
+                        "course_id": 47,
+                        "video_url": "https://techlearn-dev.s3.ap-south-1.amazonaws.com/course_videos/47/647/1729064322.mp4",
+                        "video_duration": 410,
+                        "sequence_number": 1
+                    }
+                ],
+                "settings": {
+                    "target_language": target_language,
+                    "tts_gender": tts_gender,
+                    "tts_voice": tts_voice,
+                    "toggle_hinglish": toggle_hinglish,
+                    "run_visualization": False,
+                    "subtitle": "",
+                    "programming_language": programming_language,
+                }
+            }
+
+            # Make API call
+            try:
+                response = requests.post(API_ENDPOINT, json=payload)
+                
+                if response.status_code == 200:
+                    st.success(f"Course personalized successfully for {user_name}!")
+                    
+                    # Display results in a clean format
+                    st.markdown("### 🎉 Your personalized course is ready!")
+                    st.markdown(f"""
+                    **Course**: Introduction to Flask  
+                    **Programming Language**: {programming_language.capitalize()}  
+                    **Learning Style**: {learning_style.capitalize()}  
+                    **Voice**: {tts_voice.capitalize()} ({tts_gender.capitalize()})
+                    """)
+                    
+                    # 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.json())
+                    st.markdown('</div>', unsafe_allow_html=True)
+                else:
+                    st.error(f"API Error: {response.status_code} - {response.text}")
+            except Exception as e:
+                st.error(f"API call failed: {e}")
+                
+                # Show local payload as fallback
+                st.warning("Using local data as fallback:")
+                st.json(payload)
+
+# Footer
+st.markdown("---")
+st.caption("© 2025 Base Course Personalization | All Rights Reserved")

requirements.txt

@@ -1,3 +1,2 @@
-altair
-pandas
-streamlit
+streamlit
+requests