Update app.py

app.py

@@ -38,7 +38,6 @@ english_labels = {
 
 # Load pipelines
 base_model = "black-forest-labs/FLUX.1-schnell"
-
 taef1 = AutoencoderTiny.from_pretrained("madebyollin/taef1", torch_dtype=torch.bfloat16).to("cuda")
 pipe = FluxPipeline.from_pretrained(
     base_model,
@@ -47,7 +46,6 @@ pipe = FluxPipeline.from_pretrained(
 )
 pipe.transformer.to(memory_format=torch.channels_last)
 clip_slider = CLIPSliderFlux(pipe, device=torch.device("cuda"))
-
 MAX_SEED = 2**32 - 1
 
 def save_images_with_unique_filenames(image_list, save_directory):
@@ -95,20 +93,16 @@ def generate(prompt,
     prompt = translate_if_korean(prompt)
     concept_1 = translate_if_korean(concept_1)
     concept_2 = translate_if_korean(concept_2)
-
     print(f"Prompt: {prompt}, ← {concept_2}, {concept_1} ➡️ . scale {scale}, interm steps {interm_steps}")
     slider_x = [concept_2, concept_1]
-    # Re-calculate latent direction if needed
     if randomize_seed:
         seed = random.randint(0, MAX_SEED)
-
     if not sorted(slider_x) == sorted([x_concept_1, x_concept_2]) or recalc_directions:
         gradio_progress(0, desc="Calculating directions...")
         avg_diff = clip_slider.find_latent_direction(slider_x[0], slider_x[1], num_iterations=iterations)
         x_concept_1, x_concept_2 = slider_x[0], slider_x[1]
     else:
         avg_diff = avg_diff_x
-
     images = []
     high_scale = scale
     low_scale = -1 * scale
@@ -128,7 +122,6 @@ def generate(prompt,
     canvas = Image.new('RGB', (256 * interm_steps, 256))
     for i, im in enumerate(images):
         canvas.paste(im.resize((256, 256)), (256 * i, 0))
-
     comma_concepts_x = f"{slider_x[1]}, {slider_x[0]}"
     scale_total = convert_to_centered_scale(interm_steps)
     scale_min = scale_total[0]
@@ -136,7 +129,6 @@ def generate(prompt,
     scale_middle = scale_total.index(0)
     post_generation_slider_update = gr.update(label=comma_concepts_x, value=0, minimum=scale_min, maximum=scale_max, interactive=True)
     avg_diff_x = avg_diff.cpu()
-
     video_path = f"{uuid.uuid4()}.mp4"
     print(video_path)
     return x_concept_1, x_concept_2, avg_diff_x, export_to_video(images, video_path, fps=5), canvas, images, images[scale_middle], post_generation_slider_update, seed
@@ -152,7 +144,7 @@ def update_pre_generated_images(slider_value, total_images):
 def reset_recalc_directions():
     return True
 
-# Five examples fitting the "Time Stream" theme (one Korean example included)
+# Five "Time Stream" themed examples (one Korean example included)
 examples = [
     ["신선한 토마토가 부패한 토마토로 변해가는 과정", "Fresh", "Rotten", 2.0],
     ["A blooming flower gradually withers into decay", "Bloom", "Wither", 1.5],
@@ -170,17 +162,14 @@ body {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     color: #333;
 }
-
 footer {
     visibility: hidden;
 }
-
 .container {
     max-width: 1200px;
     margin: 20px auto;
     padding: 0 10px;
 }
-
 .main-panel {
     background-color: rgba(255, 255, 255, 0.9);
     border-radius: 12px;
@@ -188,25 +177,21 @@ footer {
     margin-bottom: 20px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
-
 .controls-panel {
     background-color: rgba(255, 255, 255, 0.85);
     border-radius: 8px;
     padding: 16px;
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
 }
-
 .image-display {
     min-height: 400px;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
-
 .slider-container {
     padding: 10px 0;
 }
-
 .advanced-panel {
     margin-top: 20px;
     border-top: 1px solid #eaeaea;
@@ -215,8 +200,7 @@ footer {
 """
 
 with gr.Blocks(css=css, title="타임 스트림") as demo:
-    # Title and Description
-    gr.Markdown("# 타임 스트림\nA creative journey through the transformation of images over time.")
+    gr.Markdown("# 타임 스트림\nA creative journey through the transformation of images over time.\nWhen you input text, a video transitioning from the past to the future is generated.")
     
     x_concept_1 = gr.State("")
     x_concept_2 = gr.State("")
@@ -316,31 +300,23 @@ with gr.Blocks(css=css, title="타임 스트림") as demo:
         with gr.Column(scale=8):
             with gr.Group(elem_classes="main-panel"):
                 gr.Markdown("### Generated Results")
-                # Video output on top (bigger) and image output below
-                output_video = gr.Video(
-                    label=english_labels["Looping video"],
-                    elem_id="video",
-                    loop=True,
-                    autoplay=True,
-                    height=400
-                )
+                # Swapped order: Image strip on top, video below (video is larger)
+                image_strip = gr.Image(label="Image Strip", type="filepath", elem_id="strip", height=200)
+                output_video = gr.Video(label=english_labels["Looping video"], elem_id="video", loop=True, autoplay=True, height=600)
                 with gr.Row():
-                    with gr.Column(scale=1):
-                        post_generation_image = gr.Image(
-                            label=english_labels["Generated Images"],
-                            type="filepath",
-                            elem_id="interactive",
-                            elem_classes="image-display",
-                            height=200
-                        )
-                    with gr.Column(scale=1):
-                        post_generation_slider = gr.Slider(
-                            minimum=-10,
-                            maximum=10,
-                            value=0,
-                            step=1,
-                            label=english_labels["From 1st to 2nd direction"]
-                        )
+                    post_generation_image = gr.Image(
+                        label=english_labels["Generated Images"],
+                        type="filepath",
+                        elem_id="interactive",
+                        elem_classes="image-display"
+                    )
+                    post_generation_slider = gr.Slider(
+                        minimum=-10,
+                        maximum=10,
+                        value=0,
+                        step=1,
+                        label=english_labels["From 1st to 2nd direction"]
+                    )
 
     # Examples Section
     gr.Examples(
@@ -349,12 +325,12 @@ with gr.Blocks(css=css, title="타임 스트림") as demo:
         fn=generate,
         outputs=[
             x_concept_1, x_concept_2, avg_diff_x,
-            output_video,  # video output (larger)
-            canvas,        # image strip (below video)
-            total_images,
-            post_generation_image,
-            post_generation_slider,
-            seed
+            output_video,      # 4th output from generate goes to output_video
+            image_strip,       # 5th output (canvas) goes to image_strip
+            total_images,      # 6th output (list of images)
+            post_generation_image,  # 7th output (interactive image)
+            post_generation_slider, # 8th output (slider update)
+            seed               # 9th output (seed)
         ],
         cache_examples="lazy"
     )
@@ -369,8 +345,8 @@ with gr.Blocks(css=css, title="타임 스트림") as demo:
         ],
         outputs=[
             x_concept_1, x_concept_2, avg_diff_x,
-            output_video,  # video output (larger)
-            canvas,        # image strip (below video)
+            output_video,      # video
+            image_strip,       # canvas
             total_images,
             post_generation_image,
             post_generation_slider,