fffiloni multimodalart HF staff commited on
Commit
6d90ae1
1 Parent(s): 293de33

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

Browse files

- 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 <multimodalart@users.noreply.huggingface.co>

Files changed (1) hide show
  1. app.py +72 -79
app.py CHANGED
@@ -48,91 +48,75 @@ def predict(request: gr.Request, *args, progress=gr.Progress(track_tqdm=True)):
48
  raise gr.Error(f"The submission failed! Error: {response.status_code}")
49
 
50
 
51
-
 
 
52
  with gr.Blocks() as demo:
53
  with gr.Column():
54
  gr.Markdown("# Expression Editor")
55
  gr.Markdown("Demo for expression-editor cog image by fofr")
56
- gr.HTML("""
57
- <p style="display: flex;gap: 6px;">
58
- <a href="https://huggingface.co/spaces/fffiloni/expression-editor?duplicate=true">
59
- <img src="https://huggingface.co/datasets/huggingface/badges/resolve/main/duplicate-this-space-md.svg" alt="Duplicate this Space">
60
- </a> to skip the queue and enjoy faster inference on the GPU of your choice
61
- </p>
62
- """)
63
  with gr.Row():
64
  with gr.Column():
65
  image = gr.Image(
66
- label="Image",
67
  type="filepath",
68
- height=512
69
- )
70
- with gr.Column():
71
- result_image = gr.Image(
72
- label="Output",
73
- height=512
74
  )
75
-
76
- submit_btn = gr.Button("Submit")
77
-
78
- with gr.Row():
79
- rotate_pitch = gr.Slider(
80
- label="Rotate Pitch", info='''Rotation pitch: Adjusts the up and down tilt of the face''',
81
- value=0,
82
- minimum=-20, maximum=20
83
- )
84
- rotate_yaw = gr.Slider(
85
- label="Rotate Yaw", info='''Rotation yaw: Adjusts the left and right turn of the face''',
86
- value=0,
87
- minimum=-20, maximum=20
88
- )
89
- rotate_roll = gr.Slider(
90
- label="Rotate Roll", info='''Rotation roll: Adjusts the tilt of the face to the left or right''', value=0,
91
- minimum=-20, maximum=20
92
- )
93
- with gr.Row():
94
-
95
- blink = gr.Slider(
96
- label="Blink", info='''Blink: Controls the degree of eye closure''', value=0,
97
- minimum=-20, maximum=5
98
- )
99
- eyebrow = gr.Slider(
100
- label="Eyebrow", info='''Eyebrow: Adjusts the height and shape of the eyebrows''', value=0,
101
- minimum=-10, maximum=15
102
- )
103
- wink = gr.Slider(
104
- label="Wink", info='''Wink: Controls the degree of one eye closing''', value=0,
105
- minimum=0, maximum=25
106
- )
107
-
108
- pupil_x = gr.Slider(
109
- label="Pupil X", info='''Pupil X: Adjusts the horizontal position of the pupils''', value=0,
110
- minimum=-15, maximum=15
111
- )
112
- pupil_y = gr.Slider(
113
- label="Pupil Y", info='''Pupil Y: Adjusts the vertical position of the pupils''', value=0,
114
- minimum=-15, maximum=15
115
- )
116
- with gr.Row():
117
- aaa = gr.Slider(
118
- label="Aaa", info='''AAA: Controls the mouth opening for 'aaa' sound''', value=0,
119
- minimum=-30, maximum=120
120
- )
121
- eee = gr.Slider(
122
- label="Eee", info='''EEE: Controls the mouth shape for 'eee' sound''', value=0,
123
- minimum=-20, maximum=15
124
- )
125
- woo = gr.Slider(
126
- label="Woo", info='''WOO: Controls the mouth shape for 'woo' sound''', value=0,
127
- minimum=-20, maximum=15
128
- )
129
- smile = gr.Slider(
130
- label="Smile", info='''Smile: Adjusts the degree of smiling''', value=0,
131
- minimum=-0.3, maximum=1.3
132
- )
133
- with gr.Accordion("More Settings", open=False):
134
- with gr.Column():
135
  with gr.Row():
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
136
  src_ratio = gr.Number(
137
  label="Src Ratio", info='''Source ratio''', value=1
138
  )
@@ -144,14 +128,24 @@ with gr.Blocks() as demo:
144
  label="Crop Factor", info='''Crop factor''', value=1.7,
145
  minimum=1.5, maximum=2.5
146
  )
147
- with gr.Row():
148
  output_format = gr.Dropdown(
149
  choices=['webp', 'jpg', 'png'], label="output_format", info='''Format of the output images''', value="webp"
150
  )
151
  output_quality = gr.Number(
152
  label="Output Quality", info='''Quality of the output images, from 0 to 100. 100 is best quality, 0 is lowest quality.''', value=95
153
  )
