UI/UX to keep sliders & manipulated image on the screen at once (#2)

- UI/UX to keep sliders & manipulated image on the screen at once (e727d11b5f12b237043c3c84a0ed0947bf25e116)
- Update app.py (7c6a0bd637a90c08750435551abbc1b205cc0e1c)


Co-authored-by: Apolinário from multimodal AI art <[email protected]>

app.py

@@ -48,91 +48,75 @@ def predict(request: gr.Request, *args, progress=gr.Progress(track_tqdm=True)):
         raise gr.Error(f"The submission failed! Error: {response.status_code}")
 
 
-
+css = '''
+#top{position: fixed;}
+'''
 with gr.Blocks() as demo:
     with gr.Column():
         gr.Markdown("# Expression Editor")
         gr.Markdown("Demo for expression-editor cog image by fofr")
-        gr.HTML("""
-            <p style="display: flex;gap: 6px;">
-                <a href="https://huggingface.co/spaces/fffiloni/expression-editor?duplicate=true">
-                    <img src="https://huggingface.co/datasets/huggingface/badges/resolve/main/duplicate-this-space-md.svg" alt="Duplicate this Space">
-                </a> to skip the queue and enjoy faster inference on the GPU of your choice 
-            </p>
-        """)
         with gr.Row():
             with gr.Column():
                 image = gr.Image(
-                    label="Image", 
+                    label="Input image", 
                     type="filepath",
-                    height=512
-                )
-            with gr.Column():
-                result_image = gr.Image(
-                    label="Output",
-                    height=512
+                    height=180
                 )
-
-        submit_btn = gr.Button("Submit")
-
-        with gr.Row():
-            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
-            )
-        with gr.Row():
-            
-            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.Slider(
-                label="Wink", info='''Wink: Controls the degree of one eye closing''', value=0,
-                minimum=0, maximum=25
-            )
-        
-            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
-            )
-        with gr.Row():
-            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
-            )
-        with gr.Accordion("More Settings", open=False):
-            with gr.Column():
                 with gr.Row():
+                    rotate_pitch = gr.Slider(
+                        label="Rotate Up-Down",
+                        value=0,
+                        minimum=-20, maximum=20
+                    )
+                    rotate_yaw = gr.Slider(
+                        label="Rotate Left-Right turn", 
+                        value=0,
+                        minimum=-20, maximum=20
+                    )
+                    rotate_roll = gr.Slider(
+                        label="Rotate Left-Right tilt", value=0,
+                        minimum=-20, maximum=20
+                    )
+                with gr.Row():
+                    blink = gr.Slider(
+                        label="Blink", value=0,
+                        minimum=-20, maximum=5
+                    )
+                    eyebrow = gr.Slider(
+                        label="Eyebrow", value=0,
+                        minimum=-10, maximum=15
+                    )
+                    wink = gr.Slider(
+                        label="Wink", value=0,
+                        minimum=0, maximum=25
+                    )
+                with gr.Row():
+                    pupil_x = gr.Slider(
+                        label="Pupil X", value=0,
+                        minimum=-15, maximum=15
+                    )
+                    pupil_y = gr.Slider(
+                        label="Pupil Y", value=0,
+                        minimum=-15, maximum=15
+                    )
+                with gr.Row():
+                    aaa = gr.Slider(
+                        label="Aaa", value=0,
+                        minimum=-30, maximum=120
+                    )
+                    eee = gr.Slider(
+                        label="Eee", value=0,
+                        minimum=-20, maximum=15
+                    )
+                    woo = gr.Slider(
+                        label="Woo", value=0,
+                        minimum=-20, maximum=15
+                    )
+                smile = gr.Slider(
+                    label="Smile", value=0,
+                    minimum=-0.3, maximum=1.3
+                )
+                with gr.Accordion("More Settings", open=False):
                     src_ratio = gr.Number(
                         label="Src Ratio", info='''Source ratio''', value=1
                     )
@@ -144,14 +128,24 @@ with gr.Blocks() as demo:
                         label="Crop Factor", info='''Crop factor''', value=1.7,
                         minimum=1.5, maximum=2.5
                     )
-                with gr.Row():
                     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(elem_id="top")
+                gr.HTML("""
+                <div style="display: flex; justify-content: center; align-items: center; text-align: center;">
+                    <p style="display: flex;gap: 6px;">
+                         <a href="https://huggingface.co/spaces/fffiloni/expression-editor?duplicate=true">
+                            <img src="https://huggingface.co/datasets/huggingface/badges/resolve/main/duplicate-this-space-md.svg" alt="Duplicate this Space">
+                        </a> to skip the queue and enjoy faster inference on the GPU of your choice 
+                    </p>
+                </div>
+                """)
 
     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]
@@ -175,5 +169,4 @@ with gr.Blocks() as demo:
     woo.release(fn=predict, inputs=inputs, outputs=outputs, show_progress="minimal")
     smile.release(fn=predict, inputs=inputs, outputs=outputs, show_progress="minimal")
 
-demo.launch(share=False, show_error=True)
-
+demo.launch(share=False, show_error=True)