Update app.py

app.py

@@ -30,26 +30,35 @@ pipe = FluxPipeline.from_pretrained("black-forest-labs/FLUX.1-dev", torch_dtype=
 MAX_SEED = np.iinfo(np.int32).max
 
 @spaces.GPU 
-def infer(prompt, seed=1, randomize_seed=False, num_inference_steps=28):
-    print('entered the function')
+def infer(prompt, seed=1, randomize_seed=False, num_inference_steps=28, progress=gr.Progress()):
+    progress(0, desc="Starting...")
     prompt_template = f"A side by side 4 frame image showing high quality consecutive stills from a looped gif animation moving from left to right. The scene has motion. The stills are of {prompt}"
     if randomize_seed:
         seed = random.randint(0, MAX_SEED)
-        
+    
+    progress(0.2, desc="Generating animation...")
     generator = torch.Generator().manual_seed(seed)
     
+    def callback(step, timestep, latents):
+        progress((step + 1) / num_inference_steps, desc=f"Step {step + 1}/{num_inference_steps}")
+        return True
+    
     image = pipe(
         prompt=prompt_template,
         num_inference_steps=num_inference_steps,
         num_images_per_prompt=1,
         generator=generator,
         height=320,
-        width=1280
+        width=1280,
+        callback=callback,
+        callback_steps=1
     ).images[0]
     
+    progress(0.9, desc="Creating GIF...")
     gif_name = f"{uuid.uuid4().hex}-flux.gif"
     export_to_gif(split_image(image, 4), gif_name, fps=4)
     
+    progress(1.0, desc="Done!")
     return gif_name, image, seed
 
 examples = [
@@ -101,32 +110,28 @@ footer {visibility: hidden}
     background-color: #f8f9fa;
 }
 
-/* Examples 텍스트 색상 관련 스타일 수정 */
-.gr-examples-text {
-    color: black !important;
-}
-
-.gr-examples button {
+/* Examples 텍스트 색상 강제 적용 */
+.gallery-item {
     color: black !important;
 }
 
-.gr-examples span {
+.gallery-item * {
     color: black !important;
 }
 
-.gr-examples div {
+.fixed-height {
     color: black !important;
 }
 
-.gr-examples p {
+.fixed-height * {
     color: black !important;
 }
 
-.gr-examples h3 {
+.examples-table {
     color: black !important;
 }
 
-.gr-sample-text {
+.examples-table * {
     color: black !important;
 }
 
@@ -145,13 +150,18 @@ footer {visibility: hidden}
     width: auto !important;
 }
 
-/* 추가적인 Examples 관련 스타일 */
-.example-text {
-    color: black !important;
+/* 프로그레스 바 스타일 */
+.progress-bar {
+    background-color: #f0f0f0;
+    border-radius: 10px;
+    padding: 3px;
 }
 
-.example-label {
-    color: black !important;
+.progress-bar-fill {
+    background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
+    height: 20px;
+    border-radius: 7px;
+    transition: width 0.5s ease-out;
 }
 """
 
@@ -217,13 +227,14 @@ with gr.Blocks(theme="Yntec/HaleyCH_Theme_Orange", css=css) as demo:
                 value=28, 
             )    
         
-        gr.Examples(
+        examples_section = gr.Examples(
             examples=examples,
             inputs=[prompt],
             outputs=[result, result_full, seed],
             fn=infer,
             cache_examples=True,
-            label="Click on any example to try it out"
+            label="Click on any example to try it out",
+            elem_classes=["examples-table"]
         )
     
     gr.on(
@@ -233,4 +244,14 @@ with gr.Blocks(theme="Yntec/HaleyCH_Theme_Orange", css=css) as demo:
         outputs=[result, result_full, seed]
     )
 
+# 테마 색상 오버라이드
+demo.theme = gr.themes.Default().set(
+    body_text_color="black",
+    block_label_text_color="black",
+    block_title_text_color="black",
+    body_text_color_subdued="black",
+    description_text_color="black",
+    background_fill_primary="white",
+)
+
 demo.queue().launch()