front UI change

app.py

@@ -60,6 +60,7 @@ try:
 except Exception as e:
     pass
 
+import requests
 
 # Set up Gradio Theme
 theme = gr.themes.Base(
@@ -322,7 +323,8 @@ async def find_papers(query,after, relevant_content_sources):
             else:
                 continue
             yield docs_html, network_html, summary
-    
+    else :
+        yield "","", ""
 
 
 # --------------------------------------------------------------------
@@ -398,7 +400,7 @@ with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=t
             with gr.Column(scale=2, variant="panel",elem_id = "right-panel"):
 
 
-                with gr.Tabs() as tabs:
+                with gr.Tabs(elem_id = "right_panel_tab") as tabs:
                     with gr.TabItem("Examples",elem_id = "tab-examples",id = 0):
                                         
                         examples_hidden = gr.Textbox(visible = False)
@@ -424,130 +426,148 @@ with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=t
                                 )
                             
                             samples.append(group_examples)
-
-
-                    with gr.Tab("Sources",elem_id = "tab-sources",id = 1) as tab_sources:
-                        sources_textbox = gr.HTML(show_label=False, elem_id="sources-textbox")
-                        docs_textbox = gr.State("")
-                        
                             
-                    
-                    with gr.Tab("Figures",elem_id = "tab-figures",id = 3) as tab_figures:
-                        sources_raw = gr.State()
-                        
-                        with Modal(visible=False, elem_id="modal_figure_galery") as modal:
-                            gallery_component = gr.Gallery(object_fit='scale-down',elem_id="gallery-component", height="80vh")
+                    with gr.Tab("Configuration", id = 10, ) as tab_config:
+                            gr.Markdown("Reminders: You can talk in any language, ClimateQ&A is multi-lingual!")
+
+                            with gr.Row():
+                                dropdown_sources = gr.CheckboxGroup(
+                                    ["IPCC", "IPBES","IPOS"],
+                                    label="Select source",
+                                    value=["IPCC"],
+                                    interactive=True,
+                                )
+                                dropdown_external_sources = gr.CheckboxGroup(
+                                    ["IPCC figures","OpenAlex", "OurWorldInData"],
+                                    label="Select database to search for relevant content",
+                                    value=["IPCC figures"],
+                                    interactive=True,
+                                )
+                            
+                            dropdown_reports = gr.Dropdown(
+                                POSSIBLE_REPORTS,
+                                label="Or select specific reports",
+                                multiselect=True,
+                                value=None,
+                                interactive=True,
+                            )
+
+                            dropdown_audience = gr.Dropdown(
+                                ["Children","General public","Experts"],
+                                label="Select audience",
+                                value="Experts",
+                                interactive=True,
+                            )
                             
-                        show_full_size_figures = gr.Button("Show figures in full size",elem_id="show-figures",interactive=True)    
-                        show_full_size_figures.click(lambda : Modal(visible=True),None,modal)
+                                
+                            after = gr.Slider(minimum=1950,maximum=2023,step=1,value=1960,label="Publication date",show_label=True,interactive=True,elem_id="date-papers", visible=False)
 
-                        figures_cards = gr.HTML(show_label=False, elem_id="sources-figures")
 
+                            output_query = gr.Textbox(label="Query used for retrieval",show_label = True,elem_id = "reformulated-query",lines = 2,interactive = False, visible= False)
+                            output_language = gr.Textbox(label="Language",show_label = True,elem_id = "language",lines = 1,interactive = False, visible= False)                            
 
 
-                    with gr.Tab("Papers",elem_id = "tab-citations",id = 5) as tab_papers:
-                        btn_summary = gr.Button("Summary")
-                         # Fenêtre simulée pour le Summary
-                        with gr.Group(visible=False, elem_id="papers-summary-popup") as summary_popup:
-                            papers_summary = gr.Markdown("### Summary Content", visible=True, elem_id="papers-summary")
+                            dropdown_external_sources.change(lambda x: gr.update(visible = True ) if "OpenAlex" in x else gr.update(visible=False) , inputs=[dropdown_external_sources], outputs=[after])
+                            # dropdown_external_sources.change(lambda x: gr.update(visible = True ) if "OpenAlex" in x else gr.update(visible=False) , inputs=[dropdown_external_sources], outputs=[after], visible=True)
 
-                        btn_relevant_papers = gr.Button("Relevant papers")
-                        # Fenêtre simulée pour les Relevant Papers
-                        with gr.Group(visible=False, elem_id="papers-relevant-popup") as relevant_popup:
-                            papers_html = gr.HTML(show_label=False, elem_id="sources-textbox")
-                            docs_textbox = gr.State("")
 
