Update app.py

app.py

@@ -2,14 +2,14 @@ import gradio as gr
 import requests
 import os
 
-API_KEY = os.getenv("groc_api_key")
+API_KEY = os.getenv("GROQ_API_KEY")
 API_URL = "https://api.groq.com/openai/v1/chat/completions"
 
 
-def generate_linkedin_post(topic, tone, audience, length):
+def generate_post(topic, tone, audience, length):
 
     prompt = f"""
-    Write a HIGHLY engaging LinkedIn post.
+    Write a powerful LinkedIn post.
 
     Topic: {topic}
     Tone: {tone}
@@ -17,11 +17,11 @@ def generate_linkedin_post(topic, tone, audience, length):
     Length: {length}
 
     REQUIREMENTS:
-    - Start with a strong hook 🔥
-    - Add relevant emojis naturally 😄🚀💡
-    - Make it human, storytelling style
-    - Keep it LinkedIn viral optimized
-    - End with 5-8 hashtags
+    - Strong hook 🔥
+    - Human storytelling
+    - Natural emojis 😄🚀💡
+    - Professional LinkedIn style
+    - 5–8 hashtags at end
     """
 
     headers = {
@@ -42,51 +42,84 @@ def generate_linkedin_post(topic, tone, audience, length):
     return res.text
 
 
-# 🎨 MODERN UI DESIGN
+# 🎨 MODERN UI (FIXED VISIBILITY + SPACING)
 css = """
 body {
-    background: linear-gradient(135deg, #f5f7fb, #e8f0ff);
+    background: linear-gradient(135deg, #eef2ff, #f8fafc);
+    color: #0f172a !important;
 }
 
+/* Container */
 .gradio-container {
     max-width: 900px !important;
     margin: auto !important;
+    padding: 25px !important;
 }
 
-textarea {
-    font-size: 16px !important;
+/* Headings */
+h1, h2, h3, p {
+    color: #0f172a !important;
+}
+
+/* Inputs */
+input, textarea, select {
+    border-radius: 10px !important;
+    border: 1px solid #cbd5e1 !important;
+    padding: 12px !important;
+    font-size: 15px !important;
     background: white !important;
-    border-radius: 12px !important;
-    border: 1px solid #dbeafe !important;
+    color: #0f172a !important;
 }
 
+/* Buttons */
 button {
-    background: #2563eb !important;
+    background: linear-gradient(90deg, #2563eb, #3b82f6) !important;
     color: white !important;
-    border-radius: 10px !important;
-    font-weight: bold !important;
+    border-radius: 12px !important;
+    padding: 12px 18px !important;
+    font-weight: 600 !important;
+    border: none !important;
+    transition: 0.2s ease-in-out;
+}
+
+button:hover {
+    transform: scale(1.02);
+    opacity: 0.95;
+}
+
+/* Output box */
+textarea {
+    min-height: 420px !important;
+    background: white !important;
+    border-radius: 14px !important;
+    border: 1px solid #e2e8f0 !important;
+    color: #0f172a !important;
+    padding: 15px !important;
+    font-size: 15px !important;
+    line-height: 1.6 !important;
 }
 """
 
+
 with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
 
     gr.Markdown("""
     # 🚀 AI LinkedIn Post Generator
-    ### Create viral LinkedIn posts with AI + emojis + storytelling ✨
+    ### Create viral LinkedIn posts with AI ✨
     """)
 
     with gr.Row():
-        topic = gr.Textbox(label="💡 Topic")
+        topic = gr.Textbox(label="💡 Topic", placeholder="e.g. AI in 2026")
         tone = gr.Dropdown(
-            ["Professional", "Motivational", "Casual", "Storytelling"],
+            ["Professional", "Motivational", "Storytelling", "Casual"],
             label="🎯 Tone"
         )
 
     with gr.Row():
-        audience = gr.Textbox(label="👥 Target Audience")
+        audience = gr.Textbox(label="👥 Audience", placeholder="e.g. Developers, Recruiters")
         length = gr.Dropdown(["Short", "Medium", "Long"], label="📏 Length")
 
-    btn = gr.Button("✨ Generate Viral Post")
+    btn = gr.Button("✨ Generate Post")
 
     output = gr.Textbox(
         label="📢 Generated LinkedIn Post",
@@ -94,7 +127,7 @@ with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
     )
 
     btn.click(
-        generate_linkedin_post,
+        generate_post,
         inputs=[topic, tone, audience, length],
         outputs=output
     )