Merge pull request #26 from beautiful-code/ui/cleanup

ui/article_recommendation.py

@@ -1,109 +0,0 @@
-from dotenv import load_dotenv
-import json
-import streamlit as st
-import utils.settings as settings
-
-from workflows.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()
-
-
-def icon(emoji: str):
-    """Shows an emoji as a Notion-style page icon."""
-    st.write(
-        f'<span style="font-size: 78px; line-height: 1">{emoji}</span>',
-        unsafe_allow_html=True,
-    )
-
-
-def main():
-    page_bg_img = '''
-        <style>
-        [data-testid="stAppViewContainer"]{
-            background-image:url("https://www.shutterstock.com/image-vector/abstract-technology-communication-concept-vector-600nw-1914443275.jpg");
-            background-size:cover;
-        }
-        [data-testid="stHeader"]{
-            background: rgba(0,0,0,0);
-        }
-        [data-testid="stToolbar"]{
-            right: 2rem;
-        }
-       
-
-        </style>
-        '''
-    st.markdown(page_bg_img, unsafe_allow_html=True)
-    icon("📖 Articles RecommendAIgent")
-    st.subheader("Let AI agents recommend articles based on your interest!")
-
-    with st.sidebar:
-        st.header("👇 Provide Your Interests Below!")
-        with st.form("user_input_form", border=True):
-            interests = st.text_input(
-                "Enter your interests (comma-separated):",
-                "GenAI, Architecture, Agentic Programming",
-            )
-            previous_article_insights = st.text_area(
-                "Enter previous article insights:",
-                "Agentic Design Patterns (https://www.deeplearning.ai/the-batch/how-agents-can-improve-llm-performance/)\n"
-                "Reflection: The LLM examines its own work to come up with ways to improve it. "
-                "Tool Use: The LLM is given tools such as web search, code execution, or any other function to help it gather information, take action, or process data. "
-                "Planning: The LLM comes up with, and executes, a multistep plan to achieve a goal "
-                "Multi-agent collaboration: More than one AI agent work together, splitting up tasks and discussing and debating ideas, to come up with better solutions than a single agent would.\n\n"
-                "GenAI Multi-Agent Systems (https://thenewstack.io/genai-multi-agent-systems-a-secret-weapon-for-tech-teams/)\n"
-                "Multi-agent systems go beyond the task-oriented roles to truly super-charge development and strategy teams. "
-                "Successful multi-agent systems act as a “digital twin” for your development team. "
-                "Different Approaches: 1. Centralized, with one agent in the center that collects and assimilates all the other outputs. "
-                "2. Distributed, where there is no central controller and the agents coordinate directly with one another in an “agent swarm. "
-                "3. Hierarchical, where agents are organized in teams or hierarchical layers.\n\n"
-                "LLM Model Quantisation\n"
-                "Different Methods for Compression: Pruning, Knowledge Distiallation and Quantization."
-                "Quantization process represents the model weights in lower precession which is also known as downcasting."
-                "Quanitzatoin Error is the difference in the weights of the quantized model and the original model."
-                "Advantages of Quanitzation: Reduced memory footprint, increased compute and speed of inferrence."
-                "Disadvantages of Quantization: Less precise.\n\n",
-                height=400,
-            )
-            st.markdown("")
-            submitted = st.form_submit_button("Submit")
-
-    if submitted:
-        with st.status(
-            "🤖 **Agents at work...**", state="running", expanded=True
-        ) as status:
-            with st.container(height=500, border=False):
-                result = article_recommendation_crew.kickoff(
-                    inputs={
-                        "interests": interests,
-                        "previous_article_insights": previous_article_insights,
-                    }
-                )
-            status.update(
-                label="✅ Articles are Ready for Reading!",
-                state="complete",
-                expanded=False,
-            )
-
-        st.subheader("", anchor=False, divider="rainbow")
-
-        articles_list = settings.articles.values()
-
-        if articles_list is None:
-            st.markdown("No articles found.")
-            return
-        else:
-            for article in articles_list:
-                st.markdown(f"# {article['title']}")
-                st.markdown(f"**URL:** [{article['url']}]({article['url']})")
-                st.markdown(f"**Pitch:** {article.get('pitch', '')}")
-                st.markdown(f"**Evaluation Score:** {article.get('evaluation_score', '')}")
-                st.markdown(f"**Evaluation Reason:** {article.get('evaluation_reason', '')}")
-                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()

