Change figures display to gradio modal

app.py

@@ -27,6 +27,8 @@ from azure.storage.fileshare import ShareServiceClient
 
 from utils import create_user_id
 
+from gradio_modal import Modal
+
 
 
 # ClimateQ&A imports
@@ -452,7 +454,16 @@ with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=t
 
 
                     with gr.Tab("Figures",elem_id = "tab-figures",id = 3):
+                        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")
+                        
+
+
 
 
 
@@ -461,8 +472,8 @@ with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=t
 #---------------------------------------------------------------------------------------
 
 
-    with gr.Tab("Figures",elem_id = "tab-images",elem_classes = "max-height other-tabs"):
-        gallery_component = gr.Gallery()
+    # with gr.Tab("Figures",elem_id = "tab-images",elem_classes = "max-height other-tabs"):
+    #     gallery_component = gr.Gallery(object_fit='cover')
 
     # with gr.Tab("Papers (beta)",elem_id = "tab-papers",elem_classes = "max-height other-tabs"):
 

front/utils.py

@@ -138,7 +138,7 @@ def make_html_figure_sources(source,i,img_str):
         <div class="card-content">
             <h2>Image {i} - {title} - Page {int(meta['page_number'])}</h2>
             <p class='ai-generated'>AI-generated description</p>
-            <img src="data:image/png;base64, { img_str } alt="Alt text" />
+            <img src="data:image/png;base64, { img_str }" alt="Alt text" />
 
             <p>{content}</p>
 

requirements.txt

@@ -18,3 +18,4 @@ nvidia-cudnn-cu12==8.9.2.26
 langchain-community==0.2
 msal==1.31
 matplotlib==3.9.2
+gradio-modal==0.0.4