Update app.py

app.py

@@ -1211,250 +1211,66 @@ async def translate_caption_interface(base_caption, selected_languages):
 
 # Replace the CSS section in your create_gradio_app() function with this fixed version:
 
+# Replace the problematic dropdowns with radio buttons - this completely avoids the positioning issue
+
 def create_gradio_app():
-    """Create the Gradio app with fixed UI styling"""
+    """Create the Gradio app with radio buttons instead of dropdowns"""
     
     # 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"
     
-    # FIXED CSS for better dropdown positioning
-    css = """
-    @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
-    
-    .gradio-container {
-        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;
-    }
-    
-    .main-header {
-        text-align: center;
-        color: white;
-        margin-bottom: 30px;
-        padding: 30px;
-        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);
-        position: relative;
-        z-index: 1;
-    }
-    
-    .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;
-        position: relative;
-        z-index: 1;
-    }
-    
-    /* FIX: Dropdown positioning */
-    .gradio-dropdown {
-        position: relative !important;
-        z-index: 100 !important;
-    }
-    
-    .gradio-dropdown .wrap {
-        position: relative !important;
-    }
-    
-    .gradio-dropdown .wrap .wrap {
-        position: relative !important;
-    }
-    
-    /* FIX: Dropdown menu positioning */
-    .gradio-dropdown [role="listbox"],
-    .gradio-dropdown .options,
-    .gradio-dropdown .dropdown-menu {
-        position: absolute !important;
-        top: 100% !important;
-        left: 0 !important;
-        right: 0 !important;
-        z-index: 1000 !important;
-        transform: none !important;
-        margin-top: 2px !important;
-        background: rgba(255, 255, 255, 0.95) !important;
-        backdrop-filter: blur(10px) !important;
-        border-radius: 10px !important;
-        border: 1px solid rgba(255,255,255,0.3) !important;
-        box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
-        max-height: 200px !important;
-        overflow-y: auto !important;
-    }
-    
-    /* FIX: Dropdown options styling */
-    .gradio-dropdown [role="option"],
-    .gradio-dropdown .option {
-        padding: 10px 15px !important;
-        color: #333 !important;
-        font-weight: 500 !important;
-        border-bottom: 1px solid rgba(0,0,0,0.1) !important;
-    }
-    
-    .gradio-dropdown [role="option"]:hover,
-    .gradio-dropdown .option:hover {
-        background: rgba(52, 152, 219, 0.2) !important;
-        color: #2c3e50 !important;
-    }
-    
-    .gradio-button-primary {
-        background: linear-gradient(45deg, #ff6b6b, #ee5a24, #ff9ff3, #54a0ff) !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;
-        transition: all 0.3s ease !important;
-        position: relative !important;
-        z-index: 10 !important;
-    }
-    
-    .gradio-button-primary:hover {
-        transform: translateY(-2px) !important;
-        box-shadow: 0 15px 30px rgba(255, 107, 107, 0.5) !important;
-    }
-    
-    .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;
-        position: relative !important;
-        z-index: 10 !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;
-        position: relative;
-        z-index: 1;
-    }
-    
-    /* FIX: Ensure proper stacking context */
-    .gradio-row {
-        position: relative !important;
-        z-index: auto !important;
-    }
-    
-    .gradio-column {
-        position: relative !important;
-        z-index: auto !important;
-    }
-    
-    /* FIX: Tab content positioning */
-    .gradio-tabs {
-        position: relative !important;
-        z-index: 1 !important;
-    }
-    
-    .gradio-tabitem {
-        position: relative !important;
-        z-index: 1 !important;
-    }
-
-     /* Fix dropdown positioning directly */
-    .dropdown-container, 
-    .gradio-dropdown,
-    [data-testid="dropdown"] {
-        position: relative !important;
-        z-index: auto !important;
-        transform: none !important;
-    }
-    
-    /* Force dropdown menu to appear below */
-    .dropdown-container .options,
-    .gradio-dropdown .options,
-    [role="listbox"] {
-        position: absolute !important;
-        top: 100% !important;
-        left: 0 !important;
-        right: 0 !important;
-        z-index: 9999 !important;
-        transform: translateY(0) !important;
-    }
-    """
-     
-    with gr.Blocks(css=css, title="📱 Instagram Generator", theme=gr.themes.Glass()) as app:
+    # NO CUSTOM CSS AT ALL
+    with gr.Blocks(title="📱 Instagram Generator") as app:
         
