Update app.py

app.py

@@ -28,8 +28,8 @@ pipe.set_adapters(["causvid_lora"], adapter_weights=[0.95])
 pipe.fuse_lora()
 
 MOD_VALUE = 32
-DEFAULT_H_SLIDER_VALUE = 320
-DEFAULT_W_SLIDER_VALUE = 560
+DEFAULT_H_SLIDER_VALUE = 512
+DEFAULT_W_SLIDER_VALUE = 896
 NEW_FORMULA_MAX_AREA = 480.0 * 832.0 
 
 SLIDER_MIN_H, SLIDER_MAX_H = 128, 896
@@ -37,170 +37,12 @@ SLIDER_MIN_W, SLIDER_MAX_W = 128, 896
 MAX_SEED = np.iinfo(np.int32).max
 
 FIXED_FPS = 24
-MIN_FRAMES_MODEL = 8
-MAX_FRAMES_MODEL = 120
+MIN_FRAMES_MODEL = 60
+MAX_FRAMES_MODEL = 600
 
 default_prompt_i2v = "make this image come alive, cinematic motion, smooth animation"
 default_negative_prompt = "Bright tones, overexposed, static, blurred details, subtitles, style, works, paintings, images, static, overall gray, worst quality, low quality, JPEG compression residue, ugly, incomplete, extra fingers, poorly drawn hands, poorly drawn faces, deformed, disfigured, misshapen limbs, fused fingers, still picture, messy background, three legs, many people in the background, walking backwards, watermark, text, signature"
 
