beautiful-code/ai_workflows

1from dotenv import load_dotenv2from streamlit_extras.stylable_container import stylable_container3from app.ui.til_feedback import feedback_main4from app.ui.course_learn_suggest_expectations import course_suggester_main5import math6import streamlit as st7import subprocess8import streamlit_router as sr9 10load_dotenv()11 12subprocess.run(["playwright", "install", "chromium"])13 14st.set_page_config(page_title='Growthy AI Workflows', page_icon='📰',layout="wide")15 16def load_css(file_name):17    with open(file_name) as f:18        return f.read()19 20def common_sidebar():21    st.sidebar.markdown("# Sidebar Navigation")22    st.sidebar.markdown("---")23    st.sidebar.markdown("### Pages")24    st.sidebar.button("Home", on_click=lambda: router.redirect(*router.build("show_main_page")))25    st.sidebar.button("TIL Feedback", on_click=lambda: router.redirect(*router.build("feedback_main_wrapper")))26    st.sidebar.button("Course Suggester", on_click=lambda: router.redirect(*router.build("course_builder_main_wrapper")))27 28 29 30def show_main_page():31    page_bg_img = '''32        <style>33        [data-testid="stAppViewContainer"]{34            background-image:url("https://www.shutterstock.com/image-vector/abstract-technology-communication-concept-vector-600nw-1914443275.jpg");35            background-size:cover;36        }37        [data-testid="stHeader"]{38            background: rgba(0,0,0,0);39        }40        [data-testid="stToolbar"]{41            right: 2rem;42        }43        [data-testid="column"] {44                text-align: center;45                                }46 47        </style>48        '''49    st.markdown(page_bg_img, unsafe_allow_html=True)50 51    css = load_css("app/ui/main.css")52 53    st.markdown(f"<style>{css}</style>", unsafe_allow_html=True)54 55    st.markdown('<div class="main-title">Welcome to Growthy AI Workflows!</div>', unsafe_allow_html=True)56    st.markdown("---")57 58    card_info = [59    {"title": "TIL Feedback", "description": "Provide your valuable feedback.", "key": "feedback_main_wrapper", "image": "📝"},60    {"title": "Course Builder", "description": "Get suggestions for building courses", "key": "course_builder_main_wrapper", "image": "📚"},61 62]63 64    num_cols = 365    num_rows = math.ceil(len(card_info) / num_cols)66 67    col1, col2, col3 = st.columns([1,8,1])68 69    with col2:70        for row in range(num_rows):71            cols = st.columns(num_cols,gap="large")72            for col in range(num_cols):73                index = row * num_cols + col74                if index < len(card_info):75                    card = card_info[index]76                    with cols[col]:77                        with st.container(height=280,border=False):78                            with stylable_container(79                                key="inside_container_with_border",80 81                                css_styles="""82                                        {83                                            background-color: #e9eaec;84                                            border-radius: 10px;85                                            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);86                                            # padding:10px;87                                            display: flex;88                                            flex-direction: row;89                                            flex-wrap: wrap;90                                            align-items: center;91                                            justify-content: center;92                                            border: 1px solid #C0C0C0;93                                            text-align: center;94                                            margin-bottom: 10px;95                                        }  """,96                                ):97                                    st.markdown(98                                        f"""99                                        <div style="100                                            font-size: 4rem;101                                            margin-bottom: 10px;102                                        ">103                                            {card['image']}104                                        </div>105                                        """, unsafe_allow_html=True106                                    )107                                    st.markdown(108                                        f"""109                                        <div style=" display: flex; flex-wrap:wrap; flex-direction: column; text-align: center; justify-content: center; align-items: center">110                                            <span style="font-weight:900; font-size: 24px;"> {card["title"]}</span>111                                            <p class="styled-description">{card["description"]}</p>112                                        </div>113                                        """, unsafe_allow_html=True114                                    )115                                    if st.button("Explore", key=card["key"]):116                                            router.redirect(*router.build(f"{card['key']}"))117 118                                    st.markdown(119                                    """120                                    <style>121                                    # [data-testid="stImage"] img {122                                    #     padding:10px;123                                    #     height: 100px;124                                    #     width: 100px;125                                    #     border-radius: 50%;126                                    #     border: 2px solid white;127 128                                    #  }129 130                                    [data-testid="column"] div[data-testid="column"]{131                                            margin: 10px;132                                        }133                                    </style>134                                    """, unsafe_allow_html=True135                                            )136 137 138def feedback_main_wrapper():139    common_sidebar()140    feedback_main()141 142def course_builder_main_wrapper():143    common_sidebar()144    course_suggester_main()145 146 147 148router = sr.StreamlitRouter()149 150router.register(show_main_page, '/')151router.register(feedback_main_wrapper, '/feedback', methods=['GET'])152router.register(course_builder_main_wrapper, '/course_builder')153 154 155router.serve()156