Hasan Iqbal
commited on
Commit
•
3780e1f
1
Parent(s):
44f10c1
Added footer and sidebar for Key entry
Browse files- src/openfactcheck/app/app.py +13 -2
- src/openfactcheck/app/sidebar.py +22 -0
- src/openfactcheck/app/utils.py +58 -21
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</
|
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"""
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
20 |
-
|
21 |
-
|
22 |
-
|
23 |
-
|
24 |
-
|
25 |
-
|
26 |
-
|
27 |
-
|
28 |
-
|
29 |
-
|
30 |
-
|
31 |
-
|
32 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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)
|
|