Update app.py

app.py

@@ -4,7 +4,6 @@ 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():
@@ -159,27 +158,6 @@ 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():
@@ -314,7 +292,7 @@ def generate_instagram_captions(description):
     
     return result.strip()
 
-# Enhanced Instagram-inspired theme with custom CSS and loading animation
+# Simplified Instagram-inspired theme with custom CSS
 instagram_css = """
 /* Instagram color scheme and modern design */
 :root {
@@ -329,14 +307,6 @@ 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;
@@ -344,7 +314,7 @@ instagram_css = """
     font-family: 'Instagram Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
 }
 
-/* Header styling - Same gradient as generate button */
+/* Header styling */
 .main-header {
     text-align: center;
     background: linear-gradient(45deg, var(--ig-primary), var(--ig-secondary));
@@ -426,74 +396,6 @@ 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;
@@ -505,29 +407,6 @@ instagram_css = """
     padding: 1rem !important;
 }
 
-/* Examples styling */
-.gr-examples {
-    background: rgba(255, 255, 255, 0.8) !important;
-    border-radius: 15px !important;
-    padding: 1rem !important;
-    margin-top: 1rem !important;
-}
-
-.gr-examples .gr-button {
-    background: linear-gradient(45deg, var(--ig-tertiary), var(--ig-quaternary)) !important;
-    border: none !important;
-    border-radius: 10px !important;
-    color: white !important;
-    margin: 0.25rem !important;
-    transition: all 0.3s ease !important;
-    font-weight: 600 !important;
-}
-
-.gr-examples .gr-button:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
-}
-
 /* Tips section */
 .tips-section {
     background: rgba(255, 255, 255, 0.9) !important;
@@ -569,117 +448,7 @@ 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 */
-@keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
-}
-
-.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
@@ -690,11 +459,10 @@ with gr.Blocks(
         neutral_hue="gray"
     ),
     css=instagram_css,
-    title="InstaCap - AI Caption Generator",
-    js=loading_js
+    title="InstaCap - AI Caption Generator"
 ) as demo:
     
-    # Move title to the front and make it regular black
+    # Header
     gr.HTML('<h1 class="main-header">InstaCap – AI Caption Generator</h1>')
     gr.HTML('<p class="subtitle">Create short, catchy Instagram captions in seconds! Perfect for your social media posts ✨</p>')
     
@@ -724,25 +492,20 @@ with gr.Blocks(
                 elem_classes="output-box"
             )
     
-    # Connect the button to the function with loading
+    # Connect the button to the function
     generate_btn.click(
-        fn=generate_instagram_captions_with_loading,
+        fn=generate_instagram_captions,
         inputs=description_input,
-        outputs=caption_output,
-        show_progress=True
+        outputs=caption_output
     )
     
     # Also trigger on Enter key
     description_input.submit(
-        fn=generate_instagram_captions_with_loading,
+        fn=generate_instagram_captions,
         inputs=description_input,
-        outputs=caption_output,
-        show_progress=True
+        outputs=caption_output
     )
     
-    # Add JavaScript for loading overlay
-    gr.HTML(loading_js)
-    
     gr.HTML(
         """
         <div class="tips-section">