momenaca commited on
Commit
109ff5f
1 Parent(s): dcd3a81

update minor readme file and frontend details

Browse files
Files changed (3) hide show
  1. README.md +1 -1
  2. app.py +3 -7
  3. assets/style.css +108 -102
README.md CHANGED
@@ -1,5 +1,5 @@
1
  ---
2
- title: EsrsQ&A
3
  emoji: 🐠
4
  colorFrom: red
5
  colorTo: indigo
 
1
  ---
2
+ title: esrsQ&A
3
  emoji: 🐠
4
  colorFrom: red
5
  colorTo: indigo
app.py CHANGED
@@ -143,9 +143,9 @@ async def chat(
143
 
144
  inputs = {"question": query}
145
  result = final_chain.astream_log({"question": query})
146
- reformulated_question_path_id = "/logs/AzureChatOpenAI/streamed_output_str/-" # "/logs/ChatGroq/streamed_output_str/-"
147
  retriever_path_id = "/logs/Retriever/final_output"
148
- final_answer_path_id = "/logs/AzureChatOpenAI:2/streamed_output_str/-" # "/logs/ChatGroq:2/streamed_output_str/-"
149
 
150
  async for op in result:
151
  op = op.ops[0]
@@ -158,9 +158,6 @@ async def chat(
158
  [(make_html_source(i, doc)) for i, doc in enumerate(sources, 1)]
159
  )
160
 
161
- # if doc.metadata["source"] == "ESRS"
162
- # else make_html_source(i, doc)
163
-
164
  elif op["path"] == final_answer_path_id: # final answer
165
  new_token = op["value"] # str
166
  answer_yet = gradio_format[-1][1]
@@ -185,7 +182,6 @@ def update_visible(oauth_token: gr.OAuthToken | None):
185
  }
186
 
187
  org_names = [org["name"] for org in whoami(oauth_token.token)["orgs"]]
188
- logger.info(org_names)
189
  if "ekimetrics-esrsqa" in org_names: # logged in group
190
  return {
191
  bloc_1: gr.update(visible=False),
@@ -210,7 +206,7 @@ with gr.Blocks(title=f"{demo_name}", css=css) as demo:
210
 
211
  with gr.Column(visible=False) as bloc_3:
212
  textbox_3 = gr.Textbox(
213
- "You are not part of the ESRSQA Project, ask access here : https://huggingface.co/ekimetrics-esrsqa"
214
  )
215
 
216
  with gr.Column(visible=False) as bloc_2:
 
143
 
144
  inputs = {"question": query}
145
  result = final_chain.astream_log({"question": query})
146
+ reformulated_question_path_id = "/logs/AzureChatOpenAI/streamed_output_str/-"
147
  retriever_path_id = "/logs/Retriever/final_output"
148
+ final_answer_path_id = "/logs/AzureChatOpenAI:2/streamed_output_str/-"
149
 
150
  async for op in result:
151
  op = op.ops[0]
 
158
  [(make_html_source(i, doc)) for i, doc in enumerate(sources, 1)]
159
  )
160
 
 
 
 
161
  elif op["path"] == final_answer_path_id: # final answer
162
  new_token = op["value"] # str
163
  answer_yet = gradio_format[-1][1]
 
182
  }
183
 
184
  org_names = [org["name"] for org in whoami(oauth_token.token)["orgs"]]
 
185
  if "ekimetrics-esrsqa" in org_names: # logged in group
