Code Editor for app.py

import streamlit as st
import ast
from code_editor import code_editor

st.set_page_config(layout="wide")

# Title for the app
st.title("Streamlit Code Playground")

# Create two columns
col1, col2 = st.columns(2)

# Default sample code
default_code = '''import streamlit as st

st.title("Hello Streamlit!")
st.write("This is a sample app.")

# Add a slider
value = st.slider("Select a value", 0, 100, 50)
st.write(f"Selected value: {value}")

# Add a checkbox
if st.checkbox("Show data"):
    st.write("Here's some data!")
'''

# Custom buttons for code editor
custom_buttons = [
    {
        "name": "Run",
        "feather": "Play",
        "primary": True,
        "hasText": True,
        "showWithIcon": True,
        "commands": ["submit"],
        "style": {"bottom": "0.44rem", "right": "0.4rem"},
    }
]

# Code editor options
editor_options = {
    "mode": "python",
    "theme": "monokai",
    "lineNumbers": True,
    "smartIndent": True,
    "indentUnit": 4,
    "lineWrapping": True,
    "autoCloseBrackets": True,
    "matchBrackets": True,
    "lint": True
}

with col1:
    st.header("Code Editor")
    response = code_editor(default_code, 
                          lang="python",
                          height=600,
                          buttons=custom_buttons,
                          options=editor_options)

with col2:
    st.header("Preview")
    if response['type'] == 'submit':
        try:
            # Create a new namespace
            namespace = {}
            # Execute the code
            exec(response['text'], namespace)
        except Exception as e:
            st.error(f"Error in code execution: {str(e)}")
    else:
        st.info("Click 'Run' to see the preview of your code.")