Merge pull request #20 from beautiful-code/ui/mainpage

ui/main.css

@@ -18,7 +18,7 @@ body {
     text-align: center;
     color: #333;
 }
-.card {
+/* .card {
     background-color: #f8f9fa;
     border-radius: 10px;
     padding: 20px;  
@@ -37,5 +37,5 @@ body {
 }
 .card p {
     color: #666;
-}
+} */
 

ui/til_feedback.py

@@ -18,13 +18,32 @@ def main():
         """,
         unsafe_allow_html=True
     )
-    til_content = st.text_area('Enter what you learnt today:',
-                               "* Quantization is the process of reducing the size of LLM models by reducing the underlying weights.\n"
-                               "* The weights are reduced by scaling down the datatypes from a datatype that takes larger space to a data type that takes a smaller space, this is also known as downcasting.\n"
-                               "* Quantization offers benefits such as reduced storage space usage and faster computation.\n"
-                               "* Disadvantages: Answers are less precise\n"
-                               "* I learnt how to use Go Routines to handle concurrency in React.\n",
-                               key='til_content', help='Enter what you learnt today')
+    # til_content = st.text_area('Enter what you learnt today:',
+    #                            "* Quantization is the process of reducing the size of LLM models by reducing the underlying weights.\n"
+    #                            "* The weights are reduced by scaling down the datatypes from a datatype that takes larger space to a data type that takes a smaller space, this is also known as downcasting.\n"
+    #                            "* Quantization offers benefits such as reduced storage space usage and faster computation.\n"
+    #                            "* Disadvantages: Answers are less precise\n"
+    #                            "* I learnt how to use Go Routines to handle concurrency in React.\n",
+    #                            key='til_content', help='Enter what you learnt today')
+
+
+    default_content = (
+        "* Quantization is the process of reducing the size of LLM models by reducing the underlying weights.\n"
+        "* The weights are reduced by scaling down the datatypes from a datatype that takes larger space to a data type that takes a smaller space, this is also known as downcasting.\n"
+        "* Quantization offers benefits such as reduced storage space usage and faster computation.\n"
+        "* Disadvantages: Answers are less precise\n"
+        "* I learnt how to use Go Routines to handle concurrency in React.\n"
+    )
+
+    if 'til_content' not in st.session_state:
+        st.session_state.til_content = default_content
+
+    til_content = st.text_area(
+        'Enter what you learnt today:',
+        value=st.session_state.til_content,
+        key='til_content',
+        help='Enter what you learnt today'
+    )
 
     if st.button("Get Feedback"):
         with st.status(
@@ -51,6 +70,5 @@ def main():
                 if result.get('suggestion') is not None:
                     st.markdown(f"**Suggestion:** {result['suggestion']}")
 
-
 if __name__ == "__main__":
     main()

ui_main.py

@@ -1,4 +1,5 @@
 import streamlit as st
+import math
 from dotenv import load_dotenv
 from streamlit_extras.stylable_container import stylable_container
 from PIL import Image
@@ -39,44 +40,36 @@ def show_main_page():
     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": "Article Recommender", "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
+    num_rows = math.ceil(len(card_info) / 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;
+
+    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: #f8f9fa;
                                     border-radius: 10px;
                                     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
                                     display: flex;
+                                    flex-wrap: wrap;
+                                    flex-direction: column;
                                     justify-content: center;
                                     align-items: center;
-                                    flex-wrap: wrap;
                                     padding:10px;
+                                    margin:10px;
                                 """,
                         ):
                             st.markdown(