add styling

README.md

@@ -1,6 +1,6 @@
 ---
 title: ArticleRecommender
-app_file: app.py
+app_file: test.py
 sdk: streamlit
 sdk_version: 1.35.0
 pinned: false

test.py

@@ -1,5 +1,130 @@
+import streamlit as st
 from crew.research_article_suggester import RecentArticleSuggester
 
-suggester = RecentArticleSuggester()
-results = suggester.kickoff(inputs={"topic": "GenAI"})
-print("\nFinal Results: \n\n", results)
+def main():
+    st.set_page_config(page_title='Recent Article Suggester', page_icon='📰', layout='wide')
+
+    st.markdown(
+        """
+        <style>
+        .main {
+            background-color: #f5f5f5;
+            padding: 20px;
+            border-radius: 10px;
+        }
+        .centered {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+        }
+        .title {
+            font-family: 'Helvetica', sans-serif;
+            font-weight: bold;
+            font-size: 36px;
+            color: #1f77b4;
+        }
+        .description {
+            font-family: 'Helvetica', sans-serif;
+            font-size: 18px;
+            color: #333333;
+            margin-top: 10px;
+        }
+        .subheader {
+            font-family: 'Helvetica', sans-serif;
+            font-weight: bold;
+            font-size: 24px;
+            color: #ff7f0e;
+            margin-top: 20px;
+        }
+        .element {
+            background-color: #ffffff;
+            padding: 1rem;
+            border-radius: 8px;
+            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+            margin-bottom: 1rem;
+        }
+        .element h3 {
+            font-size: 24px;
+            color: #1f77b4;
+            margin-bottom: 0.5rem;
+            text-transform: uppercase; 
+            padding :10px;
+
+        }
+        .element ul {
+            list-style-type: none;
+            padding: 0;
+            margin: 0;
+        }
+        .element li {
+            font-size: 16px;
+            color: #333333;
+            margin-bottom: 0.5rem;
+        }
+        .element li b {
+            font-size: 22px;
+        }
+
+        </style>
+        """,
+        unsafe_allow_html=True
+    )
+
+    st.markdown("<div class='container'>", unsafe_allow_html=True)
+
+    st.markdown(
+        """
+        <div class="centered">
+            <p class="title">Recent Article Suggester</p>
+            <p class="description">Discover recent articles based on your topic of interest using advanced AI.</p>
+        </div>
+        """,
+        unsafe_allow_html=True
+    )
+
+    st.sidebar.markdown("<p class='sidebar-header'>Search for the papers you are interested in:</p>", unsafe_allow_html=True)
+    topic = st.sidebar.text_input('Enter a topic:', 'GenAI', key='topic_input', help='Enter a topic of interest')
+
+    if st.sidebar.button('Get Suggestions'):
+
+        with st.status(
+            "🤖 **Agents at work...**", state="running", expanded=True
+        ) as status:
+            with st.container(height=500, border=False):
+                log_container = st.empty()
+                suggester = RecentArticleSuggester()
+                inputs = {"topic": topic}
+                results = suggester.kickoff(inputs=inputs)
+            status.update(
+                label="✅ Articles are Ready for Reading!",
+                state="complete",
+                expanded=False,
+            )
+
+        st.subheader("", anchor=False, divider="rainbow")
+
+        
+
+        if results is None:
+            st.markdown('No articles found.', unsafe_allow_html=True)
+        else:
+
+            st.markdown('<p class="subheader">Results:</p>', unsafe_allow_html=True)
+
+            for element in results:
+                st.markdown(
+                    f"""
+                    <div class="element">
+                        <h3><a href="{element['url']}" target="_blank">{element['title']}</a></h3>
+                        <ul>
+                            {"".join(f"<li style='font-size: 20px;'><b>{key.capitalize()}:</b> {value}</li>" for key, value in element.items() if key != "title")}
+                        </ul>
+                    </div>
+                    """,
+                    unsafe_allow_html=True
+                )
+
+if __name__ == "__main__":
+    main()