Update app.py

app.py

@@ -1209,14 +1209,16 @@ async def translate_caption_interface(base_caption, selected_languages):
     return result
 
 
+# Fixed Gradio Interface with Better Dropdown Styling and More Options
+
 def create_gradio_app():
-    """Create the Gradio app with good UI styling"""
+    """Create the Gradio app with fixed dropdown styling and more options"""
     
     # 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
+    # Enhanced CSS for better dropdown positioning
     css = """
     @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
     
@@ -1246,6 +1248,62 @@ def create_gradio_app():
         border: 1px solid rgba(255,255,255,0.2);
         box-shadow: 0 15px 30px rgba(0,0,0,0.1);
         margin: 10px 0;
+        position: relative;
+        z-index: 1;
+    }
+    
+    /* FIX: Better dropdown styling */
+    .gradio-dropdown {
+        position: relative !important;
+        z-index: 1000 !important;
+    }
+    
+    .gradio-dropdown .wrap {
+        position: relative !important;
+        z-index: 1000 !important;
+    }
+    
+    .gradio-dropdown .wrap.opened {
+        z-index: 1001 !important;
+    }
+    
+    .gradio-dropdown ul {
+        position: absolute !important;
+        top: 100% !important;
+        left: 0 !important;
+        right: 0 !important;
+        background: rgba(255, 255, 255, 0.95) !important;
+        backdrop-filter: blur(20px) !important;
+        border: 1px solid rgba(255, 255, 255, 0.3) !important;
+        border-radius: 10px !important;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
+        max-height: 200px !important;
+        overflow-y: auto !important;
+        z-index: 1002 !important;
+        margin-top: 5px !important;
+    }
+    
+    .gradio-dropdown li {
+        padding: 10px 15px !important;
+        color: #333 !important;
+        cursor: pointer !important;
+        transition: all 0.2s ease !important;
+    }
+    
+    .gradio-dropdown li:hover {
+        background: rgba(102, 126, 234, 0.1) !important;
+        color: #667eea !important;
+    }
+    
+    .gradio-dropdown li.selected {
+        background: rgba(102, 126, 234, 0.2) !important;
+        color: #667eea !important;
+        font-weight: 600 !important;
+    }
+    
+    /* Ensure dropdowns don't get clipped */
+    .gradio-row, .gradio-column {
+        overflow: visible !important;
     }
     
     .gradio-button-primary {
@@ -1273,17 +1331,6 @@ def create_gradio_app():
         color: white !important;
         box-shadow: 0 8px 16px rgba(254, 202, 87, 0.3) !important;
     }
-    
-    .status-badge {
-        background: linear-gradient(90deg, #2ecc71, #27ae60);
-        color: white;
-        padding: 10px 20px;
-        border-radius: 10px;
-        text-align: center;
-        font-weight: 600;
-        box-shadow: 0 8px 16px rgba(46, 204, 113, 0.3);
-        margin: 10px 0;
-    }
     """
     
     with gr.Blocks(css=css, title="📱 Instagram Generator", theme=gr.themes.Glass()) as app:
@@ -1321,6 +1368,7 @@ def create_gradio_app():
                     
                     gr.Markdown("### ⚙️ Configuration")
                     
+                    # ENHANCED DROPDOWN OPTIONS
                     with gr.Row():
                         caption_style = gr.Dropdown(
                             choices=[
@@ -1331,10 +1379,22 @@ def create_gradio_app():
                                 "💪 Motivational", 
                                 "📖 Storytelling",
                                 "🌟 Luxury Lifestyle",
-                                "🔥 Trending Culture"
+                                "🔥 Trending Culture",
+                                "🌙 Mysterious & Intriguing",
+                                "🎭 Behind-the-Scenes",
+                                "📚 Educational/Tutorial",
+                                "🎪 Controversial/Debate",
+                                "🌱 Minimalist/Zen",
+                                "🎬 Cinematic/Movie-style",
+                                "🎮 Gaming/Meme Culture",
+                                "🏆 Achievement/Milestone",
+                                "💔 Vulnerable/Personal",
+                                "🌈 Inclusive/Community"
                             ],
                             value="🎯 Viral Engagement",
-                            label="🎨 Caption Style"
+                            label="🎨 Caption Style",
+                            container=True,
+                            interactive=True
                         )
                         
                         target_audience = gr.Dropdown(
@@ -1346,16 +1406,49 @@ def create_gradio_app():
                                 "💪 Fitness Community", 
                                 "👗 Fashion Forward", 
                                 "💻 Tech Innovators", 
-                                "🎨 Creative Artists"
+                                "🎨 Creative Artists",
+                                "🎓 Students & Academia",
+                                "👶 Parents & Families",
+                                "🌍 Environmental Activists",
+                                "💰 Entrepreneurs",
+                                "🎵 Music Lovers",
+                                "🏃 Athletes & Sports",
+                                "👗 Beauty & Skincare",
+                                "🏠 Home & Lifestyle",
+                                "🐾 Pet Owners",
+                                "🍃 Wellness & Mental Health",
+                                "🎭 Entertainment Industry"
                             ],
                             value="🌟 General Audience",
