refactor to blocks

app.py

@@ -6,98 +6,7 @@ import os
 
 from utils.gradio_helpers import parse_outputs, process_outputs
 
-inputs = []
-inputs.append(gr.Image(
-    label="Image", type="filepath"
-))
 
-inputs.append(gr.Slider(
-    label="Rotate Pitch", info='''Rotation pitch: Adjusts the up and down tilt of the face''', value=0,
-    minimum=-20, maximum=20
-))
-
-inputs.append(gr.Slider(
-    label="Rotate Yaw", info='''Rotation yaw: Adjusts the left and right turn of the face''', value=0,
-    minimum=-20, maximum=20
-))
-
-inputs.append(gr.Slider(
-    label="Rotate Roll", info='''Rotation roll: Adjusts the tilt of the face to the left or right''', value=0,
-    minimum=-20, maximum=20
-))
-
-inputs.append(gr.Slider(
-    label="Blink", info='''Blink: Controls the degree of eye closure''', value=0,
-    minimum=-20, maximum=5
-))
-
-inputs.append(gr.Slider(
-    label="Eyebrow", info='''Eyebrow: Adjusts the height and shape of the eyebrows''', value=0,
-    minimum=-10, maximum=15
-))
-
-inputs.append(gr.Number(
-    label="Wink", info='''Wink: Controls the degree of one eye closing''', value=0
-))
-
-inputs.append(gr.Slider(
-    label="Pupil X", info='''Pupil X: Adjusts the horizontal position of the pupils''', value=0,
-    minimum=-15, maximum=15
-))
-
-inputs.append(gr.Slider(
-    label="Pupil Y", info='''Pupil Y: Adjusts the vertical position of the pupils''', value=0,
-    minimum=-15, maximum=15
-))
-
-inputs.append(gr.Slider(
-    label="Aaa", info='''AAA: Controls the mouth opening for 'aaa' sound''', value=0,
-    minimum=-30, maximum=120
-))
-
-inputs.append(gr.Slider(
-    label="Eee", info='''EEE: Controls the mouth shape for 'eee' sound''', value=0,
-    minimum=-20, maximum=15
-))
-
-inputs.append(gr.Slider(
-    label="Woo", info='''WOO: Controls the mouth shape for 'woo' sound''', value=0,
-    minimum=-20, maximum=15
-))
-
-inputs.append(gr.Slider(
-    label="Smile", info='''Smile: Adjusts the degree of smiling''', value=0,
-    minimum=-0.3, maximum=1.3
-))
-
-inputs.append(gr.Number(
-    label="Src Ratio", info='''Source ratio''', value=1
-))
-
-inputs.append(gr.Slider(
-    label="Sample Ratio", info='''Sample ratio''', value=1,
-    minimum=-0.2, maximum=1.2
-))
-
-inputs.append(gr.Slider(
-    label="Crop Factor", info='''Crop factor''', value=1.7,
-    minimum=1.5, maximum=2.5
-))
-
-inputs.append(gr.Dropdown(
-    choices=['webp', 'jpg', 'png'], label="output_format", info='''Format of the output images''', value="webp"
-))
-
-inputs.append(gr.Number(
-    label="Output Quality", info='''Quality of the output images, from 0 to 100. 100 is best quality, 0 is lowest quality.''', value=95
-))
-
-names = ['image', 'rotate_pitch', 'rotate_yaw', 'rotate_roll', 'blink', 'eyebrow', 'wink', 'pupil_x', 'pupil_y', 'aaa', 'eee', 'woo', 'smile', 'src_ratio', 'sample_ratio', 'crop_factor', 'output_format', 'output_quality']
-
-outputs = []
-outputs.append(gr.Image())
-
-expected_outputs = len(outputs)
 def predict(request: gr.Request, *args, progress=gr.Progress(track_tqdm=True)):
     headers = {'Content-Type': 'application/json'}
 
@@ -130,14 +39,6 @@ def predict(request: gr.Request, *args, progress=gr.Progress(track_tqdm=True)):
             return json_response["output"]
         predict_outputs = parse_outputs(json_response["output"])
         processed_outputs = process_outputs(predict_outputs)
-        difference_outputs = expected_outputs - len(processed_outputs)
-        # If less outputs than expected, hide the extra ones
-        if difference_outputs > 0:
-            extra_outputs = [gr.update(visible=False)] * difference_outputs
-            processed_outputs.extend(extra_outputs)
-        # If more outputs than expected, cap the outputs to the expected number
-        elif difference_outputs < 0:
-            processed_outputs = processed_outputs[:difference_outputs]
         
         return tuple(processed_outputs) if len(processed_outputs) > 1 else processed_outputs[0]
     else:
@@ -148,13 +49,105 @@ def predict(request: gr.Request, *args, progress=gr.Progress(track_tqdm=True)):
 title = "Demo for expression-editor cog image by fofr"
 model_description = "None"
 
