update demo layout

app.py

@@ -31,25 +31,30 @@ class Cfg:
     draw: bool = True
 
 
-TITLE = 'Age and Gender Estimation with Transformers from Face and Body Images in the Wild'
-DESCRIPTION = 'This is an official demo for https://github.com/...'
+DESCRIPTION = """
+# Age and Gender Estimation with Transformers from Face and Body Images in the Wild
+
+This is an official demo for https://github.com/...
+"""
 
 HF_TOKEN = os.getenv('HF_TOKEN')
 
+
 def load_models():
     detector_path = huggingface_hub.hf_hub_download('iitolstykh/demo_yolov8_detector',
-                                           'yolov8x_person_face.pt',
-                                           use_auth_token=HF_TOKEN)
+                                                    'yolov8x_person_face.pt',
+                                                    use_auth_token=HF_TOKEN)
 
     age_gender_path = huggingface_hub.hf_hub_download('iitolstykh/demo_xnet_volo_cross',
-                                           'checkpoint-377.pth.tar',
-                                           use_auth_token=HF_TOKEN)
+                                                      'checkpoint-377.pth.tar',
+                                                      use_auth_token=HF_TOKEN)
 
     predictor_cfg = Cfg(detector_path, age_gender_path)
     predictor = Predictor(predictor_cfg)
 
     return predictor
 
+
 def detect(
         image: np.ndarray,
         score_threshold: float,
@@ -79,6 +84,8 @@ def detect(
     detected_objects, out_im = predictor.recognize(image)
     return out_im[:, :, ::-1]  # BGR -> RGB
 
+def clear():
+    return None, 0.4, 0.7, "Use persons and faces", None
 
 predictor = load_models()
 
@@ -87,20 +94,32 @@ examples = [[path.as_posix(), 0.4, 0.7, "Use persons and faces"] for path in sor
 
 func = functools.partial(detect, predictor=predictor)
 
-gr.Interface(
-    fn=func,
-    inputs=[
-        gr.Image(label='Input', type='numpy'),
-        gr.Slider(0, 1, value=0.4, step=0.05, label='Detector Score Threshold'),
-        gr.Slider(0, 1, value=0.7, step=0.05, label='NMS Iou Threshold'),
-        gr.Radio(["Use persons and faces", "Use persons only", "Use faces only"],
-                 value="Use persons and faces",
-                 label="Inference mode",
-                 info="What to use for gender and age recognition"),
-    ],
-    outputs=gr.Image(label='Output', type='numpy'),
-    examples=examples,
-    examples_per_page=30,
-    title=TITLE,
-    description=DESCRIPTION,
-).launch(show_api=False)
+with gr.Blocks(css='style.css') as demo:
+    gr.Markdown(DESCRIPTION)
+    with gr.Row():
+        with gr.Column():
+            image = gr.Image(label='Input', type='numpy')
+            score_threshold = gr.Slider(0, 1, value=0.4, step=0.05, label='Detector Score Threshold')
+            iou_threshold = gr.Slider(0, 1, value=0.7, step=0.05, label='NMS Iou Threshold')
+            mode = gr.Radio(["Use persons and faces", "Use persons only", "Use faces only"],
+                            value="Use persons and faces",
+                            label="Inference mode",
+                            info="What to use for gender and age recognition")
+
+            with gr.Row():
+                clear_button = gr.Button("Clear")
+                with gr.Column():
+                    run_button = gr.Button("Submit")
+        with gr.Column():
+            result = gr.Image(label='Output', type='numpy')
+
+    inputs = [image, score_threshold, iou_threshold, mode]
+    gr.Examples(examples=examples,
+                inputs=inputs,
+                outputs=result,
+                fn=func,
+                cache_examples=False)
+    run_button.click(fn=func, inputs=inputs, outputs=result, api_name='predict')
+    clear_button.click(fn=clear, inputs=None, outputs=[image, score_threshold, iou_threshold, mode, result])
+
+demo.queue(max_size=15).launch()

style.css

@@ -0,0 +1,3 @@
+h1 {
+  text-align: center;
+}