fix: Configure server to serve the frontend application

dist-server/package.json

@@ -0,0 +1 @@
+{"type": "module"}

dist-server/server.mjs

@@ -0,0 +1,118 @@
+import express from 'express';
+import { GoogleGenAI } from '@google/genai';
+const app = express();
+const port = 3001;
+app.use(express.json({ limit: '50mb' }));
+// Helper to get the Gemini API key from environment variables
+function getApiKey() {
+    const apiKey = process.env.GEMINI_API_KEY;
+    if (!apiKey) {
+        throw new Error('GEMINI_API_KEY is not set in environment variables.');
+    }
+    return apiKey;
+}
+// Helper to build the edit prompt
+function buildEditPrompt(instruction, hasMask) {
+    const maskInstruction = hasMask
+        ? "\n\nIMPORTANT: Apply changes ONLY where the mask image shows white pixels (value 255). Leave all other areas completely unchanged. Respect the mask boundaries precisely and maintain seamless blending at the edges."
+        : "";
+    return `Edit this image according to the following instruction: ${instruction}
+
+Maintain the original image's lighting, perspective, and overall composition. Make the changes look natural and seamlessly integrated.${maskInstruction}
+
+Preserve image quality and ensure the edit looks professional and realistic.`;
+}
+// Helper to build the segmentation prompt
+function buildSegmentationPrompt(query) {
+    return `Analyze this image and create a segmentation mask for: ${query}
+
+Return a JSON object with this exact structure:
+{
+  "masks": [
+    {
+      "label": "description of the segmented object",
+      "box_2d": [x, y, width, height],
+      "mask": "base64-encoded binary mask image"
+    }
+  ]
+}
+
+Only segment the specific object or region requested. The mask should be a binary PNG where white pixels (255) indicate the selected region and black pixels (0) indicate the background.`;
+}
+app.post('/api/generate', async (req, res) => {
+    try {
+        const { prompt, referenceImages } = req.body;
+        const genAI = new GoogleGenAI({ apiKey: getApiKey() });
+        const contents = [{ text: prompt }];
+        if (referenceImages && referenceImages.length > 0) {
+            referenceImages.forEach((image) => {
+                contents.push({ inlineData: { mimeType: "image/png", data: image } });
+            });
+        }
+        const result = await genAI.models.generateContent({
+            model: "gemini-2.5-flash-image-preview",
+            contents,
+        });
+        const images = result.candidates[0].content.parts
+            .filter(part => part.inlineData)
+            .map(part => part.inlineData.data);
+        res.json({ images });
+    }
+    catch (error) {
+        console.error('Error in /api/generate:', error);
+        res.status(500).json({ error: error.message });
+    }
+});
+app.post('/api/edit', async (req, res) => {
+    try {
+        const { instruction, originalImage, referenceImages, maskImage } = req.body;
+        const genAI = new GoogleGenAI({ apiKey: getApiKey() });
+        const contents = [
+            { text: buildEditPrompt(instruction, !!maskImage) },
+            { inlineData: { mimeType: "image/png", data: originalImage } },
+        ];
+        if (referenceImages && referenceImages.length > 0) {
+            referenceImages.forEach((image) => {
+                contents.push({ inlineData: { mimeType: "image/png", data: image } });
+            });
+        }
+        if (maskImage) {
+            contents.push({ inlineData: { mimeType: "image/png", data: maskImage } });
+        }
+        const result = await genAI.models.generateContent({
+            model: "gemini-2.5-flash-image-preview",
+            contents,
+        });
+        const images = result.candidates[0].content.parts
+            .filter(part => part.inlineData)
+            .map(part => part.inlineData.data);
+        res.json({ images });
+    }
+    catch (error) {
+        console.error('Error in /api/edit:', error);
+        res.status(500).json({ error: error.message });
+    }
+});
+app.post('/api/segment', async (req, res) => {
+    try {
+        const { image, query } = req.body;
+        const genAI = new GoogleGenAI({ apiKey: getApiKey() });
+        const contents = [
+            { text: buildSegmentationPrompt(query) },
+            { inlineData: { mimeType: "image/png", data: image } },
+        ];
+        const result = await genAI.models.generateContent({
+            model: "gemini-2.5-flash-image-preview",
+            contents,
+        });
+        const responseText = result.candidates[0].content.parts[0].text;
+        res.json(JSON.parse(responseText));
+    }
+    catch (error) {
+        console.error('Error in /api/segment:', error);
+        res.status(500).json({ error: error.message });
+    }
+});
+app.listen(port, () => {
+    console.log(`Backend server listening on http://localhost:${port}`);
+});

server.mts

@@ -1,12 +1,21 @@
 import express from 'express';
 import { GoogleGenAI } from '@google/genai';
 import type { Request, Response } from 'express';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 const app = express();
-const port = 3001;
+const port = process.env.PORT || 3001;
 
 app.use(express.json({ limit: '50mb' }));
 
+// Serve static files from the React build directory
+const fePath = path.join(__dirname, '..', 'dist');
+app.use(express.static(fePath));
+
 // Helper to get the Gemini API key from environment variables
 function getApiKey(): string {
   const apiKey = process.env.GEMINI_API_KEY;
@@ -134,6 +143,11 @@ app.post('/api/segment', async (req: Request, res: Response) => {
   }
 });
 
+// All other routes should serve the React app
+app.get('*', (req, res) => {
+  res.sendFile(path.join(__dirname, '..', 'dist', 'index.html'));
+});
+
 app.listen(port, () => {
   console.log(`Backend server listening on http://localhost:${port}`);
 });