1 // src/services/aiService.ts 
2 type MemePrompt = { 
3 template: string; // e.g., "Distracted Soul" 
4 context: string; // e.g., "When your code works on the first try" 
5 }; 
6
7 const generateMemeCaption = async ({ template, context }: MemePrompt) => { 
8 const prompt = ` 
9 Generate a sarcastic meme caption for the "${template}" template about "${context}". 
10 Rules: 
11 - Use Gen-Z slang (e.g., "rizz", "sigma") 
12 - Max 12 words 
13 - Add emojis related to the context 
14 `; 
15
16 const response = await openai.chat.completions.create({ 
17 model: "gpt-4-turbo", 
18 messages: [{ role: "user", content: prompt }], 
19 temperature: 0.9, // Higher = riskier jokes 
20 max_tokens: 50, 
21 }); 
22
23 return stripEmojis(response.choices[0].message.content); // No NSFW stuff allowed 
24 };

1 // src/components/MemeCanvas.tsx 
2 import { FabricJSCanvas, useFabricJSEditor } from "fabricjs-react"; 
3
4 export default function MemeCanvas() { 
5 const { editor, onReady } = useFabricJSEditor(); 
6 const [textColor, setTextColor] = useState("#FFFFFF"); 
7
8 const addTextLayer = (text: string) => { 
9 editor?.addText(text, { 
10 fill: textColor, 
11 fontFamily: "Impact", 
12 fontSize: 40, 
13 stroke: "#000000", 
14 strokeWidth: 2, 
15 shadow: "rgba(0,0,0,0.5) 2px 2px 2px", 
16 }); 
17 }; 
18
19 return ( 
20 <> 
21 <button onClick={() => addTextLayer("Why React, why?!")}>Add Default Text</button> 
22 <input type="color" onChange={(e) => setTextColor(e.target.value)} /> 
23 <FabricJSCanvas className="canvas" onReady={onReady} /> 
24 </> 
25 ); 
26 }

1 // src/app/api/generate-caption/route.ts 
2 import { Ratelimit } from "@upstash/ratelimit"; 
3 import { Redis } from "@upstash/redis"; 
4
5 const ratelimit = new Ratelimit({ 
6 redis: Redis.fromEnv(), 
7 limiter: Ratelimit.slidingWindow(15, "86400s"), // 15 requests/day per IP 
8 }); 
9
10 export async function POST(request: Request) { 
11 const ip = request.headers.get("x-forwarded-for") ?? "127.0.0.1"; 
12 const { success } = await ratelimit.limit(ip); 
13
14 if (!success) { 
15 return new Response("Slow down, meme lord! Daily limit reached.", { 
16 status: 429, 
17 }); 
18 } 
19
20 // Proceed with OpenAI call 
21 }

1 // src/services/aiService.ts 
2 const generateCustomMemeImage = async (prompt: string) => { 
3 const response = await openai.images.generate({ 
4 model: "dall-e-3", 
5 prompt: ` 
6 A meme template about "${prompt}". 
7 Style: Flat vector, bold outlines, no text. 
8 Background: Solid pastel color. 
9 `, 
10 size: "1024x1024", 
11 quality: "hd", 
12 }); 
13
14 return response.data[0].url; 
15 }

1 // src/stores/memeHistory.ts 
2 import { create } from "zustand"; 
3 import { persist } from "zustand/middleware"; 
4
5 type Meme = { 
6 id: string; 
7 imageUrl: string; 
8 caption: string; 
9 timestamp: number; 
10 }; 
11
12 interface MemeHistoryState { 
13 memes: Meme[]; 
14 saveMeme: (meme: Omit<Meme, "id" | "timestamp">) => void; 
15 } 
16
17 export const useMemeHistory = create<MemeHistoryState>()( 
18 persist( 
19 (set, get) => ({ 
20 memes: [], 
21 saveMeme: (meme) => { 
22 const newMeme = { 
23 ...meme, 
24 id: crypto.randomUUID(), 
25 timestamp: Date.now(), 
26 }; 
27 set({ memes: [newMeme, ...get().memes].slice(0, 100) }); 
28 }, 
29 }), 
30 { name: "meme-history" } 
31 ) 
32);