switched to Blocks version from Interface

app.py

@@ -172,18 +172,56 @@ def process_image(image, repaint, busyness):
 
 make_dict = lambda x: {'background':x, 'composite':x, 'layers':[x]}
 
-
-
-demo = gr.Interface(fn=process_image,
-    inputs=[gr.ImageEditor(sources=["upload",'clipboard'], label="Input Piano Roll Image (White = Gen Notes Here)", value=make_dict('all_black.png'), brush=gr.Brush(colors=["#FFFFFF","#000000"])),
-        gr.Slider(minimum=1, maximum=10, step=1, value=2, label="RePaint (Larger = More Notes, But Crazier. Also Slower.)"),
-        gr.Slider(minimum=1, maximum=100, step=1, value=100, label="Busy-ness Percentile (Based on Notes Generated)")],
-    outputs=[gr.Image(width=512, height=128, label='Generated Piano Roll Image'), 
-             gr.HTML(label="MIDI Player"),
-             gr.Audio(label="MIDI as Audio")],
-    examples=   [[make_dict(y),1,100] for y in ['all_white.png','all_black.png','init_img_melody.png','init_img_accomp.png','init_img_cont.png',]]+
-                [[make_dict(x),2,100] for x in ['584_TOTAL_crop.png', '780_TOTAL_crop_bg.png', '780_TOTAL_crop_draw.png','loop_middle_2.png']]+
-                [[make_dict(z),3,100] for z in ['584_TOTAL_crop_draw.png','loop_middle.png']] + 
-                [[make_dict('ismir_mask_2.png'),6,100]],
-    )
+markdown_str = gr.Markdown(
+    """
+    # Hello World!
+    Start typing below to see the output.
+    """)
+
+with gr.Blocks() as demo:
+    gr.Markdown(
+    """
+    # Pictures of MIDI
+    Choose from the examples at the bottom, and/or select the 'draw' tool (pen with a squiggle on it) to draw shapes to inpaint with notes. 
+    White denotes regions to inpaint. (In the paper we used blue.)
+    """)
+    with gr.Row():
+        with gr.Column():
+            in_img = gr.ImageEditor(sources=["upload",'clipboard'], label="Input Piano Roll Image (White = Gen Notes Here)", value=make_dict('all_black.png'), brush=gr.Brush(colors=["#FFFFFF","#000000"]))
+            repaint = gr.Slider(minimum=1, maximum=10, step=1, value=2, label="RePaint (Larger = More Notes, But Crazier. Also Slower.)")
+            busyness = gr.Slider(minimum=1, maximum=100, step=1, value=100, label="Busy-ness Percentile (Based on Notes Generated)")
+        with gr.Column():
+            out_img = gr.Image(width=512, height=128, label='Generated Piano Roll Image')
+            out_midi = gr.HTML(label="MIDI Player")
+            out_audio = gr.Audio(label="MIDI as Audio")
+
+    inp = [in_img, repaint, busyness]
+    out = [out_img, out_midi, out_audio]
+
+    btn = gr.Button("Submit")
+    btn.click(fn=process_image, inputs=inp, outputs=out)
+
+    exam = gr.Examples(
+                examples=#[
+                    [[make_dict(y),1,100] for y in ['all_white.png','all_black.png','init_img_melody.png','init_img_accomp.png','init_img_cont.png',]]+
+                    [[make_dict(x),2,100] for x in ['584_TOTAL_crop.png', '780_TOTAL_crop_bg.png', '780_TOTAL_crop_draw.png','loop_middle_2.png']]+
+                    [[make_dict(z),3,100] for z in ['584_TOTAL_crop_draw.png','loop_middle.png']] + 
+                    [[make_dict('pom_mask_shrunk.png'),6,100]]
+                ,#], 
+                fn=process_image, inputs=inp, outputs=out, examples_per_page=50, run_on_click=False, cache_examples='lazy')
+
+
+# old 'Interface' version
+# demo = gr.Interface(fn=process_image,
+#     inputs=[gr.ImageEditor(sources=["upload",'clipboard'], label="Input Piano Roll Image (White = Gen Notes Here)", value=make_dict('all_black.png'), brush=gr.Brush(colors=["#FFFFFF","#000000"])),
+#         gr.Slider(minimum=1, maximum=10, step=1, value=2, label="RePaint (Larger = More Notes, But Crazier. Also Slower.)"),
+#         gr.Slider(minimum=1, maximum=100, step=1, value=100, label="Busy-ness Percentile (Based on Notes Generated)")],
+#     outputs=[gr.Image(width=512, height=128, label='Generated Piano Roll Image'), 
+#              gr.HTML(label="MIDI Player"),
+#              gr.Audio(label="MIDI as Audio")],
+#     examples=   [[make_dict(y),1,100] for y in ['all_white.png','all_black.png','init_img_melody.png','init_img_accomp.png','init_img_cont.png',]]+
+#                 [[make_dict(x),2,100] for x in ['584_TOTAL_crop.png', '780_TOTAL_crop_bg.png', '780_TOTAL_crop_draw.png','loop_middle_2.png']]+
+#                 [[make_dict(z),3,100] for z in ['584_TOTAL_crop_draw.png','loop_middle.png']] + 
+#                 [[make_dict('ismir_mask_2.png'),6,100]],
+#     )
 demo.queue().launch()