Update app.py

app.py

@@ -4,78 +4,95 @@ from crew import *
 import os
 import base64
 
-st.set_page_config(page_title="Multi-Agent Essay Writer", page_icon="🤖🤖🤖✍️")
-
-# Button HTML
-button_html = f'''
-    <div style="display: flex; justify-content: center;">
-        <a href=" " target="_blank">
-            <button style="
-                background-color: #FFDD00;
-                border: none;
-                color: black;
-                padding: 10px 20px;
-                text-align: center;
-                text-decoration: none;
-                display: inline-block;
-                font-size: 16px;
-                margin: 4px 2px;
-                cursor: pointer;
-                border-radius: 10px;
-                box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
-            ">
-            </button>
-        </a>
-    </div>
-'''
-
-# Initialize session state
-if "messages" not in st.session_state:
-    st.session_state.messages = [{"role": "assistant", "content": "Hello! How can I assist you today?"}]
-    st.session_state.app = None
-    st.session_state.chat_active = True
-
-# Sidebar with instructions and API key input
+st.set_page_config(page_title="Multi-Agent Essay Writer", page_icon="🤖")
+
+# CSS for Better Styling
+st.markdown("""
+    <style>
+        /* Center align everything */
+        .center-text {
+            text-align: center;
+        }
+
+        /* Remove excessive spacing */
+        .compact {
+            margin-bottom: 10px;
+        }
+
+        /* Styling for banners */
+        .success-banner {
+            text-align: center;
+            padding: 10px;
+            background-color: #d4edda;
+            color: #155724;
+            border-radius: 8px;
+            font-weight: bold;
+            margin-bottom: 15px;
+        }
+
+        /* Styling for input container */
+        .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;
+        }
+
+        /* Styling for acknowledgment section */
+        .acknowledgment {
+            text-align: center;
+            padding: 10px;
+            background-color: #ffffff;
+            border-radius: 8px;
+            border: 1px solid #ddd;
+            font-size: 14px;
+            margin-top: 20px;
+        }
+
+        /* Adjust sidebar */
+        .sidebar-info {
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-radius: 8px;
+        }
+    </style>
+""", unsafe_allow_html=True)
+
+# Sidebar
 with st.sidebar:
-    st.subheader("📌 About:")
-    st.info(
-        "🔹 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", "")
+    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.divider()
-
-    # Reference section
-    st.subheader("📖 References:")
+    st.markdown("📖 **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:
+    if not st.secrets.get("OPENAI_API_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"] = openai_key
+    os.environ["OPENAI_API_KEY"] = st.secrets.get("OPENAI_API_KEY")
     try:
         if "app" in st.session_state and st.session_state.app is not None:
             return st.session_state.app  # Prevent re-initialization
         
         essay_writer = EssayWriter().graph
         st.session_state.chat_active = False
-        
-        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
-        )
 
+        # Success message
+        st.markdown("<div class='success-banner'>✅ Agents successfully initialized!</div>", unsafe_allow_html=True)
         return essay_writer
     except Exception as e:
         st.error(f"❌ Error initializing agents: {e}")
@@ -99,24 +116,9 @@ def generate_response(topic, length):
 
     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
-)
-
-essay_length = st.number_input(
-    "Enter the word count for the essay:",
-    min_value=150,
-    max_value=350,
-    value=250,
-    step=50
-)
+# **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
 for message in st.session_state.messages:
@@ -128,7 +130,7 @@ if topic := st.chat_input(placeholder="📝 Ask a question or provide an essay t
     st.chat_message("user").markdown(topic)
     st.session_state.messages.append({"role": "user", "content": topic})
 
-    with st.spinner("⏳ Thinking..."):
+    with st.spinner("⏳ Generating your essay..."):
         response = generate_response(topic, essay_length)  # **Pass user-defined length**
 
     # Handle the assistant's response
@@ -157,19 +159,14 @@ if topic := st.chat_input(placeholder="📝 Ask a question or provide an essay t
             st.markdown(response["response"])
             st.session_state.messages.append({"role": "assistant", "content": response["response"]})
 
-# Add acknowledgment
-st.markdown("---")
+# Acknowledgment Section
 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);">
-        <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
-        </a>
+    <div class='acknowledgment'>
+        📌 <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>
     </div>
     """,
-    unsafe_allow_html=True,
+    unsafe_allow_html=True
 )