Ankur Goyal commited on
Commit
d207d63
1 Parent(s): 87500f1

Rework layout

Browse files
Files changed (1) hide show
  1. app.py +113 -49
app.py CHANGED
@@ -92,6 +92,7 @@ def process_path(path):
92
  return (
93
  document,
94
  gr.update(visible=True, value=document.preview),
 
95
  gr.update(visible=False, value=None),
96
  )
97
  except Exception:
@@ -99,6 +100,7 @@ def process_path(path):
99
  return (
100
  None,
101
  gr.update(visible=False, value=None),
 
102
  gr.update(visible=False, value=None),
103
  )
104
 
@@ -110,6 +112,7 @@ def process_upload(file):
110
  return (
111
  None,
112
  gr.update(visible=False, value=None),
 
113
  gr.update(visible=False, value=None),
114
  )
115
 
@@ -147,76 +150,146 @@ def process_question(question, document, model=list(CHECKPOINTS.keys())[0]):
147
 
148
 
149
  def load_example_document(img, question, model):
150
- document = ImageDocument(Image.fromarray(img))
151
- preview, answer = process_question(question, document, model)
152
- return document, question, preview, answer
 
 
 
 
153
 
154
 
155
  CSS = """
 
 
 
 
 
 
156
  #short-upload-box .w-full {
157
  min-height: 10rem !important;
158
  }
159
- #question input {
160
- font-size: 16px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
161
  }
162
  """
163
 
164
  with gr.Blocks(css=CSS) as demo:
165
  gr.Markdown("# DocQuery: Query Documents w/ NLP")
 
 
 
 
 
 
 
 
166
  document = gr.Variable()
167
  example_question = gr.Textbox(visible=False)
168
  example_image = gr.Image(visible=False)
169
 
170
- gr.Markdown("## 1. Upload a file or select an example")
171
  with gr.Row(equal_height=True):
172
  with gr.Column():
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
173
  upload = gr.File(
174
- label="Upload a file", interactive=True, elem_id="short-upload-box"
 
 
 
 
175
  )
176
- url = gr.Textbox(label="... or a URL", interactive=True)
177
- gr.Examples(
178
- examples=examples,
179
- inputs=[example_image, example_question],
180
- )
181
-
182
- gr.Markdown("## 2. Ask a question")
183
-
184
- with gr.Row(equal_height=True):
185
- question = gr.Textbox(
186
- label="Question",
187
- placeholder="e.g. What is the invoice number?",
188
- lines=1,
189
- max_lines=1,
190
- elem_id="question",
191
- )
192
- model = gr.Radio(
193
- choices=list(CHECKPOINTS.keys()),
194
- value=list(CHECKPOINTS.keys())[0],
195
- label="Model",
196
- )
197
 
198
- with gr.Row():
199
- clear_button = gr.Button("Clear", variant="secondary")
200
- submit_button = gr.Button("Submit", variant="primary", elem_id="submit-button")
 
 
 
 
 
 
 
 
 
 
201
 
202
- with gr.Row():
203
- image = gr.Gallery(visible=False)
204
- with gr.Column():
205
- output = gr.JSON(label="Output", visible=False)
 
 
 
206
 
 
 
 
 
 
 
 
 
 
 
 
207
  clear_button.click(
208
  lambda _: (
209
  gr.update(visible=False, value=None),
210
  None,
211
  None,
212
  gr.update(visible=False, value=None),
 
213
  ),
214
  inputs=clear_button,
215
- outputs=[image, document, question, output],
216
  )
217
 
218
- upload.change(fn=process_upload, inputs=[upload], outputs=[document, image, output])
219
- url.change(fn=process_path, inputs=[url], outputs=[document, image, output])
220
 
