Update app.py

app.py

@@ -27,165 +27,179 @@ def generate_response(user_input):
         return f"An error occurred: {e}"
 
 # Streamlit UI setup
-st.set_page_config(page_title="CodeCraft AI", page_icon="🧠", layout="wide")
+st.set_page_config(page_title="CodeGenius", page_icon="🚀", layout="wide")
 
 st.markdown("""
 <style>
-    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&family=Fira+Code:wght@400;500&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=JetBrains+Mono:wght@400;500&display=swap');
     
     body {
-        font-family: 'Roboto', sans-serif;
-        background-color: #1e1e1e;
-        color: #e0e0e0;
+        font-family: 'Inter', sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
     }
     .stApp {
-        max-width: 1000px;
+        max-width: 900px;
         margin: 0 auto;
         padding: 2rem;
     }
     .main-container {
-        background: #2d2d2d;
-        border-radius: 15px;
+        background: #ffffff;
+        border-radius: 12px;
         padding: 2rem;
-        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
     }
     h1 {
         font-size: 2.5rem;
-        font-weight: 700;
-        color: #61dafb;
+        font-weight: 600;
+        color: #212529;
         text-align: center;
-        margin-bottom: 1rem;
-        text-shadow: 0 0 10px rgba(97, 218, 251, 0.5);
+        margin-bottom: 0.5rem;
     }
     .subtitle {
-        font-size: 1.1rem;
+        font-size: 1rem;
         text-align: center;
-        color: #bbb;
+        color: #6c757d;
         margin-bottom: 2rem;
     }
     .stTextArea textarea {
-        background-color: #3a3a3a;
-        color: #e0e0e0;
-        border: 1px solid #4a4a4a;
-        border-radius: 8px;
+        background-color: #f1f3f5;
+        color: #495057;
+        border: 1px solid #ced4da;
+        border-radius: 6px;
         font-size: 1rem;
-        font-family: 'Fira Code', monospace;
-        padding: 1rem;
-        transition: all 0.3s ease;
+        font-family: 'JetBrains Mono', monospace;
+        padding: 0.75rem;
+        transition: all 0.2s ease;
     }
     .stTextArea textarea:focus {
-        border-color: #61dafb;
-        box-shadow: 0 0 0 2px rgba(97, 218, 251, 0.3);
+        border-color: #4dabf7;
+        box-shadow: 0 0 0 2px rgba(77, 171, 247, 0.2);
     }
     .stButton button {
-        background-color: #61dafb;
-        color: #1e1e1e;
+        background-color: #4dabf7;
+        color: #ffffff;
         border: none;
-        border-radius: 8px;
+        border-radius: 6px;
         font-size: 1rem;
         font-weight: 500;
-        padding: 0.75rem 1.5rem;
-        transition: all 0.3s ease;
-        width: 100%;
+        padding: 0.6rem 1.2rem;
+        transition: all 0.2s ease;
     }
     .stButton button:hover {
-        background-color: #4fa8d5;
-        transform: translateY(-2px);
-        box-shadow: 0 4px 8px rgba(97, 218, 251, 0.4);
+        background-color: #3793dd;
+        transform: translateY(-1px);
     }
     .output-container {
-        background: #3a3a3a;
-        border-radius: 8px;
+        background: #f8f9fa;
+        border-radius: 6px;
         padding: 1.5rem;
         margin-top: 2rem;
-        border: 1px solid #4a4a4a;
+        border: 1px solid #e9ecef;
     }
     .code-block {
-        background-color: #2b2b2b;
-        color: #e0e0e0;
-        font-family: 'Fira Code', monospace;
+        background-color: #f1f3f5;
+        color: #212529;
+        font-family: 'JetBrains Mono', monospace;
         font-size: 0.9rem;
-        border-radius: 8px;
-        padding: 1.5rem;
+        border-radius: 6px;
+        padding: 1.25rem;
         margin-top: 1rem;
         overflow-x: auto;
     }
     .stAlert {
-        background-color: #4a4a4a;
-        color: #e0e0e0;
-        border-radius: 8px;
-        border: none;
-        padding: 1rem 1.5rem;
+        background-color: #e9ecef;
+        color: #495057;
+        border-radius: 6px;
+        border: 1px solid #ced4da;
+        padding: 0.75rem 1rem;
         margin-bottom: 1rem;
     }
     .stSpinner {
-        color: #61dafb;
+        color: #4dabf7;
     }
     /* Custom scrollbar */
     ::-webkit-scrollbar {
-        width: 8px;
-        height: 8px;
+        width: 6px;
+        height: 6px;
     }
     ::-webkit-scrollbar-track {
-        background: #2d2d2d;
-        border-radius: 4px;
+        background: #f1f3f5;
+        border-radius: 3px;
     }
     ::-webkit-scrollbar-thumb {
-        background: #4a4a4a;
-        border-radius: 4px;
+        background: #adb5bd;
+        border-radius: 3px;
     }
     ::-webkit-scrollbar-thumb:hover {
-        background: #5a5a5a;
+        background: #868e96;
+    }
+    .language-selector {
+        margin-bottom: 1rem;
+    }
+    .copy-button {
+        background-color: #e9ecef;
+        color: #495057;
+        border: none;
+        border-radius: 4px;
+        padding: 0.4rem 0.8rem;
+        font-size: 0.9rem;
+        cursor: pointer;
+        transition: all 0.2s ease;
+    }
+    .copy-button:hover {
+        background-color: #ced4da;
     }
 </style>
 """, unsafe_allow_html=True)
 
 st.markdown('<div class="main-container">', unsafe_allow_html=True)
