From 30dfa4fda433069a88714d9b0abe0d60b80eff51 Mon Sep 17 00:00:00 2001
From: Gaoyao Massimo Hu <ghzero97@gmail.com>
Date: Wed, 23 Oct 2024 16:36:12 +0100
Subject: [PATCH 1/3] chore: Add environment variables for OpenAI API Like
 integration

---
 .env.example                     |  8 ++++++++
 app/components/chat/BaseChat.tsx | 13 ++++++++-----
 app/lib/.server/llm/api-key.ts   | 11 +++++++++++
 app/lib/.server/llm/model.ts     | 13 +++++++++++--
 app/utils/constants.ts           | 33 ++++++++++++++++++++++++++++++--
 vite.config.ts                   |  1 +
 worker-configuration.d.ts        |  2 ++
 7 files changed, 72 insertions(+), 9 deletions(-)

diff --git a/.env.example b/.env.example
index 968e93484..2fa90e447 100644
--- a/.env.example
+++ b/.env.example
@@ -29,5 +29,13 @@ GOOGLE_GENERATIVE_AI_API_KEY=
 # EXAMPLE http://localhost:11434
 OLLAMA_API_BASE_URL=
 
+# You only need this environment variable set if you want to use OpenAI API Like models
+# EXAMPLE https://xxx.xxxx.com/v1
+OPENAI_API_LIKE_BASE_URL=
+
+# Get your OpenAI API Like Key by following these instructions -
+# https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key
+OPENAI_API_LIKE_KEY=
+
 # Include this environment variable if you want more logging for debugging locally
 VITE_LOG_LEVEL=debug
diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index b7421349e..bb0670650 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -28,7 +28,7 @@ const ModelSelector = ({ model, setModel, modelList, providerList }) => {
   const [provider, setProvider] = useState(DEFAULT_PROVIDER);
   return (
     <div className="mb-2">
-      <select 
+      <select
         value={provider}
         onChange={(e) => {
           setProvider(e.target.value);
@@ -42,9 +42,12 @@ const ModelSelector = ({ model, setModel, modelList, providerList }) => {
             {provider}
           </option>
         ))}
-          <option key="Ollama" value="Ollama">
-            Ollama
-          </option>        
+        <option key="Ollama" value="Ollama">
+          Ollama
+        </option>
+        <option key="OpenAILike" value="OpenAILike">
+          Ollama
+        </option>
       </select>
       <select
         value={model}
@@ -263,4 +266,4 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       </div>
     );
   },
