Update app.py

app.py

@@ -16,56 +16,31 @@ if "app" not in st.session_state:
 if "chat_active" not in st.session_state:
     st.session_state["chat_active"] = True
 
-# CSS for Styling
-st.markdown("""
-    <style>
-        .center-text { text-align: center; }
-        .compact { margin-bottom: 10px; }
-        .success-banner {
-            text-align: center;
-            padding: 10px;
-            background-color: #d4edda;
-            color: #155724;
-            border-radius: 8px;
-            font-weight: bold;
-            margin-bottom: 15px;
-        }
-        .input-container {
-            padding: 15px;
-            background-color: #ffffff;
-            border-radius: 8px;
-            box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
-            text-align: center;
-            margin-bottom: 20px;
-        }
-        .acknowledgment {
-            text-align: center;
-            padding: 10px;
-            background-color: #ffffff;
-            border-radius: 8px;
-            border: 1px solid #ddd;
-            font-size: 14px;
-            margin-top: 20px;
-        }
-        .sidebar-info {
-            padding: 10px;
-            background-color: #f8f9fa;
-            border-radius: 8px;
-        }
-    </style>
-""", unsafe_allow_html=True)
-
-# Sidebar
+# Sidebar with essay settings and user-defined length
 with st.sidebar:
-    st.markdown("📌 **About:**", unsafe_allow_html=True)
-    st.markdown(
-        "<div class='sidebar-info'>"
-        "<b>🔹 This app uses the 'gpt-4o-mini-2024-07-18' model.</b><br>"
-        "🔹 Writing essays may take approximately 1-2 minutes."
-        "</div>", unsafe_allow_html=True)
+    st.subheader("📌 About:")
+    st.info("🔹 This app uses the 'gpt-4o-mini-2024-07-18' model.\n"
+            "🔹 Writing essays may take approximately 1-2 minutes.")
+
+    # API Key Retrieval
+    openai_key = st.secrets.get("OPENAI_API_KEY", "")
+
+    st.divider()
+
+    # User-defined essay length selection
+    st.subheader("📝 Essay Settings:")
+    essay_length = st.number_input(
+        "Select Essay Length (words):",
+        min_value=150,
+        max_value=350,
+        value=250,
+        step=50
+    )
 
     st.divider()
-    st.markdown("📖 **References:**")
+
+    # Reference section
+    st.subheader("📖 References:")
     st.markdown(
         "[1. Multi-Agent System with CrewAI and LangChain](https://discuss.streamlit.io/t/new-project-i-have-build-a-multi-agent-system-with-crewai-and-langchain/84002)",
         unsafe_allow_html=True
@@ -73,12 +48,12 @@ with st.sidebar:
 
 # Initialize agents function
 def initialize_agents():
-    if not st.secrets.get("OPENAI_API_KEY"):
+    if not openai_key:
         st.error("⚠️ OpenAI API key is missing! Please provide a valid key through Hugging Face Secrets.")
         st.session_state["chat_active"] = True
         return None
 
-    os.environ["OPENAI_API_KEY"] = st.secrets.get("OPENAI_API_KEY")
+    os.environ["OPENAI_API_KEY"] = openai_key
     try:
         if st.session_state["app"] is not None:
             return st.session_state["app"]  # Prevent re-initialization
@@ -87,7 +62,7 @@ def initialize_agents():
         st.session_state["chat_active"] = False
 
         # Success message
-        st.markdown("<div class='success-banner'>✅ Agents successfully initialized!</div>", unsafe_allow_html=True)
+        st.success("✅ Agents successfully initialized!")
         return essay_writer
     except Exception as e:
         st.error(f"❌ Error initializing agents: {e}")
@@ -111,10 +86,6 @@ def generate_response(topic, length):
 
     return app.invoke(input={"topic": topic, "length": length})
 
-# **NEW: Clean & Centered Input Section**
-st.markdown("<div class='input-container'><h3>✍️ Set Essay Length</h3></div>", unsafe_allow_html=True)
-essay_length = st.number_input("Enter the word count for the essay:", min_value=150, max_value=350, value=250, step=50)
-
 # Display chat messages from the session
 if "messages" in st.session_state:
     for message in st.session_state["messages"]:
@@ -127,7 +98,7 @@ if topic := st.chat_input(placeholder="📝 Ask a question or provide an essay t
     st.session_state["messages"].append({"role": "user", "content": topic})
 
     with st.spinner("⏳ Generating your essay..."):
-        response = generate_response(topic, essay_length)  # **Pass user-defined length**
+        response = generate_response(topic, essay_length)  
 
     # Handle the assistant's response
     with st.chat_message("assistant"):
@@ -158,7 +129,8 @@ if topic := st.chat_input(placeholder="📝 Ask a question or provide an essay t
 # Acknowledgment Section
 st.markdown(
     """
-    <div class='acknowledgment'>
+    <div style="text-align: center; padding: 10px; background-color: #ffffff; 
+                border-radius: 8px; border: 1px solid #ddd; margin-top: 20px;">
         📌 <b>Acknowledgment:</b> This project is based on Mesut Duman's work.<br><br> 
         ⚒️ Source: <a href="https://github.com/mesutdmn/Autonomous-Multi-Agent-Systems-with-CrewAI-Essay-Writer/tree/main" 
         target="_blank" style="color: #007BFF; text-decoration: none;">CrewAI Essay Writer</a>