-                        btn_citations_network = gr.Button("Citations network")
-                        # Fenêtre simulée pour le Citations Network
-                        with Modal(visible=False) as modal:
-                            citations_network = gr.HTML("<h3>Citations Network Graph</h3>", visible=True, elem_id="papers-citations-network")
-                        btn_citations_network.click(lambda: Modal(visible=True), None, modal)
+                    with gr.Tab("Sources",elem_id = "tab-sources",id = 1) as tab_sources:
+                        sources_textbox = gr.HTML(show_label=False, elem_id="sources-textbox")
+                        docs_textbox = gr.State("")
+                    
                     
-
                         
-                    with gr.Tab("Recommended content", elem_id="tab-recommended_content", id=4) as tab_recommended_content:
-                        graphs_container = gr.HTML("<h2>There are no graphs to be displayed at the moment. Try asking another question.</h2>")
-                        current_graphs.change(lambda x : x, inputs=[current_graphs], outputs=[graphs_container])
-
-    
-
-   
-    with gr.Tab("Configuration") as tab_config:
-        gr.Markdown("Reminders: You can talk in any language, ClimateQ&A is multi-lingual!")
-
-
-        dropdown_sources = gr.CheckboxGroup(
-            ["IPCC", "IPBES","IPOS"],
-            label="Select source",
-            value=["IPCC"],
-            interactive=True,
-        )
-        dropdown_external_sources = gr.CheckboxGroup(
-            ["IPCC figures","OpenAlex", "OurWorldInData"],
-            label="Select database to search for relevant content",
-            value=["IPCC figures"],
-            interactive=True,
-        )
-        
-        dropdown_reports = gr.Dropdown(
-            POSSIBLE_REPORTS,
-            label="Or select specific reports",
-            multiselect=True,
-            value=None,
-            interactive=True,
-        )
-
-        dropdown_audience = gr.Dropdown(
-            ["Children","General public","Experts"],
-            label="Select audience",
-            value="Experts",
-            interactive=True,
-        )
+                    with gr.Tab("Recommended content", elem_id="tab-recommended_content",id=2) as tab_recommended_content:
+                        with gr.Tabs(elem_id = "group-subtabs") as tabs_recommended_content:
         
+                            with gr.Tab("Figures",elem_id = "tab-figures",id = 3) as tab_figures:
+                                sources_raw = gr.State()
+                                
+                                with Modal(visible=False, elem_id="modal_figure_galery") as modal:
+                                    gallery_component = gr.Gallery(object_fit='scale-down',elem_id="gallery-component", height="80vh")
+                                    
+                                show_full_size_figures = gr.Button("Show figures in full size",elem_id="show-figures",interactive=True)    
+                                show_full_size_figures.click(lambda : Modal(visible=True),None,modal)
+
+                                figures_cards = gr.HTML(show_label=False, elem_id="sources-figures")
+
+
+
+                            with gr.Tab("Papers",elem_id = "tab-citations",id = 4) as tab_papers:
+                                # btn_summary = gr.Button("Summary")
+                                # Fenêtre simulée pour le Summary
+                                with gr.Accordion(visible=True, elem_id="papers-summary-popup", label= "See summary of relevant papers", open= False) as summary_popup:
+                                    papers_summary = gr.Markdown("", visible=True, elem_id="papers-summary")
+
+                                # btn_relevant_papers = gr.Button("Relevant papers")
+                                # Fenêtre simulée pour les Relevant Papers
+                                with gr.Accordion(visible=True, elem_id="papers-relevant-popup",label= "See relevant papers", open= False) as relevant_popup:
+                                    papers_html = gr.HTML(show_label=False, elem_id="papers-textbox")
+                                    docs_textbox = gr.State("")
+
+                                btn_citations_network = gr.Button("Explore papers citations network")
+                                # Fenêtre simulée pour le Citations Network
+                                with Modal(visible=False) as modal:
+                                    citations_network = gr.HTML("<h3>Citations Network Graph</h3>", visible=True, elem_id="papers-citations-network")
+                                btn_citations_network.click(lambda: Modal(visible=True), None, modal)
+                            
 
