Added footer and sidebar for Key entry

src/openfactcheck/app/app.py

@@ -3,7 +3,9 @@ import streamlit as st
 from streamlit_option_menu import option_menu
 
 from openfactcheck.core.base import OpenFactCheck, OpenFactCheckConfig
+from openfactcheck.app.sidebar import sidebar
 from openfactcheck.app.evaluate_response import evaluate_response
+from openfactcheck.app.utils import footer
 
 def parse_args():
     parser = argparse.ArgumentParser(description='Initialize OpenFactCheck with custom configuration.')
@@ -30,11 +32,18 @@ class App:
         # Set up Dashboard
         st.set_page_config(page_title="OpenFactCheck Dashboard", 
                         page_icon=":bar_chart:", 
-                        layout="wide")
+                        layout="wide",
+                        initial_sidebar_state="collapsed")
+        
+        # Set up footer
+        footer("Copyright © 2024 MBZUAI | Made with ❤︎ by OpenFactCheck Team")
+
+        # Set up Sidebar
+        sidebar()
                         
         # Title
         st.markdown("<h1 style='text-align: center;'>OpenFactCheck Dashboard</h1>", unsafe_allow_html=True)
-        st.markdown("<h5 style='text-align: center;'>An Open-source Factuality Evaluation Demo for LLMs</h3>", unsafe_allow_html=True)
+        st.markdown("<h5 style='text-align: center;'>An Open-source Factuality Evaluation Demo for LLMs</h5>", unsafe_allow_html=True)
 
         # Selection Menu
         selected = option_menu(None, ["Evaluate LLM Response", "Evaluate LLM", "Evaluate FactChecker", "Leaderboards", "About"], 
@@ -46,6 +55,7 @@ class App:
 
         # Load the selected page
         if selected == "Evaluate LLM Response":
+            st.info("Please provide OpenAI API Key, Serper API Key and Azure Search Key in the sidebar to evaluate LLM response.")
             evaluate_response(ofc)
         # elif selected == "Evaluate LLM":
         #     evaluate_llm()
@@ -56,6 +66,7 @@ class App:
         # else:
         #     about()
 
+
 if __name__ == "__main__":
     args = parse_args()
 

src/openfactcheck/app/sidebar.py

@@ -0,0 +1,22 @@
+import os
+import streamlit as st
+
+def sidebar():
+    st.sidebar.markdown("### Configuration")
+    st.sidebar.markdown("Please provide the following keys to evaluate LLM response:")
+    st.sidebar.info("Keys defined in your environment variables are automatically loaded.")
+
+    # OpenAI API Key
+    st.sidebar.markdown("You can find the OpenAI API Key [here](https://platform.openai.com/account/api-keys).")
+    openai_api_key = st.sidebar.text_input("OpenAI API Key", key="openai_key", type="password", value=os.getenv("OPENAI_API_KEY"))
+    os.environ["OPENAI_API_KEY"] = openai_api_key
+
+    # Serper API Key
+    st.sidebar.markdown("You can find the Serper API Key [here](https://serpapi.com/dashboard).")
+    serper_api_key = st.sidebar.text_input("Serper API Key", key="serper_key", type="password", value=os.getenv("SERPER_API_KEY"))
+    os.environ["SERPER_API_KEY"] = serper_api_key
+
+    # Azure Search Key
+    st.sidebar.markdown("You can find the Azure Search Key [here](https://portal.azure.com/).")
+    azure_search_key = st.sidebar.text_input("Azure Search Key", key="azure_key", type="password", value=os.getenv("AZURE_SEARCH_KEY"))
+    os.environ["AZURE_SEARCH_KEY"] = azure_search_key

src/openfactcheck/app/utils.py

@@ -10,26 +10,63 @@ def metric_card(
         value: str = "Value",
     ) -> None:
         
-    html_str = f"""<div><p style='font-size: 14px;
-                            color: rgb(49, 51, 63);
-                            height: auto;
-                            min-height: 1.5rem;
-                            vertical-align: middle;
-                            flex-direction: row;
-                            -webkit-box-align: center;
-                            align-items: center;
-                            margin-bottom: 0px;
-                            display: grid;
-                            background-color: {background_color};
-                            border: {border_size_px}px solid {border_color};
-                            padding: 5% 5% 5% 10%;
-                            border-radius: {border_radius_px}px;
-                            border-left: 0.5rem solid {border_left_color};'>
-                {label}
-                </style><br>
-                <span style='font-size: 2.25rem;
-                                padding-bottom: 0.25rem;'>{value}</span>
-                </p></div>"""
+    html_str = f"""
+    <div>
+        <p style='font-size: 14px;
+                  color: rgb(49, 51, 63);
+                  height: auto;
+                  min-height: 1.5rem;
+                  vertical-align: middle;
+                  flex-direction: row;
+                  -webkit-box-align: center;
+                  align-items: center;
+                  margin-bottom: 0px;
+                  display: grid;
+                  background-color: {background_color};
+                  border: {border_size_px}px solid {border_color};
+                  padding: 5% 5% 5% 10%;
+                  border-radius: {border_radius_px}px;
+                  border-left: 0.5rem solid {border_left_color};'>
+            {label}
+            <br>
+            <span style='font-size: 2.25rem;
+                         padding-bottom: 0.25rem;'>
+                {value}
+            </span>
+        </p>
+    </div>
+    """
+    st.markdown(html_str, unsafe_allow_html=True)
+    st.markdown('######')
+
+def footer(text: str) -> None:
+
+    style = f"""
+    <style>
+        #MainMenu {{visibility: hidden;}}
+        footer {{visibility: hidden;}}
+        .stApp {{ bottom: 52px; }}
+    </style>
+    """
+
+    st.markdown(style, unsafe_allow_html=True)
+
+    html_str = f"""
+    <div style='position: fixed;
+                left: 0;
+                bottom: 0;
+                margin: 0 0 0 0;
+                width: 100%;
+                color: black;
+                text-align: center;
+                height: auto;
+                opacity: 1'>
+        <hr style='display: block;
+                   margin: 8px 8px 8px 8px;
+                   border-style: inset;
+                   border-width: 1px' />
+        <p>{text}</p>
+    </div>
+    """
 
     st.markdown(html_str, unsafe_allow_html=True)
-    st.markdown('######')