186
  return {
187
  bloc_1: gr.update(visible=False),
 
206
 
207
  with gr.Column(visible=False) as bloc_3:
208
  textbox_3 = gr.Textbox(
209
+ "You are not part of the ESRS Q&A Project, ask access here : https://huggingface.co/ekimetrics-esrsqa"
210
  )
211
 
212
  with gr.Column(visible=False) as bloc_2:
assets/style.css CHANGED
@@ -1,7 +1,7 @@
1
- :root {
2
- --user-image: url('https://miro.medium.com/v2/resize:fit:720/format:webp/1*yfAP6bXjeL2oO3AAMepVOg.png');
3
- }
4
-
5
  .warning-box {
6
  background-color: #fff3cd;
7
  border: 1px solid #ffeeba;
@@ -11,29 +11,29 @@
11
  color: #856404;
12
  display: inline-block;
13
  margin-bottom: 15px;
14
- }
15
 
16
 
17
  .tip-box {
18
  background-color: #f0f9ff;
19
  border: 1px solid #80d4fa;
20
  border-radius: 4px;
21
- margin-top:20px;
22
  padding: 15px 20px;
23
  font-size: 14px;
24
  display: inline-block;
25
  margin-bottom: 15px;
26
  width: auto;
27
- color:black !important;
28
  }
29
 
30
  body.dark .warning-box * {
31
- color:black !important;
32
  }
33
 
34
 
35
  body.dark .tip-box * {
36
- color:black !important;
37
  }
38
 
39
 
@@ -48,14 +48,16 @@ body.dark .tip-box * {
48
  margin-right: 5px;
49
  }
50
 
51
- .gr-box {border-color: #d6c37c}
 
 
52
 
53
- #hidden-message{
54
- display:none;
55
  }
56
 
57
- .message{
58
- font-size:14px !important;
59
  }
60
 
61
 
@@ -71,7 +73,7 @@ a {
71
  overflow: hidden;
72
  display: flex;
73
  flex-direction: column;
74
- margin:20px;
75
  }
76
 
77
  .card-content {
@@ -82,8 +84,9 @@ a {
82
  font-size: 14px !important;
83
  font-weight: bold;
84
  margin-bottom: 10px;
85
- margin-top:0px !important;
86
- color:#dc2626!important;;
 
87
  }
88
 
89
  .card-content p {
@@ -110,21 +113,21 @@ a {
110
  display: inline-flex;
111
  align-items: center;
112
  margin-left: auto;
113
- text-decoration: none!important;
114
  font-size: 14px;
115
  }
116
 
117
 
118
 
119
- .message.user{
120
  /* background-color:#7494b0 !important; */
121
- border:none;
122
  /* color:white!important; */
123
  }
124
 
125
- .message.bot{
126
  /* background-color:#f2f2f7 !important; */
127
- border:none;
128
  }
129
 
130
  /* .gallery-item > div:hover{
@@ -169,41 +172,41 @@ a {
169
  }
170
  */
171
 
172
- label.selected{
173
- background:none !important;
174
  }
175
 
176
- #submit-button{
177
- padding:0px !important;
178
  }
179
 
180
 
181
  @media screen and (min-width: 1024px) {
182
- div#tab-examples{
183
- height:calc(100vh - 190px) !important;
184
  overflow-y: auto;
185
  }
186
 
187
- div#sources-textbox{
188
- height:calc(100vh - 190px) !important;
189
  overflow-y: auto !important;
190
  }
191
 
192
- div#tab-config{
193
- height:calc(100vh - 190px) !important;
194
  overflow-y: auto !important;
195
  }
196
 
197
- div#chatbot-row{
198
- height:calc(100vh - 90px) !important;
199
  }
200
 
201
- div#chatbot{
202
- height:calc(100vh - 170px) !important;
203
  }
204
 
205
- .max-height{
206
- height:calc(100vh - 90px) !important;
207
  overflow-y: auto;
208
  }
209
 
@@ -216,19 +219,19 @@ label.selected{
216
 
217
  footer {
218
  visibility: hidden;
219
- display:none !important;
220
  }
221
 
222
 
223
  @media screen and (max-width: 767px) {
224
  /* Your mobile-specific styles go here */
225
 
226
- div#chatbot{
227
- height:500px !important;
228
  }
229
 
230
- #submit-button{
231
- padding:0px !important;
232
  min-width: 80px;
233
  }
234
 
@@ -241,13 +244,13 @@ footer {
241
  div.tab-nav button:first-child {
242
  display: block !important;
243
  }
244
-
245
  /* This will show only the first list item */
246
  div.tab-nav button:nth-child(2) {
247
  display: block !important;
248
  }
249
-
250
- #right-panel button{
251
  display: block !important;
252
  }
253
 
@@ -255,12 +258,12 @@ footer {
255
  }
256
 
257
 
258
- body.dark .card{
259
  background-color: #374151;
260
  }
261
 
262
- body.dark .card-content h2{
263
- color:#f4dbd3 !important;
264
  }
265
 
