Update app.py

app.py

@@ -1,7 +1,8 @@
-
 import os
 
-os.environ['HF_HOME'] = os.path.abspath(os.path.realpath(os.path.join(os.path.dirname(__file__), './hf_download')))
+os.environ['HF_HOME'] = os.path.abspath(
+    os.path.realpath(os.path.join(os.path.dirname(__file__), './hf_download'))
+)
 
 import gradio as gr
 import torch
@@ -14,12 +15,32 @@ import spaces
 
 from PIL import Image
 from diffusers import AutoencoderKLHunyuanVideo
-from transformers import LlamaModel, CLIPTextModel, LlamaTokenizerFast, CLIPTokenizer
-from diffusers_helper.hunyuan import encode_prompt_conds, vae_decode, vae_encode, vae_decode_fake
-from diffusers_helper.utils import save_bcthw_as_mp4, crop_or_pad_yield_mask, soft_append_bcthw, resize_and_center_crop, state_dict_weighted_merge, state_dict_offset_merge, generate_timestamp
+from transformers import (
+    LlamaModel, CLIPTextModel,
+    LlamaTokenizerFast, CLIPTokenizer
+)
+from diffusers_helper.hunyuan import (
+    encode_prompt_conds, vae_decode,
+    vae_encode, vae_decode_fake
+)
+from diffusers_helper.utils import (
+    save_bcthw_as_mp4, crop_or_pad_yield_mask,
+    soft_append_bcthw, resize_and_center_crop,
+    state_dict_weighted_merge, state_dict_offset_merge,
+    generate_timestamp
+)
 from diffusers_helper.models.hunyuan_video_packed import HunyuanVideoTransformer3DModelPacked
 from diffusers_helper.pipelines.k_diffusion_hunyuan import sample_hunyuan
-from diffusers_helper.memory import cpu, gpu, get_cuda_free_memory_gb, move_model_to_device_with_memory_preservation, offload_model_from_device_for_memory_preservation, fake_diffusers_current_device, DynamicSwapInstaller, unload_complete_models, load_model_as_complete
+from diffusers_helper.memory import (
+    cpu, gpu,
+    get_cuda_free_memory_gb,
+    move_model_to_device_with_memory_preservation,
+    offload_model_from_device_for_memory_preservation,
+    fake_diffusers_current_device,
+    DynamicSwapInstaller,
+    unload_complete_models,
+    load_model_as_complete
+)
 from diffusers_helper.thread_utils import AsyncStream, async_run
 from diffusers_helper.gradio.progress_bar import make_progress_bar_css, make_progress_bar_html
 from transformers import SiglipImageProcessor, SiglipVisionModel
@@ -33,16 +54,44 @@ high_vram = free_mem_gb > 60
 print(f'Free VRAM {free_mem_gb} GB')
 print(f'High-VRAM Mode: {high_vram}')
 
-text_encoder = LlamaModel.from_pretrained("hunyuanvideo-community/HunyuanVideo", subfolder='text_encoder', torch_dtype=torch.float16).cpu()
-text_encoder_2 = CLIPTextModel.from_pretrained("hunyuanvideo-community/HunyuanVideo", subfolder='text_encoder_2', torch_dtype=torch.float16).cpu()
-tokenizer = LlamaTokenizerFast.from_pretrained("hunyuanvideo-community/HunyuanVideo", subfolder='tokenizer')
-tokenizer_2 = CLIPTokenizer.from_pretrained("hunyuanvideo-community/HunyuanVideo", subfolder='tokenizer_2')
-vae = AutoencoderKLHunyuanVideo.from_pretrained("hunyuanvideo-community/HunyuanVideo", subfolder='vae', torch_dtype=torch.float16).cpu()
-
-feature_extractor = SiglipImageProcessor.from_pretrained("lllyasviel/flux_redux_bfl", subfolder='feature_extractor')
-image_encoder = SiglipVisionModel.from_pretrained("lllyasviel/flux_redux_bfl", subfolder='image_encoder', torch_dtype=torch.float16).cpu()
-
-transformer = HunyuanVideoTransformer3DModelPacked.from_pretrained('lllyasviel/FramePack_F1_I2V_HY_20250503', torch_dtype=torch.bfloat16).cpu()
+text_encoder = LlamaModel.from_pretrained(
+    "hunyuanvideo-community/HunyuanVideo",
+    subfolder='text_encoder',
+    torch_dtype=torch.float16
+).cpu()
+text_encoder_2 = CLIPTextModel.from_pretrained(
+    "hunyuanvideo-community/HunyuanVideo",
+    subfolder='text_encoder_2',
+    torch_dtype=torch.float16
+).cpu()
+tokenizer = LlamaTokenizerFast.from_pretrained(
+    "hunyuanvideo-community/HunyuanVideo",
+    subfolder='tokenizer'
+)
+tokenizer_2 = CLIPTokenizer.from_pretrained(
+    "hunyuanvideo-community/HunyuanVideo",
+    subfolder='tokenizer_2'
+)
+vae = AutoencoderKLHunyuanVideo.from_pretrained(
+    "hunyuanvideo-community/HunyuanVideo",
+    subfolder='vae',
+    torch_dtype=torch.float16
+).cpu()
+
+feature_extractor = SiglipImageProcessor.from_pretrained(
+    "lllyasviel/flux_redux_bfl",
+    subfolder='feature_extractor'
+)
+image_encoder = SiglipVisionModel.from_pretrained(
+    "lllyasviel/flux_redux_bfl",
+    subfolder='image_encoder',
+    torch_dtype=torch.float16
+).cpu()
+
+transformer = HunyuanVideoTransformer3DModelPacked.from_pretrained(
+    'lllyasviel/FramePack_F1_I2V_HY_20250503',
+    torch_dtype=torch.bfloat16
+).cpu()
 
 vae.eval()
 text_encoder.eval()
