feat(frontend): adding project screenshot

backend/src/upload/upload.service.ts

@@ -99,7 +99,7 @@ export class UploadService {
         // Get the appropriate URL for the uploaded file
         const bucketUrl = this.getBucketUrl();
 
-        return { url: `${bucketUrl}/${key}`, key };
+        return { url: path.join(bucketUrl, key), key };
       } else {
         // Upload to local storage from buffer
         const directory = path.join(this.mediaDir, subdirectory);
@@ -135,8 +135,7 @@ export class UploadService {
 
         // Get the appropriate URL for the uploaded file
         const bucketUrl = this.getBucketUrl();
-
-        return { url: `${bucketUrl}/${key}`, key };
+        return { url: path.join(bucketUrl, key), key };
       } else {
         // Upload to local storage using stream
         const directory = path.join(this.mediaDir, subdirectory);

frontend/package.json

@@ -51,6 +51,7 @@
     "motion": "^12.4.7",
     "next": "^14.2.13",
     "next-themes": "^0.3.0",
+    "puppeteer": "^24.3.1",
     "react": "^18.3.1",
     "react-activity-calendar": "^2.7.8",
     "react-code-blocks": "^0.1.6",

frontend/src/app/api/runProject/route.ts

@@ -3,6 +3,10 @@ import { exec } from 'child_process';
 import * as path from 'path';
 import * as net from 'net';
 import { getProjectPath } from 'codefox-common';
+import puppetter from 'puppeteer';
+import { useMutation } from '@apollo/client/react/hooks/useMutation';
+import { toast } from 'sonner';
+import { UPDATE_PROJECT_PHOTO_URL } from '@/graphql/request';
 
 const runningContainers = new Map<
   string,
@@ -294,6 +298,7 @@ export async function GET(req: Request) {
 
   try {
     const { domain, containerId } = await buildAndRunDocker(projectPath);
+
     return NextResponse.json({
       message: 'Docker container started',
       domain,

frontend/src/app/api/screenshot/route.ts

@@ -0,0 +1,56 @@
+import { randomUUID } from 'crypto';
+import { NextResponse } from 'next/server';
+import puppeteer from 'puppeteer';
+
+export async function GET(req: Request) {
+  const { searchParams } = new URL(req.url);
+  const url = searchParams.get('url');
+
+  if (!url) {
+    return NextResponse.json(
+      { error: 'URL parameter is required' },
+      { status: 400 }
+    );
+  }
+
+  try {
+    const browser = await puppeteer.launch({
+      headless: true,
+    });
+    const page = await browser.newPage();
+
+    // Set viewport to a reasonable size
+    await page.setViewport({
+      width: 1280,
+      height: 720,
+    });
+
+    await page.goto(url, {
+      waitUntil: 'networkidle0',
+      timeout: 30000,
+    });
+
+    // Take screenshot
+    const screenshot = await page.screenshot({
+      path: `dsadas.png`,
+      type: 'png',
+      fullPage: true,
+    });
+
+    await browser.close();
+
+    // Return the screenshot as a PNG image
+    return new Response(screenshot, {
+      headers: {
+        'Content-Type': 'image/png',
+        'Cache-Control': 's-maxage=3600',
+      },
+    });
+  } catch (error: any) {
+    console.error('Screenshot error:', error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to capture screenshot' },
+      { status: 500 }
+    );
+  }
+}

frontend/src/components/chat/code-engine/project-context.tsx

@@ -14,6 +14,7 @@ import {
   GET_CHAT_DETAILS,
   GET_USER_PROJECTS,
   UPDATE_PROJECT_PUBLIC_STATUS,
+  UPDATE_PROJECT_PHOTO_URL,
 } from '@/graphql/request';
 import { Project } from '../project-modal';
 import { useRouter } from 'next/navigation';
@@ -40,12 +41,31 @@ export interface ProjectContextType {
   ) => Promise<void>;
   pollChatProject: (chatId: string) => Promise<Project | null>;
   isLoading: boolean;
+  getWebUrl: (
+    projectPath: string
+  ) => Promise<{ domain: string; containerId: string }>;
+  takeProjectScreenshot: (projectId: string, url: string) => Promise<void>;
 }
 
 export const ProjectContext = createContext<ProjectContextType | undefined>(
   undefined
 );
-
+const checkUrlStatus = async (url: string) => {
+  let status = 0;
+  while (status !== 200) {
+    try {
+      const res = await fetch(url, { method: 'HEAD' });
+      status = res.status;
+      if (status !== 200) {
+        console.log(`URL status: ${status}. Retrying...`);
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+    } catch (err) {
+      console.error('Error checking URL status:', err);
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+    }
+  }
+};
 export function ProjectProvider({ children }: { children: ReactNode }) {
   const router = useRouter();
 
@@ -173,6 +193,106 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
     }
   );
 
+  const [updateProjectPhotoMutation] = useMutation(UPDATE_PROJECT_PHOTO_URL, {
+    onCompleted: (data) => {
+      // Update projects list
+      setProjects((prev) =>
+        prev.map((project) =>
+          project.id === data.updateProjectPhoto.id
+            ? {
+                ...project,
+                photoUrl: data.updateProjectPhoto.photoUrl,
+              }
+            : project
+        )
+      );
+
+      // Update current project if it's the one being modified
+      if (curProject?.id === data.updateProjectPhoto.id) {
+        setCurProject((prev) =>
+          prev
+            ? {
+                ...prev,
+                photoUrl: data.updateProjectPhoto.photoUrl,
+              }
+            : prev
+        );
+      }
+    },
+    onError: (error) => {
+      toast.error(`Failed to update project photo: ${error.message}`);
+    },
+  });
+
+  const takeProjectScreenshot = useCallback(
+    async (projectId: string, url: string) => {
+      try {
+        await checkUrlStatus(url);
+
+        const screenshotResponse = await fetch(
+          `/api/screenshot?url=${encodeURIComponent(url)}`
+        );
+
+        if (!screenshotResponse.ok) {
+          throw new Error('Failed to capture screenshot');
+        }
+
+        const arrayBuffer = await screenshotResponse.arrayBuffer();
+        const blob = new Blob([arrayBuffer], { type: 'image/png' });
+
+        const file = new File([blob], 'screenshot.png', { type: 'image/png' });
+
+        await updateProjectPhotoMutation({
+          variables: {
+            input: {
+              projectId,
+              file,
+            },
+          },
+        });
+      } catch (error) {
+        console.error('Error:', error);
+      }
+    },
+    [updateProjectPhotoMutation]
+  );
+
+  const getWebUrl = useCallback(
+    async (projectPath: string) => {
+      try {
+        const response = await fetch(
+          `/api/runProject?projectPath=${encodeURIComponent(projectPath)}`,
+          {
+            method: 'GET',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          }
+        );
+
+        if (!response.ok) {
+          throw new Error('Failed to get web URL');
+        }
+
+        const data = await response.json();
+        const baseUrl = `http://${data.domain}`;
+        const project = projects.find((p) => p.projectPath === projectPath);
+        if (project) {
+          await takeProjectScreenshot(project.id, baseUrl);
+        }
+
+        return {
+          domain: data.domain,
+          containerId: data.containerId,
+        };
+      } catch (error) {
+        console.error('Error getting web URL:', error);
+        throw error;
+      }
+    },
+    [projects, updateProjectPhotoMutation]
+  );
+
   const [getChatDetail] = useLazyQuery(GET_CHAT_DETAILS, {
     fetchPolicy: 'network-only',
   });
@@ -300,8 +420,31 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
           const { data } = await getChatDetail({ variables: { chatId } });
 
           if (data?.getChatDetails?.project) {
-            chatProjectCache.current.set(chatId, data.getChatDetails.project);
-            return data.getChatDetails.project;
+            const project = data.getChatDetails.project;
+            chatProjectCache.current.set(chatId, project);
+
+            try {
+              // Get web URL and wait for it to be ready
+              const response = await fetch(
+                `/api/runProject?projectPath=${encodeURIComponent(project.projectPath)}`,
+                {
+                  method: 'GET',
+                  headers: {
+                    'Content-Type': 'application/json',
+                  },
+                }
+              );
+
+              if (response.ok) {
+                const data = await response.json();
+                const baseUrl = `http://${data.domain}`;
+                await takeProjectScreenshot(project.id, baseUrl);
+              }
+            } catch (error) {
+              console.error('Error capturing project screenshot:', error);
+            }
+
+            return project;
           }
         } catch (error) {
           console.error('Error polling chat:', error);
@@ -314,7 +457,7 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
       chatProjectCache.current.set(chatId, null);
       return null;
     },
-    [getChatDetail]
+    [getChatDetail, updateProjectPhotoMutation]
   );
 
   const contextValue = useMemo(
@@ -331,6 +474,8 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
       setProjectPublicStatus,
       pollChatProject,
       isLoading,
+      getWebUrl,
+      takeProjectScreenshot,
     }),
     [
       projects,
@@ -342,6 +487,7 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
       setProjectPublicStatus,
       pollChatProject,
       isLoading,
+      getWebUrl,
     ]
   );
 

frontend/src/components/chat/code-engine/web-view.tsx

@@ -11,9 +11,13 @@ import {
   ZoomIn,
   ZoomOut,
 } from 'lucide-react';
+import puppeteer from 'puppeteer';
 
 export default function WebPreview() {
-  const { curProject } = useContext(ProjectContext);
+  const { curProject, getWebUrl } = useContext(ProjectContext);
+  if (!curProject || !getWebUrl) {
+    throw new Error('ProjectContext not properly initialized');
+  }
   const [baseUrl, setBaseUrl] = useState('');
   const [displayPath, setDisplayPath] = useState('/');
   const [history, setHistory] = useState<string[]>(['/']);
@@ -26,7 +30,7 @@ export default function WebPreview() {
   const lastProjectPathRef = useRef<string | null>(null);
 
   useEffect(() => {
-    const getWebUrl = async () => {
+    const initWebUrl = async () => {
       if (!curProject) return;
       const projectPath = curProject.projectPath;
 
@@ -42,53 +46,23 @@ export default function WebPreview() {
       }
 
       try {
-        const response = await fetch(
-          `/api/runProject?projectPath=${encodeURIComponent(projectPath)}`,
-          {
-            method: 'GET',
-            headers: {
-              'Content-Type': 'application/json',
-            },
-          }
-        );
-        const json = await response.json();
-
-        await new Promise((resolve) => setTimeout(resolve, 100));
-
+        const { domain } = await getWebUrl(projectPath);
         containerRef.current = {
           projectPath,
-          domain: json.domain,
+          domain,
         };
 
-        const checkUrlStatus = async (url: string) => {
-          let status = 0;
-          while (status !== 200) {
-            try {
-              const res = await fetch(url, { method: 'HEAD' });
-              status = res.status;
-              if (status !== 200) {
-                console.log(`URL status: ${status}. Retrying...`);
-                await new Promise((resolve) => setTimeout(resolve, 1000));
-              }
-            } catch (err) {
-              console.error('Error checking URL status:', err);
-              await new Promise((resolve) => setTimeout(resolve, 1000));
-            }
-          }
-        };
-
-        const baseUrl = `http://${json.domain}`;
-        await checkUrlStatus(baseUrl);
-
+        const baseUrl = `http://${domain}`;
+        console.log('baseUrl:', baseUrl);
         setBaseUrl(baseUrl);
         setDisplayPath('/');
       } catch (error) {
-        console.error('fetching url error:', error);
+        console.error('Error getting web URL:', error);
       }
     };
 
-    getWebUrl();
-  }, [curProject]);
+    initWebUrl();
+  }, [curProject, getWebUrl]);
 
   useEffect(() => {
     if (iframeRef.current && baseUrl) {