Update index.html

index.html

@@ -1248,21 +1248,10 @@
       return promptParts.join("\n\n");
     }
 
-    function createRequestBody(finalPrompt) {
+    function createRequestBody(finalPrompt, useMinimalRequest = false) {
       const selectedModel = elements.model.value;
-      const responseFormat = {
-        type: "image",
-        mime_type: "image/jpeg",
-        aspect_ratio: elements.aspectRatio.value
-      };
-
-      if (
-        selectedModel !== "gemini-2.5-flash-image"
-      ) {
-        responseFormat.image_size = elements.imageSize.value;
-      }
 
-      return {
+      const requestBody = {
         model: selectedModel,
         input: [
           {
@@ -1270,8 +1259,25 @@
             text: finalPrompt
           }
         ],
-        response_format: responseFormat
+        store: false
+      };
+
+      if (useMinimalRequest) {
+        return requestBody;
+      }
+
+      const responseFormat = {
+        type: "image",
+        mime_type: "image/jpeg",
+        aspect_ratio: elements.aspectRatio.value
       };
+
+      if (selectedModel !== "gemini-2.5-flash-image") {
+        responseFormat.image_size = elements.imageSize.value;
+      }
+
+      requestBody.response_format = responseFormat;
+      return requestBody;
     }
 
     async function generateImages() {
@@ -1400,19 +1406,34 @@
       signal
     ) {
       let retryAttempt = 0;
+      let useMinimalRequest = false;
 
       while (true) {
-        const response = await fetch(API_ENDPOINT, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            "x-goog-api-key": apiKey
-          },
-          body: JSON.stringify(
-            createRequestBody(finalPrompt)
-          ),
-          signal
-        });
+        let response;
+
+        try {
+          response = await fetch(API_ENDPOINT, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              "x-goog-api-key": apiKey
+            },
+            body: JSON.stringify(
+              createRequestBody(finalPrompt, useMinimalRequest)
+            ),
+            signal
+          });
+        } catch (error) {
+          if (error.name === "AbortError") {
+            throw error;
+          }
+
+          throw new Error(
+            "The browser could not reach the Gemini API. Check your " +
+            "internet connection, browser extensions, VPN, firewall, " +
+            "and whether direct browser requests are permitted."
+          );
+        }
 
         const responseText = await response.text();
         let responseData = {};
@@ -1431,10 +1452,27 @@
           return responseData;
         }
 
+        const apiError = responseData?.error ?? {};
         const apiMessage =
-          responseData?.error?.message ??
+          apiError.message ??
           responseData?.rawResponse ??
           `HTTP ${response.status}`;
+        const apiStatus = apiError.status ?? "";
+        const apiCode = apiError.code ?? response.status;
+
+        if (
+          response.status === 400 &&
+          !useMinimalRequest &&
+          !isAuthenticationError(apiMessage, apiStatus)
+        ) {
+          useMinimalRequest = true;
+          setProgress(
+            null,
+            "The configured request was rejected. Retrying once with " +
+            "Google's minimal official image-generation request…"
+          );
+          continue;
+        }
 
         if (
           [429, 500, 502, 503, 504].includes(response.status) &&
@@ -1458,33 +1496,89 @@
         throw new Error(
           createFriendlyApiError(
             response.status,
-            apiMessage
+            apiMessage,
+            apiStatus,
+            apiCode,
+            useMinimalRequest
           )
         );
       }
     }
 
-    function createFriendlyApiError(statusCode, apiMessage) {
+    function isAuthenticationError(apiMessage, apiStatus) {
+      const normalized = `${apiStatus} ${apiMessage}`.toLowerCase();
+
+      return [
+        "api_key_invalid",
+        "api key not valid",
+        "invalid api key",
+        "permission_denied",
+        "unauthenticated",
+        "authentication"
+      ].some((term) => normalized.includes(term));
+    }
+
+    function createFriendlyApiError(
+      statusCode,
+      apiMessage,
+      apiStatus = "",
+      apiCode = statusCode,
+      usedMinimalRequest = false
+    ) {
       const safeMessage = String(apiMessage)
         .replace(
           /AIza[0-9A-Za-z_-]+/g,
           "[API KEY HIDDEN]"
         )
-        .slice(0, 600);
+        .slice(0, 900);
 
-      if (statusCode === 400) {
+      const normalized =
+        `${apiStatus} ${safeMessage}`.toLowerCase();
+
+      const diagnostic = [
+        apiStatus ? `Status: ${apiStatus}` : "",
+        apiCode ? `Code: ${apiCode}` : "",
+        usedMinimalRequest ? "Minimal request also failed" : ""
+      ]
+        .filter(Boolean)
+        .join(" · ");
+
+      if (
+        statusCode === 401 ||
+        normalized.includes("api_key_invalid") ||
+        normalized.includes("api key not valid") ||
+        normalized.includes("invalid api key") ||
+        normalized.includes("unauthenticated")
+      ) {
         return (
-          "Gemini rejected the request. Check the selected model, " +
-          "resolution, aspect ratio and prompt." +
+          "The Gemini API key is invalid, incomplete, revoked, or was " +
+          "copied incorrectly. Paste the complete key value from Google " +
+          "AI Studio; do not enter the name GEMINI_API_KEY." +
+          formatDiagnostic(diagnostic) +
           formatApiDetail(safeMessage)
         );
       }
 
-      if (statusCode === 401 || statusCode === 403) {
+      if (
+        statusCode === 403 ||
+        normalized.includes("permission_denied")
+      ) {
         return (
-          "Authentication or model access failed. Check your Gemini " +
-          "API key, Google project, region, billing status and model " +
-          "availability." +
+          "The key was recognized, but this Google project or account " +
+          "does not have access to the selected image model. Check API " +
+          "restrictions, billing, region, project permissions and quota." +
+          formatDiagnostic(diagnostic) +
+          formatApiDetail(safeMessage)
+        );
+      }
+
+      if (statusCode === 400) {
+        return (
+          "Gemini rejected both the configured request and the minimal " +
+          "official image-generation request. This usually means the API " +
+          "key is invalid, the selected model is unavailable to the project, " +
+          "or the request is blocked by account configuration." +
+          formatDiagnostic(diagnostic) +
           formatApiDetail(safeMessage)
         );
       }
@@ -1492,6 +1586,7 @@
       if (statusCode === 404) {
         return (
           "The selected image model is unavailable for this API key." +
+          formatDiagnostic(diagnostic) +
           formatApiDetail(safeMessage)
         );
       }
@@ -1499,6 +1594,7 @@
       if (statusCode === 429) {
         return (
           "Gemini quota or rate limit reached. Wait and try again." +
+          formatDiagnostic(diagnostic) +
           formatApiDetail(safeMessage)
         );
       }
@@ -1506,16 +1602,24 @@
       if (statusCode >= 500) {
         return (
           "Gemini encountered a temporary service error." +
+          formatDiagnostic(diagnostic) +
           formatApiDetail(safeMessage)
         );
       }
 
       return (
         `Gemini request failed with HTTP ${statusCode}.` +
+        formatDiagnostic(diagnostic) +
         formatApiDetail(safeMessage)
       );
     }
 
+    function formatDiagnostic(diagnostic) {
+      return diagnostic ? `
+
+Diagnostic: ${diagnostic}` : "";
+    }
+
     function formatApiDetail(message) {
       return message ? `\n\nAPI detail: ${message}` : "";
     }