2024 dec 20 new code

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

app.py

@@ -3,144 +3,174 @@ 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-block { margin-bottom: 1rem; }
-        .live-output { 
+        .code-example { 
+            margin-bottom: 1.5rem;
+        }
+        .live-output {
             border: 1px solid #ddd;
             border-radius: 4px;
             padding: 1rem;
-            margin-bottom: 2rem;
+            margin: 0.5rem 0 1.5rem 0;
+        }
+        .section-title {
+            margin-bottom: 1rem;
+            padding: 0.5rem 0;
         }
-        .stButton > button {
-            width: 100%;
+        .button-container {
+            display: flex;
+            justify-content: space-between;
+            gap: 1rem;
         }
         </style>
         """, unsafe_allow_html=True)
 
-    def render_code_examples(self, col):
+    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")
-            
-            # 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*")
+            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_live_output(self, col):
+    def render_input_elements(self, col):
         with col:
-            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]")
-
-    def render_playground(self, 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")
             
-            # Code input
+            # 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 in a container
+            # Quick Snippets with better alignment
             with st.container(border=True):
                 st.markdown("#### 📚 Quick Snippets")
-                cols = st.columns([3, 1])
+                
+                # Align selectbox and button horizontally
+                cols = st.columns([4, 1])
                 with cols[0]:
-                    snippet = st.selectbox(
+                    selected_snippet = st.selectbox(
                         "Choose snippet:",
-                        ["Title", "Header", "Subheader", "Text", "Markdown"]
+                        list(snippets.keys()),
+                        label_visibility="collapsed"
                     )
                 with cols[1]:
-                    st.markdown("#")  # Spacing
-                    add_button = st.button("Add")
+                    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
-            button_cols = st.columns(3)
-            with button_cols[0]:
-                run = st.button("▶️ Run")
-            with button_cols[1]:
-                reset = st.button("🔄 Reset")
-            with button_cols[2]:
-                copy = st.button("💾 Copy")
-
-            # Live output with border
+            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 and run:
+                if code_input:
                     try:
                         exec(code_input)
                     except Exception as e:
                         st.error(f"Error: {str(e)}")
 
-            # Tips in expandable section
+            # Tips
             with st.expander("💡 Tips & Help"):
-                st.markdown("""
+                st.markdown(self.get_topic_tips(st.session_state.current_topic))
+
+    def get_topic_tips(self, topic):
+        tips = {
+            "Basic Text Elements": """
                 **Quick Tips:**
-                - Try different text elements
                 - Use markdown for formatting
-                - Mix and match elements
-                - Watch live output as you type
-                """)
+                - 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!")
 
     def run(self):
         with st.sidebar:
             st.title("Streamlit Tutorial")
-            selected_topic = st.radio(
+            st.session_state.current_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":
+        # 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_code_examples(cols[0])
-            self.render_live_output(cols[1])
-            self.render_playground(cols[2])
+            self.render_input_elements(cols[0])
+            self.render_playground(cols[2], dict(self.get_input_elements()))
 
 if __name__ == "__main__":
     app = StreamlitTutorial()