WIP multiple tabs

app.py

@@ -572,20 +572,23 @@ def create_config_modal(config_open):
             outputs=[config_modal, config_open]
         )
         
-        return (config_modal, dropdown_sources, dropdown_reports, dropdown_external_sources, 
-                search_only, dropdown_audience, after, output_query, output_language)
+        return {
+            "config_open" : config_open,
+            "config_modal": config_modal,
+            "dropdown_sources": dropdown_sources,
+            "dropdown_reports": dropdown_reports,
+            "dropdown_external_sources": dropdown_external_sources,
+            "search_only": search_only,
+            "dropdown_audience": dropdown_audience,
+            "after": after,
+            "output_query": output_query,
+            "output_language": output_language,
+        }
 
-# Main UI Assembly
-with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=theme, elem_id="main-component") as demo:
+def cqa_tab(tab_name):
     # State variables
-    chat_completed_state = gr.State(0)
     current_graphs = gr.State([])
-    saved_graphs = gr.State({})
-    new_sources_hmtl = gr.State([])
-
-    config_open = gr.State(False)
-
-    with gr.Tab("ClimateQ&A"):
+    with gr.Tab(tab_name):
         with gr.Row(elem_id="chatbot-row"):
             # Left column - Chat interface
             with gr.Column(scale=2):
@@ -620,13 +623,32 @@ with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=t
                                     "<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]
-                                )
-
-                    
+    return {
+        "chatbot": chatbot,
+        "textbox": textbox,
+        "tabs": tabs,
+        "sources_raw": sources_raw,
+        "new_figures": new_figures,
+        "current_graphs": current_graphs,
+        "examples_hidden": examples_hidden,
+        "dropdown_samples": dropdown_samples,
+        "samples": samples,
+        "sources_textbox": sources_textbox,
+        "figures_cards": figures_cards,
+        "gallery_component": gallery_component,
+        "config_button": config_button,
+        "papers_html": papers_html,
+        "citations_network": citations_network,
+        "papers_summary": papers_summary,
+        "tab_recommended_content": tab_recommended_content,
+        "tab_sources": tab_sources,
+        "tab_figures": tab_figures,
+        "tab_graphs": tab_graphs,
+        "tab_papers": tab_papers,
+        "graph_container": graphs_container
+    }
+                                
+def about_tab():
     with gr.Tab("About", elem_classes="max-height other-tabs"):
         with gr.Row():
             with gr.Column(scale=1):
@@ -647,10 +669,50 @@ with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=t
                         show_copy_button=True,
                         lines=len(CITATION_TEXT.split('\n')),
                     )
-    # Configuration pannel
-    config_modal, dropdown_sources, dropdown_reports, dropdown_external_sources, search_only, dropdown_audience, after, output_query, output_language = create_config_modal(config_open)
     
