2024 Dec 30 : new updates

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

app.py

@@ -2,78 +2,78 @@ import streamlit as st
 
 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 = ""
+        self.setup_styles()
 
     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; }
+        .code-block { margin-bottom: 1rem; }
+        .live-output { 
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            padding: 1rem;
+            margin-bottom: 2rem;
+        }
+        .stButton > button {
+            width: 100%;
+        }
         </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]'))
-        ]
-
     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)
+            
+            # Title example
+            st.markdown("**Title**")
+            st.code("st.title('Main Title')")
+            st.markdown("Live output:")
+            with st.container(border=True):
+                st.title("Main Title")
+            st.markdown("---")
+            
+            # Header example
+            st.markdown("**Header**")
+            st.code("st.header('Header')")
+            st.markdown("Live output:")
+            with st.container(border=True):
+                st.header("Header")
+            st.markdown("---")
+            
+            # Subheader example
+            st.markdown("**Subheader**")
+            st.code("st.subheader('Subheader')")
+            st.markdown("Live output:")
+            with st.container(border=True):
+                st.subheader("Subheader")
+            st.markdown("---")
+            
+            # Normal text example
+            st.markdown("**Normal text**")
+            st.code("st.write('Normal text')")
+            st.markdown("Live output:")
+            with st.container(border=True):
+                st.write("Normal text")
+            st.markdown("---")
+            
+            # Markdown text example
+            st.markdown("**Markdown text**")
+            st.code("st.markdown('**Bold** and *italic*')")
+            st.markdown("Live output:")
+            with st.container(border=True):
+                st.markdown("**Bold** and *italic*")
 
     def render_live_output(self, col):
         with col:
             st.markdown("### 🎯 Live Output")
             with st.container(border=True):
-                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('---')"
-        }
+                st.title("Main Title")
+                st.header("Header")
+                st.subheader("Subheader")
+                st.write("Normal text")
+                st.markdown("**Bold** and *italic*")
+                st.markdown(":blue[Blue text]")
 
     def render_playground(self, col):
         with col:
@@ -83,36 +83,32 @@ class StreamlitTutorial:
             code_input = st.text_area(
                 "Try Streamlit commands:",
                 height=200,
-                key="playground_input",
-                value=st.session_state.code_input
+                placeholder="Example:\nst.title('My Title')"
             )
 
-            # 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:
+            # Quick Snippets in a container
+            with st.container(border=True):
+                st.markdown("#### 📚 Quick Snippets")
+                cols = st.columns([3, 1])
+                with cols[0]:
+                    snippet = st.selectbox(
+                        "Choose snippet:",
+                        ["Title", "Header", "Subheader", "Text", "Markdown"]
+                    )
+                with cols[1]:
+                    st.markdown("#")  # Spacing
+                    add_button = st.button("Add")
+
+            # Control buttons in a row
+            button_cols = st.columns(3)
+            with button_cols[0]:
                 run = st.button("▶️ Run")
-            with btn_col2:
+            with button_cols[1]:
                 reset = st.button("🔄 Reset")
-            with btn_col3:
+            with button_cols[2]:
                 copy = st.button("💾 Copy")
 
-            # Output
+            # Live output with border
             st.markdown("#### 🎨 Live Output")
             with st.container(border=True):
                 if code_input and run:
@@ -121,45 +117,31 @@ class StreamlitTutorial:
                     except Exception as e:
                         st.error(f"Error: {str(e)}")
 
-            if reset:
-                st.session_state.code_input = ""
-                st.experimental_rerun()
-
-            if copy:
-                st.code(code_input)
-
-            # Help section
+            # Tips in expandable 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")
+                st.markdown("""
+                **Quick Tips:**
+                - Try different text elements
+                - Use markdown for formatting
+                - Mix and match elements
+                - Watch live output as you type
+                """)
 
     def run(self):
-        selected_topic = self.render_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":
-            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()
+            cols = st.columns([1.2, 1, 1])
+            self.render_code_examples(cols[0])
+            self.render_live_output(cols[1])
+            self.render_playground(cols[2])
 
-# Run the app
 if __name__ == "__main__":
     app = StreamlitTutorial()
     app.run()