feat: refactor

app.py

@@ -256,72 +256,104 @@ def generate_video(input_img, should_crop_face, expand_x, expand_y, offset_x, of
 
 with gr.Blocks() as demo:
     gr.Markdown("# FollowYourEmoji Webui")
-
+    
+    gr.Markdown("""
+    ## 📖 How to Use This Demo
+    
+    Follow these simple steps to create your animated emoji video:
+    
+    1. **📸 Upload Reference Image**: Upload a portrait photo in the left panel
+    2. **✂️ Crop Face (Optional)**: Enable face cropping to automatically fit the image to match the video motion
+    3. **🎬 Upload Reference Video**: Upload a video or select a preprocessed .npy file in the middle panel
+    4. **👁️ Preview Animation**: Click "Show Animation preview" to see how the motion will look
+    5. **⚙️ Adjust Settings**: Fine-tune generation parameters at the bottom (steps, CFG scale, FPS, etc.)
+    6. **🎨 Generate Video**: Click "Generate Video" to create your animated result
+    
+    💡 **Tips**: 
+    - Use face cropping if your portrait is too far away or doesn't align well
+    - Preview the animation before generating to ensure the motion looks good
+    - Try the examples below to get started quickly!
+    """)
+    
+    # Main Layout: 3 columns - Image, Video, Results
     with gr.Row():
+        # Left Column: Image Upload and Crop Face
         with gr.Column(scale=1):
-            input_img = gr.Image(label="Upload reference image", type="filepath", height=500)
-
-            crop_face_checkbox = gr.Checkbox(label="Crop face according to video",info="If your picture is too far away or the face doesn't fit you can use cropping, you can see a preview in the tab below", value=False)
-            with gr.Accordion("Face Cropping", open=False):
+            gr.Markdown("### 📸 Reference Image")
+            input_img = gr.Image(label="Upload reference image", type="filepath", height=400)
+            
+            crop_face_checkbox = gr.Checkbox(label="Crop face according to video",info="If your picture is too far away or the face doesn't fit you can use cropping", value=False)
+            with gr.Accordion("Face Cropping Settings", open=False):
                 expand_x = gr.Slider(label="Expand X", minimum=0.5, maximum=5.0, value=1.2, step=0.01)
                 expand_y = gr.Slider(label="Expand Y", minimum=0.5, maximum=5.0, value=1.2, step=0.01)
                 offset_x = gr.Slider(label="Offset X", minimum=-1, maximum=1, value=0.0, step=0.01)
                 offset_y = gr.Slider(label="Offset Y", minimum=-1, maximum=1, value=0.0, step=0.01)
-
-                preview_crop_btn = gr.Button(value="Preview Crop")
+                
+                preview_crop_btn = gr.Button(value="Preview Crop", variant="secondary")
                 with gr.Row():
-                    crop_preview = gr.Image(label="Crop Preview", height=300)
-                    crop_preview_motion = gr.Image(label="Preview motion Crop", height=300)
-
-            with gr.Accordion("Input Video", open=True):
-                input_video_type = gr.Radio(label="Input reference video type",info="You can either upload the video through the interface or use an already compiled npy file", choices=["video","npy"], value="video")
-
-                with gr.Group() as video_group:
-                    input_video = gr.Video(label="Upload reference video", height=500)
-                    input_video_save = gr.Checkbox(label="Save video to processed video folder", value=True)
-
-                with gr.Group(visible=False) as npy_group:
-                    input_npy_select = gr.Dropdown(label="Select from processed video folder", choices=["None"], value="None")
-                    input_npy_refresh = gr.Button(value="Update NPY list")
-                    input_npy = gr.File(file_types=[".npy"], label="Upload preprocessed video in .npy")
-            with gr.Accordion("Animation Preview",open=False):
-                show_gif_btn = gr.Button(value="Show Animation preview")
+                    crop_preview = gr.Image(label="Crop Preview", height=200)
+                    crop_preview_motion = gr.Image(label="Motion Preview", height=200)
+        
+        # Middle Column: Video Input and Animation Preview
+        with gr.Column(scale=1):
+            gr.Markdown("### 🎬 Reference Video")
+            input_video_type = gr.Radio(label="Input type", choices=["video","npy"], value="video")
+            
+            with gr.Group() as video_group:
+                input_video = gr.Video(label="Upload reference video", height=400)
+                input_video_save = gr.Checkbox(label="Save to processed folder", value=True)
+            
+            with gr.Group(visible=False) as npy_group:
+                input_npy_select = gr.Dropdown(label="Select preprocessed NPY", choices=["None"], value="None")
+                input_npy_refresh = gr.Button(value="Refresh NPY List")
+                input_npy = gr.File(file_types=[".npy"], label="Upload .npy file")
+            
+            with gr.Accordion("Animation Preview", open=False):
+                show_gif_btn = gr.Button(value="Show Animation Preview", variant="secondary")
                 with gr.Row():
-                    gif_output = gr.Image(label="GIF Preview", height=300)
-                    gif_output_align = gr.Image(label="Aligned GIF Preview", height=300)
-
-            with gr.Accordion("Animation Settings", open=True):
+                    gif_output = gr.Image(label="Motion Preview", height=200)
+                    gif_output_align = gr.Image(label="Aligned Preview", height=200)
+        
+        # Right Column: Results
+        with gr.Column(scale=1):
+            gr.Markdown("### 🎨 Generated Results")
+            result_status = gr.Label(value="Ready to generate")
+            result_video = gr.Video(label="Result Video (Main)", interactive=False, height=400)
+            result_video_2 = gr.Video(label="Result Video (Full)", interactive=False, height=400)
+            frames_output = gr.File(label="Download Frames Archive")
+    
+    # Bottom Section: Settings and Generate Button
+    with gr.Accordion("⚙️ Generation Settings", open=True):
+        with gr.Row():
+            with gr.Column(scale=1):
+                gr.Markdown("#### Animation Settings")
                 input_video_frames = gr.Slider(label="Video frames", minimum=1, maximum=30, value=30, step=1)
                 settings_steps = gr.Slider(label="Steps", minimum=1, maximum=200, value=30)
                 settings_cfg_scale = gr.Slider(label="CFG scale", minimum=0.1, maximum=20, value=3.5, step=0.1)
                 settings_seed = gr.Slider(minimum=0, maximum=1000, value=42, step=1, label="Seed")
-                intropolate_factor = gr.Slider(label="Intropolate Factor Frames",info="This is the number of frames to interpolate between the frames", minimum=1, maximum=50, value=1, step=1)
-
-                use_custom_fps = gr.Checkbox(label="Use custom FPS",info="By default the FPS is set to 7", value=True)
-                with gr.Row():
-                    output_fps = gr.Slider(label="Output FPS",info="if you upload video fps slider updates to video fps", minimum=1, maximum=240, value=15, step=1)
-                    output_fps_info = gr.Label(value="This will be the FPS information of the video you uploaded")
-
-            with gr.Accordion("Generation Settings", open=True):
+                intropolate_factor = gr.Slider(label="Interpolate Factor",info="Number of frames to interpolate between frames", minimum=1, maximum=50, value=1, step=1)
+                
+                use_custom_fps = gr.Checkbox(label="Use custom FPS",info="By default FPS is 7", value=True)
+                output_fps = gr.Slider(label="Output FPS",info="Automatically updates from uploaded video", minimum=1, maximum=240, value=15, step=1)
+                output_fps_info = gr.Label(value="FPS info will appear here")
+            
+            with gr.Column(scale=1):
+                gr.Markdown("#### Context Settings")
                 context_frames = gr.Slider(label="Context Frames", minimum=1, maximum=50, value=24, step=1)
                 context_stride = gr.Slider(label="Context Stride", minimum=1, maximum=10, value=1, step=1)
                 context_overlap = gr.Slider(label="Context Overlap", minimum=0, maximum=10, value=4, step=1)
                 context_batch_size = gr.Slider(label="Context Batch Size", minimum=1, maximum=10, value=1, step=1)
                 callback_steps = gr.Slider(label="Callback Steps", minimum=1, maximum=50, value=1, step=1)
-
-            with gr.Accordion("Advanced Settings", open=False):
+            
+            with gr.Column(scale=1):
+                gr.Markdown("#### Advanced Settings")
                 resolution_w = gr.Slider(label="Resolution Width", minimum=64, maximum=1024, value=config['resolution_w'], step=64)
                 resolution_h = gr.Slider(label="Resolution Height", minimum=64, maximum=1024, value=config['resolution_h'], step=64)
                 model_step = gr.Slider(label="Model Step", value=0, minimum=0, maximum=100)
                 custom_output_path = gr.Textbox(label="Custom Output Path", placeholder="Leave empty for default")
-                anomaly_action = gr.Radio(label="Anomaly Action",info="Sometimes a bad frame can slip through and this function will detect it and do what you specify", choices=["none", "remove"], value="none")
-
-        with gr.Column(scale=1):
-            result_status = gr.Label(value="Status")
-            result_video = gr.Video(label="Result Video (oo)", interactive=False, height=500)
-            result_video_2 = gr.Video(label="Result Video (all)", interactive=False, height=500)
-            result_btn = gr.Button(value="Generate Video")
-            frames_output = gr.File(label="Frames Archive ( You'll get an archive with all the frames )")
+                anomaly_action = gr.Radio(label="Anomaly Detection",info="Detect and handle bad frames", choices=["none", "remove"], value="none")
+    
+    result_btn = gr.Button(value="🎨 Generate Video", variant="primary", size="lg")
 
     input_video_type.change(
         fn=lambda x: (gr.update(visible=(x=="video")), gr.update(visible=(x=="npy"))),
@@ -363,6 +395,20 @@ with gr.Blocks() as demo:
             model_step, custom_output_path, use_custom_fps, output_fps, callback_steps, context_frames, context_stride, context_overlap, context_batch_size, anomaly_action,intropolate_factor],
         outputs=[result_status, result_video, result_video_2, frames_output]
     )
+    
+    # Examples Section
+    gr.Markdown("---")
+    gr.Markdown("## 🎯 Examples")
+    gr.Markdown("Click on an example below to quickly get started:")
+    
+    gr.Examples(
+        examples=[
+            ["example/s1.jpg", "example/temple_video.mp4"],
+            ["example/123.png", "example/test.mp4"],
+        ],
+        inputs=[input_img, input_video],
+        label="Try these examples"
+    )
 
 if __name__ == "__main__":
     import argparse