Update app.py

app.py

@@ -35,39 +35,54 @@ def switch_states(is_checked):
     else:
         return gr.Image.update(visible=False), gr.Button.update(visible=False)
 
-demo = gr.Interface(title="DISCO", 
-                    description='Gradio demo for DISCO: Disentangled Image Colorization via Global Anchors. Check our project page 😛.',
-                    inputs=[gr.inputs.Image(type="numpy", label="Input", interactive=True)],
-                    outputs=[gr.outputs.Image(label="Output")])
+demo = gr.Blocks(title="DISCO")
+with demo:
+    gr.Markdown(value="""
+                    **Gradio demo for DISCO: Disentangled Image Colorization via Global Anchors**. Check our [project page](https://menghanxia.github.io/projects/disco.html) 😛.
+                    """)
+    with gr.Row():
+        with gr.Column():
+            with gr.Row().style(height=480):
+                Image_input = gr.Image(type="numpy", label="Input", interactive=True)
+                Image_anchor = gr.Image(type="numpy", label="Anchor", tool="color-sketch", interactive=True, visible=False)
+            with gr.Row():
+                Num_anchor = gr.Number(type="int", value=8, label="Num. of anchors (3~14)")
+                Radio_resolution = gr.Radio(type="index", choices=["Low (256x256)", "High (512x512)"], \
+                                                label="Colorization resolution (Low is more stable)", value="Low (256x256)")
+            with gr.Row():
+                Ckeckbox_editable = gr.Checkbox(default=False, label='Show editable anchors')
+                Button_show_anchor = gr.Button(value="Predict anchors", visible=False)
+            Button_run = gr.Button(value="Colorize")
+        with gr.Column():
+            Image_output = gr.Image(type="numpy", label="Output").style(height=480)
 
-demo.layout = gr.Interface.Layout(
-    gr.Interface.Panel("Anchor", 
-                       [
-                           gr.inputs.Image(type="numpy", label="Anchor", tool="color-sketch", interactive=True, visible=False).style(width="600px", height="600px"),
-                           gr.inputs.Checkbox(default=False, label='Show editable anchors'),
-                           gr.inputs.Button(value="Predict anchors", visible=False)
-                       ]),
-    gr.Interface.Panel("Settings", 
-                       [
-                           gr.inputs.Number(type="int", value=8, label="Количество опорных точек (3~14)"),
-                           gr.inputs.Radio(type="index", choices=["Low (256x256)", "Medium (512x512)", "High (1024x1024)"], label="Область для раскрашивания кистью", value="Low (256x256)")
-                       ]),
-    gr.Interface.Panel("Result", 
-                       [
-                           gr.outputs.Image(label="Output"),
-                           gr.outputs.Image(label="Output")
-                       ])
-)
-
-def click_predanchors(rgb_img, n_anchors, is_high_res, is_editable):
-    output = predict_anchors(colorizer, colorLabeler, rgb_img, n_anchors, is_high_res, is_editable, device)
-    return output
-
-def click_colorize(rgb_img, hint_img, n_anchors, is_high_res, is_editable):
-    if hint_img is None:
-        hint_img = rgb_img
-    output = colorize_grayscale(colorizer, colorLabeler, rgb_img, hint_img, n_anchors, True, is_editable, device)
-    output1 = colorize_grayscale(colorizer, colorLabeler, rgb_img, hint_img, n_anchors, False, is_editable, device)
-    return output, output1
+    Ckeckbox_editable.change(fn=switch_states, inputs=Ckeckbox_editable, outputs=[Image_anchor, Button_show_anchor])
+    Button_show_anchor.click(fn=click_predanchors, inputs=[Image_input, Num_anchor, Radio_resolution, Ckeckbox_editable], outputs=Image_anchor)
+    Button_run.click(fn=click_colorize, inputs=[Image_input, Image_anchor, Num_anchor, Radio_resolution, Ckeckbox_editable], \
+                    outputs=Image_output)
+    
+    ## guiline
+    gr.Markdown(value="""    
+                    🔔**Guideline**
+                    1. Upload your image or select one from the examples.
+                    2. Set up the arguments: "Num. of anchors" and "Colorization resolution".
+                    3. Run the colorization (two modes supported):
+                        - 📀Automatic mode: **Click** "Colorize" to get the automatically colorized output.
+                        - ✏️Editable mode: **Check** ""Show editable anchors"; **Click** "Predict anchors"; **Redraw** the anchor colors (only anchor region will be used); **Click** "Colorize" to get the result.
+                    """)
+    if RUN_MODE != "local":
+        gr.Examples(examples=[
+                    ['01.jpg', 8, "Low (256x256)"],
+                    ['02.jpg', 8, "Low (256x256)"],
+                    ['03.jpg', 8, "Low (256x256)"],
+                    ['04.jpg', 8, "Low (256x256)"],
+                    ], 
+                    inputs=[Image_input,Num_anchor,Radio_resolution], outputs=[Image_output], label="Examples")
+    gr.HTML(value="""
+                <p style="text-align:center; color:orange"><a href='https://menghanxia.github.io/projects/disco.html' target='_blank'>DISCO Project Page</a> | <a href='https://github.com/MenghanXia/DisentangledColorization' target='_blank'>Github Repo</a></p>
+                    """)
 
-demo.launch()
+if RUN_MODE == "local":
+    demo.launch(server_name='9.134.253.83',server_port=7788)
+else:
+    demo.launch()