upload app (#1)

- upload app (fb70f302f5e33561acc49dffca784dc3688934ed)

Dockerfile

@@ -0,0 +1,33 @@
+# Stage 1: Build the frontend, and install server dependencies
+FROM node:22 AS builder
+
+WORKDIR /app
+
+# Copy all files from the current directory
+COPY . ./
+RUN echo "API_KEY=PLACEHOLDER" > ./.env
+RUN echo "GEMINI_API_KEY=PLACEHOLDER" >> ./.env
+
+# Install server dependencies
+WORKDIR /app/server
+RUN npm install
+
+# Install dependencies and build the frontend
+WORKDIR /app
+RUN mkdir dist
+RUN bash -c 'if [ -f package.json ]; then npm install && npm run build; fi'
+
+
+# Stage 2: Build the final server image
+FROM node:22
+
+WORKDIR /app
+
+#Copy server files
+COPY --from=builder /app/server .
+# Copy built frontend assets from the builder stage
+COPY --from=builder /app/dist ./dist
+
+EXPOSE 3000
+
+CMD ["node", "server.js"]

Home.tsx

@@ -0,0 +1,767 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+*/
+/* tslint:disable */
+import {Content, GoogleGenAI, Modality} from '@google/genai';
+import {
+  ChevronDown,
+  Library,
+  LoaderCircle,
+  Paintbrush,
+  PictureInPicture,
+  Redo2,
+  SendHorizontal,
+  Sparkles,
+  Trash2,
+  Undo2,
+  X,
+} from 'lucide-react';
+import {useEffect, useRef, useState} from 'react';
+
+const ai = new GoogleGenAI({apiKey: process.env.API_KEY});
+
+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;
+  } 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 [isDrawing, setIsDrawing] = useState(false);
+  const [prompt, setPrompt] = useState('');
+  const [generatedImage, setGeneratedImage] = useState<string | null>(null);
+  const [multiImages, setMultiImages] = useState<
+    {url: string; type: string}[]
+  >([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [showErrorModal, setShowErrorModal] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [mode, setMode] = useState<
+    'canvas' | 'editor' | 'imageGen' | 'multi-img-edit'
+  >('editor');
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  // State for canvas history
+  const [history, setHistory] = useState<string[]>([]);
+  const [historyIndex, setHistoryIndex] = useState(-1);
+
+  // When switching to canvas mode, initialize it and its history
+  useEffect(() => {
+    if (mode === 'canvas' && canvasRef.current) {
+      const canvas = canvasRef.current;
+      const ctx = canvas.getContext('2d');
+      ctx.fillStyle = '#FFFFFF';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      // If an image already exists from another mode, draw it.
+      if (generatedImage) {
+        const img = new window.Image();
+        img.onload = () => {
+          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+          // Save this as the initial state for this session
+          const dataUrl = canvas.toDataURL();
+          setHistory([dataUrl]);
+          setHistoryIndex(0);
+        };
+        img.src = generatedImage;
+      } else {
+        // Otherwise, save the blank state as initial
+        const dataUrl = canvas.toDataURL();
+        setHistory([dataUrl]);
+        setHistoryIndex(0);
+      }
+    }
+  }, [mode, generatedImage]);
+
+  // Load background image when generatedImage changes
+  useEffect(() => {
+    if (generatedImage && canvasRef.current) {
+      const img = new window.Image();
+      img.onload = () => {
+        backgroundImageRef.current = img;
+        drawImageToCanvas();
+        if (mode === 'canvas') {
+          // A small timeout to let the draw happen before saving
+          setTimeout(saveCanvasState, 50);
+        }
+      };
+      img.src = generatedImage;
+    }
+  }, [generatedImage, mode]);
+
+  // Handle clicks outside the dropdown to close it
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsDropdownOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [dropdownRef]);
+
+  // Initialize canvas with white background
+  const initializeCanvas = () => {
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    ctx.fillStyle = '#FFFFFF';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+  };
+
+  // Draw the background image to the canvas
+  const drawImageToCanvas = () => {
+    if (!canvasRef.current || !backgroundImageRef.current) return;
+
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    ctx.fillStyle = '#FFFFFF';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(
+      backgroundImageRef.current,
+      0,
+      0,
+      canvas.width,
+      canvas.height,
+    );
+  };
+
+  // Canvas history functions
+  const saveCanvasState = () => {
+    if (!canvasRef.current) return;
+    const canvas = canvasRef.current;
+    const dataUrl = canvas.toDataURL();
+    const newHistory = history.slice(0, historyIndex + 1);
+    newHistory.push(dataUrl);
+    setHistory(newHistory);
+    setHistoryIndex(newHistory.length - 1);
+  };
+
+  const restoreCanvasState = (index: number) => {
+    if (!canvasRef.current || !history[index]) return;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    const dataUrl = history[index];
+    const img = new window.Image();
+    img.onload = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+    };
+    img.src = dataUrl;
+  };
+
+  const handleUndo = () => {
+    if (historyIndex > 0) {
+      const newIndex = historyIndex - 1;
+      setHistoryIndex(newIndex);
+      restoreCanvasState(newIndex);
+    }
+  };
+
+  const handleRedo = () => {
+    if (historyIndex < history.length - 1) {
+      const newIndex = historyIndex + 1;
+      setHistoryIndex(newIndex);
+      restoreCanvasState(newIndex);
+    }
+  };
+
+  // Get the correct coordinates based on canvas scaling
+  const getCoordinates = (e) => {
+    const canvas = canvasRef.current;
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    return {
+      x:
+        (e.nativeEvent.offsetX ||
+          e.nativeEvent.touches?.[0]?.clientX - rect.left) * scaleX,
+      y:
+        (e.nativeEvent.offsetY ||
+          e.nativeEvent.touches?.[0]?.clientY - rect.top) * scaleY,
+    };
+  };
+
+  const startDrawing = (e) => {
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    const {x, y} = getCoordinates(e);
+    if (e.type === 'touchstart') {
+      e.preventDefault();
+    }
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    setIsDrawing(true);
+  };
+
+  const draw = (e) => {
+    if (!isDrawing) return;
+    if (e.type === 'touchmove') {
+      e.preventDefault();
+    }
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    const {x, y} = getCoordinates(e);
+    ctx.lineWidth = 5;
+    ctx.lineCap = 'round';
+    ctx.strokeStyle = '#000000';
+    ctx.lineTo(x, y);
+    ctx.stroke();
+  };
+
+  const stopDrawing = () => {
+    if (!isDrawing) return;
+    setIsDrawing(false);
+    saveCanvasState();
+  };
+
+  const handleClear = () => {
+    if (mode === 'canvas' && canvasRef.current) {
+      initializeCanvas();
+      const dataUrl = canvasRef.current.toDataURL();
+      setHistory([dataUrl]);
+      setHistoryIndex(0);
+    }
+    setGeneratedImage(null);
+    setMultiImages([]);
+    backgroundImageRef.current = null;
+    setPrompt('');
+  };
+
+  const processFiles = (files: FileList | null) => {
+    if (!files) return;
+    const fileArray = Array.from(files).filter((f) =>
+      f.type.startsWith('image/'),
+    );
+    if (fileArray.length === 0) return;
+
+    if (mode === 'multi-img-edit') {
+      const readers = fileArray.map((file) => {
+        return new Promise<{url: string; type: string}>((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = () =>
+            resolve({url: reader.result as string, type: file.type});
+          reader.onerror = reject;
+          reader.readAsDataURL(file);
+        });
+      });
+      Promise.all(readers).then((newImages) => {
+        setMultiImages((prev) => [...prev, ...newImages]);
+      });
+    } else {
+      const file = fileArray[0];
+      const reader = new FileReader();
+      reader.onload = () => {
+        setGeneratedImage(reader.result as string);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    processFiles(e.target.files);
+    // Reset file input to allow uploading the same file again
+    e.target.value = '';
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    e.currentTarget.classList.remove('border-blue-500');
+    processFiles(e.dataTransfer.files);
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const handleDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
+    e.currentTarget.classList.add('border-blue-500');
+  };
+  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+    e.currentTarget.classList.remove('border-blue-500');
+  };
+
+  const removeImage = (indexToRemove: number) => {
+    setMultiImages((prev) =>
+      prev.filter((_, index) => index !== indexToRemove),
+    );
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    try {
+      if (mode === 'editor' && !generatedImage) {
+        setErrorMessage('Please upload an image to edit.');
+        setShowErrorModal(true);
+        return;
+      }
+
+      if (mode === 'multi-img-edit' && multiImages.length === 0) {
+        setErrorMessage('Please upload at least one image to edit.');
+        setShowErrorModal(true);
+        return;
+      }
+
+      const parts: any[] = [];
+
+      if (mode === 'imageGen') {
+        const tempCanvas = document.createElement('canvas');
+        tempCanvas.width = 960;
+        tempCanvas.height = 540;
+        const tempCtx = tempCanvas.getContext('2d');
+        // Fill with white
+        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
+        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];
+        parts.push({inlineData: {data: imageB64, mimeType: 'image/png'}});
+      } else if (mode === 'editor' && generatedImage) {
+        const mimeType = generatedImage.substring(
+          generatedImage.indexOf(':') + 1,
+          generatedImage.indexOf(';'),
+        );
+        const imageB64 = generatedImage.split(',')[1];
+        parts.push({inlineData: {data: imageB64, mimeType}});
+      } else if (mode === 'multi-img-edit') {
+        multiImages.forEach((img) => {
+          parts.push({
+            inlineData: {data: img.url.split(',')[1], mimeType: img.type},
+          });
+        });
+      }
+
+      parts.push({text: prompt});
+
+      const contents: Content[] = [{role: 'USER', parts}];
+
+      const response = await ai.models.generateContent({
+        model: 'gemini-2.5-flash-image-preview',
+        contents,
+        config: {
+          responseModalities: [Modality.TEXT, Modality.IMAGE],
+        },
+      });
+
+      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 (data.imageData) {
+        const imageUrl = `data:image/png;base64,${data.imageData}`;
+        if (mode === 'multi-img-edit') {
+          setGeneratedImage(imageUrl);
+          setMultiImages([]);
+          setMode('editor');
+        } else {
+          setGeneratedImage(imageUrl);
+        }
+      } else {
+        setErrorMessage(
+          data.message || 'Failed to generate image. Please try again.',
+        );
+        setShowErrorModal(true);
+      }
+    } catch (error) {
+      console.error('Error submitting:', error);
+      setErrorMessage(error.message || 'An unexpected error occurred.');
+      setShowErrorModal(true);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const closeErrorModal = () => {
+    setShowErrorModal(false);
+  };
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const preventTouchDefault = (e) => {
+      if (isDrawing) {
+        e.preventDefault();
+      }
+    };
+
+    canvas.addEventListener('touchstart', preventTouchDefault, {
+      passive: false,
+    });
+    canvas.addEventListener('touchmove', preventTouchDefault, {
+      passive: false,
+    });
+
+    return () => {
+      canvas.removeEventListener('touchstart', preventTouchDefault);
+      canvas.removeEventListener('touchmove', preventTouchDefault);
+    };
+  }, [isDrawing]);
+
+  const baseDisplayClass =
+    'w-full sm:h-[60vh] h-[40vh] min-h-[320px] bg-white/90 touch-none flex items-center justify-center p-4 transition-colors';
+
+  return (
+    <>
+      <div className="min-h-screen text-gray-900 flex flex-col justify-start items-center">
+        <main className="container mx-auto px-3 sm:px-6 py-5 sm:py-10 pb-32 max-w-5xl w-full">
+          <div className="flex flex-col sm:flex-row sm:justify-between sm:items-end mb-2 sm:mb-6 gap-2">
+            <div>
+              <h1 className="text-2xl sm:text-3xl font-bold mb-0 leading-tight">
+                Nano Banana AIO
+              </h1>
+              <p className="text-sm sm:text-base text-gray-500 mt-1">
+                constructed with the{' '}
+                <a
+                  className="underline"
+                  href="https://aistudio.google.com/app/apikey"
+                  target="_blank"
+                  rel="noopener noreferrer">
+                  gemini api
+                </a>{' '}
+                by{' '}
+                <a
+                  className="underline"
+                  href="https://huggingface.co/prithivMLmods"
+                  target="_blank"
+                  rel="noopener noreferrer">
+                  prithivsakthi-ur
+                </a>
+              </p>
+            </div>
+
+            <menu className="flex items-center bg-gray-300 rounded-full p-2 shadow-sm self-start sm:self-auto">
+              <div className="flex flex-wrap justify-center items-center bg-gray-200/80 rounded-full p-1 mr-2">
+                <div className="relative" ref={dropdownRef}>
+                  <button
+                    onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                    className={`p-2 sm:px-3 sm:py-1.5 rounded-full text-sm font-medium flex items-center gap-2 transition-colors ${
+                      mode === 'editor' || mode === 'multi-img-edit'
+                        ? 'bg-white shadow'
+                        : 'text-gray-600 hover:bg-gray-300/50'
+                    }`}
+                    aria-haspopup="true"
+                    aria-expanded={isDropdownOpen}>
+                    {mode === 'multi-img-edit' ? (
+                      <>
+                        <Library className="w-4 h-4" />
+                        <span className="hidden sm:inline">Multi-Image</span>
+                      </>
+                    ) : (
+                      <>
+                        <PictureInPicture className="w-4 h-4" />
+                        <span className="hidden sm:inline">Editor</span>
+                      </>
+                    )}
+                    <ChevronDown className="w-4 h-4 opacity-70" />
+                  </button>
+                  {isDropdownOpen && (
+                    <div className="absolute top-full mt-2 w-48 bg-white rounded-lg shadow-xl z-10 border border-gray-200 py-1">
+                      <button
+                        onClick={() => {
+                          setMode('editor');
+                          setIsDropdownOpen(false);
+                        }}
+                        className={`w-full text-left px-3 py-2 text-sm flex items-center gap-3 transition-colors ${
+                          mode === 'editor'
+                            ? 'bg-gray-100 text-gray-900'
+                            : 'text-gray-700 hover:bg-gray-50'
+                        }`}
+                        aria-pressed={mode === 'editor'}>
+                        <PictureInPicture className="w-4 h-4" />
+                        <span>Single Image Edit</span>
+                      </button>
+                      <button
+                        onClick={() => {
+                          setMode('multi-img-edit');
+                          setIsDropdownOpen(false);
+                        }}
+                        className={`w-full text-left px-3 py-2 text-sm flex items-center gap-3 transition-colors ${
+                          mode === 'multi-img-edit'
+                            ? 'bg-gray-100 text-gray-900'
+                            : 'text-gray-700 hover:bg-gray-50'
+                        }`}
+                        aria-pressed={mode === 'multi-img-edit'}>
+                        <Library className="w-4 h-4" />
+                        <span>Multi-Image Edit</span>
+                      </button>
+                    </div>
+                  )}
+                </div>
+
+                <button
+                  onClick={() => setMode('canvas')}
+                  className={`p-2 sm:px-3 sm:py-1.5 rounded-full text-sm font-medium flex items-center gap-2 transition-colors ${
+                    mode === 'canvas'
+                      ? 'bg-white shadow'
+                      : 'text-gray-600 hover:bg-gray-300/50'
+                  }`}
+                  aria-pressed={mode === 'canvas'}>
+                  <Paintbrush className="w-4 h-4" />
+                  <span className="hidden sm:inline">Canvas</span>
+                </button>
+                <button
+                  onClick={() => setMode('imageGen')}
+                  className={`p-2 sm:px-3 sm:py-1.5 rounded-full text-sm font-medium flex items-center gap-2 transition-colors ${
+                    mode === 'imageGen'
+                      ? 'bg-white shadow'
+                      : 'text-gray-600 hover:bg-gray-300/50'
+                  }`}
+                  aria-pressed={mode === 'imageGen'}>
+                  <Sparkles className="w-4 h-4" />
+                  <span className="hidden sm:inline">Image Gen</span>
+                </button>
+              </div>
+              <button
+                type="button"
+                onClick={handleClear}
+                className="w-10 h-10 rounded-full flex items-center justify-center bg-white shadow-sm transition-all hover:bg-gray-50 hover:scale-110">
+                <Trash2
+                  className="w-5 h-5 text-gray-700"
+                  aria-label="Clear Canvas"
+                />
+              </button>
+            </menu>
+          </div>
+
+          <div className="w-full mb-6">
+            <input
+              ref={fileInputRef}
+              type="file"
+              onChange={handleFileChange}
+              accept="image/*"
+              className="hidden"
+              aria-label="Upload image"
+              multiple={mode === 'multi-img-edit'}
+            />
+            {mode === 'canvas' ? (
+              <div className="relative w-full">
+                <canvas
+                  ref={canvasRef}
+                  width={960}
+                  height={540}
+                  onMouseDown={startDrawing}
+                  onMouseMove={draw}
+                  onMouseUp={stopDrawing}
+                  onMouseLeave={stopDrawing}
+                  onTouchStart={startDrawing}
+                  onTouchMove={draw}
+                  onTouchEnd={stopDrawing}
+                  className="border-2 border-black w-full sm:h-[60vh] h-[40vh] min-h-[320px] bg-white/90 touch-none"
+                  style={{
+                    cursor:
+                      "url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23FF0000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>') 12 12, crosshair",
+                  }}
+                />
+                <div className="absolute top-2 right-2 flex gap-2">
+                  <button
+                    onClick={handleUndo}
+                    disabled={historyIndex <= 0}
+                    className="p-2 bg-white rounded-md shadow disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-100 transition-colors"
+                    aria-label="Undo">
+                    <Undo2 className="w-5 h-5" />
+                  </button>
+                  <button
+                    onClick={handleRedo}
+                    disabled={historyIndex >= history.length - 1}
+                    className="p-2 bg-white rounded-md shadow disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-100 transition-colors"
+                    aria-label="Redo">
+                    <Redo2 className="w-5 h-5" />
+                  </button>
+                </div>
+              </div>
+            ) : mode === 'editor' ? (
+              <div
+                className={`${baseDisplayClass} ${
+                  generatedImage ? 'border-black' : 'border-gray-400'
+                } border-2 border-dashed`}
+                onDrop={handleDrop}
+                onDragOver={handleDragOver}
+                onDragEnter={handleDragEnter}
+                onDragLeave={handleDragLeave}>
+                {generatedImage ? (
+                  <img
+                    src={generatedImage}
+                    alt="Current image"
+                    className="max-w-full max-h-full object-contain"
+                  />
+                ) : (
+                  <button
+                    type="button"
+                    onClick={() => fileInputRef.current?.click()}
+                    className="text-center text-gray-500 hover:text-gray-700 p-8 rounded-lg">
+                    <h3 className="font-semibold text-lg">Upload Image</h3>
+                    <p>Click to upload or drag & drop</p>
+                  </button>
+                )}
+              </div>
+            ) : mode === 'multi-img-edit' ? (
+              <div
+                className={`${baseDisplayClass} ${
+                  multiImages.length > 0
+                    ? 'border-black items-start'
+                    : 'border-gray-400'
+                } border-2 border-dashed flex-col`}
+                onDrop={handleDrop}
+                onDragOver={handleDragOver}
+                onDragEnter={handleDragEnter}
+                onDragLeave={handleDragLeave}>
+                {multiImages.length > 0 ? (
+                  <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 p-4 overflow-y-auto w-full h-full">
+                    {multiImages.map((image, index) => (
+                      <div key={index} className="relative group aspect-square">
+                        <img
+                          src={image.url}
+                          alt={`upload preview ${index + 1}`}
+                          className="w-full h-full object-cover rounded-md"
+                        />
+                        <button
+                          onClick={() => removeImage(index)}
+                          className="absolute top-1 right-1 bg-black/50 text-white rounded-full p-0.5 opacity-0 group-hover:opacity-100 transition-opacity"
+                          aria-label={`Remove image ${index + 1}`}>
+                          <X className="w-4 h-4" />
+                        </button>
+                      </div>
+                    ))}
+                    <button
+                      type="button"
+                      onClick={() => fileInputRef.current?.click()}
+                      className="flex items-center justify-center border-2 border-dashed border-gray-300 rounded-md text-gray-400 hover:text-gray-600 hover:border-gray-400 transition-colors aspect-square">
+                      + Add more
+                    </button>
+                  </div>
+                ) : (
+                  <button
+                    type="button"
+                    onClick={() => fileInputRef.current?.click()}
+                    className="text-center text-gray-500 hover:text-gray-700 p-8 rounded-lg m-auto">
+                    <h3 className="font-semibold text-lg">
+                      Upload one or multiple images
+                    </h3>
+                    <p>Click to upload or drag & drop</p>
+                  </button>
+                )}
+              </div>
+            ) : (
+              // Image Gen mode display
+              <div
+                className={`relative ${baseDisplayClass} border-2 ${
+                  generatedImage ? 'border-black' : 'border-gray-400'
+                }`}>
+                {generatedImage ? (
+                  <img
+                    src={generatedImage}
+                    alt="Generated image"
+                    className="max-w-full max-h-full object-contain"
+                  />
+                ) : (
+                  <div className="text-center text-gray-500">
+                    <h3 className="font-semibold text-lg">Image Generation</h3>
+                    <p>Enter a prompt below to create an image</p>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* Input form */}
+          <form onSubmit={handleSubmit} className="w-full">
+            <div className="relative">
+              <input
+                type="text"
+                value={prompt}
+                onChange={(e) => setPrompt(e.target.value)}
+                placeholder={
+                  mode === 'imageGen'
+                    ? 'Describe the image you want to create...'
+                    : mode === 'multi-img-edit'
+                    ? 'Describe how to edit or combine the images...'
+                    : 'Add your change...'
+                }
+                className="w-full p-3 sm:p-4 pr-12 sm:pr-14 text-sm sm:text-base border-2 border-black bg-white text-gray-800 shadow-sm focus:ring-2 focus:ring-gray-200 focus:outline-none transition-all"
+                required
+              />
+              <button
+                type="submit"
+                disabled={isLoading}
+                className="absolute right-3 sm:right-4 top-1/2 -translate-y-1/2 p-1.5 sm:p-2 rounded-none bg-black text-white hover:cursor-pointer hover:bg-gray-800 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors">
+                {isLoading ? (
+                  <LoaderCircle
+                    className="w-5 sm:w-6 h-5 sm:h-6 animate-spin"
+                    aria-label="Loading"
+                  />
+                ) : (
+                  <SendHorizontal
+                    className="w-5 sm:w-6 h-5 sm:h-6"
+                    aria-label="Submit"
+                  />
+                )}
+              </button>
+            </div>
+          </form>
+        </main>
+        {/* Error Modal */}
+        {showErrorModal && (
+          <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+            <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
+              <div className="flex justify-between items-start mb-4">
+                <h3 className="text-xl font-bold text-gray-700">
+                  Failed to generate
+                </h3>
+                <button
+                  onClick={closeErrorModal}
+                  className="text-gray-400 hover:text-gray-500">
+                  <X className="w-5 h-5" />
+                </button>
+              </div>
+              <p className="font-medium text-gray-600">
+                {parseError(errorMessage)}
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

index.css

@@ -0,0 +1,15 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');
+
+:root {
+  --background: #f3f4f6; /* Tailwind gray-100 */
+  --foreground: #171717;
+}
+
+
+
+body {
+  color: var(--foreground);
+  font-family: 'Outfit', sans-serif;
+  background-color: var(--background);
+}

index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nano Banana AIO</title>
+    <script type="importmap">
+      {
+        "imports": {
+          "@google/genai": "https://esm.sh/@google/genai@^0.7.0",
+          "react": "https://esm.sh/react@^19.0.0",
+          "react/": "https://esm.sh/react@^19.0.0/",
+          "react-dom/": "https://esm.sh/react-dom@^19.0.0/",
+          "lucide-react": "https://esm.sh/lucide-react@^0.487.0",
+          "@tailwindcss/browser": "https://esm.sh/@tailwindcss/browser@^4.1.2"
+        }
+      }
+    </script>
+  <link rel="stylesheet" href="/index.css">
+</head>
+  <body>
+    <div id="root"></div>
+  <script type="module" src="/index.tsx"></script>
+</body>
+</html>

index.tsx

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+*/
+import '@tailwindcss/browser';
+import './index.css';
+
+import ReactDOM from 'react-dom/client';
+import Home from './Home';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<Home />);

metadata.json

@@ -0,0 +1,5 @@
+{
+  "name": "nano-banana-aio",
+  "description": "Sketch and prompt, Gemini brings your drawings to life! Co-create collaboratively with AI by sketching and prompting.",
+  "requestFramePermissions": []
+}

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "nano-banana-aio",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@google/genai": "^0.7.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "lucide-react": "^0.487.0",
+    "@tailwindcss/browser": "^4.1.2"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
+  }
+}

server/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "appletserver",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "nodemon server.js"
+  },
+  "dependencies": {
+    "axios": "^1.6.7",
+    "dotenv": "^16.4.5",
+    "express": "^4.18.2",
+    "express-rate-limit": "^7.5.0",
+    "ws": "^8.17.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "nodemon": "^3.1.0"
+  }
+}

server/public/service-worker.js

@@ -0,0 +1,128 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// service-worker.js
+
+// Define the target URL that we want to intercept and proxy.
+const TARGET_URL_PREFIX = 'https://generativelanguage.googleapis.com';
+
+// Installation event:
+self.addEventListener('install', (event) => {
+  try {
+    console.log('Service Worker: Installing...');
+    event.waitUntil(self.skipWaiting());
+  } catch (error) {
+    console.error('Service Worker: Error during install event:', error);
+    // If skipWaiting fails, the new SW might get stuck in a waiting state.
+  }
+});
+
+// Activation event:
+self.addEventListener('activate', (event) => {
+  try {
+    console.log('Service Worker: Activating...');
+    event.waitUntil(self.clients.claim());
+  } catch (error) {
+    console.error('Service Worker: Error during activate event:', error);
+    // If clients.claim() fails, the SW might not control existing pages until next nav.
+  }
+});
+
+// Fetch event:
+self.addEventListener('fetch', (event) => {
+  try {
+    const requestUrl = event.request.url;
+
+    if (requestUrl.startsWith(TARGET_URL_PREFIX)) {
+      console.log(`Service Worker: Intercepting request to ${requestUrl}`);
+
+      const remainingPathAndQuery = requestUrl.substring(TARGET_URL_PREFIX.length);
+      const proxyUrl = `${self.location.origin}/api-proxy${remainingPathAndQuery}`;
+
+      console.log(`Service Worker: Proxying to ${proxyUrl}`);
+
+      // Construct headers for the request to the proxy
+      const newHeaders = new Headers();
+      // Copy essential headers from the original request
+      // For OPTIONS (preflight) requests, Access-Control-Request-*  are critical.
+      // For actual requests (POST, GET), Content-Type, Accept etc.
+      const headersToCopy = [
+        'Content-Type',
+        'Accept',
+        'Access-Control-Request-Method',
+        'Access-Control-Request-Headers',
+      ];
+
+      for (const headerName of headersToCopy) {
+        if (event.request.headers.has(headerName)) {
+          newHeaders.set(headerName, event.request.headers.get(headerName));
+        }
+      }
+
+      if (event.request.method === 'POST') {
+
+        // Ensure Content-Type is set for POST requests to the proxy, defaulting to application/json
+        if (!newHeaders.has('Content-Type')) {
+          console.warn("Service Worker: POST request to proxy was missing Content-Type in newHeaders. Defaulting to application/json.");
+          newHeaders.set('Content-Type', 'application/json');
+        } else {
+          console.log(`Service Worker: POST request to proxy has Content-Type: ${newHeaders.get('Content-Type')}`);
+        }
+      }
+
+      const requestOptions = {
+        method: event.request.method,
+        headers: newHeaders, // Use simplified headers
+        body: event.request.body, // Still use the original body stream
+        mode: event.request.mode,
+        credentials: event.request.credentials,
+        cache: event.request.cache,
+        redirect: event.request.redirect,
+        referrer: event.request.referrer,
+        integrity: event.request.integrity,
+      };
+
+      // Only set duplex if there's a body and it's a relevant method
+      if (event.request.method !== 'GET' && event.request.method !== 'HEAD' && event.request.body ) {
+        requestOptions.duplex = 'half';
+      }
+
+      const promise = fetch(new Request(proxyUrl, requestOptions))
+        .then((response) => {
+          console.log(`Service Worker: Successfully proxied request to ${proxyUrl}, Status: ${response.status}`);
+          return response;
+        })
+        .catch((error) => {
+          // Log more error details
+          console.error(`Service Worker: Error proxying request to ${proxyUrl}. Message: ${error.message}, Name: ${error.name}, Stack: ${error.stack}`);
+          return new Response(
+            JSON.stringify({ error: 'Proxying failed', details: error.message, name: error.name, proxiedUrl: proxyUrl }),
+            {
+              status: 502, // Bad Gateway is appropriate for proxy errors
+              headers: { 'Content-Type': 'application/json' }
+            }
+          );
+        });
+
+      event.respondWith(promise);
+
+    } else {
+      // If the request URL doesn't match our target, let it proceed as normal.
+      event.respondWith(fetch(event.request));
+    }
+  } catch (error) {
+    // Log more error details for unhandled errors too
+    console.error('Service Worker: Unhandled error in fetch event handler. Message:', error.message, 'Name:', error.name, 'Stack:', error.stack);
+    event.respondWith(
+      new Response(
+        JSON.stringify({ error: 'Service worker fetch handler failed', details: error.message, name: error.name }),
+        {
+          status: 500,
+          headers: { 'Content-Type': 'application/json' }
+        }
+      )
+    );
+  }
+});

server/public/websocket-interceptor.js

@@ -0,0 +1,65 @@
+(function() {
+  const TARGET_WS_HOST = 'generativelanguage.googleapis.com'; // Host to intercept
+  const originalWebSocket = window.WebSocket;
+
+  if (!originalWebSocket) {
+    console.error('[WebSocketInterceptor] Original window.WebSocket not found. Cannot apply interceptor.');
+    return;
+  }
+
+  const handler = {
+    construct(target, args) {
+      let [url, protocols] = args;
+      //stringify url's if necessary for parsing
+      let newUrlString = typeof url === 'string' ? url : (url && typeof url.toString === 'function' ? url.toString() : null);
+      //get ready to check for host to proxy
+      let isTarget = false;
+
+      if (newUrlString) {
+        try {
+          // For full URLs, parse string and check the host
+          if (newUrlString.startsWith('ws://') || newUrlString.startsWith('wss://')) {
+            //URL object again
+            const parsedUrl = new URL(newUrlString);
+            if (parsedUrl.host === TARGET_WS_HOST) {
+              isTarget = true;
+              //use wss if https, else ws
+              const proxyScheme = window.location.protocol === 'https:' ? 'wss' : 'ws';
+              const proxyHost = window.location.host;
+              newUrlString = `${proxyScheme}://${proxyHost}/api-proxy${parsedUrl.pathname}${parsedUrl.search}`;
+            }
+          }
+        } catch (e) {
+          console.warn('[WebSocketInterceptor-Proxy] Error parsing WebSocket URL, using original:', url, e);
+        }
+      } else {
+          console.warn('[WebSocketInterceptor-Proxy] WebSocket URL is not a string or stringifiable. Using original.');
+      }
+
+      if (isTarget) {
+        console.log('[WebSocketInterceptor-Proxy] Original WebSocket URL:', url);
+        console.log('[WebSocketInterceptor-Proxy] Redirecting to proxy URL:', newUrlString);
+      }
+
+      // Call the original constructor with potentially modified arguments
+      // Reflect.construct ensures 'new target(...)' behavior and correct prototype chain
+      if (protocols) {
+        return Reflect.construct(target, [newUrlString, protocols]);
+      } else {
+        return Reflect.construct(target, [newUrlString]);
+      }
+    },
+    get(target, prop, receiver) {
+      // Forward static property access (e.g., WebSocket.OPEN, WebSocket.CONNECTING)
+      // and prototype access to the original WebSocket constructor/prototype
+      if (prop === 'prototype') {
+        return target.prototype;
+      }
+      return Reflect.get(target, prop, receiver);
+    }
+  };
+
+  window.WebSocket = new Proxy(originalWebSocket, handler);
+
+  console.log('[WebSocketInterceptor-Proxy] Global WebSocket constructor has been wrapped using Proxy.');
+})();

server/server.js

@@ -0,0 +1,350 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+require('dotenv').config();
+const express = require('express');
+const fs = require('fs');
+const axios = require('axios');
+const https = require('https');
+const path = require('path');
+const WebSocket = require('ws');
+const { URLSearchParams, URL } = require('url');
+const rateLimit = require('express-rate-limit');
+
+const app = express();
+const port = process.env.PORT || 3000;
+const externalApiBaseUrl = 'https://generativelanguage.googleapis.com';
+const externalWsBaseUrl = 'wss://generativelanguage.googleapis.com';
+// Support either API key env-var variant
+const apiKey = process.env.GEMINI_API_KEY || process.env.API_KEY;
+
+const staticPath = path.join(__dirname,'dist');
+const publicPath = path.join(__dirname,'public');
+
+
+if (!apiKey) {
+    // Only log an error, don't exit. The server will serve apps without proxy functionality
+    console.error("Warning: GEMINI_API_KEY or API_KEY environment variable is not set! Proxy functionality will be disabled.");
+}
+else {
+  console.log("API KEY FOUND (proxy will use this)")
+}
+
+// Limit body size to 50mb
+app.use(express.json({ limit: '50mb' }));
+app.use(express.urlencoded({extended: true, limit: '50mb'}));
+app.set('trust proxy', 1 /* number of proxies between user and server */)
+
+// Rate limiter for the proxy
+const proxyLimiter = rateLimit({
+    windowMs: 15 * 60 * 1000, // Set ratelimit window at 15min (in ms)
+    max: 100, // Limit each IP to 100 requests per window
+    message: 'Too many requests from this IP, please try again after 15 minutes',
+    standardHeaders: true, // Return rate limit info in the `RateLimit-*` headers
+    legacyHeaders: false, // no `X-RateLimit-*` headers
+    handler: (req, res, next, options) => {
+        console.warn(`Rate limit exceeded for IP: ${req.ip}. Path: ${req.path}`);
+        res.status(options.statusCode).send(options.message);
+    }
+});
+
+// Apply the rate limiter to the /api-proxy route before the main proxy logic
+app.use('/api-proxy', proxyLimiter);
+
+// Proxy route for Gemini API calls (HTTP)
+app.use('/api-proxy', async (req, res, next) => {
+    console.log(req.ip);
+    // If the request is an upgrade request, it's for WebSockets, so pass to next middleware/handler
+    if (req.headers.upgrade && req.headers.upgrade.toLowerCase() === 'websocket') {
+        return next(); // Pass to the WebSocket upgrade handler
+    }
+
+    // Handle OPTIONS request for CORS preflight
+    if (req.method === 'OPTIONS') {
+        res.setHeader('Access-Control-Allow-Origin', '*'); // Adjust as needed for security
+        res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+        res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Goog-Api-Key');
+        res.setHeader('Access-Control-Max-Age', '86400'); // Cache preflight response for 1 day
+        return res.sendStatus(200);
+    }
+
+    if (req.body) { // Only log body if it exists
+        console.log("  Request Body (from frontend):", req.body);
+    }
+    try {
+        // Construct the target URL by taking the part of the path after /api-proxy/
+        const targetPath = req.url.startsWith('/') ? req.url.substring(1) : req.url;
+        const apiUrl = `${externalApiBaseUrl}/${targetPath}`;
+        console.log(`HTTP Proxy: Forwarding request to ${apiUrl}`);
+
+        // Prepare headers for the outgoing request
+        const outgoingHeaders = {};
+        // Copy most headers from the incoming request
+        for (const header in req.headers) {
+            // Exclude host-specific headers and others that might cause issues upstream
+            if (!['host', 'connection', 'content-length', 'transfer-encoding', 'upgrade', 'sec-websocket-key', 'sec-websocket-version', 'sec-websocket-extensions'].includes(header.toLowerCase())) {
+                outgoingHeaders[header] = req.headers[header];
+            }
+        }
+
+        // Set the actual API key in the appropriate header
+        outgoingHeaders['X-Goog-Api-Key'] = apiKey;
+
+        // Set Content-Type from original request if present (for relevant methods)
+        if (req.headers['content-type'] && ['POST', 'PUT', 'PATCH'].includes(req.method.toUpperCase())) {
+            outgoingHeaders['Content-Type'] = req.headers['content-type'];
+        } else if (['POST', 'PUT', 'PATCH'].includes(req.method.toUpperCase())) {
+            // Default Content-Type to application/json if no content type for post/put/patch
+            outgoingHeaders['Content-Type'] = 'application/json';
+        }
+
+        // For GET or DELETE requests, ensure Content-Type is NOT sent,
+        // even if the client erroneously included it.
+        if (['GET', 'DELETE'].includes(req.method.toUpperCase())) {
+            delete outgoingHeaders['Content-Type']; // Case-sensitive common practice
+            delete outgoingHeaders['content-type']; // Just in case
+        }
+
+        // Ensure 'accept' is reasonable if not set
+        if (!outgoingHeaders['accept']) {
+            outgoingHeaders['accept'] = '*/*';
+        }
+
+
+        const axiosConfig = {
+            method: req.method,
+            url: apiUrl,
+            headers: outgoingHeaders,
+            responseType: 'stream',
+            validateStatus: function (status) {
+                return true; // Accept any status code, we'll pipe it through
+            },
+        };
+
+        if (['POST', 'PUT', 'PATCH'].includes(req.method.toUpperCase())) {
+            axiosConfig.data = req.body;
+        }
+        // For GET, DELETE, etc., axiosConfig.data will remain undefined,
+        // and axios will not send a request body.
+
+        const apiResponse = await axios(axiosConfig);
+
+        // Pass through response headers from Gemini API to the client
+        for (const header in apiResponse.headers) {
+            res.setHeader(header, apiResponse.headers[header]);
+        }
+        res.status(apiResponse.status);
+
+
+        apiResponse.data.on('data', (chunk) => {
+            res.write(chunk);
+        });
+
+        apiResponse.data.on('end', () => {
+            res.end();
+        });
+
+        apiResponse.data.on('error', (err) => {
+            console.error('Error during streaming data from target API:', err);
+            if (!res.headersSent) {
+                res.status(500).json({ error: 'Proxy error during streaming from target' });
+            } else {
+                // If headers already sent, we can't send a JSON error, just end the response.
+                res.end();
+            }
+        });
+
+    } catch (error) {
+        console.error('Proxy error before request to target API:', error);
+        if (!res.headersSent) {
+            if (error.response) {
+                const errorData = {
+                    status: error.response.status,
+                    message: error.response.data?.error?.message || 'Proxy error from upstream API',
+                    details: error.response.data?.error?.details || null
+                };
+                res.status(error.response.status).json(errorData);
+            } else {
+                res.status(500).json({ error: 'Proxy setup error', message: error.message });
+            }
+        }
+    }
+});
+
+const webSocketInterceptorScriptTag = `<script src="/public/websocket-interceptor.js" defer></script>`;
+
+// Prepare service worker registration script content
+const serviceWorkerRegistrationScript = `
+<script>
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load' , () => {
+    navigator.serviceWorker.register('./service-worker.js')
+      .then(registration => {
+        console.log('Service Worker registered successfully with scope:', registration.scope);
+      })
+      .catch(error => {
+        console.error('Service Worker registration failed:', error);
+      });
+  });
+} else {
+  console.log('Service workers are not supported in this browser.');
+}
+</script>
+`;
+
+// Serve index.html or placeholder based on API key and file availability
+app.get('/', (req, res) => {
+    const placeholderPath = path.join(publicPath, 'placeholder.html');
+
+    // Try to serve index.html
+    console.log("LOG: Route '/' accessed. Attempting to serve index.html.");
+    const indexPath = path.join(staticPath, 'index.html');
+
+    fs.readFile(indexPath, 'utf8', (err, indexHtmlData) => {
+        if (err) {
+            // index.html not found or unreadable, serve the original placeholder
+            console.log('LOG: index.html not found or unreadable. Falling back to original placeholder.');
+            return res.sendFile(placeholderPath);
+        }
+
+        // If API key is not set, serve original HTML without injection
+        if (!apiKey) {
+          console.log("LOG: API key not set. Serving original index.html without script injections.");
+          return res.sendFile(indexPath);
+        }
+
+        // index.html found and apiKey set, inject scripts
+        console.log("LOG: index.html read successfully. Injecting scripts.");
+        let injectedHtml = indexHtmlData;
+
+
+        if (injectedHtml.includes('<head>')) {
+            // Inject WebSocket interceptor first, then service worker script
+            injectedHtml = injectedHtml.replace(
+                '<head>',
+                `<head>${webSocketInterceptorScriptTag}${serviceWorkerRegistrationScript}`
+            );
+            console.log("LOG: Scripts injected into <head>.");
+        } else {
+            console.warn("WARNING: <head> tag not found in index.html. Prepending scripts to the beginning of the file as a fallback.");
+            injectedHtml = `${webSocketInterceptorScriptTag}${serviceWorkerRegistrationScript}${indexHtmlData}`;
+        }
+        res.send(injectedHtml);
+    });
+});
+
+app.get('/service-worker.js', (req, res) => {
+   return res.sendFile(path.join(publicPath, 'service-worker.js'));
+});
+
+app.use('/public', express.static(publicPath));
+app.use(express.static(staticPath));
+
+// Start the HTTP server
+const server = app.listen(port, () => {
+    console.log(`Server listening on port ${port}`);
+    console.log(`HTTP proxy active on /api-proxy/**`);
+    console.log(`WebSocket proxy active on /api-proxy/**`);
+});
+
+// Create WebSocket server and attach it to the HTTP server
+const wss = new WebSocket.Server({ noServer: true });
+
+server.on('upgrade', (request, socket, head) => {
+    const requestUrl = new URL(request.url, `http://${request.headers.host}`);
+    const pathname = requestUrl.pathname;
+
+    if (pathname.startsWith('/api-proxy/')) {
+        if (!apiKey) {
+            console.error("WebSocket proxy: API key not configured. Closing connection.");
+            socket.destroy();
+            return;
+        }
+
+        wss.handleUpgrade(request, socket, head, (clientWs) => {
+            console.log('Client WebSocket connected to proxy for path:', pathname);
+
+            const targetPathSegment = pathname.substring('/api-proxy'.length);
+            const clientQuery = new URLSearchParams(requestUrl.search);
+            clientQuery.set('key', apiKey);
+            const targetGeminiWsUrl = `${externalWsBaseUrl}${targetPathSegment}?${clientQuery.toString()}`;
+            console.log(`Attempting to connect to target WebSocket: ${targetGeminiWsUrl}`);
+
+            const geminiWs = new WebSocket(targetGeminiWsUrl, {
+                protocol: request.headers['sec-websocket-protocol'],
+            });
+
+            const messageQueue = [];
+
+            geminiWs.on('open', () => {
+                console.log('Proxy connected to Gemini WebSocket');
+                // Send any queued messages
+                while (messageQueue.length > 0) {
+                    const message = messageQueue.shift();
+                    if (geminiWs.readyState === WebSocket.OPEN) {
+                        // console.log('Sending queued message from client -> Gemini');
+                        geminiWs.send(message);
+                    } else {
+                        // Should not happen if we are in 'open' event, but good for safety
+                        console.warn('Gemini WebSocket not open when trying to send queued message. Re-queuing.');
+                        messageQueue.unshift(message); // Add it back to the front
+                        break; // Stop processing queue for now
+                    }
+                }
+            });
+
+            geminiWs.on('message', (message) => {
+                // console.log('Message from Gemini -> client');
+                if (clientWs.readyState === WebSocket.OPEN) {
+                    clientWs.send(message);
+                }
+            });
+
+            geminiWs.on('close', (code, reason) => {
+                console.log(`Gemini WebSocket closed: ${code} ${reason.toString()}`);
+                if (clientWs.readyState === WebSocket.OPEN || clientWs.readyState === WebSocket.CONNECTING) {
+                    clientWs.close(code, reason.toString());
+                }
+            });
+
+            geminiWs.on('error', (error) => {
+                console.error('Error on Gemini WebSocket connection:', error);
+                if (clientWs.readyState === WebSocket.OPEN || clientWs.readyState === WebSocket.CONNECTING) {
+                    clientWs.close(1011, 'Upstream WebSocket error');
+                }
+            });
+
+            clientWs.on('message', (message) => {
+                if (geminiWs.readyState === WebSocket.OPEN) {
+                    // console.log('Message from client -> Gemini');
+                    geminiWs.send(message);
+                } else if (geminiWs.readyState === WebSocket.CONNECTING) {
+                    // console.log('Queueing message from client -> Gemini (Gemini still connecting)');
+                    messageQueue.push(message);
+                } else {
+                    console.warn('Client sent message but Gemini WebSocket is not open or connecting. Message dropped.');
+                }
+            });
+
+            clientWs.on('close', (code, reason) => {
+                console.log(`Client WebSocket closed: ${code} ${reason.toString()}`);
+                if (geminiWs.readyState === WebSocket.OPEN || geminiWs.readyState === WebSocket.CONNECTING) {
+                    geminiWs.close(code, reason.toString());
+                }
+            });
+
+            clientWs.on('error', (error) => {
+                console.error('Error on client WebSocket connection:', error);
+                if (geminiWs.readyState === WebSocket.OPEN || geminiWs.readyState === WebSocket.CONNECTING) {
+                    geminiWs.close(1011, 'Client WebSocket error');
+                }
+            });
+        });
+    } else {
+        console.log(`WebSocket upgrade request for non-proxy path: ${pathname}. Closing connection.`);
+        socket.destroy();
+    }
+});

tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "types": [
+      "node"
+    ],
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

vite.config.ts

@@ -0,0 +1,17 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});