-# CSS 스타일 정의
-custom_css = """
-/* 전체 배경 그라디언트 */
-.gradio-container {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #fa709a 100%) !important;
-    background-size: 400% 400% !important;
-    animation: gradientShift 15s ease infinite !important;
-}
-
-@keyframes gradientShift {
-    0% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
-    100% { background-position: 0% 50%; }
-}
-
-/* 메인 컨테이너 스타일 */
-.main-container {
-    backdrop-filter: blur(10px);
-    background: rgba(255, 255, 255, 0.1) !important;
-    border-radius: 20px !important;
-    padding: 30px !important;
-    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37) !important;
-    border: 1px solid rgba(255, 255, 255, 0.18) !important;
-}
-
-/* 헤더 스타일 */
-h1 {
-    background: linear-gradient(45deg, #ffffff, #f0f0f0) !important;
-    -webkit-background-clip: text !important;
-    -webkit-text-fill-color: transparent !important;
-    background-clip: text !important;
-    font-weight: 800 !important;
-    font-size: 2.5rem !important;
-    text-align: center !important;
-    margin-bottom: 2rem !important;
-    text-shadow: 2px 2px 4px rgba(0,0,0,0.1) !important;
-}
-
-/* 컴포넌트 컨테이너 스타일 */
-.input-container, .output-container {
-    background: rgba(255, 255, 255, 0.08) !important;
-    border-radius: 15px !important;
-    padding: 20px !important;
-    margin: 10px 0 !important;
-    backdrop-filter: blur(5px) !important;
-    border: 1px solid rgba(255, 255, 255, 0.1) !important;
-}
-
-/* 입력 필드 스타일 */
-input, textarea, .gr-box {
-    background: rgba(255, 255, 255, 0.9) !important;
-    border: 1px solid rgba(255, 255, 255, 0.3) !important;
-    border-radius: 10px !important;
-    color: #333 !important;
-    transition: all 0.3s ease !important;
-}
-
-input:focus, textarea:focus {
-    background: rgba(255, 255, 255, 1) !important;
-    border-color: #667eea !important;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
-}
-
-/* 버튼 스타일 */
-.generate-btn {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    color: white !important;
-    font-weight: 600 !important;
-    font-size: 1.1rem !important;
-    padding: 12px 30px !important;
-    border-radius: 50px !important;
-    border: none !important;
-    cursor: pointer !important;
-    transition: all 0.3s ease !important;
-    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
-}
-
-.generate-btn:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
-}
-
-/* 슬라이더 스타일 */
-input[type="range"] {
-    background: transparent !important;
-}
-
-input[type="range"]::-webkit-slider-track {
-    background: rgba(255, 255, 255, 0.3) !important;
-    border-radius: 5px !important;
-    height: 6px !important;
-}
-
-input[type="range"]::-webkit-slider-thumb {
-    background: linear-gradient(135deg, #667eea, #764ba2) !important;
-    border: 2px solid white !important;
-    border-radius: 50% !important;
-    cursor: pointer !important;
-    width: 18px !important;
-    height: 18px !important;
-    -webkit-appearance: none !important;
-}
-
-/* Accordion 스타일 */
-.gr-accordion {
-    background: rgba(255, 255, 255, 0.05) !important;
-    border-radius: 10px !important;
-    border: 1px solid rgba(255, 255, 255, 0.1) !important;
-    margin: 15px 0 !important;
-}
-
-/* 라벨 스타일 */
-label {
-    color: #ffffff !important;
-    font-weight: 500 !important;
-    font-size: 0.95rem !important;
-    margin-bottom: 5px !important;
-}
-
-/* 이미지 업로드 영역 */
-.image-upload {
-    border: 2px dashed rgba(255, 255, 255, 0.3) !important;
-    border-radius: 15px !important;
-    background: rgba(255, 255, 255, 0.05) !important;
-    transition: all 0.3s ease !important;
-}
-
-.image-upload:hover {
-    border-color: rgba(255, 255, 255, 0.5) !important;
-    background: rgba(255, 255, 255, 0.1) !important;
-}
-
-/* 비디오 출력 영역 */
-video {
-    border-radius: 15px !important;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
-}
-
-/* Examples 섹션 스타일 */
-.gr-examples {
-    background: rgba(255, 255, 255, 0.05) !important;
-    border-radius: 15px !important;
-    padding: 20px !important;
-    margin-top: 20px !important;
-}
-
-/* Checkbox 스타일 */
-input[type="checkbox"] {
-    accent-color: #667eea !important;
-}
-
-/* 반응형 애니메이션 */
-@media (max-width: 768px) {
-    h1 { font-size: 2rem !important; }
-    .main-container { padding: 20px !important; }
-}
-"""
 
 def _calculate_new_dimensions_wan(pil_image, mod_val, calculation_max_area,
                                  min_slider_h, max_slider_h,
@@ -251,11 +93,51 @@ def get_duration(input_image, prompt, height, width,
 
 @spaces.GPU(duration=get_duration)
 def generate_video(input_image, prompt, height, width, 
-                   negative_prompt=default_negative_prompt, duration_seconds = 2,
+                   negative_prompt=default_negative_prompt, duration_seconds = 5,
                    guidance_scale = 1, steps = 4,
                    seed = 42, randomize_seed = False, 
                    progress=gr.Progress(track_tqdm=True)):
+    """
+    Generate a video from an input image using the Wan 2.1 I2V model with CausVid LoRA.
+    
+    This function takes an input image and generates a video animation based on the provided
+    prompt and parameters. It uses the Wan 2.1 14B Image-to-Video model with CausVid LoRA
+    for fast generation in 4-8 steps.
+    
+    Args:
+        input_image (PIL.Image): The input image to animate. Will be resized to target dimensions.
+        prompt (str): Text prompt describing the desired animation or motion.
+        height (int): Target height for the output video. Will be adjusted to multiple of MOD_VALUE (32).
+        width (int): Target width for the output video. Will be adjusted to multiple of MOD_VALUE (32).
+        negative_prompt (str, optional): Negative prompt to avoid unwanted elements. 
+            Defaults to default_negative_prompt (contains unwanted visual artifacts).
+        duration_seconds (float, optional): Duration of the generated video in seconds.
+            Defaults to 2. Clamped between MIN_FRAMES_MODEL/FIXED_FPS and MAX_FRAMES_MODEL/FIXED_FPS.
+        guidance_scale (float, optional): Controls adherence to the prompt. Higher values = more adherence.
+            Defaults to 1.0. Range: 0.0-20.0.
+        steps (int, optional): Number of inference steps. More steps = higher quality but slower.
+            Defaults to 4. Range: 1-30.
+        seed (int, optional): Random seed for reproducible results. Defaults to 42.
+            Range: 0 to MAX_SEED (2147483647).
+        randomize_seed (bool, optional): Whether to use a random seed instead of the provided seed.
+            Defaults to False.
+        progress (gr.Progress, optional): Gradio progress tracker. Defaults to gr.Progress(track_tqdm=True).
     
+    Returns:
+        tuple: A tuple containing:
+            - video_path (str): Path to the generated video file (.mp4)
+            - current_seed (int): The seed used for generation (useful when randomize_seed=True)
+    
+    Raises:
+        gr.Error: If input_image is None (no image uploaded).
+    
+    Note:
+        - The function automatically resizes the input image to the target dimensions
+        - Frame count is calculated as duration_seconds * FIXED_FPS (24)
+        - Output dimensions are adjusted to be multiples of MOD_VALUE (32)
+        - The function uses GPU acceleration via the @spaces.GPU decorator
+        - Generation time varies based on steps and duration (see get_duration function)
+    """
     if input_image is None:
         raise gr.Error("Please upload an input image.")
 
@@ -281,140 +163,55 @@ def generate_video(input_image, prompt, height, width,
     export_to_video(output_frames_list, video_path, fps=FIXED_FPS)
     return video_path, current_seed
 
-with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
-    with gr.Column(elem_classes=["main-container"]):
-        gr.Markdown("# ✨ Fast 4 steps Wan 2.1 I2V (14B) with CausVid LoRA")
-
-        # Add badges side by side
-        gr.HTML("""
-        <div class="badge-container">
-            <a href="https://huggingface.co/spaces/Heartsync/WAN2-1-fast-T2V-FusioniX" target="_blank">
-                <img src="https://img.shields.io/static/v1?label=BASE&message=WAN%202.1%20T2V-FusioniX&color=%23008080&labelColor=%23533a7d&logo=huggingface&logoColor=%23ffffff&style=for-the-badge" alt="Base Model">
-            </a>
-            <a href="https://huggingface.co/spaces/Heartsync/WAN2-1-fast-T2V-FusioniX2" target="_blank">
-                <img src="https://img.shields.io/static/v1?label=BASE&message=WAN%202.1%20T2V-Fusioni2X&color=%23008080&labelColor=%23533a7d&logo=huggingface&logoColor=%23ffffff&style=for-the-badge" alt="Base Model">
-            </a>            
-            <a href="https://huggingface.co/spaces/Heartsync/wan2-1-fast-security" target="_blank">
-                <img src="https://img.shields.io/static/v1?label=WAN%202.1&message=FAST%20%26%20Furios&color=%23008080&labelColor=%230000ff&logo=huggingface&logoColor=%23ffa500&style=for-the-badge" alt="badge">
-            </a>
-        </div>
-        """)
-        
-        with gr.Row():
-            with gr.Column(elem_classes=["input-container"]):
-                input_image_component = gr.Image(
-                    type="pil", 
-                    label="🖼️ Input Image (auto-resized to target H/W)",
-                    elem_classes=["image-upload"]
-                )
-                prompt_input = gr.Textbox(
-                    label="✏️ Prompt", 
-                    value=default_prompt_i2v,
-                    lines=2
-                )
-                duration_seconds_input = gr.Slider(
-                    minimum=round(MIN_FRAMES_MODEL/FIXED_FPS,1), 
-                    maximum=round(MAX_FRAMES_MODEL/FIXED_FPS,1), 
-                    step=0.1, 
-                    value=2, 
-                    label="⏱️ Duration (seconds)", 
-                    info=f"Clamped to model's {MIN_FRAMES_MODEL}-{MAX_FRAMES_MODEL} frames at {FIXED_FPS}fps."
-                )
-                
-                with gr.Accordion("⚙️ Advanced Settings", open=False):
-                    negative_prompt_input = gr.Textbox(
-                        label="❌ Negative Prompt", 
-                        value=default_negative_prompt, 
-                        lines=3
-                    )
-                    seed_input = gr.Slider(
-                        label="🎲 Seed", 
-                        minimum=0, 
-                        maximum=MAX_SEED, 
-                        step=1, 
-                        value=42, 
-                        interactive=True
-                    )
-                    randomize_seed_checkbox = gr.Checkbox(
-                        label="🔀 Randomize seed", 
-                        value=True, 
-                        interactive=True
-                    )
-                    with gr.Row():
-                        height_input = gr.Slider(
-                            minimum=SLIDER_MIN_H, 
-                            maximum=SLIDER_MAX_H, 
-                            step=MOD_VALUE, 
-                            value=DEFAULT_H_SLIDER_VALUE, 
-                            label=f"📏 Output Height (multiple of {MOD_VALUE})"
-                        )
-                        width_input = gr.Slider(
-                            minimum=SLIDER_MIN_W, 
-                            maximum=SLIDER_MAX_W, 
-                            step=MOD_VALUE, 
-                            value=DEFAULT_W_SLIDER_VALUE, 
-                            label=f"📐 Output Width (multiple of {MOD_VALUE})"
-                        )
-                    steps_slider = gr.Slider(
-                        minimum=1, 
-                        maximum=30, 
-                        step=1, 
-                        value=4, 
-                        label="🚀 Inference Steps"
-                    ) 
-                    guidance_scale_input = gr.Slider(
-                        minimum=0.0, 
-                        maximum=20.0, 
-                        step=0.5, 
-                        value=1.0, 
-                        label="🎯 Guidance Scale", 
-                        visible=False
-                    )
-
-                generate_button = gr.Button(
-                    "🎬 Generate Video", 
-                    variant="primary",
-                    elem_classes=["generate-btn"]
-                )
-                
-            with gr.Column(elem_classes=["output-container"]):
-                video_output = gr.Video(
-                    label="🎥 Generated Video", 
-                    autoplay=True, 
-                    interactive=False
-                )
-
-        input_image_component.upload(
-            fn=handle_image_upload_for_dims_wan,
-            inputs=[input_image_component, height_input, width_input],
-            outputs=[height_input, width_input]
-        )
-        
-        input_image_component.clear( 
-            fn=handle_image_upload_for_dims_wan,
-            inputs=[input_image_component, height_input, width_input],
-            outputs=[height_input, width_input]
-        )
-        
-        ui_inputs = [
-            input_image_component, prompt_input, height_input, width_input,
-            negative_prompt_input, duration_seconds_input,
-            guidance_scale_input, steps_slider, seed_input, randomize_seed_checkbox
-        ]
-        generate_button.click(fn=generate_video, inputs=ui_inputs, outputs=[video_output, seed_input])
-
+with gr.Blocks() as demo:
+    gr.Markdown("# Fast 4 steps Wan 2.1 I2V (14B) with CausVid LoRA")
+    gr.Markdown("[CausVid](https://github.com/tianweiy/CausVid) is a distilled version of Wan 2.1 to run faster in just 4-8 steps, [extracted as LoRA by Kijai](https://huggingface.co/Kijai/WanVideo_comfy/blob/main/Wan21_CausVid_14B_T2V_lora_rank32.safetensors) and is compatible with 🧨 diffusers")
+    with gr.Row():
         with gr.Column():
-            gr.Examples(
-                examples=[ 
-                    ["peng.png", "a penguin playfully dancing in the snow, Antarctica", 896, 896],
-                    ["forg.jpg", "the frog jumps around", 832, 832],
-                ],
-                inputs=[input_image_component, prompt_input, height_input, width_input], 
-                outputs=[video_output, seed_input], 
-                fn=generate_video, 
-                cache_examples="lazy",
-                label="🌟 Example Gallery"
-            )
+            input_image_component = gr.Image(type="pil", label="Input Image (auto-resized to target H/W)")
+            prompt_input = gr.Textbox(label="Prompt", value=default_prompt_i2v)
+            duration_seconds_input = gr.Slider(minimum=round(MIN_FRAMES_MODEL/FIXED_FPS,1), maximum=round(MAX_FRAMES_MODEL/FIXED_FPS,1), step=0.1, value=2, label="Duration (seconds)", info=f"Clamped to model's {MIN_FRAMES_MODEL}-{MAX_FRAMES_MODEL} frames at {FIXED_FPS}fps.")
+            
+            with gr.Accordion("Advanced Settings", open=False):
+                negative_prompt_input = gr.Textbox(label="Negative Prompt", value=default_negative_prompt, lines=3)
+                seed_input = gr.Slider(label="Seed", minimum=0, maximum=MAX_SEED, step=1, value=42, interactive=True)
+                randomize_seed_checkbox = gr.Checkbox(label="Randomize seed", value=True, interactive=True)
+                with gr.Row():
+                    height_input = gr.Slider(minimum=SLIDER_MIN_H, maximum=SLIDER_MAX_H, step=MOD_VALUE, value=DEFAULT_H_SLIDER_VALUE, label=f"Output Height (multiple of {MOD_VALUE})")
+                    width_input = gr.Slider(minimum=SLIDER_MIN_W, maximum=SLIDER_MAX_W, step=MOD_VALUE, value=DEFAULT_W_SLIDER_VALUE, label=f"Output Width (multiple of {MOD_VALUE})")
+                steps_slider = gr.Slider(minimum=1, maximum=30, step=1, value=4, label="Inference Steps") 
+                guidance_scale_input = gr.Slider(minimum=0.0, maximum=20.0, step=0.5, value=1.0, label="Guidance Scale", visible=False)
+
+            generate_button = gr.Button("Generate Video", variant="primary")
+        with gr.Column():
+            video_output = gr.Video(label="Generated Video", autoplay=True, interactive=False)
+
+    input_image_component.upload(
+        fn=handle_image_upload_for_dims_wan,
+        inputs=[input_image_component, height_input, width_input],
+        outputs=[height_input, width_input]
+    )
+    
+    input_image_component.clear( 
+        fn=handle_image_upload_for_dims_wan,
+        inputs=[input_image_component, height_input, width_input],
+        outputs=[height_input, width_input]
+    )
+    
+    ui_inputs = [
+        input_image_component, prompt_input, height_input, width_input,
+        negative_prompt_input, duration_seconds_input,
+        guidance_scale_input, steps_slider, seed_input, randomize_seed_checkbox
+    ]
+    generate_button.click(fn=generate_video, inputs=ui_inputs, outputs=[video_output, seed_input])
+
+    gr.Examples(
+        examples=[ 
+            ["peng.png", "a penguin playfully dancing in the snow, Antarctica", 896, 512],
+            ["forg.jpg", "the frog jumps around", 448, 832],
+        ],
+        inputs=[input_image_component, prompt_input, height_input, width_input], outputs=[video_output, seed_input], fn=generate_video, cache_examples="lazy"
+    )
 
 if __name__ == "__main__":
-    demo.queue().launch()
+    demo.queue().launch(mcp_server=True)