Rework layout

app.py

@@ -92,6 +92,7 @@ def process_path(path):
             return (
                 document,
                 gr.update(visible=True, value=document.preview),
+                gr.update(visible=True),
                 gr.update(visible=False, value=None),
             )
         except Exception:
@@ -99,6 +100,7 @@ def process_path(path):
     return (
         None,
         gr.update(visible=False, value=None),
+        gr.update(visible=False),
         gr.update(visible=False, value=None),
     )
 
@@ -110,6 +112,7 @@ def process_upload(file):
         return (
             None,
             gr.update(visible=False, value=None),
+            gr.update(visible=False),
             gr.update(visible=False, value=None),
         )
 
@@ -147,76 +150,146 @@ def process_question(question, document, model=list(CHECKPOINTS.keys())[0]):
 
 
 def load_example_document(img, question, model):
-    document = ImageDocument(Image.fromarray(img))
-    preview, answer = process_question(question, document, model)
-    return document, question, preview, answer
+    if img is not None:
+        print(f"LOADING EXAMPLE {question}")
+        document = ImageDocument(Image.fromarray(img))
+        preview, answer = process_question(question, document, model)
+        return document, question, preview, gr.update(visible=True), answer
+    else:
+        return None, None, None, gr.update(visible=False), None
 
 
 CSS = """
+#question input {
+    font-size: 16px;
+}
+#url-textbox {
+    padding: 0 !important;
+}
 #short-upload-box .w-full {
     min-height: 10rem !important;
 }
-#question input {
-    font-size: 16px;
+/* I think something like this can be used to re-shape
+ * the table
+ */
+/*
+.gr-samples-table tr {
+    display: inline;
+}
+.gr-samples-table .p-2 {
+    width: 100px;
+}
+*/
+#select-a-file {
+    width: 100%;
+}
+#file-clear {
+    padding-top: 2px !important;
+    padding-bottom: 2px !important;
+    padding-left: 8px !important;
+    padding-right: 8px !important;
+}
+.gradio-container.light .gr-button-primary {
+    background: linear-gradient(180deg, #CDF9BE 0%, #AFF497 100%);
+    border: 1px solid #B0DCCC;
+    border-radius: 8px;
+    color: #1B8700;
+}
+.gradio-container.dark button#submit-button {
+    background: linear-gradient(180deg, #CDF9BE 0%, #AFF497 100%);
+    border: 1px solid #B0DCCC;
+    border-radius: 8px;
+    color: #1B8700
 }
 """
 
 with gr.Blocks(css=CSS) as demo:
     gr.Markdown("# DocQuery: Query Documents w/ NLP")
+    gr.Markdown(
+        "DocQuery uses LayoutLMv1 fine-tuned on DocVQA, a document visual question"
+        " answering dataset, as well as SQuAD, which boosts its English-language comprehension."
+        " To use it, simply upload an image or PDF, type a question, and click 'submit', or "
+        " click one of the examples to load them."
+        " [Github Repo](https://github.com/impira/docquery)"
+    )
+
     document = gr.Variable()
     example_question = gr.Textbox(visible=False)
     example_image = gr.Image(visible=False)
 
-    gr.Markdown("## 1. Upload a file or select an example")
     with gr.Row(equal_height=True):
         with gr.Column():
+            with gr.Row():
+                gr.Markdown("## 1. Select a file", elem_id="select-a-file")
+                img_clear_button = gr.Button(
+                    "Clear", variant="secondary", elem_id="file-clear", visible=False
+                )
+            image = gr.Gallery(visible=False)
+            with gr.Row(equal_height=True):
+                url = gr.Textbox(
+                    show_label=False,
+                    placeholder="URL",
+                    lines=1,
+                    max_lines=1,
+                    elem_id="url-textbox",
+                )
+                submit = gr.Button("Get")
+            gr.Markdown("— or —")
             upload = gr.File(
-                label="Upload a file", interactive=True, elem_id="short-upload-box"
+                label=" - or -", interactive=True, elem_id="short-upload-box"
+            )
+            gr.Examples(
+                examples=examples,
+                inputs=[example_image, example_question],
             )
-            url = gr.Textbox(label="... or a URL", interactive=True)
-        gr.Examples(
-            examples=examples,
-            inputs=[example_image, example_question],
-        )
-
-    gr.Markdown("## 2. Ask a question")
-
-    with gr.Row(equal_height=True):
-        question = gr.Textbox(
-            label="Question",
-            placeholder="e.g. What is the invoice number?",
-            lines=1,
-            max_lines=1,
-            elem_id="question",
-        )
-        model = gr.Radio(
-            choices=list(CHECKPOINTS.keys()),
-            value=list(CHECKPOINTS.keys())[0],
-            label="Model",
-        )
 
-    with gr.Row():
-        clear_button = gr.Button("Clear", variant="secondary")
-        submit_button = gr.Button("Submit", variant="primary", elem_id="submit-button")
+        with gr.Column() as col:
+            gr.Markdown("## 2. Ask a question")
+            question = gr.Textbox(
+                label="Question",
+                placeholder="e.g. What is the invoice number?",
+                lines=1,
+                max_lines=1,
+            )
+            model = gr.Radio(
+                choices=list(CHECKPOINTS.keys()),
+                value=list(CHECKPOINTS.keys())[0],
+                label="Model",
+            )
 
-    with gr.Row():
-        image = gr.Gallery(visible=False)
-        with gr.Column():
-            output = gr.JSON(label="Output", visible=False)
+            with gr.Row():
+                clear_button = gr.Button("Clear", variant="secondary")
+                submit_button = gr.Button(
+                    "Submit", variant="primary", elem_id="submit-button"
+                )
+            with gr.Column():
+                output = gr.JSON(label="Output", visible=False)
 
+    img_clear_button.click(
+        lambda _: (
+            gr.update(visible=False, value=None),
+            None,
+            gr.update(visible=False, value=None),
+            gr.update(visible=False),
+            None,
+        ),
+        inputs=img_clear_button,
+        outputs=[image, document, output, img_clear_button, example_image],
+    )
     clear_button.click(
         lambda _: (
             gr.update(visible=False, value=None),
             None,
             None,
             gr.update(visible=False, value=None),
+            None,
         ),
         inputs=clear_button,
-        outputs=[image, document, question, output],
+        outputs=[image, document, question, output, example_image],
     )
 
-    upload.change(fn=process_upload, inputs=[upload], outputs=[document, image, output])
-    url.change(fn=process_path, inputs=[url], outputs=[document, image, output])
+    upload.change(fn=process_upload, inputs=[upload], outputs=[document, image, img_clear_button, output])
+    url.change(fn=process_path, inputs=[url], outputs=[document, image, img_clear_button, output])
 
     question.submit(
         fn=process_question,
@@ -237,17 +310,8 @@ with gr.Blocks(css=CSS) as demo:
     example_image.change(
         fn=load_example_document,
         inputs=[example_image, example_question, model],
-        outputs=[document, question, image, output],
-    )
-
-    gr.Markdown("### More Info")
-    gr.Markdown(
-        "DocQuery uses LayoutLMv1 fine-tuned on DocVQA, a document visual question"
-        " answering dataset, as well as SQuAD, which boosts its English-language comprehension."
-        " To use it, simply upload an image or PDF, type a question, and click 'submit', or "
-        " click one of the examples to load them."
+        outputs=[document, question, image, img_clear_button, output],
     )
-    gr.Markdown("[Github Repo](https://github.com/impira/docquery)")
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(debug=True, share=True)