Update app.py

app.py

@@ -6,7 +6,7 @@ import base64
 
 st.set_page_config(page_title="Multi-Agent Essay Writer", page_icon="🤖🤖🤖✍️")
 
-# Button HTML 
+# Button HTML (If Needed)
 button_html = f'''
     <div style="display: flex; justify-content: center;">
         <a href=" " target="_blank">
@@ -37,10 +37,10 @@ if "messages" not in st.session_state:
 
 # Sidebar with instructions and API key input
 with st.sidebar:
-    st.subheader("About:")
+    st.subheader("📌 About:")
     st.info(
-        "\n\n* This app uses the 'gpt-4o-mini-2024-07-18' model."
-        "\n\n* Writing essays may take some time, approximately 1-2 minutes."
+        "🔹 This app uses the 'gpt-4o-mini-2024-07-18' model.\n"
+        "🔹 Writing essays may take some time, approximately 1-2 minutes."
     )
 
     openai_key = st.secrets.get("OPENAI_API_KEY", "")
@@ -48,16 +48,16 @@ with st.sidebar:
     st.divider()
 
     # Reference section
-    st.subheader("References:")
+    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)',
+        '[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
     )
 
 # Initialize agents function
 def initialize_agents():
     if not openai_key:
-        st.error("OpenAI API key is missing! Please provide a valid key through Hugging Face Secrets.")
+        st.error("⚠️ OpenAI API key is missing! Please provide a valid key through Hugging Face Secrets.")
         st.session_state.chat_active = True
         return None
 
@@ -68,10 +68,17 @@ def initialize_agents():
         
         essay_writer = EssayWriter().graph
         st.session_state.chat_active = False
-        st.success("Agents successfully initialized!")
+        
+        st.markdown(
+            "<div style='text-align: center; padding: 10px; margin-bottom: 20px; "
+            "background-color: #d4edda; color: #155724; border-radius: 8px;'>"
+            "<b>✅ Agents successfully initialized!</b></div>",
+            unsafe_allow_html=True
+        )
+
         return essay_writer
     except Exception as e:
-        st.error(f"Error initializing agents: {e}")
+        st.error(f"❌ Error initializing agents: {e}")
         st.session_state.chat_active = True
         return None
 
@@ -80,22 +87,36 @@ if "app" not in st.session_state or st.session_state.app is None:
     st.session_state.app = initialize_agents()
 
 if st.session_state.app is None:
-    st.error("Failed to initialize agents. Please check your API key and restart the app.")
+    st.error("⚠️ Failed to initialize agents. Please check your API key and restart the app.")
 
 app = st.session_state.app  
 
 # Function to invoke the agent and generate a response
 def generate_response(topic, length):
     if not app:
-        st.error("Agents are not initialized. Please check the system or restart the app.")
+        st.error("⚠️ Agents are not initialized. Please check the system or restart the app.")
         return {"response": "Error: Agents not initialized."}
 
     return app.invoke(input={"topic": topic, "length": length})
 
+# **NEW: UI Enhancement for Setting Essay Length**
+st.markdown(
+    """
+    <div style="text-align: center; padding: 15px; background-color: #f8f9fa; 
+                border-radius: 10px; box-shadow: 2px 2px 10px rgba(0,0,0,0.1);">
+        <h3 style="color: #333;">✍️ Set Essay Length</h3>
+    </div>
+    """,
+    unsafe_allow_html=True
+)
 
-# Add user input for essay length
-st.subheader("Set Essay Length:")
-essay_length = st.number_input("Enter the word count for the essay:", min_value=150, max_value=350, value=250, step=50)
+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
 for message in st.session_state.messages:
@@ -103,29 +124,29 @@ for message in st.session_state.messages:
         st.markdown(message["content"], unsafe_allow_html=True)
 
 # Handle user input
-if topic := st.chat_input(placeholder="Ask a question or provide an essay topic...", disabled=st.session_state.chat_active):
+if topic := st.chat_input(placeholder="📝 Ask a question or provide an essay topic...", disabled=st.session_state.chat_active):
     st.chat_message("user").markdown(topic)
     st.session_state.messages.append({"role": "user", "content": topic})
 
-    with st.spinner("Thinking..."):
+    with st.spinner("⏳ Thinking..."):
         response = generate_response(topic, essay_length)  # **Pass user-defined length**
 
     # Handle the assistant's response
     with st.chat_message("assistant"):
         if "essay" in response:  # Display essay preview and download link
-            st.markdown(f"### Essay Preview ({essay_length} words)")
+            st.markdown(f"### 📝 Essay Preview ({essay_length} words)")
             st.markdown(f"#### {response['essay']['header']}")
             st.markdown(response["essay"]["entry"])
             for para in response["essay"]["paragraphs"]:
                 st.markdown(f"**{para['sub_header']}**")
                 st.markdown(para["paragraph"])
-            st.markdown("**Conclusion:**")
+            st.markdown("**🖊️ Conclusion:**")
             st.markdown(response["essay"]["conclusion"])
 
             # Provide download link for the PDF
             with open(response["pdf_name"], "rb") as pdf_file:
                 b64 = base64.b64encode(pdf_file.read()).decode()
-                href = f"<a href='data:application/octet-stream;base64,{b64}' download='{response['pdf_name']}'>Click here to download the PDF</a>"
+                href = f"<a href='data:application/octet-stream;base64,{b64}' download='{response['pdf_name']}'>📄 Click here to download the PDF</a>"
                 st.markdown(href, unsafe_allow_html=True)
 
             # Save the assistant's message to session state
@@ -140,8 +161,10 @@ if topic := st.chat_input(placeholder="Ask a question or provide an essay topic.
 st.markdown("---")
 st.markdown(
     """
-    <div style="text-align: center; font-size: 14px; color: #555;">
-        <strong>Acknowledgment:</strong> This project is based on Mesut Duman's work: 
+    <div style="text-align: center; padding: 15px; background-color: #f8f9fa; 
+                border-radius: 10px; box-shadow: 2px 2px 10px rgba(0,0,0,0.1);">
+        <strong>📌 Acknowledgment:</strong> 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