@@ -86,39 +135,41 @@ outputs_folder = './outputs/'
 os.makedirs(outputs_folder, exist_ok=True)
 
 examples = [
-["img_examples/1.png", "The girl dances gracefully, with clear movements, full of charm.",],
-["img_examples/2.jpg", "The man dances flamboyantly, swinging his hips and striking bold poses with dramatic flair."],
-["img_examples/3.png", "The woman dances elegantly among the blossoms, spinning slowly with flowing sleeves and graceful hand movements."],
+    ["img_examples/1.png", "The girl dances gracefully, with clear movements, full of charm."],
+    ["img_examples/2.jpg", "The man dances flamboyantly, swinging his hips and striking bold poses with dramatic flair."],
+    ["img_examples/3.png", "The woman dances elegantly among the blossoms, spinning slowly with flowing sleeves and graceful hand movements."]
 ]
 
 def generate_examples(input_image, prompt):
-    
-    t2v=False 
+    t2v=False
     n_prompt=""
     seed=31337
-    total_second_length=5 
-    latent_window_size=9 
-    steps=25 
-    cfg=1.0 
-    gs=10.0 
+    total_second_length=5
+    latent_window_size=9
+    steps=25
+    cfg=1.0
+    gs=10.0
     rs=0.0
-    gpu_memory_preservation=6 
-    use_teacache=True 
+    gpu_memory_preservation=6
+    use_teacache=True
     mp4_crf=16
 
     global stream
-    
-    # assert input_image is not None, 'No input image!'
+
     if t2v:
         default_height, default_width = 640, 640
         input_image = np.ones((default_height, default_width, 3), dtype=np.uint8) * 255
-        print("No input image provided. Using a blank white image.") 
+        print("No input image provided. Using a blank white image.")
 
     yield None, None, '', '', gr.update(interactive=False), gr.update(interactive=True)
 
     stream = AsyncStream()
 
-    async_run(worker, input_image, prompt, n_prompt, seed, total_second_length, latent_window_size, steps, cfg, gs, rs, gpu_memory_preservation, use_teacache, mp4_crf)
+    async_run(
+        worker, input_image, prompt, n_prompt, seed,
+        total_second_length, latent_window_size, steps,
+        cfg, gs, rs, gpu_memory_preservation, use_teacache, mp4_crf
+    )
 
     output_filename = None
 
@@ -127,68 +178,111 @@ def generate_examples(input_image, prompt):
 
         if flag == 'file':
             output_filename = data
-            yield output_filename, gr.update(), gr.update(), gr.update(), gr.update(interactive=False), gr.update(interactive=True)
+            yield (
+                output_filename,
+                gr.update(),
+                gr.update(),
+                gr.update(),
+                gr.update(interactive=False),
+                gr.update(interactive=True)
+            )
 
         if flag == 'progress':
             preview, desc, html = data
-            yield gr.update(), gr.update(visible=True, value=preview), desc, html, gr.update(interactive=False), gr.update(interactive=True)
+            yield (
+                gr.update(),
+                gr.update(visible=True, value=preview),
+                desc, html,
+                gr.update(interactive=False),
+                gr.update(interactive=True)
+            )
 
         if flag == 'end':
-            yield output_filename, gr.update(visible=False), gr.update(), '', gr.update(interactive=True), gr.update(interactive=False)
+            yield (
+                output_filename,
+                gr.update(visible=False),
+                gr.update(),
+                '',
+                gr.update(interactive=True),
+                gr.update(interactive=False)
+            )
             break
 
-
-    
 @torch.no_grad()
-def worker(input_image, prompt, n_prompt, seed, total_second_length, latent_window_size, steps, cfg, gs, rs, gpu_memory_preservation, use_teacache, mp4_crf):
+def worker(
+    input_image, prompt, n_prompt, seed,
+    total_second_length, latent_window_size,
+    steps, cfg, gs, rs,
+    gpu_memory_preservation, use_teacache, mp4_crf
+):
     total_latent_sections = (total_second_length * 30) / (latent_window_size * 4)
     total_latent_sections = int(max(round(total_latent_sections), 1))
 
     job_id = generate_timestamp()
 