-    # Event handlers
+def event_handling(
+    main_tab_components,
+    config_components,
+    tab_name="ClimateQ&A"
+):
+    chatbot = main_tab_components["chatbot"]
+    textbox = main_tab_components["textbox"]
+    tabs = main_tab_components["tabs"]
+    sources_raw = main_tab_components["sources_raw"]
+    new_figures = main_tab_components["new_figures"]
+    current_graphs = main_tab_components["current_graphs"]
+    examples_hidden = main_tab_components["examples_hidden"]
+    dropdown_samples = main_tab_components["dropdown_samples"]
+    samples = main_tab_components["samples"]
+    sources_textbox = main_tab_components["sources_textbox"]
+    figures_cards = main_tab_components["figures_cards"]
+    gallery_component = main_tab_components["gallery_component"]
+    config_button = main_tab_components["config_button"]
+    papers_html = main_tab_components["papers_html"]
+    citations_network = main_tab_components["citations_network"]
+    papers_summary = main_tab_components["papers_summary"]
+    tab_recommended_content = main_tab_components["tab_recommended_content"]
+    tab_sources = main_tab_components["tab_sources"]
+    tab_figures = main_tab_components["tab_figures"]
+    tab_graphs = main_tab_components["tab_graphs"]
+    tab_papers = main_tab_components["tab_papers"]
+    graphs_container = main_tab_components["graph_container"]
+    
+    config_open = config_components["config_open"]
+    config_modal = config_components["config_modal"]
+    dropdown_sources = config_components["dropdown_sources"]
+    dropdown_reports = config_components["dropdown_reports"]
+    dropdown_external_sources = config_components["dropdown_external_sources"]
+    search_only = config_components["search_only"]
+    dropdown_audience = config_components["dropdown_audience"]
+    after = config_components["after"]
+    output_query = config_components["output_query"]
+    output_language = config_components["output_language"]
+    
+    new_sources_hmtl = gr.State([])
+    
+
+     
     config_button.click(
         fn=update_config_modal_visibility,
         inputs=[config_open],
@@ -659,25 +721,21 @@ with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=t
     
     
     (textbox
-        .submit(start_chat, [textbox, chatbot, search_only], [textbox, tabs, chatbot, sources_raw], queue=False, api_name="start_chat_textbox")
+        .submit(start_chat, [textbox, chatbot, search_only], [textbox, tabs, chatbot, sources_raw], queue=False, api_name=f"start_chat_textbox_{tab_name}")
         .then(chat, [textbox, chatbot, dropdown_audience, dropdown_sources, dropdown_reports, dropdown_external_sources, search_only], [chatbot, new_sources_hmtl, output_query, output_language, new_figures, current_graphs], concurrency_limit=8, api_name="chat_textbox")
-        .then(finish_chat, None, [textbox], api_name="finish_chat_textbox")
+        .then(finish_chat, None, [textbox], api_name=f"finish_chat_textbox_{tab_name}")
     )
 
 
 
     (examples_hidden
-        .change(start_chat, [examples_hidden, chatbot, search_only], [textbox, tabs, chatbot, sources_raw], queue=False, api_name="start_chat_examples")
+        .change(start_chat, [examples_hidden, chatbot, search_only], [textbox, tabs, chatbot, sources_raw], queue=False, api_name=f"start_chat_examples_{tab_name}")
         .then(chat, [examples_hidden, chatbot, dropdown_audience, dropdown_sources, dropdown_reports, dropdown_external_sources, search_only], [chatbot, new_sources_hmtl, output_query, output_language, new_figures, current_graphs], concurrency_limit=8, api_name="chat_textbox")
-        .then(finish_chat, None, [textbox], api_name="finish_chat_examples")
+        .then(finish_chat, None, [textbox], api_name=f"finish_chat_examples_{tab_name}")
     )
-    def process_new_docs_html(new_docs, docs):
-        if new_docs:
-            return docs + new_docs
-        return docs
-        # return docs + new_docs
 
     new_sources_hmtl.change(lambda x : x, inputs = [new_sources_hmtl], outputs = [sources_textbox])
+    current_graphs.change(lambda x: x, inputs=[current_graphs], outputs=[graphs_container])
     new_figures.change(process_figures, inputs=[sources_raw, new_figures], outputs=[sources_raw, figures_cards, gallery_component])
 
     # Update sources numbers
@@ -692,7 +750,141 @@ with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=t
     # 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])
+    
+
+def main_ui():
+    config_open = gr.State(False)
+    with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=theme, elem_id="main-component") as demo: 
+        config_components = create_config_modal(config_open)       
+        with gr.Tabs():
+            cqa_components = cqa_tab(tab_name = "ClimateQ&A")
+            local_cqa_components = cqa_tab(tab_name = "Beta - POC Adapt'Action")
+        
+            about_tab()
+        
+        event_handling(cqa_components, config_components, tab_name = 'ClimateQ&A')
+        event_handling(local_cqa_components, config_components, tab_name = 'Beta - POC Adapt\'Action')
+        demo.queue()
+        
+    return demo
+
+
+    
+
+    
+
+# # Main UI Assembly
+# with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=theme, elem_id="main-component") as demo:
+    
+#     # State variables
+#     # chat_completed_state = gr.State(0)
+#     current_graphs = gr.State([])
+#     saved_graphs = gr.State({})
+#     new_sources_hmtl = gr.State([])
+
+#     config_open = gr.State(False)
+
+#     with gr.Tab("ClimateQ&A"):
+#         with gr.Row(elem_id="chatbot-row"):
+#             # Left column - Chat interface
+#             with gr.Column(scale=2):
+#                 chatbot, textbox, config_button = create_chat_interface()
+
+#             # Right column - Content panels
+#             with gr.Column(scale=2, variant="panel", elem_id="right-panel"):
+#                 with gr.Tabs(elem_id="right_panel_tab") as tabs:
+#                     # Examples tab
+#                     with gr.TabItem("Examples", elem_id="tab-examples", id=0):
+#                         examples_hidden, dropdown_samples, samples = create_examples_tab()
+
+#                     # Sources tab
+#                     with gr.Tab("Sources", elem_id="tab-sources", id=1) as tab_sources:
+#                         sources_textbox = gr.HTML(show_label=False, elem_id="sources-textbox")
+
+
+#                     # Recommended content tab
+#                     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:
+#                             # Figures subtab
+#                             with gr.Tab("Figures", elem_id="tab-figures", id=3) as tab_figures:
+#                                 sources_raw, new_figures, used_figures, gallery_component, figures_cards, figure_modal = create_figures_tab()
+
+#                             # Papers subtab
+#                             with gr.Tab("Papers", elem_id="tab-citations", id=4) as tab_papers:
+#                                 papers_summary, papers_html, citations_network, papers_modal = create_papers_tab()
+
+#                             # Graphs subtab
+#                             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"
+#                                 )
+
+
+                    
+#     with gr.Tab("About", elem_classes="max-height other-tabs"):
+#         with gr.Row():
+#             with gr.Column(scale=1):
+#                 gr.Markdown(
+#                     """
+#                     ### More info
+#                     - See more info at [https://climateqa.com](https://climateqa.com/docs/intro/)
+#                     - Feedbacks on this [form](https://forms.office.com/e/1Yzgxm6jbp)
+                                                
+#                     ### Citation
+#                     """
+#                 )
+#                 with gr.Accordion(CITATION_LABEL, elem_id="citation", open=False):
+#                     gr.Textbox(
+#                         value=CITATION_TEXT,
+#                         label="",
+#                         interactive=False,
+#                         show_copy_button=True,
+#                         lines=len(CITATION_TEXT.split('\n')),
+#                     )
+#     # Configuration pannel
+#     config_modal, dropdown_sources, dropdown_reports, dropdown_external_sources, search_only, dropdown_audience, after, output_query, output_language = create_config_modal(config_open)
+    
+#     # Event handlers    
+#     config_button.click(
+#         fn=update_config_modal_visibility,
+#         inputs=[config_open],
+#         outputs=[config_modal, config_open]
+#     )
+    
+    
+#     (textbox
+#         .submit(start_chat, [textbox, chatbot, search_only], [textbox, tabs, chatbot, sources_raw], queue=False, api_name="start_chat_textbox")
+#         .then(chat, [textbox, chatbot, dropdown_audience, dropdown_sources, dropdown_reports, dropdown_external_sources, search_only], [chatbot, new_sources_hmtl, output_query, output_language, new_figures, current_graphs], concurrency_limit=8, api_name="chat_textbox")
+#         .then(finish_chat, None, [textbox], api_name="finish_chat_textbox")
+#     )
+
+
+
+#     (examples_hidden
+#         .change(start_chat, [examples_hidden, chatbot, search_only], [textbox, tabs, chatbot, sources_raw], queue=False, api_name="start_chat_examples")
+#         .then(chat, [examples_hidden, chatbot, dropdown_audience, dropdown_sources, dropdown_reports, dropdown_external_sources, search_only], [chatbot, new_sources_hmtl, output_query, output_language, new_figures, current_graphs], concurrency_limit=8, api_name="chat_textbox")
+#         .then(finish_chat, None, [textbox], api_name="finish_chat_examples")
+#     )
+
+#     new_sources_hmtl.change(lambda x : x, inputs = [new_sources_hmtl], outputs = [sources_textbox])
+#     new_figures.change(process_figures, inputs=[sources_raw, new_figures], outputs=[sources_raw, figures_cards, gallery_component])
+#     current_graphs.change(lambda x: x, inputs=[current_graphs], outputs=[graphs_container])
+    
+#     # 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])
 
-    demo.queue()
+#     demo.queue()
     
+demo = main_ui()
 demo.launch(ssr_mode=False)