learnmlf commited on
Commit
587e46b
Β·
1 Parent(s): 561bc60
Files changed (1) hide show
  1. app.py +18 -19
app.py CHANGED
@@ -282,25 +282,24 @@ with gr.Blocks() as demo:
282
 
283
  gr.Markdown(f"<div style='text-align: center; padding: 10px; background-color: #f0f0f0; border-radius: 5px;'>{gpu_info}</div>")
284
 
285
- with gr.Box():
286
- gr.Markdown("""
287
- <div style='text-align: center;'>
288
-
289
- ## πŸ“– How to Use This Demo
290
-
291
- Follow these simple steps to create your animated emoji video:
292
-
293
- **1. πŸ“Έ Upload Reference Image** β†’ Upload a portrait photo in the left panel
294
- **2. 🎬 Upload Reference Video** β†’ Upload a video or select a preprocessed .npy file in the middle panel
295
- **3. βœ‚οΈ Crop Face (Optional)** β†’ Enable face cropping to automatically fit the image to match the video motion
296
- **4. πŸ‘οΈ Preview Animation** β†’ Click "Show Animation preview" to see how the motion will look
297
- **5. βš™οΈ Adjust Settings** β†’ Fine-tune generation parameters at the bottom (steps, CFG scale, FPS, etc.)
298
- **6. 🎨 Generate Video** β†’ Click "Generate Video" to create your animated result
299
-
300
- πŸ’‘ **Tips**: Use face cropping if your portrait is too far away β€’ Preview the animation before generating β€’ Try the examples below!
301
-
302
- </div>
303
- """)
304
 
305
  # Main Layout: 3 columns - Image, Video, Results
306
  with gr.Row():
 
282
 
283
  gr.Markdown(f"<div style='text-align: center; padding: 10px; background-color: #f0f0f0; border-radius: 5px;'>{gpu_info}</div>")
284
 
285
+ gr.Markdown("""
286
+ <div style='text-align: center; padding: 20px; background-color: #f8f9fa; border-radius: 10px; margin: 10px 0; border: 2px solid #e0e0e0;'>
287
+
288
+ ## πŸ“– How to Use This Demo
289
+
290
+ Follow these simple steps to create your animated emoji video:
291
+
292
+ **1. πŸ“Έ Upload Reference Image** β†’ Upload a portrait photo in the left panel
293
+ **2. 🎬 Upload Reference Video** β†’ Upload a video or select a preprocessed .npy file in the middle panel
294
+ **3. βœ‚οΈ Crop Face (Optional)** β†’ Enable face cropping to automatically fit the image to match the video motion
295
+ **4. πŸ‘οΈ Preview Animation** β†’ Click "Show Animation preview" to see how the motion will look
296
+ **5. βš™οΈ Adjust Settings** β†’ Fine-tune generation parameters at the bottom (steps, CFG scale, FPS, etc.)
297
+ **6. 🎨 Generate Video** β†’ Click "Generate Video" to create your animated result
298
+
299
+ πŸ’‘ **Tips**: Use face cropping if your portrait is too far away β€’ Preview the animation before generating β€’ Try the examples below!
300
+
301
+ </div>
302
+ """)
 
303
 
304
  # Main Layout: 3 columns - Image, Video, Results
305
  with gr.Row():