Update app.py

app.py

@@ -1209,68 +1209,148 @@ async def translate_caption_interface(base_caption, selected_languages):
     return result
 
 
-# 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 radio buttons instead of dropdowns"""
+    """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"
     
-    # NO CUSTOM CSS AT ALL
-    with gr.Blocks(title="📱 Instagram Generator") as app:
+    # Enhanced CSS for better UI
+    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);
+    }
+    
+    .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;
+    }
+    
+    .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;
+    }
+    
+    .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;
+    }
+    
+    .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:
         
-        # Simple header
+        # Main Header
         gr.HTML(f"""
-        <h1>📱 INSTAGRAM CAPTION GENERATOR</h1>
-        <p>🚀 AI-Powered Content Creation • SambaNova + Hugging Face</p>
-        <p>🤖 SambaNova: {sambanova_status} | 🤗 Hugging Face: {hf_status}</p>
+        <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>
         """)
         
         # Main Interface
         with gr.Tab("🎯 Caption Generator"):
             with gr.Row():
                 # Left Column - Controls
-                with gr.Column(scale=2):
+                with gr.Column(scale=2, elem_classes=["feature-card"]):
                     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"]
+                        file_types=["image"],
+                        height=200
                     )
                     
                     gr.Markdown("### ⚙️ Configuration")
                     
-                    # 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"
-                    )
+                    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"
+                        )
                     
                     custom_prompt = gr.Textbox(
                         label="💬 Additional Instructions",
@@ -1280,37 +1360,42 @@ def create_gradio_app():
                     
                     generate_btn = gr.Button(
                         "🚀 Generate Caption", 
-                        variant="primary"
+                        variant="primary", 
+                        size="lg"
                     )
                 
                 # Right Column - Results
-                with gr.Column(scale=3):
+                with gr.Column(scale=3, elem_classes=["feature-card"]):
                     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..."
                     )
                     
-                    alternatives_btn = gr.Button(
-                        "✨ Generate 3 Alternative Captions", 
-                        variant="secondary"
-                    )
+                    with gr.Row():
+                        alternatives_btn = gr.Button(
+                            "✨ Generate 3 Alternative Captions", 
+                            variant="secondary",
+                            scale=1
+                        )
                     
                     alternatives_output = gr.Textbox(
                         label="✨ Alternative Captions",
                         lines=15,
                         show_copy_button=True,
-                        placeholder="Generate 3 different caption alternatives..."
+                        placeholder="Generate 3 different caption alternatives using Meta-Llama-3.2-3B-Instruct..."
                     )
         
         # Multi-Language Tab
         with gr.Tab("🌍 Multi-Language"):
             with gr.Row():
-                with gr.Column():
+                with gr.Column(elem_classes=["feature-card"]):
                     gr.Markdown("### 🗣️ Global Content Creation")
+                    gr.Markdown("*Powered by Hugging Face Translation Models*")
                     
                     base_caption_input = gr.Textbox(
                         label="📝 Base Caption",
@@ -1334,7 +1419,7 @@ def create_gradio_app():
                         variant="primary"
                     )
                 
-                with gr.Column():
+                with gr.Column(elem_classes=["feature-card"]):
                     multilingual_output = gr.Textbox(
                         label="🗺️ Multi-Language Captions",
                         lines=20,
@@ -1342,6 +1427,161 @@ 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,
@@ -1349,12 +1589,14 @@ def create_gradio_app():
             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],
@@ -1363,6 +1605,7 @@ def create_gradio_app():
     
     return app
 
+
 def main():
     """Main function to launch the Instagram Caption Generator"""
     print("🚀 Starting Instagram Caption Generator...")