Update app.py

app.py

@@ -7,7 +7,7 @@ Multi-Modal AI Analysis (Vision + Text) + Multi-Language Support
 
 🚀 Key Features:
 - SambaNova Llama-4-Maverick Integration
-- Multi-Language Support (German, Chinese, French, Arabic via Hugging Face)
+- Multi-Language Support (German, Chinese, Hindi, Arabic via Hugging Face)
 - Advanced Gradio Interface
 - Advanced Error Handling & Security
 
@@ -348,40 +348,40 @@ class AdvancedInstagramGenerator:
         
         return f"🇨🇳 CHINESE VERSION (Fallback):\n{translated}"
 
-    def get_fallback_french_translation(self, text: str) -> str:
-        """Fallback French translation when HF API fails"""
+    def get_fallback_hindi_translation(self, text: str) -> str:
+        """Fallback Hindi translation when HF API fails"""
         # Simple keyword-based translation for common Instagram terms
-        french_translations = {
-            "amazing": "incroyable",
-            "beautiful": "beau", 
-            "love": "amour",
-            "perfect": "parfait",
-            "awesome": "génial",
-            "incredible": "incroyable",
-            "follow": "suivre",
-            "like": "j'aime",
-            "share": "partager",
-            "comment": "commenter",
-            "today": "aujourd'hui",
-            "moment": "moment",
-            "life": "vie",
-            "inspiration": "inspiration",
-            "community": "communauté",
-            "content": "contenu",
-            "check out": "regardez",
-            "what do you think": "qu'en pensez-vous"
+        hindi_translations = {
+            "amazing": "अद्भुत",
+            "beautiful": "सुंदर", 
+            "love": "प्रेम",
+            "perfect": "परफेक्ट",
+            "awesome": "शानदार",
+            "incredible": "अविश्वसनीय",
+            "follow": "फॉलो",
+            "like": "लाइक",
+            "share": "शेयर",
+            "comment": "कमेंट",
+            "today": "आज",
+            "moment": "पल",
+            "life": "जिंदगी",
+            "inspiration": "प्रेरणा",
+            "community": "समुदाय",
+            "content": "सामग्री",
+            "check out": "देखें",
+            "what do you think": "आपको क्या लगता है"
         }
         
         # Basic word replacement (not perfect but functional fallback)
         translated = text.lower()
-        for english, french in french_translations.items():
-            translated = translated.replace(english, french)
+        for english, hindi in hindi_translations.items():
+            translated = translated.replace(english, hindi)
         
-        # Add French hashtags
+        # Add Hindi hashtags
         if "#" in translated:
-            translated += " #France #Français #RéseauxSociaux #CréationDeContenu"
+            translated += " #भारत #हिंदी #सोशलमीडिया #कंटेंट"
         
-        return f"🇫🇷 FRENCH VERSION (Fallback):\n{translated}"
+        return f"🇮🇳 HINDI VERSION (Fallback):\n{translated}"
 
     def get_fallback_arabic_translation(self, text: str) -> str:
         """Fallback Arabic translation when HF API fails"""
@@ -1210,13 +1210,13 @@ async def translate_caption_interface(base_caption, selected_languages):
 
 
 def create_gradio_app():
-    """Create the Gradio app with good UI styling"""
+    """Create the Gradio app with SambaNova and Hugging Face integration"""
     
     # Status indicators  
     hf_status = "✅ Connected" if generator and generator.hf_client_working else "⚠️ Fallback Mode"
     sambanova_status = "✅ Connected" if generator and generator.sambanova_client_working else "⚠️ Fallback Mode"
     
-    # Enhanced CSS for better UI
+    # Championship-level CSS from app.py
     css = """
     @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
     
@@ -1224,107 +1224,136 @@ def create_gradio_app():
         background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
         font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
         min-height: 100vh;
+        position: relative;
+        overflow-x: hidden;
+    }
+    
+    .gradio-container::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
+                    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%);
+        pointer-events: none;
+        z-index: 1;
     }
     
     .main-header {
         text-align: center;
         color: white;
-        margin-bottom: 30px;
-        padding: 30px;
+        margin-bottom: 40px;
+        padding: 40px;
         background: rgba(255,255,255,0.1);
-        border-radius: 20px;
-        backdrop-filter: blur(20px);
-        border: 1px solid rgba(255,255,255,0.2);
-        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+        border-radius: 30px;
+        backdrop-filter: blur(30px);
+        border: 2px solid rgba(255,255,255,0.2);
+        box-shadow: 0 25px 50px rgba(0,0,0,0.1);
+        position: relative;
+        z-index: 2;
+        animation: float 6s ease-in-out infinite;
+    }
+    
+    @keyframes float {
+        0%, 100% { transform: translateY(0px); }
+        50% { transform: translateY(-10px); }
     }
     
     .feature-card {
-        background: rgba(255,255,255,0.1);
-        border-radius: 15px;
-        padding: 20px;
-        backdrop-filter: blur(15px);
-        border: 1px solid rgba(255,255,255,0.2);
-        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
-        margin: 10px 0;
+        background: rgba(255,255,255,0.15);
+        border-radius: 25px;
+        padding: 30px;
+        backdrop-filter: blur(20px);
+        border: 1px solid rgba(255,255,255,0.3);
+        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        position: relative;
+        z-index: 2;
     }
     
     .gradio-button-primary {
         background: linear-gradient(45deg, #ff6b6b, #ee5a24, #ff9ff3, #54a0ff) !important;
+        background-size: 300% 300% !important;
+        animation: gradient-shift 4s ease infinite !important;
         border: none !important;
-        border-radius: 15px !important;
-        padding: 15px 25px !important;
-        font-weight: 600 !important;
-        color: white !important;
-        box-shadow: 0 10px 20px rgba(255, 107, 107, 0.3) !important;
+        border-radius: 20px !important;
+        padding: 18px 35px !important;
+        font-weight: 700 !important;
+        text-transform: uppercase !important;
+        letter-spacing: 2px !important;
+        box-shadow: 0 15px 35px rgba(255, 107, 107, 0.4) !important;
         transition: all 0.3s ease !important;
+        position: relative !important;
+        overflow: hidden !important;
     }
     
-    .gradio-button-primary:hover {
-        transform: translateY(-2px) !important;
-        box-shadow: 0 15px 30px rgba(255, 107, 107, 0.5) !important;
+    @keyframes gradient-shift {
+        0% { background-position: 0% 50%; }
+        50% { background-position: 100% 50%; }
+        100% { background-position: 0% 50%; }
     }
     
-    .gradio-button-secondary {
-        background: linear-gradient(45deg, #feca57, #ff9ff3, #54a0ff, #5f27cd) !important;
-        border: none !important;
-        border-radius: 12px !important;
-        padding: 12px 20px !important;
-        font-weight: 600 !important;
-        color: white !important;
-        box-shadow: 0 8px 16px rgba(254, 202, 87, 0.3) !important;
-    }
-    
-    .status-badge {
+    .sambanova-status {
         background: linear-gradient(90deg, #2ecc71, #27ae60);
         color: white;
-        padding: 10px 20px;
-        border-radius: 10px;
+        padding: 15px 25px;
+        border-radius: 15px;
         text-align: center;
         font-weight: 600;
-        box-shadow: 0 8px 16px rgba(46, 204, 113, 0.3);
-        margin: 10px 0;
+        box-shadow: 0 10px 20px rgba(46, 204, 113, 0.3);
+        animation: pulse 2s infinite;
     }
     
-    .feature-card.config-card {
-    overflow: visible;
-    z-index: 10;
+    @keyframes pulse {
+        0% { box-shadow: 0 10px 20px rgba(46, 204, 113, 0.3); }
+        50% { box-shadow: 0 15px 30px rgba(46, 204, 113, 0.5); }
+        100% { box-shadow: 0 10px 20px rgba(46, 204, 113, 0.3); }
     }
     """
     
-    with gr.Blocks(css=css, title="📱 Instagram Generator", theme=gr.themes.Glass()) as app:
+    with gr.Blocks(css=css, title="📱 Instagram Generator - MCP Hackathon 2025", theme=gr.themes.Glass()) as app:
         
         # Main Header
-        gr.HTML(f"""
+        gr.HTML("""
         <div class="main-header">
-            <h1 style="font-size: 2.5rem; margin-bottom: 15px; font-weight: 800; background: linear-gradient(45deg, #ff6b6b, #feca57, #ff9ff3, #54a0ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
+            <h1 style="font-size: 3rem; margin-bottom: 15px; font-weight: 800; background: linear-gradient(45deg, #ff6b6b, #feca57, #ff9ff3, #54a0ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
                 📱 INSTAGRAM CAPTION GENERATOR
             </h1>
-            <h2 style="font-size: 1.2rem; margin-bottom: 20px; opacity: 0.9;">
-                🚀 AI-Powered Content Creation • SambaNova + Hugging Face
+            <h2 style="font-size: 1.4rem; margin-bottom: 20px; opacity: 0.9; font-weight: 500;">
+                🚀 MCP Hackathon 2025 Submission • SambaNova + Hugging Face Edition
             </h2>
-            <div style="display: flex; justify-content: center; gap: 20px; margin-top: 15px;">
-                <span style="background: rgba(255,255,255,0.2); padding: 8px 16px; border-radius: 15px;">🤖 SambaNova: {sambanova_status}</span>
-                <span style="background: rgba(255,255,255,0.2); padding: 8px 16px; border-radius: 15px;">🤗 Hugging Face: {hf_status}</span>
+            <div style="display: flex; justify-content: center; gap: 20px; margin-top: 25px;">
+                <span style="background: rgba(255,255,255,0.2); padding: 8px 16px; border-radius: 20px; font-size: 0.9rem;">🤖 SambaNova AI</span>
+                <span style="background: rgba(255,255,255,0.2); padding: 8px 16px; border-radius: 20px; font-size: 0.9rem;">🌍 Multi-Language</span>
+                <span style="background: rgba(255,255,255,0.2); padding: 8px 16px; border-radius: 20px; font-size: 0.9rem;">🔗 MCP Server</span>
             </div>
         </div>
         """)
         
+        # Status Indicators
+        gr.HTML(f"""
+        <div class="sambanova-status">
+            🚀 SambaNova: {sambanova_status} • 🤗 Hugging Face: {hf_status} • Ready for Deployment!
+        </div>
+        """)
+        
         # Main Interface
-        with gr.Tab("🎯 Caption Generator"):
+        with gr.Tab("🎯 Advanced Caption Generator"):
             with gr.Row():
                 # Left Column - Controls
-                with gr.Column(scale=2, elem_classes=["feature-card", "config-card"]):
-                    gr.Markdown("### 🖼️ Upload Images")
+                with gr.Column(scale=2, elem_classes=["feature-card"]):
+                    gr.Markdown("### 🖼️ Multi-Image Upload & Analysis")
                     gr.Markdown("*SambaNova AI vision analysis with quality scoring*")
                     
                     images = gr.File(
                         label="📸 Upload Images (Max 3)", 
                         file_count="multiple",
-                        file_types=["image"],
-                        height=200
+                        file_types=["image"]
                     )
                     
-                    gr.Markdown("### ⚙️ Configuration")
+                    gr.Markdown("### ⚙️ AI Configuration")
                     
                     with gr.Row():
                         caption_style = gr.Dropdown(
@@ -1351,56 +1380,54 @@ def create_gradio_app():
                                 "💪 Fitness Community", 
                                 "👗 Fashion Forward", 
                                 "💻 Tech Innovators", 
-                                "🎨 Creative Artists"
+                                "🎨 Creative Artists",
+                                "🌱 Sustainability Advocates",
+                                "🎵 Music Fans"
                             ],
                             value="🌟 General Audience",
                             label="👥 Target Audience"
                         )
                     
                     custom_prompt = gr.Textbox(
-                        label="💬 Additional Instructions",
-                        placeholder="e.g., 'Focus on sustainability', 'Include product details'...",
-                        lines=2
+                        label="💬 Advanced Instructions",
+                        placeholder="e.g., 'Focus on sustainability messaging', 'Include product launch details', 'Emphasize community building'...",
+                        lines=3
                     )
                     
                     generate_btn = gr.Button(
                         "🚀 Generate Caption", 
-                        variant="primary", 
-                        size="lg"
+                        variant="primary"
                     )
                 
                 # Right Column - Results
                 with gr.Column(scale=3, elem_classes=["feature-card"]):
-                    gr.Markdown("### 📊 Generated Content")
+                    gr.Markdown("### 📊 AI-Generated Content")
                     
                     output = gr.Textbox(
                         label="🎯 Generated Caption",
                         lines=15,
-                        max_lines=20,
                         show_copy_button=True,
-                        placeholder="Upload images and generate your Instagram content..."
+                        placeholder="Upload images and generate your Instagram content with AI..."
                     )
                     
-                    with gr.Row():
-                        alternatives_btn = gr.Button(
-                            "✨ Generate 3 Alternative Captions", 
-                            variant="secondary",
-                            scale=1
-                        )
+                    alternatives_btn = gr.Button(
+                        "✨ Generate 3 Alternative Captions", 
+                        variant="secondary"
+                    )
                     
                     alternatives_output = gr.Textbox(
                         label="✨ Alternative Captions",
                         lines=15,
                         show_copy_button=True,
-                        placeholder="Generate 3 different caption alternatives using Meta-Llama-3.2-3B-Instruct..."
+                        placeholder="Generate 3 different caption alternatives..."
                     )
         
         # Multi-Language Tab
-        with gr.Tab("🌍 Multi-Language"):
+        with gr.Tab("🌍 Multi-Language Generator"):
             with gr.Row():
-                with gr.Column(elem_classes=["feature-card"]):
+                with gr.Column():
                     gr.Markdown("### 🗣️ Global Content Creation")
-                    gr.Markdown("*Powered by Hugging Face Translation Models*")
+                    gr.Markdown("*Featuring Hugging Face Helsinki-NLP Translation Models*")
                     
                     base_caption_input = gr.Textbox(
                         label="📝 Base Caption",
@@ -1424,7 +1451,7 @@ def create_gradio_app():
                         variant="primary"
                     )
                 
-                with gr.Column(elem_classes=["feature-card"]):
+                with gr.Column():
                     multilingual_output = gr.Textbox(
                         label="🗺️ Multi-Language Captions",
                         lines=20,
@@ -1435,7 +1462,7 @@ def create_gradio_app():
         # SambaNova Features Tab
         with gr.Tab("🤖 SambaNova Features"):
             gr.HTML(f"""
-            <div class="status-badge">
+            <div class="sambanova-status">
                 🚀 SambaNova Status: {sambanova_status} • 🦙 Llama-4-Maverick + Llama-3.2-3B
             </div>
             """)
@@ -1510,7 +1537,7 @@ variations = client.chat.completions.create(
         # Hugging Face Features Tab
         with gr.Tab("🤗 Hugging Face Features"):
             gr.HTML(f"""
-            <div class="status-badge">
+            <div class="sambanova-status">
                 🤗 Hugging Face Status: {hf_status} • 🌍 Multi-Language Translation
             </div>
             """)
@@ -1594,14 +1621,12 @@ arabic_result = client.translation(
             outputs=[output, base_caption_input]
         )
         
-        # Generate multiple alternatives
         alternatives_btn.click(
             fn=generate_multiple_captions_interface,
             inputs=[images, caption_style, target_audience, custom_prompt],
             outputs=alternatives_output
         )
         
-        # Multi-language translation
         translate_btn.click(
             fn=translate_caption_interface,
             inputs=[base_caption_input, language_selector],