2024 Dec 30 : improved playground

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

app.py

@@ -18,6 +18,8 @@ class StreamlitTutorial:
         self.init_session_state()
         self.setup_styles()
 
+    
+    
     def init_session_state(self) -> None:
         """
         Initializes session state variables for persistent data storage.
@@ -31,6 +33,8 @@ class StreamlitTutorial:
             st.session_state.code_input = ""
             st.session_state.current_topic = "Basic Text Elements"
 
+    
+    
     def setup_styles(self) -> None:
         """
         Configures custom CSS styles for the application.
@@ -63,6 +67,9 @@ class StreamlitTutorial:
 
      # Add these helper methods in the StreamlitTutorial class
     
+    
+    
+    
     def _get_basic_concepts_content(self) -> str:
         """
         Provides content for Basic Concepts section.
@@ -84,6 +91,11 @@ class StreamlitTutorial:
         4. Colored text
         """
 
+   
+   
+   
+   
+   
     def _get_best_practices_content(self) -> str:
         """
         Provides content for Best Practices section.
@@ -108,6 +120,9 @@ class StreamlitTutorial:
         ```
         """
 
+    
+    
+    
     def _get_examples_content(self) -> str:
         """
         Provides content for Examples section.
@@ -140,6 +155,11 @@ class StreamlitTutorial:
         ```
         """
 
+    
+    
+    
+    
+    
     def _get_common_mistakes_content(self) -> str:
         """
         Provides content for Common Mistakes section.
@@ -161,6 +181,11 @@ class StreamlitTutorial:
         - Keep it simple
         """
 
+    
+    
+    
+    
+    
     def _get_advanced_tips_content(self) -> str:
         """
         Provides content for Advanced Tips section.
@@ -201,6 +226,9 @@ class StreamlitTutorial:
     
     
     
+    
+    
+    
     def get_text_elements(self) -> List[Tuple[str, str]]:
         """
         Provides collection of text element examples with corresponding code.
@@ -219,6 +247,12 @@ class StreamlitTutorial:
             ("Colored text", "st.markdown(':blue[Blue text]')")
         ]
 
+    
+    
+    
+    
+    
+    
     def get_input_elements(self) -> List[Tuple[str, str]]:
         """
         Provides collection of input widget examples with corresponding code.
@@ -236,6 +270,12 @@ class StreamlitTutorial:
             ("Checkbox", "checked = st.checkbox('Enable feature')")
         ]
 
+    
+    
+    
+    
+    
+    
     def render_text_elements(self, col: st.delta_generator.DeltaGenerator) -> None:
         """
         Renders text element examples in the specified column.
@@ -258,6 +298,10 @@ class StreamlitTutorial:
                     with st.container(border=True):
                         exec(code)
 
+    
+    
+    
+    
     def render_input_elements(self, col: st.delta_generator.DeltaGenerator) -> None:
         """
         Renders input widget examples in the specified column.
@@ -280,6 +324,10 @@ class StreamlitTutorial:
                     with st.container(border=True):
                         exec(code)
 
+    
+    
+    
+    
     def render_help_section(self, col: st.delta_generator.DeltaGenerator) -> None:
         """
         Renders comprehensive help content in the specified column.
@@ -315,75 +363,89 @@ class StreamlitTutorial:
             with st.expander("🚀 Advanced Tips"):
                 st.markdown(self._get_advanced_tips_content())
 
-    def render_playground(self, col: st.delta_generator.DeltaGenerator, 
-                         snippets: Dict[str, str]) -> None:
+    
+    
+    
+    
+    
+    def render_playground(self, col: st.delta_generator.DeltaGenerator, snippets: Dict[str, str]) -> None:
         """
-        Renders interactive coding playground in specified column.
-        Provides code editor, snippets, and live output area.
-        Creates environment for hands-on practice.
+        Renders interactive coding playground with live execution.
+        Manages code input, snippets, and real-time output display.
 
         Arguments:
-            col: Streamlit column object for content rendering
-            snippets: Dictionary of code snippets for quick insertion
-
-        Returns:
-            None
+            col: Streamlit column object for rendering
+            snippets: Dictionary of available code snippets
         """
         with col:
             st.markdown("### 💻 Practice Playground")
             
-            # Code Input Area
+            # Code input area with session state
             code_input = st.text_area(
                 "Try Streamlit commands:",
-                value=st.session_state.code_input,
+                key="playground_input",
                 height=200,
+                value=st.session_state.get('code_input', ''),
                 placeholder="Example:\nst.title('My Title')"
             )
 
-            # Quick Snippets Section
-            with st.container(border=True):
-                st.markdown("#### 📚 Quick Snippets")
-                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
-            col1, col2, col3 = st.columns(3)
+            # Quick Snippets
+            st.markdown("#### Quick Snippets")
+            col1, col2 = st.columns([3, 1])
             with col1:
-                if st.button("▶️ Run", use_container_width=True):
-                    st.session_state.code_input = code_input
+                selected_snippet = st.selectbox(
+                    "Choose snippet:",
+                    list(snippets.keys()),
+                    key="snippet_select"
+                )
             with col2:
-                if st.button("🔄 Reset", use_container_width=True):
+                if st.button("Add", key="add_snippet"):
+                    new_code = snippets[selected_snippet]
+                    if 'code_input' not in st.session_state:
+                        st.session_state.code_input = new_code
+                    else:
+                        st.session_state.code_input = st.session_state.code_input + "\n" + new_code
+                    st.experimental_rerun()
+
+            # Control buttons
+            run_col, reset_col, copy_col = st.columns(3)
+            
+            with run_col:
+                run = st.button("▶️ Run", key="run_button")
+            with reset_col:
+                if st.button("🔄 Reset", key="reset_button"):
                     st.session_state.code_input = ""
-                    code_input = ""
-            with col3:
-                if st.button("💾 Copy", use_container_width=True):
+                    st.experimental_rerun()
+            with copy_col:
+                if st.button("💾 Copy", key="copy_button"):
                     st.code(code_input)
 
-            # Live Output Section
+            # Live output section
             st.markdown("#### 🎨 Live Output")
             with st.container(border=True):
-                if code_input:
+                if run and code_input:
                     try:
-                        exec(code_input)
+                        # Create a new local namespace for execution
+                        local_dict = {}
+                        # Execute in the local namespace
+                        exec(code_input, globals(), local_dict)
                     except Exception as e:
                         st.error(f"Error: {str(e)}")
 
-            # Tips Section
+            # Tips & Help
             with st.expander("💡 Tips & Help"):
-                st.markdown(self.get_topic_tips(st.session_state.current_topic))
+                st.markdown("""
+                **Quick Tips:**
+                - Type or paste Streamlit commands
+                - Use snippets for quick start
+                - Click Run to see results
+                - Reset to clear all code
+                """)
+        
+    
+    
+    
+    
 
     def get_topic_tips(self, topic: str) -> str:
         """
@@ -415,6 +477,9 @@ class StreamlitTutorial:
         }
         return tips.get(topic, "Tips coming soon!")
 
+    
+    
+    
     def run(self) -> None:
         """
         Main execution method for the Streamlit Tutorial application.
@@ -444,6 +509,8 @@ class StreamlitTutorial:
             self.render_help_section(cols[1])
             self.render_playground(cols[2], dict(self.get_input_elements()))
 
+
+
 if __name__ == "__main__":
     app = StreamlitTutorial()
     app.run()