-        output_query = gr.Textbox(label="Query used for retrieval",show_label = True,elem_id = "reformulated-query",lines = 2,interactive = False, visible= False)
-        output_language = gr.Textbox(label="Language",show_label = True,elem_id = "language",lines = 1,interactive = False, visible= False)                            
-
-
-
+                                
+                            with gr.Tab("Graphs", elem_id="tab-graphs", id=5) as tab_graphs:
+                                graphs_container = gr.HTML("<h2>There are no graphs to be displayed at the moment. Try asking another question.</h2>",elem_id="graphs-container")
+                                current_graphs.change(lambda x : x, inputs=[current_graphs], outputs=[graphs_container])
+
+                    # with gr.Tab("OECD",elem_id = "tab-oecd",id = 6):
+                    #     oecd_indicator = "RIVER_FLOOD_RP100_POP_SH"
+                    #     oecd_topic = "climate"
+                    #     oecd_latitude = "46.8332"
+                    #     oecd_longitude = "5.3725"
+                    #     oecd_zoom = "5.6442"
+                    #     # Create the HTML content with the iframe
+                    #     iframe_html = f"""
+                    #     <iframe src="https://localdataportal.oecd.org/maps.html?indicator={oecd_indicator}&topic={oecd_topic}&latitude={oecd_latitude}&longitude={oecd_longitude}&zoom={oecd_zoom}"
+                    #             width="100%" height="600" frameborder="0" style="border:0;" allowfullscreen></iframe>
+                    #     """
+                    #     oecd_textbox = gr.HTML(iframe_html, show_label=False, elem_id="oecd-textbox")
 
+   
+   
 
 
 #---------------------------------------------------------------------------------------
 # OTHER TABS
 #---------------------------------------------------------------------------------------
 
-    with gr.Tab("Settings",elem_id = "tab-config",id = 2):
+    # with gr.Tab("Settings",elem_id = "tab-config",id = 2):
 
-        gr.Markdown("Reminder: You can talk in any language, ClimateQ&A is multi-lingual!")
+    #     gr.Markdown("Reminder: You can talk in any language, ClimateQ&A is multi-lingual!")
 
 
-        dropdown_sources = gr.CheckboxGroup(
-            ["IPCC", "IPBES","IPOS", "OpenAlex"],
-            label="Select source",
-            value=["IPCC"],
-            interactive=True,
-        )
+    #     dropdown_sources = gr.CheckboxGroup(
+    #         ["IPCC", "IPBES","IPOS", "OpenAlex"],
+    #         label="Select source",
+    #         value=["IPCC"],
+    #         interactive=True,
+    #     )
 
-        dropdown_reports = gr.Dropdown(
-            POSSIBLE_REPORTS,
-            label="Or select specific reports",
-            multiselect=True,
-            value=None,
-            interactive=True,
-        )
+    #     dropdown_reports = gr.Dropdown(
+    #         POSSIBLE_REPORTS,
+    #         label="Or select specific reports",
+    #         multiselect=True,
+    #         value=None,
+    #         interactive=True,
+    #     )
 
-        dropdown_audience = gr.Dropdown(
-            ["Children","General public","Experts"],
-            label="Select audience",
-            value="Experts",
-            interactive=True,
-        )
+    #     dropdown_audience = gr.Dropdown(
+    #         ["Children","General public","Experts"],
+    #         label="Select audience",
+    #         value="Experts",
+    #         interactive=True,
+    #     )
 
-        after = gr.Slider(minimum=1950,maximum=2023,step=1,value=1960,label="Publication date",show_label=True,interactive=True,elem_id="date-papers")
 
-        output_query = gr.Textbox(label="Query used for retrieval",show_label = True,elem_id = "reformulated-query",lines = 2,interactive = False)
-        output_language = gr.Textbox(label="Language",show_label = True,elem_id = "language",lines = 1,interactive = False)
+    #     output_query = gr.Textbox(label="Query used for retrieval",show_label = True,elem_id = "reformulated-query",lines = 2,interactive = False)
+    #     output_language = gr.Textbox(label="Language",show_label = True,elem_id = "language",lines = 1,interactive = False)
 
 
     with gr.Tab("About",elem_classes = "max-height other-tabs"):
@@ -612,23 +632,24 @@ with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=t
         papers_number = papers_html.count("<h2>")
         sources_notif_label = f"Sources ({sources_number})"
         figures_notif_label = f"Figures ({figures_number})"
-        graphs_notif_label = f"Recommended content ({graphs_number})"
+        graphs_notif_label = f"Graphs ({graphs_number})"
         papers_notif_label = f"Papers ({papers_number})"
+        recommended_content_notif_label = f"Recommended content ({figures_number + graphs_number + papers_number})"
 