-);
\ No newline at end of file
+);
diff --git a/app/lib/.server/llm/api-key.ts b/app/lib/.server/llm/api-key.ts
index b1a47f428..32e3f7a49 100644
--- a/app/lib/.server/llm/api-key.ts
+++ b/app/lib/.server/llm/api-key.ts
@@ -19,6 +19,17 @@ export function getAPIKey(cloudflareEnv: Env, provider: string) {
       return env.GROQ_API_KEY || cloudflareEnv.GROQ_API_KEY;
     case 'OpenRouter':
       return env.OPEN_ROUTER_API_KEY || cloudflareEnv.OPEN_ROUTER_API_KEY;
+      case "OpenAILike":
+        return env.OPENAI_API_LIKE_KEY || cloudflareEnv.OPENAI_API_LIKE_KEY;
+    default:
+      return "";
+  }
+}
+
+export function getBaseURL(cloudflareEnv: Env, provider: string) {
+  switch (provider) {
+    case 'OpenAILike':
+      return env.OPENAI_API_LIKE_BASE_URL || cloudflareEnv.OPENAI_API_LIKE_BASE_URL;
     default:
       return "";
   }
diff --git a/app/lib/.server/llm/model.ts b/app/lib/.server/llm/model.ts
index 68983756d..17881980d 100644
--- a/app/lib/.server/llm/model.ts
+++ b/app/lib/.server/llm/model.ts
@@ -1,6 +1,6 @@
 // @ts-nocheck
 // Preventing TS checks with files presented in the video for a better presentation.
-import { getAPIKey } from '~/lib/.server/llm/api-key';
+import { getAPIKey, getBaseURL } from '~/lib/.server/llm/api-key';
 import { createAnthropic } from '@ai-sdk/anthropic';
 import { createOpenAI } from '@ai-sdk/openai';
 import { createGoogleGenerativeAI } from '@ai-sdk/google';
@@ -14,7 +14,14 @@ export function getAnthropicModel(apiKey: string, model: string) {
 
   return anthropic(model);
 }
+export function getOpenAILikeModel(baseURL:string,apiKey: string, model: string) {
+  const openai = createOpenAI({
+    baseURL,
+    apiKey,
+  });
 
+  return openai(model);
+}
 export function getOpenAIModel(apiKey: string, model: string) {
   const openai = createOpenAI({
     apiKey,
@@ -54,7 +61,7 @@ export function getOpenRouterModel(apiKey: string, model: string) {
 
 export function getModel(provider: string, model: string, env: Env) {
   const apiKey = getAPIKey(env, provider);
-
+  const baseURL = getBaseURL(env, provider);
 
   switch (provider) {
     case 'Anthropic':
@@ -67,6 +74,8 @@ export function getModel(provider: string, model: string, env: Env) {
       return getOpenRouterModel(apiKey, model);
     case 'Google':
       return getGoogleModel(apiKey, model)
+    case 'OpenAILike':
+      return getOpenAILikeModel(baseURL,apiKey, model);
     default:
       return getOllamaModel(model);
   }
diff --git a/app/utils/constants.ts b/app/utils/constants.ts
index 6db860c53..782bbfb1c 100644
--- a/app/utils/constants.ts
+++ b/app/utils/constants.ts
@@ -36,7 +36,9 @@ export let MODEL_LIST: ModelInfo[] = [...staticModels];
 
 async function getOllamaModels(): Promise<ModelInfo[]> {
   try {
-    const response = await fetch(`http://localhost:11434/api/tags`);
+    const base_url =import.meta.env.OLLAMA_API_BASE_URL || "http://localhost:11434";
+    const url = new URL(base_url).toString();
+    const response = await fetch(`${url}/api/tags`);
     const data = await response.json();
 
     return data.models.map((model: any) => ({
@@ -49,9 +51,36 @@ async function getOllamaModels(): Promise<ModelInfo[]> {
   }
 }
 
+async function getOpenAILikeModels(): Promise<ModelInfo[]> {
+
+ try {
+   const base_url =import.meta.env.OPENAI_API_LIKE_BASE_URL || "";
+   if (!base_url) {
+      return [];
+   }
+   const url = new URL(base_url).toString();
+   const api_key = import.meta.env.OPENAI_API_LIKE_KEY ?? "";
+   const response = await fetch(`${url}/models`, {
+     headers: {
+       Authorization: `Bearer ${api_key}`,
+     }
+   });
+    const res = await response.json();
+    return res.data.map((model: any) => ({
+      name: model.id,
+      label: model.id,
+      provider: 'OpenAILike',
+    }));
+ }catch (e) {
+   return []
+ }
+
+}
 async function initializeModelList(): Promise<void> {
   const ollamaModels = await getOllamaModels();
-  MODEL_LIST = [...ollamaModels, ...staticModels];
+  const openAiLikeModels = await getOpenAILikeModels();
+  console.log(openAiLikeModels);
+  MODEL_LIST = [...ollamaModels,...openAiLikeModels, ...staticModels];
 }
 initializeModelList().then();
 export { getOllamaModels, initializeModelList };
diff --git a/vite.config.ts b/vite.config.ts
index 58e76cde5..c3f27bfdc 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -27,6 +27,7 @@ export default defineConfig((config) => {
       chrome129IssuePlugin(),
       config.mode === 'production' && optimizeCssModules({ apply: 'build' }),
     ],
+    envPrefix:["VITE_","OPENAI_API_LIKE_","OLLAMA_API_BASE_URL"],
   };
 });
 
diff --git a/worker-configuration.d.ts b/worker-configuration.d.ts
index f3259893e..6452ef520 100644
--- a/worker-configuration.d.ts
+++ b/worker-configuration.d.ts
@@ -4,4 +4,6 @@ interface Env {
   GROQ_API_KEY: string;
   OPEN_ROUTER_API_KEY: string;
   OLLAMA_API_BASE_URL: string;
+  OPENAI_API_LIKE_KEY: string;
+  OPENAI_API_LIKE_BASE_URL: string;
 }

From 9f2db7b683977d115862f10714b415bb975fa287 Mon Sep 17 00:00:00 2001
From: Gaoyao Massimo Hu <ghzero97@gmail.com>
Date: Wed, 23 Oct 2024 16:43:27 +0100
Subject: [PATCH 2/3] chore: Update environment variable names for OpenAI Like
 integration

---
 .env.example                   | 10 ++++------
 app/lib/.server/llm/api-key.ts |  4 ++--
 app/utils/constants.ts         |  4 ++--
 vite.config.ts                 |  2 +-
 worker-configuration.d.ts      |  4 ++--
 5 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/.env.example b/.env.example
index 2fa90e447..126bd5f20 100644
--- a/.env.example
+++ b/.env.example
@@ -29,13 +29,11 @@ GOOGLE_GENERATIVE_AI_API_KEY=
 # EXAMPLE http://localhost:11434
 OLLAMA_API_BASE_URL=
 
-# You only need this environment variable set if you want to use OpenAI API Like models
-# EXAMPLE https://xxx.xxxx.com/v1
-OPENAI_API_LIKE_BASE_URL=
+# You only need this environment variable set if you want to use OpenAI Like models
+OPENAI_LIKE_API_BASE_URL=
 
-# Get your OpenAI API Like Key by following these instructions -
-# https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key
-OPENAI_API_LIKE_KEY=
+# Get your OpenAI Like API Key
+OPENAI_LIKE_API_KEY=
 
 # Include this environment variable if you want more logging for debugging locally
 VITE_LOG_LEVEL=debug
diff --git a/app/lib/.server/llm/api-key.ts b/app/lib/.server/llm/api-key.ts
index 32e3f7a49..fedb0bc5f 100644
--- a/app/lib/.server/llm/api-key.ts
+++ b/app/lib/.server/llm/api-key.ts
@@ -20,7 +20,7 @@ export function getAPIKey(cloudflareEnv: Env, provider: string) {
     case 'OpenRouter':
       return env.OPEN_ROUTER_API_KEY || cloudflareEnv.OPEN_ROUTER_API_KEY;
       case "OpenAILike":
-        return env.OPENAI_API_LIKE_KEY || cloudflareEnv.OPENAI_API_LIKE_KEY;
+        return env.OPENAI_LIKE_API_KEY || cloudflareEnv.OPENAI_LIKE_API_KEY;
     default:
       return "";
   }
@@ -29,7 +29,7 @@ export function getAPIKey(cloudflareEnv: Env, provider: string) {
 export function getBaseURL(cloudflareEnv: Env, provider: string) {
   switch (provider) {
     case 'OpenAILike':
-      return env.OPENAI_API_LIKE_BASE_URL || cloudflareEnv.OPENAI_API_LIKE_BASE_URL;
+      return env.OPENAI_LIKE_API_BASE_URL || cloudflareEnv.OPENAI_LIKE_API_BASE_URL;
     default:
       return "";
   }
diff --git a/app/utils/constants.ts b/app/utils/constants.ts
index 782bbfb1c..0a806741d 100644
--- a/app/utils/constants.ts
+++ b/app/utils/constants.ts
@@ -54,12 +54,12 @@ async function getOllamaModels(): Promise<ModelInfo[]> {
 async function getOpenAILikeModels(): Promise<ModelInfo[]> {
 
  try {
-   const base_url =import.meta.env.OPENAI_API_LIKE_BASE_URL || "";
+   const base_url =import.meta.env.OPENAI_LIKE_API_BASE_URL || "";
    if (!base_url) {
       return [];
    }
    const url = new URL(base_url).toString();
-   const api_key = import.meta.env.OPENAI_API_LIKE_KEY ?? "";
+   const api_key = import.meta.env.OPENAI_LIKE_API_KEY ?? "";
    const response = await fetch(`${url}/models`, {
      headers: {
        Authorization: `Bearer ${api_key}`,
diff --git a/vite.config.ts b/vite.config.ts
index c3f27bfdc..1afe2b117 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -27,7 +27,7 @@ export default defineConfig((config) => {
       chrome129IssuePlugin(),
       config.mode === 'production' && optimizeCssModules({ apply: 'build' }),
     ],
-    envPrefix:["VITE_","OPENAI_API_LIKE_","OLLAMA_API_BASE_URL"],
+    envPrefix:["VITE_","OPENAI_LIKE_API_","OLLAMA_API_BASE_URL"],
   };
 });
 
diff --git a/worker-configuration.d.ts b/worker-configuration.d.ts
index 6452ef520..dcca11908 100644
--- a/worker-configuration.d.ts
+++ b/worker-configuration.d.ts
@@ -4,6 +4,6 @@ interface Env {
   GROQ_API_KEY: string;
   OPEN_ROUTER_API_KEY: string;
   OLLAMA_API_BASE_URL: string;
-  OPENAI_API_LIKE_KEY: string;
-  OPENAI_API_LIKE_BASE_URL: string;
+  OPENAI_LIKE_API_KEY: string;
+  OPENAI_LIKE_API_BASE_URL: string;
 }

From 05c01370944ced06d2ed324781cc4bef82932a74 Mon Sep 17 00:00:00 2001
From: Gaoyao Massimo Hu <ghzero97@gmail.com>
Date: Wed, 23 Oct 2024 16:45:16 +0100
Subject: [PATCH 3/3] chore: Update environment variable names for OpenAI Like
 integration

---
 app/components/chat/BaseChat.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index bb0670650..c1175f700 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -46,7 +46,7 @@ const ModelSelector = ({ model, setModel, modelList, providerList }) => {
           Ollama
         </option>
         <option key="OpenAILike" value="OpenAILike">
-          Ollama
+          OpenAILike
         </option>
       </select>
       <select