-st.title("🧠 CodeCraft AI")
-st.markdown('<p class="subtitle">Empowering Developers with Advanced AI-Driven Solutions</p>', unsafe_allow_html=True)
+st.title("🚀 CodeGenius")
+st.markdown('<p class="subtitle">Elevate Your Code with AI-Powered Insights</p>', unsafe_allow_html=True)
 
-# Add language selection
 languages = ["Python", "JavaScript", "Java", "C++", "Ruby", "Go", "Rust", "TypeScript", "PHP", "Swift"]
-selected_language = st.selectbox("Select your preferred programming language:", languages)
+selected_language = st.selectbox("Select your programming language:", languages, key="language-selector")
 
-prompt = st.text_area(f"What {selected_language} challenge can I assist you with today?", height=120)
+prompt = st.text_area(f"What {selected_language} challenge can I help you with?", height=100)
 
-col1, col2 = st.columns([3, 1])
+col1, col2, col3 = st.columns([2, 1, 1])
 with col1:
-    generate_button = st.button("Generate Expert Code")
+    generate_button = st.button("Generate Solution")
 with col2:
-    complexity = st.select_slider("Code Complexity", options=["Low", "Medium", "High"])
+    complexity = st.radio("Complexity", ["Low", "Medium", "High"], horizontal=True)
+with col3:
+    style = st.radio("Style", ["Concise", "Detailed"], horizontal=True)
 
 if generate_button:
     if prompt.strip() == "":
-        st.error("Please enter a valid prompt.")
+        st.warning("Please enter a valid prompt.")
     else:
         with st.spinner(f"Crafting {complexity.lower()} complexity {selected_language} solution..."):
-            completed_text = generate_response(f"{complexity} complexity {selected_language} code for: {prompt}")
+            completed_text = generate_response(f"{complexity} complexity, {style} {selected_language} code for: {prompt}")
             if "An error occurred" in completed_text:
                 st.error(completed_text)
             else:
-                st.success(f"Expert-level {selected_language} code generated successfully!")
+                st.success(f"Solution generated successfully!")
                 
                 st.markdown('<div class="output-container">', unsafe_allow_html=True)
                 st.markdown('<div class="code-block">', unsafe_allow_html=True)
                 st.code(completed_text, language=selected_language.lower())
                 st.markdown('</div>', unsafe_allow_html=True)
-                st.markdown('</div>', unsafe_allow_html=True)
-
+                
                 # Add copy to clipboard button
                 st.markdown(
                     f"""
-                    <button onclick="navigator.clipboard.writeText(`{completed_text}`)" style="margin-top: 10px; background-color: #4a4a4a; color: #e0e0e0; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer;">
+                    <button onclick="navigator.clipboard.writeText(`{completed_text}`)" class="copy-button">
                         Copy to Clipboard
                     </button>
                     """,
                     unsafe_allow_html=True
                 )
+                st.markdown('</div>', unsafe_allow_html=True)
 
 st.markdown("""
-<div style='text-align: center; margin-top: 2rem; color: #bbb;'>
-    Engineered with 💡 by CodeCraft AI - Elevating Your Coding Experience
+<div style='text-align: center; margin-top: 2rem; color: #adb5bd; font-size: 0.9rem;'>
+    Powered by CodeGenius AI • Simplifying Complex Code Challenges
 </div>
 """, unsafe_allow_html=True)