ui/course_learn_suggest_expectations.py

@@ -4,7 +4,9 @@ from streamlit_extras.stylable_container import stylable_container
 from workflows.courses.expectation_revision import ExpectationRevision
 
 
-def main():
+
+
+def course_suggester_main():
     st.markdown("""
     <style>
       [data-testid="stAppViewContainer"]{
@@ -146,4 +148,4 @@ def main():
 
 
 if __name__ == "__main__":
-    main()
+    course_suggester_main()

ui/course_lessons_extractor.py

@@ -1,74 +0,0 @@
-import streamlit as st
-import asyncio
-from contextlib import contextmanager
-from dotenv import load_dotenv
-from workflows.courses.lessons_extractor import LessonsExtractor
-from streamlit_extras.capture import stdout
-load_dotenv()
-
-
-@contextmanager
-def setup_event_loop():
-    loop = asyncio.new_event_loop()
-    asyncio.set_event_loop(loop)
-    try:
-        yield loop
-    finally:
-        loop.close()
-        asyncio.set_event_loop(None)
-
-def main():
-    page_bg_img = '''
-        <style>
-        [data-testid="stAppViewContainer"]{
-            background-image:url("https://www.shutterstock.com/image-vector/abstract-technology-communication-concept-vector-600nw-1914443275.jpg");
-            background-size:cover;
-        }
-        [data-testid="stHeader"]{
-            background: rgba(0,0,0,0);
-        }
-        [data-testid="stToolbar"]{
-            right: 2rem;
-        }
-       
-
-        </style>
-        '''
-    st.markdown(page_bg_img, unsafe_allow_html=True)
-    st.markdown("<div class='container'>", unsafe_allow_html=True)
-
-    st.markdown(
-        """
-        <div class="centered">
-            <p class="title">Course Lesson Extractor</p>
-        </div>
-        """,
-        unsafe_allow_html=True
-    )
-    course_url = st.text_area('Enter the URL for the course:',
-                              "https://www.coursera.org/learn/google-data-analytics-capstone?specialization=google-data-analytics",
-                               key='course_url', help='Enter course you want to learn')
-
-    if st.button("Get Lessons"):
-        with st.status(
-            "🤖 **Extracting Lessons...**", state="running", expanded=True
-        ) as status:
-            with st.container(height=500, border=False):
-                log_container = st.empty()
-                with stdout(log_container.code, terminator=""):
-                    with setup_event_loop() as loop:
-                        extractor = LessonsExtractor()
-                        inputs = {"course_url": course_url}
-                        results = extractor.kickoff(inputs=inputs)["lessons"]
-            status.update(
-                label="✅ Extracted Lessons!",
-                state="complete",
-                expanded=False,
-            )
-
-        for idx, lesson in enumerate(results):
-            st.markdown(f"#### Lessons {idx}: {lesson['name']}")
-            st.markdown(f"Concpets: {', '.join(lesson['concepts'])}")
-
-if __name__ == "__main__":
-    main()

ui/research_paper.py

@@ -1,142 +0,0 @@
-import streamlit as st
-from workflows.research_article_suggester import RecentArticleSuggester
-from streamlit_extras.capture import stdout
-
-
-
-def main():
-
-    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;
-        }
-        [data-testid="stAppViewContainer"]{
-            background-image:url("https://www.shutterstock.com/image-vector/abstract-technology-communication-concept-vector-600nw-1914443275.jpg");
-            background-size:cover;
-        }
-        [data-testid="stHeader"]{
-            background: rgba(0,0,0,0);
-        }
-        [data-testid="stToolbar"]{
-            right: 2rem;
-        }
-
-        </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()
-                with stdout(log_container.code, terminator=""):
-                    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 st.sidebar.button("← Back to Main Page"):
-        st.session_state.page = "main"
-if __name__ == "__main__":
-    main()

ui/til_feedback.py

@@ -6,6 +6,7 @@ from langsmith import Client
 from workflows.utils.feedback import Feedback
 
 load_dotenv()
+
 def feedback_main():
 
     page_bg_img = '''
@@ -125,5 +126,6 @@ def clear_feedback_state(results):
         if key.endswith("_feedback_given"):
             st.session_state[key] = False
 
+
 if __name__ == "__main__":
     feedback_main()

ui_main.py

@@ -1,46 +1,33 @@
 from dotenv import load_dotenv
 from streamlit_extras.stylable_container import stylable_container
-from ui.article_recommendation import main as article_recommendor_main
-from ui.course_lessons_extractor import main as lessons_extractor_main
-from ui.research_paper import main as research_article_suggester_main
-from ui.til_feedback import feedback_main
-from ui.course_learn_suggest_expectations import main as course_suggester_main
+from ui.til_feedback import  feedback_main
+from ui.course_learn_suggest_expectations import course_suggester_main
 import math
 import streamlit as st
 import subprocess
+import streamlit_router as sr
 
 load_dotenv()
 
 subprocess.run(["playwright", "install", "chromium"])
 
+st.set_page_config(page_title='Growthy AI Workflows', page_icon='📰',layout="wide")
 
 def load_css(file_name):
     with open(file_name) as f:
         return f.read()
 
+def common_sidebar():
+    st.sidebar.markdown("# Sidebar Navigation")
+    st.sidebar.markdown("---")
+    st.sidebar.markdown("### Pages")
+    st.sidebar.button("Home", on_click=lambda: router.redirect(*router.build("show_main_page")))
+    st.sidebar.button("TIL Feedback", on_click=lambda: router.redirect(*router.build("feedback_main_wrapper")))
+    st.sidebar.button("Course Suggester", on_click=lambda: router.redirect(*router.build("course_suggester_main_wrapper")))
 
-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()
-    elif st.session_state.page == "lessons_extractor":
-        lessons_extractor_main()
-    elif st.session_state.page == "course_suggester":
-        course_suggester_main()
 
 
 def show_main_page():
-    st.set_page_config(page_title='Growthy AI Workflows',
-                       page_icon='📰', layout="wide")
     page_bg_img = '''
         <style>
         [data-testid="stAppViewContainer"]{
@@ -53,96 +40,116 @@ def show_main_page():
         [data-testid="stToolbar"]{
             right: 2rem;
         }
-
-
+        [data-testid="column"] {
+                text-align: center;
+                                } 
+    
         </style>
         '''
     st.markdown(page_bg_img, unsafe_allow_html=True)
-
+    
     css = load_css("ui/main.css")
 
     st.markdown(f"<style>{css}</style>", unsafe_allow_html=True)
 
-    st.markdown('<div class="main-title">Welcome to Growthy AI Workflows!</div>',
-                unsafe_allow_html=True)
+    st.markdown('<div class="main-title">Welcome to Growthy AI Workflows!</div>', unsafe_allow_html=True)
     st.markdown("---")
 
     card_info = [
-        {"title": "TIL Feedback", "description": "Provide your valuable feedback.",
-            "key": "feedback", "image": "https://agent.ai/icons/search.svg"},
-        {"title": "Course Learn suggest Expectations", "description": "Get expectation & check question for course",
-            "key": "course_suggester", "image": "https://agent.ai/icons/prospecting.svg"},
-        {"title": "Course Lesson Extractor", "description": "Extract lessons for a given course",
-            "key": "lessons_extractor", "image": "https://agent.ai/icons/business-analyst.svg"},
-        {"title": "Article Recommender", "description": "Discover articles tailored to your interests.",
-            "key": "article_recommendor", "image": "https://agent.ai/icons/robot.svg"},
-        {"title": "Recent Article Suggester", "description": "Get suggestions for recent research articles.",
-            "key": "research_article_suggester", "image": "https://agent.ai/icons/data.svg"},
-
-    ]
+    {"title": "TIL Feedback", "description": "Provide your valuable feedback.", "key": "feedback_main_wrapper", "image": "📝"},
+    {"title": "Course Suggester", "description": "Get suggestions for courses", "key": "course_suggester_main_wrapper", "image": "📚"},
+
+]
 
     num_cols = 3
     num_rows = math.ceil(len(card_info) / num_cols)
 
-    col1, col2, col3 = st.columns([1, 8, 1])
+    col1, col2, col3 = st.columns([1,8,1])
 
     with col2:
         for row in range(num_rows):
-            cols = st.columns(num_cols)
+            cols = st.columns(num_cols,gap="large")
             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="""
-                                    {
-                                        background-color: #e9eaec;
-                                        border-radius: 10px;
-                                        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
-                                        padding:10px;
-                                        display: flex;
-                                        flex-direction: row;
-                                        flex-wrap: wrap;
-                                        align-items: center;
-                                        justify-content: center;
-                                        height:1000px;
-                                        border: 1px solid #C0C0C0;
-
-                                    }  """,
-                        ):
-                            with st.container():
-                                st.image(card["image"])
-                            st.markdown(
-                                f"""
-                                    <div style=" display: flex; flex-wrap:wrap; flex-direction: column; text-align: center; justify-content: center; align-items: center">
-                                        <span style="font-weight:900; font-size: 24px;"> {card["title"]}</span>
-                                        <p class="styled-description">{card["description"]}</p>
-                                    </div>
+                        with st.container(height=280,border=False):
+                            with stylable_container(
+                                key="inside_container_with_border",
+                                
+                                css_styles="""
+                                        {
+                                            background-color: #e9eaec;
+                                            border-radius: 10px;
+                                            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+                                            # padding:10px;
+                                            display: flex;
+                                            flex-direction: row;
+                                            flex-wrap: wrap;
+                                            align-items: center;
+                                            justify-content: center;
+                                            border: 1px solid #C0C0C0;
+                                            text-align: center;
+                                            margin-bottom: 10px;
+                                        }  """,
+                                ):
+                                    st.markdown(
+                                        f"""
+                                        <div style="
+                                            font-size: 4rem; 
+                                            margin-bottom: 10px;
+                                        ">
+                                            {card['image']}
+                                        </div>
+                                        """, unsafe_allow_html=True
+                                    )
+                                    st.markdown(
+                                        f"""
+                                        <div style=" display: flex; flex-wrap:wrap; flex-direction: column; text-align: center; justify-content: center; align-items: center">
+                                            <span style="font-weight:900; font-size: 24px;"> {card["title"]}</span>
+                                            <p class="styled-description">{card["description"]}</p>
+                                        </div>
+                                        """, unsafe_allow_html=True
+                                    )
+                                    if st.button("Explore", key=card["key"]):
+                                            router.redirect(*router.build(f"{card['key']}"))
+
+                                    st.markdown(
+                                    """
+                                    <style>
+                                    # [data-testid="stImage"] img {
+                                    #     padding:10px;
+                                    #     height: 100px;
+                                    #     width: 100px;
+                                    #     border-radius: 50%;
+                                    #     border: 2px solid white;
+
+                                    #  } 
+
+                                    [data-testid="column"] div[data-testid="column"]{
+                                            margin: 10px;
+                                        }                            
+                                    </style>
                                     """, unsafe_allow_html=True
-                            )
-                            if st.button("Explore", key=card["key"]):
-                                st.session_state.page = card["key"]
-                            st.markdown(
-                                """
-                                <style>
-                                [data-testid="stImage"] img {
-                                    padding:10px;
-                                    height: 100px;
-                                    width: 100px;
-                                    border-radius: 50%;
-                                    border: 2px solid white;
-
-                                }
-                                [data-testid="column"] {
-                                    text-align: center;
-                                }
-
-                                </style>
-                                """, unsafe_allow_html=True
-                            )
-
-
-if __name__ == '__main__':
-    main()
+                                            )      
+
+
+def feedback_main_wrapper():
+    common_sidebar()
+    feedback_main()
+
+def course_suggester_main_wrapper():
+    common_sidebar()
+    course_suggester_main()
+
+
+                   
+router = sr.StreamlitRouter()
+
+router.register(show_main_page, '/')
+router.register(feedback_main_wrapper, '/feedback', methods=['GET'])
+router.register(course_suggester_main_wrapper, '/course_suggester')
+
+
+router.serve()