add markdown and examples

app.py

@@ -34,12 +34,29 @@ def get_markdown(reaction):
 
 def predict(image, molscribe, ocr):
     predictions = model.predict_image(image, molscribe=molscribe, ocr=ocr)
-    pred_images = model.draw_predictions(predictions, image=image)
+    pred_image = model.draw_predictions_combined(predictions, image=image)
     markdown = [[i] + get_markdown(reaction) for i, reaction in enumerate(predictions)]
-    return pred_images, markdown
+    return pred_image, markdown
 
 
 with gr.Blocks() as demo:
+    gr.Markdown("""
+    <center> <h1>RxnScribe</h1> </center>
+
+    Extract chemical reactions from a diagram. Please upload a reaction diagram, RxnScribe will predict the reaction structures in the diagram. 
+
+    The predicted reactions are visualized in separate images. 
+    <span style="color:red">**Red** boxes are <ins>*reactants*</ins>.</span>
+    <span style="color:green">**Green** boxes are <ins>*reaction conditions*</ins>.</span>
+    <span style="color:blue">**Blue** boxes are <ins>*products*</ins>.</span>
+
+    It usually takes 10-20 seconds to process a diagram with this demo.
+    Check the options to run [MolScribe](https://huggingface.co/spaces/yujieq/MolScribe) and [OCR](https://huggingface.co/spaces/tomofi/EasyOCR) (it will take a longer time, of course).
+
+    Code: https://github.com/thomas0809/RxnScribe
+
+    Authors: [Yujie Qian](mailto:[email protected]), Jiang Guo, Zhengkai Tu, Connor W. Coley, Regina Barzilay. _MIT CSAIL_.
+    """)
     with gr.Column():
         with gr.Row():
             image = gr.Image(label="Upload reaction diagram", show_label=False, type='pil').style(height=256)
@@ -48,9 +65,7 @@ with gr.Blocks() as demo:
             ocr = gr.Checkbox(label="Run OCR to recognize text")
             btn = gr.Button("Submit").style(full_width=False)
         with gr.Row():
-            gallery = gr.Gallery(
-                label="Predicted reactions", show_label=False, elem_id="gallery"
-            ).style(height="auto")
+            gallery = gr.Image(label='Predicted reactions', show_label=True).style(height='auto')
             markdown = gr.Dataframe(
                 headers=['#', 'reactant', 'condition', 'product'],
                 datatype=['number'] + ['markdown'] * 3,
@@ -59,4 +74,11 @@ with gr.Blocks() as demo:
 
     btn.click(predict, inputs=[image, molscribe, ocr], outputs=[gallery, markdown])
 
+    gr.Examples(
+        examples=sorted(glob.glob('examples/*.png')),
+        inputs=[image],
+        outputs=[gallery, markdown],
+        fn=predict,
+    )
+
 demo.launch()