-        return gr.update(label = sources_notif_label), gr.update(label = figures_notif_label), gr.update(label = graphs_notif_label), gr.update(label = papers_notif_label)
+        return gr.update(label = recommended_content_notif_label), gr.update(label = sources_notif_label), gr.update(label = figures_notif_label), gr.update(label = graphs_notif_label), gr.update(label = papers_notif_label)
     
     (textbox
         .submit(start_chat, [textbox,chatbot], [textbox,tabs,chatbot],queue = False,api_name = "start_chat_textbox")
         .then(chat, [textbox,chatbot,dropdown_audience, dropdown_sources,dropdown_reports, dropdown_external_sources] ,[chatbot,sources_textbox,output_query,output_language, sources_raw, current_graphs],concurrency_limit = 8,api_name = "chat_textbox")
         .then(finish_chat, None, [textbox],api_name = "finish_chat_textbox")
-        # .then(update_sources_number_display, [sources_textbox, figures_cards, current_graphs,papers_html],[tab_sources, tab_figures, tab_recommended_content, tab_papers] )
+        # .then(update_sources_number_display, [sources_textbox, figures_cards, current_graphs,papers_html],[tab_sources, tab_figures, tab_graphs, tab_papers] )
     )
 
     (examples_hidden
         .change(start_chat, [examples_hidden,chatbot], [textbox,tabs,chatbot],queue = False,api_name = "start_chat_examples")
         .then(chat, [examples_hidden,chatbot,dropdown_audience, dropdown_sources,dropdown_reports, dropdown_external_sources] ,[chatbot,sources_textbox,output_query,output_language, sources_raw, current_graphs],concurrency_limit = 8,api_name = "chat_textbox")
         .then(finish_chat, None, [textbox],api_name = "finish_chat_examples")
-        # .then(update_sources_number_display, [sources_textbox, figures_cards, current_graphs,papers_html],[tab_sources, tab_figures, tab_recommended_content, tab_papers] )
+        # .then(update_sources_number_display, [sources_textbox, figures_cards, current_graphs,papers_html],[tab_sources, tab_figures, tab_graphs, tab_papers] )
     )
 
 
@@ -641,19 +662,21 @@ with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=t
 
     sources_raw.change(process_figures, inputs=[sources_raw], outputs=[figures_cards, gallery_component])
     
-    
-    sources_textbox.change(update_sources_number_display, [sources_textbox, figures_cards, current_graphs,papers_html],[tab_sources, tab_figures, tab_recommended_content, tab_papers])
-    figures_cards.change(update_sources_number_display, [sources_textbox, figures_cards, current_graphs,papers_html],[tab_sources, tab_figures, tab_recommended_content, tab_papers])
-    current_graphs.change(update_sources_number_display, [sources_textbox, figures_cards, current_graphs,papers_html],[tab_sources, tab_figures, tab_recommended_content, tab_papers])
-    papers_html.change(update_sources_number_display, [sources_textbox, figures_cards, current_graphs,papers_html],[tab_sources, tab_figures, tab_recommended_content, tab_papers])
+    # update sources numbers
+    sources_textbox.change(update_sources_number_display, [sources_textbox, figures_cards, current_graphs,papers_html],[tab_recommended_content, tab_sources, tab_figures, tab_graphs, tab_papers])
+    figures_cards.change(update_sources_number_display, [sources_textbox, figures_cards, current_graphs,papers_html],[tab_recommended_content, tab_sources, tab_figures, tab_graphs, tab_papers])
+    current_graphs.change(update_sources_number_display, [sources_textbox, figures_cards, current_graphs,papers_html],[tab_recommended_content, tab_sources, tab_figures, tab_graphs, tab_papers])
+    papers_html.change(update_sources_number_display, [sources_textbox, figures_cards, current_graphs,papers_html],[tab_recommended_content, tab_sources, tab_figures, tab_graphs, tab_papers])
 
+    # other questions examples
     dropdown_samples.change(change_sample_questions,dropdown_samples,samples)
 
+    # search for papers
     textbox.submit(find_papers,[textbox,after, dropdown_external_sources], [papers_html,citations_network,papers_summary])
     examples_hidden.change(find_papers,[examples_hidden,after,dropdown_external_sources], [papers_html,citations_network,papers_summary])
 
-    btn_summary.click(toggle_summary_visibility, outputs=summary_popup)
-    btn_relevant_papers.click(toggle_relevant_visibility, outputs=relevant_popup)
+    # btn_summary.click(toggle_summary_visibility, outputs=summary_popup)
+    # btn_relevant_papers.click(toggle_relevant_visibility, outputs=relevant_popup)
 
     demo.queue()
 

climateqa/engine/chains/retrieve_documents.py

