feat(api): move Gemini API calls to backend server

- Replace client-side Gemini API calls with backend endpoints
- Add Express server to handle API requests securely
- Remove API key exposure from client-side code
- Maintain same client interface for backward compatibility

Dockerfile

@@ -11,23 +11,17 @@ RUN npm install
 # Copy the rest of the application source code
 COPY . .
 
-# Hugging Face automatically provides secrets as build arguments.
-# We need to ensure Vite can access it during the build.
-# The ARG instruction makes the secret available during the build.
-ARG VITE_GEMINI_API_KEY
-
-# This is the key part: we must explicitly set it as an environment variable
-# so Vite's build process can replace import.meta.env.VITE_GEMINI_API_KEY
-ENV VITE_GEMINI_API_KEY=${VITE_GEMINI_API_KEY}
 
 # Build the application
 RUN npm run build
 
-# Install 'serve' to run the built application
-RUN npm install --production serve
+# Expect GEMINI_API_KEY to be provided at runtime by Hugging Face Spaces (Settings -> Secrets)
+
+# Install only production dependencies needed to run the server
+RUN npm install --production express
 
 # Expose the port that Hugging Face Spaces uses by default
 EXPOSE 7860
 
-# Command to start the server, serving the 'dist' folder
-CMD ["npx", "serve", "-s", "dist", "-l", "7860"]
+# Start Node server that serves static files and proxies API calls
+CMD ["node", "server.js"]

server.js