-    stream.output_queue.push(('progress', (None, '', make_progress_bar_html(0, 'Starting ...'))))
+    stream.output_queue.push(
+        ('progress', (None, '', make_progress_bar_html(0, 'Starting ...')))
+    )
 
     try:
-        # Clean GPU
+        # Clean GPU if VRAM is low
         if not high_vram:
             unload_complete_models(
                 text_encoder, text_encoder_2, image_encoder, vae, transformer
             )
 
         # Text encoding
-
-        stream.output_queue.push(('progress', (None, '', make_progress_bar_html(0, 'Text encoding ...'))))
+        stream.output_queue.push(
+            ('progress', (None, '', make_progress_bar_html(0, 'Text encoding ...')))
+        )
 
         if not high_vram:
-            fake_diffusers_current_device(text_encoder, gpu)  # since we only encode one text - that is one model move and one encode, offload is same time consumption since it is also one load and one encode.
+            fake_diffusers_current_device(text_encoder, gpu)
             load_model_as_complete(text_encoder_2, target_device=gpu)
 
-        llama_vec, clip_l_pooler = encode_prompt_conds(prompt, text_encoder, text_encoder_2, tokenizer, tokenizer_2)
+        llama_vec, clip_l_pooler = encode_prompt_conds(
+            prompt, text_encoder, text_encoder_2,
+            tokenizer, tokenizer_2
+        )
 
         if cfg == 1:
-            llama_vec_n, clip_l_pooler_n = torch.zeros_like(llama_vec), torch.zeros_like(clip_l_pooler)
+            llama_vec_n, clip_l_pooler_n = (
+                torch.zeros_like(llama_vec),
+                torch.zeros_like(clip_l_pooler)
+            )
         else:
-            llama_vec_n, clip_l_pooler_n = encode_prompt_conds(n_prompt, text_encoder, text_encoder_2, tokenizer, tokenizer_2)
+            llama_vec_n, clip_l_pooler_n = encode_prompt_conds(
+                n_prompt, text_encoder, text_encoder_2,
+                tokenizer, tokenizer_2
+            )
 
         llama_vec, llama_attention_mask = crop_or_pad_yield_mask(llama_vec, length=512)
         llama_vec_n, llama_attention_mask_n = crop_or_pad_yield_mask(llama_vec_n, length=512)
 
         # Processing input image
-
-        stream.output_queue.push(('progress', (None, '', make_progress_bar_html(0, 'Image processing ...'))))
+        stream.output_queue.push(
+            ('progress', (None, '', make_progress_bar_html(0, 'Image processing ...')))
+        )
 
         H, W, C = input_image.shape
         height, width = find_nearest_bucket(H, W, resolution=640)
-        input_image_np = resize_and_center_crop(input_image, target_width=width, target_height=height)
+        input_image_np = resize_and_center_crop(
+            input_image,
+            target_width=width,
+            target_height=height
+        )
 
-        Image.fromarray(input_image_np).save(os.path.join(outputs_folder, f'{job_id}.png'))
+        Image.fromarray(input_image_np).save(
+            os.path.join(outputs_folder, f'{job_id}.png')
+        )
 
         input_image_pt = torch.from_numpy(input_image_np).float() / 127.5 - 1
         input_image_pt = input_image_pt.permute(2, 0, 1)[None, :, None]
 
         # VAE encoding
-
-        stream.output_queue.push(('progress', (None, '', make_progress_bar_html(0, 'VAE encoding ...'))))
+        stream.output_queue.push(
+            ('progress', (None, '', make_progress_bar_html(0, 'VAE encoding ...')))
+        )
 
         if not high_vram:
             load_model_as_complete(vae, target_device=gpu)
