Upload app.py with huggingface_hub

app.py

@@ -9,11 +9,73 @@ import requests
 import io
 import base64
 import tempfile
+import time
 from typing import Tuple, Optional, Dict
 from PIL import Image
 from diffusers import DiffusionPipeline, ZImageImg2ImgPipeline
 from openai import OpenAI
 
+
+# =============================================================================
+# GENERATION TIMER CLASS
+# =============================================================================
+class GenerationTimer:
+    """Timer for tracking image generation elapsed time."""
+    
+    def __init__(self):
+        self.start_time: Optional[float] = None
+        self.end_time: Optional[float] = None
+    
+    def start(self):
+        """Start the timer."""
+        self.start_time = time.time()
+        self.end_time = None
+    
+    def stop(self):
+        """Stop the timer."""
+        self.end_time = time.time()
+    
+    def elapsed(self) -> float:
+        """Get elapsed time in seconds."""
+        if self.start_time is None:
+            return 0.0
+        end = self.end_time if self.end_time else time.time()
+        return end - self.start_time
+    
+    def format(self) -> str:
+        """Format elapsed time as string."""
+        elapsed = self.elapsed()
+        if elapsed < 60:
+            return f"{elapsed:.1f}s"
+        minutes = int(elapsed // 60)
+        seconds = elapsed % 60
+        return f"{minutes}m {seconds:.1f}s"
+
+
+def create_status_html(message: str, elapsed: str, is_generating: bool = True) -> str:
+    """Create HTML status display with animation and timer."""
+    if is_generating:
+        return f'''
+        <div class="generation-status generating">
+            <div class="status-content">
+                <div class="generating-spinner-dual"></div>
+                <div class="status-text-container">
+                    <span class="status-text">{message}</span>
+                    <span class="status-timer">⏱️ {elapsed}</span>
+                </div>
+            </div>
+        </div>
+        '''
+    else:
+        return f'''
+        <div class="generation-status complete">
+            <div class="status-content">
+                <span class="status-complete">✅ {message}</span>
+                <span class="status-timer-final">⏱️ {elapsed}</span>
+            </div>
+        </div>
+        '''
+
 # Configure logging (replaces debug print statements)
 logging.basicConfig(level=logging.INFO, format='[%(levelname)s] %(message)s')
 logger = logging.getLogger(__name__)
@@ -861,15 +923,19 @@ def do_polish_transform_prompt(prompt: str, style: str, do_polish: bool) -> Tupl
 
 def generate_with_polish(prompt: str, style: str, do_polish: bool, ratio: str, steps: int, seed: int, randomize: bool):
     """Unified generate with progress feedback using generator.
-    Yields intermediate status updates so user knows what's happening.
+    Yields intermediate status updates with timer so user knows what's happening.
     """
     logger.info(f"generate_with_polish: do_polish={do_polish}, style={style}, prompt_len={len(prompt) if prompt else 0}")
     
-    # Always yield initial status
+    # Start timer
+    timer = GenerationTimer()
+    timer.start()
+    
+    # Always yield initial status with animation
     if do_polish:
-        yield None, "✨ Enhancing prompt with DeepSeek Reasoner...", seed
+        yield None, create_status_html("Enhancing prompt with DeepSeek Reasoner", timer.format()), seed
     else:
-        yield None, "🎨 Preparing generation...", seed
+        yield None, create_status_html("Preparing generation", timer.format()), seed
     
     full_prompt, polished_display = do_polish_prompt(prompt, style, do_polish, mode="generate")
     
@@ -880,35 +946,40 @@ def generate_with_polish(prompt: str, style: str, do_polish: bool, ratio: str, s
         logger.warning(f"generate_with_polish: Prompt+ was enabled but enhancement unchanged")
     
     if not full_prompt.strip():
-        yield None, "❌ Empty prompt - please enter a description", seed
+        yield None, create_status_html("Empty prompt - please enter a description", timer.format(), is_generating=False).replace("✅", "❌"), seed
         return
     
     # Show status before GPU generation with the prompt that will be used
-    status_prompt = polished_display if polished_display else full_prompt
-    yield None, f"🎨 Generating image...\n\n{status_prompt}", seed
+    yield None, create_status_html("Generating image", timer.format()), seed
     
     # GPU generation
     image, used_seed = generate(full_prompt, polished_display, ratio, steps, seed, randomize)
     
-    # Final result
+    # Stop timer and show final result
+    timer.stop()
     final_display = polished_display if polished_display else full_prompt
-    yield image, final_display, used_seed
+    final_status = create_status_html(f"Generated in {timer.format()}", timer.format(), is_generating=False)
+    yield image, final_status + f"\n\n{final_display}", used_seed
 
 def transform_with_polish(input_image: Optional[Image.Image], prompt: str, style: str, do_polish: bool, strength: float, steps: int, seed: int, randomize: bool):
     """Unified transform with progress feedback using generator.
-    Yields intermediate status updates so user knows what's happening.
+    Yields intermediate status updates with timer so user knows what's happening.
     """
     logger.info(f"transform_with_polish: do_polish={do_polish}, style={style}, prompt_len={len(prompt) if prompt else 0}")
     
+    # Start timer
+    timer = GenerationTimer()
+    timer.start()
+    
     if input_image is None:
-        yield None, "❌ Please upload an image first", 0
+        yield None, create_status_html("Please upload an image first", timer.format(), is_generating=False).replace("✅", "❌"), 0
         return
     
-    # Always yield initial status
+    # Always yield initial status with animation
     if do_polish:
-        yield None, "✨ Enhancing prompt with DeepSeek Reasoner...", 0
+        yield None, create_status_html("Enhancing prompt with DeepSeek Reasoner", timer.format()), 0
     else:
-        yield None, "🎨 Preparing transformation...", 0
+        yield None, create_status_html("Preparing transformation", timer.format()), 0
     
     full_prompt, polished_display = do_polish_transform_prompt(prompt, style, do_polish)
     
@@ -918,16 +989,17 @@ def transform_with_polish(input_image: Optional[Image.Image], prompt: str, style
     elif do_polish:
         logger.warning(f"transform_with_polish: Prompt+ was enabled but enhancement unchanged")
     
-    # Show status before GPU transform with the prompt that will be used
-    status_prompt = polished_display if polished_display else full_prompt
-    yield None, f"🎨 Transforming image...\n\n{status_prompt}", 0
+    # Show status before GPU transform
+    yield None, create_status_html("Transforming image", timer.format()), 0
     
     # GPU transform
     image, used_seed = transform(input_image, full_prompt, polished_display, strength, steps, seed, randomize)
     
-    # Final result
+    # Stop timer and show final result
+    timer.stop()
     final_display = polished_display if polished_display else full_prompt
-    yield image, final_display, used_seed
+    final_status = create_status_html(f"Transformed in {timer.format()}", timer.format(), is_generating=False)
+    yield image, final_status + f"\n\n{final_display}", used_seed
 
 @spaces.GPU(duration=120)
 def generate(full_prompt: str, polished_display: str, ratio: str, steps: int, seed: int, randomize: bool, progress=gr.Progress(track_tqdm=True)) -> Tuple[Optional[Image.Image], int]:
@@ -1435,8 +1507,133 @@ h1 { font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 700; }
 .progress-bar { background: var(--bg-tertiary) !important; border-radius: 4px; }
 .progress-bar > div { background: var(--accent-gradient) !important; border-radius: 4px; }
 
+/* ============================================
+   GENERATING IMAGE LOADING ANIMATIONS
+   ============================================ */
+
+@keyframes status-pulse {
+  0%, 100% {
+    opacity: 1;
+    text-shadow: 0 0 4px rgba(129, 140, 248, 0.4), 0 0 8px rgba(129, 140, 248, 0.2);
+  }
+  50% {
+    opacity: 0.7;
+    text-shadow: 0 0 8px rgba(129, 140, 248, 0.6), 0 0 20px rgba(167, 139, 250, 0.4);
+  }
+}
+
+@keyframes spinner-rotate {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes glow-pulse {
+  0%, 100% { opacity: 0.5; transform: scale(1); }
+  50% { opacity: 0.8; transform: scale(1.02); }
+}
+
+/* Generation status container */
+.generation-status {
+    padding: 16px 20px;
+    border-radius: var(--radius-md);
+    margin: 8px 0;
+    transition: all 0.3s ease;
+}
+
+.generation-status.generating {
+    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
+    border: 1px solid rgba(129, 140, 248, 0.3);
+    box-shadow: 0 0 20px rgba(129, 140, 248, 0.2);
+}
+
+.generation-status.complete {
+    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(52, 211, 153, 0.1) 100%);
+    border: 1px solid rgba(16, 185, 129, 0.3);
+}
+
+.generation-status .status-content {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+}
+
+.generation-status .status-text-container {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.generation-status .status-text {
+    color: var(--accent-primary);
+    font-weight: 600;
+    font-size: 1rem;
+    animation: status-pulse 2s ease-in-out infinite;
+}
+
+.generation-status .status-timer {
+    color: var(--text-muted);
+    font-size: 0.85rem;
+    font-family: monospace;
+}
+
+.generation-status .status-complete {
+    color: var(--success);
+    font-weight: 600;
+    font-size: 1rem;
+}
+
+.generation-status .status-timer-final {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    font-family: monospace;
+    margin-left: auto;
+}
+
+/* Dual-ring spinner */
+.generating-spinner-dual {
+    display: inline-block;
+    position: relative;
+    width: 28px;
+    height: 28px;
+    flex-shrink: 0;
+}
+
+.generating-spinner-dual::before,
+.generating-spinner-dual::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    border: 3px solid transparent;
+}
+
+.generating-spinner-dual::before {
+    border-top-color: var(--accent-primary);
+    animation: spinner-rotate 1.2s linear infinite;
+}
+
+.generating-spinner-dual::after {
+    border-bottom-color: var(--accent-secondary);
+    animation: spinner-rotate 0.9s linear reverse infinite;
+}
+
+/* Image container glow while generating */
+.generating .gr-image::after {
+    content: '';
+    position: absolute;
+    inset: -8px;
+    border-radius: inherit;
+    background: var(--accent-gradient);
+    filter: blur(20px);
+    opacity: 0.3;
+    animation: glow-pulse 2s ease-in-out infinite;
+    z-index: -1;
+    pointer-events: none;
+}
+
 @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
+    .generation-status .status-text { animation: none; text-shadow: 0 0 8px rgba(129, 140, 248, 0.5); }
 }
 
 @media (max-width: 768px) {
@@ -1678,7 +1875,7 @@ with gr.Blocks(title="Z Image Turbo", css=css, theme=dark_theme) as demo:
                 
                 with gr.Column(scale=3):
                     gen_output = gr.Image(label="Generated Image", type="pil", interactive=False, height=512)
-                    gen_polished_prompt = gr.Textbox(label="Enhanced Prompt", interactive=False, visible=True, lines=4)
+                    gen_polished_prompt = gr.HTML(label="Status", value="")
                     gen_seed_out = gr.Number(label="Seed Used", interactive=False)
                     with gr.Row():
                         gen_share_btn = gr.Button("Share", variant="secondary")
@@ -1755,7 +1952,7 @@ with gr.Blocks(title="Z Image Turbo", css=css, theme=dark_theme) as demo:
                 
                 with gr.Column(scale=3):
                     trans_output = gr.Image(label="Transformed Image", type="pil", interactive=False, height=512)
-                    trans_polished_prompt = gr.Textbox(label="Enhanced Prompt", interactive=False, visible=True, lines=4)
+                    trans_polished_prompt = gr.HTML(label="Status", value="")
                     trans_seed_out = gr.Number(label="Seed Used", interactive=False)
                     with gr.Row():
                         trans_share_btn = gr.Button("Share", variant="secondary")