Update app.py

app.py

@@ -2,18 +2,15 @@ import asyncio
 import gradio as gr
 from browser_use import Agent
 from langchain_openai import ChatOpenAI
-from langchain_huggingface import HuggingFaceEndpoint
-from langchain_community.llms import HuggingFaceHub
 import re
 import os
 import subprocess
 import sys
 
-# Install Playwright on startup
+# Install Playwright on startup (for non-Docker environments)
 def install_playwright():
     try:
         subprocess.run([sys.executable, "-m", "playwright", "install", "chromium"], check=True)
-        subprocess.run([sys.executable, "-m", "playwright", "install-deps", "chromium"], check=True)
         print("✅ Playwright installed successfully")
     except Exception as e:
         print(f"⚠️ Playwright installation warning: {e}")
@@ -23,53 +20,12 @@ install_playwright()
 
 # Model mapping for HuggingFace Inference API
 MODELS = {
-    "Qwen 2.5 72B (Recommended)": "Qwen/Qwen2.5-72B-Instruct",
-    "Meta Llama 3.1 70B": "meta-llama/Meta-Llama-3.1-70B-Instruct",
-    "Llama 3.2 3B (Fast)": "meta-llama/Llama-3.2-3B-Instruct",
+    "Llama 3.2 3B (Fast & Reliable)": "meta-llama/Llama-3.2-3B-Instruct",
+    "Qwen 2.5 72B (Most Powerful)": "Qwen/Qwen2.5-72B-Instruct",
     "Mistral 7B": "mistralai/Mistral-7B-Instruct-v0.3",
-    "Phi-3 Mini": "microsoft/Phi-3-mini-4k-instruct",
+    "Phi-3.5 Mini": "microsoft/Phi-3.5-mini-instruct",
 }
 
-def get_llm(model_name: str, hf_token: str):
-    """Create LLM instance with proper configuration"""
-    try:
-        # Method 1: Try OpenAI-compatible endpoint
-        llm = ChatOpenAI(
-            base_url="https://api-inference.huggingface.co/v1/",
-            api_key=hf_token,
-            model=MODELS[model_name],
-            temperature=0.3,
-            max_tokens=2048,
-            timeout=120,
-        )
-        return llm, "openai"
-    except Exception as e:
-        print(f"OpenAI endpoint failed: {e}")
-        
-        try:
-            # Method 2: Try HuggingFace native endpoint
-            llm = HuggingFaceEndpoint(
-                repo_id=MODELS[model_name],
-                huggingfacehub_api_token=hf_token,
-                temperature=0.3,
-                max_new_tokens=2048,
-                timeout=120,
-            )
-            return llm, "hf_endpoint"
-        except Exception as e2:
-            print(f"HF Endpoint failed: {e2}")
-            
-            # Method 3: Fallback to HuggingFaceHub
-            llm = HuggingFaceHub(
-                repo_id=MODELS[model_name],
-                huggingfacehub_api_token=hf_token,
-                model_kwargs={
-                    "temperature": 0.3,
-                    "max_new_tokens": 2048,
-                }
-            )
-            return llm, "hf_hub"
-
 async def generate_meme_async(query: str, model_name: str):
     """Async function to generate meme"""
     
@@ -77,48 +33,62 @@ async def generate_meme_async(query: str, model_name: str):
     hf_token = os.environ.get("HF_TOKEN", "")
     
     if not hf_token:
-        return None, "❌ Error: HuggingFace token not found!\n\nPlease set HF_TOKEN in Space Settings → Repository Secrets.\nGet your token from: https://huggingface.co/settings/tokens"
+        yield None, "❌ Error: HuggingFace token not found!\n\n**Setup Required:**\n1. Go to Space Settings → Repository Secrets\n2. Add secret: Name=`HF_TOKEN`, Value=(your token)\n3. Get token from: https://huggingface.co/settings/tokens\n4. Restart the Space"
+        return
     
-    if not query:
-        return None, "❌ Error: Please enter a meme idea!"
+    if not query or len(query.strip()) < 5:
+        yield None, "❌ Error: Please enter a more detailed meme idea (at least 5 characters)!"
+        return
     
     try:
         yield None, f"🔄 Initializing {model_name}..."
         
-        # Get LLM with fallback methods
-        llm, method = get_llm(model_name, hf_token)
+        # Create LLM with OpenAI-compatible endpoint
+        llm = ChatOpenAI(
+            base_url="https://api-inference.huggingface.co/v1/",
+            api_key=hf_token,
+            model=MODELS[model_name],
+            temperature=0.3,
+            max_tokens=2048,
+            timeout=180,
+        )
         
