ui_main.py

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
import math
import streamlit as st
import subprocess

load_dotenv()

subprocess.run(["playwright", "install", "chromium"])



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()
    elif st.session_state.page == "lessons_extractor":
        lessons_extractor_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"]{
            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)
    
    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("---")

    card_info = [
        {"title": "TIL Feedback", "description": "Provide your valuable feedback.", "key": "feedback","image":"https://agent.ai/icons/search.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"},
    ]

    num_cols = 3
    num_rows = math.ceil(len(card_info) / num_cols)

    col1, col2, col3 = st.columns([2,6,2])

    with col2:
        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="""
                                    {
                                        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>
                                    """, 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()