@@ -0,0 +1,211 @@
+const express = require('express');
+const { GoogleGenerativeAI, SchemaType } = require('@google/generative-ai');
+const path = require('path');
+
+const app = express();
+const port = process.env.PORT || 7860;
+
+// Middleware
+app.use(express.json({ limit: '50mb' }));
+app.use(express.static(path.join(__dirname, 'dist')));
+
+// Initialize Gemini with server-side env var (no VITE_ prefix)
+const GEMINI_API_KEY = process.env.GEMINI_API_KEY;
+const genAI = GEMINI_API_KEY ? new GoogleGenerativeAI(GEMINI_API_KEY) : null;
+
+// Define the same schema as your client code
+const fileSchema = {
+  type: SchemaType.OBJECT,
+  properties: {
+    files: {
+      type: SchemaType.ARRAY,
+      items: {
+        type: SchemaType.OBJECT,
+        properties: {
+          fileName: { type: SchemaType.STRING },
+          code: { type: SchemaType.STRING }
+        },
+        required: ["fileName", "code"]
+      }
+    }
+  },
+  required: ["files"]
+};
+
+// Helper function to format HTML (same as client)
+const { html: formatHtml } = require('js-beautify');
+
+const formatCode = (code) => {
+  try {
+    return formatHtml(code, {
+      indent_size: 2,
+      indent_char: ' ',
+      max_preserve_newlines: 2,
+      preserve_newlines: true,
+      indent_inner_html: true,
+      brace_style: 'collapse',
+      indent_scripts: 'normal',
+      wrap_line_length: 120,
+      unformatted: ['code', 'pre', 'em', 'strong', 'span'],
+      content_unformatted: ['pre', 'code'],
+    });
+  } catch (error) {
+    console.error('Error formatting code:', error);
+    return code;
+  }
+};
+
+const transformApiResponse = (response) => {
+  const filesRecord = {};
+  if (response.files && Array.isArray(response.files)) {
+    for (const file of response.files) {
+      if (file.fileName && file.code) {
+        filesRecord[file.fileName] = formatCode(file.code);
+      }
+    }
+  }
+  return filesRecord;
+};
+
+// API endpoint for generating code
+app.post('/api/generate-code', async (req, res) => {
+  if (!GEMINI_API_KEY) {
+    return res.status(500).json({
+      error: "Gemini API key is not configured. Please set GEMINI_API_KEY in your environment variables."
+    });
+  }
+
+  try {
+    const { messages } = req.body;
+    
+    const model = genAI.getGenerativeModel({
+      model: "gemini-2.5-flash",
+      generationConfig: {
+        responseMimeType: "application/json",
+        responseSchema: fileSchema
+      }
+    });
+
+    const result = await model.generateContent({
+      contents: [{
+        role: "user",
+        parts: [{
+          text: `You are an expert frontend developer. Your task is to generate complete HTML pages based on user requests.
+
+              **YOUR PRIMARY JOB:**
+              - Understand the user's intent to create a website with one or more pages.
+              - Generate complete, valid HTML files that fulfill this intent.
+              - Your output will be structured as an array of objects, where each object has a "fileName" and a "code" property.
+
+              **CRITICAL RULES ON FILE CREATION:**
+              - **ONLY create full HTML page files** (e.g., \`index.html\`, \`about.html\`).
+              - **DO NOT create separate files for components** like navbars or footers. These must be part of their respective HTML page files.
+              - **DO NOT create separate .css or .js files.** All styling (via Tailwind classes) and scripts (via \`<script>\` tags for Alpine.js) must be self-contained within each HTML file.
+
+              **TECHNOLOGY CONSTRAINTS:**
+              - Use Tailwind CSS via CDN: \`<script src="https://cdn.tailwindcss.com"></script>\` in the <head>.
+              - Use Alpine.js for interactivity via CDN: \`<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>\` in the <head>.
+              - Ensure links between pages use relative paths (e.g., \`<a href="./about.html">\`).
+
+              **RULES:**
+              - Each HTML file must be a complete document (DOCTYPE, html, head, body).
+              - Ensure all pages are responsive and visually consistent.
+              
+              User request: ${messages[messages.length - 1].content}`
+        }]
+      }],
+      safetySettings: [
+        { category: "HARM_CATEGORY_HARASSMENT", threshold: "BLOCK_NONE" },
+        { category: "HARM_CATEGORY_HATE_SPEECH", threshold: "BLOCK_NONE" },
+        { category: "HARM_CATEGORY_SEXUALLY_EXPLICIT", threshold: "BLOCK_NONE" },
+        { category: "HARM_CATEGORY_DANGEROUS_CONTENT", threshold: "BLOCK_NONE" }
+      ]
+    });
+
+    const response = await result.response;
+    const parsedResponse = JSON.parse(response.text());
+    
+    res.json(transformApiResponse(parsedResponse));
+  } catch (error) {
+    console.error("Error in generateCode:", error);
+    res.status(500).json({ error: error.message });
+  }
+});
+
+// API endpoint for modifying code
+app.post('/api/modify-code', async (req, res) => {
+  if (!GEMINI_API_KEY) {
+    return res.status(500).json({
+      error: "Gemini API key is not configured. Please set GEMINI_API_KEY in your environment variables."
+    });
+  }
+
+  try {
+    const { currentFiles, modificationRequest } = req.body;
+    
+    const model = genAI.getGenerativeModel({
+      model: "gemini-2.5-flash",
+      generationConfig: {
+        responseMimeType: "application/json",
+        responseSchema: fileSchema
+      }
+    });
+
+    const result = await model.generateContent({
+      contents: [{
+        role: "user",
+        parts: [{
+          text: `You are an expert frontend developer working on a website modification task.
+
+              **YOUR PRIMARY JOB:**
+              - Understand the user's intent to modify their existing website.
+              - Make precise changes to fulfill that intent, which may involve editing multiple files and/or creating new files.
+              - Your output will be structured as an array of objects, where each object has a "fileName" and a "code" property for each file that was changed or created.
+
+              **CRITICAL SAFETY RULE:**
+              Your primary goal is to prevent data loss. When a user asks to move content to a new file or create a new file, you MUST provide the content for all new files in your response. It is unacceptable to only show the file where content was removed. Your response MUST be a complete fulfillment of the user's request, including both the modified original files and the newly created files.
+
+              **CRITICAL RULES ON FILE CREATION & MODIFICATION:**
+              - **ONLY create or modify full HTML page files** (e.g., \`index.html\`, \`about.html\`).
+              - **DO NOT create separate files for components** like navbars or footers. Integrate them into the main HTML pages.
+              - **DO NOT create separate .css or .js files.** All styling and scripts must be self-contained within each HTML file.
+              - If you create a new page, you MUST also modify existing pages to add navigation links to it.
+              
+              **RULES:**
+              - If a request involves changes that logically affect multiple files (e.g., updating a navigation menu), you MUST include ALL of those files in your response.
+              
+              **Current Project Files:**
+              ${JSON.stringify(currentFiles, null, 2)}
+              
+              **Modification Request:** ${modificationRequest}`
+        }]
+      }],
+      safetySettings: [
+        { category: "HARM_CATEGORY_HARASSMENT", threshold: "BLOCK_NONE" },
+        { category: "HARM_CATEGORY_HATE_SPEECH", threshold: "BLOCK_NONE" },
+        { category: "HARM_CATEGORY_SEXUALLY_EXPLICIT", threshold: "BLOCK_NONE" },
+        { category: "HARM_CATEGORY_DANGEROUS_CONTENT", threshold: "BLOCK_NONE" }
+      ]
+    });
+
+    const response = await result.response;
+    const parsedResponse = JSON.parse(response.text());
+
+    res.json(transformApiResponse(parsedResponse));
+  } catch (error) {
+    console.error("Error in modifyCode:", error);
+    res.status(500).json({ error: error.message });
+  }
+});
+
+// Serve React app for all other routes
+app.get('*', (req, res) => {
+  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
+});
+
+app.listen(port, '0.0.0.0', () => {
+  console.log(`Server running on port ${port}`);
+  if (!GEMINI_API_KEY) {
+    console.warn('Warning: GEMINI_API_KEY environment variable is not set');
+  }
+});

