Another cherry pick (#77)

* Fix & Chore ChatGPT Api class [Text Moderation]

[+] fix(openai.ts): add subtitle to responseText in ChatGPTApi class
[+] chore(locales): update (id.ts,en.ts) by replace lower letters to capital letters for ChatGPT Api class

* Feat UI Page [Change Log]

[+] chore(changelog.tsx): update table variable in ChangeLog component
[+] feat(changelog.tsx): add CI badge to table variable in ChangeLog component

* Refactor CORS Route [Experimental]

[+] fix(route.ts): remove unnecessary CORS headers for preflight requests
[+] refactor(route.ts): extract isRealDevicez function for determining if the user-agent belongs to a real device
[+] refactor(route.ts): move fetchOptions declaration below isRealDevicez function
[+] refactor(route.ts): move fetchOptions assignment below isRealDevice check

* Refactor UI Page Chat [Image Exporter]

[+] refactor(exporter.tsx): remove unnecessary code and simplify message class assignment in ImagePreviewer component

* Refactor UI Page [Buttons]

[+] refactor(button.tsx): simplify destructuring of props in IconButton component

* loop user accepted lang list to find best available

* Refactor ChatGPT LLM Api

[+] feat(openai.ts): add support for Text-Moderations OpenAI
[+] fix(openai.ts): fix indentation and formatting issues
[+] feat(openai.ts): add support for DALL·E Models
[+] feat(openai.ts): add support for System Fingerprint & Max Tokens
[+] fix(openai.ts): fix the location of the getNewStuff method
[+] fix(openai.ts): fix the location of the sendModerationRequest method
[+] fix(openai.ts): fix the location of the getModelForInstructVersion method
[+] fix(openai.ts): fix the location of the saveImageFromResponse method

* CherryPicks from expermental branch

[+] feat(constant.ts): add support for image creation and editing paths in OpenaiPath
[+] feat(constant.ts): add support for image variation path in OpenaiPath
[+] feat(constant.ts): add default models for image generation and instruction-based vision

* Another CherryPicks from expermental branch

[+] chore(config.ts): update DEFAULT_CONFIG with DALL·E Models and Text Moderation Open AI settings
[+] chore(config.ts): add validation for DALL·E Models configuration properties
[+] chore(config.ts): update useAppConfig version to 4.2 to include DALL·E Models and Text Moderation Open AI settings

* Fix [UI Page] [Model Config] DALL·E Models

[+] fix(model-config.tsx): update onChange event handlers to use ModalConfigValidator for quality, size, and style values

* Added Back Temperature [Model Config]

[+] feat(model-config): add temperature input range to ModelConfigList component

* Chore Local Language DALL·E [Model] [Config]

[+] chore(locales): update localization files for Chinese (cn) and Indonesian (id)
[+] feat(locales): add translations for image creation options in Chinese (cn) and Indonesian (id)

* Refactor Summarize Logic

[+] chore(chat.ts): add 'stream' property to config object in useChatStore function
[+] refactor(chat.ts): destructure 'max_tokens' property from modelConfig object in useChatStore function
[+] feat(chat.ts): show toast notification on successful summarize
[+] fix(chat.ts): show toast notification on summarize error

* Fix Summarize Logic

[+] fix(cn.ts): add missing translation for Summarizing in Chinese
[+] fix(en.ts): add missing translation for Summarizing in English
[+] fix(id.ts): add missing translation for Summarizing in Indonesian
[+] fix(chat.ts): fix known issue where summarize is not using the current model selected
[+] feat(chat.ts): show toast message when summarizing session

Now it should be working properly, and we can play the tic-tac-toe game with AI again.

---------

Co-authored-by: ChrisWongCH <chris0000qpalzm@gmail.com>

app/api/cors/[...path]/route.ts

@@ -1,24 +1,11 @@
 import { NextRequest, NextResponse } from "next/server";
-import { DEFAULT_CORS_HOST } from "@/app/constant";
 
 async function handle(
   req: NextRequest,
   { params }: { params: { path: string[] } },
 ) {
   if (req.method === "OPTIONS") {
-    // Set CORS headers for preflight requests
-    return NextResponse.json(
-      { body: "OK" },
-      {
-        status: 200,
-        headers: {
-          "Access-Control-Allow-Origin": `${DEFAULT_CORS_HOST}`, // Replace * with the appropriate origin(s)
-          "Access-Control-Allow-Methods": "GET, POST, OPTIONS", // Add other allowed methods if needed
-          "Access-Control-Allow-Headers": "*", // Replace * with the appropriate headers
-          "Access-Control-Max-Age": "86400", // Adjust the max age value if needed
-        },
-      },
-    );
+    return NextResponse.json({ body: "OK" }, { status: 200 });
   }
 
   const [protocol, ...subpath] = params.path;
@@ -29,19 +16,22 @@ async function handle(
     method?.toLowerCase() ?? "",
   );
 
-  const fetchOptions: RequestInit = {
-    headers: {
-      authorization: req.headers.get("authorization") ?? "",
-    },
-    body: shouldNotHaveBody ? null : req.body,
-    method,
-    // @ts-ignore
-    duplex: "half",
-  };
+  function isRealDevicez(userAgent: string | null): boolean {
+    // Author : @H0llyW00dzZ
+    // Note : This just an experiment for a prevent suspicious bot
+    // Modify this function to define your logic for determining if the user-agent belongs to a real device
+    // For example, you can check if the user-agent contains certain keywords or patterns that indicate a real device
+    if (userAgent) {
+      return userAgent.includes("AppleWebKit") && !userAgent.includes("Headless");
+    }
+    return false;
+  }
+
+
+  const userAgent = req.headers.get("User-Agent");
+  const isRealDevice = isRealDevicez(userAgent);
 
-  const origin = req.headers.get("Origin");
-  const referrer = req.headers.get("Referer");
-  if (origin !== DEFAULT_CORS_HOST || (referrer && !referrer.includes(DEFAULT_CORS_HOST))) {
+  if (!isRealDevice) {
     return NextResponse.json(
       {
         error: true,
@@ -53,6 +43,16 @@ async function handle(
     );
   }
 
+  const fetchOptions: RequestInit = {
+    headers: {
+      authorization: req.headers.get("authorization") ?? "",
+    },
+    body: shouldNotHaveBody ? null : req.body,
+    method,
+    // @ts-ignore
+    duplex: "half",
+  };
+
   const fetchResult = await fetch(targetUrl, fetchOptions);
 
   console.log("[Cloud Sync]", targetUrl, {