Enhance UI for Pages in Streamlit App

src/mvt/.streamlit/config.toml

@@ -1,2 +1,5 @@
 [client]
-showSidebarNavigation = false
+showSidebarNavigation = false
+
+[theme]
+base = "light"

src/mvt/app.py

@@ -4,6 +4,8 @@
 import streamlit_authenticator as stauth
 from menu import menu
 
+st.set_page_config(layout="wide")
+
 # Load the config
 with open('./credentials.yml') as file:
     config = yaml.load(file, Loader=SafeLoader)
@@ -33,15 +35,28 @@
     st.stop()
 elif st.session_state["authentication_status"]: # All the authentication info is stored in the session_state
     # User is connected    
-    authenticator.logout('Logout', 'main') 
+    username = st.session_state['username']
+    role = st.session_state['roles']
+
+    st.markdown(
+        f"""
+        <div style='text-align: center; padding: 0px 0px;'>
+            <p style='font-size: 30px; margin-bottom: 0;'>Hey {username}👋</p>
+            <p style='font-size: 20px; color: gray; margin-top: 5px;'>role: <strong>{role}</strong></p>
+            <h1 style='font-size: 54px; margin-bottom: 0;'>Welcome to AIFAQ</h1>
+            <p style='font-size: 18px; max-width: 600px; margin: auto; padding-bottom:50px;'>
+                An <strong>AI-powered chatbot</strong> built for <em>document Q&A</em>  powered by <a href='https://github.com/hyperledger-labs/aifaq' target='_blank' style='color: teal; text-decoration: none;'>Hyperledger Labs</a>
+            </p>
+        </div>
+        """,
+        unsafe_allow_html=True
+    )
+    col1, col2, col3 = st.columns([5,1,5])
+    with col2:
+        authenticator.logout('Logout', 'main')
 
 # Initialize st.session_state.role to None
 if "roles" not in st.session_state:
     st.session_state.roles = None
 
-st.write("AIFAQ is an AI chatbot powered by https://github.com/hyperledger-labs/aifaq")
-
-st.write(f"You are logged in as {st.session_state['username']}")
-st.write(f"Your role is {st.session_state.roles}")
-
 menu() # Render the dynamic menu!

src/mvt/credentials.yml

@@ -0,0 +1,12 @@
+credentials:
+  usernames:
+    Sumana:
+      email: [email protected]
+      name: Dev User
+      password: '$2b$12$W9PebRoqqSHTqVZReTylj..ug02TaB/EH2lyOrn1RGts0wD9sNiaW'  # Replace with the actual hashed password
+      roles: admin
+
+cookie:
+  name: dev_cookie
+  key: some_random_key
+  expiry_days: 30

src/mvt/menu.py

@@ -7,6 +7,7 @@ def authenticated_menu():
     st.sidebar.page_link("pages/chatbot.py", label="AIFAQ ChatBot")
     if st.session_state.roles in ["admin"]:
         st.sidebar.page_link("pages/config_page.py", label="Config Page")
+        st.sidebar.page_link("pages/ConfigPage.py", label="new config page")
         st.sidebar.page_link("pages/build_knowledgebase.py", label="Build Knowledge Base")
 
 

src/mvt/pages/ConfigPage.py

@@ -0,0 +1,118 @@
+import os
+from os.path import join, isfile
+from utils import load_yaml_file
+import streamlit as st
+from menu import menu_with_redirect
+
+# Redirect to app.py if not logged in, otherwise show the navigation menu
+menu_with_redirect()
+
+# Verify the user's role
+if st.session_state.roles not in ["admin"]:
+    st.warning("You do not have permission to view this page.")
+    st.stop()
+
+st.markdown("# Config Page")
+
+# Read config data
+config_data = load_yaml_file("config.yaml")
+# dataset folder
+dataset_dir = config_data["dataset_path"]
+
+# text files folder
+txt_pth = join(dataset_dir, config_data["text_files"])
+
+# pdf files folder
+pdf_pth = join(dataset_dir, config_data["pdf_files"])
+
+# readthedocs files folder
+rtdocs_pth = join(dataset_dir, config_data["rtdocs_files"])
+
+# yt video folder
+yt_pth = join(dataset_dir, config_data["yt_video_links"])
+# yt video file
+ytpath = os.path.join(yt_pth, "yt_video_links.txt")
+
+yt_content = ""
+# check if the yt links file exists
+if isfile(ytpath):
+    file = open(ytpath, "r")
+    yt_content = file.read()
+    file.close()
+
+# web urls folder
+web_pth = join(dataset_dir, config_data["web_urls"])
+# web urls file
+wbpath = os.path.join(web_pth, "web_urls.txt")
+
+wb_content = ""
+# check if the web links file exists
+if isfile(ytpath):
+    file = open(wbpath, "r")
+    wb_content = file.read()
+    file.close()
+
+# web urls folder
+web_pth = join(dataset_dir, config_data["web_urls"])
+# web urls file
+wbpath = os.path.join(web_pth, "web_urls.txt")
+
+wb_content = ""
+# check if the web links file exists
+if isfile(ytpath):
+    file = open(wbpath, "r")
+    wb_content = file.read()
+    file.close()
+
+
+st.markdown(
+    "Lorem ipsum dolor sit amet. Et nulla sint ea tempora iste qui eligendi corrupti. "
+    "Et eveniet quam non quia quaera"
+)
+
+# Subtitle
+st.markdown("**Please add your documents using the form:**")
+
+with st.container():
+
+    st.markdown(
+        """
+        <style>
+        .section {
+            background-color: #f1ecec;
+            padding: 15px;
+            border-radius: 15px;
+            margin-bottom: 20px;
+        }
+        </style>
+        """,
+        unsafe_allow_html=True
+    )
+    with st.form("config_form"):
+
+        filelist = []
+        for root, dirs, files in os.walk(txt_pth):
+            for file in files:
+                filelist.append(file)
+
+        # Create an HTML string for the file list
+        current_list = f"[{', '.join(filelist)}]" if filelist else "[]"
+
+        # Combine the section HTML with the dynamically generated file list
+        html_content = f"""
+        <div class="section">
+            <b>Text files</b>
+            <p>Current text files: {current_list}</p>
+        </div>
+        """
+
+        # Render the combined HTML content
+        st.markdown(html_content, unsafe_allow_html=True)
+
+        uploaded_text_files = st.file_uploader(
+            "Upload text files", accept_multiple_files=True, type="txt"
+        )
+
+        submitted = st.form_submit_button("Save")
+        if submitted:
+            st.success("Form saved successfully!")