2024 Dec 30: class and method based code

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

app.py

@@ -1,159 +1,165 @@
 import streamlit as st
 
-st.set_page_config(page_title="Learn Streamlit", layout="wide")
-
-# Custom CSS for better styling
-st.markdown("""
-<style>
-.playground-input { background-color: #f8f9fa; border-radius: 8px; padding: 1rem; }
-.output-section { border: 1px solid #ddd; border-radius: 8px; padding: 1rem; margin-top: 1rem; }
-.snippet-section { background-color: #f0f2f6; border-radius: 8px; padding: 1rem; margin: 1rem 0; }
-.code-example { font-family: monospace; background-color: #f6f6f6; padding: 0.5rem; border-radius: 4px; }
-</style>
-""", unsafe_allow_html=True)
-
-# Main navigation sidebar
-with st.sidebar:
-    st.title("Streamlit Tutorial")
-    selected_topic = st.radio(
-        "Choose a Topic:",
-        ["Basic Text Elements", "Input Widgets", "Layouts & Containers", 
-         "Data Display", "Charts & Plots", "Interactive Components"]
-    )
-
-if selected_topic == "Basic Text Elements":
-    # Create three columns
-    learn_col1, learn_col2, practice_col = st.columns([1, 1, 1])
-    
-    # Code Examples Column
-    with learn_col1:
-        st.markdown("### 📝 Code Examples")
-        elements = [
-            ("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]')")
+class StreamlitTutorial:
+    def __init__(self):
+        self.setup_page_config()
+        self.init_session_state()
+        self.setup_styles()
+
+    def setup_page_config(self):
+        st.set_page_config(page_title="Learn Streamlit", layout="wide")
+
+    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-box { background-color: #f6f6f6; border-radius: 5px; padding: 1rem; }
+        .output-box { border: 1px solid #ddd; border-radius: 5px; padding: 1rem; }
+        .snippet-section { background-color: #f0f2f6; padding: 1rem; }
+        </style>
+        """, unsafe_allow_html=True)
+
+    def render_sidebar(self):
+        with st.sidebar:
+            st.title("Streamlit Tutorial")
+            return st.radio(
+                "Choose a Topic:",
+                ["Basic Text Elements", "Input Widgets", "Layouts & Containers", 
+                 "Data Display", "Charts & Plots", "Interactive Components"]
+            )
+
+    def get_text_elements(self):
+        return [
+            ("Title", "st.title('Main Title')", lambda: st.title('Main Title')),
+            ("Header", "st.header('Header')", lambda: st.header('Header')),
+            ("Subheader", "st.subheader('Subheader')", lambda: st.subheader('Subheader')),
+            ("Normal text", "st.write('Normal text')", lambda: st.write('Normal text')),
+            ("Markdown text", "st.markdown('**Bold** and *italic*')", 
+             lambda: st.markdown('**Bold** and *italic*')),
+            ("Colored text", "st.markdown(':blue[Blue text]')", 
+             lambda: st.markdown(':blue[Blue text]'))
         ]
-        
-        for title, code in elements:
+
+    def render_code_examples(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)
+                    with st.container(border=True):
+                        st.markdown("Live output:")
+                        eval(code)
+
+    def render_live_output(self, col):
+        with col:
+            st.markdown("### 🎯 Live Output")
             with st.container(border=True):
-                st.markdown(f"**{title}**")
-                st.code(code)
-    
-    # Live Output Column
-    with learn_col2:
-        st.markdown("### 🎯 Live Output")
-        with st.container(border=True):
-            st.title('Main Title')
-            st.header('Header')
-            st.subheader('Subheader')
-            st.write('Normal text')
-            st.markdown('**Bold** and *italic*')
-            st.markdown(':blue[Blue text]')
-
-    # Enhanced Playground Column
-    with practice_col:
-        st.markdown("### 💻 Practice Playground")
-        
-        # Template Selection
-        templates = {
-            "Basic Text": """st.title('My App')
-st.write('Welcome to my app!')""",
-            "Formatted Text": """st.markdown('# Big Title')
-st.markdown('**Bold** and *italic* text')
-st.markdown(':blue[Colored] :red[text]')""",
-            "Multiple Elements": """st.title('My Dashboard')
-st.header('Section 1')
-st.write('Some content')
-st.subheader('Subsection')
-st.markdown('- Bullet point 1\\n- Bullet point 2')""",
-            "Empty": ""
+                for _, _, func in self.get_text_elements():
+                    func()
+
+    def get_snippets(self):
+        return {
+            "Title": "st.title('My Title')",
+            "Header": "st.header('My Header')",
+            "Subheader": "st.subheader('My Subheader')",
+            "Text": "st.write('Normal text')",
+            "Bold Markdown": "st.markdown('**Bold text**')",
+            "Italic Markdown": "st.markdown('*Italic text*')",
+            "Colored Text": "st.markdown(':blue[Blue text]')",
+            "Bullet Points": "st.markdown('- Point 1\\n- Point 2')",
+            "Numbered List": "st.markdown('1. First\\n2. Second')",
+            "Divider": "st.markdown('---')"
         }
-        
-        template_choice = st.selectbox("Start with a template:", list(templates.keys()))
-        
-        # Code input area with template
-        if 'code_input' not in st.session_state or template_choice == "Empty":
-            st.session_state.code_input = templates[template_choice]
-        
-        code_input = st.text_area(
-            "Try Streamlit commands:",
-            value=st.session_state.code_input,
-            height=200,
-            key="playground_code"
-        )
-
-        # Quick Snippets Section
-        st.markdown("#### 📚 Quick Snippets")
-        
-        # Two columns for snippets
-        snip_col1, snip_col2 = st.columns([3, 1])
-        
-        with snip_col1:
-            snippets = {
-                "Title": "st.title('My Title')",
-                "Header": "st.header('My Header')",
-                "Subheader": "st.subheader('My Subheader')",
-                "Text": "st.write('Normal text')",
-                "Bold Markdown": "st.markdown('**Bold text**')",
-                "Italic Markdown": "st.markdown('*Italic text*')",
-                "Colored Text": "st.markdown(':blue[Blue text]')",
-                "Bullet Points": "st.markdown('- Point 1\\n- Point 2')",
-                "Numbered List": "st.markdown('1. First\\n2. Second')",
-                "Divider": "st.markdown('---')"
-            }
-            snippet = st.selectbox("Choose snippet:", list(snippets.keys()))
-        
-        with snip_col2:
-            if st.button("Add", key="add_snippet"):
-                if code_input:
-                    code_input += f"\n{snippets[snippet]}"
-                else:
-                    code_input = snippets[snippet]
-                st.session_state.code_input = code_input
-
-        # Control buttons
-        col1, col2, col3 = st.columns([1, 1, 1])
-        with col1:
-            if st.button("▶️ Run"):
-                st.session_state.code_input = code_input
-        with col2:
-            if st.button("🔄 Reset"):
+
+    def render_playground(self, col):
+        with col:
+            st.markdown("### 💻 Practice Playground")
+            
+            # Code input
+            code_input = st.text_area(
+                "Try Streamlit commands:",
+                height=200,
+                key="playground_input",
+                value=st.session_state.code_input
+            )
+
+            # Quick Snippets
+            st.markdown("#### 📚 Quick Snippets")
+            snip_col1, snip_col2 = st.columns([3, 1])
+            
+            with snip_col1:
+                snippet = st.selectbox("Choose snippet:", 
+                                     list(self.get_snippets().keys()))
+            
+            with snip_col2:
+                if st.button("Add"):
+                    if code_input:
+                        code_input += f"\n{self.get_snippets()[snippet]}"
+                    else:
+                        code_input = self.get_snippets()[snippet]
+                    st.session_state.code_input = code_input
+
+            # Control buttons
+            btn_col1, btn_col2, btn_col3 = st.columns(3)
+            with btn_col1:
+                run = st.button("▶️ Run")
+            with btn_col2:
+                reset = st.button("🔄 Reset")
+            with btn_col3:
+                copy = st.button("💾 Copy")
+
+            # Output
+            st.markdown("#### 🎨 Live Output")
+            with st.container(border=True):
+                if code_input and run:
+                    try:
+                        exec(code_input)
+                    except Exception as e:
+                        st.error(f"Error: {str(e)}")
+
+            if reset:
                 st.session_state.code_input = ""
-                code_input = ""
-        with col3:
-            if st.button("💾 Copy"):
+                st.experimental_rerun()
+
+            if copy:
                 st.code(code_input)
 
-        # Output section
-        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)}")
-
-        # Interactive Help
-        with st.expander("💡 Tips & Help"):
-            st.markdown("""
-            #### Quick Tips:
-            1. Start with a template or add snippets
-            2. Mix different text elements
-            3. Use markdown for formatting:
-                - `**bold**` for **bold**
-                - `*italic*` for *italic*
-                - `:blue[text]` for colored text
-            4. Press 'Run' to see changes
-            5. 'Reset' clears the playground
-            """)
-
-        # Code Preview
-        with st.expander("👀 Preview Your Code"):
-            st.code(code_input)
-
-# Footer
-st.markdown("---")
-st.caption("Learn more at streamlit.io/docs")
+            # Help section
+            with st.expander("💡 Tips & Help"):
+                self.render_tips()
+
+    def render_tips(self):
+        st.markdown("""
+        #### Quick Tips:
+        1. Try different text elements
+        2. Use markdown formatting:
+            - `**bold**` for **bold**
+            - `*italic*` for *italic*
+            - `:blue[text]` for colored text
+        3. Combine multiple elements
+        4. Watch live output as you type
+        """)
+
+    def render_footer(self):
+        st.markdown("---")
+        st.caption("Learn more at streamlit.io/docs")
+
+    def run(self):
+        selected_topic = self.render_sidebar()
+
+        if selected_topic == "Basic Text Elements":
+            col1, col2, col3 = st.columns([1, 1, 1])
+            self.render_code_examples(col1)
+            self.render_live_output(col2)
+            self.render_playground(col3)
+        
+        self.render_footer()
+
+# Run the app
+if __name__ == "__main__":
+    app = StreamlitTutorial()
+    app.run()