Update app.py

app.py

@@ -1209,16 +1209,16 @@ async def translate_caption_interface(base_caption, selected_languages):
     return result
 
 
-# Fixed Gradio Interface with Better Dropdown Styling and More Options
+# Just replace the CSS section in your create_gradio_app() function:
 
 def create_gradio_app():
-    """Create the Gradio app with fixed dropdown styling and more options"""
+    """Create the Gradio app with good UI styling"""
     
     # 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 dropdown positioning
+    # FIXED CSS - Only dropdown positioning changes
     css = """
     @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
     
@@ -1252,7 +1252,7 @@ def create_gradio_app():
         z-index: 1;
     }
     
-    /* FIX: Better dropdown styling */
+    /* DROPDOWN FIX - Force dropdowns to open downward */
     .gradio-dropdown {
         position: relative !important;
         z-index: 1000 !important;
@@ -1269,7 +1269,8 @@ def create_gradio_app():
     
     .gradio-dropdown ul {
         position: absolute !important;
-        top: 100% !important;
+        top: 100% !important;  /* This forces dropdown to open below */
+        bottom: auto !important;  /* Prevent upward opening */
         left: 0 !important;
         right: 0 !important;
         background: rgba(255, 255, 255, 0.95) !important;
@@ -1281,6 +1282,8 @@ def create_gradio_app():
         overflow-y: auto !important;
         z-index: 1002 !important;
         margin-top: 5px !important;
+        margin-bottom: 0 !important;
+        transform: none !important;  /* Prevent any transformations */
     }
     
     .gradio-dropdown li {
@@ -1301,9 +1304,10 @@ def create_gradio_app():
         font-weight: 600 !important;
     }
     
-    /* Ensure dropdowns don't get clipped */
+    /* Ensure parent containers don't clip dropdowns */
     .gradio-row, .gradio-column {
         overflow: visible !important;
+        position: relative !important;
     }
     
     .gradio-button-primary {
@@ -1331,8 +1335,22 @@ 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;
+    }
     """
     
+    # Rest of your function remains exactly the same...
+    with gr.Blocks(css=css, title="📱 Instagram Generator", theme=gr.themes.Glass()) as app:
+    
     with gr.Blocks(css=css, title="📱 Instagram Generator", theme=gr.themes.Glass()) as app:
         
         # Main Header
@@ -1368,7 +1386,6 @@ def create_gradio_app():
                     
                     gr.Markdown("### ⚙️ Configuration")
                     
-                    # ENHANCED DROPDOWN OPTIONS
                     with gr.Row():
                         caption_style = gr.Dropdown(
                             choices=[
@@ -1379,22 +1396,10 @@ def create_gradio_app():
                                 "💪 Motivational", 
                                 "📖 Storytelling",
                                 "🌟 Luxury Lifestyle",
-                                "🔥 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"
+                                "🔥 Trending Culture"
                             ],
                             value="🎯 Viral Engagement",
-                            label="🎨 Caption Style",
-                            container=True,
-                            interactive=True
+                            label="🎨 Caption Style"
                         )
                         
                         target_audience = gr.Dropdown(
@@ -1406,49 +1411,16 @@ def create_gradio_app():
                                 "💪 Fitness Community", 
                                 "👗 Fashion Forward", 
                                 "💻 Tech Innovators", 
-                                "🎨 Creative Artists",
-                                "🎓 Students & Academia",
-                                "👶 Parents & Families",
-                                "🌍 Environmental Activists",
-                                "💰 Entrepreneurs",
-                                "🎵 Music Lovers",
-                                "🏃 Athletes & Sports",
-                                "👗 Beauty & Skincare",
-                                "🏠 Home & Lifestyle",
-                                "🐾 Pet Owners",
-                                "🍃 Wellness & Mental Health",
-                                "🎭 Entertainment Industry"
+                                "🎨 Creative Artists"
                             ],
                             value="🌟 General Audience",
-                            label="👥 Target Audience",
-                            container=True,
-                            interactive=True
+                            label="👥 Target Audience"
                         )
                     
-                    # 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', 'Add call-to-action'...",
-                        lines=3
+                        placeholder="e.g., 'Focus on sustainability', 'Include product details'...",
+                        lines=2
                     )
                     
                     generate_btn = gr.Button(
@@ -1464,7 +1436,7 @@ def create_gradio_app():
                     output = gr.Textbox(
                         label="🎯 Generated Caption",
                         lines=15,
-                        max_lines=25,
+                        max_lines=20,
                         show_copy_button=True,
                         placeholder="Upload images and generate your Instagram content..."
                     )
@@ -1475,11 +1447,6 @@ 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",
@@ -1488,7 +1455,7 @@ def create_gradio_app():
                         placeholder="Generate 3 different caption alternatives using Meta-Llama-3.2-3B-Instruct..."
                     )
         
-        # Multi-Language Tab with Enhanced Options
+        # Multi-Language Tab
         with gr.Tab("🌍 Multi-Language"):
             with gr.Row():
                 with gr.Column(elem_classes=["feature-card"]):
@@ -1506,15 +1473,7 @@ def create_gradio_app():
                             "🇩🇪 German",
                             "🇨🇳 Chinese", 
                             "🇮🇳 Hindi",
-                            "🇸🇦 Arabic",
-                            "🇫🇷 French",
-                            "🇪🇸 Spanish",
-                            "🇵🇹 Portuguese",
-                            "🇮🇹 Italian",
-                            "🇯🇵 Japanese",
-                            "🇰🇷 Korean",
-                            "🇷🇺 Russian",
-                            "🇹🇷 Turkish"
+                            "🇸🇦 Arabic"
                         ],
                         label="🌐 Select Languages",
                         value=["🇩🇪 German", "🇮🇳 Hindi"]
@@ -1533,87 +1492,184 @@ def create_gradio_app():
                         placeholder="Culturally adapted captions for global audiences..."
                     )
         
-        # Analytics Tab
-        with gr.Tab("📊 Analytics"):
+        # 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>
+            """)
+            
             with gr.Row():
                 with gr.Column(elem_classes=["feature-card"]):
-                    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"
-                    )
+                    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"]):
-                    analytics_output = gr.Textbox(
-                        label="📊 Analytics Results",
-                        lines=15,
-                        placeholder="Performance metrics and recommendations..."
+                    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"
                     )
-    
-    return app
+        
+        # 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
 
-# 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
+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",
+)
+
+# 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"
+                    )
         
-        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)
+        # Event Handlers
+        generate_btn.click(
+            fn=generate_advanced_caption_interface,
+            inputs=[images, caption_style, target_audience, custom_prompt],
+            outputs=[output, base_caption_input]
+        )
         
-        caption_only = '\n'.join(caption_lines).strip()
-    
-    if not caption_only:
-        caption_only = result
+        # 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],
+            outputs=multilingual_output
+        )
     
-    return result, caption_only
+    return app
+
 
 def main():
     """Main function to launch the Instagram Caption Generator"""