@@ -196,33 +290,42 @@ def worker(input_image, prompt, n_prompt, seed, total_second_length, latent_wind
         start_latent = vae_encode(input_image_pt, vae)
 
         # CLIP Vision
-
-        stream.output_queue.push(('progress', (None, '', make_progress_bar_html(0, 'CLIP Vision encoding ...'))))
+        stream.output_queue.push(
+            ('progress', (None, '', make_progress_bar_html(0, 'CLIP Vision encoding ...')))
+        )
 
         if not high_vram:
             load_model_as_complete(image_encoder, target_device=gpu)
 
-        image_encoder_output = hf_clip_vision_encode(input_image_np, feature_extractor, image_encoder)
+        image_encoder_output = hf_clip_vision_encode(
+            input_image_np, feature_extractor, image_encoder
+        )
         image_encoder_last_hidden_state = image_encoder_output.last_hidden_state
 
         # Dtype
-
         llama_vec = llama_vec.to(transformer.dtype)
         llama_vec_n = llama_vec_n.to(transformer.dtype)
         clip_l_pooler = clip_l_pooler.to(transformer.dtype)
         clip_l_pooler_n = clip_l_pooler_n.to(transformer.dtype)
         image_encoder_last_hidden_state = image_encoder_last_hidden_state.to(transformer.dtype)
 
-        # Sampling
-
-        stream.output_queue.push(('progress', (None, '', make_progress_bar_html(0, 'Start sampling ...'))))
+        # Start sampling
+        stream.output_queue.push(
+            ('progress', (None, '', make_progress_bar_html(0, 'Start sampling ...')))
+        )
 
         rnd = torch.Generator("cpu").manual_seed(seed)
 
-        history_latents = torch.zeros(size=(1, 16, 16 + 2 + 1, height // 8, width // 8), dtype=torch.float32).cpu()
+        history_latents = torch.zeros(
+            size=(1, 16, 16 + 2 + 1, height // 8, width // 8),
+            dtype=torch.float32
+        ).cpu()
         history_pixels = None
 
-        history_latents = torch.cat([history_latents, start_latent.to(history_latents)], dim=2)
+        history_latents = torch.cat(
+            [history_latents, start_latent.to(history_latents)],
+            dim=2
+        )
         total_generated_latent_frames = 1
 
         for section_index in range(total_latent_sections):
@@ -234,7 +337,10 @@ def worker(input_image, prompt, n_prompt, seed, total_second_length, latent_wind
 
             if not high_vram:
                 unload_complete_models()
-                move_model_to_device_with_memory_preservation(transformer, target_device=gpu, preserved_memory_gb=gpu_memory_preservation)
+                move_model_to_device_with_memory_preservation(
+                    transformer, target_device=gpu,
+                    preserved_memory_gb=gpu_memory_preservation
+                )
 
             if use_teacache:
                 transformer.initialize_teacache(enable_teacache=True, num_steps=steps)
@@ -244,9 +350,11 @@ def worker(input_image, prompt, n_prompt, seed, total_second_length, latent_wind
             def callback(d):
                 preview = d['denoised']
                 preview = vae_decode_fake(preview)
-
                 preview = (preview * 255.0).detach().cpu().numpy().clip(0, 255).astype(np.uint8)
-                preview = einops.rearrange(preview, 'b c t h w -> (b h) (t w) c')
+                preview = einops.rearrange(
+                    preview,
+                    'b c t h w -> (b h) (t w) c'
+                )
 
                 if stream.input_queue.top() == 'end':
                     stream.output_queue.push(('end', None))
@@ -255,16 +363,35 @@ def worker(input_image, prompt, n_prompt, seed, total_second_length, latent_wind
                 current_step = d['i'] + 1
                 percentage = int(100.0 * current_step / steps)
                 hint = f'Sampling {current_step}/{steps}'
-                desc = f'Total generated frames: {int(max(0, total_generated_latent_frames * 4 - 3))}, Video length: {max(0, (total_generated_latent_frames * 4 - 3) / 30) :.2f} seconds (FPS-30). The video is being extended now ...'
-                stream.output_queue.push(('progress', (preview, desc, make_progress_bar_html(percentage, hint))))
+                desc = f'Section {section_index+1}/{total_latent_sections}'
+                stream.output_queue.push(
+                    ('progress', (preview, desc, make_progress_bar_html(percentage, hint)))
+                )
                 return
 
-            indices = torch.arange(0, sum([1, 16, 2, 1, latent_window_size])).unsqueeze(0)
-            clean_latent_indices_start, clean_latent_4x_indices, clean_latent_2x_indices, clean_latent_1x_indices, latent_indices = indices.split([1, 16, 2, 1, latent_window_size], dim=1)
-            clean_latent_indices = torch.cat([clean_latent_indices_start, clean_latent_1x_indices], dim=1)
+            indices = torch.arange(
+                0,
+                sum([1, 16, 2, 1, latent_window_size])
+            ).unsqueeze(0)
+            (
+                clean_latent_indices_start,
+                clean_latent_4x_indices,
+                clean_latent_2x_indices,
+                clean_latent_1x_indices,
+                latent_indices
+            ) = indices.split([1, 16, 2, 1, latent_window_size], dim=1)
+            clean_latent_indices = torch.cat(
+                [clean_latent_indices_start, clean_latent_1x_indices],
+                dim=1
+            )
 
-            clean_latents_4x, clean_latents_2x, clean_latents_1x = history_latents[:, :, -sum([16, 2, 1]):, :, :].split([16, 2, 1], dim=2)
-            clean_latents = torch.cat([start_latent.to(history_latents), clean_latents_1x], dim=2)
+            clean_latents_4x, clean_latents_2x, clean_latents_1x = history_latents[
+                :, :, -sum([16, 2, 1]):, :, :
+            ].split([16, 2, 1], dim=2)
+            clean_latents = torch.cat(
+                [start_latent.to(history_latents), clean_latents_1x],
+                dim=2
+            )
 
             generated_latents = sample_hunyuan(
                 transformer=transformer,
@@ -275,7 +402,6 @@ def worker(input_image, prompt, n_prompt, seed, total_second_length, latent_wind
                 real_guidance_scale=cfg,
                 distilled_guidance_scale=gs,
                 guidance_rescale=rs,
-                # shift=3.0,
                 num_inference_steps=steps,
                 generator=rnd,
                 prompt_embeds=llama_vec,
@@ -298,13 +424,21 @@ def worker(input_image, prompt, n_prompt, seed, total_second_length, latent_wind
             )
 
             total_generated_latent_frames += int(generated_latents.shape[2])
-            history_latents = torch.cat([history_latents, generated_latents.to(history_latents)], dim=2)
+            history_latents = torch.cat(
+                [history_latents, generated_latents.to(history_latents)],
+                dim=2
+            )
 
             if not high_vram:
-                offload_model_from_device_for_memory_preservation(transformer, target_device=gpu, preserved_memory_gb=8)
+                offload_model_from_device_for_memory_preservation(
+                    transformer, target_device=gpu,
+                    preserved_memory_gb=8
+                )
                 load_model_as_complete(vae, target_device=gpu)
 
-            real_history_latents = history_latents[:, :, -total_generated_latent_frames:, :, :]
+            real_history_latents = history_latents[
+                :, :, -total_generated_latent_frames:, :, :
+            ]
 
             if history_pixels is None:
                 history_pixels = vae_decode(real_history_latents, vae).cpu()
@@ -312,22 +446,33 @@ def worker(input_image, prompt, n_prompt, seed, total_second_length, latent_wind
                 section_latent_frames = latent_window_size * 2
                 overlapped_frames = latent_window_size * 4 - 3
 
-                current_pixels = vae_decode(real_history_latents[:, :, -section_latent_frames:], vae).cpu()
-                history_pixels = soft_append_bcthw(history_pixels, current_pixels, overlapped_frames)
+                current_pixels = vae_decode(
+                    real_history_latents[:, :, -section_latent_frames:], vae
+                ).cpu()
+                history_pixels = soft_append_bcthw(
+                    history_pixels, current_pixels, overlapped_frames
+                )
 
             if not high_vram:
                 unload_complete_models()
 
-            output_filename = os.path.join(outputs_folder, f'{job_id}_{total_generated_latent_frames}.mp4')
+            output_filename = os.path.join(
+                outputs_folder, f'{job_id}_{total_generated_latent_frames}.mp4'
+            )
 
-            save_bcthw_as_mp4(history_pixels, output_filename, fps=30, crf=mp4_crf)
+            save_bcthw_as_mp4(
+                history_pixels, output_filename,
+                fps=30, crf=mp4_crf
+            )
 
-            print(f'Decoded. Current latent shape {real_history_latents.shape}; pixel shape {history_pixels.shape}')
+            print(
+                f'Decoded. Current latent shape {real_history_latents.shape}; pixel shape {history_pixels.shape}'
+            )
 
             stream.output_queue.push(('file', output_filename))
+
     except:
         traceback.print_exc()
-
         if not high_vram:
             unload_complete_models(
                 text_encoder, text_encoder_2, image_encoder, vae, transformer
@@ -336,62 +481,62 @@ def worker(input_image, prompt, n_prompt, seed, total_second_length, latent_wind
     stream.output_queue.push(('end', None))
     return
 
-def get_duration(input_image, prompt, t2v, n_prompt, seed, total_second_length, latent_window_size, steps, cfg, gs, rs, gpu_memory_preservation, use_teacache, mp4_crf):
+def get_duration(
+    input_image, prompt, t2v, n_prompt, seed,
+    total_second_length, latent_window_size, steps,
+    cfg, gs, rs, gpu_memory_preservation, use_teacache, mp4_crf
+):
     return total_second_length * 60
 
 @spaces.GPU(duration=get_duration)
-def process(input_image, prompt, 
-            t2v=False, 
-            n_prompt="", 
-            seed=31337, 
-            total_second_length=5, 
-            latent_window_size=9, 
-            steps=25, 
-            cfg=1.0, 
-            gs=10.0, 
-            rs=0.0, 
-            gpu_memory_preservation=6, 
-            use_teacache=True, 
-            mp4_crf=16
-           ):
+def process(
+    input_image, prompt, t2v=False, n_prompt="",
+    seed=31337, total_second_length=5, latent_window_size=9,
+    steps=25, cfg=1.0, gs=10.0, rs=0.0,
+    gpu_memory_preservation=6, use_teacache=True, mp4_crf=16
+):
     global stream
-    
-    # assert input_image is not None, 'No input image!'
+
     if t2v:
         default_height, default_width = 640, 640
-        input_image = np.ones((default_height, default_width, 3), dtype=np.uint8) * 255
+        input_image = np.ones(
+            (default_height, default_width, 3),
+            dtype=np.uint8
+        ) * 255
         print("No input image provided. Using a blank white image.")
     else:
-        composite_rgba_uint8 = input_image["composite"] 
+        # ImageEditor에서 받은 composite RGBA를 분리
+        composite_rgba_uint8 = input_image["composite"]
 
-        # rgb_uint8 will be (H, W, 3), dtype uint8
+        # rgb_uint8: (H,W,3)
         rgb_uint8 = composite_rgba_uint8[:, :, :3]
-        # mask_uint8 will be (H, W), dtype uint8
+        # mask_uint8: (H,W)
         mask_uint8 = composite_rgba_uint8[:, :, 3]
-    
-        # Create background
+
+        # 흰색 배경
         h, w = rgb_uint8.shape[:2]
-        # White background, (H, W, 3), dtype uint8
-        background_uint8 = np.full((h, w, 3), 255, dtype=np.uint8) 
-        
-        # Normalize mask to range [0.0, 1.0]. 
+        background_uint8 = np.full((h, w, 3), 255, dtype=np.uint8)
+
+        # 알파 노멀라이즈
         alpha_normalized_float32 = mask_uint8.astype(np.float32) / 255.0
-        
-        # Expand alpha to 3 channels to match RGB images for broadcasting.
-        # alpha_mask_float32 will have shape (H, W, 3)
-        alpha_mask_float32 = np.stack([alpha_normalized_float32] * 3, axis=2)
-        
-        # alpha blending
-        blended_image_float32 = rgb_uint8.astype(np.float32) * alpha_mask_float32 + \
-                                background_uint8.astype(np.float32) * (1.0 - alpha_mask_float32)
+        alpha_mask_float32 = np.stack([alpha_normalized_float32]*3, axis=2)
+
+        # 알파 블렌딩
+        blended_image_float32 = \
+            rgb_uint8.astype(np.float32) * alpha_mask_float32 + \
+            background_uint8.astype(np.float32) * (1.0 - alpha_mask_float32)
 
         input_image = np.clip(blended_image_float32, 0, 255).astype(np.uint8)
-    
+
     yield None, None, '', '', gr.update(interactive=False), gr.update(interactive=True)
 
     stream = AsyncStream()
 
-    async_run(worker, input_image, prompt, n_prompt, seed, total_second_length, latent_window_size, steps, cfg, gs, rs, gpu_memory_preservation, use_teacache, mp4_crf)
+    async_run(
+        worker, input_image, prompt, n_prompt, seed,
+        total_second_length, latent_window_size, steps,
+        cfg, gs, rs, gpu_memory_preservation, use_teacache, mp4_crf
+    )
 
     output_filename = None
 
@@ -400,88 +545,265 @@ def process(input_image, prompt,
 
         if flag == 'file':
             output_filename = data
-            yield output_filename, gr.update(), gr.update(), gr.update(), gr.update(interactive=False), gr.update(interactive=True)
+            yield (
+                output_filename,
+                gr.update(),
+                gr.update(),
+                gr.update(),
+                gr.update(interactive=False),
+                gr.update(interactive=True)
+            )
 
-        if flag == 'progress':
+        elif flag == 'progress':
             preview, desc, html = data
-            yield gr.update(), gr.update(visible=True, value=preview), desc, html, gr.update(interactive=False), gr.update(interactive=True)
+            yield (
+                gr.update(),
+                gr.update(visible=True, value=preview),
+                desc, html,
+                gr.update(interactive=False),
+                gr.update(interactive=True)
+            )
 
-        if flag == 'end':
-            yield output_filename, gr.update(visible=False), gr.update(), '', gr.update(interactive=True), gr.update(interactive=False)
+        elif flag == 'end':
+            yield (
+                output_filename,
+                gr.update(visible=False),
+                gr.update(),
+                '',
+                gr.update(interactive=True),
+                gr.update(interactive=False)
+            )
             break
 
-
 def end_process():
     stream.input_queue.push('end')
 
-
 quick_prompts = [
     'The girl dances gracefully, with clear movements, full of charm.',
-    'A character doing some simple body movements.',
+    'A character doing some simple body movements.'
 ]
 quick_prompts = [[x] for x in quick_prompts]
 
+# 기존 CSS + 추가로 UI 개선용
+def make_custom_css():
+    base_progress_css = make_progress_bar_css()
+    # 아래는 예시로 약간 더 파스텔 톤의 스타일 및 카드형 UI
+    extra_css = """
+    body {
+        background: #fafbfe !important;
+        font-family: "Noto Sans", sans-serif;
+    }
+    #title-container {
+        text-align: center;
+        padding: 30px;
+        background: linear-gradient(135deg, #a8c0ff 0%, #fbc2eb 100%);
+        border-radius: 0 0 16px 16px;
+        margin-bottom: 20px;
+    }
+    #title-container h1 {
+        color: white;
+        font-size: 2.2rem;
+        margin: 0;
+        font-weight: 800;
+        text-shadow: 1px 2px 2px rgba(0,0,0,0.1);
+    }
+    .gr-panel {
+        background: #ffffffcc;
+        backdrop-filter: blur(4px);
+        border: 1px solid #dcdcf7;
+        border-radius: 12px;
+        padding: 16px;
+        margin-bottom: 8px;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+    .gr-box > label {
+        font-size: 0.9rem;
+        font-weight: 600;
+        color: #333;
+    }
+    .button-container button {
+        min-height: 48px;
+        font-size: 1rem;
+        font-weight: 600;
+        border-radius: 8px;
+        border: none !important;
+    }
+    .button-container button#start-button {
+        background-color: #4b9ffa !important;
+        color: #fff;
+    }
+    .button-container button#stop-button {
+        background-color: #ef5d84 !important;
+        color: #fff;
+    }
+    .button-container button:hover {
+        filter: brightness(0.97);
+    }
+    .no-generating-animation {
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+    """
+    return base_progress_css + extra_css
+
+css = make_custom_css()
 
-css = make_progress_bar_css()
 block = gr.Blocks(css=css).queue()
 with block:
-    gr.Markdown('# FramePack-F1')
-    gr.Markdown(f"""### Video diffusion, but feels like image diffusion
-*FramePack F1 - a FramePack model that only predicts future frames from history frames*
-### *beta* FramePack Fill 🖋️- draw a mask over the input image to inpaint the video output
-adapted from the officical code repo [FramePack](https://github.com/lllyasviel/FramePack) by [lllyasviel](lllyasviel/FramePack_F1_I2V_HY_20250503) and [FramePack Studio](https://github.com/colinurbs/FramePack-Studio) 🙌🏻
+    # 상단 그라디언트 영역
+    with gr.Box(elem_id="title-container"):
+        gr.Markdown("<h1>FramePack I2V</h1>")
+
+    # 설명 부분
+    gr.Markdown("""
+    ### Video diffusion, but feels like image diffusion
+    FramePack I2V - a model that predicts future frames from history frames,
+    enabling you to generate short animations from a single image and a text prompt.<br><br>
+    ***beta FramePack Fill*** - You can also paint over the input image to inpaint the video output.
     """)
+
     with gr.Row():
         with gr.Column():
-            input_image = gr.ImageEditor(type="numpy", label="Image", height=320, brush=gr.Brush(colors=["#ffffff"]))
+            input_image = gr.ImageEditor(
+                type="numpy",
+                label="Image (click 'Brush' tool to mask)",
+                height=320,
+                brush=gr.Brush(colors=["#ffffff"])
+            )
             prompt = gr.Textbox(label="Prompt", value='')
-            t2v = gr.Checkbox(label="do text-to-video", value=False)
-            example_quick_prompts = gr.Dataset(samples=quick_prompts, label='Quick List', samples_per_page=1000, components=[prompt])
-            example_quick_prompts.click(lambda x: x[0], inputs=[example_quick_prompts], outputs=prompt, show_progress=False, queue=False)
 
-            with gr.Row():
-                start_button = gr.Button(value="Start Generation")
-                end_button = gr.Button(value="End Generation", interactive=False)
+            t2v = gr.Checkbox(
+                label="Generate from Text Only (no image)?",
+                value=False
+            )
+            example_quick_prompts = gr.Dataset(
+                samples=quick_prompts,
+                label="Quick Prompt Picks",
+                samples_per_page=1000,
+                components=[prompt]
+            )
+            example_quick_prompts.click(
+                fn=lambda x: x[0],
+                inputs=[example_quick_prompts],
+                outputs=prompt,
+                show_progress=False,
+                queue=False
+            )
+
+            with gr.Row(elem_classes="button-container"):
+                start_button = gr.Button(value="Start Generation", elem_id="start-button")
+                end_button = gr.Button(value="Stop Generation", elem_id="stop-button", interactive=False)
+
+            total_second_length = gr.Slider(
+                label="Total Video Length (sec)",
+                minimum=1,
+                maximum=5,
+                value=2,
+                step=0.1
+            )
 
-            total_second_length = gr.Slider(label="Total Video Length (Seconds)", minimum=1, maximum=5, value=2, step=0.1)
             with gr.Group():
-                with gr.Accordion("Advanced settings", open=False):
-                    use_teacache = gr.Checkbox(label='Use TeaCache', value=True, info='Faster speed, but often makes hands and fingers slightly worse.')
-    
-                    n_prompt = gr.Textbox(label="Negative Prompt", value="", visible=False)  # Not used
+                with gr.Accordion("Advanced Settings", open=False):
+                    use_teacache = gr.Checkbox(
+                        label='Use TeaCache',
+                        value=True,
+                        info='Faster speed but can degrade finger/hand details'
+                    )
+                    n_prompt = gr.Textbox(label="Negative Prompt", value="", visible=False)
                     seed = gr.Number(label="Seed", value=31337, precision=0)
-    
-                    
-                    latent_window_size = gr.Slider(label="Latent Window Size", minimum=1, maximum=33, value=9, step=1, visible=False)  # Should not change
-                    steps = gr.Slider(label="Steps", minimum=1, maximum=100, value=25, step=1, info='Changing this value is not recommended.')
-    
-                    cfg = gr.Slider(label="CFG Scale", minimum=1.0, maximum=32.0, value=1.0, step=0.01, visible=False)  # Should not change
-                    gs = gr.Slider(label="Distilled CFG Scale", minimum=1.0, maximum=32.0, value=10.0, step=0.01, info='Changing this value is not recommended.')
-                    rs = gr.Slider(label="CFG Re-Scale", minimum=0.0, maximum=1.0, value=0.0, step=0.01, visible=False)  # Should not change
-    
-                    gpu_memory_preservation = gr.Slider(label="GPU Inference Preserved Memory (GB) (larger means slower)", minimum=6, maximum=128, value=6, step=0.1, info="Set this number to a larger value if you encounter OOM. Larger value causes slower speed.")
-    
-                    mp4_crf = gr.Slider(label="MP4 Compression", minimum=0, maximum=100, value=16, step=1, info="Lower means better quality. 0 is uncompressed. Change to 16 if you get black outputs. ")
+
+                    latent_window_size = gr.Slider(
+                        label="Latent Window Size",
+                        minimum=1,
+                        maximum=33,
+                        value=9,
+                        step=1,
+                        visible=False
+                    )
+                    steps = gr.Slider(
+                        label="Steps",
+                        minimum=1,
+                        maximum=100,
+                        value=25,
+                        step=1,
+                        info='Not recommended to change significantly.'
+                    )
+                    cfg = gr.Slider(
+                        label="CFG Scale",
+                        minimum=1.0,
+                        maximum=32.0,
+                        value=1.0,
+                        step=0.01,
+                        visible=False
+                    )
+                    gs = gr.Slider(
+                        label="Distilled CFG Scale",
+                        minimum=1.0,
+                        maximum=32.0,
+                        value=10.0,
+                        step=0.01,
+                        info='Not recommended to change significantly.'
+                    )
+                    rs = gr.Slider(
+                        label="CFG Re-Scale",
+                        minimum=0.0,
+                        maximum=1.0,
+                        value=0.0,
+                        step=0.01,
+                        visible=False
+                    )
+                    gpu_memory_preservation = gr.Slider(
+                        label="GPU Memory Preservation (GB)",
+                        minimum=6,
+                        maximum=128,
+                        value=6,
+                        step=0.1,
+                        info="Increase if OOM occurs (slower speed)."
+                    )
+                    mp4_crf = gr.Slider(
+                        label="MP4 Compression (CRF)",
+                        minimum=0,
+                        maximum=100,
+                        value=16,
+                        step=1,
+                        info="Lower is higher quality. 16 is recommended."
+                    )
 
         with gr.Column():
-            preview_image = gr.Image(label="Next Latents", height=200, visible=False)
-            result_video = gr.Video(label="Finished Frames", autoplay=True, show_share_button=False, height=512, loop=True)
+            preview_image = gr.Image(label="Preview Latents", height=200, visible=False)
+            result_video = gr.Video(label="Generated Video", autoplay=True, height=512, loop=True)
+
             progress_desc = gr.Markdown('', elem_classes='no-generating-animation')
             progress_bar = gr.HTML('', elem_classes='no-generating-animation')
 
-    gr.HTML('<div style="text-align:center; margin-top:20px;">Share your results and find ideas at the <a href="https://x.com/search?q=framepack&f=live" target="_blank">FramePack Twitter (X) thread</a></div>')
+    gr.HTML("""
+    <div style="text-align:center; margin-top:20px;">
+        Share your creations or find inspiration by searching 
+        <a href="https://x.com/search?q=framepack&f=live" target="_blank">#framepack</a> on Twitter (X)!
+    </div>
+    """)
 
-    ips = [input_image, prompt, t2v, n_prompt, seed, total_second_length, latent_window_size, steps, cfg, gs, rs, gpu_memory_preservation, use_teacache, mp4_crf]
-    start_button.click(fn=process, inputs=ips, outputs=[result_video, preview_image, progress_desc, progress_bar, start_button, end_button])
+    # 함수 연결
+    ips = [
+        input_image, prompt, t2v, n_prompt, seed,
+        total_second_length, latent_window_size, steps,
+        cfg, gs, rs, gpu_memory_preservation,
+        use_teacache, mp4_crf
+    ]
+    start_button.click(
+        fn=process,
+        inputs=ips,
+        outputs=[result_video, preview_image, progress_desc, progress_bar, start_button, end_button]
+    )
     end_button.click(fn=end_process)
 
+    # 예제 버튼 (원한다면 주석 해제)
     # gr.Examples(
-    #     examples,
+    #     examples=examples,
     #     inputs=[input_image, prompt],
     #     outputs=[result_video, preview_image, progress_desc, progress_bar, start_button, end_button],
     #     fn=generate_examples,
     #     cache_examples=True
-    #     )
-
+    # )
 
 block.launch(share=True)