Create app.py

app.py

@@ -0,0 +1,342 @@
+import streamlit as st
+from PIL import Image
+import base64
+from datetime import datetime
+
+def set_page_config():
+    st.set_page_config(
+        page_title="Gyan.AI | Synaptyx.AI",
+        page_icon="🎓",
+        layout="wide",
+        initial_sidebar_state="expanded"
+    )
+
+def apply_custom_css():
+    st.markdown("""
+        <style>
+        /* Main app styling */
+        .stApp {
+            background-color: #f8f9fa;
+        }
+        
+        /* Header styling */
+        .header-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 60px;
+            background-color: white;
+            border-bottom: 1px solid #e9ecef;
+            z-index: 999;
+            padding: 0 20px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        
+        .brand-text {
+            font-size: 24px;
+            font-weight: 600;
+            color: #1a1a1a;
+        }
+        
+        .sub-brand {
+            font-size: 18px;
+            color: #666;
+            margin-left: 8px;
+        }
+        
+        /* Chat container styling */
+        .chat-container {
+            background-color: white;
+            border-radius: 10px;
+            padding: 20px;
+            margin: 10px 0;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        
+        /* Message styling */
+        .user-message {
+            background-color: #007bff;
+            color: white;
+            padding: 10px 15px;
+            border-radius: 15px;
+            margin: 5px 0;
+            max-width: 80%;
+            margin-left: auto;
+        }
+        
+        .assistant-message {
+            background-color: #f1f3f5;
+            color: #1a1a1a;
+            padding: 10px 15px;
+            border-radius: 15px;
+            margin: 5px 0;
+            max-width: 80%;
+        }
+        
+        /* Input box styling */
+        .stTextInput input {
+            border-radius: 20px;
+            border: 1px solid #e9ecef;
+            padding: 10px 20px;
+        }
+        
+        .stTextInput input:focus {
+            border-color: #007bff;
+            box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
+        }
+        
+        /* Button styling */
+        .stButton button {
+            border-radius: 20px;
+            padding: 10px 25px;
+            background-color: #007bff;
+            color: white;
+            border: none;
+            transition: all 0.3s ease;
+        }
+        
+        .stButton button:hover {
+            background-color: #0056b3;
+            transform: translateY(-1px);
+        }
+        
+        /* Sidebar styling */
+        .css-1d391kg {
+            background-color: white;
+        }
+        
+        /* Progress bar styling */
+        .stProgress > div > div {
+            background-color: #007bff;
+        }
+        
+        /* Custom tab styling */
+        .stTabs [data-baseweb="tab-list"] {
+            gap: 24px;
+        }
+        
+        .stTabs [data-baseweb="tab"] {
+            height: 50px;
+            white-space: pre;
+            background-color: transparent;
+            border-radius: 4px;
+            color: #666;
+            font-size: 16px;
+            font-weight: 500;
+            border: none;
+            padding: 0 16px;
+        }
+        
+        .stTabs [data-baseweb="tab"]:hover {
+            color: #007bff;
+            background-color: #f8f9fa;
+        }
+        
+        .stTabs [aria-selected="true"] {
+            color: #007bff !important;
+            background-color: #e7f1ff !important;
+        }
+        
+        /* Avatar styling */
+        .avatar-container {
+            width: 80px;
+            height: 80px;
+            border-radius: 40px;
+            background-color: #e7f1ff;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 20px auto;
+        }
+        
+        /* Onboarding card styling */
+        .onboarding-card {
+            background-color: white;
+            border-radius: 10px;
+            padding: 30px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+            margin: 20px auto;
+            max-width: 600px;
+        }
+        </style>
+    """, unsafe_allow_html=True)
+
+def show_header():
+    st.markdown("""
+        <div class="header-container">
+            <div>
+                <span class="brand-text">Synaptyx.AI</span>
+                <span class="sub-brand">/ Gyan.AI</span>
+            </div>
+        </div>
+        <div style="height: 60px"></div>
+    """, unsafe_allow_html=True)
+
+def show_onboarding():
+    st.session_state.onboarding_step = st.session_state.get('onboarding_step', 0)
+    
+    steps = [
+        {
+            "title": "Welcome to Gyan.AI",
+            "description": "Your personal AI learning companion. Let's get started on your educational journey.",
+            "emoji": "👋"
+        },
+        {
+            "title": "Choose Your Path",
+            "description": "Select from various learning paths tailored to your interests and goals.",
+            "emoji": "🎯"
+        },
+        {
+            "title": "Meet Your AI Tutor",
+            "description": "I'm here to guide you through your learning journey with personalized support.",
+            "emoji": "🤖"
+        }
+    ]
+    
+    col1, col2, col3 = st.columns([1, 2, 1])
+    with col2:
+        st.markdown('<div class="onboarding-card">', unsafe_allow_html=True)
+        
+        # Progress bar
+        progress = (st.session_state.onboarding_step + 1) / len(steps)
+        st.progress(progress)
+        
+        # Avatar/emoji
+        st.markdown(f"""
+            <div class="avatar-container">
+                <span style="font-size: 40px">{steps[st.session_state.onboarding_step]['emoji']}</span>
+            </div>
+        """, unsafe_allow_html=True)
+        
+        # Content
+        st.markdown(f"<h2 style='text-align: center; margin-bottom: 20px;'>{steps[st.session_state.onboarding_step]['title']}</h2>", unsafe_allow_html=True)
+        st.markdown(f"<p style='text-align: center; color: #666;'>{steps[st.session_state.onboarding_step]['description']}</p>", unsafe_allow_html=True)
+        
+        # Navigation buttons
+        cols = st.columns([1, 1, 1])
+        with cols[0]:
+            if st.session_state.onboarding_step > 0:
+                if st.button("← Back"):
+                    st.session_state.onboarding_step -= 1
+                    st.rerun()
+        
+        with cols[2]:
+            if st.session_state.onboarding_step < len(steps) - 1:
+                if st.button("Next →"):
+                    st.session_state.onboarding_step += 1
+                    st.rerun()
+            else:
+                if st.button("Get Started →"):
+                    st.session_state.onboarding_completed = True
+                    st.rerun()
+        
+        st.markdown('</div>', unsafe_allow_html=True)
+
+def show_main_interface():
+    # Sidebar
+    with st.sidebar:
+        st.markdown("### 👤 Profile")
+        if 'username' not in st.session_state:
+            username = st.text_input("Enter your nickname")
+            if username:
+                st.session_state.username = username
+        else:
+            st.write(f"Welcome, {st.session_state.username}! 👋")
+        
+        st.markdown("### 📊 Progress")
+        completed = len(st.session_state.get('completed_modules', []))
+        st.progress(completed / 8, f"Completed {completed}/8 modules")
+        
+        if st.session_state.get('achievements', []):
+            st.markdown("### 🏆 Achievements")
+            for achievement in st.session_state.get('achievements', []):
+                st.success(f"{achievement['name']} - {achievement['date']}")
+    
+    # Main content
+    tab1, tab2, tab3 = st.tabs(["💬 Chat", "📚 Learn", "💻 Code"])
+    
+    with tab1:
+        st.markdown('<div class="chat-container">', unsafe_allow_html=True)
+        
+        # Display chat messages
+        for message in st.session_state.get('messages', []):
+            if message["role"] == "user":
+                st.markdown(f'<div class="user-message">{message["content"]}</div>', unsafe_allow_html=True)
+            else:
+                st.markdown(f'<div class="assistant-message">{message["content"]}</div>', unsafe_allow_html=True)
+        
+        # Chat input
+        with st.container():
+            if prompt := st.chat_input("Ask anything..."):
+                if 'messages' not in st.session_state:
+                    st.session_state.messages = []
+                
+                # Add user message
+                st.session_state.messages.append({"role": "user", "content": prompt})
+                
+                # Add AI response (placeholder)
+                response = f"I understand you want to learn about {prompt}. Let me help you with that."
+                st.session_state.messages.append({"role": "assistant", "content": response})
+                
+                st.rerun()
+        
+        st.markdown('</div>', unsafe_allow_html=True)
+    
+    with tab2:
+        st.markdown("### Learning Paths")
+        paths = {
+            'python_basics': {
+                'name': 'Python Programming Basics',
+                'modules': [
+                    'Introduction to Python',
+                    'Variables and Data Types',
+                    'Control Flow',
+                    'Functions'
+                ],
+                'description': 'Learn the fundamentals of Python programming.'
+            },
+            'data_structures': {
+                'name': 'Data Structures',
+                'modules': [
+                    'Lists and Tuples',
+                    'Dictionaries',
+                    'Sets',
+                    'Advanced Operations'
+                ],
+                'description': 'Master Python data structures and their operations.'
+            }
+        }
+        
+        for path_id, path_info in paths.items():
+            with st.expander(f"{path_info['name']} 📚"):
+                st.write(path_info['description'])
+                st.write("### Modules:")
+                for module in path_info['modules']:
+                    st.checkbox(module, key=f"module_{module}")
+    
+    with tab3:
+        st.markdown("### Code Playground")
+        code = st.text_area("Write your Python code here", height=200)
+        col1, col2 = st.columns(2)
+        with col1:
+            if st.button("Run Code"):
+                try:
+                    exec(code)
+                except Exception as e:
+                    st.error(f"Error: {str(e)}")
+
+def main():
+    set_page_config()
+    apply_custom_css()
+    show_header()
+    
+    if not st.session_state.get('onboarding_completed', False):
+        show_onboarding()
+    else:
+        show_main_interface()
+
+if __name__ == "__main__":
+    main()