src/application/app.py

import base64
from pathlib import Path

import extra_streamlit_components as stx
import streamlit as st

from src.application.views.inc_page import init_inc_page
from src.application.views.knowledge_hub_page import init_knowledge_hub_page
from src.utils.data import load_css


# Function to load and encode the image
def get_base64_image(image_path):
    with open(image_path, "rb") as img_file:
        return base64.b64encode(img_file.read()).decode()


@st.cache_data
def load_css_style() -> None:
    load_css(Path(__file__).parent.parent.parent / "style" / "style.css")


banner = get_base64_image("static/images/banner.jpg")

st.set_page_config(layout="wide")

# Load the custom CSS
load_css_style()


if "active_tab" not in st.session_state:
    st.session_state.active_tab = "1"


# Function to change active tab
def set_active_tab(tab_id):
    st.session_state.active_tab = tab_id


# Use session state to set the default tab in the tab bar
chosen_id = stx.tab_bar(
    data=[
        stx.TabBarItemData(
            id=1,
            title="Welcome to NegotiateAI",
            description="",
        ),
        stx.TabBarItemData(
            id=2,
            title="Interactive Treaty Assistant",
            description="",
        ),
        stx.TabBarItemData(
            id=3,
            title="Plastic Knowledge Hub",
            description="",
        ),
    ],
    default=st.session_state.active_tab,  # Use the active tab from session state
)


