timeki commited on
Commit
196d793
β€’
2 Parent(s): 57a1ed7 6b6c0ac

Merge branch 'main' into feature/graph_recommandation

Browse files
Files changed (4) hide show
  1. app.py +16 -3
  2. front/utils.py +1 -1
  3. requirements.txt +1 -0
  4. style.css +18 -6
app.py CHANGED
@@ -29,6 +29,9 @@ from utils import create_user_id
29
 
30
  from langchain_chroma import Chroma
31
  from collections import defaultdict
 
 
 
32
 
33
  # ClimateQ&A imports
34
  from climateqa.engine.llm import get_llm
@@ -141,8 +144,9 @@ async def chat(query,history,audience,sources,reports,current_graphs):
141
  gallery = []
142
  updates = []
143
  start_streaming = False
144
- figures = '<div class="figures-container"> <p> Go to the "Figures" tab at the top of the page to see full size images </p> </div>'
145
  graphs_html = ""
 
 
146
  steps_display = {
147
  "categorize_intent":("πŸ”„οΈ Analyzing user message",True),
148
  "transform_query":("πŸ”„οΈ Thinking step by step to answer the question",True),
@@ -561,7 +565,16 @@ with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=t
561
 
562
 
563
  with gr.Tab("Figures",elem_id = "tab-figures",id = 3):
 
 
 
 
 
 
564
  figures_cards = gr.HTML(show_label=False, elem_id="sources-figures")
 
 
 
565
 
566
 
567
 
@@ -621,8 +634,8 @@ with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=t
621
 
622
 
623
 
624
- with gr.Tab("Figures",elem_id = "tab-images",elem_classes = "max-height other-tabs"):
625
- gallery_component = gr.Gallery()
626
 
627
  # with gr.Tab("Papers (beta)",elem_id = "tab-papers",elem_classes = "max-height other-tabs"):
628
 
 
29
 
30
  from langchain_chroma import Chroma
31
  from collections import defaultdict
32
+ from gradio_modal import Modal
33
+
34
+
35
 
36
  # ClimateQ&A imports
37
  from climateqa.engine.llm import get_llm
 
144
  gallery = []
145
  updates = []
146
  start_streaming = False
 
147
  graphs_html = ""
148
+ figures = '<div class="figures-container"><p></p> </div>'
149
+
150
  steps_display = {
151
  "categorize_intent":("πŸ”„οΈ Analyzing user message",True),
152
  "transform_query":("πŸ”„οΈ Thinking step by step to answer the question",True),
 
565
 
566
 
567
  with gr.Tab("Figures",elem_id = "tab-figures",id = 3):
568
+ with Modal(visible=False, elem_id="modal_figure_galery") as modal:
569
+ gallery_component = gr.Gallery(object_fit='scale-down',elem_id="gallery-component", height="80vh")
570
+
571
+ show_full_size_figures = gr.Button("Show figures in full size",elem_id="show-figures",interactive=True)
572
+ show_full_size_figures.click(lambda : Modal(visible=True),None,modal)
573
+
574
  figures_cards = gr.HTML(show_label=False, elem_id="sources-figures")
575
+
576
+
577
+
578
 
579
 
580
 
 
634
 
635
 
636
 
637
+ # with gr.Tab("Figures",elem_id = "tab-images",elem_classes = "max-height other-tabs"):
638
+ # gallery_component = gr.Gallery(object_fit='cover')
639
 
640
  # with gr.Tab("Papers (beta)",elem_id = "tab-papers",elem_classes = "max-height other-tabs"):
641
 
front/utils.py CHANGED
@@ -217,7 +217,7 @@ def make_html_figure_sources(source,i,img_str):
217
  <div class="card-content">
218
  <h2>Image {i} - {title} - Page {int(meta['page_number'])}</h2>
219
  <p class='ai-generated'>AI-generated description</p>
220
- <img src="data:image/png;base64, { img_str } alt="Alt text" />
221
 
222
  <p>{content}</p>
223
 
 
217
  <div class="card-content">
218
  <h2>Image {i} - {title} - Page {int(meta['page_number'])}</h2>
219
  <p class='ai-generated'>AI-generated description</p>
220
+ <img src="data:image/png;base64, { img_str }" alt="Alt text" />
221
 
222
  <p>{content}</p>
223
 
requirements.txt CHANGED
@@ -18,3 +18,4 @@ nvidia-cudnn-cu12==8.9.2.26
18
  langchain-community==0.2
19
  msal==1.31
20
  matplotlib==3.9.2
 
 
18
  langchain-community==0.2
19
  msal==1.31
20
  matplotlib==3.9.2
21
+ gradio-modal==0.0.4
style.css CHANGED
@@ -17,6 +17,16 @@ main.flex.flex-1.flex-col {
17
  max-height: 95vh !important;
18
  }
19
 
 
 
 
 
 
 
 
 
 
 
20
 
21
  .avatar-container.svelte-1x5p6hu:not(.thumbnail-item) img {
22
  width: 100%;
@@ -215,7 +225,6 @@ label.selected{
215
  max-height: calc(100vh - 190px) !important;
216
  overflow: hidden;
217
  }
218
-
219
  /* div#chatbot{
220
  height:calc(100vh - 170px) !important;
221
  max-height:calc(100vh - 170px) !important;
@@ -224,21 +233,25 @@ label.selected{
224
 
225
  div#tab-examples{
226
  height:calc(100vh - 190px) !important;
 
227
  /* overflow-y: auto; */
228
  }
229
 
230
  div#sources-textbox{
231
  height:calc(100vh - 190px) !important;
 
232
  /* overflow-y: auto !important; */
233
  }
234
 
235
  div#sources-figures{
236
- height:calc(100vh - 190px) !important;
237
- /* overflow-y: auto !important; */
 
238
  }
