Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
Rahkakavee Baskaran
commited on
Commit
•
542645c
1
Parent(s):
07c01d8
add new descriptions and feedback button
Browse files- src/app.py +31 -28
- style/style.css +38 -8
src/app.py
CHANGED
@@ -3,7 +3,6 @@ import pandas as pd
|
|
3 |
import streamlit as st
|
4 |
|
5 |
|
6 |
-
|
7 |
from rag.pipeline import RAGPipeline
|
8 |
from utils.data import (
|
9 |
build_filter,
|
@@ -89,10 +88,15 @@ def load_app_init() -> None:
|
|
89 |
st.title("INC Plastic Pollution Country Profile Analysis")
|
90 |
|
91 |
# add warning emoji and style
|
|
|
92 |
st.markdown(
|
93 |
"""
|
94 |
-
|
95 |
-
|
|
|
|
|
|
|
|
|
96 |
""",
|
97 |
unsafe_allow_html=True,
|
98 |
)
|
@@ -101,7 +105,9 @@ def load_app_init() -> None:
|
|
101 |
st.markdown(
|
102 |
"""
|
103 |
<p class="description">
|
104 |
-
The app is tailored to enhance the efficiency of finding and accessing information on the UN Plastics Treaty Negotiations. It hosts a comprehensive database of relevant documents available at www.unep.org/inc-plastic-pollution
|
|
|
|
|
105 |
""",
|
106 |
unsafe_allow_html=True,
|
107 |
)
|
@@ -130,6 +136,13 @@ application_col = st.columns(1)
|
|
130 |
|
131 |
with application_col[0]:
|
132 |
st.markdown("""<p class="header"> 1️⃣ Select countries""", unsafe_allow_html=True)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
133 |
selected_authors = st.multiselect(
|
134 |
label="country",
|
135 |
options=countries,
|
@@ -141,24 +154,32 @@ with application_col[0]:
|
|
141 |
st.write("\n")
|
142 |
|
143 |
st.markdown(
|
144 |
-
"""<p class="header"> 2️⃣
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
145 |
)
|
146 |
selected_draft_cats = st.multiselect(
|
147 |
label="Subpart",
|
148 |
options=draft_labels,
|
149 |
label_visibility="collapsed",
|
150 |
-
placeholder="Select draft category/",
|
151 |
)
|
152 |
|
153 |
st.write("\n")
|
154 |
st.write("\n")
|
155 |
|
156 |
st.markdown(
|
157 |
-
"""<p class="header"> 3️⃣
|
158 |
unsafe_allow_html=True,
|
159 |
)
|
160 |
|
161 |
-
|
162 |
|
163 |
with filtering:
|
164 |
application_col_filter, output_col_filter = st.columns([1, 1.5])
|
@@ -167,8 +188,8 @@ with application_col[0]:
|
|
167 |
st.markdown(
|
168 |
"""
|
169 |
<p class="description"> \n
|
170 |
-
-
|
171 |
-
-
|
172 |
""",
|
173 |
unsafe_allow_html=True,
|
174 |
)
|
@@ -310,24 +331,6 @@ with application_col[0]:
|
|
310 |
markdown_text += f" - {content}\n"
|
311 |
st.write(markdown_text)
|
312 |
|
313 |
-
# col4 = st.columns(1)
|
314 |
-
# with col4[0]:
|
315 |
-
# references = []
|
316 |
-
# for document in documents:
|
317 |
-
# authors = document.meta["author"]
|
318 |
-
# authors = authors.replace("'", "").replace("[", "").replace("]", "")
|
319 |
-
# href = document.meta["href"]
|
320 |
-
# source = f"- {authors}: {href}"
|
321 |
-
# references.append(source)
|
322 |
-
# references = list(set(references))
|
323 |
-
# references = sorted(references)
|
324 |
-
# st.markdown("### Overview of all filtered documents")
|
325 |
-
# st.markdown(
|
326 |
-
# f"<p class='description'> The answer above results from the most similar text passages (top 7) from the documents that you can find under 'References' in the answer block. Below you will find an overview of all documents that match the filters you have selected. Please note that the above answer is based specifically on the highlighted references above and does not include the findings from all the filtered documents shown below. \n For your current filtering, {len(references)} documents were found. </p>",
|
327 |
-
# unsafe_allow_html=True,
|
328 |
-
# )
|
329 |
-
# for reference in references:
|
330 |
-
# st.write(reference)
|
331 |
trigger = 0
|
332 |
|
333 |
if trigger_filter:
|
|
|
3 |
import streamlit as st
|
4 |
|
5 |
|
|
|
6 |
from rag.pipeline import RAGPipeline
|
7 |
from utils.data import (
|
8 |
build_filter,
|
|
|
88 |
st.title("INC Plastic Pollution Country Profile Analysis")
|
89 |
|
90 |
# add warning emoji and style
|
91 |
+
|
92 |
st.markdown(
|
93 |
"""
|
94 |
+
<div class="remark">
|
95 |
+
<div class="remark-content">
|
96 |
+
<p class="remark-text"> ⚠️ The app is a beta version that serves as a basis for further development. We are aware that the performance is not yet sufficient and that the data basis is not yet complete. We are grateful for any feedback that contributes to the further development and improvement of the app!</p>
|
97 |
+
</div>
|
98 |
+
<a href="mailto:datalab@giz.de" class="feedback-link">Send feedback</a>
|
99 |
+
</div>
|
100 |
""",
|
101 |
unsafe_allow_html=True,
|
102 |
)
|
|
|
105 |
st.markdown(
|
106 |
"""
|
107 |
<p class="description">
|
108 |
+
The app is tailored to enhance the efficiency of finding and accessing information on the UN Plastics Treaty Negotiations. It hosts a comprehensive database of relevant documents submitted by the members available at <a href="https://www.unep.org/inc-plastic-pollution"> here</a>, which users can explore through an intuitive chatbot interface as well as a simple filtering options.
|
109 |
+
The app excels in querying specific information about countries and their positions in the negotiations, providing targeted and precise answers. However, it can process only up to 8 relevant documents at a time, which may limit responses to more complex inquiries. Filter options by authors and sections of the negotiation draft ensure the accuracy of the answers. Each document found via these filters is also directly accessible via a link, ensuring complete and easy access to the desired information
|
110 |
+
</p>
|
111 |
""",
|
112 |
unsafe_allow_html=True,
|
113 |
)
|
|
|
136 |
|
137 |
with application_col[0]:
|
138 |
st.markdown("""<p class="header"> 1️⃣ Select countries""", unsafe_allow_html=True)
|
139 |
+
st.markdown(
|
140 |
+
"""
|
141 |
+
<p class="description">
|
142 |
+
Please select the countries of interest. Your selection will refine the database to include documents submitted by these countries or recognized groupings such as Small Developing States, the African States Group, etc.Please select the countries of interest. Your selection will refine the database to include documents submitted by these countries or recognized groupings such as Small Developing States, the African States Group, etc. </p>
|
143 |
+
""",
|
144 |
+
unsafe_allow_html=True,
|
145 |
+
)
|
146 |
selected_authors = st.multiselect(
|
147 |
label="country",
|
148 |
options=countries,
|
|
|
154 |
st.write("\n")
|
155 |
|
156 |
st.markdown(
|
157 |
+
"""<p class="header"> 2️⃣ Select parts of the negotiation draft""",
|
158 |
+
unsafe_allow_html=True,
|
159 |
+
)
|
160 |
+
st.markdown(
|
161 |
+
"""
|
162 |
+
<p class="description">
|
163 |
+
Please select the parts of the negotiation draft of interest. The negotiation draft can be accessed <a href="https://www.unep.org/inc-plastic-pollution/session-4/documents"> here</a>. </p>
|
164 |
+
""",
|
165 |
+
unsafe_allow_html=True,
|
166 |
)
|
167 |
selected_draft_cats = st.multiselect(
|
168 |
label="Subpart",
|
169 |
options=draft_labels,
|
170 |
label_visibility="collapsed",
|
171 |
+
placeholder="Select draft category/draft categories",
|
172 |
)
|
173 |
|
174 |
st.write("\n")
|
175 |
st.write("\n")
|
176 |
|
177 |
st.markdown(
|
178 |
+
"""<p class="header"> 3️⃣ Ask a question or show documents based on selected filters""",
|
179 |
unsafe_allow_html=True,
|
180 |
)
|
181 |
|
182 |
+
asking, filtering = st.tabs(["Ask a question", "Filter documents"])
|
183 |
|
184 |
with filtering:
|
185 |
application_col_filter, output_col_filter = st.columns([1, 1.5])
|
|
|
188 |
st.markdown(
|
189 |
"""
|
190 |
<p class="description"> \n
|
191 |
+
- This filter function allows you to see all documents that match the selected filters \n
|
192 |
+
- The documents can be accessed via a link. \n
|
193 |
""",
|
194 |
unsafe_allow_html=True,
|
195 |
)
|
|
|
331 |
markdown_text += f" - {content}\n"
|
332 |
st.write(markdown_text)
|
333 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
334 |
trigger = 0
|
335 |
|
336 |
if trigger_filter:
|
style/style.css
CHANGED
@@ -1,16 +1,46 @@
|
|
1 |
-
/* Style the remark */
|
2 |
.remark {
|
3 |
-
background-color: #
|
4 |
-
border
|
5 |
-
color: #b50d1c;
|
6 |
-
padding: 1rem;
|
7 |
-
margin-bottom: 1rem;
|
8 |
-
border: 1px solid transparent;
|
9 |
border-radius: 4px;
|
10 |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
11 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
12 |
}
|
13 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
14 |
/* Style streamlit general text */
|
15 |
.description {
|
16 |
font-size:20px !important;
|
|
|
|
|
1 |
.remark {
|
2 |
+
background-color: #FFCDD2;
|
3 |
+
border: 1px solid #E57373;
|
|
|
|
|
|
|
|
|
4 |
border-radius: 4px;
|
5 |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
6 |
+
margin-bottom: 1rem;
|
7 |
+
padding: 1rem;
|
8 |
+
}
|
9 |
+
|
10 |
+
.remark-content {
|
11 |
+
display: flex;
|
12 |
+
align-items: center;
|
13 |
}
|
14 |
|
15 |
+
.remark-text {
|
16 |
+
margin-bottom: 0.5rem;
|
17 |
+
font-size: 20;
|
18 |
+
}
|
19 |
+
|
20 |
+
.feedback-link {
|
21 |
+
display: inline-block;
|
22 |
+
background-color: #b50d1c; /* Adjusted color */
|
23 |
+
color: white;
|
24 |
+
border: none;
|
25 |
+
border-radius: 4px;
|
26 |
+
padding: 0.5rem 1rem;
|
27 |
+
text-decoration: none;
|
28 |
+
font-size: 1rem;
|
29 |
+
cursor: pointer;
|
30 |
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Added */
|
31 |
+
}
|
32 |
+
|
33 |
+
.feedback-link:hover {
|
34 |
+
background-color: #8c0716; /* Adjusted hover color */
|
35 |
+
}
|
36 |
+
|
37 |
+
.feedback-link[href^="mailto"] {
|
38 |
+
color: white !important;
|
39 |
+
text-decoration: none !important;
|
40 |
+
}
|
41 |
+
|
42 |
+
|
43 |
+
|
44 |
/* Style streamlit general text */
|
45 |
.description {
|
46 |
font-size:20px !important;
|