266
  body.dark .card-footer {
@@ -268,94 +271,97 @@ body.dark .card-footer {
268
  }
269
 
270
  body.dark .card-footer span {
271
- color:white !important;
272
  }
273
 
274
 
275
- .doc-ref{
276
- color:#dc2626!important;
277
- margin-right:1px;
278
  }
279
 
280
- .tabitem{
281
- border:none !important;
282
- }
283
 
284
- .other-tabs > div{
285
- padding-left:40px;
286
- padding-right:40px;
287
- padding-top:10px;
288
  }
289
 
290
- .gallery-item > div{
291
- white-space: normal !important; /* Allow the text to wrap */
292
- word-break: break-word !important; /* Break words to prevent overflow */
293
- overflow-wrap: break-word !important; /* Break long words if necessary */
294
- }
 
 
 
295
 
296
- span.chatbot > p > img{
297
- margin-top:40px !important;
298
  max-height: none !important;
299
  max-width: 80% !important;
300
- border-radius:0px !important;
301
  }
302
 
303
 
304
- .chatbot-caption{
305
- font-size:11px;
306
- font-style:italic;
307
- color:#508094;
308
  }
309
 
310
- .ai-generated{
311
- font-size:11px!important;
312
- font-style:italic;
313
- color:#73b8d4 !important;
314
  }
315
 
316
- .card-image > .card-content{
317
- background-color:#f1f7fa !important;
318
  }
319
 
320
 
321
 
322
- .tab-nav > button.selected{
323
- color:#4b8ec3;
324
- font-weight:bold;
325
- border:none;
326
  }
327
 
328
- .tab-nav{
329
- border:none !important;
330
  }
331
 
332
- #input-textbox > label > textarea{
333
- border-radius:40px;
334
- padding-left:30px;
335
- resize:none;
336
  }
337
 
338
- #input-message > div{
339
- border:none;
340
  }
341
 
342
- #dropdown-samples{
343
- /*! border:none !important; */
344
- /*! border-width:0px !important; */
345
- background:none !important;
346
-
347
  }
348
 
349
- #dropdown-samples > .container > .wrap{
350
- background-color:white;
351
  }
352
 
353
 
354
- #tab-examples > div > .form{
355
- border:none;
356
- background:none !important;
357
  }
358
 
359
- .a-doc-ref{
360
- text-decoration: none !important;
361
  }
 
1
+ /* :root {
2
+ --user-image: url('https://ih1.redbubble.net/image.4776899543.6215/st,small,507x507-pad,600x600,f8f8f8.jpg');
3
+ } */
4
+
5
  .warning-box {
6
  background-color: #fff3cd;
7
  border: 1px solid #ffeeba;
 
11
  color: #856404;
12
  display: inline-block;
13
  margin-bottom: 15px;
14
+ }
15
 
16
 
17
  .tip-box {
18
  background-color: #f0f9ff;
19
  border: 1px solid #80d4fa;
20
  border-radius: 4px;
21
+ margin-top: 20px;
22
  padding: 15px 20px;
23
  font-size: 14px;
24
  display: inline-block;
25
  margin-bottom: 15px;
26
  width: auto;
27
+ color: black !important;
28
  }
29
 
30
  body.dark .warning-box * {
31
+ color: black !important;
32
  }
33
 
34
 
35
  body.dark .tip-box * {
36
+ color: black !important;
37
  }
38
 
39
 
 
48
  margin-right: 5px;
49
  }
50
 
51
+ .gr-box {
52
+ border-color: #d6c37c
53
+ }
54
 
55
+ #hidden-message {
56
+ display: none;
57
  }
58
 
59
+ .message {
60
+ font-size: 14px !important;
61
  }
62
 
63
 
 
73
  overflow: hidden;
74
  display: flex;
75
  flex-direction: column;
76
+ margin: 20px;
77
  }
78
 
79
  .card-content {
 
84
  font-size: 14px !important;
85
  font-weight: bold;
86
  margin-bottom: 10px;
87
+ margin-top: 0px !important;
88
+ color: #dc2626 !important;
89
+ ;
90
  }
91
 
92
  .card-content p {
 
113
  display: inline-flex;
114
  align-items: center;
115
  margin-left: auto;
116
+ text-decoration: none !important;
117
  font-size: 14px;
118
  }
119
 
120
 
121
 
122
+ .message.user {
123
  /* background-color:#7494b0 !important; */
124
+ border: none;
125
  /* color:white!important; */
126
  }
127
 
128
+ .message.bot {
129
  /* background-color:#f2f2f7 !important; */
130
+ border: none;
131
  }
132
 
133
  /* .gallery-item > div:hover{
 
172
  }
173
  */
174
 
175
+ label.selected {
176
+ background: none !important;
177
  }
