Merge pull request #12 from beautiful-code/ui/refractor

README.md

@@ -1,6 +1,6 @@
 ---
 title: AI Workflows
-app_file: test.py
+app_file: main.py
 sdk: streamlit
 sdk_version: 1.35.0
 pinned: false

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:
@@ -94,6 +86,7 @@ def main():
                 st.markdown(f"**Reason For Recommendation:** {article.get('reason_for_recommendation', '')}")
                 st.markdown("---")
 
-
+    if st.sidebar.button("← Back to Main Page"):
+        st.session_state.page = "main"
 if __name__ == "__main__":
     main()

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

@@ -0,0 +1,93 @@
+import streamlit as st
+from dotenv import 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"
+
+    if st.session_state.page == "main":
+        show_main_page()
+    elif st.session_state.page == "article_recommendor":
+        article_recommendor_main()
+    elif st.session_state.page == "research_article_suggester":
+        research_article_suggester_main()
+    elif st.session_state.page == "feedback":
+        feedback_main()
+
+def show_main_page():
+
+    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("---")
+    st.markdown('<div class="sub-header">Navigate to Specific Pages:</div>', unsafe_allow_html=True)
+
+    card_info = [
+        {"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 
+    num_rows = (len(card_info) + num_cols - 1) // num_cols
+
+    with stylable_container(
+        key="container_with_border",
+        css_styles="""
+            {
+                display: flex;
+                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="""
+                                {    
+                                    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

@@ -2,9 +2,10 @@ import streamlit as st
 from crew.research_article_suggester import RecentArticleSuggester
 from streamlit_extras.capture import stdout
 
-def main():
-    st.set_page_config(page_title='Recent Article Suggester', page_icon='📰', layout='wide')
 
+
+def main():
+   
     st.markdown(
         """
         <style>
@@ -125,6 +126,7 @@ def main():
                     """,
                     unsafe_allow_html=True
                 )
-
+    if st.sidebar.button("← Back to Main Page"):
+        st.session_state.page = "main"
 if __name__ == "__main__":
     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(