\n {/* Header */}\n

\n 🎭 Funny Meme Generator 🎭\n

\n Create hilarious memes with AI-powered humor!\n

\n\n

\n {/* Left Panel - Controls */}\n

\n {/* Template Selection */}\n

📸 Choose Template

\n \n

\n\n {/* Text Generation */}\n

🤖 Generate Text

\n \n {/* Style Selection */}\n

\n Humor Style:\n setGenerationStyle(e.target.value as any)}\n className=\"w-full p-3 rounded-lg text-input\"\n >\n \n \n \n \n \n

\n\n

\n \n {isGenerating ? (\n \n

\n Generating...\n \n ) : (\n \"🎲 Generate AI Text\"\n )}\n \n \n 🗑️\n \n

\n\n {/* Manual Text Input */}\n

✏️ Custom Text

\n \n

\n Top Text:\n setTopText(e.target.value)}\n placeholder=\"Enter top text...\"\n className=\"w-full p-3 rounded-lg text-input\"\n maxLength={100}\n />\n

\n \n

\n Bottom Text:\n setBottomText(e.target.value)}\n placeholder=\"Enter bottom text...\"\n className=\"w-full p-3 rounded-lg text-input\"\n maxLength={100}\n />\n

\n\n {/* Right Panel - Meme Preview */}\n

🖼️ Your Meme

\n \n {selectedTemplate ? (\n \n ) : (\n

Select a template to start

\n )}\n

\n\n {/* Tips */}\n

💡 Pro Tips

• Keep text short and punchy for maximum impact
• Use current trends and relatable situations
• The setup (top) and punchline (bottom) should work together
• Try different humor styles for variety
• Download and share your creations!

\n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/Yvnn24/App/code/frontend/components/App.tsx","extension","actionData","errors"]