-                            label="👥 Target Audience"
+                            label="👥 Target Audience",
+                            container=True,
+                            interactive=True
                         )
                     
+                    # Content Type Selection
+                    content_type = gr.Dropdown(
+                        choices=[
+                            "📸 Photo Caption",
+                            "🎥 Video/Reels Caption", 
+                            "📱 Stories Text",
+                            "🛍️ Product Showcase",
+                            "🎉 Event Promotion",
+                            "📰 News Commentary",
+                            "🎂 Celebration Post",
+                            "📢 Announcement",
+                            "🤝 Collaboration Post",
+                            "🎁 Giveaway/Contest"
+                        ],
+                        value="📸 Photo Caption",
+                        label="📝 Content Type",
+                        container=True,
+                        interactive=True
+                    )
+                    
                     custom_prompt = gr.Textbox(
                         label="💬 Additional Instructions",
-                        placeholder="e.g., 'Focus on sustainability', 'Include product details'...",
-                        lines=2
+                        placeholder="e.g., 'Focus on sustainability', 'Include product details', 'Add call-to-action'...",
+                        lines=3
                     )
                     
                     generate_btn = gr.Button(
@@ -1371,7 +1464,7 @@ def create_gradio_app():
                     output = gr.Textbox(
                         label="🎯 Generated Caption",
                         lines=15,
-                        max_lines=20,
+                        max_lines=25,
                         show_copy_button=True,
                         placeholder="Upload images and generate your Instagram content..."
                     )
@@ -1382,6 +1475,11 @@ def create_gradio_app():
                             variant="secondary",
                             scale=1
                         )
+                        analytics_btn = gr.Button(
+                            "📊 Analyze Performance", 
+                            variant="secondary",
+                            scale=1
+                        )
                     
                     alternatives_output = gr.Textbox(
                         label="✨ Alternative Captions",
@@ -1390,7 +1488,7 @@ def create_gradio_app():
                         placeholder="Generate 3 different caption alternatives using Meta-Llama-3.2-3B-Instruct..."
                     )
         
-        # Multi-Language Tab
+        # Multi-Language Tab with Enhanced Options
         with gr.Tab("🌍 Multi-Language"):
             with gr.Row():
                 with gr.Column(elem_classes=["feature-card"]):
@@ -1408,7 +1506,15 @@ def create_gradio_app():
                             "🇩🇪 German",
                             "🇨🇳 Chinese", 
                             "🇮🇳 Hindi",
-                            "🇸🇦 Arabic"
+                            "🇸🇦 Arabic",
+                            "🇫🇷 French",
+                            "🇪🇸 Spanish",
+                            "🇵🇹 Portuguese",
+                            "🇮🇹 Italian",
+                            "🇯🇵 Japanese",
+                            "🇰🇷 Korean",
+                            "🇷🇺 Russian",
+                            "🇹🇷 Turkish"
                         ],
                         label="🌐 Select Languages",
                         value=["🇩🇪 German", "🇮🇳 Hindi"]
@@ -1427,184 +1533,87 @@ def create_gradio_app():
                         placeholder="Culturally adapted captions for global audiences..."
                     )
         
-        # SambaNova Features Tab
-        with gr.Tab("🤖 SambaNova Features"):
-            gr.HTML(f"""
-            <div class="status-badge">
-                🚀 SambaNova Status: {sambanova_status} • 🦙 Llama-4-Maverick + Llama-3.2-3B
-            </div>
-            """)
-            
+        # Analytics Tab
+        with gr.Tab("📊 Analytics"):
             with gr.Row():
                 with gr.Column(elem_classes=["feature-card"]):
