Add a feature to generate and apply corner ribbons to images

Introduce a new API endpoint and service for generating triangular ribbon overlays with text using Cloudinary, and integrate this into the image editor.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/VEZwUqa

server/routes.ts

@@ -1151,6 +1151,26 @@ export async function registerRoutes(app: Express): Promise<Server> {
     }
   });
 
+  // Generate ribbon overlay
+  app.post("/api/media/generate-ribbon", requireAuth, async (req, res) => {
+    const { text, color, position } = req.body;
+    
+    if (!text || !color || !position) {
+      return res.status(400).json({ error: "Text, color and position are required" });
+    }
+    
+    try {
+      const { RibbonGenerator } = await import("./services/ribbonGenerator");
+      const generator = RibbonGenerator.getInstance();
+      
+      const publicId = await generator.generateTriangularRibbon(text, color, position);
+      res.json({ publicId });
+    } catch (error) {
+      console.error("Error generating ribbon:", error);
+      res.status(500).json({ error: "Failed to generate ribbon overlay" });
+    }
+  });
+
   const httpServer = createServer(app);
 
   return httpServer;