154
-
 
 
 
 
 
 
 
 
 
 
 
155
 
156
  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]
157
  outputs = [result_image]
@@ -175,5 +169,4 @@ with gr.Blocks() as demo:
175
  woo.release(fn=predict, inputs=inputs, outputs=outputs, show_progress="minimal")
176
  smile.release(fn=predict, inputs=inputs, outputs=outputs, show_progress="minimal")
177
 
178
- demo.launch(share=False, show_error=True)
179
-
 
48
  raise gr.Error(f"The submission failed! Error: {response.status_code}")
49
 
50
 
51
+ css = '''
52
+ #top{position: fixed;}
53
+ '''
54
  with gr.Blocks() as demo:
55
  with gr.Column():
56
  gr.Markdown("# Expression Editor")
57
  gr.Markdown("Demo for expression-editor cog image by fofr")
 
 
 
 
 
 
 
58
  with gr.Row():
59
  with gr.Column():
60
  image = gr.Image(
61
+ label="Input image",
62
  type="filepath",
63
+ height=180
 
 
 
 
 
64
  )
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
65
  with gr.Row():
66
+ rotate_pitch = gr.Slider(
67
+ label="Rotate Up-Down",
68
+ value=0,
69
+ minimum=-20, maximum=20
70
+ )
71
+ rotate_yaw = gr.Slider(
72
+ label="Rotate Left-Right turn",
73
+ value=0,
74
+ minimum=-20, maximum=20
75
+ )
76
+ rotate_roll = gr.Slider(
77
+ label="Rotate Left-Right tilt", value=0,
78
+ minimum=-20, maximum=20
79
+ )
80
+ with gr.Row():
81
+ blink = gr.Slider(
82
+ label="Blink", value=0,
83
+ minimum=-20, maximum=5
84
+ )
85
+ eyebrow = gr.Slider(
86
+ label="Eyebrow", value=0,
87
+ minimum=-10, maximum=15
88
+ )
89
+ wink = gr.Slider(
90
+ label="Wink", value=0,
91
+ minimum=0, maximum=25
92
+ )
93
+ with gr.Row():
94
+ pupil_x = gr.Slider(
95
+ label="Pupil X", value=0,
96
+ minimum=-15, maximum=15
97
+ )
98
+ pupil_y = gr.Slider(
99
+ label="Pupil Y", value=0,
100
+ minimum=-15, maximum=15
101
+ )
102
+ with gr.Row():
103
+ aaa = gr.Slider(
104
+ label="Aaa", value=0,
105
+ minimum=-30, maximum=120
106
+ )
107
+ eee = gr.Slider(
108
+ label="Eee", value=0,
109
+ minimum=-20, maximum=15
110
+ )
111
+ woo = gr.Slider(
112
+ label="Woo", value=0,
113
+ minimum=-20, maximum=15
114
+ )
115
+ smile = gr.Slider(
116
+ label="Smile", value=0,
117
+ minimum=-0.3, maximum=1.3
118
+ )
119
+ with gr.Accordion("More Settings", open=False):
120
  src_ratio = gr.Number(
121
  label="Src Ratio", info='''Source ratio''', value=1
122
  )
 
128
  label="Crop Factor", info='''Crop factor''', value=1.7,
129
  minimum=1.5, maximum=2.5
130
  )
 
131
  output_format = gr.Dropdown(
132
  choices=['webp', 'jpg', 'png'], label="output_format", info='''Format of the output images''', value="webp"
133
  )
134
  output_quality = gr.Number(
135
  label="Output Quality", info='''Quality of the output images, from 0 to 100. 100 is best quality, 0 is lowest quality.''', value=95
136
  )
137
+ submit_btn = gr.Button("Submit")
138
+ with gr.Column():
139
+ result_image = gr.Image(elem_id="top")
140
+ gr.HTML("""
141
+ <div style="display: flex; justify-content: center; align-items: center; text-align: center;">
142
+ <p style="display: flex;gap: 6px;">
143
+ <a href="https://huggingface.co/spaces/fffiloni/expression-editor?duplicate=true">
144
+ <img src="https://huggingface.co/datasets/huggingface/badges/resolve/main/duplicate-this-space-md.svg" alt="Duplicate this Space">
145
+ </a> to skip the queue and enjoy faster inference on the GPU of your choice
146
+ </p>
147
+ </div>
148
+ """)
149
 
150
  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]
151
  outputs = [result_image]
 
169
  woo.release(fn=predict, inputs=inputs, outputs=outputs, show_progress="minimal")
170
  smile.release(fn=predict, inputs=inputs, outputs=outputs, show_progress="minimal")
171
 
172
+ demo.launch(share=False, show_error=True)