Making more beautiful

app.py

@@ -5,7 +5,7 @@ from chatbot import render_chatbot
 import json
 
 # —————————————————————————————————————————————————————————————
-# 1️⃣ PAGE CONFIG (MUST be the first Streamlit call)
+# 1️⃣ PAGE CONFIG (MUST be first)
 st.set_page_config(
     page_title="Interactive Code Editor with AI Assistant",
     page_icon="💻",
@@ -16,56 +16,94 @@ st.set_page_config(
 # 2️⃣ THEME SELECTOR
 theme = st.sidebar.selectbox("🎨 App Theme", ["Light", "Dark"])
 is_dark = (theme == "Dark")
-
-# 3️⃣ MAP TO ACE EDITOR THEME
 ace_theme = "monokai" if is_dark else "chrome"
 
-# 4️⃣ DEFINE COLORS FOR GLOBAL CSS
-bg_color       = "#1e1e1e" if is_dark else "#ffffff"
-text_color     = "#e5e5e5" if is_dark else "#000000"
-sidebar_bg     = "#252526" if is_dark else "#f0f2f6"
-button_bg      = "#3a3d41" if is_dark else "#e7eaf0"
-chat_bg        = "#2e2e2e" if is_dark else "#f9f9f9"
-border_color   = "#444444" if is_dark else "#dddddd"
-user_bg        = "#3d5a80" if is_dark else "#e3f2fd"
-bot_bg         = "#555555" if is_dark else "#f5f5f5"
-
-# 5️⃣ INJECT GLOBAL CSS
+# 3️⃣ GLOBAL CSS & FONTS
+FONT_URL = "https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap"
 st.markdown(f"""
+    <link href="{FONT_URL}" rel="stylesheet">
     <style>
-    /* Main app background and text */
+    /* --------------- base --------------- */
+    * {{
+        font-family: 'Roboto Mono', monospace !important;
+        transition: background-color .3s, color .3s;
+    }}
     .stApp {{
-        background-color: {bg_color};
-        color: {text_color};
+        background-color: {'#121212' if is_dark else '#f6f8fa'} !important;
+        color: {'#e1e1e1' if is_dark else '#202124'} !important;
+        padding: 1rem 2rem;
+    }}
+    /* --------------- sidebar --------------- */
+    [data-testid="stSidebar"] {{
+        background-color: {'#1e1e1e' if is_dark else '#ffffff'} !important;
+        color: {'#e1e1e1' if is_dark else '#202124'} !important;
+        border-right: 1px solid {'#333' if is_dark else '#ddd'};
+    }}
+    /* --------------- headings --------------- */
+    h1, h2, h3 {{
+        font-weight: 500 !important;
     }}
-    /* Sidebar styling */
-    .css-1d391kg .css-1d391kg {{  /* wrapper class Streamlit uses for sidebar */
-      background-color: {sidebar_bg} !important;
-      color: {text_color};
+    /* --------------- editor & panels --------------- */
+    .ace_editor, .ace_scroller {{
+        border-radius: 0.5rem !important;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
     }}
-    /* Buttons */
-    .stButton>button {{
-        background-color: {button_bg} !important;
-        color: {text_color} !important;
+    textarea, .stTextArea>div>textarea {{
+        background-color: {'#1e1e1e' if is_dark else '#fafafa'} !important;
+        color: {'#e1e1e1' if is_dark else '#202124'} !important;
+        border-radius: 0.5rem !important;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     }}
-    /* Chat container and messages */
+    /* --------------- buttons --------------- */
+    button {{
+        border: none !important;
+        padding: 0.5rem 1rem !important;
+        border-radius: 0.375rem !important;
+        background-color: {'#0a84ff' if is_dark else '#1a73e8'} !important;
+        color: #fff !important;
+        font-weight: 500 !important;
+    }}
+    button:hover {{
+        background-color: {'#0060df' if is_dark else '#1558b0'} !important;
+    }}
+    /* --------------- chat container --------------- */
     .chat-container {{
-        background-color: {chat_bg} !important;
-        color: {text_color} !important;
-        border: 1px solid {border_color} !important;
+        background-color: {'#1e1e1e' if is_dark else '#ffffff'} !important;
+        border: 1px solid {'#333' if is_dark else '#ddd'} !important;
+        border-radius: 0.5rem !important;
+        padding: 1rem !important;
+        max-height: 500px;
+        overflow-y: auto;
+    }}
+    .chat-message {{
+        margin-bottom: 1rem !important;
+        padding: 0.75rem 1rem !important;
+        position: relative;
+        animation: fadeIn 0.3s ease-out both;
     }}
     .user-message {{
-        background-color: {user_bg} !important;
-        color: {text_color} !important;
+        background-color: {'#2a2a2a' if is_dark else '#e8f0fe'} !important;
+        align-self: flex-end;
+        border-top-right-radius: 0;
     }}
     .bot-message {{
-        background-color: {bot_bg} !important;
-        color: {text_color} !important;
+        background-color: {'#333333' if is_dark else '#f1f3f4'} !important;
+        align-self: flex-start;
+        border-top-left-radius: 0;
+    }}
+    /* --------------- animations --------------- */
+    @keyframes fadeIn {{
+        from {{ opacity: 0; transform: translateY(10px); }}
+        to   {{ opacity: 1; transform: translateY(0); }}
     }}
-    /* Text area output box */
-    textarea {{
-        background-color: {chat_bg} !important;
-        color: {text_color} !important;
+    /* --------------- shadows & cards --------------- */
+    .stInfo, .stError, .stSuccess {{
+        box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
+        border-radius: 0.5rem !important;
+    }}
+    hr {{
+        border: none; height: 1px;
+        background-color: {'#333' if is_dark else '#ddd'}; margin: 1rem 0;
     }}
     </style>
 """, unsafe_allow_html=True)
@@ -73,28 +111,25 @@ st.markdown(f"""
 # —————————————————————————————————————————————————————————————
 
 # Initialize session state
-if 'code_output' not in st.session_state:
-    st.session_state.code_output = ""
-if 'error_output' not in st.session_state:
-    st.session_state.error_output = ""
+st.session_state.setdefault('code_output', "")
+st.session_state.setdefault('error_output', "")
 
-# Title and description
+# Title & description
 st.title("💻 Interactive Code Editor")
 st.markdown("""
 Write, execute, and export Python code in this interactive editor.
-The editor supports syntax highlighting and autocompletion.
+The editor supports syntax highlighting, autocompletion, and an AI assistant.
 """)
 
 # Main layout: two columns
-col1, col2 = st.columns([1, 1])
+col1, col2 = st.columns([1, 1], gap="large")
 
 with col1:
-    # Code Editor Section
     st.subheader("Code Editor")
     code = st_ace.st_ace(
         placeholder="Write your Python code here...",
         language="python",
-        theme=ace_theme,        # ← use the selected ACE theme
+        theme=ace_theme,
         keybinding="vscode",
         font_size=14,
         min_lines=25,
@@ -104,55 +139,36 @@ with col1:
         show_print_margin=True,
         auto_update=True
     )
+    if st.button("▶️ Run Code"):
+        out, err, exc = execute_code(code)
+        st.session_state.code_output = out
+        st.session_state.error_output = err or exc
 
-    # Execute button and output capture
-    if st.button("▶️ Run Code", type="primary"):
-        output, error, exception = execute_code(code)
-        st.session_state.code_output = output
-        st.session_state.error_output = error if error else exception
-
-    # Display immediate results
     if st.session_state.code_output:
-        st.text_area("Output", st.session_state.code_output, height=100)
+        st.text_area("Output", st.session_state.code_output, height=120)
     if st.session_state.error_output:
         st.error(st.session_state.error_output)
 
 with col2:
-    # AI Assistant Section
     st.subheader("🤖 Code Assistant")
     render_chatbot(code, st.session_state.code_output, st.session_state.error_output)
 
 # Export options
 st.markdown("---")
 st.subheader("Export Options")
-
-export_data = export_session(
-    code,
-    st.session_state.code_output,
-    st.session_state.error_output
-)
-
-col1_export, col2_export = st.columns([5, 4])
-
-with col1_export:
-    st.download_button(
-        "📄 Export as JSON",
-        data=json.dumps(export_data, indent=2),
-        file_name="code_session.json",
-        mime="application/json"
-    )
-
-with col2_export:
-    st.download_button(
-        "📝 Export as Text",
-        data=f"""# Code:\n{code}\n\n# Output:\n{st.session_state.code_output}\n\n# Errors:\n{st.session_state.error_output}""",
-        file_name="code_session.txt",
-        mime="text/plain"
-    )
+export_data = export_session(code, st.session_state.code_output, st.session_state.error_output)
+c1, c2 = st.columns([5,4])
+with c1:
+    st.download_button("📄 Export JSON", data=json.dumps(export_data, indent=2),
+                       file_name="session.json", mime="application/json")
+with c2:
+    st.download_button("📝 Export Text",
+        data=f"# Code:\n{code}\n\n# Output:\n{st.session_state.code_output}\n\n# Errors:\n{st.session_state.error_output}",
+        file_name="session.txt", mime="text/plain")
 
 # Footer
 st.markdown("""
-<div style='text-align: center'>
-    <p>Built with Streamlit By Vibhav with ❤️</p>
+<div style='text-align:center; margin-top:2rem;'>
+    <small>Built with ❤️ using Streamlit & Groq AI</small>
 </div>
 """, unsafe_allow_html=True)