2024 Dec 30: New start

Signed-off-by: Milind Kamat <36366961+milindkamat0507@users.noreply.github.com>

app.py

@@ -1,156 +1,102 @@
-import streamlit as st
-
-class StreamlitTutorial:
-    def __init__(self):
-        st.set_page_config(page_title="Learn Streamlit", layout="wide")
-        self.init_session_state()
-        self.setup_styles()
-
-    def init_session_state(self):
-        if 'code_input' not in st.session_state:
-            st.session_state.code_input = ""
-
-    def setup_styles(self):
-        st.markdown("""
-        <style>
-        .code-example { 
-            margin-bottom: 1.5rem;
-        }
-        .live-output {
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            padding: 1rem;
-            margin: 0.5rem 0 1.5rem 0;
-        }
-        .section-title {
-            margin-bottom: 1rem;
-            padding: 0.5rem 0;
-        }
-        .button-container {
-            display: flex;
-            justify-content: space-between;
-            gap: 1rem;
-        }
-        </style>
-        """, unsafe_allow_html=True)
-
-    def get_text_elements(self):
-        return [
-            ("Title", "st.title('Main Title')"),
-            ("Header", "st.header('Header')"),
-            ("Subheader", "st.subheader('Subheader')"),
-            ("Normal text", "st.write('Normal text')"),
-            ("Markdown text", "st.markdown('**Bold** and *italic*')"),
-            ("Colored text", "st.markdown(':blue[Blue text]')")
-        ]
-
-    def get_input_elements(self):
-        return [
-            ("Text Input", "name = st.text_input('Enter your name')"),
-            ("Number Input", "num = st.number_input('Enter a number', min_value=0, max_value=100)"),
-            ("Slider", "value = st.slider('Select value', 0, 100, 50)"),
-            ("Selectbox", "option = st.selectbox('Choose option', ['A', 'B', 'C'])"),
-            ("Checkbox", "checked = st.checkbox('Enable feature')")
-        ]
-
-    def render_text_elements(self, col):
-        with col:
-            st.markdown("### 📝 Code Examples")
-            for title, code in self.get_text_elements():
-                with st.container(border=True):
-                    st.markdown(f"**{title}**")
-                    st.code(code)
-                    st.markdown("Live output:")
-                    exec(code)
-
-    def render_input_elements(self, col):
+def render_help_section(self, col):
         with col:
-            st.markdown("### 📝 Code Examples")
-            for title, code in self.get_input_elements():
-                with st.container(border=True):
-                    st.markdown(f"**{title}**")
-                    st.code(code)
-                    st.markdown("Live output:")
-                    with st.container(border=True):
-                        exec(code)
-
-    def render_playground(self, col, snippets):
-        with col:
-            st.markdown("### 💻 Practice Playground")
+            st.markdown("### 📚 Learning Guide")
             
-            # Code input area
-            code_input = st.text_area(
-                "Try Streamlit commands:",
-                value=st.session_state.code_input,
-                height=200,
-                placeholder="Example:\nst.title('My Title')"
-            )
-
-            # Quick Snippets with better alignment
-            with st.container(border=True):
-                st.markdown("#### 📚 Quick Snippets")
+            # Different help topics in expandable sections
+            with st.expander("🎯 Basic Concepts", expanded=True):
+                st.markdown("""
+                **What are Text Elements?**
+                - Basic building blocks for displaying text
+                - Range from titles to formatted text
+                - Support markdown formatting
+                """)
                 
