resolved comments

app.py

@@ -1,14 +1,11 @@
 from dotenv import load_dotenv
-load_dotenv()
-
 import json
 import streamlit as st
-
 import utils.settings as settings
 
 from crew.article_suggestion import article_recommendation_crew
 from utils.write_to_json import write_dict_to_json as write_dict_to_json
-
+load_dotenv()
 settings.init()
 
 
@@ -20,9 +17,6 @@ def icon(emoji: str):
     )
 
 
-# st.set_page_config(layout="wide")
-
-
 def main():
     icon("📖 Articles RecommendAIgent")
     st.subheader("Let AI agents recommend articles based on your interest!")
@@ -55,7 +49,7 @@ def main():
                 "Disadvantages of Quantization: Less precise.\n\n",
                 height=400,
             )
-            st.markdown("")  # Adding a blank space here
+            st.markdown("")  
             submitted = st.form_submit_button("Submit")
 
     if submitted:
@@ -77,8 +71,6 @@ def main():
 
         st.subheader("", anchor=False, divider="rainbow")
 
-        # json_data = json.loads(result)
-        # articles_list = json_data.get("articles", None)
         articles_list = settings.articles.values()
 
         if articles_list is None:

main.css

@@ -0,0 +1,41 @@
+body {
+    background-color: white;
+    color: #333;
+    font-family: 'Arial', sans-serif;
+    margin: 0;
+    padding: 0;
+}
+.main-title {
+    font-size: 3em;
+    font-weight: bold;
+    margin-top: 20px;
+    text-align: center;
+    color: #007bff;
+}
+.sub-header {
+    font-size: 1.5em;
+    margin: 20px 0;
+    text-align: center;
+    color: #333;
+}
+.card {
+    background-color: #f8f9fa;
+    border-radius: 10px;
+    padding: 20px;  
+    margin: 20px;
+    height:300px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+.card h2 {
+    font-size: 1.5em;
+    color: #007bff;
+}
+.card p {
+    color: #666;
+}
+

main.py

@@ -1,15 +1,22 @@
 import streamlit as st
 from dotenv import load_dotenv
-load_dotenv()
 from streamlit_extras.stylable_container import stylable_container
-
+from PIL import Image
 from app import main as article_recommendor_main
 from research_paper import main as research_article_suggester_main
 from test import main as feedback_main
 
+load_dotenv()
+
+
 st.set_page_config(page_title='Multi-Page App', page_icon='📰', layout='wide')
 
+def load_css(file_name):
+    with open(file_name) as f:
+        return f.read()
+
 def main():
+   
     if 'page' not in st.session_state:
         st.session_state.page = "main"
 
@@ -23,49 +30,9 @@ def main():
         feedback_main()
 
 def show_main_page():
-    st.markdown(
-        """
-        <style> 
-          body {
-                background-color: #2e2e2e;
-                background-size: cover;
-                background-position: center;
-                background-repeat: no-repeat;
-            }
-            .main-title {
-                font-size: 3em;
-                font-weight: bold;
-                margin-top: 20px;
-                text-align: center;
-            }
-            .sub-header {
-                font-size: 1.5em;
-                margin: 20px 0;
-                text-align: center;
-            }
-            .card {
-                
-                border-radius: 10px;
-                padding: 20px;
-                width: 300px;
-                height: 300px;    
-                text-align: center;
-                margin: 20px;
-            }
-            .card-button {
-                background-color: #ff4b4b;
-                color: white;
-                border: none;
-                padding: 10px 20px;
-                font-size: 1em;
-                border-radius: 5px;
-                cursor: pointer;
-            }
-            .card-button:hover {
-                background-color: #ff7979;
-            }
-        </style>
-        """, unsafe_allow_html=True)
+
+    css = load_css("main.css")
+    st.markdown(f"<style>{css}</style>", unsafe_allow_html=True)
 
     st.markdown('<div class="main-title">Welcome to the Multi-Page App!</div>', unsafe_allow_html=True)
     st.markdown("---")
@@ -75,8 +42,6 @@ def show_main_page():
         {"title": "Article Recommendor", "description": "Discover articles tailored to your interests.", "key": "article_recommendor"},
         {"title": "Recent Article Suggester", "description": "Get suggestions for recent research articles.", "key": "research_article_suggester"},
         {"title": "Feedback", "description": "Provide your valuable feedback.", "key": "feedback"},
-
-        
     ]
 
     num_cols = 3 
@@ -87,44 +52,42 @@ def show_main_page():
         css_styles="""
             {
                 display: flex;
-                # justify-content: center;
                 align-items: center;
                 flex-wrap: wrap;
             }
             """,
     ):
-        
         for row in range(num_rows):
-                cols = st.columns(num_cols)
-                for col in range(num_cols):
-                    index = row * num_cols + col
-                    if index < len(card_info):
-                        card = card_info[index]
-                        with cols[col]:
-                            with stylable_container(
-                                    key="inside_container_with_border",
-                                    css_styles="""
-                                        {                                        
-                                            border-radius: 10px;
-                                            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-                                            align-items: center;
-                                            flex-wrap: wrap;
-                                            padding:10px;
-                                        }
-                                        """,
-                                ):
-                                st.markdown(
-                                    f'''
-                                    <div class="card">
-                                        <h2>{card["title"]}</h2>
-                                        <p>{card["description"]}</p>
-                                    
-                                    </div>
-                                    ''', unsafe_allow_html=True)
-                                                
-                                if st.button(f"Go to {card['title']}", key=card["key"]):
-                                        st.session_state.page = card["key"]
+            cols = st.columns(num_cols)
+            for col in range(num_cols):
+                index = row * num_cols + col
+                if index < len(card_info):
+                    card = card_info[index]
+                    with cols[col]:
+                        with stylable_container(
+                            key="inside_container_with_border",
+                            css_styles="""
+                                {    
+                                    height: 500px; 
+                                    background-color: #f8f9fa;                                   
+                                    border-radius: 10px;
+                                    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+                                    display: flex;
+                                    justify-content: center;
+                                    align-items: center;
+                                    flex-wrap: wrap;
+                                    padding:10px;
+                                """,
+                        ):
+                            st.markdown(
+                                f'''
+                                <div class="card">
+                                    <h2>{card["title"]}</h2>
+                                    <p>{card["description"]}</p>
+                                </div>
+                                ''', unsafe_allow_html=True)
+                            if st.button(f"Go to {card['title']}", key=card["key"]):
+                                st.session_state.page = card["key"]
 
-    
 if __name__ == '__main__':
     main()

research_paper.py

@@ -3,7 +3,6 @@ from crew.research_article_suggester import RecentArticleSuggester
 from streamlit_extras.capture import stdout
 
 
-# st.set_page_config(page_title='Recent Article Suggester', page_icon='📰', layout='wide')
 
 def main():
    

test.py

@@ -5,16 +5,8 @@ from crew.til import TilCrew
 import streamlit as st
 from streamlit_extras.capture import stdout
 
-# crew = TilCrew()
-# results = crew.kickoff(inputs={"content": "Today I learnt Sidecar pattern"})
-# results = crew.kickoff(inputs={"content": "Learnt about go-lang routines to add concurrency in the React App."})
-# results = crew.kickoff(inputs={"content": "Upon delving into the intricacies of Docker, I have acquired the capability to encapsulate our application within containers, thereby streamlining the deployment process across a multitude of heterogeneous environments."})
-# print(results)
-
 
 def main():
-    # st.set_page_config(page_title='Today I Learnt',
-    #                    page_icon='📰', layout='wide')
     st.markdown("<div class='container'>", unsafe_allow_html=True)
 
     st.markdown(