Feat: OpenAI Base URL supported

backend/image_generation.py

@@ -5,8 +5,8 @@ from openai import AsyncOpenAI
 from bs4 import BeautifulSoup
 
 
-async def process_tasks(prompts, api_key):
-    tasks = [generate_image(prompt, api_key) for prompt in prompts]
+async def process_tasks(prompts, api_key, base_url):
+    tasks = [generate_image(prompt, api_key, base_url) for prompt in prompts]
     results = await asyncio.gather(*tasks, return_exceptions=True)
 
     processed_results = []
@@ -20,8 +20,8 @@ async def process_tasks(prompts, api_key):
     return processed_results
 
 
-async def generate_image(prompt, api_key):
-    client = AsyncOpenAI(api_key=api_key)
+async def generate_image(prompt, api_key, base_url):
+    client = AsyncOpenAI(api_key=api_key, base_url=base_url)
     image_params = {
         "model": "dall-e-3",
         "quality": "standard",
@@ -60,7 +60,7 @@ def create_alt_url_mapping(code):
     return mapping
 
 
-async def generate_images(code, api_key, image_cache):
+async def generate_images(code, api_key, base_url, image_cache):
     # Find all images
     soup = BeautifulSoup(code, "html.parser")
     images = soup.find_all("img")
@@ -87,7 +87,7 @@ async def generate_images(code, api_key, image_cache):
         return code
 
     # Generate images
-    results = await process_tasks(prompts, api_key)
+    results = await process_tasks(prompts, api_key, base_url)
 
     # Create a dict mapping alt text to image URL
     mapped_image_urls = dict(zip(prompts, results))

backend/llm.py

@@ -6,9 +6,9 @@ MODEL_GPT_4_VISION = "gpt-4-vision-preview"
 
 
 async def stream_openai_response(
-    messages, api_key: str, callback: Callable[[str], Awaitable[None]]
+    messages, api_key: str, base_url:str,  callback: Callable[[str], Awaitable[None]]
 ):
-    client = AsyncOpenAI(api_key=api_key)
+    client = AsyncOpenAI(api_key=api_key, base_url=base_url)
 
     model = MODEL_GPT_4_VISION
 

backend/main.py

@@ -73,6 +73,13 @@ async def stream_code_test(websocket: WebSocket):
         openai_api_key = os.environ.get("OPENAI_API_KEY")
         if openai_api_key:
             print("Using OpenAI API key from environment variable")
+    if params["openAiBaseURL"]:
+        openai_base_url = params["openAiBaseURL"]
+        print("Using OpenAI Base URL from client-side settings dialog")
+    else:
+        openai_base_url = os.environ.get("OPENAI_BASE_URL")
+        if openai_base_url:
+            print("Using OpenAI Base URL from environment variable")
 
     if not openai_api_key:
         print("OpenAI API key not found")
@@ -83,6 +90,11 @@ async def stream_code_test(websocket: WebSocket):
             }
         )
         return
+    # openai_base_url="https://flag.smarttrot.com/v1"
+    if not openai_base_url:
+        openai_base_url = None
+        print("Using Offical OpenAI Base URL")
+
 
     should_generate_images = (
         params["isImageGenerationEnabled"]
@@ -117,6 +129,7 @@ async def stream_code_test(websocket: WebSocket):
         completion = await stream_openai_response(
             prompt_messages,
             api_key=openai_api_key,
+            base_url = openai_base_url,
             callback=lambda x: process_chunk(x),
         )
 
@@ -129,7 +142,7 @@ async def stream_code_test(websocket: WebSocket):
                 {"type": "status", "value": "Generating images..."}
             )
             updated_html = await generate_images(
-                completion, api_key=openai_api_key, image_cache=image_cache
+                completion, api_key=openai_api_key, base_url=openai_base_url, image_cache=image_cache
             )
         else:
             updated_html = completion

frontend/src/App.tsx

@@ -37,6 +37,7 @@ function App() {
   const [settings, setSettings] = usePersistedState<Settings>(
     {
       openAiApiKey: null,
+      openAiBaseURL: null,
       screenshotOneApiKey: null,
       isImageGenerationEnabled: true,
       editorTheme: "cobalt",

frontend/src/components/SettingsDialog.tsx

@@ -76,6 +76,25 @@ function SettingsDialog({ settings, setSettings }: Props) {
             }
           />
 
+          <Label htmlFor="openai-api-key">
+            <div>OpenAI Base URL</div>
+            <div className="font-light mt-2 leading-relaxed">
+              You can replace it for the third api server.
+            </div>
+          </Label>
+
+          <Input
+            id="openai-base-url"
+            placeholder="OpenAI Base Url"
+            value={settings.openAiBaseURL || ""}
+            onChange={(e) =>
+              setSettings((s) => ({
+                ...s,
+                openAiBaseURL: e.target.value,
+              }))
+            }
+          />
+
           <Label htmlFor="screenshot-one-api-key">
             <div>ScreenshotOne API key</div>
             <div className="font-light mt-2 leading-relaxed">

frontend/src/types.ts

@@ -1,5 +1,6 @@
 export interface Settings {
   openAiApiKey: string | null;
+  openAiBaseURL: string | null;
   screenshotOneApiKey: string | null;
   isImageGenerationEnabled: boolean;
   editorTheme: string;