-        yield None, f"🤖 Using {model_name} via {method}\n🌐 Browsing ImgFlip..."
+        yield None, f"🤖 Using {model_name}\n🌐 Starting browser automation..."
 
-        task_description = f"""You are a meme generator expert. Your task: Create a meme about "{query}"
+        task_description = f"""You are an expert meme creator. Create a funny meme about: "{query}"
 
-Follow these exact steps:
-1. Go to https://imgflip.com/memegenerator
-2. Browse popular meme templates or search for relevant template
-3. Click on a template that fits the theme of: "{query}"
-4. Add appropriate Top Text and Bottom Text related to: "{query}"
-5. Click "Generate Meme" button
-6. Wait for the meme to be created
-7. Copy the final meme URL
+**Your task:**
+1. Navigate to https://imgflip.com/memegenerator
+2. Look at the popular meme templates on the page
+3. Select a template that best fits the theme: "{query}"
+4. Click on the selected template
+5. In the text boxes, add:
+   - Top Text: Setup/first part related to "{query}"
+   - Bottom Text: Punchline/second part related to "{query}"
+6. Click "Generate Meme" button
+7. Wait for generation to complete
+8. Copy the final meme URL
 
-The meme should be funny and relatable to: {query}
+**Important:** 
+- Make the text funny and relevant to: {query}
+- Keep text concise (max 10 words per box)
+- Return ONLY the final meme URL
 