-                    gr.HTML("""
-                    <div style="text-align: center; padding: 20px;">
-                        <h3>⚡ SambaNova AI Capabilities</h3>
-                        <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 20px;">
-                            <div style="padding: 15px; background: rgba(46, 204, 113, 0.2); border-radius: 10px; border: 2px solid #2ecc71;">
-                                <h4 style="color: #ffffff; margin: 0; text-shadow: 0 0 10px #2ecc71;">Llama-4-Maverick</h4>
-                                <p style="margin: 5px 0; color: #e8f8f5; font-weight: 500;">Main Caption Generation</p>
-                            </div>
-                            <div style="padding: 15px; background: rgba(52, 152, 219, 0.2); border-radius: 10px; border: 2px solid #3498db;">
-                                <h4 style="color: #ffffff; margin: 0; text-shadow: 0 0 10px #3498db;">Llama-3.2-3B</h4>
-                                <p style="margin: 5px 0; color: #ebf3fd; font-weight: 500;">Caption Variations</p>
-                            </div>
-                            <div style="padding: 15px; background: rgba(231, 76, 60, 0.2); border-radius: 10px; border: 2px solid #e74c3c;">
-                                <h4 style="color: #ffffff; margin: 0; text-shadow: 0 0 10px #e74c3c;">Multi-Modal</h4>
-                                <p style="margin: 5px 0; color: #fdedec; font-weight: 500;">Vision + Text Analysis</p>
-                            </div>
-                            <div style="padding: 15px; background: rgba(155, 89, 182, 0.2); border-radius: 10px; border: 2px solid #9b59b6;">
-                                <h4 style="color: #ffffff; margin: 0; text-shadow: 0 0 10px #9b59b6;">Advanced</h4>
-                                <p style="margin: 5px 0; color: #f4ecf7; font-weight: 500;">Style & Audience Targeting</p>
-                            </div>
-                        </div>
-                    </div>
-                    """)
-                
-                with gr.Column(elem_classes=["feature-card"]):
-                    gr.Code(
-                        value="""
-# SambaNova API Integration:
-
-from openai import OpenAI
-
-client = OpenAI(
-    api_key=os.environ["SAMBANOVA_API_KEY"],
-    base_url="https://api.sambanova.ai/v1",
-)
-
-# Main caption generation
-response = client.chat.completions.create(
-    model="Llama-4-Maverick-17B-128E-Instruct",
-    messages=[{
-        "role": "user",
-        "content": [
-            {"type": "text", "text": "Create Instagram caption"},
-            {"type": "image_url", "image_url": {"url": "data:image/jpeg;base64,..."}}
-        ]
-    }],
-    temperature=0.1,
-    top_p=0.1
-)
-
-# Caption variations
-variations = client.chat.completions.create(
-    model="Meta-Llama-3.2-3B-Instruct",
-    messages=[{
-        "role": "user", 
-        "content": "Create different version of this caption..."
-    }],
-    temperature=0.9,
-    top_p=0.95
-)
-                        """,
-                        language="python",
-                        label="🔧 SambaNova Integration Code"
+                    gr.Markdown("### 📈 Caption Performance Analysis")
+                    
+                    analytics_caption = gr.Textbox(
+                        label="📝 Caption to Analyze",
+                        placeholder="Paste caption for performance analysis...",
+                        lines=5
+                    )
+                    
+                    analyze_btn = gr.Button(
+                        "🔍 Analyze Performance",
+                        variant="primary"
                     )
-        
-        # Hugging Face Features Tab
-        with gr.Tab("🤗 Hugging Face Features"):
-            gr.HTML(f"""
-            <div class="status-badge">
-                🤗 Hugging Face Status: {hf_status} • 🌍 Multi-Language Translation
-            </div>
-            """)
-            
-            with gr.Row():
-                with gr.Column(elem_classes=["feature-card"]):
-                    gr.HTML("""
-                    <div style="text-align: center; padding: 20px;">
-                        <h3>🌍 Translation Models</h3>
-                        <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 20px;">
-                            <div style="padding: 15px; background: rgba(46, 204, 113, 0.2); border-radius: 10px; border: 2px solid #2ecc71;">
-                                <h4 style="color: #ffffff; margin: 0; text-shadow: 0 0 10px #2ecc71;">🇩🇪 German</h4>
-                                <p style="margin: 5px 0; color: #e8f8f5; font-weight: 500;">google-t5/t5-small</p>
-                            </div>
-                            <div style="padding: 15px; background: rgba(52, 152, 219, 0.2); border-radius: 10px; border: 2px solid #3498db;">
-                                <h4 style="color: #ffffff; margin: 0; text-shadow: 0 0 10px #3498db;">🇨🇳 Chinese</h4>
-                                <p style="margin: 5px 0; color: #ebf3fd; font-weight: 500;">chence08/mt5-small-iwslt2017-zh-en</p>
-                            </div>
-                            <div style="padding: 15px; background: rgba(231, 76, 60, 0.2); border-radius: 10px; border: 2px solid #e74c3c;">
-                                <h4 style="color: #ffffff; margin: 0; text-shadow: 0 0 10px #e74c3c;">🇮🇳 Hindi</h4>
-                                <p style="margin: 5px 0; color: #fdedec; font-weight: 500;">Helsinki-NLP/opus-mt-en-hi</p>
-                            </div>
-                            <div style="padding: 15px; background: rgba(155, 89, 182, 0.2); border-radius: 10px; border: 2px solid #9b59b6;">
-                                <h4 style="color: #ffffff; margin: 0; text-shadow: 0 0 10px #9b59b6;">🇸🇦 Arabic</h4>
-                                <p style="margin: 5px 0; color: #f4ecf7; font-weight: 500;">marefa-nlp/marefa-mt-en-ar</p>
-                            </div>
-                        </div>
-                    </div>
-                    """)
                 
                 with gr.Column(elem_classes=["feature-card"]):
-                    gr.Code(
-                        value="""
-# Hugging Face Translation Integration:
-
-from huggingface_hub import InferenceClient
-
-client = InferenceClient(
-    provider="hf-inference",
-    api_key=os.environ["HF_TOKEN"],
-)
-
-# German translation
-german_result = client.translation(
-    "This is an amazing moment! ✨",
-    model="google-t5/t5-small",
-)
-
-# Chinese translation
-chinese_result = client.translation(
-    "Amazing content for Instagram",
-    model="chence08/mt5-small-iwslt2017-zh-en",
-)
-
-# Hindi translation
-hindi_result = client.translation(
-    "Beautiful content creation",
-    model="Helsinki-NLP/opus-mt-en-hi",
-)
+                    analytics_output = gr.Textbox(
+                        label="📊 Analytics Results",
+                        lines=15,
+                        placeholder="Performance metrics and recommendations..."
+                    )
+    
+    return app
 
-# Arabic translation
-arabic_result = client.translation(
-    "Social media content",
-    model="marefa-nlp/marefa-mt-en-ar",
-)
 
-# Features:
-# ✅ 4 language models
-# ✅ Fallback support
-# ✅ Instagram-optimized output
-# ✅ Cultural adaptation
-                        """,
-                        language="python",
-                        label="🔧 Hugging Face Translation Code"
-                    )
-        
-        # Event Handlers
-        generate_btn.click(
-            fn=generate_advanced_caption_interface,
-            inputs=[images, caption_style, target_audience, custom_prompt],
-            outputs=[output, base_caption_input]
-        )
+# Enhanced caption generation function with content type support
+async def generate_enhanced_caption_interface(uploaded_files, style, audience, 
+                                            content_type, custom_prompt):
+    """Enhanced interface function with content type support"""
+    if not setup_success:
+        return f"❌ Setup Error: {setup_error}", ""
+    
+    images = []
+    if uploaded_files:
+        for file in uploaded_files[:3]:
+            try:
+                image = Image.open(file.name)
+                images.append(image)
+            except Exception as e:
+                return f"❌ Error processing file: {e}", ""
+    
+    # Enhanced prompt with content type
+    enhanced_prompt = f"""
+    Create an Instagram caption with these specifications:
+    
+    STYLE: {style}
+    AUDIENCE: {audience}
+    CONTENT TYPE: {content_type}
+    SPECIAL REQUIREMENTS: {custom_prompt if custom_prompt else 'None'}
+    
+    Based on the content type '{content_type}', adjust the format and tone accordingly.
+    """
+    
+    result = await generator.generate_advanced_caption(
+        images, style, audience, enhanced_prompt
+    )
+    
+    # Extract clean caption for multi-language processing
+    caption_only = ""
+    if "✨ AI-GENERATED INSTAGRAM CONTENT:" in result:
+        lines = result.split('\n')
+        caption_lines = []
+        start_capturing = False
         
-        # Generate multiple alternatives
-        alternatives_btn.click(
-            fn=generate_multiple_captions_interface,
-            inputs=[images, caption_style, target_audience, custom_prompt],
-            outputs=alternatives_output
-        )
+        for line in lines:
+            if "✨ AI-GENERATED INSTAGRAM CONTENT:" in line:
+                start_capturing = True
+                continue
+            elif "🤖 Powered by SambaNova" in line:
+                break
+            elif start_capturing and line.strip():
+                caption_lines.append(line)
         
-        # Multi-language translation
-        translate_btn.click(
-            fn=translate_caption_interface,
-            inputs=[base_caption_input, language_selector],
-            outputs=multilingual_output
-        )
+        caption_only = '\n'.join(caption_lines).strip()
     
-    return app
-
+    if not caption_only:
+        caption_only = result
+    
+    return result, caption_only
 
 def main():
     """Main function to launch the Instagram Caption Generator"""