221
  question.submit(
222
  fn=process_question,
@@ -237,17 +310,8 @@ with gr.Blocks(css=CSS) as demo:
237
  example_image.change(
238
  fn=load_example_document,
239
  inputs=[example_image, example_question, model],
240
- outputs=[document, question, image, output],
241
- )
242
-
243
- gr.Markdown("### More Info")
244
- gr.Markdown(
245
- "DocQuery uses LayoutLMv1 fine-tuned on DocVQA, a document visual question"
246
- " answering dataset, as well as SQuAD, which boosts its English-language comprehension."
247
- " To use it, simply upload an image or PDF, type a question, and click 'submit', or "
248
- " click one of the examples to load them."
249
  )
250
- gr.Markdown("[Github Repo](https://github.com/impira/docquery)")
251
 
252
  if __name__ == "__main__":
253
- demo.launch()
 
92
  return (
93
  document,
94
  gr.update(visible=True, value=document.preview),
95
+ gr.update(visible=True),
96
  gr.update(visible=False, value=None),
97
  )
98
  except Exception:
 
100
  return (
101
  None,
102
  gr.update(visible=False, value=None),
103
+ gr.update(visible=False),
104
  gr.update(visible=False, value=None),
105
  )
106
 
 
112
  return (
113
  None,
114
  gr.update(visible=False, value=None),
115
+ gr.update(visible=False),
116
  gr.update(visible=False, value=None),
117
  )
118
 
 
150
 
151
 
152
  def load_example_document(img, question, model):
153
+ if img is not None:
154
+ print(f"LOADING EXAMPLE {question}")
155
+ document = ImageDocument(Image.fromarray(img))
156
+ preview, answer = process_question(question, document, model)
157
+ return document, question, preview, gr.update(visible=True), answer
158
+ else:
159
+ return None, None, None, gr.update(visible=False), None
160
 
161
 
162
  CSS = """
163
+ #question input {
164
+ font-size: 16px;
165
+ }
166
+ #url-textbox {
167
+ padding: 0 !important;
168
+ }
169
  #short-upload-box .w-full {
170
  min-height: 10rem !important;
171
  }
172
+ /* I think something like this can be used to re-shape
173
+ * the table
174
+ */
175
+ /*
176
+ .gr-samples-table tr {
177
+ display: inline;
178
+ }
179
+ .gr-samples-table .p-2 {
180
+ width: 100px;
181
+ }
182
+ */
183
+ #select-a-file {
184
+ width: 100%;
185
+ }
186
+ #file-clear {
187
+ padding-top: 2px !important;
188
+ padding-bottom: 2px !important;
189
+ padding-left: 8px !important;
190
+ padding-right: 8px !important;
191
+ }
192
+ .gradio-container.light .gr-button-primary {
193
+ background: linear-gradient(180deg, #CDF9BE 0%, #AFF497 100%);
194
+ border: 1px solid #B0DCCC;
195
+ border-radius: 8px;
196
+ color: #1B8700;
197
+ }
198
+ .gradio-container.dark button#submit-button {
199
+ background: linear-gradient(180deg, #CDF9BE 0%, #AFF497 100%);
200
+ border: 1px solid #B0DCCC;
201
+ border-radius: 8px;
202
+ color: #1B8700
203
  }
204
  """
205
 
206
  with gr.Blocks(css=CSS) as demo:
207
  gr.Markdown("# DocQuery: Query Documents w/ NLP")
208
+ gr.Markdown(
209
+ "DocQuery uses LayoutLMv1 fine-tuned on DocVQA, a document visual question"
210
+ " answering dataset, as well as SQuAD, which boosts its English-language comprehension."
211
+ " To use it, simply upload an image or PDF, type a question, and click 'submit', or "
212
+ " click one of the examples to load them."
213
+ " [Github Repo](https://github.com/impira/docquery)"
214
+ )
215
+
216
  document = gr.Variable()
217
  example_question = gr.Textbox(visible=False)
218
  example_image = gr.Image(visible=False)
219
 
 
220
  with gr.Row(equal_height=True):
221
  with gr.Column():
222
+ with gr.Row():
223
+ gr.Markdown("## 1. Select a file", elem_id="select-a-file")
224
+ img_clear_button = gr.Button(
225
+ "Clear", variant="secondary", elem_id="file-clear", visible=False
226
+ )
227
+ image = gr.Gallery(visible=False)
228
+ with gr.Row(equal_height=True):
229
+ url = gr.Textbox(
230
+ show_label=False,
231
+ placeholder="URL",
232
+ lines=1,
233
+ max_lines=1,
234
+ elem_id="url-textbox",
235
+ )
236
+ submit = gr.Button("Get")
237
+ gr.Markdown("— or —")
238
  upload = gr.File(
239
+ label=" - or -", interactive=True, elem_id="short-upload-box"
240
+ )
241
+ gr.Examples(
242
+ examples=examples,
243
+ inputs=[example_image, example_question],
244
  )
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
245
 
246
+ with gr.Column() as col:
247
+ gr.Markdown("## 2. Ask a question")
248
+ question = gr.Textbox(
249
+ label="Question",
250
+ placeholder="e.g. What is the invoice number?",
251
+ lines=1,
252
+ max_lines=1,
253
+ )
254
+ model = gr.Radio(
255
+ choices=list(CHECKPOINTS.keys()),
256
+ value=list(CHECKPOINTS.keys())[0],
257
+ label="Model",
258
+ )
259
 
260
+ with gr.Row():
261
+ clear_button = gr.Button("Clear", variant="secondary")
262
+ submit_button = gr.Button(
263
+ "Submit", variant="primary", elem_id="submit-button"
264
+ )
265
+ with gr.Column():
266
+ output = gr.JSON(label="Output", visible=False)
267
 
268
+ img_clear_button.click(
269
+ lambda _: (
270
+ gr.update(visible=False, value=None),
271
+ None,
272
+ gr.update(visible=False, value=None),
273
+ gr.update(visible=False),
274
+ None,
275
+ ),
276
+ inputs=img_clear_button,
277
+ outputs=[image, document, output, img_clear_button, example_image],
278
+ )
279
  clear_button.click(
280
  lambda _: (
281
  gr.update(visible=False, value=None),
282
  None,
283
  None,
284
  gr.update(visible=False, value=None),
285
+ None,
286
  ),
287
  inputs=clear_button,
288
+ outputs=[image, document, question, output, example_image],
289
  )
290
 
291
+ upload.change(fn=process_upload, inputs=[upload], outputs=[document, image, img_clear_button, output])
292
+ url.change(fn=process_path, inputs=[url], outputs=[document, image, img_clear_button, output])
293
 
294
  question.submit(
295
  fn=process_question,
 
310
  example_image.change(
311
  fn=load_example_document,
312
  inputs=[example_image, example_question, model],
313
+ outputs=[document, question, image, img_clear_button, output],
 
 
 
 
 
 
 
 
314
  )
 
315
 
316
  if __name__ == "__main__":
317
+ demo.launch(debug=True, share=True)