178
 
179
+ #submit-button {
180
+ padding: 0px !important;
181
  }
182
 
183
 
184
  @media screen and (min-width: 1024px) {
185
+ div#tab-examples {
186
+ height: calc(100vh - 190px) !important;
187
  overflow-y: auto;
188
  }
189
 
190
+ div#sources-textbox {
191
+ height: calc(100vh - 190px) !important;
192
  overflow-y: auto !important;
193
  }
194
 
195
+ div#tab-config {
196
+ height: calc(100vh - 190px) !important;
197
  overflow-y: auto !important;
198
  }
199
 
200
+ div#chatbot-row {
201
+ height: calc(100vh - 90px) !important;
202
  }
203
 
204
+ div#chatbot {
205
+ height: calc(100vh - 170px) !important;
206
  }
207
 
208
+ .max-height {
209
+ height: calc(100vh - 90px) !important;
210
  overflow-y: auto;
211
  }
212
 
 
219
 
220
  footer {
221
  visibility: hidden;
222
+ display: none !important;
223
  }
224
 
225
 
226
  @media screen and (max-width: 767px) {
227
  /* Your mobile-specific styles go here */
228
 
229
+ div#chatbot {
230
+ height: 500px !important;
231
  }
232
 
233
+ #submit-button {
234
+ padding: 0px !important;
235
  min-width: 80px;
236
  }
237
 
 
244
  div.tab-nav button:first-child {
245
  display: block !important;
246
  }
247
+
248
  /* This will show only the first list item */
249
  div.tab-nav button:nth-child(2) {
250
  display: block !important;
251
  }
252
+
253
+ #right-panel button {
254
  display: block !important;
255
  }
256
 
 
258
  }
259
 
260
 
261
+ body.dark .card {
262
  background-color: #374151;
263
  }
264
 
265
+ body.dark .card-content h2 {
266
+ color: #f4dbd3 !important;
267
  }
268
 
269
  body.dark .card-footer {
 
271
  }
272
 
273
  body.dark .card-footer span {
274
+ color: white !important;
275
  }
276
 
277
 
278
+ .doc-ref {
279
+ color: #dc2626 !important;
280
+ margin-right: 1px;
281
  }
282
 
283
+ .tabitem {
284
+ border: none !important;
285
+ }
286
 
287
+ .other-tabs>div {
288
+ padding-left: 40px;
289
+ padding-right: 40px;
290
+ padding-top: 10px;
291
  }
292
 
293
+ .gallery-item>div {
294
+ white-space: normal !important;
295
+ /* Allow the text to wrap */
296
+ word-break: break-word !important;
297
+ /* Break words to prevent overflow */
298
+ overflow-wrap: break-word !important;
299
+ /* Break long words if necessary */
300
+ }
301
 
302
+ span.chatbot>p>img {
303
+ margin-top: 40px !important;
304
  max-height: none !important;
305
  max-width: 80% !important;
306
+ border-radius: 0px !important;
307
  }
308
 
309
 
310
+ .chatbot-caption {
311
+ font-size: 11px;
312
+ font-style: italic;
313
+ color: #508094;
314
  }
315
 
316
+ .ai-generated {
317
+ font-size: 11px !important;
318
+ font-style: italic;
319
+ color: #73b8d4 !important;
320
  }
321
 
322
+ .card-image>.card-content {
323
+ background-color: #f1f7fa !important;
324
  }
325
 
326
 
327
 
328
+ .tab-nav>button.selected {
329
+ color: #4b8ec3;
330
+ font-weight: bold;
331
+ border: none;
332
  }
333
 
334
+ .tab-nav {
335
+ border: none !important;
336
  }
337
 
338
+ #input-textbox>label>textarea {
339
+ border-radius: 40px;
340
+ padding-left: 30px;
341
+ resize: none;
342
  }
343
 
344
+ #input-message>div {
345
+ border: none;
346
  }
347
 
348
+ #dropdown-samples {
349
+ /*! border:none !important; */
350
+ /*! border-width:0px !important; */
351
+ background: none !important;
352
+
353
  }
354
 
355
+ #dropdown-samples>.container>.wrap {
356
+ background-color: white;
357
  }
358
 
359
 
360
+ #tab-examples>div>.form {
361
+ border: none;
362
+ background: none !important;
363
  }
364
 
365
+ .a-doc-ref {
366
+ text-decoration: none !important;
367
  }