239
 
240
  div#tab-config{
241
  height:calc(100vh - 190px) !important;
 
242
  /* overflow-y: auto !important; */
243
  }
244
 
@@ -248,12 +261,11 @@ label.selected{
248
  overflow: hidden;
249
  }
250
 
251
- /*
252
  div#chatbot-row{
253
- height:calc(100vh - 90px) !important;
254
  max-height:calc(100vh - 90px) !important;
255
  }
256
-
257
 
258
 
259
  .max-height{
 
17
  max-height: 95vh !important;
18
  }
19
 
20
+ button#show-figures{
21
+ /* Base styles */
22
+ background-color: #f5f5f5;
23
+ border: 1px solid #e0e0e0;
24
+ border-radius: 4px;
25
+ color: #333333;
26
+ cursor: pointer;
27
+ width: 100%;
28
+ text-align: center;
29
+ }
30
 
31
  .avatar-container.svelte-1x5p6hu:not(.thumbnail-item) img {
32
  width: 100%;
 
225
  max-height: calc(100vh - 190px) !important;
226
  overflow: hidden;
227
  }
 
228
  /* div#chatbot{
229
  height:calc(100vh - 170px) !important;
230
  max-height:calc(100vh - 170px) !important;
 
233
 
234
  div#tab-examples{
235
  height:calc(100vh - 190px) !important;
236
+ overflow-y: scroll !important;
237
  /* overflow-y: auto; */
238
  }
239
 
240
  div#sources-textbox{
241
  height:calc(100vh - 190px) !important;
242
+ overflow-y: scroll !important;
243
  /* overflow-y: auto !important; */
244
  }
245
 
246
  div#sources-figures{
247
+ height:calc(100vh - 300px) !important;
248
+ max-height: 90vh !important;
249
+ overflow-y: scroll !important;
250
  }
251
 
252
  div#tab-config{
253
  height:calc(100vh - 190px) !important;
254
+ overflow-y: scroll !important;
255
  /* overflow-y: auto !important; */
256
  }
257
 
 
261
  overflow: hidden;
262
  }
263
 
264
+
265
  div#chatbot-row{
 
266
  max-height:calc(100vh - 90px) !important;
267
  }
268
+ /*
269
 
270
 
271
  .max-height{