Merge pull request #153 from MeetDOD/issue-customize-142

feat: Added customization of component by user in style share successfully Issue customize 142

backend/.env.example

@@ -3,4 +3,5 @@ JWT_SECRET="secret"
 PORT=3001
 # EMAIL_USER=user_email_id
 # EMAIL_PASS=16char_app_password
-# SEND_EMAIL=true # Uncomment this to turn on email functionality on development
+# SEND_EMAIL=true # Uncomment this to turn on email functionality on development
+# API_KEY="your google gemini api key"

backend/package.json

@@ -13,12 +13,14 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@google/generative-ai": "^0.12.0",
     "@prisma/client": "^5.14.0",
     "@types/bcrypt": "^5.0.2",
     "@types/cors": "^2.8.17",
     "@types/express": "^4.17.21",
     "@types/jsonwebtoken": "^9.0.6",
     "@types/nodemailer": "^6.4.15",
+    "axios": "^1.7.2",
     "bcrypt": "^5.1.1",
     "body-parser": "^1.20.2",
     "cors": "^2.8.5",

backend/src/routes/post/controller.ts

@@ -2,6 +2,8 @@ import { Request, Response } from "express";
 import { UserAuthRequest } from "../../helpers/types";
 import { createPostSchema } from "./zodSchema";
 import prisma from "../../db";
+import axios from "axios";
+import {GoogleGenerativeAI} from '@google/generative-ai'
 
 export const createPostController = async (
   req: UserAuthRequest,
@@ -622,4 +624,54 @@ export const deletePostController = async (req: UserAuthRequest, res: Response)
     console.log(error)
     res.status(500).json({ error: { message: "An unexpected error occurred" } });
   }
+};
+
+const getCodeSnippetById = async (id: string) => {
+  const post = await prisma.post.findUnique({
+    where: { id },
+    select: { codeSnippet: true },
+  });
+  return post?.codeSnippet || "";
+};
+
+export const aiCustomization = async (req: UserAuthRequest, res: Response) => {
+  try {
+    const { id, query } = req.body;
+
+    if (!id || !query) {
+      console.error("ID and query are required", { id, query });
+      return res.status(400).json({ error: "ID and query are required" });
+    }
+
+    const originalCodeSnippet = await getCodeSnippetById(id);
+
+    if (!originalCodeSnippet) {
+      console.error("Code snippet not found for id:", id);
+      return res.status(404).json({ error: "Code snippet not found" });
+    }
+
+    let key = process.env.API_KEY
+
+    if (!key) {
+      throw new Error("API_KEY is not defined in the environment variables.");
+    }
+
+    const genAI = new GoogleGenerativeAI(key);
+
+    const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash"});
+
+    const prompt = `This is my tailwind css code: ${originalCodeSnippet}\n\n I want you to modify it and put ${query}\n\n and also write the code in vs code format like one below other tag and just give me code don't explain it.`
+
+    const result = await model.generateContent(prompt);
+
+    const response = await result.response;
+
+    const text = response.text();
+
+    res.json({ customCode: text });
+
+  } catch (error) {
+    console.error('Failed to customize the code', error);
+    res.status(500).json({ error: "Failed to customize the code" });
+  }
 };

backend/src/routes/post/route.ts

@@ -1,7 +1,7 @@
 
 import { Router } from "express";
 import authMiddleware from "../../middleware/auth"
-import { createCommentController, createPostController, deletePostController, dislikePostController, favoritePostController, getCommentsController, getFavoritePostsController, getLeaderboardController, getPostController, getPostsWithPagination, likePostController, unfavoritePostController } from "./controller";
+import { aiCustomization, createCommentController, createPostController, deletePostController, dislikePostController, favoritePostController, getCommentsController, getFavoritePostsController, getLeaderboardController, getPostController, getPostsWithPagination, likePostController, unfavoritePostController } from "./controller";
 
 const postRouter = Router();
 
@@ -31,4 +31,6 @@ postRouter.get('/all/leaderboard', getLeaderboardController);
 
 postRouter.delete('/delete/:id', authMiddleware, deletePostController); 
 
+postRouter.post('/customize',aiCustomization)
+
 export default postRouter;

frontend/src/App.tsx

@@ -22,6 +22,7 @@ import { Toaster } from 'react-hot-toast';
 import PageNotFound from "./pages/PageNotFound";
 import Favorite from "./pages/Favorite";
 import LeaderBoard from "./pages/LeaderBoard";
+import CustomizeWithAi from "./pages/CustomizeWithAi";
 import ScrollToTopWhenRouteChanges from "./components/ScrollToTopWhenRouteChanges";
 // import axios from "axios";
 // axios.defaults.baseURL = "http://localhost:3001/";
@@ -80,6 +81,14 @@ function App() {
                   </AuthenticatedRoute>
                 }
               />
+              <Route
+                path="/app/customize-with-ai/:id"
+                element={
+                  <AuthenticatedRoute>
+                    <CustomizeWithAi />
+                  </AuthenticatedRoute>
+                }
+              />
               <Route
                path="/app/leaderboard"
                 element={