@@ -183,6 +183,23 @@ async def get_IPCC_relevant_documents(
 # The chain callback is not necessary, but it propagates the langchain callbacks to the astream_events logger to display intermediate results
 # @chain
 async def retrieve_documents(state,config, vectorstore,reranker,llm,rerank_by_question=True, k_final=15, k_before_reranking=100, k_summary=5, k_images=5):
+    """
+    Retrieve and rerank documents based on the current question in the state.
+    
+    Args:
+        state (dict): The current state containing documents, related content, relevant content sources, remaining questions and n_questions.
+        config (dict): Configuration settings for logging and other purposes.
+        vectorstore (object): The vector store used to retrieve relevant documents.
+        reranker (object): The reranker used to rerank the retrieved documents.
+        llm (object): The language model used for processing.
+        rerank_by_question (bool, optional): Whether to rerank documents by question. Defaults to True.
+        k_final (int, optional): The final number of documents to retrieve. Defaults to 15.
+        k_before_reranking (int, optional): The number of documents to retrieve before reranking. Defaults to 100.
+        k_summary (int, optional): The number of summary documents to retrieve. Defaults to 5.
+        k_images (int, optional): The number of image documents to retrieve. Defaults to 5.
+    Returns:
+        dict: The updated state containing the retrieved and reranked documents, related content, and remaining questions.
+    """
     print("---- Retrieve documents ----")
     
     # Get the documents from the state

style.css

@@ -2,6 +2,57 @@
 /* :root {
     --user-image: url('https://ih1.redbubble.net/image.4776899543.6215/st,small,507x507-pad,600x600,f8f8f8.jpg');
   } */
+
+#tab-recommended_content{
+    padding-top: 0px;
+    padding-left : 0px;
+    padding-right: 0px;
+}
+#group-subtabs {
+    /* display: block; */
+    width: 100%; /* Ensures the parent uses the full width */
+    position : sticky;
+}
+
+#group-subtabs .tab-container {
+    display: flex;
+    text-align: center;
+    width: 100%; /* Ensures the tabs span the full width */
+}
+
+#group-subtabs .tab-container button {
+    flex: 1; /* Makes each button take equal width */
+}
+
+
+#papers-summary-popup button span{
+    /* make label of accordio in bold, center, and bigger */
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+
+}
+
+#papers-relevant-popup span{
+    /* make label of accordio in bold, center, and bigger */
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+}
+
+
+
+#tab-citations .button{
+    padding: 12px 16px;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
+    border: none;
+    outline: none;
+    text-align: left;
+    transition: background-color 0.3s ease;
+}
+
 .avatar-container.svelte-1x5p6hu:not(.thumbnail-item) img {
     width: 100%;
     height: 100%;
@@ -223,8 +274,9 @@ a {
   }
    */
 
+
 label.selected{
-  background:none !important;
+  background: #93c5fd !important;
 }
 
 #submit-button{
@@ -232,6 +284,12 @@ label.selected{
 }
 
 @media screen and (min-width: 1024px) {
+    /* Additional style for scrollable tab content */
+    /* div#tab-recommended_content {
+        overflow-y: auto; 
+        max-height: 80vh; 
+    } */
+
     .gradio-container {
         max-height: calc(100vh - 190px) !important;
         overflow: hidden;
@@ -242,10 +300,7 @@ label.selected{
 
     } */
 
-    div#tab-citations{
-        height:calc(100vh - 190px) !important;
-        overflow-y: auto !important;
-    }
+
     
     div#tab-examples{
         height:calc(100vh - 190px) !important;
@@ -258,6 +313,10 @@ label.selected{
         overflow-y: scroll !important;
         /* overflow-y: auto !important; */
     }
+    div#graphs-container{
+        height:calc(100vh - 210px) !important;
+        overflow-y: scroll !important;
+    }
 
     div#sources-figures{
         height:calc(100vh - 300px) !important;
@@ -265,6 +324,18 @@ label.selected{
         overflow-y: scroll !important;
     }
 
+    div#graphs-container{
+        height:calc(100vh - 300px) !important;
+        max-height: 90vh !important;
+        overflow-y: scroll !important;
+    }
+
+    div#tab-citations{
+        height:calc(100vh - 300px) !important;
+        max-height: 90vh !important;
+        overflow-y: scroll !important;
+    }
+
     div#tab-config{
         height:calc(100vh - 190px) !important;
         overflow-y: scroll !important;
@@ -553,12 +624,6 @@ span.chatbot > p > img{
     color:red !important;
 }
 
-/* Additional style for scrollable tab content */
-div#tab-recommended_content {
-    overflow-y: auto; /* Enable vertical scrolling */
-    max-height: 80vh; /* Adjust height as needed */
-}
-
 /* Mobile specific adjustments */
 @media screen and (max-width: 767px) {
     div#tab-recommended_content {