ui(course_learn): Add expectation & Check Question

ui/course_learn_suggest_expectations.py

@@ -0,0 +1,132 @@
+import streamlit as st
+from workflows.courses.suggest_expectations import SuggestExpectations
+from streamlit_extras.stylable_container import stylable_container
+from workflows.courses.expectation_revision import ExpectationRevision
+
+
+def main():
+    st.markdown("""
+    <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;
+        }
+    .header {
+        font-size: 38px;
+        font-weight: bold;
+        text-align: center;
+        color: #4b8bbe;
+        margin-bottom: 20px;
+    }
+    .subheader {
+        font-size: 24px;
+        font-weight: bold;
+        color: #4b8bbe;
+    }
+    .button:hover {
+        background-color: #357ab8;
+    }
+
+    .expectation {
+        font-weight: bold;
+        color: #333333;
+    }
+    .check-question {
+        color: #666666;
+        font-weight: bold;
+    }
+     input[type='text'] {
+        border: 2px solid #A0A0A0;
+        padding: 10px;
+        border-radius: 5px;
+        background-color: white;
+        font-size: 16px;
+    }
+    .stTextArea textarea {
+        height: 100px;
+        border: 2px solid #A0A0A0;
+    }
+
+    </style>
+""", unsafe_allow_html=True)
+    _, col2, _ = st.columns([2, 6, 2])
+
+    default_content = {
+        "course": "SQL",
+        "module": "Query Optimization Techniques",
+        "tasks": [
+            "Watch this video https://youtu.be/BHwzDmr6d7s?si=sfFYnd73y9w0EjGB to understand SQL execution order and some optimization techniques.",
+            "Watch this video https://youtu.be/FoznjTU929c?si=6M3xUIUwAxE6EbKS to understand SQL explain command usage.",
+            "Go over these articles https://intellipaat.com/blog/sql-optimization-techniques/ & https://www.thoughtspot.com/data-trends/data-modeling/optimizing-sql-queries  to understand various query optimization techniques."
+        ]
+    }
+
+    st.session_state_inputs = st.session_state_inputs if 'session_state' in st.session_state else default_content
+
+    with col2:
+        st.markdown(
+            "<div class='header'>Course Learn Suggest Expectation</div>", unsafe_allow_html=True)
+        course = st.text_input("##### Course Name", key="course",
+                               help="Enter the name of the course", value=st.session_state_inputs["course"])
+        module = st.text_input("##### Module Name", key="module",
+                               help="Enter the name of the module", value=st.session_state_inputs["module"])
+        tasks = st.text_area("##### Tasks", key="tasks", value="\n".join(
+            st.session_state_inputs["tasks"]), help="Enter the tasks to be covered in the module")
+
+        suggester = SuggestExpectations()
+        inputs = {"course": course, "module": module,
+                  "tasks": tasks.split('\n')}
+
+        if st.button("Get Suggestions", key="suggestions", help="Click to get suggestions"):
+            responses = suggester.kickoff(inputs=inputs)
+            st.session_state.responses = responses
+
+        if 'responses' in st.session_state:
+            for response in st.session_state.responses["expectations"]:
+                with stylable_container(
+                    key="response-container",
+                    css_styles="""
+                        {
+                            background-color: #ffffff;
+                            padding: 20px;
+                            border-radius: 10px;
+                            margin-top: 20px;
+                            border: 1px solid #C0C0C0;
+                            background-color: #f5f5f5;
+                            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+                            display:flex;
+                            flex-wrap: wrap;
+                            flex-direction: column;
+                        }
+                            .response{
+                                font-size: 20px;
+                                line-height: 1.5;
+                                margin-bottom: 10px;
+                            }
+                    """,
+                ):
+                    inner1, _ = st.columns([9, 1])
+                    with inner1:
+                        st.markdown(
+                            f"<div class='response'><span class='expectation'>Expectation: </span> {response['expectation']}</div>", unsafe_allow_html=True)
+                        st.markdown(
+                            f"<div class='response'><span class='check-question'>Check Question: </span> {response['check_question']}</div>", unsafe_allow_html=True)
+                        feedback = st.text_input(
+                            "Feedback", key=f"feedback_{response['expectation']}", help="Enter your feedback here")
+                        if st.button("Reload suggestions", key=f"reload_{response['expectation']}"):
+                            rework = ExpectationRevision()
+                            feedback_inputs = {
+                                "expectation": response["expectation"], "check_question": response["check_question"], "request": feedback}
+                            suggestions = rework.kickoff(
+                                inputs=feedback_inputs)
+                            st.write(suggestions)
+
+
+if __name__ == "__main__":
+    main()

ui_main.py

@@ -3,7 +3,8 @@ 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.til_feedback import feedback_main
+from ui.course_learn_suggest_expectations import main as course_suggester_main
 import math
 import streamlit as st
 import subprocess
@@ -13,11 +14,11 @@ 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:
@@ -33,9 +34,13 @@ def main():
         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")
+    st.set_page_config(page_title='Growthy AI Workflows',
+                       page_icon='📰', layout="wide")
     page_bg_img = '''
         <style>
         [data-testid="stAppViewContainer"]{
@@ -48,30 +53,38 @@ def show_main_page():
         [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('<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"},
+        {"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"},
+
     ]
 
     num_cols = 3
     num_rows = math.ceil(len(card_info) / num_cols)
 
-    col1, col2, col3 = st.columns([2,6,2])
+    col1, col2, col3 = st.columns([1, 8, 1])
 
     with col2:
         for row in range(num_rows):
@@ -96,22 +109,22 @@ def show_main_page():
                                         justify-content: center;
                                         height:1000px;
                                         border: 1px solid #C0C0C0;
-                                        
+
                                     }  """,
-                            ):
-                                with st.container():
-                                        st.image(card["image"])
-                                st.markdown(
-                                    f"""
+                        ):
+                            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(
+                            )
+                            if st.button("Explore", key=card["key"]):
+                                st.session_state.page = card["key"]
+                            st.markdown(
                                 """
                                 <style>
                                 [data-testid="stImage"] img {
@@ -124,11 +137,12 @@ def show_main_page():
                                 }
                                 [data-testid="column"] {
                                     text-align: center;
-                                }                      
+                                }
 
                                 </style>
                                 """, unsafe_allow_html=True
-                                        )      
-                   
+                            )
+
+
 if __name__ == '__main__':
     main()