update app

Home.tsx

@@ -1,9 +1,8 @@
 /**
  * @license
  * SPDX-License-Identifier: Apache-2.0
-*/
+ */
 /* tslint:disable */
-import {GoogleGenAI, Modality} from '@google/genai';
 import {
   ChevronDown,
   Library,
@@ -19,25 +18,31 @@ import {
 } from 'lucide-react';
 import {useEffect, useRef, useState} from 'react';
 
-const ai = new GoogleGenAI({apiKey: process.env.API_KEY});
-
+// This function remains useful for parsing potential error messages
 function parseError(error: string) {
-  const regex = /{"error":(.*)}/gm;
-  const m = regex.exec(error);
   try {
-    const e = m[1];
-    const err = JSON.parse(e);
-    return err.message || error;
+    // Attempt to parse the error as a JSON object which the proxy might send
+    const errObj = JSON.parse(error);
+    return errObj.message || error;
   } catch (e) {
-    return error;
+    // If it's not JSON, return the original error string
+    const regex = /{"error":(.*)}/gm;
+    const m = regex.exec(error);
+    try {
+      const e = m[1];
+      const err = JSON.parse(e);
+      return err.message || error;
+    } catch (e) {
+      return error;
+    }
   }
 }
 
 export default function Home() {
-  const canvasRef = useRef(null);
-  const fileInputRef = useRef(null);
-  const backgroundImageRef = useRef(null);
-  const dropdownRef = useRef(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const backgroundImageRef = useRef<HTMLImageElement | null>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
   const [isDrawing, setIsDrawing] = useState(false);
   const [prompt, setPrompt] = useState('');
   const [generatedImage, setGeneratedImage] = useState<string | null>(null);
@@ -119,6 +124,7 @@ export default function Home() {
   // Initialize canvas with white background
   const initializeCanvas = () => {
     const canvas = canvasRef.current;
+    if (!canvas) return;
     const ctx = canvas.getContext('2d');
     ctx.fillStyle = '#FFFFFF';
     ctx.fillRect(0, 0, canvas.width, canvas.height);
@@ -182,8 +188,8 @@ export default function Home() {
   };
 
   // Get the correct coordinates based on canvas scaling
-  const getCoordinates = (e) => {
-    const canvas = canvasRef.current;
+  const getCoordinates = (e: any) => {
+    const canvas = canvasRef.current!;
     const rect = canvas.getBoundingClientRect();
     const scaleX = canvas.width / rect.width;
     const scaleY = canvas.height / rect.height;
@@ -197,9 +203,9 @@ export default function Home() {
     };
   };
 
-  const startDrawing = (e) => {
-    const canvas = canvasRef.current;
-    const ctx = canvas.getContext('2d');
+  const startDrawing = (e: any) => {
+    const canvas = canvasRef.current!;
+    const ctx = canvas.getContext('2d')!;
     const {x, y} = getCoordinates(e);
     if (e.type === 'touchstart') {
       e.preventDefault();
@@ -209,13 +215,13 @@ export default function Home() {
     setIsDrawing(true);
   };
 
-  const draw = (e) => {
+  const draw = (e: any) => {
     if (!isDrawing) return;
     if (e.type === 'touchmove') {
       e.preventDefault();
     }
-    const canvas = canvasRef.current;
-    const ctx = canvas.getContext('2d');
+    const canvas = canvasRef.current!;
+    const ctx = canvas.getContext('2d')!;
     const {x, y} = getCoordinates(e);
     ctx.lineWidth = 5;
     ctx.lineCap = 'round';
@@ -275,7 +281,6 @@ export default function Home() {
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     processFiles(e.target.files);
-    // Reset file input to allow uploading the same file again
     e.target.value = '';
   };
 
@@ -303,7 +308,8 @@ export default function Home() {
     );
   };
 
-  const handleSubmit = async (e) => {
+  // *** MODIFIED FUNCTION ***
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsLoading(true);
 
@@ -322,30 +328,22 @@ export default function Home() {
 
       const parts: any[] = [];
 
+      // This logic for building the 'parts' array is correct.
       if (mode === 'imageGen') {
         const tempCanvas = document.createElement('canvas');
         tempCanvas.width = 960;
         tempCanvas.height = 540;
-        const tempCtx = tempCanvas.getContext('2d');
-        // Fill with white
+        const tempCtx = tempCanvas.getContext('2d')!;
         tempCtx.fillStyle = '#FFFFFF';
         tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
-        // Add a tiny, almost invisible pixel to encourage editing behavior
-        tempCtx.fillStyle = '#FEFEFE'; // A slightly off-white color
-        tempCtx.fillRect(0, 0, 1, 1); // At the top-left corner
+        tempCtx.fillStyle = '#FEFEFE';
+        tempCtx.fillRect(0, 0, 1, 1);
         const imageB64 = tempCanvas.toDataURL('image/png').split(',')[1];
         parts.push({inlineData: {data: imageB64, mimeType: 'image/png'}});
       } else if (mode === 'canvas') {
         if (!canvasRef.current) return;
         const canvas = canvasRef.current;
-        const tempCanvas = document.createElement('canvas');
-        tempCanvas.width = canvas.width;
-        tempCanvas.height = canvas.height;
-        const tempCtx = tempCanvas.getContext('2d');
-        tempCtx.fillStyle = '#FFFFFF';
-        tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
-        tempCtx.drawImage(canvas, 0, 0);
-        const imageB64 = tempCanvas.toDataURL('image/png').split(',')[1];
+        const imageB64 = canvas.toDataURL('image/png').split(',')[1];
         parts.push({inlineData: {data: imageB64, mimeType: 'image/png'}});
       } else if (mode === 'editor' && generatedImage) {
         const mimeType = generatedImage.substring(
@@ -364,30 +362,50 @@ export default function Home() {
 
       parts.push({text: prompt});
 
-      const response = await ai.models.generateContent({
-        model: 'gemini-2.5-flash-image-preview',
-        contents: { parts },
-        config: {
-          responseModalities: [Modality.TEXT, Modality.IMAGE],
+      // Construct the request body for the Gemini REST API
+      const requestBody = {
+        contents: [{role: 'USER', parts}],
+      };
+
+      // Define the proxy endpoint
+      const proxyUrl =
+        '/api-proxy/v1beta/models/gemini-2.5-flash-image-preview:generateContent';
+
+      // Use fetch to send the request to your proxy server
+      const response = await fetch(proxyUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
         },
+        body: JSON.stringify(requestBody),
       });
 
-      const data = {
-        success: true,
-        message: '',
-        imageData: null,
-        error: undefined,
-      };
-      for (const part of response.candidates[0].content.parts) {
-        if (part.text) {
-          data.message = part.text;
-        } else if (part.inlineData) {
-          data.imageData = part.inlineData.data;
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(
+          errorData.error?.message || `HTTP error! status: ${response.status}`,
+        );
+      }
+
+      const responseData = await response.json();
+
+      // Process the response
+      const result = {message: '', imageData: null};
+
+      if (responseData.candidates && responseData.candidates.length > 0) {
+        for (const part of responseData.candidates[0].content.parts) {
+          if (part.text) {
+            result.message = part.text;
+          } else if (part.inlineData) {
+            result.imageData = part.inlineData.data;
+          }
         }
+      } else {
+        throw new Error('Invalid response structure from API.');
       }
 
-      if (data.imageData) {
-        const imageUrl = `data:image/png;base64,${data.imageData}`;
+      if (result.imageData) {
+        const imageUrl = `data:image/png;base64,${result.imageData}`;
         if (mode === 'multi-img-edit') {
           setGeneratedImage(imageUrl);
           setMultiImages([]);
@@ -397,11 +415,11 @@ export default function Home() {
         }
       } else {
         setErrorMessage(
-          data.message || 'Failed to generate image. Please try again.',
+          result.message || 'Failed to generate image. Please try again.',
         );
         setShowErrorModal(true);
       }
-    } catch (error) {
+    } catch (error: any) {
       console.error('Error submitting:', error);
       setErrorMessage(error.message || 'An unexpected error occurred.');
       setShowErrorModal(true);
@@ -418,7 +436,7 @@ export default function Home() {
     const canvas = canvasRef.current;
     if (!canvas) return;
 
-    const preventTouchDefault = (e) => {
+    const preventTouchDefault = (e: TouchEvent) => {
       if (isDrawing) {
         e.preventDefault();
       }