Update app.py

app.py

@@ -4,6 +4,7 @@ from transformers import pipeline, set_seed
 import re
 import random
 import os
+import time
 
 # Set up the text generation pipeline with better error handling
 def initialize_model():
@@ -158,6 +159,27 @@ def generate_short_caption(description, max_retries=5):
     
     return ""
 
+def generate_instagram_captions_with_loading(description, progress=gr.Progress()):
+    """Generate 5 short, catchy Instagram captions with loading animation"""
+    if not description.strip():
+        return "Please enter a description of your photo! 📸"
+    
+    # Show loading messages with progress
+    loading_messages = [
+        "🤖 Analyzing your photo description...",
+        "✨ Generating creative captions...",
+        "🎯 Finding the perfect words...",
+        "🔥 Adding some Instagram magic...",
+        "📱 Finalizing your captions..."
+    ]
+    
+    for i, message in enumerate(loading_messages):
+        progress((i + 1) / len(loading_messages), desc=message)
+        time.sleep(0.5)  # Small delay to show loading progression
+    
+    # Generate captions (using the existing logic)
+    return generate_instagram_captions(description)
+
 def generate_instagram_captions(description):
     """Generate 5 short, catchy Instagram captions (max 5 words each)"""
     if not description.strip():
@@ -224,60 +246,6 @@ def generate_instagram_captions(description):
         "business": ["Business mode activated", "Entrepreneur life chosen", "Success is planned", "Building empire daily", "Boss moves only"]
     }
     
-    # Enhanced cool captions database with complete, meaningful phrases
-    cool_captions = [
-        "Squad goals right here",
-        "Good vibes only today",
-        "Living our best life",
-        "Making memories with favorites",
-        "Caught in the moment",
-        "Friends like these matter",
-        "Energy levels unmatched today",
-        "Vibes on point always",
-        "Good times roll forever",
-        "Squad up for success",
-        "Living for these moments",
-        "Making magic happen daily",
-        "Catching feelings and sunsets",
-        "Good company great memories",
-        "Squad deeper than ocean",
-        "Vibes immaculate as always",
-        "Energy infectious spread everywhere",
-        "Good times never ending",
-        "Making waves together always",
-        "Caught smiling too much",
-        "Living life in color",
-        "Squad goals achieved today",
-        "Good vibes attract everything",
-        "Making moments matter most",
-        "Catching dreams with crew",
-        "Living loud loving harder",
-        "Squad tight bond stronger",
-        "Good energy good people",
-        "Making memories worth keeping",
-        "Caught being absolutely legendary",
-        "Weekend warriors in action",
-        "Sunshine mixed with chaos",
-        "Creating our own magic",
-        "Adventure awaits us always",
-        "Blessed with the best",
-        "Chaos and we prosper",
-        "Dreams do come true",
-        "Forever young at heart",
-        "Golden hour golden friends",
-        "Happiness looks like this",
-        "Peace love and yoga",
-        "Zen mode activated today",
-        "Morning ritual pure bliss",
-        "Mindful moments matter most",
-        "Grateful for this peace",
-        "Serenity found in stillness",
-        "Balance restored through practice",
-        "Inner peace outer strength",
-        "Breathe deeply live fully",
-        "Namaste all day long"
-    ]
-    
     # Find keyword-specific captions
     description_lower = description.lower()
     keyword_specific_captions = []
@@ -290,18 +258,18 @@ def generate_instagram_captions(description):
     ai_captions = []
     if generator is not None:
         attempts = 0
-        while len(ai_captions) < 2 and attempts < 10:  # Try to get at least 2 good AI captions
+        while len(ai_captions) < 5 and attempts < 15:  # Try to get 5 AI captions
             caption = generate_short_caption(description)
             if caption and caption not in ai_captions and is_valid_caption(caption):
                 ai_captions.append(caption)
             attempts += 1
     
-    # Combine keyword-specific, AI and predefined captions
+    # Combine keyword-specific and AI captions
     # Prioritize keyword-specific captions if found
     if keyword_specific_captions:
-        all_captions = keyword_specific_captions + ai_captions + cool_captions
+        all_captions = keyword_specific_captions + ai_captions
     else:
-        all_captions = ai_captions + cool_captions
+        all_captions = ai_captions
     
     # Remove duplicates while preserving order
     seen = set()