src/services/gemini.ts

@@ -1,27 +1,8 @@
-import { GoogleGenerativeAI, SchemaType } from "@google/generative-ai";
-import { html as formatHtml } from "js-beautify";
-
-const GEMINI_API_KEY = import.meta.env.VITE_GEMINI_API_KEY;
-const genAI = new GoogleGenerativeAI(GEMINI_API_KEY || '');
+// Removed direct use of @google/generative-ai on the client
+// and switched to calling backend endpoints that securely use the API key at runtime.
 
-// Define a valid schema that the Google API understands: an array of file objects.
-const fileSchema = {
-  type: SchemaType.OBJECT,
-  properties: {
-    files: {
-      type: SchemaType.ARRAY,
-      items: {
-        type: SchemaType.OBJECT,
-        properties: {
-          fileName: { type: SchemaType.STRING },
-          code: { type: SchemaType.STRING }
-        },
-        required: ["fileName", "code"]
-      }
-    }
-  },
-  required: ["files"]
-};
+// Keep js-beautify formatting utilities and transformers for compatibility
+import { html as formatHtml } from "js-beautify";
 
 export interface ChatMessage {
   role: string;
@@ -31,7 +12,6 @@ export interface ChatMessage {
 // Helper function to format HTML with proper indentation
 const formatCode = (code: string): string => {
   try {
-    // Use js-beautify for proper HTML formatting
     return formatHtml(code, {
       indent_size: 2,
       indent_char: ' ',
@@ -46,7 +26,6 @@ const formatCode = (code: string): string => {
     });
   } catch (error) {
     console.error('Error formatting code:', error);
-    // Return original code if formatting fails
     return code;
   }
 };
@@ -54,10 +33,9 @@ const formatCode = (code: string): string => {
 // Helper function to transform the AI's array response into the object format our app uses.
 const transformApiResponse = (response: { files: { fileName: string; code: string }[] }): Record<string, string> => {
   const filesRecord: Record<string, string> = {};
-  if (response.files && Array.isArray(response.files)) {
-    for (const file of response.files) {
+  if (response && (response as any).files && Array.isArray((response as any).files)) {
+    for (const file of (response as any).files) {
       if (file.fileName && file.code) {
-        // Format the code with proper indentation
         filesRecord[file.fileName] = formatCode(file.code);
       }
     }
@@ -65,64 +43,58 @@ const transformApiResponse = (response: { files: { fileName: string; code: strin
   return filesRecord;
 };
 
-export const generateCode = async (
-  messages: ChatMessage[]
-): Promise<Record<string, string>> => {
-  if (!GEMINI_API_KEY) {
-    throw new Error("Gemini API key is not configured. Please set VITE_GEMINI_API_KEY in your environment variables.");
+// Normalize server response to the same shape as before
+const normalizeResponse = (data: any): Record<string, string> => {
+  // If server already returns a Record<string, string>
+  if (data && typeof data === 'object' && !Array.isArray(data) && !('files' in data)) {
+    return data as Record<string, string>;
   }
+  // If server returns { files: [...] }
+  if (data && typeof data === 'object' && 'files' in data) {
+    return transformApiResponse(data as { files: { fileName: string; code: string }[] });
+  }
+  // Fallback to empty object
+  return {};
+};
 
+const handleError = async (res: Response) => {
+  let message = 'Unknown error';
   try {
-    const model = genAI.getGenerativeModel({
-      model: "gemini-2.5-flash",
-      generationConfig: {
-        responseMimeType: "application/json",
-        responseSchema: fileSchema
-      }
-    });
-
-    const result = await model.generateContent({
-      contents: [{
-        role: "user",
-        parts: [{
-          text: `You are an expert frontend developer. Your task is to generate complete HTML pages based on user requests.
-
-              **YOUR PRIMARY JOB:**
-              - Understand the user's intent to create a website with one or more pages.
-              - Generate complete, valid HTML files that fulfill this intent.
-              - Your output will be structured as an array of objects, where each object has a "fileName" and a "code" property.
+    const body = await res.json();
+    if (body && body.error) {
+      message = String(body.error);
+    }
+  } catch {
+    // ignore JSON parse errors
+    message = res.statusText || message;
+  }
 
-              **CRITICAL RULES ON FILE CREATION:**
-              - **ONLY create full HTML page files** (e.g., \`index.html\`, \`about.html\`).
-              - **DO NOT create separate files for components** like navbars or footers. These must be part of their respective HTML page files.
-              - **DO NOT create separate .css or .js files.** All styling (via Tailwind classes) and scripts (via \`<script>\` tags for Alpine.js) must be self-contained within each HTML file.
+  // Preserve prior UX message for missing key to avoid UI changes
+  if (message.toLowerCase().includes('gemini api key is not configured')) {
+    throw new Error('Gemini API key is not configured. Please set VITE_GEMINI_API_KEY in your environment variables.');
+  }
 
-              **TECHNOLOGY CONSTRAINTS:**
-              - Use Tailwind CSS via CDN: \`<script src="https://cdn.tailwindcss.com"></script>\` in the <head>.
-              - Use Alpine.js for interactivity via CDN: \`<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>\` in the <head>.
-              - Ensure links between pages use relative paths (e.g., \`<a href="./about.html">\`).
+  throw new Error(message);
+};
 
-              **RULES:**
-              - Each HTML file must be a complete document (DOCTYPE, html, head, body).
-              - Ensure all pages are responsive and visually consistent.
-              
-              User request: ${messages[messages.length - 1].content}`
-        }]
-      }],
-      safetySettings: [
-        { category: "HARM_CATEGORY_HARASSMENT", threshold: "BLOCK_NONE" },
-        { category: "HARM_CATEGORY_HATE_SPEECH", threshold: "BLOCK_NONE" },
-        { category: "HARM_CATEGORY_SEXUALLY_EXPLICIT", threshold: "BLOCK_NONE" },
-        { category: "HARM_CATEGORY_DANGEROUS_CONTENT", threshold: "BLOCK_NONE" }
-      ]
+export const generateCode = async (
+  messages: ChatMessage[]
+): Promise<Record<string, string>> => {
+  try {
+    const res = await fetch('/api/generate-code', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ messages }),
     });
 
-    const response = await result.response;
-    const parsedResponse = JSON.parse(response.text());
-    
-    return transformApiResponse(parsedResponse);
+    if (!res.ok) {
+      await handleError(res);
+    }
+
+    const data = await res.json();
+    return normalizeResponse(data);
   } catch (error) {
-    console.error("Error in generateCode:", error);
+    console.error('Error in generateCode:', error);
     throw error;
   }
 };
@@ -131,62 +103,21 @@ export const modifyCode = async (
   currentFiles: Record<string, string>,
   modificationRequest: string
 ): Promise<Record<string, string>> => {
-  if (!GEMINI_API_KEY) {
-    throw new Error("Gemini API key is not configured. Please set VITE_GEMINI_API_KEY in your environment variables.");
-  }
-
   try {
-    const model = genAI.getGenerativeModel({
-      model: "gemini-2.5-flash",
-      generationConfig: {
-        responseMimeType: "application/json",
-        responseSchema: fileSchema
-      }
-    });
-
-    const result = await model.generateContent({
-      contents: [{
-        role: "user",
-        parts: [{
-          text: `You are an expert frontend developer working on a website modification task.
-
-              **YOUR PRIMARY JOB:**
-              - Understand the user's intent to modify their existing website.
-              - Make precise changes to fulfill that intent, which may involve editing multiple files and/or creating new files.
-              - Your output will be structured as an array of objects, where each object has a "fileName" and a "code" property for each file that was changed or created.
-
-              **CRITICAL SAFETY RULE:**
-              Your primary goal is to prevent data loss. When a user asks to move content to a new file or create a new file, you MUST provide the content for all new files in your response. It is unacceptable to only show the file where content was removed. Your response MUST be a complete fulfillment of the user's request, including both the modified original files and the newly created files.
-
-              **CRITICAL RULES ON FILE CREATION & MODIFICATION:**
-              - **ONLY create or modify full HTML page files** (e.g., \`index.html\`, \`about.html\`).
-              - **DO NOT create separate files for components** like navbars or footers. Integrate them into the main HTML pages.
-              - **DO NOT create separate .css or .js files.** All styling and scripts must be self-contained within each HTML file.
-              - If you create a new page, you MUST also modify existing pages to add navigation links to it.
-              
-              **RULES:**
-              - If a request involves changes that logically affect multiple files (e.g., updating a navigation menu), you MUST include ALL of those files in your response.
-              
-              **Current Project Files:**
-              ${JSON.stringify(currentFiles, null, 2)}
-              
-              **Modification Request:** ${modificationRequest}`
-        }]
-      }],
-      safetySettings: [
-        { category: "HARM_CATEGORY_HARASSMENT", threshold: "BLOCK_NONE" },
-        { category: "HARM_CATEGORY_HATE_SPEECH", threshold: "BLOCK_NONE" },
-        { category: "HARM_CATEGORY_SEXUALLY_EXPLICIT", threshold: "BLOCK_NONE" },
-        { category: "HARM_CATEGORY_DANGEROUS_CONTENT", threshold: "BLOCK_NONE" }
-      ]
+    const res = await fetch('/api/modify-code', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ currentFiles, modificationRequest }),
     });
 
-    const response = await result.response;
-    const parsedResponse = JSON.parse(response.text());
+    if (!res.ok) {
+      await handleError(res);
+    }
 
-    return transformApiResponse(parsedResponse);
+    const data = await res.json();
+    return normalizeResponse(data);
   } catch (error) {
-    console.error("Error in modifyCode:", error);
+    console.error('Error in modifyCode:', error);
     throw error;
   }
 };