-        # Main Header
+        # Simple header
         gr.HTML(f"""
-        <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;">
-                📱 INSTAGRAM CAPTION GENERATOR
-            </h1>
-            <h2 style="font-size: 1.2rem; margin-bottom: 20px; opacity: 0.9;">
-                🚀 AI-Powered Content Creation • SambaNova + Hugging Face
-            </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>
-        </div>
+        <h1>📱 INSTAGRAM CAPTION GENERATOR</h1>
+        <p>🚀 AI-Powered Content Creation • SambaNova + Hugging Face</p>
+        <p>🤖 SambaNova: {sambanova_status} | 🤗 Hugging Face: {hf_status}</p>
         """)
         
         # Main Interface
         with gr.Tab("🎯 Caption Generator"):
             with gr.Row():
                 # Left Column - Controls
-                with gr.Column(scale=2, elem_classes=["feature-card"]):
+                with gr.Column(scale=2):
                     gr.Markdown("### 🖼️ Upload Images")
-                    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")
                     
-                    with gr.Row():
-                        caption_style = gr.Dropdown(
-                            choices=[
-                                "🎯 Viral Engagement", 
-                                "💼 Professional Brand", 
-                                "😄 Casual Fun", 
-                                "😂 Humor & Memes", 
-                                "💪 Motivational", 
-                                "📖 Storytelling",
-                                "🌟 Luxury Lifestyle",
-                                "🔥 Trending Culture"
-                            ],
-                            value="🎯 Viral Engagement",
-                            label="🎨 Caption Style"
-                        )
-                        
-                        target_audience = gr.Dropdown(
-                            choices=[
-                                "🌟 General Audience", 
-                                "💼 Business Professionals", 
-                                "✈️ Travel Enthusiasts", 
-                                "🍕 Food Lovers", 
-                                "💪 Fitness Community", 
-                                "👗 Fashion Forward", 
-                                "💻 Tech Innovators", 
-                                "🎨 Creative Artists"
-                            ],
-                            value="🌟 General Audience",
-                            label="👥 Target Audience"
-                        )
+                    # REPLACE DROPDOWNS WITH RADIO BUTTONS
+                    caption_style = gr.Radio(
+                        choices=[
+                            "🎯 Viral Engagement", 
+                            "💼 Professional Brand", 
+                            "😄 Casual Fun", 
+                            "😂 Humor & Memes", 
+                            "💪 Motivational", 
+                            "📖 Storytelling"
+                        ],
+                        value="🎯 Viral Engagement",
+                        label="🎨 Caption Style"
+                    )
+                    
+                    target_audience = gr.Radio(
+                        choices=[
+                            "🌟 General Audience", 
+                            "💼 Business Professionals", 
+                            "✈️ Travel Enthusiasts", 
+                            "🍕 Food Lovers", 
+                            "💪 Fitness Community", 
+                            "👗 Fashion Forward"
+                        ],
+                        value="🌟 General Audience",
+                        label="👥 Target Audience"
+                    )
                     
                     custom_prompt = gr.Textbox(
                         label="💬 Additional Instructions",
@@ -1464,42 +1280,37 @@ def create_gradio_app():
                     
                     generate_btn = gr.Button(
                         "🚀 Generate Caption", 
-                        variant="primary", 
-                        size="lg"
+                        variant="primary"
                     )
                 
                 # Right Column - Results
-                with gr.Column(scale=3, elem_classes=["feature-card"]):
+                with gr.Column(scale=3):
                     gr.Markdown("### 📊 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..."
                     )
                     
-                    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.Row():
-                with gr.Column(elem_classes=["feature-card"]):
+                with gr.Column():
                     gr.Markdown("### 🗣️ Global Content Creation")
-                    gr.Markdown("*Powered by Hugging Face Translation Models*")
                     
                     base_caption_input = gr.Textbox(
                         label="📝 Base Caption",
@@ -1523,7 +1334,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,
@@ -1531,161 +1342,6 @@ 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>
-            """)
-            
-            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"
-                    )
-        
-        # 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",
-)
-
-# 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,
@@ -1693,14 +1349,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],
@@ -1709,7 +1363,6 @@ arabic_result = client.translation(
     
     return app
 
-
 def main():
     """Main function to launch the Instagram Caption Generator"""
     print("🚀 Starting Instagram Caption Generator...")