feat(api): add fal provider support

- Split image API calls into OAI-like and fal-specific modules
- Use the official fal client for GPT Image 2 requests with existing provider API keys
- Add provider profiles in settings and record provider metadata on tasks

Co-Authored-By: KohakuTerrarium <noreply@kohaku-lab.org>

Author: FHfanshu

package-lock.json

@@ -11,6 +11,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
+    "@fal-ai/client": "^1.10.0",
     "fflate": "^0.8.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

package.json

@@ -2,7 +2,7 @@ import { useEffect } from 'react'
 import { initStore } from './store'
 import { useStore } from './store'
 import { normalizeBaseUrl } from './lib/api'
-import type { ApiMode } from './types'
+import type { ApiMode, ApiProvider } from './types'
 import Header from './components/Header'
 import SearchBar from './components/SearchBar'
 import TaskGrid from './components/TaskGrid'
@@ -20,7 +20,7 @@ export default function App() {
 
   useEffect(() => {
     const searchParams = new URLSearchParams(window.location.search)
-    const nextSettings: { baseUrl?: string; apiKey?: string; codexCli?: boolean; apiMode?: ApiMode } = {}
+    const nextSettings: { baseUrl?: string; apiKey?: string; codexCli?: boolean; apiMode?: ApiMode; profiles?: any[]; activeProfileId?: string } = {}
 
     const apiUrlParam = searchParams.get('apiUrl')
     if (apiUrlParam !== null) {
@@ -42,13 +42,33 @@ export default function App() {
       nextSettings.apiMode = apiModeParam
     }
 
+    const providerParam = searchParams.get('provider')?.trim().toLowerCase()
+    if (providerParam) {
+      const provider: ApiProvider | null = providerParam === 'fal'
+        ? 'fal'
+        : ['oai', 'openai', 'openai-compatible', 'new-api', 'oai-like'].includes(providerParam)
+          ? 'oai-like'
+          : null
+      if (provider) {
+        const state = useStore.getState()
+        const current = state.settings.profiles.find((profile) => profile.id === state.settings.activeProfileId) ?? state.settings.profiles[0]
+        if (current) {
+          nextSettings.profiles = state.settings.profiles.map((profile) =>
+            profile.id === current.id ? { ...profile, provider } : profile,
+          )
+          nextSettings.activeProfileId = current.id
+        }
+      }
+    }
+
     setSettings(nextSettings)
 
-    if (searchParams.has('apiUrl') || searchParams.has('apiKey') || searchParams.has('codexCli') || searchParams.has('apiMode')) {
+    if (searchParams.has('apiUrl') || searchParams.has('apiKey') || searchParams.has('codexCli') || searchParams.has('apiMode') || searchParams.has('provider')) {
       searchParams.delete('apiUrl')
       searchParams.delete('apiKey')
       searchParams.delete('codexCli')
       searchParams.delete('apiMode')
+      searchParams.delete('provider')
 
       const nextSearch = searchParams.toString()
       const nextUrl = `${window.location.pathname}${nextSearch ? `?${nextSearch}` : ''}${window.location.hash}`

src/App.tsx

@@ -163,6 +163,10 @@ export default function DetailModal() {
   const hasHandledPromptWarning = settings.codexCli || dismissedCodexCliPrompts.includes(codexCliPromptKey)
   const showPromptWarning = Boolean(currentOutputImageId && (!currentRevisedPrompt || showRevisedPrompt) && !hasHandledPromptWarning)
   const aggregateActualParams = outputLen > 0 ? { ...task.actualParams, n: outputLen } : task.actualParams
+  const taskProvider = task.apiProvider
+  const taskProviderName = taskProvider === 'fal' ? 'fal.ai' : taskProvider === 'oai-like' ? 'OAI-like' : '未知'
+  const taskProfileName = task.apiProfileName || '旧记录未保存'
+  const taskModel = task.apiModel || '未知'
 
   const formatTime = (ts: number | null) => {
     if (!ts) return ''
@@ -285,7 +289,7 @@ export default function DetailModal() {
 
         {/* 左侧：图片 */}
         <div ref={imagePanelRef} className="md:w-1/2 w-full h-64 md:h-auto bg-gray-100 dark:bg-black/20 relative flex items-center justify-center flex-shrink-0 min-h-[16rem]">
-          {task.status === 'done' && outputLen > 0 && (
+          {task.status === 'done' && outputLen > 0 && currentOutputImageSrc && (
             <>
               <img
                 ref={mainImageRef}
@@ -499,11 +503,13 @@ export default function DetailModal() {
                           }`}
                           onClick={() => setLightboxImageId(imgId, allInputImageIds)}
                         >
-                          <img
-                            src={displaySrc}
-                            className="w-full h-full object-cover"
-                            alt=""
-                          />
+                          {displaySrc && (
+                            <img
+                              src={displaySrc}
+                              className="w-full h-full object-cover"
+                              alt=""
+                            />
+                          )}
                           {isMaskTarget && (
                             <span className="absolute left-1 top-1 rounded bg-blue-500/90 px-1.5 py-0.5 text-[8px] leading-none text-white font-bold tracking-wider backdrop-blur-sm z-10 pointer-events-none">
                               MASK
@@ -521,6 +527,12 @@ export default function DetailModal() {
             <h3 className="text-xs font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-2">
               参数配置
             </h3>
+            <div className="mb-2 rounded-lg bg-gray-50 px-3 py-2 text-xs dark:bg-white/[0.03]">
+              <span className="text-gray-400 dark:text-gray-500">Provider</span>
+              <br />
+              <span className="font-medium text-gray-700 dark:text-gray-200">{taskProviderName}</span>
+              <span className="text-gray-400 dark:text-gray-500"> · {taskProfileName} · {taskModel}</span>
+            </div>
             <div className="grid grid-cols-2 gap-2 text-xs mb-4">
               <div className="bg-gray-50 dark:bg-white/[0.03] rounded-lg px-3 py-2">
                 <span className="text-gray-400 dark:text-gray-500">尺寸</span>

src/components/DetailModal.tsx

@@ -741,11 +741,13 @@ export default function InputBar() {
             setLightboxImageId(img.id, inputImages.map((i) => i.id))
           }}
         >
-          <img
-            src={displaySrc}
-            className="w-full h-full object-cover hover:opacity-90 transition-opacity pointer-events-none"
-            alt=""
-          />
+          {displaySrc && (
+            <img
+              src={displaySrc}
+              className="w-full h-full object-cover hover:opacity-90 transition-opacity pointer-events-none"
+              alt=""
+            />
+          )}
           {isMaskTarget && (
             <span className="absolute left-1 top-1 rounded bg-blue-500/90 px-1.5 py-0.5 text-[8px] leading-none text-white font-bold tracking-wider backdrop-blur-sm z-10 pointer-events-none">
               MASK
@@ -811,7 +813,7 @@ export default function InputBar() {
           {inputImages.map((img, idx) => renderImageThumb(img, idx))}
           {renderClearAllButton()}
         </div>
-        {touchDragPreview && createPortal(
+        {touchDragPreview?.src && createPortal(
           <div
             className="fixed z-[140] h-[52px] w-[52px] overflow-hidden rounded-xl shadow-xl pointer-events-none opacity-90"
             style={{ left: touchDragPreview.x, top: touchDragPreview.y, transform: 'translate(-50%, -50%)' }}