Update app.py

app.py

@@ -1,4 +1,5 @@
 # image source: https://www.globesign.com/blog/a-beginners-guide-to-google-website-analyzer/
+
 import streamlit as st
 from swarm import Swarm, Agent
 from bs4 import BeautifulSoup
@@ -100,35 +101,27 @@ def orchestrate_workflow(client, url):
 st.markdown(
     """
     <style>
-    .title { text-align: center; font-size: 2.5rem; font-weight: bold; }
-    .description { text-align: center; font-size: 1.0rem; color: #555; }
-    .button-container { text-align: center; margin-top: 20px; }
-    .custom-button {
-        padding: 10px 20px;
-        font-size: 16px;
-        background-color: #4CAF50;
-        color: white;
-        border: none;
-        border-radius: 5px;
-        cursor: pointer;
-        text-align: center;
-        display: inline-block;
-    }
-    .custom-button:hover {
-        background-color: #45a049;
-    }
-    .ack { font-size: 0.95rem; color: #888; text-align: center; }
+    .title { text-align: center; font-size: 2.8rem; font-weight: bold; margin-bottom: 20px; }
+    .description { text-align: center; font-size: 1.1rem; color: #555; margin-bottom: 30px; }
+    .section { margin-top: 30px; margin-bottom: 30px; }
+    .ack { font-size: 0.95rem; color: #888; text-align: center; margin-top: 50px; }
     </style>
     """,
     unsafe_allow_html=True,
 )
 
+# Add cover image
+st.image("./image-4.png", use_column_width=True)
+
+# Title and description
 st.markdown('<div class="title">Swarm-based Web Content Analyzer 🧐</div>', unsafe_allow_html=True)
 st.markdown('<div class="description">Effortlessly extract, analyze, and summarize web content using multi-agents.</div>', unsafe_allow_html=True)
 
+# Add some spacing
+st.markdown('<div class="section"></div>', unsafe_allow_html=True)
+
 fetch_openai_api_key()
 
-# Initialize Swarm client only after API key is set
 if 'OPENAI_API_KEY' in os.environ and os.environ['OPENAI_API_KEY']:
     client = initialize_swarm_client()
 
@@ -136,26 +129,11 @@ if 'OPENAI_API_KEY' in os.environ and os.environ['OPENAI_API_KEY']:
     st.subheader("🌍 Enter the Website URL")
     url = st.text_input("Enter the URL of the website you want to scrape", placeholder="https://example.com")
 
-    # Custom green button
-    #st.markdown('<div class="button-container"><button class="custom-button" id="run-workflow">🚀 Run Workflow</button></div>', unsafe_allow_html=True)
-
-    # Add JavaScript for button interaction
-    st.markdown(
-        """
-        <script>
-        document.getElementById("run-workflow").onclick = function() {
-            var placeholder = document.querySelector("input[placeholder='https://example.com']");
-            if (placeholder) {
-                placeholder.focus();
-            }
-        };
-        </script>
-        """,
-        unsafe_allow_html=True,
-    )
+    # Add some spacing
+    st.markdown('<div class="section"></div>', unsafe_allow_html=True)
 
     # Run the workflow logic
-    if st.button("Run Workflow", key="run"):
+    if st.button("🚀 Run Workflow", key="run"):
         if url:
             with st.spinner("Running the multi-agent workflow... This may take a moment."):
                 final_report = orchestrate_workflow(client, url)
@@ -172,8 +150,11 @@ st.divider()
 st.markdown(
     """
     <div class="ack">
-        Acknowledgment: This app is based on <a href="https://github.com/jadouse5/openai-swarm-webscraper" target="_blank">Jad Tounsi El Azzoiani's work</a>.
+        Acknowledgment: This app is based on <a href="https://github.com/jadouse5/openai-swarm-webscraper" target="_blank">Jad Tounsi El Azzoiani's</a> work.
     </div>
     """,
     unsafe_allow_html=True
 )
+
+
+