-Return ONLY the final imgflip meme URL (format: https://imgflip.com/i/xxxxx or https://i.imgflip.com/xxxxx.jpg)"""
+Expected URL format: https://imgflip.com/i/xxxxx or https://i.imgflip.com/xxxxx.jpg"""
 
-        yield None, "🎨 Generating meme... This may take 30-90 seconds..."
+        yield None, "🎨 AI is creating your meme...\n\n⏰ This takes 30-90 seconds\n📝 The AI is browsing ImgFlip, selecting template, and adding text..."
 
         agent = Agent(
             task=task_description,
             llm=llm,
-            max_actions_per_step=5,
-            max_failures=30,
+            max_actions_per_step=10,
             use_vision=False
         )
 
         history = await agent.run()
         final_result = history.final_result()
         
-        yield None, "🔍 Extracting meme URL..."
+        yield None, "🔍 Extracting meme URL from results..."
         
         # Extract meme URL with multiple patterns
         patterns = [
@@ -141,55 +111,56 @@ Return ONLY the final imgflip meme URL (format: https://imgflip.com/i/xxxxx or h
             # Download the image to display
             import requests
             try:
+                yield None, "📥 Downloading your meme..."
                 response = requests.get(meme_url, timeout=10)
                 if response.status_code == 200:
                     temp_path = f"/tmp/meme_{meme_id}.jpg"
                     with open(temp_path, 'wb') as f:
                         f.write(response.content)
-                    yield temp_path, f"✅ Success! Meme generated using {model_name}\n\nURL: {meme_url}"
+                    yield temp_path, f"✅ **Success!** Meme generated using {model_name}\n\n🔗 **Direct Link:** {meme_url}\n\n💡 **Tip:** Right-click image to save or share!"
                 else:
-                    yield None, f"✅ Meme created but couldn't download.\n\nDirect link: {meme_url}"
-            except:
-                yield None, f"✅ Meme URL: {meme_url}\n\n(Right-click to open)"
+                    yield None, f"✅ Meme created successfully!\n\n🔗 **Direct Link:** {meme_url}\n\n(Click link to view)"
+            except Exception as download_error:
+                yield None, f"✅ Meme created!\n\n🔗 **Direct Link:** {meme_url}\n\n(Right-click to open in new tab)\n\nDownload error: {str(download_error)}"
         else:
-            yield None, f"⚠️ Meme generation completed but URL not found.\n\nAgent output:\n{final_result[:500]}\n\nTry again or use a different model."
+            yield None, f"⚠️ Meme generation completed but URL not found in response.\n\n**Agent Output:**\n{final_result[:500]}...\n\n**Suggestions:**\n1. Try again with a simpler meme idea\n2. Use a different model\n3. Wait a moment and retry"
         
     except Exception as e:
         error_msg = str(e)
         
-        if "rate limit" in error_msg.lower():
-            yield None, "❌ Rate limit exceeded.\n\n⏰ Please wait 60 seconds and try again.\n\nTip: HuggingFace free tier has rate limits."
+        if "rate limit" in error_msg.lower() or "429" in error_msg:
+            yield None, "❌ **Rate Limit Exceeded**\n\n⏰ HuggingFace free tier limit reached.\n\n**Solutions:**\n1. Wait 60 seconds and try again\n2. Try a smaller model (Llama 3.2 3B)\n3. Use your own HF Pro account for higher limits"
         elif "token" in error_msg.lower() or "unauthorized" in error_msg.lower() or "401" in error_msg:
-            yield None, "❌ Authentication failed.\n\nPlease check:\n1. HF_TOKEN is set in Space Settings → Repository Secrets\n2. Token has 'read' permission\n3. Token is valid\n\nGet token: https://huggingface.co/settings/tokens"
+            yield None, "❌ **Authentication Failed**\n\n**Checklist:**\n1. Is HF_TOKEN set in Space Settings → Repository Secrets?\n2. Does your token have 'read' permission?\n3. Is the token still valid?\n\n🔗 Get/check token: https://huggingface.co/settings/tokens"
         elif "model" in error_msg.lower() or "404" in error_msg:
-            yield None, f"❌ Model '{model_name}' not accessible.\n\nTry:\n1. Use 'Llama 3.2 3B (Fast)' - most reliable\n2. Wait a moment and retry\n3. Check model status on HuggingFace"
+            yield None, f"❌ **Model Not Accessible**\n\nThe selected model '{model_name}' is not available.\n\n**Try:**\n1. Switch to 'Llama 3.2 3B (Fast & Reliable)'\n2. Wait a moment for model to warm up\n3. Check model status on HuggingFace"
         elif "timeout" in error_msg.lower():
-            yield None, "❌ Request timeout.\n\nThe model took too long to respond.\n\nTry:\n1. Use a faster model (Llama 3.2 3B)\n2. Simplify your meme idea\n3. Try again in a moment"
+            yield None, "❌ **Request Timeout**\n\nThe AI took too long to respond (>180s).\n\n**Solutions:**\n1. Try 'Llama 3.2 3B (Fast & Reliable)' - it's faster\n2. Simplify your meme description\n3. Wait 30 seconds and try again"
         else:
-            yield None, f"❌ Error: {error_msg[:300]}\n\nTroubleshooting:\n1. Check HF_TOKEN in Space secrets\n2. Try 'Llama 3.2 3B (Fast)' model\n3. Wait 30 seconds and retry\n4. Simplify your meme description"
+            yield None, f"❌ **Error Occurred**\n\n```\n{error_msg[:400]}\n```\n\n**Troubleshooting Steps:**\n1. Verify HF_TOKEN is set correctly in Space secrets\n2. Try 'Llama 3.2 3B (Fast & Reliable)' model\n3. Wait 30 seconds between attempts\n4. Simplify your meme description\n5. Check Space logs for more details"
 
-def generate_meme(query: str, model_name: str):
-    """Wrapper function for Gradio with streaming"""
-    generator = generate_meme_async(query, model_name)
-    
-    # Create event loop if needed
+def generate_meme_wrapper(query: str, model_name: str):
+    """Synchronous wrapper for Gradio"""
+    # Create or get event loop
     try:
         loop = asyncio.get_event_loop()
+        if loop.is_closed():
+            raise RuntimeError("Event loop is closed")
     except RuntimeError:
         loop = asyncio.new_event_loop()
         asyncio.set_event_loop(loop)
     
-    # Run async generator
-    async def run():
-        async for image, status in generator:
-            yield image, status
+    # Run the async generator
+    async def run_generator():
+        async for result in generate_meme_async(query, model_name):
+            yield result
     
-    # Execute and yield results
-    for result in loop.run_until_complete(collect_results(run())):
+    # Execute generator
+    for result in loop.run_until_complete(async_to_sync(run_generator())):
         yield result
 
-async def collect_results(async_gen):
-    """Collect async generator results"""
+async def async_to_sync(async_gen):
+    """Convert async generator to sync"""
     results = []
     async for item in async_gen:
         results.append(item)
@@ -197,24 +168,50 @@ async def collect_results(async_gen):
 
 # Example meme ideas
 examples = [
-    ["When you finally fix the bug at 3 AM", "Llama 3.2 3B (Fast)"],
-    ["Junior dev vs Senior dev looking at the same error", "Llama 3.2 3B (Fast)"],
-    ["My code in development vs in production", "Qwen 2.5 72B (Recommended)"],
-    ["Trying to explain AI to my parents", "Llama 3.2 3B (Fast)"],
-    ["Me before coffee vs after coffee", "Mistral 7B"],
-    ["Client: Can you add one small feature? The feature:", "Llama 3.2 3B (Fast)"],
+    ["When you finally fix the bug at 3 AM", "Llama 3.2 3B (Fast & Reliable)"],
+    ["Junior dev vs Senior dev looking at the same error", "Llama 3.2 3B (Fast & Reliable)"],
+    ["My code in development vs in production", "Llama 3.2 3B (Fast & Reliable)"],
+    ["Trying to explain AI to my parents", "Mistral 7B"],
+    ["Me before coffee vs after coffee", "Llama 3.2 3B (Fast & Reliable)"],
+    ["Client: Can you add one small feature? The feature:", "Qwen 2.5 72B (Most Powerful)"],
+    ["When the code works on first try", "Llama 3.2 3B (Fast & Reliable)"],
+    ["Developer debugging at 2 AM", "Llama 3.2 3B (Fast & Reliable)"],
 ]
 
+# Custom CSS
+custom_css = """
+.gradio-container {
+    max-width: 1200px !important;
+}
+.header-box {
+    text-align: center;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 30px;
+    border-radius: 15px;
+    color: white;
+    margin-bottom: 20px;
+}
+.status-box {
+    background: #f0f7ff;
+    padding: 15px;
+    border-radius: 10px;
+    border-left: 4px solid #667eea;
+}
+"""
+
 # Create Gradio interface
-with gr.Blocks(theme=gr.themes.Soft(), title="🥸 AI Meme Generator") as demo:
+with gr.Blocks(css=custom_css, theme=gr.themes.Soft(), title="🥸 AI Meme Generator") as demo:
     
-    gr.Markdown("""
-    # 🥸 AI Meme Generator
-    ### Powered by Free HuggingFace Models + Browser Automation 🤗
-    
-    This AI agent automatically browses ImgFlip and creates custom memes based on your description!
+    gr.HTML("""
+    <div class="header-box">
+        <h1>🥸 AI Meme Generator</h1>
+        <h3>Powered by Free HuggingFace Models + Browser Automation 🤗</h3>
+        <p>This AI agent automatically browses ImgFlip and creates custom memes!</p>
+    </div>
+    """)
     
-    ⚠️ **First time setup:** Add your HuggingFace token to Space Settings → Repository Secrets → Name: `HF_TOKEN`
+    gr.Markdown("""
+    ⚠️ **First Time Setup:** Add `HF_TOKEN` to Space Settings → Repository Secrets ([Get Token](https://huggingface.co/settings/tokens))
     """)
     
     with gr.Row():
@@ -223,14 +220,14 @@ with gr.Blocks(theme=gr.themes.Soft(), title="🥸 AI Meme Generator") as demo:
                 label="🎨 Describe Your Meme Idea",
                 placeholder="Example: When the client says 'just one small change'...",
                 lines=3,
-                info="Be specific! Describe the situation, emotion, or comparison you want to meme-ify"
+                info="Be specific! Describe the situation, emotion, or comparison"
             )
             
             model_dropdown = gr.Dropdown(
                 choices=list(MODELS.keys()),
-                value="Llama 3.2 3B (Fast)",
+                value="Llama 3.2 3B (Fast & Reliable)",
                 label="🤖 Select AI Model (All Free!)",
-                info="Llama 3.2 3B is fastest and most reliable for free tier"
+                info="Llama 3.2 3B recommended for speed and reliability"
             )
             
             with gr.Row():
@@ -239,81 +236,89 @@ with gr.Blocks(theme=gr.themes.Soft(), title="🥸 AI Meme Generator") as demo:
         
         with gr.Column(scale=1):
             gr.Markdown("""
-            ### 📖 Quick Setup Guide
+            ### 📖 Quick Setup
             
-            **First Time Setup:**
-            1. Get FREE token: [HuggingFace Tokens](https://huggingface.co/settings/tokens)
-            2. Copy the token (starts with `hf_...`)
-            3. Go to this Space's **Settings** → **Repository Secrets**
-            4. Add secret: Name=`HF_TOKEN`, Value=(your token)
-            5. Restart the Space
+            **1. Get HuggingFace Token:**
+            - Go to [HF Tokens](https://huggingface.co/settings/tokens)
+            - Click "New token"
+            - Copy the token
             
-            **Usage Tips:**
-            ✅ Use "Llama 3.2 3B (Fast)" for best free tier results
-            ✅ Be specific: "Boss walks in while I'm on YouTube"
-            ✅ Include emotions: happy, shocked, confused, etc.
-            ✅ Generation takes 30-90 seconds - be patient!
+            **2. Add to Space:**
+            - Settings → Repository Secrets
+            - Name: `HF_TOKEN`
+            - Value: (paste token)
+            - Save & Restart
             
-            **Popular Formats:**
-            - Before/After situations
-            - Expectation vs Reality
-            - Two-panel comparisons
-            - Relatable struggles
+            **3. Generate Memes!**
+            - Enter your idea
+            - Click generate
+            - Wait 30-90 seconds
             
-            ⏰ **Please wait 30-90 seconds per generation**
+            **💡 Pro Tips:**
+            - Use "Llama 3.2 3B" for best results
+            - Be specific and descriptive
+            - Include emotions/scenarios
+            - Be patient (browser automation takes time!)
             """)
     
     with gr.Row():
-        output_image = gr.Image(label="🖼️ Generated Meme", type="filepath", height=400)
+        output_image = gr.Image(label="🖼️ Your Generated Meme", type="filepath", height=400)
     
-    status_output = gr.Textbox(label="📊 Status & Progress", lines=4, max_lines=8)
+    status_output = gr.Textbox(label="📊 Status & Progress", lines=6, max_lines=10)
     
-    gr.Markdown("""
-    ### 💡 Example Meme Ideas (Click to try!)
-    """)
+    gr.Markdown("### 💡 Example Ideas (Click to Try!)")
     
     gr.Examples(
         examples=examples,
         inputs=[query_input, model_dropdown],
         label="Click any example to auto-fill",
-        examples_per_page=6
+        examples_per_page=8
     )
     
     gr.Markdown("""
     ---
     
-    ### 🔧 Troubleshooting
+    ### 🔧 Troubleshooting Guide
+    
+    | Problem | Solution |
+    |---------|----------|
+    | ❌ Token not found | Add `HF_TOKEN` in Space Settings → Repository Secrets |
+    | ❌ Rate limit error | Wait 60 seconds (free tier limits apply) |
+    | ❌ Model not working | Switch to "Llama 3.2 3B (Fast & Reliable)" |
+    | ⏰ Taking too long | Normal! Browser automation needs 30-90 seconds |
+    | 🖼️ No image shown | Check the direct URL in status message |
+    | 🔴 Build failed | Make sure Dockerfile is present in repository |
+    
+    ### 🚀 How It Works
     
-    | Issue | Solution |
-    |-------|----------|
-    | ❌ Token not found | Add `HF_TOKEN` to Space Settings → Repository Secrets |
-    | ❌ Rate limit | Wait 60 seconds (free tier limits) |
-    | ❌ Model error | Switch to "Llama 3.2 3B (Fast)" |
-    | ⏰ Slow generation | Normal! Browser automation takes 30-90 sec |
-    | 🖼️ No image | Try again or check the direct URL in status |
+    1. **You describe** what meme you want
+    2. **AI browses** ImgFlip automatically
+    3. **Selects template** that fits your idea
+    4. **Adds funny text** based on your description
+    5. **Generates & downloads** your custom meme!
     
     ---
     
     <div style='text-align: center; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 10px; color: white;'>
         <p><strong>🤗 100% Free & Open Source</strong></p>
-        <p>Powered by: HuggingFace Inference API • Browser-Use • LangChain • Gradio</p>
-        <p>⭐ Star on GitHub if you like this project!</p>
-        <p><small>⚠️ Free tier has rate limits. Please be patient between generations.</small></p>
+        <p>Tech Stack: HuggingFace • Browser-Use • LangChain • Gradio • Playwright</p>
+        <p>⭐ Star this Space if you like it!</p>
+        <p><small>Free tier has rate limits - please be patient between generations</small></p>
     </div>
     """)
     
-    # Connect button to function
+    # Event handler
     generate_btn.click(
-        fn=generate_meme,
+        fn=generate_meme_wrapper,
         inputs=[query_input, model_dropdown],
-        outputs=[output_image, status_output]
+        outputs=[output_image, status_output],
+        show_progress=True
     )
 
-# Launch the app
+# Launch
 if __name__ == "__main__":
     demo.launch(
         server_name="0.0.0.0",
         server_port=7860,
-        share=False,
         show_error=True
     )