-app = gr.Interface(
-    fn=predict,
-    inputs=inputs,
-    outputs=outputs,
-    title=title,
-    description=model_description,
-    allow_flagging="never",
-)
-app.launch(share=False, show_error=True)
+with gr.Blocks() as demo:
+    with gr.Column():
+        with gr.Row():
+            with gr.Column():
+                image = gr.Image(
+                    label="Image", 
+                    type="filepath"
+                )
+                rotate_pitch = gr.Slider(
+                    label="Rotate Pitch", info='''Rotation pitch: Adjusts the up and down tilt of the face''', 
+                    value=0,
+                    minimum=-20, maximum=20
+                )
+                rotate_yaw = gr.Slider(
+                    label="Rotate Yaw", info='''Rotation yaw: Adjusts the left and right turn of the face''', 
+                    value=0,
+                    minimum=-20, maximum=20
+                )
+                rotate_roll = gr.Slider(
+                    label="Rotate Roll", info='''Rotation roll: Adjusts the tilt of the face to the left or right''', value=0,
+                    minimum=-20, maximum=20
+                )
+                blink = gr.Slider(
+                    label="Blink", info='''Blink: Controls the degree of eye closure''', value=0,
+                    minimum=-20, maximum=5
+                )
+                eyebrow = gr.Slider(
+                    label="Eyebrow", info='''Eyebrow: Adjusts the height and shape of the eyebrows''', value=0,
+                    minimum=-10, maximum=15
+                )
+                wink = gr.Number(
+                    label="Wink", info='''Wink: Controls the degree of one eye closing''', value=0
+                )
+                pupil_x = gr.Slider(
+                    label="Pupil X", info='''Pupil X: Adjusts the horizontal position of the pupils''', value=0,
+                    minimum=-15, maximum=15
+                )
+                pupil_y = gr.Slider(
+                    label="Pupil Y", info='''Pupil Y: Adjusts the vertical position of the pupils''', value=0,
+                    minimum=-15, maximum=15
+                )
+                aaa = gr.Slider(
+                    label="Aaa", info='''AAA: Controls the mouth opening for 'aaa' sound''', value=0,
+                    minimum=-30, maximum=120
+                )
+                eee = gr.Slider(
+                    label="Eee", info='''EEE: Controls the mouth shape for 'eee' sound''', value=0,
+                    minimum=-20, maximum=15
+                )
+                woo = gr.Slider(
+                    label="Woo", info='''WOO: Controls the mouth shape for 'woo' sound''', value=0,
+                    minimum=-20, maximum=15
+                )
+                smile = gr.Slider(
+                    label="Smile", info='''Smile: Adjusts the degree of smiling''', value=0,
+                    minimum=-0.3, maximum=1.3
+                )
+                src_ratio = gr.Number(
+                    label="Src Ratio", info='''Source ratio''', value=1
+                )
+                sample_ratio = gr.Slider(
+                    label="Sample Ratio", info='''Sample ratio''', value=1,
+                    minimum=-0.2, maximum=1.2
+                )
+                crop_factor = gr.Slider(
+                    label="Crop Factor", info='''Crop factor''', value=1.7,
+                    minimum=1.5, maximum=2.5
+                )
+                output_format = gr.Dropdown(
+                    choices=['webp', 'jpg', 'png'], label="output_format", info='''Format of the output images''', value="webp"
+                )
+                output_quality = gr.Number(
+                    label="Output Quality", info='''Quality of the output images, from 0 to 100. 100 is best quality, 0 is lowest quality.''', value=95
+                )
+                submit_btn = gr.Button("Submit")
+            with gr.Column():
+                result_image = gr.Image()
+
+    inputs = [image, rotate_pitch, rotate_yaw, rotate_roll, blink, eyebrow, wink, pupil_x, pupil_y, aaa, eee, woo, smile, src_ratio, sample_ratio, crop_factor, output_format, output_quality]
+    outputs = [result_image]
+
+    submit_btn.click(
+        fn=predict,
+        inputs=inputs,
+        outputs=outputs,
+    )
+
+    rotate_pitch.change(fn=predict, inputs=inputs, outputs=outputs)
+    rotate_yaw.change(fn=predict, inputs=inputs, outputs=outputs)
+    rotate_roll.change(fn=predict, inputs=inputs, outputs=outputs)
+    blink.change(fn=predict, inputs=inputs, outputs=outputs)
+    eyebrow.change(fn=predict, inputs=inputs, outputs=outputs)
+    wink.change(fn=predict, inputs=inputs, outputs=outputs)
+    pupil_x.change(fn=predict, inputs=inputs, outputs=outputs)
+    pupil_y.change(fn=predict, inputs=inputs, outputs=outputs)
+    aaa.change(fn=predict, inputs=inputs, outputs=outputs)
+    eee.change(fn=predict, inputs=inputs, outputs=outputs)
+    woo.change(fn=predict, inputs=inputs, outputs=outputs)
+    smile.change(fn=predict, inputs=inputs, outputs=outputs)
+
+demo.launch(share=False, show_error=True)