Spaces:
Sleeping
Sleeping
| 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 = "" | |
| st.session_state.current_topic = "Basic Text Elements" | |
| 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:") | |
| with st.container(border=True): | |
| exec(code) | |
| def render_input_elements(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_help_section(self, col): | |
| with col: | |
| st.markdown("### 📚 Learning Guide") | |
| 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 | |
| """) | |
| 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 render_playground(self, col, snippets): | |
| with col: | |
| st.markdown("### 💻 Practice Playground") | |
| # 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") | |
| 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) | |
| 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!") | |
| def run(self): | |
| with st.sidebar: | |
| st.title("Streamlit Tutorial") | |
| st.session_state.current_topic = st.radio( | |
| "Choose a Topic:", | |
| ["Basic Text Elements", "Input Widgets", "Layouts & Containers", | |
| "Data Display", "Charts & Plots", "Interactive Components"] | |
| ) | |
| if st.session_state.current_topic == "Basic Text Elements": | |
| cols = st.columns([1.2, 1, 1]) | |
| self.render_text_elements(cols[0]) | |
| self.render_help_section(cols[1]) | |
| 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_help_section(cols[1]) | |
| self.render_playground(cols[2], dict(self.get_input_elements())) | |
| if __name__ == "__main__": | |
| app = StreamlitTutorial() | |
| app.run() |