@@ -311,8 +279,24 @@ def generate_instagram_captions(description):
             seen.add(caption)
             unique_captions.append(caption)
     
-    # Select 5 random captions
-    selected_captions = random.sample(unique_captions, min(5, len(unique_captions)))
+    # If we don't have enough captions, create basic fallbacks
+    if len(unique_captions) < 5:
+        basic_fallbacks = [
+            "Picture perfect moment",
+            "Living my best life",
+            "Good vibes only",
+            "Making memories today",
+            "Life is beautiful"
+        ]
+        
+        for fallback in basic_fallbacks:
+            if fallback not in unique_captions:
+                unique_captions.append(fallback)
+                if len(unique_captions) >= 5:
+                    break
+    
+    # Select 5 captions
+    selected_captions = unique_captions[:5]
     
     # Ensure each caption is max 5 words and properly formatted
     final_captions = []
@@ -321,15 +305,7 @@ def generate_instagram_captions(description):
         if len(words) >= 2:
             final_captions.append(" ".join(words))
     
-    # Fill with defaults if needed
-    while len(final_captions) < 5:
-        fallback = random.choice(cool_captions)
-        words = fallback.split()[:5]
-        final_caption = " ".join(words)
-        if final_caption not in final_captions:
-            final_captions.append(final_caption)
-    
-    # Format as simple numbered list (removed "Your Instagram Captions" text)
+    # Format as simple numbered list
     result = ""
     emojis = ["🎯", "⚡", "🌟", "🔥", "💫"]
     
@@ -338,7 +314,7 @@ def generate_instagram_captions(description):
     
     return result.strip()
 
-# Enhanced Instagram-inspired theme with custom CSS
+# Enhanced Instagram-inspired theme with custom CSS and loading animation
 instagram_css = """
 /* Instagram color scheme and modern design */
 :root {
@@ -353,6 +329,14 @@ instagram_css = """
     --ig-light: #FFFFFF;
 }
 
+/* Hide default gradio progress indicators */
+.gradio-container .progress-bar,
+.gradio-container .eta,
+.gradio-container .generating,
+.gradio-container footer {
+    display: none !important;
+}
+
 /* Main container styling */
 .gradio-container {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
@@ -360,15 +344,19 @@ instagram_css = """
     font-family: 'Instagram Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
 }
 
-/* Header styling - Modified to be regular black text */
+/* Header styling - Same gradient as generate button */
 .main-header {
     text-align: center;
-    color: #000000 !important;
+    background: linear-gradient(45deg, var(--ig-primary), var(--ig-secondary));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    color: transparent;
     font-size: 3em;
     font-weight: 400;
     margin-bottom: 0.5em;
     padding: 1rem 0;
-    background: rgba(255, 255, 255, 0.9);
+    background-color: rgba(255, 255, 255, 0.9);
     border-radius: 15px;
     margin: 1rem;
     box-shadow: 0 4px 20px rgba(0,0,0,0.1);
@@ -438,6 +426,74 @@ instagram_css = """
     transform: translateY(-1px) !important;
 }
 
