Updated CSS and app

app.py

@@ -2,6 +2,7 @@ import gradio as gr
 from haystack.document_stores import FAISSDocumentStore
 from haystack.nodes import EmbeddingRetriever
 import openai
+import pandas as pd
 import os
 from utils import (
     make_pairs,
@@ -13,15 +14,21 @@ import numpy as np
 from datetime import datetime
 from azure.storage.fileshare import ShareServiceClient
 
+try:
+    from dotenv import load_dotenv
+    load_dotenv()
+except:
+    pass
+
 
 theme = gr.themes.Soft(
     primary_hue="sky",
-    font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"],
+    font=[gr.themes.GoogleFont("Poppins"), "ui-sans-serif", "system-ui", "sans-serif"],
 )
 
 init_prompt = (
     "You are ClimateQA, an AI Assistant by Ekimetrics. "
-    "You are given a question and extracted parts of IPCC reports. "
+    "You are given a question and extracted parts of the IPCC and IPBES reports."
     "Provide a clear and structured answer based on the context provided. "
     "When relevant, use bullet points and lists to structure your answers."
 )
@@ -35,7 +42,7 @@ sources_prompt = (
 
 
 def get_reformulation_prompt(query: str) -> str:
-    return f"""Reformulate the following user message to be a short standalone question in English, in the context of an educationnal discussion about climate change.
+    return f"""Reformulate the following user message to be a short standalone question in English, in the context of an educational discussion about climate change.
 ---
 query: La technologie nous sauvera-t-elle ?
 standalone question: Can technology help humanity mitigate the effects of climate change?
@@ -45,6 +52,10 @@ query: what are our reserves in fossil fuel?
 standalone question: What are the current reserves of fossil fuels and how long will they last?
 language: English
 ---
+query: what are the main causes of climate change?
+standalone question: What are the main causes of climate change in the last century?
+language: English
+---
 query: {query}
 standalone question:"""
 
@@ -59,24 +70,24 @@ openai.api_key = os.environ["api_key"]
 openai.api_base = os.environ["ressource_endpoint"]
 openai.api_version = "2022-12-01"
 
-retrieve_all = EmbeddingRetriever(
+retriever = EmbeddingRetriever(
     document_store=FAISSDocumentStore.load(
-        index_path="./documents/climate_gpt_v2.faiss",
-        config_path="./documents/climate_gpt_v2.json",
+        index_path="./climateqa_v3.faiss",
+        config_path="./climateqa_v3.json",
     ),
     embedding_model="sentence-transformers/multi-qa-mpnet-base-dot-v1",
     model_format="sentence_transformers",
     progress_bar=False,
 )
 
-retrieve_giec = EmbeddingRetriever(
-    document_store=FAISSDocumentStore.load(
-        index_path="./documents/climate_gpt_v2_only_giec.faiss",
-        config_path="./documents/climate_gpt_v2_only_giec.json",
-    ),
-    embedding_model="sentence-transformers/multi-qa-mpnet-base-dot-v1",
-    model_format="sentence_transformers",
-)
+# retrieve_giec = EmbeddingRetriever(
+#     document_store=FAISSDocumentStore.load(
+#         index_path="./documents/climate_gpt_v2_only_giec.faiss",
+#         config_path="./documents/climate_gpt_v2_only_giec.json",
+#     ),
+#     embedding_model="sentence-transformers/multi-qa-mpnet-base-dot-v1",
+#     model_format="sentence_transformers",
+# )
 
 credential = {
     "account_key": os.environ["account_key"],
@@ -90,11 +101,76 @@ share_client = service.get_share_client(file_share_name)
 user_id = create_user_id(10)
 
 
+
+def filter_sources(df,k_summary = 3,k_total = 10,source = "ipcc"):
+    assert source in ["ipcc","ipbes","all"]
+
+    # Filter by source
+    if source == "ipcc":
+        df = df.loc[df["source"]=="IPCC"]
+    elif source == "ipbes":
+        df = df.loc[df["source"]=="IPBES"]
+    else:
+        pass
+
+    # Separate summaries and full reports
+    df_summaries = df.loc[df["report_type"].isin(["SPM","TS"])]
+    df_full = df.loc[~df["report_type"].isin(["SPM","TS"])]
+
+    # Find passages from summaries dataset
+    passages_summaries = df_summaries.head(k_summary)
+
+    # Find passages from full reports dataset
+    passages_fullreports = df_full.head(k_total - len(passages_summaries))
+
+    # Concatenate passages
+    passages = pd.concat([passages_summaries,passages_fullreports],axis = 0,ignore_index = True)
+    return passages
+
+
+def retrieve_with_summaries(query,retriever,k_summary = 3,k_total = 10,source = "ipcc",max_k = 100,threshold = 0.555,as_dict = True):
+    assert max_k > k_total
+    docs = retriever.retrieve(query,top_k = max_k)
+    docs = [{**x.meta,"score":x.score,"content":x.content} for x in docs if x.score > threshold]
+    if len(docs) == 0:
+        return []
+    res = pd.DataFrame(docs)
+    passages_df = filter_sources(res,k_summary,k_total,source)
+    if as_dict:
+        contents = passages_df["content"].tolist()
+        meta = passages_df.drop(columns = ["content"]).to_dict(orient = "records")
+        passages = []
+        for i in range(len(contents)):
+            passages.append({"content":contents[i],"meta":meta[i]})
+        return passages
+    else:
+        return passages_df
+
+
+def make_html_source(source,i):
+    meta = source['meta']
+    return f"""
+<div class="card">
+    <div class="card-content">
+        <h2>Doc {i} - {meta['short_name']} - Page {meta['page_number']}</h2>
+        <p>{source['content']}</p>
+    </div>
+    <div class="card-footer">
+        <span>{meta['name']}</span>
+        <a href="{meta['url']}#page={meta['page_number']}" target="_blank" class="pdf-link">
+            <span role="img" aria-label="Open PDF">🔗</span>
+        </a>
+    </div>
+</div>
+"""
+
+
+
 def chat(
     user_id: str,
     query: str,
     history: list = [system_template],
-    report_type: str = "IPCC only",
+    report_type: str = "IPCC",
     threshold: float = 0.555,
 ) -> tuple:
     """retrieve relevant documents in the document store then query gpt-turbo
@@ -109,12 +185,14 @@ def chat(
         tuple: chat gradio format, chat openai format, sources used.
     """
 
-    if report_type == "All available":
-        retriever = retrieve_all
-    elif report_type == "IPCC only":
-        retriever = retrieve_giec
-    else:
-        raise Exception("report_type arg should be in (All available, IPCC only)")
+    if report_type not in ["IPCC","IPBES"]: report_type = "all"
+    print("Searching in ",report_type," reports")
+    # if report_type == "All available":
+    #     retriever = retrieve_all
+    # elif report_type == "IPCC only":
+    #     retriever = retrieve_giec
+    # else:
+    #     raise Exception("report_type arg should be in (All available, IPCC only)")
 
     reformulated_query = openai.Completion.create(
         engine="climateGPT",
@@ -126,16 +204,29 @@ def chat(
     reformulated_query = reformulated_query["choices"][0]["text"]
     reformulated_query, language = reformulated_query.split("\n")
     language = language.split(":")[1].strip()
-    docs = [d for d in retriever.retrieve(query=reformulated_query, top_k=10) if d.score > threshold]
+
+
+    sources = retrieve_with_summaries(reformulated_query,retriever,k_total = 10,k_summary = 3,as_dict = True,source = report_type.lower(),threshold = threshold)
+    response_retriever = {
+      "language":language,
+      "reformulated_query":reformulated_query,
+      "query":query,
+      "sources":sources,
+    }
+
+    # docs = [d for d in retriever.retrieve(query=reformulated_query, top_k=10) if d.score > threshold]
     messages = history + [{"role": "user", "content": query}]
 
-    if docs:
+    if len(sources) > 0:
         docs_string = []
-        for i, d in enumerate(docs, 1):
-            content = d.content.replace("\r\n", "")
-            docs_string.append(f"📃 doc {i}: {d.meta['file_name']} page {d.meta['page_number']}\n{content}")
-        sources = "\n\n".join([f"Query used for retrieval:\n{reformulated_query}"] + docs_string)
-        messages.append({"role": "system", "content": f"{sources_prompt}\n\n{sources}\n\nAnswer in {language}:"})
+        docs_html = []
+        for i, d in enumerate(sources, 1):
+            docs_string.append(f"📃 Doc {i}: {d['meta']['short_name']} page {d['meta']['page_number']}\n{d['content']}")
+            docs_html.append(make_html_source(d,i))
+        docs_string = "\n\n".join([f"Query used for retrieval:\n{reformulated_query}"] + docs_string)
+        docs_html = "\n\n".join([f"Query used for retrieval:\n{reformulated_query}"] + docs_html)
+        messages.append({"role": "system", "content": f"{sources_prompt}\n\n{docs_string}\n\nAnswer in {language}:"})
+
 
         response = openai.Completion.create(
             engine="climateGPT",
@@ -167,14 +258,14 @@ def chat(
                 complete_response += chunk_message
                 messages[-1]["content"] = complete_response
                 gradio_format = make_pairs([a["content"] for a in messages[1:]])
-                yield gradio_format, messages, sources
+                yield gradio_format, messages, docs_html
 
     else:
-        sources = "⚠️ No relevant passages found in the climate science reports"
-        complete_response = "**⚠️ No relevant passages found in the climate science reports, you may want to ask a more specific question (specifying your question on climate issues).**"
+        docs_string = "⚠️ No relevant passages found in the climate science reports (IPCC and IPBES)"
+        complete_response = "**⚠️ No relevant passages found in the climate science reports (IPCC and IPBES), you may want to ask a more specific question (specifying your question on climate issues).**"
         messages.append({"role": "assistant", "content": complete_response})
         gradio_format = make_pairs([a["content"] for a in messages[1:]])
-        yield gradio_format, messages, sources
+        yield gradio_format, messages, docs_string
 
 
 def save_feedback(feed: str, user_id):
@@ -205,35 +296,11 @@ with gr.Blocks(title="🌍 Climate Q&A", css="style.css", theme=theme) as demo:
     # Gradio
     gr.Markdown("<h1><center>Climate Q&A 🌍</center></h1>")
     gr.Markdown("<h4><center>Ask climate-related questions to the IPCC reports</center></h4>")
-    with gr.Row():
-        with gr.Column(scale=1):
-            gr.Markdown(
-                """
-<p><b>Climate change and environmental disruptions have become some of the most pressing challenges facing our planet today</b>. As global temperatures rise and ecosystems suffer, it is essential for individuals to understand the gravity of the situation in order to make informed decisions and advocate for appropriate policy changes.</p>
-<p>However, comprehending the vast and complex scientific information can be daunting, as the scientific consensus references, such as <b>the Intergovernmental Panel on Climate Change (IPCC) reports, span thousands of pages</b>. To bridge this gap and make climate science more accessible, we introduce <b>ClimateQ&A as a tool to distill expert-level knowledge into easily digestible insights about climate science.</b></p>
-<div class="tip-box">
-<div class="tip-box-title">
-    <span class="light-bulb" role="img" aria-label="Light Bulb">💡</span>
-    How does ClimateQ&A work?
-</div>
-ClimateQ&A harnesses modern OCR techniques to parse and preprocess IPCC reports. By leveraging state-of-the-art question-answering algorithms, <i>ClimateQ&A is able to sift through the extensive collection of climate scientific reports and identify relevant passages in response to user inquiries</i>. Furthermore, the integration of the ChatGPT API allows ClimateQ&A to present complex data in a user-friendly manner, summarizing key points and facilitating communication of climate science to a wider audience.
-</div>
-
-<div class="warning-box">
-Version 0.2-beta - This tool is under active development
-</div>
-
-
-"""
-            )
 
-        with gr.Column(scale=1):
-            gr.Markdown("![](https://i.postimg.cc/fLvsvMzM/Untitled-design-5.png)")
-            gr.Markdown("*Source : IPCC AR6 - Synthesis Report of the IPCC 6th assessment report (AR6)*")
 
     with gr.Row():
         with gr.Column(scale=2):
-            chatbot = gr.Chatbot(elem_id="chatbot", label="ClimateQ&A chatbot")
+            chatbot = gr.Chatbot(elem_id="chatbot", label="ClimateQ&A chatbot",show_label = False)
             state = gr.State([system_template])
 
             with gr.Row():
@@ -245,15 +312,15 @@ Version 0.2-beta - This tool is under active development
 
             examples_questions = gr.Examples(
                 [
-                    "What are the main causes of climate change?",
+                    "Is climate change caused by humans?",
+                    "What evidence do we have of climate change?",
                     "What are the impacts of climate change?",
                     "Can climate change be reversed?",
                     "What is the difference between climate change and global warming?",
-                    "What can individuals do to address climate change? Answer with bullet points",
-                    "What evidence do we have of climate change?",
+                    "What can individuals do to address climate change?",
+                    "What are the main causes of climate change?",
                     "What is the Paris Agreement and why is it important?",
                     "Which industries have the highest GHG emissions?",
-                    "Is climate change caused by humans?",
                     "Is climate change a hoax created by the government or environmental organizations?",
                     "What is the relationship between climate change and biodiversity loss?",
                     "What is the link between gender equality and climate change?",
@@ -284,19 +351,21 @@ Version 0.2-beta - This tool is under active development
 
         with gr.Column(scale=1, variant="panel"):
             gr.Markdown("### Sources")
-            sources_textbox = gr.Textbox(interactive=False, show_label=False, max_lines=50)
+            sources_textbox = gr.Markdown(show_label=False)
 
+    dropdown_sources = gr.inputs.Dropdown(
+        ["IPCC", "IPBES","IPCC and IPBES"],
+        default="IPCC",
+        label="Select reports",
+    )
     ask.submit(
         fn=chat,
         inputs=[
             user_id_state,
             ask,
             state,
-            gr.inputs.Dropdown(
-                ["IPCC only", "All available"],
-                default="IPCC only",
-                label="Select reports",
-            ),
+            dropdown_sources
+
         ],
         outputs=[chatbot, state, sources_textbox],
     )
@@ -308,10 +377,38 @@ Version 0.2-beta - This tool is under active development
             user_id_state,
             ask_examples_hidden,
             state,
+            dropdown_sources
         ],
         outputs=[chatbot, state, sources_textbox],
     )
 
+
+    with gr.Row():
+        with gr.Column(scale=1):
+            gr.Markdown(
+                """
+<p><b>Climate change and environmental disruptions have become some of the most pressing challenges facing our planet today</b>. As global temperatures rise and ecosystems suffer, it is essential for individuals to understand the gravity of the situation in order to make informed decisions and advocate for appropriate policy changes.</p>
+<p>However, comprehending the vast and complex scientific information can be daunting, as the scientific consensus references, such as <b>the Intergovernmental Panel on Climate Change (IPCC) reports, span thousands of pages</b>. To bridge this gap and make climate science more accessible, we introduce <b>ClimateQ&A as a tool to distill expert-level knowledge into easily digestible insights about climate science.</b></p>
+<div class="tip-box">
+<div class="tip-box-title">
+    <span class="light-bulb" role="img" aria-label="Light Bulb">💡</span>
+    How does ClimateQ&A work?
+</div>
+ClimateQ&A harnesses modern OCR techniques to parse and preprocess IPCC reports. By leveraging state-of-the-art question-answering algorithms, <i>ClimateQ&A is able to sift through the extensive collection of climate scientific reports and identify relevant passages in response to user inquiries</i>. Furthermore, the integration of the ChatGPT API allows ClimateQ&A to present complex data in a user-friendly manner, summarizing key points and facilitating communication of climate science to a wider audience.
+</div>
+
+<div class="warning-box">
+Version 0.2-beta - This tool is under active development
+</div>
+
+
+"""
+            )
+
+        with gr.Column(scale=1):
+            gr.Markdown("![](https://i.postimg.cc/fLvsvMzM/Untitled-design-5.png)")
+            gr.Markdown("*Source : IPCC AR6 - Synthesis Report of the IPCC 6th assessment report (AR6)*")
+
     gr.Markdown("## How to use ClimateQ&A")
     with gr.Row():
         with gr.Column(scale=1):
@@ -322,7 +419,7 @@ Version 0.2-beta - This tool is under active development
         - ClimateQ&A retrieves specific passages from the IPCC reports to help answer your question accurately.
         - Source information, including page numbers and passages, is displayed on the right side of the screen for easy verification.
         - Feel free to ask follow-up questions within the chatbot for a more in-depth understanding.
-    - ClimateQ&A integrates multiple sources (IPCC, IPBES, IEA, … ) to cover various aspects of environmental science, such as climate change, biodiversity, energy, economy, and pollution. See all sources used below.
+    - ClimateQ&A integrates multiple sources (IPCC and IPBES, … ) to cover various aspects of environmental science, such as climate change and biodiversity. See all sources used below.
     """
             )
         with gr.Column(scale=1):
@@ -342,24 +439,26 @@ Version 0.2-beta - This tool is under active development
         """
     ### Beta test
     - ClimateQ&A welcomes community contributions. To participate, head over to the Community Tab and create a "New Discussion" to ask questions and share your insights.
-    - Provide feedback through our feedback form, letting us know which insights you found accurate, useful, or not. Your input will help us improve the platform.
-    - Only a few sources (see below) are integrated (all IPCC, IPBES, IEA recent reports), if you are a climate science researcher and net to sift through another report, please let us know.
+    - Provide feedback through email, letting us know which insights you found accurate, useful, or not. Your input will help us improve the platform.
+    - Only a few sources (see below) are integrated (all IPCC, IPBES), if you are a climate science researcher and net to sift through another report, please let us know.
+    
+    If you need us to ask another climate science report or ask any question, contact us at <b>[email protected]</b>
     """
     )
-    with gr.Row():
-        with gr.Column(scale=1):
-            gr.Markdown("### Feedbacks")
-            feedback = gr.Textbox(label="Write your feedback here")
-            feedback_output = gr.Textbox(label="Submit status")
-            feedback_save = gr.Button(value="submit feedback")
-            feedback_save.click(
-                save_feedback,
-                inputs=[feedback, user_id_state],
-                outputs=feedback_output,
-            )
-            gr.Markdown(
-                "If you need us to ask another climate science report or ask any question, contact us at <b>[email protected]</b>"
-            )
+    # with gr.Row():
+    #     with gr.Column(scale=1):
+    #         gr.Markdown("### Feedbacks")
+    #         feedback = gr.Textbox(label="Write your feedback here")
+    #         feedback_output = gr.Textbox(label="Submit status")
+    #         feedback_save = gr.Button(value="submit feedback")
+    #         feedback_save.click(
+    #             save_feedback,
+    #             inputs=[feedback, user_id_state],
+    #             outputs=feedback_output,
+    #         )
+    #         gr.Markdown(
+    #             "If you need us to ask another climate science report or ask any question, contact us at <b>[email protected]</b>"
+    #         )
 
     #     with gr.Column(scale=1):
     #         gr.Markdown("### OpenAI API")
@@ -451,4 +550,4 @@ For developers, the methodology used is detailed below :
 
     demo.queue(concurrency_count=16)
 
-demo.launch()
+demo.launch(server_port = 8080)

style.css

@@ -1,3 +1,8 @@
+
+:root {
+    --user-image: url('https://ih1.redbubble.net/image.4776899543.6215/st,small,507x507-pad,600x600,f8f8f8.jpg');
+  }
+
 .warning-box {
     background-color: #fff3cd;
     border: 1px solid #ffeeba;
@@ -42,4 +47,118 @@
 
 .message{
     font-size:14px !important;
-}
+}
+
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+.card {
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    margin:20px;
+}
+
+.card-content {
+    padding: 20px;
+}
+
+.card-content h2 {
+    font-size: 14px !important;
+    font-weight: bold;
+    margin-bottom: 10px;
+    margin-top:0px !important;
+    color:#577b9b!important;;
+}
+
+.card-content p {
+    font-size: 12px;
+    margin-bottom: 0;
+}
+
+.card-footer {
+    background-color: #f4f4f4;
+    font-size: 10px;
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.card-footer span {
+    flex-grow: 1;
+    text-align: left;
+    color: #999 !important;
+}
+
+.pdf-link {
+    display: inline-flex;
+    align-items: center;
+    margin-left: auto;
+    text-decoration: none!important;
+    font-size: 14px;
+}
+
+
+
+.message.user{
+    background-color:#7494b0 !important;
+    border:none;
+    color:white!important;
+}
+
+.message.bot{
+    background-color:#f2f2f7 !important;
+    border:none;
+}
+
+.gallery-item > div:hover{
+    background-color:#7494b0 !important;
+    color:white!important;
+}
+
+.gallery-item:hover{
+    border:#7494b0 !important;
+}
+
+.gallery-item > div{
+    background-color:white !important;
+    color:#577b9b!important;
+}
+
+.label{
+    color:#577b9b!important;
+}
+
+.paginate{
+    color:#577b9b!important;
+}
+
+
+label > span{
+    background-color:white !important;
+    color:#577b9b!important;
+}
+
+/* Pseudo-element for the circularly cropped picture */
+.message.bot::before {
+    content: '';
+    position: absolute;
+    top: -10px;
+    left: -10px;
+    width: 30px;
+    height: 30px;
+    background-image: var(--user-image);
+    background-size: cover;
+    background-position: center;
+    border-radius: 50%;
+    z-index: 10;
+  }
+  
+