Hasan Iqbal commited on
Commit
3780e1f
1 Parent(s): 44f10c1

Added footer and sidebar for Key entry

Browse files
src/openfactcheck/app/app.py CHANGED
@@ -3,7 +3,9 @@ import streamlit as st
3
  from streamlit_option_menu import option_menu
4
 
5
  from openfactcheck.core.base import OpenFactCheck, OpenFactCheckConfig
 
6
  from openfactcheck.app.evaluate_response import evaluate_response
 
7
 
8
  def parse_args():
9
  parser = argparse.ArgumentParser(description='Initialize OpenFactCheck with custom configuration.')
@@ -30,11 +32,18 @@ class App:
30
  # Set up Dashboard
31
  st.set_page_config(page_title="OpenFactCheck Dashboard",
32
  page_icon=":bar_chart:",
33
- layout="wide")
 
 
 
 
 
 
 
34
 
35
  # Title
36
  st.markdown("<h1 style='text-align: center;'>OpenFactCheck Dashboard</h1>", unsafe_allow_html=True)
37
- st.markdown("<h5 style='text-align: center;'>An Open-source Factuality Evaluation Demo for LLMs</h3>", unsafe_allow_html=True)
38
 
39
  # Selection Menu
40
  selected = option_menu(None, ["Evaluate LLM Response", "Evaluate LLM", "Evaluate FactChecker", "Leaderboards", "About"],
@@ -46,6 +55,7 @@ class App:
46
 
47
  # Load the selected page
48
  if selected == "Evaluate LLM Response":
 
49
  evaluate_response(ofc)
50
  # elif selected == "Evaluate LLM":
51
  # evaluate_llm()
@@ -56,6 +66,7 @@ class App:
56
  # else:
57
  # about()
58
 
 
59
  if __name__ == "__main__":
60
  args = parse_args()
61
 
 
3
  from streamlit_option_menu import option_menu
4
 
5
  from openfactcheck.core.base import OpenFactCheck, OpenFactCheckConfig
6
+ from openfactcheck.app.sidebar import sidebar
7
  from openfactcheck.app.evaluate_response import evaluate_response
8
+ from openfactcheck.app.utils import footer
9
 
10
  def parse_args():
11
  parser = argparse.ArgumentParser(description='Initialize OpenFactCheck with custom configuration.')
 
32
  # Set up Dashboard
33
  st.set_page_config(page_title="OpenFactCheck Dashboard",
34
  page_icon=":bar_chart:",
35
+ layout="wide",
36
+ initial_sidebar_state="collapsed")
37
+
38
+ # Set up footer
39
+ footer("Copyright © 2024 MBZUAI | Made with ❤︎ by OpenFactCheck Team")
40
+
41
+ # Set up Sidebar
42
+ sidebar()
43
 
44
  # Title
45
  st.markdown("<h1 style='text-align: center;'>OpenFactCheck Dashboard</h1>", unsafe_allow_html=True)
46
+ st.markdown("<h5 style='text-align: center;'>An Open-source Factuality Evaluation Demo for LLMs</h5>", unsafe_allow_html=True)
47
 
48
  # Selection Menu
49
  selected = option_menu(None, ["Evaluate LLM Response", "Evaluate LLM", "Evaluate FactChecker", "Leaderboards", "About"],
 
55
 
56
  # Load the selected page
57
  if selected == "Evaluate LLM Response":
58
+ st.info("Please provide OpenAI API Key, Serper API Key and Azure Search Key in the sidebar to evaluate LLM response.")
59
  evaluate_response(ofc)
60
  # elif selected == "Evaluate LLM":
61
  # evaluate_llm()
 
66
  # else:
67
  # about()
68
 
69
+
70
  if __name__ == "__main__":
71
  args = parse_args()
72
 
src/openfactcheck/app/sidebar.py ADDED
@@ -0,0 +1,22 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import os
2
+ import streamlit as st
3
+
4
+ def sidebar():
5
+ st.sidebar.markdown("### Configuration")
6
+ st.sidebar.markdown("Please provide the following keys to evaluate LLM response:")
7
+ st.sidebar.info("Keys defined in your environment variables are automatically loaded.")
8
+
9
+ # OpenAI API Key
10
+ st.sidebar.markdown("You can find the OpenAI API Key [here](https://platform.openai.com/account/api-keys).")
11
+ openai_api_key = st.sidebar.text_input("OpenAI API Key", key="openai_key", type="password", value=os.getenv("OPENAI_API_KEY"))
12
+ os.environ["OPENAI_API_KEY"] = openai_api_key
13
+
14
+ # Serper API Key
15
+ st.sidebar.markdown("You can find the Serper API Key [here](https://serpapi.com/dashboard).")
16
+ serper_api_key = st.sidebar.text_input("Serper API Key", key="serper_key", type="password", value=os.getenv("SERPER_API_KEY"))
17
+ os.environ["SERPER_API_KEY"] = serper_api_key
18
+
19
+ # Azure Search Key
20
+ st.sidebar.markdown("You can find the Azure Search Key [here](https://portal.azure.com/).")
21
+ azure_search_key = st.sidebar.text_input("Azure Search Key", key="azure_key", type="password", value=os.getenv("AZURE_SEARCH_KEY"))
22
+ os.environ["AZURE_SEARCH_KEY"] = azure_search_key
src/openfactcheck/app/utils.py CHANGED
@@ -10,26 +10,63 @@ def metric_card(
10
  value: str = "Value",
11
  ) -> None:
12
 
13
- html_str = f"""<div><p style='font-size: 14px;
14
- color: rgb(49, 51, 63);
15
- height: auto;
16
- min-height: 1.5rem;
17
- vertical-align: middle;
18
- flex-direction: row;
19
- -webkit-box-align: center;
20
- align-items: center;
21
- margin-bottom: 0px;
22
- display: grid;
23
- background-color: {background_color};
24
- border: {border_size_px}px solid {border_color};
25
- padding: 5% 5% 5% 10%;
26
- border-radius: {border_radius_px}px;
27
- border-left: 0.5rem solid {border_left_color};'>
28
- {label}
29
- </style><br>
30
- <span style='font-size: 2.25rem;
31
- padding-bottom: 0.25rem;'>{value}</span>
32
- </p></div>"""
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
33
 
34
  st.markdown(html_str, unsafe_allow_html=True)
35
- st.markdown('######')
 
10
  value: str = "Value",
11
  ) -> None:
12
 
13
+ html_str = f"""
14
+ <div>
15
+ <p style='font-size: 14px;
16
+ color: rgb(49, 51, 63);
17
+ height: auto;
18
+ min-height: 1.5rem;
19
+ vertical-align: middle;
20
+ flex-direction: row;
21
+ -webkit-box-align: center;
22
+ align-items: center;
23
+ margin-bottom: 0px;
24
+ display: grid;
25
+ background-color: {background_color};
26
+ border: {border_size_px}px solid {border_color};
27
+ padding: 5% 5% 5% 10%;
28
+ border-radius: {border_radius_px}px;
29
+ border-left: 0.5rem solid {border_left_color};'>
30
+ {label}
31
+ <br>
32
+ <span style='font-size: 2.25rem;
33
+ padding-bottom: 0.25rem;'>
34
+ {value}
35
+ </span>
36
+ </p>
37
+ </div>
38
+ """
39
+ st.markdown(html_str, unsafe_allow_html=True)
40
+ st.markdown('######')
41
+
42
+ def footer(text: str) -> None:
43
+
44
+ style = f"""
45
+ <style>
46
+ #MainMenu {{visibility: hidden;}}
47
+ footer {{visibility: hidden;}}
48
+ .stApp {{ bottom: 52px; }}
49
+ </style>
50
+ """
51
+
52
+ st.markdown(style, unsafe_allow_html=True)
53
+
54
+ html_str = f"""
55
+ <div style='position: fixed;
56
+ left: 0;
57
+ bottom: 0;
58
+ margin: 0 0 0 0;
59
+ width: 100%;
60
+ color: black;
61
+ text-align: center;
62
+ height: auto;
63
+ opacity: 1'>
64
+ <hr style='display: block;
65
+ margin: 8px 8px 8px 8px;
66
+ border-style: inset;
67
+ border-width: 1px' />
68
+ <p>{text}</p>
69
+ </div>
70
+ """
71
 
72
  st.markdown(html_str, unsafe_allow_html=True)