+/* Loading animation styles */
+.loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, 
+        rgba(228, 64, 95, 0.9) 0%, 
+        rgba(131, 58, 180, 0.9) 25%, 
+        rgba(247, 119, 55, 0.9) 50%, 
+        rgba(252, 175, 69, 0.9) 75%, 
+        rgba(64, 93, 230, 0.9) 100%);
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    backdrop-filter: blur(10px);
+}
+
+.loading-spinner {
+    width: 60px;
+    height: 60px;
+    border: 4px solid rgba(255, 255, 255, 0.3);
+    border-top: 4px solid white;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 20px;
+}
+
+.loading-text {
+    color: white;
+    font-size: 1.5em;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 10px;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+}
+
+.loading-subtext {
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 1em;
+    text-align: center;
+    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Instagram-style pulse animation */
+.ig-pulse {
+    animation: igPulse 2s ease-in-out infinite;
+}
+
+@keyframes igPulse {
+    0%, 100% { 
+        transform: scale(1);
+        opacity: 1;
+    }
+    50% { 
+        transform: scale(1.05);
+        opacity: 0.8;
+    }
+}
+
 /* Output styling */
 .output-box {
     background: rgba(255, 255, 255, 0.9) !important;
@@ -513,6 +569,14 @@ instagram_css = """
         font-size: 1.1em !important;
         padding: 12px 25px !important;
     }
+    
+    .loading-text {
+        font-size: 1.2em !important;
+    }
+    
+    .loading-subtext {
+        font-size: 0.9em !important;
+    }
 }
 
 /* Loading animation */
@@ -524,6 +588,98 @@ instagram_css = """
 .loading {
     animation: pulse 2s infinite;
 }
+
+/* Hide progress bar completely */
+.wrap.svelte-1116j96 {
+    display: none !important;
+}
+
+/* Additional progress bar hiding */
+.gradio-container .progress-text,
+.gradio-container .progress-level,
+.gradio-container .progress-bar-wrap {
+    display: none !important;
+}
+"""
+
+# JavaScript for loading overlay
+loading_js = """
+<script>
+function showLoading() {
+    // Create loading overlay
+    const overlay = document.createElement('div');
+    overlay.id = 'loading-overlay';
+    overlay.className = 'loading-overlay';
+    overlay.innerHTML = `
+        <div class="loading-spinner"></div>
+        <div class="loading-text ig-pulse">✨ Creating Magic...</div>
+        <div class="loading-subtext">Generating your perfect Instagram captions</div>
+    `;
+    document.body.appendChild(overlay);
+    
+    // Update loading text dynamically
+    const messages = [
+        "🤖 Analyzing your photo...",
+        "✨ Crafting catchy captions...",
+        "🎯 Finding perfect words...",
+        "🔥 Adding Instagram magic...",
+        "📱 Almost ready..."
+    ];
+    
+    let index = 0;
+    const interval = setInterval(() => {
+        const textElement = overlay.querySelector('.loading-text');
+        if (textElement && index < messages.length) {
+            textElement.textContent = messages[index];
+            index++;
+        } else {
+            clearInterval(interval);
+        }
+    }, 800);
+    
+    return overlay;
+}
+
+function hideLoading() {
+    const overlay = document.getElementById('loading-overlay');
+    if (overlay) {
+        overlay.style.opacity = '0';
+        setTimeout(() => {
+            overlay.remove();
+        }, 300);
+    }
+}
+
+// Override the generate function to show loading
+let originalGenerate = null;
+
+function setupLoadingEvents() {
+    const generateBtn = document.querySelector('.generate-btn');
+    const textInput = document.querySelector('textarea');
+    
+    if (generateBtn) {
+        generateBtn.addEventListener('click', function() {
+            if (textInput && textInput.value.trim()) {
+                showLoading();
+                setTimeout(hideLoading, 4000); // Hide after 4 seconds
+            }
+        });
+    }
+    
+    if (textInput) {
+        textInput.addEventListener('keypress', function(e) {
+            if (e.key === 'Enter' && !e.shiftKey && textInput.value.trim()) {
+                showLoading();
+                setTimeout(hideLoading, 4000); // Hide after 4 seconds
+            }
+        });
+    }
+}
+
+// Initialize when DOM is ready
+document.addEventListener('DOMContentLoaded', setupLoadingEvents);
+setTimeout(setupLoadingEvents, 1000); // Backup initialization
+</script>
 """
 
 # Create the Gradio interface
@@ -534,7 +690,8 @@ with gr.Blocks(
         neutral_hue="gray"
     ),
     css=instagram_css,
-    title="InstaCap - AI Caption Generator"
+    title="InstaCap - AI Caption Generator",
+    js=loading_js
 ) as demo:
     
     # Move title to the front and make it regular black
@@ -567,22 +724,25 @@ with gr.Blocks(
                 elem_classes="output-box"
             )
     
-    # Examples are kept in code but not shown in UI
-    
-    # Connect the button to the function
+    # Connect the button to the function with loading
     generate_btn.click(
-        fn=generate_instagram_captions,
+        fn=generate_instagram_captions_with_loading,
         inputs=description_input,
-        outputs=caption_output
+        outputs=caption_output,
+        show_progress=True
     )
     
     # Also trigger on Enter key
     description_input.submit(
-        fn=generate_instagram_captions,
+        fn=generate_instagram_captions_with_loading,
         inputs=description_input,
-        outputs=caption_output
+        outputs=caption_output,
+        show_progress=True
     )
     
+    # Add JavaScript for loading overlay
+    gr.HTML(loading_js)
+    
     gr.HTML(
         """
         <div class="tips-section">