update app

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,439 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+*/
+/* tslint:disable */
+// FIX: Import `PersonGeneration` and `SafetyFilterLevel` enums from `@google/genai` to fix type errors.
+import {
+  GoogleGenAI,
+  PersonGeneration,
+  SafetyFilterLevel,
+} from '@google/genai';
+import JSZip from 'jszip';
+import {
+  Archive,
+  Download,
+  ImageIcon,
+  LoaderCircle,
+  SendHorizontal,
+  SlidersHorizontal,
+  Trash2,
+  X,
+} from 'lucide-react';
+import {useState} from 'react';
+
+const ai = new GoogleGenAI({apiKey: process.env.API_KEY});
+
+function parseError(error: string): React.ReactNode {
+  if (error.includes('429') && error.includes('RESOURCE_EXHAUSTED')) {
+    return (
+      <>
+        You've exceeded your current API quota (Rate Limit). This is a usage
+        limit on Google's servers.
+        <br />
+        <br />
+        Please check your plan and billing details, or try again after some
+        time. For more information, visit the{' '}
+        <a
+          href="https://ai.google.dev/gemini-api/docs/rate-limits"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-blue-600 underline hover:text-blue-800"
+        >
+          Gemini API rate limits documentation
+        </a>
+        .
+      </>
+    );
+  }
+  const regex = /"message":\s*"(.*?)"/g;
+  const match = regex.exec(error);
+  if (match && match[1]) {
+    return match[1];
+  }
+  return error;
+}
+
+
+export default function Home() {
+  const [prompt, setPrompt] = useState('');
+  const [generatedImages, setGeneratedImages] = useState<string[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isZipping, setIsZipping] = useState(false);
+  const [showErrorModal, setShowErrorModal] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<React.ReactNode>('');
+  const [numberOfImages, setNumberOfImages] = useState(2);
+  const [aspectRatio, setAspectRatio] = useState('1:1');
+  const [showSettings, setShowSettings] = useState(false);
+
+  // New state for advanced settings
+  const [model, setModel] = useState('imagen-4.0-fast-generate-001');
+  // FIX: Use the PersonGeneration enum for the personGeneration state to fix type errors.
+  const [personGeneration, setPersonGeneration] = useState<PersonGeneration>(
+    PersonGeneration.ALLOW_ALL,
+  );
+
+  const handleClear = () => {
+    setGeneratedImages([]);
+    setPrompt('');
+    setNumberOfImages(2);
+    setAspectRatio('1:1');
+    setModel('imagen-4.0-fast-generate-001');
+    // FIX: Use enum members to set state, resolving type errors.
+    setPersonGeneration(PersonGeneration.ALLOW_ALL);
+  };
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!prompt) {
+      setErrorMessage('Please enter a prompt to generate an image.');
+      setShowErrorModal(true);
+      return;
+    }
+    setIsLoading(true);
+    setGeneratedImages([]); // Clear previous results
+
+    try {
+      const response = await ai.models.generateImages({
+        model,
+        prompt,
+        config: {
+          numberOfImages: Number(numberOfImages),
+          aspectRatio,
+          personGeneration,
+        },
+      });
+
+      const imageUrls = response.generatedImages.map(
+        (img) => `data:image/png;base64,${img.image.imageBytes}`,
+      );
+      setGeneratedImages(imageUrls);
+    } catch (error) {
+      console.error('Error generating images:', error);
+      const rawMessage = (error as Error).message || 'An unexpected error occurred.';
+      setErrorMessage(parseError(rawMessage));
+      setShowErrorModal(true);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleDownload = (src: string, index: number) => {
+    const link = document.createElement('a');
+    link.href = src;
+    link.download = `imagen4-studio-${index + 1}.png`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  const handleDownloadAll = async () => {
+    if (generatedImages.length === 0) return;
+
+    setIsZipping(true);
+    try {
+      const zip = new JSZip();
+      for (let i = 0; i < generatedImages.length; i++) {
+        const src = generatedImages[i];
+        const base64Data = src.split(',')[1];
+        zip.file(`imagen4-studio-${i + 1}.png`, base64Data, {base64: true});
+      }
+
+      const content = await zip.generateAsync({type: 'blob'});
+
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(content);
+      link.download = 'imagen4-studio-images.zip';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(link.href);
+    } catch (error) {
+      console.error('Error creating zip file:', error);
+      setErrorMessage('Failed to create the zip file.');
+      setShowErrorModal(true);
+    } finally {
+      setIsZipping(false);
+    }
+  };
+
+  const closeErrorModal = () => {
+    setShowErrorModal(false);
+  };
+
+  const models = [
+    {id: 'imagen-4.0-fast-generate-001', name: 'Imagen 4 Fast'},
+    {id: 'imagen-4.0-generate-001', name: 'Imagen 4'},
+    {id: 'imagen-4.0-ultra-generate-001', name: 'Imagen 4 Ultra'},
+  ];
+
+  // FIX: Use enum members for option IDs to ensure type safety.
+  const personGenerationOptions = [
+    {id: PersonGeneration.ALLOW_ALL, name: 'Allow All'},
+    {id: PersonGeneration.ALLOW_ADULT, name: 'Allow Adults'},
+    {id: PersonGeneration.DONT_ALLOW, name: "Don't Allow"},
+  ];
+
+  const aspectRatios = ['1:1', '16:9', '4:3', '3:4', '9:16'];
+
+  const SettingButton = ({onClick, current, value, children}) => (
+    <button
+      type="button"
+      onClick={() => onClick(value)}
+      className={`px-3 py-1.5 text-sm font-semibold rounded-md transition-colors ${
+        current === value
+          ? 'bg-black text-white'
+          : 'bg-gray-200 hover:bg-gray-300'
+      }`}>
+      {children}
+    </button>
+  );
+
+  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-center mb-4 sm:mb-8 gap-2">
+            <div>
+              <h1 className="text-2xl sm:text-3xl font-bold mb-0 leading-tight">
+                IMAGEN4 AIO
+              </h1>
+              <p className="text-sm sm:text-base text-gray-500 mt-1">
+                Powered by the{' '}
+                <a
+                  className="underline"
+                  href="https://aistudio.google.com/app/apikey"
+                  target="_blank"
+                  rel="noopener noreferrer">
+                  Google Gemini API
+                </a>
+              </p>
+            </div>
+            <div className="flex items-center gap-2 self-start sm:self-auto">
+              <button
+                type="button"
+                onClick={() => setShowSettings(!showSettings)}
+                className={`w-12 h-12 rounded-full flex items-center justify-center shadow-sm transition-all hover:scale-110 ${
+                  showSettings ? 'bg-gray-200' : 'bg-white hover:bg-gray-50'
+                }`}
+                aria-label="Toggle Settings">
+                <SlidersHorizontal className="w-6 h-6 text-gray-700" />
+              </button>
+              <button
+                type="button"
+                onClick={handleDownloadAll}
+                disabled={isLoading || isZipping || generatedImages.length === 0}
+                className="w-12 h-12 rounded-full flex items-center justify-center bg-white shadow-sm transition-all hover:bg-gray-50 hover:scale-110 disabled:scale-100 disabled:cursor-not-allowed disabled:bg-gray-200"
+                aria-label="Download all images as a zip">
+                {isZipping ? (
+                  <LoaderCircle className="w-6 h-6 animate-spin text-gray-700" />
+                ) : (
+                  <Archive className="w-6 h-6 text-gray-700" />
+                )}
+              </button>
+              <button
+                type="button"
+                onClick={handleClear}
+                className="w-12 h-12 rounded-full flex items-center justify-center bg-white shadow-sm transition-all hover:bg-gray-50 hover:scale-110"
+                aria-label="Clear Results">
+                <Trash2 className="w-6 h-6 text-gray-700" />
+              </button>
+            </div>
+          </div>
+
+          <div
+            className={`w-full mb-6 h-[60vh] bg-gray-200/50 rounded-lg flex justify-center p-4 border-2 border-dashed border-gray-300 overflow-y-auto ${
+              generatedImages.length > 0 ? 'items-start' : 'items-center'
+            }`}>
+            {isLoading ? (
+              <div className="text-center text-gray-600 self-center">
+                <LoaderCircle className="w-12 h-12 animate-spin mx-auto" />
+                <p className="mt-4 font-semibold">Generating images...</p>
+                <p className="text-sm text-gray-500">This may take a moment</p>
+              </div>
+            ) : generatedImages.length > 0 ? (
+              <div
+                className={`grid gap-4 w-full ${
+                  generatedImages.length > 1
+                    ? 'grid-cols-1 sm:grid-cols-2'
+                    : 'grid-cols-1'
+                }`}>
+                {generatedImages.map((src, index) => (
+                  <div
+                    key={index}
+                    className="relative group flex items-center justify-center bg-black/5 rounded-md overflow-hidden">
+                    <img
+                      src={src}
+                      alt={`Generated image ${index + 1}`}
+                      className="max-w-full max-h-full object-contain rounded-md"
+                    />
+                    <button
+                      onClick={() => handleDownload(src, index)}
+                      className="absolute top-2 right-2 p-2 bg-black/50 text-white rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 hover:scale-110"
+                      aria-label="Download image">
+                      <Download className="w-5 h-5" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="text-center text-gray-500">
+                <ImageIcon className="w-12 h-12 mx-auto" />
+                <h3 className="font-semibold text-lg mt-4">
+                  Your generated images will appear here
+                </h3>
+                <p>Enter a prompt below to get started</p>
+              </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="Describe the image you want to create..."
+                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 h-14"
+                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"
+                aria-label="Submit">
+                {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" />
+                )}
+              </button>
+            </div>
+          </form>
+        </main>
+
+        {/* Settings Modal */}
+        {showSettings && (
+          <div
+            className="fixed inset-0 bg-black/50 flex items-center justify-center z-40 p-4"
+            onClick={() => setShowSettings(false)}>
+            <div
+              className="bg-white rounded-lg shadow-2xl max-w-md w-full"
+              onClick={(e) => e.stopPropagation()}>
+              <div className="flex justify-between items-center p-4 border-b">
+                <h2 className="text-xl font-bold">Settings</h2>
+                <button
+                  type="button"
+                  onClick={() => setShowSettings(false)}
+                  className="p-1 rounded-full hover:bg-gray-100"
+                  aria-label="Close settings">
+                  <X className="w-6 h-6" />
+                </button>
+              </div>
+              <div className="p-6 space-y-6 overflow-y-auto max-h-[70vh]">
+                <div>
+                  <span className="block text-sm font-medium text-gray-700 mb-2">
+                    Model
+                  </span>
+                  <div className="flex flex-wrap gap-2">
+                    {models.map((m) => (
+                      <SettingButton
+                        key={m.id}
+                        onClick={setModel}
+                        current={model}
+                        value={m.id}>
+                        {m.name}
+                      </SettingButton>
+                    ))}
+                  </div>
+                </div>
+
+                <div>
+                  <span className="block text-sm font-medium text-gray-700 mb-2">
+                    Person Generation
+                  </span>
+                  <div className="flex flex-wrap gap-2">
+                    {personGenerationOptions.map((opt) => (
+                      <SettingButton
+                        key={opt.id}
+                        onClick={setPersonGeneration}
+                        current={personGeneration}
+                        value={opt.id}>
+                        {opt.name}
+                      </SettingButton>
+                    ))}
+                  </div>
+                </div>
+
+                <div>
+                  <label
+                    htmlFor="num-images"
+                    className="block text-sm font-medium text-gray-700 mb-2">
+                    Number of Images
+                  </label>
+                  <input
+                    type="number"
+                    id="num-images"
+                    min="1"
+                    max="4"
+                    value={numberOfImages}
+                    onChange={(e) => {
+                      const val = Math.max(
+                        1,
+                        Math.min(4, Number(e.target.value)),
+                      );
+                      setNumberOfImages(val);
+                    }}
+                    className="w-24 p-2 border border-gray-300 rounded-md shadow-sm focus:ring-gray-500 focus:border-gray-500"
+                  />
+                </div>
+
+                <div>
+                  <span className="block text-sm font-medium text-gray-700 mb-2">
+                    Aspect Ratio
+                  </span>
+                  <div className="flex flex-wrap gap-2">
+                    {aspectRatios.map((ratio) => (
+                      <SettingButton
+                        key={ratio}
+                        onClick={setAspectRatio}
+                        current={aspectRatio}
+                        value={ratio}>
+                        {ratio}
+                      </SettingButton>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* 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">
+                  Generation Failed
+                </h3>
+                <button
+                  onClick={closeErrorModal}
+                  className="text-gray-400 hover:text-gray-500">
+                  <X className="w-5 h-5" />
+                </button>
+              </div>
+              <div className="font-medium text-gray-600">
+                {errorMessage}
+              </div>
+            </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,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>IMAGEN4 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",
+          "jszip": "https://esm.sh/jszip@^3.10.1"
+        }
+      }
+    </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": "imagen4-aio",
+  "description": "An All-in-One image generation studio powered by Imagen 4.",
+  "requestFramePermissions": []
+}

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "imagen4-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",
+    "jszip": "^3.10.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-react": "^5.0.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,23 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      server: {
+        port: 3000,
+        host: '0.0.0.0',
+      },
+      plugins: [react()],
+      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, '.'),
+        }
+      }
+    };
+});