-                # Align selectbox and button horizontally
-                cols = st.columns([4, 1])
-                with cols[0]:
-                    selected_snippet = st.selectbox(
-                        "Choose snippet:",
-                        list(snippets.keys()),
-                        label_visibility="collapsed"
-                    )
-                with cols[1]:
-                    if st.button("Add", use_container_width=True):
-                        new_code = snippets[selected_snippet]
-                        if code_input:
-                            code_input += f"\n{new_code}"
-                        else:
-                            code_input = new_code
-                        st.session_state.code_input = code_input
-
-            # Control buttons in a row
-            col1, col2, col3 = st.columns(3)
-            with col1:
-                if st.button("▶️ Run", use_container_width=True):
-                    st.session_state.code_input = code_input
-            with col2:
-                if st.button("🔄 Reset", use_container_width=True):
-                    st.session_state.code_input = ""
-                    code_input = ""
-            with col3:
-                if st.button("💾 Copy", use_container_width=True):
-                    st.code(code_input)
-
-            # Live output
-            st.markdown("#### 🎨 Live Output")
-            with st.container(border=True):
-                if code_input:
-                    try:
-                        exec(code_input)
-                    except Exception as e:
-                        st.error(f"Error: {str(e)}")
-
-            # Tips
-            with st.expander("💡 Tips & Help"):
-                st.markdown(self.get_topic_tips(st.session_state.current_topic))
-
-    def get_topic_tips(self, topic):
-        tips = {
-            "Basic Text Elements": """
-                **Quick Tips:**
-                - Use markdown for formatting
-                - Try different header levels
-                - Combine text elements
-                - Use colored text with :color[text]
-            """,
-            "Input Widgets": """
-                **Quick Tips:**
-                - Use unique keys for widgets
-                - Store widget values in variables
-                - Add validation for inputs
-                - Combine widgets for complex inputs
-            """
-        }
-        return tips.get(topic, "Tips coming soon!")
+            with st.expander("💡 Best Practices"):
+                st.markdown("""
+                **Writing Tips:**
+                1. Use appropriate heading levels
+                2. Keep text concise and clear
+                3. Use formatting for emphasis
+                4. Add visual hierarchy with headers
+                
+                **Code Structure:**
+                ```python
+                st.title('Main Title')
+                st.header('Section Header')
+                st.subheader('Sub-section')
+                st.write('Regular text')
+                ```
+                """)
+            
+            with st.expander("🔍 Examples & Use Cases"):
+                st.markdown("""
+                **Common Patterns:**
+                
+                1. Page Structure
+                ```python
+                st.title('Dashboard')
+                st.header('Sales Data')
+                st.subheader('Monthly Trends')
+                ```
+                
+                2. Formatted Text
+                ```python
+                st.markdown('**Bold** and *italic*')
+                st.markdown(':blue[Colored text]')
+                ```
+                
+                3. Mixed Elements
+                ```python
+                st.title('Report')
+                st.write('Regular text')
+                st.markdown('- Bullet point')
+                ```
+                """)
+            
+            with st.expander("⚠️ Common Mistakes"):
+                st.markdown("""
+                1. Skipping header levels
+                2. Overusing formatting
+                3. Inconsistent styling
+                4. Missing hierarchy
+                
+                **How to Avoid:**
+                - Plan your page structure
+                - Use consistent formatting
+                - Test different screen sizes
+                - Keep it simple
+                """)
+            
+            with st.expander("🚀 Advanced Tips"):
+                st.markdown("""
+                **Advanced Formatting:**
+                ```python
+                # Custom HTML
+                st.markdown('''
+                    <span style='color:blue'>
+                        Custom styled text
+                    </span>
+                ''', unsafe_allow_html=True)
+                
+                # Complex Markdown
+                st.markdown('''
+                    # Title
+                    ## Subtitle
+                    * Point 1
+                        * Subpoint
+                    > Quote
+                ''')
+                ```
+                
+                **Layout Combinations:**
+                ```python
+                col1, col2 = st.columns(2)
+                with col1:
+                    st.header('Column 1')
+                with col2:
+                    st.header('Column 2')
+                ```
+                """)
 
     def run(self):
         with st.sidebar:
@@ -161,17 +107,8 @@ class StreamlitTutorial:
                  "Data Display", "Charts & Plots", "Interactive Components"]
             )
 
-        # Render appropriate content based on selected topic
         if st.session_state.current_topic == "Basic Text Elements":
             cols = st.columns([1.2, 1, 1])
             self.render_text_elements(cols[0])
-            self.render_playground(cols[2], dict(self.get_text_elements()))
-
-        elif st.session_state.current_topic == "Input Widgets":
-            cols = st.columns([1.2, 1, 1])
-            self.render_input_elements(cols[0])
-            self.render_playground(cols[2], dict(self.get_input_elements()))
-
-if __name__ == "__main__":
-    app = StreamlitTutorial()
-    app.run()
+            self.render_help_section(cols[1])  # New help section in middle
+            self.render_playground(cols[2], dict(self.get_text_elements()))