if chosen_id == "1":
    # Load the map
    st.html(
        """
        <style>
        /* Container holding the image and the text */
        .container {
        position: relative;
        text-align: center;
        }

    </style>
        </style>
        """
    )

    st.markdown(
        f"""
        <div class="container">
        <img src="data:image/png;base64,{banner}" alt="Image" style="width:100%; opacity: 0.9;">
        </div>
        """,
        unsafe_allow_html=True,
    )

    st.write("")
    st.write("")

    st.header("About")
    
    st.markdown(
        """
        <p class="description">
        The NegotiateAI app is designed to streamline access to critical information on the UN Plastic Treaty Negotiations to develop a legally binding instrument on plastic pollution, including the marine environment. It offers a comprehensive, centralized database of documents submitted by member countries available here, along with an extensive collection of supporting resources, including reports, research papers, and policy briefs. You can find more information 
        about the NegotiateAI project on our <a href="https://www.blog-datalab.com/home/negotiateai/">website</a>.
        """,
        unsafe_allow_html=True,
    )

    st.markdown(
        """<hr style="height:2px;border:none;color:#077493;background-color:#077493;" /> """,
        unsafe_allow_html=True,
    )

    inc_col_description, _, knowledge_hub_description = st.columns(spec=[1, 0.1, 1])
    # Buttons to trigger tab switch
    with inc_col_description:
        st.header("Interactive Treaty Assistant")
        st.markdown(
            """
            <p class="description">
            The Interactive Treaty Assistant simplifies the search and analysis of documents by INC members, enabling negotiators and other interested parties to quickly pinpoint crucial information. With an intuitive interface, The Interactive Treaty Assistant supports treaty-specific queries and provides direct links to relevant documents for deeper research.
            </p>
            """,
            unsafe_allow_html=True,
        )

        if st.button(
            "Interactive Treaty Assistant",
            icon=":material/exit_to_app:",
            type="primary",
        ):
            set_active_tab("2")
            st.rerun()

    with knowledge_hub_description:
        st.header("Plastic Knowledge Hub")

        st.markdown(
            """
            <p class="description"> Amid growing global efforts to curb plastic pollution, the Plastic Knowledge Hub provides access to a vast array of resources, including reports, policy briefs, and research papers from NGOs, research institutions, and other organizations. These documents offer insights from local to global perspectives, helping users understand and address the complexities of plastic waste.
            </p>
            """,
            unsafe_allow_html=True,
        )

        if st.button(
            "Plastic Knowledge Hub", icon=":material/exit_to_app:", type="primary"
        ):
            set_active_tab("3")
            st.rerun()

    st.write("\n")
    st.write("\n")

    inc_col_data, _, knowledge_hub_data = st.columns(spec=[1, 0.1, 1])

    with inc_col_data:
        st.subheader("Treaty Assistant Data")
        st.markdown(
            """
            <p class="description">
            The dataset is based on official documents available on the <a href="https://www.unep.org/inc-plastic-pollution"> INC homepage.</a> It includes all documents submitted by INC members, such as written statements and in-session documents, from both individual members and groups of states, covering all sessions held to date. Documents submitted by observers are currently not included but may be added in the future. We welcome feedback to continuously improve both the app and the dataset.
            </p>
            """,
            unsafe_allow_html=True,
        )

        st.caption(
            """<p style="font-size: 18px; font-weight: bold; color: black"> Data Insight: Number of Submissions by Country </p>""",
            help="The map shows the number of submissions by countries. Darker blue represent a higher number of submissions.",
            unsafe_allow_html=True,
        )

        round_visualization = st.segmented_control(
            "Select Session",
            ["Session 1", "Session 2", "Session 3", "Session 4"],
            selection_mode="single",
            default="Session 4",
        )

        if round_visualization == "Session 1":
            st.image("static/images/choropleth_round_1.png")
        if round_visualization == "Session 2":
            st.image("static/images/choropleth_round_2.png")
        if round_visualization == "Session 3":
            st.image("static/images/choropleth_round_3.png")
        if round_visualization == "Session 4":
            st.image("static/images/choropleth_round_4.png")

        st.write(
            """<p class="description">
            <i>You can go to full screen by hovering over the maps and clicking the full screen icons.<i></p>""",
            unsafe_allow_html=True,
        )

        st.write(
            """<p class="description">
                            Source: <a href='https://www.unep.org/inc-plastic-pollution' target='_blank'>
                Intergovernmental Negotiating Committee on Plastic Pollution</a><br> </p>""",
            unsafe_allow_html=True,
        )

    with knowledge_hub_data:
        st.subheader("Knowledge Hub Data")

        st.markdown(
            """
            <p class="description"> The dataset has been manually selected and is not exhaustive. It represents a curated selection of documents deemed relevant but does not guarantee completeness. The database includes reports, policy briefs, and research papers from NGOs, research institutions, and organizations such as UNEP. The database can be expanded at any time. We welcome contributions and feedback to continuously improve both the app and the dataset. </p>
            """,
            unsafe_allow_html=True,
        )

        st.caption(
            """<p style="font-size: 18px; font-weight: bold; color: black"> Data Insight: Most common Keywords in the Knowledge Hub</p>""",
            help="The word cloud shows the most common keywords extracted from the documents based on a sample",
            unsafe_allow_html=True,
        )

        st.markdown(
            """
        <p style="font-size: 15px; text-align: justify;">The size and color of each word reflects the frequency of its occurrence as a keyword. These keywords were extracted using a natural language processing model. For each document, the five most commonly occurring words were considered. </p>
        """,
            unsafe_allow_html=True,
        )

        st.image("static/images/wordcloud.png")

        st.write(
            """<p class="description">
            <i>You can go to full screen by hovering over the wordcloud and clicking the full screen icon.<i></p>""",
            unsafe_allow_html=True,
        )

    st.markdown(
        """<hr style="height:2px;border:none;color:#077493;background-color:#077493;" /> """,
        unsafe_allow_html=True,
    )

    un_description, _, vision = st.columns(spec=[1, 0.1, 1])

    with un_description:
        st.header("Intergovernmental Negotiating Committee (INC) on Plastic Pollution")
        st.markdown(
            """<p font-size: 10px> Plastic Pollution | Legally Binding Treaty | UN-Negotiations</p>""",
            unsafe_allow_html=True,
        )
        st.markdown(
            """
        <p class="description"> The United Nations have embarked on a monumental task: Negotiating a legally binding agreement to tackle the global plastic pollution crisis. The goal is to establish a robust framework that ends plastic pollution and promotes sustainable production and consumption of plastic worldwide. Representatives from around 180 countries are involved in this extensive process. The resolution to elaborate such a legally binding instrument was adopted in March 2022 at the UN Environment Assembly (UNEA-5.2) in Nairobi. In April 2024, the fourth of five  negotiation rounds was completed, bringing the finalization of a comprehensive draft closer to the fifth and final session in November 2024 in Busan, Republic of Korea. <br> <br>
        The urgent need for a treaty arises from the estimated 4.8 to 12.7 million tons of plastic entering oceans yearly and predictions of global plastic waste production nearly tripling by 2060 without intervention, as an OECD study predicts. Plastic production, heavily reliant on fossil fuels and toxic additives, threatens both the environment and human health, with microplastics found in the human body, even in unborn babies.
        """,
            unsafe_allow_html=True,
        )

    with vision:
        st.header("Vision")
        st.markdown(
            """<p font-size: 10px> Treaty Implementation Assistant | Nation Action Plans | Tailored Recommendations</p>""",
            unsafe_allow_html=True,
        )
        st.markdown(
            """
        <p class="description" > NegotiateAI has shown promising potential to improve negotiation processes and has paved the way for wider adoption and scaling. Building on this foundation, our vision now focuses on creating a contract implementation assistant. Our goal is to support planning in countries, facilitate the implementation of treaty commitments and ensure compliance with reporting and monitoring requirements, especially for the upcoming plastics agreement.
        The planned assistant aims to offer tailored recommendations for implementation plans that are in line with treaty provisions and enable tracking of progress by identifying gaps and addressing challenges to support effective implementation. <br> <br>
        Collaboration and feedback from users and partners are essential as we refine the tool for its next iteration. Our priority is to make the app as valuable and helpful as possible for the target group by tailoring features to their specific needs and addressing real-world challenges they face. Links for providing feedback are included at the bottom of the page.
        </p>
        """,
            unsafe_allow_html=True,
        )

    st.markdown(
        """<hr style="height:2px;border:none;color:#077493;background-color:#077493;" /> """,
        unsafe_allow_html=True,
    )

    st.header("Technological Approach")
    st.markdown(
        """<p font-size: 10px> Retrieval Augmented Generation (RAG) | Semantic Search | Limitations</p>""",
        unsafe_allow_html=True,
    )

    rag_image, _, tech_description = st.columns(
        spec=[1, 0.1, 1], vertical_alignment="center"
    )

    with tech_description:
        st.markdown(
            """
        <p class="description"> The generative component of both applications is based on Retrieval Augmented Generation (RAG) to combine query-based methods with generative AI models. While query-based models extract information from various sources such as PDFs, websites, news articles, online databases, etc., they lack the ability to provide semantic answers in natural language. Conversely, generative models can generate answers independently, but these can be inaccurate. RAG mitigates these problems by leveraging the strengths of both models and minimizing their weaknesses. <br> <br>
        With Retrieval-Augmented Generation (RAG), relevant passages are first filtered from the documents using a machine learning model based on a user query. The context found is then sent to a Generative AI model (in our case OpenAI GPT-4) with the user query. This ensures that the answers are both accurate and easy to understand, offering the best of both worlds: reliable information presented in an entertaining way. <br> <br>
        In line with our efforts to be transparent, we acknowledge certain limitations of our current system. Without filters, the system may have performance issues, resulting in slower response times and less accurate answers, especially for complex questions. These challenges are due in part to resource constraints in the prototype app, which affect both data processing and overall performance.
        """,
            unsafe_allow_html=True,
        )

    with rag_image:
        st.image("static/images/rag.png", use_container_width=True)

    st.markdown(
        """<hr style="height:2px;border:none;color:#077493;background-color:#077493;" /> """,
        unsafe_allow_html=True,
    )

    st.header("Want to support us?")
    col_support, _, _ = st.columns(spec=[1, 0.1, 1])
    with col_support:
        st.markdown(
            """
        <p class="description"> Our priority is to make the app as valuable and helpful as possible for the target group by tailoring features to their specific needs and addressing real-world challenges they face. We, therefore, would appreciate your feedback and support to improve the app. You can fill out a quick feedback form (maximal 5 minutes) or use the in-depth survey (maximal 15 minutes). </p>
        """,
            unsafe_allow_html=True,
        )

    review, in_depth_review, _ = st.columns(spec=[0.7, 1.0, 4], gap="large")
    with review:
        st.link_button(
            label="Feedback",
            url="https://forms.gle/PPT5g558utGDUAGh6",
            icon=":material/reviews:",
        )
    with in_depth_review:
        st.link_button(
            label="Survey",
            url="https://docs.google.com/forms/d/1-WNS0ZdAuystajf2i6iSR5HpRfvV1LYq_TcQfaIMvkA",
            icon=":material/rate_review:",
        )

    logo = get_base64_image("static/images/logo.png")

    st.write("\n")
    st.write("\n")
    st.write("\n")

    st.markdown(
        f"""<div class="footer">
            <h3>About</h3>
            <div class="content">
             The Deutsche Gesellschaft für Internationale Zusammenarbeit (GIZ) GmbH <br>
             is a globally active service provider dedicated to international cooperation <br>
             for sustainable development and it’s active in over 120 countries. <br> <br>
             The GIZ Data Lab specializes in harnessing data for development,  <br>
             driving innovative solutions in international cooperation
             to address <br> real-world  challenges. <br> <br>
             Our work on NegotiateAI started in 2023. You can find more information <br>
             about the NegotiateAI project on our <a href="https://www.blog-datalab.com/home/negotiateai/">website</a>.
            </div>
            <img src="data:image/png;base64,{logo}" class="logo" />
    </div>
    """,
        unsafe_allow_html=True,
    )

if chosen_id == "2":
    init_inc_page()

if chosen_id == "3":
    init_knowledge_hub_page()