feat: change the layout the web

app.py

@@ -35,7 +35,7 @@ body {
     border-radius: 20px;
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
     padding: 24px;
-    backdrop-filter: blur(10px);
+    backdrop-filter: blur(20px);
 }
 .gradio-container {
     background-image: url('https://lh3.googleusercontent.com/d/1y7H4WIjnBAcNvvi-3qOV_ORE-jMXP4fr');
@@ -81,7 +81,7 @@ with gr.Blocks(theme=theme, css=css) as demo:
                         Human Faces Generation with Diffusion Models.
                     </p>
                     <p style="font-size: 15px;">
-                        📄 <a href="https://github.com/frankcholula/faice/blob/main/paper/human_faces_generation_with_diffusion_models.pdf" target="_blank">Report</a>
+                        📜 <a href="https://github.com/frankcholula/faice/blob/main/paper/human_faces_generation_with_diffusion_models.pdf" target="_blank">Report</a>
                         &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
                         💻 <a href="https://github.com/frankcholula/faice" target="_blank">Code</a>
                     </p>
@@ -89,9 +89,9 @@ with gr.Blocks(theme=theme, css=css) as demo:
                 """)
 
         gr.Markdown("---")
-        gr.Markdown("## Part 1. Unconditional Face Generation")
         with gr.Row():
-            run_button_1 = gr.Button("Run", scale=0, variant="primary")
+            gr.Markdown("## Part 1. Unconditional Face Generation")
+            run_button_1 = gr.Button("Run", scale=0, variant="primary", elem_classes="gr-button-primary")
 
         result_1 = gr.Image(label="Result", show_label=False)
 
@@ -109,25 +109,25 @@ with gr.Blocks(theme=theme, css=css) as demo:
             with gr.Row():
                 num_inference_steps_1 = gr.Slider(
                     label="Number of inference steps",
-                    minimum=1,
-                    maximum=100,
+                    minimum=20,
+                    maximum=1000,
                     step=1,
-                    value=50,
+                    value=100,
                 )
 
         # gr.Examples(examples=[], inputs=[seed_1], outputs=[result_1, seed_1], fn=inference_unconditional,
         #             cache_examples=True, cache_mode="lazy")
 
         gr.Markdown("---")
-        gr.Markdown("## Part 2. Class Guidance Face Generation")
         with gr.Row():
-            gender_select_radio = gr.Radio(
-                label="Select Gender",
-                choices=GENDER_CHOICES,
-                value=GENDER_CHOICES[0]
-            )
+            gr.Markdown("## Part 2. Class Guidance Face Generation")
             run_button_2 = gr.Button("Run", scale=0, variant="primary")
 
+        gender_select_radio = gr.Radio(
+            label="Select Gender",
+            choices=GENDER_CHOICES,
+            value=GENDER_CHOICES[0],
+        )
         result_2 = gr.Image(label="Result", show_label=False)
 
         with gr.Accordion("Advanced Settings", open=False):
@@ -144,10 +144,10 @@ with gr.Blocks(theme=theme, css=css) as demo:
             with gr.Row():
                 num_inference_steps_2 = gr.Slider(
                     label="Number of inference steps",
-                    minimum=1,
-                    maximum=100,
+                    minimum=20,
+                    maximum=1000,
                     step=1,
-                    value=50,
+                    value=100,
                 )
 
         # gr.Examples(examples=[], inputs=[gender_select_radio], outputs=[result_2, seed_2],
@@ -262,4 +262,4 @@ with gr.Blocks(theme=theme, css=css) as demo:
 if __name__ == "__main__":
     with timer("All tasks"):
         # demo.launch(mcp_server=True)
-        demo.launch(share=True, allowed_paths=["./"])
+        demo.launch(share=True, allowed_paths=["./"], ssr_mode=False)

requirements.txt

@@ -10,7 +10,7 @@ fastapi==0.115.12
 ffmpy==0.5.0
 filelock==3.18.0
 fsspec==2025.5.1
-gradio==5.31.0
+gradio==5.32.0
 gradio_client==1.10.1
 groovy==0.1.2
 h11==0.16.0