Changed app layout to show example next to image.

app.py

@@ -8,12 +8,24 @@ from backend import Infer
 
 DEBUG = False
 
-
 infer = Infer(DEBUG)
 example_image_path = ["assets/example_1.jpg", "assets/example_2.jpg", "assets/example_3.jpg"]
 
+outputs = [
+    gr.Image(label="Thumb"),
+    gr.Number(label="DeepNAPSI Thumb", precision=0),
+    gr.Image(label="Index"),
+    gr.Number(label="DeepNAPSI Index", precision=0),
+    gr.Image(label="Middle"),
+    gr.Number(label="DeepNAPSI Middle", precision=0),
+    gr.Image(label="Ring"),
+    gr.Number(label="DeepNAPSI Ring", precision=0),
+    gr.Image(label="Pinky"),
+    gr.Number(label="DeepNAPSI Pinky", precision=0),
+    gr.Number(label="DeepNAPSI Sum", precision=0),
+]
+
 with gr.Blocks(analytics_enabled=False, title="DeepNAPSI") as demo:
-    outputs = []
     with gr.Column():
         gr.Markdown("## Welcome to the DeepNAPSI application!")
         gr.Markdown("Upload an image of the one hand and click **Predict NAPSI** to see the output.\n" \
@@ -23,28 +35,27 @@ with gr.Blocks(analytics_enabled=False, title="DeepNAPSI") as demo:
                 with gr.Column():
                     with gr.Row():
                         image_input = gr.Image()
+                        example_images = gr.Examples(example_image_path, image_input, outputs,
+                                    fn=infer.predict, cache_examples=True)
                     with gr.Row():
                         image_button = gr.Button("Predict NAPSI")
                     with gr.Row():
                         with gr.Column():
-                            outputs.append(gr.Image(label="Thumb"))
-                            outputs.append(gr.Number(label="DeepNAPSI Thumb", precision=0))
+                            outputs[0].render()
+                            outputs[1].render()
                         with gr.Column():
-                            outputs.append(gr.Image(label="Index"))
-                            outputs.append(gr.Number(label="DeepNAPSI Index", precision=0))
+                            outputs[2].render()
+                            outputs[3].render()
                         with gr.Column():
-                            outputs.append(gr.Image(label="Middle"))
-                            outputs.append(gr.Number(label="DeepNAPSI Middle", precision=0))
+                            outputs[4].render()
+                            outputs[5].render()
                         with gr.Column():
-                            outputs.append(gr.Image(label="Ring"))
-                            outputs.append(gr.Number(label="DeepNAPSI Ring", precision=0))
+                            outputs[6].render()
+                            outputs[7].render()
                         with gr.Column():
-                            outputs.append(gr.Image(label="Pinky"))
-                            outputs.append(gr.Number(label="DeepNAPSI Pinky", precision=0))
-                        outputs.append(gr.Number(label="DeepNAPSI Sum", precision=0))
-
-                example_images = gr.Examples(example_image_path, image_input, outputs,
-                                    fn=infer.predict, cache_examples=True)
+                            outputs[8].render()
+                            outputs[9].render()
+                        outputs[10].render()
         image_button.click(infer.predict, inputs=image_input, outputs=outputs)
 
 demo.launch(share=True, enable_queue=True, favicon_path="assets/favicon-32x32.png")