feat: add openai endpoint support

ui/components/panels/LlmControls.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from 'react'
 import { Select } from 'radix-ui'
 import { useTranslation } from 'react-i18next'
+import { OPENAI_COMPATIBLE_MODEL_ID } from '@/lib/openai'
 import { useAppStore } from '@/lib/store'
 import { TooltipButton } from '@/components/ui/form-controls'
 
@@ -19,12 +20,21 @@ export function LlmControls() {
     llmToggleLoadUnload,
     llmGenerate,
     llmCheckReady,
+    llmOpenAIEndpoint,
+    llmOpenAIApiKey,
+    llmOpenAIPrompt,
+    llmOpenAIModel,
+    setLlmOpenAIEndpoint,
+    setLlmOpenAIApiKey,
+    setLlmOpenAIPrompt,
+    setLlmOpenAIModel,
   } = useAppStore()
   const [generating, setGenerating] = useState(false)
   const { t } = useTranslation()
 
   const activeLanguages =
     llmModels.find((model) => model.id === llmSelectedModel)?.languages ?? []
+  const isOpenAICompatible = llmSelectedModel === OPENAI_COMPATIBLE_MODEL_ID
 
   useEffect(() => {
     llmList()
@@ -64,7 +74,11 @@ export function LlmControls() {
                       value={model.id}
                       className='rounded px-3 py-1.5 text-sm outline-none select-none hover:bg-black/5 data-[state=checked]:bg-black/5'
                     >
-                      <Select.ItemText>{model.id}</Select.ItemText>
+                      <Select.ItemText>
+                        {model.id === OPENAI_COMPATIBLE_MODEL_ID
+                          ? t('llm.openaiCompatible')
+                          : model.id}
+                      </Select.ItemText>
                     </Select.Item>
                   ))}
                 </Select.Viewport>
@@ -103,14 +117,67 @@ export function LlmControls() {
           </div>
         ) : null}
       </div>
+      {isOpenAICompatible ? (
+        <div className='space-y-2 rounded border border-neutral-200 bg-white p-2'>
+          <div className='space-y-1'>
+            <div className='text-[11px] font-semibold tracking-wide text-neutral-500 uppercase'>
+              {t('llm.openaiEndpointLabel')}
+            </div>
+            <input
+              type='text'
+              value={llmOpenAIEndpoint}
+              placeholder={t('llm.openaiEndpointPlaceholder')}
+              onChange={(event) => setLlmOpenAIEndpoint(event.target.value)}
+              className='w-full rounded border border-neutral-200 bg-white px-2 py-1.5 text-sm text-neutral-800 outline-none focus:border-rose-400'
+            />
+          </div>
+          <div className='space-y-1'>
+            <div className='text-[11px] font-semibold tracking-wide text-neutral-500 uppercase'>
+              {t('llm.openaiApiKeyLabel')}
+            </div>
+            <input
+              type='password'
+              value={llmOpenAIApiKey}
+              placeholder={t('llm.openaiApiKeyPlaceholder')}
+              autoComplete='off'
+              onChange={(event) => setLlmOpenAIApiKey(event.target.value)}
+              className='w-full rounded border border-neutral-200 bg-white px-2 py-1.5 text-sm text-neutral-800 outline-none focus:border-rose-400'
+            />
+          </div>
+          <div className='space-y-1'>
+            <div className='text-[11px] font-semibold tracking-wide text-neutral-500 uppercase'>
+              {t('llm.openaiModelLabel')}
+            </div>
+            <input
+              value={llmOpenAIModel}
+              placeholder={t('llm.openaiModelPlaceholder')}
+              onChange={(event) => setLlmOpenAIModel(event.target.value)}
+              className='w-full rounded border border-neutral-200 bg-white px-2 py-1.5 text-sm text-neutral-800 outline-none focus:border-rose-400'
+            />
+          </div>
+          <div className='space-y-1'>
+            <div className='text-[11px] font-semibold tracking-wide text-neutral-500 uppercase'>
+              {t('llm.openaiPromptLabel')}
+            </div>
+            <textarea
+              value={llmOpenAIPrompt}
+              rows={3}
+              onChange={(event) => setLlmOpenAIPrompt(event.target.value)}
+              className='w-full rounded border border-neutral-200 bg-white px-2 py-2 text-sm text-neutral-800 outline-none focus:border-rose-400'
+            />
+          </div>
+        </div>
+      ) : null}
       <div className='flex gap-2'>
-        <TooltipButton
-          label={!llmReady ? t('llm.load') : t('llm.unload')}
-          tooltip={!llmReady ? t('llm.loadTooltip') : t('llm.unloadTooltip')}
-          widthClass='w-full'
-          onClick={llmToggleLoadUnload}
-          disabled={!llmSelectedModel || llmLoading}
-        />
+        {!isOpenAICompatible && (
+          <TooltipButton
+            label={!llmReady ? t('llm.load') : t('llm.unload')}
+            tooltip={!llmReady ? t('llm.loadTooltip') : t('llm.unloadTooltip')}
+            widthClass='w-full'
+            onClick={llmToggleLoadUnload}
+            disabled={!llmSelectedModel || llmLoading || isOpenAICompatible}
+          />
+        )}
         <TooltipButton
           label={generating ? t('llm.generating') : t('llm.generate')}
           tooltip={t('llm.generateTooltip')}
@@ -119,6 +186,8 @@ export function LlmControls() {
             setGenerating(true)
             try {
               await llmGenerate(null)
+            } catch (error) {
+              console.error(error)
             } finally {
               setGenerating(false)
             }

ui/components/panels/TextBlocksPanel.tsx

@@ -7,6 +7,7 @@ import { TextBlock } from '@/types'
 import { Languages } from 'lucide-react'
 import { TextareaField, TooltipButton } from '@/components/ui/form-controls'
 import { useTextBlocks } from '@/hooks/useTextBlocks'
+import { isOpenAIConfigured, OPENAI_COMPATIBLE_MODEL_ID } from '@/lib/openai'
 import { useAppStore } from '@/lib/store'
 
 export function TextBlocksPanel() {
@@ -18,8 +19,18 @@ export function TextBlocksPanel() {
     replaceBlock,
   } = useTextBlocks()
   const { t } = useTranslation()
-  const { llmGenerate, llmReady } = useAppStore()
+  const {
+    llmGenerate,
+    llmReady,
+    llmSelectedModel,
+    llmOpenAIEndpoint,
+    llmOpenAIApiKey,
+  } = useAppStore()
   const [generatingIndex, setGeneratingIndex] = useState<number | null>(null)
+  const llmAvailable =
+    llmSelectedModel === OPENAI_COMPATIBLE_MODEL_ID
+      ? isOpenAIConfigured(llmOpenAIEndpoint, llmOpenAIApiKey)
+      : llmReady
 
   if (!document) {
     return (
@@ -36,6 +47,8 @@ export function TextBlocksPanel() {
     setGeneratingIndex(blockIndex)
     try {
       await llmGenerate(undefined, undefined, blockIndex)
+    } catch (error) {
+      console.error(error)
     } finally {
       setGeneratingIndex(null)
     }
@@ -75,7 +88,7 @@ export function TextBlocksPanel() {
                   onChange={(updates) => void replaceBlock(index, updates)}
                   onGenerate={() => void handleGenerate(index)}
                   generating={generatingIndex === index}
-                  llmReady={llmReady}
+                  llmReady={llmAvailable}
                 />
               ))}
             </Accordion.Root>

ui/lib/openai.ts

@@ -0,0 +1,97 @@
+export type LlmModelInfo = {
+  id: string
+  languages: string[]
+}
+
+export const OPENAI_COMPATIBLE_MODEL_ID = 'openai-compatible'
+export const OPENAI_DEFAULT_MODEL = 'gpt-4o-mini'
+
+export const OPENAI_COMPATIBLE_MODEL: LlmModelInfo = {
+  id: OPENAI_COMPATIBLE_MODEL_ID,
+  languages: [],
+}
+
+export const isOpenAIModel = (modelId?: string) =>
+  modelId === OPENAI_COMPATIBLE_MODEL_ID
+
+export const isOpenAIConfigured = (endpoint: string, apiKey: string) =>
+  endpoint.trim().length > 0 || apiKey.trim().length > 0
+
+const normalizeOpenAIEndpoint = (endpoint: string) => {
+  const baseEndpoint = endpoint.trim() || 'https://api.openai.com/v1/'
+
+  const parsed = new URL(baseEndpoint)
+  if (!parsed.pathname.endsWith('/chat/completions')) {
+    const normalizedPath = parsed.pathname.replace(/\/$/, '')
+    parsed.pathname = `${normalizedPath}/chat/completions`
+  }
+  return parsed.toString()
+}
+
+type OpenAIChoice = {
+  message?: { content?: string }
+  text?: string
+}
+
+const parseOpenAIResponse = (payload: { choices?: OpenAIChoice[] }) => {
+  const choice = payload?.choices?.[0]
+  const content = choice?.message?.content ?? choice?.text
+  if (!content) {
+    throw new Error('OpenAI compatible response missing content')
+  }
+  return content.trim()
+}
+
+export const callOpenAICompletion = async ({
+  endpoint,
+  apiKey,
+  prompt,
+  content,
+  model,
+}: {
+  endpoint: string
+  apiKey: string
+  prompt: string
+  content: string
+  model?: string
+}) => {
+  const resolvedEndpoint = endpoint.trim() || 'https://api.openai.com/v1/'
+  const url = normalizeOpenAIEndpoint(resolvedEndpoint)
+  if (resolvedEndpoint === 'https://api.openai.com/v1/' && !apiKey.trim()) {
+    throw new Error('OpenAI compatible API key is required')
+  }
+  const parsed = new URL(url)
+  const selectedModel =
+    model?.trim() || parsed.searchParams.get('model') || OPENAI_DEFAULT_MODEL
+  parsed.searchParams.delete('model')
+
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+  }
+  if (apiKey && apiKey.trim()) {
+    headers.Authorization = `Bearer ${apiKey}`
+  }
+
+  const response = await fetch(parsed.toString(), {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({
+      model: selectedModel,
+      messages: [
+        { role: 'system', content: prompt },
+        { role: 'user', content },
+      ],
+      temperature: 0.2,
+    }),
+  })
+
+  if (!response.ok) {
+    const message = await response.text()
+    throw new Error(
+      `OpenAI compatible request failed (${response.status}): ${message}`,
+    )
+  }
+
+  const payload = (await response.json()) as { choices?: OpenAIChoice[] }
+  return parseOpenAIResponse(payload)
+}

ui/lib/store.ts

@@ -5,6 +5,15 @@ import { invoke } from '@tauri-apps/api/core'
 import { getCurrentWindow, ProgressBarStatus } from '@tauri-apps/api/window'
 import { Document, TextBlock, ToolMode } from '@/types'
 import { createOperationSlice, type OperationSlice } from '@/lib/operations'
+import {
+  callOpenAICompletion,
+  isOpenAIConfigured,
+  isOpenAIModel,
+  OPENAI_COMPATIBLE_MODEL,
+  OPENAI_DEFAULT_MODEL,
+  type LlmModelInfo,
+} from '@/lib/openai'
+import { t } from 'i18next'
 
 type ProcessImageOptions =
   | ((progress: number) => Promise<void>)
@@ -13,11 +22,6 @@ type ProcessImageOptions =
       skipOperationTracking?: boolean
     }
 
-export type LlmModelInfo = {
-  id: string
-  languages: string[]
-}
-
 const replaceDocument = (docs: Document[], index: number, doc: Document) =>
   docs.map((item, idx) => (idx === index ? doc : item))
 
@@ -89,6 +93,10 @@ type AppState = OperationSlice & {
   llmSelectedLanguage?: string
   llmReady: boolean
   llmLoading: boolean
+  llmOpenAIEndpoint: string
+  llmOpenAIApiKey: string
+  llmOpenAIPrompt: string
+  llmOpenAIModel: string
   // ui + actions
   hydrateDocuments: (docs: Document[]) => void
   openDocuments: () => Promise<void>
@@ -104,7 +112,6 @@ type AppState = OperationSlice & {
   setSelectedBlockIndex: (index?: number) => void
   setAutoFitEnabled: (enabled: boolean) => void
   updateTextBlocks: (textBlocks: TextBlock[]) => Promise<void>
-  invokeWithStatus: (command: string, args?: any) => Promise<Document>
   setProgress: (progress?: number, status?: ProgressBarStatus) => Promise<void>
   clearProgress: () => Promise<void>
   // Processing actions
@@ -132,417 +139,534 @@ type AppState = OperationSlice & {
     index?: number,
     text_block_index?: number,
   ) => Promise<void>
+  setLlmOpenAIEndpoint: (endpoint: string) => void
+  setLlmOpenAIApiKey: (apiKey: string) => void
+  setLlmOpenAIPrompt: (prompt: string) => void
+  setLlmOpenAIModel: (model: string) => void
 }
 
-export const useAppStore = create<AppState>((set, get) => ({
-  ...createOperationSlice(set),
-  documents: [],
-  currentDocumentIndex: 0,
-  scale: 100,
-  showSegmentationMask: false,
-  showInpaintedImage: false,
-  showRenderedImage: false,
-  showTextBlocksOverlay: false,
-  mode: 'select',
-  selectedBlockIndex: undefined,
-  autoFitEnabled: true,
-  llmModels: [],
-  llmSelectedModel: undefined,
-  llmSelectedLanguage: undefined,
-  llmReady: false,
-  llmLoading: false,
-  operation: undefined,
-  hydrateDocuments: (docs: Document[]) => {
-    set({
-      documents: docs,
-      currentDocumentIndex: 0,
-      selectedBlockIndex: undefined,
-    })
-  },
-  openDocuments: async () => {
-    get().startOperation({ type: 'load-khr', cancellable: false })
-    try {
-      const docs: Document[] = await invoke('open_documents')
-      get().hydrateDocuments(docs)
-    } finally {
-      get().finishOperation()
-    }
-  },
-  saveDocuments: async () => {
-    get().startOperation({ type: 'save-khr', cancellable: false })
-    try {
-      await invoke('save_documents')
-    } finally {
-      get().finishOperation()
-    }
-  },
-  openExternal: async (url: string) => {
-    await invoke('open_external', { url })
-  },
-  setCurrentDocumentIndex: (index: number) => {
-    set({ currentDocumentIndex: index, selectedBlockIndex: undefined })
-  },
-  setScale: (scale: number) => {
-    const clamped = Math.max(10, Math.min(100, Math.round(scale)))
-    set({ scale: clamped })
-  },
-  setShowSegmentationMask: (show: boolean) => {
-    set({ showSegmentationMask: show })
-  },
-  setShowInpaintedImage: (show: boolean) => {
-    set({ showInpaintedImage: show })
-  },
-  setShowRenderedImage: (show: boolean) => {
-    set({ showRenderedImage: show })
-  },
-  setShowTextBlocksOverlay: (show: boolean) => {
-    set({ showTextBlocksOverlay: show })
-  },
-  setMode: (mode: ToolMode) => set({ mode }),
-  setSelectedBlockIndex: (index?: number) => set({ selectedBlockIndex: index }),
-  setAutoFitEnabled: (enabled: boolean) => set({ autoFitEnabled: enabled }),
-  updateTextBlocks: async (textBlocks: TextBlock[]) => {
-    const { documents, currentDocumentIndex } = get()
-    const doc = documents[currentDocumentIndex]
+export const useAppStore = create<AppState>((set, get) => {
+  const isOpenAICompatible = () => isOpenAIModel(get().llmSelectedModel)
+
+  const syncOpenAIReady = () => {
+    if (!isOpenAICompatible()) return false
+    const { llmOpenAIEndpoint, llmOpenAIApiKey } = get()
+    const ready = isOpenAIConfigured(llmOpenAIEndpoint, llmOpenAIApiKey)
+    set({ llmReady: ready, llmLoading: false })
+    return true
+  }
+
+  const generateWithOpenAI = async (
+    index: number,
+    textBlockIndex?: number,
+  ): Promise<Document | void> => {
+    const {
+      documents,
+      llmOpenAIEndpoint,
+      llmOpenAIApiKey,
+      llmOpenAIPrompt,
+      llmOpenAIModel,
+    } = get()
+    const doc = documents[index]
     if (!doc) return
-    const updatedDoc: Document = {
-      ...doc,
-      textBlocks,
-    }
-    set({
-      documents: replaceDocument(documents, currentDocumentIndex, updatedDoc),
-    })
-    await textBlockSyncer.enqueue(currentDocumentIndex, textBlocks)
-  },
-  invokeWithStatus: async (command: string, args: {}) => {
-    let ret: Document = await invoke<Document>(command, args)
-    return ret
-  },
-  detect: async (_, index) => {
-    index = index ?? get().currentDocumentIndex
-    const doc: Document = await get().invokeWithStatus('detect', {
-      index,
-    })
-    set((state) => ({
-      documents: replaceDocument(state.documents, index, doc),
-      showRenderedImage: false, // hide rendered image to show the boxes
-    }))
-  },
-  ocr: async (_, index) => {
-    index = index ?? get().currentDocumentIndex
-    const doc: Document = await get().invokeWithStatus('ocr', { index })
-    set((state) => ({
-      documents: replaceDocument(state.documents, index, doc),
-    }))
-  },
-  inpaint: async (_, index) => {
-    index = index ?? get().currentDocumentIndex
     await textBlockSyncer.flush()
-    const doc: Document = await get().invokeWithStatus('inpaint', {
-      index,
+
+    const blocks = doc.textBlocks ?? []
+    const hasSingle = typeof textBlockIndex === 'number' && textBlockIndex >= 0
+    const sourceText = hasSingle
+      ? (blocks[textBlockIndex!]?.text ?? '')
+      : blocks.map((block) => block.text ?? '').join('\n')
+    if (!sourceText.trim()) return
+
+    const completion = await callOpenAICompletion({
+      endpoint: llmOpenAIEndpoint,
+      apiKey: llmOpenAIApiKey,
+      prompt: llmOpenAIPrompt.trim(),
+      content: sourceText,
+      model: llmOpenAIModel,
     })
-    set((state) => ({
-      documents: replaceDocument(state.documents, index, doc),
-      showInpaintedImage: true,
-    }))
-  },
-  render: async (_, index) => {
-    index = index ?? get().currentDocumentIndex
-    await textBlockSyncer.flush()
-    const doc: Document = await get().invokeWithStatus('render', { index })
-    set((state) => ({
-      documents: replaceDocument(state.documents, index, doc),
-      showRenderedImage: true,
-    }))
-  },
-  llmList: async () => {
-    try {
-      const models = await invoke<LlmModelInfo[]>('llm_list')
-      set({ llmModels: models })
-      const currentModel = get().llmSelectedModel
-      const currentLanguage = get().llmSelectedLanguage
-      const hasCurrent = models.some((model) => model.id === currentModel)
-      const nextModel = hasCurrent
-        ? (currentModel ?? models[0]?.id)
-        : models[0]?.id
+
+    const translatedLines = hasSingle ? null : completion.split(/\r?\n/)
+    const updatedBlocks = blocks.map((block, i) => {
+      if (hasSingle) {
+        return i === textBlockIndex
+          ? { ...block, translation: completion }
+          : block
+      }
+      const translated = translatedLines?.[i]
+      if (translated === undefined) return block
+      return { ...block, translation: translated }
+    })
+
+    return { ...doc, textBlocks: updatedBlocks }
+  }
+
+  return {
+    ...createOperationSlice(set),
+    documents: [],
+    currentDocumentIndex: 0,
+    scale: 100,
+    showSegmentationMask: false,
+    showInpaintedImage: false,
+    showRenderedImage: false,
+    showTextBlocksOverlay: false,
+    mode: 'select',
+    selectedBlockIndex: undefined,
+    autoFitEnabled: true,
+    llmModels: [],
+    llmSelectedModel: undefined,
+    llmSelectedLanguage: undefined,
+    llmReady: false,
+    llmLoading: false,
+    llmOpenAIEndpoint: '',
+    llmOpenAIApiKey: '',
+    llmOpenAIPrompt: t('llm.openaiPromptPlaceholder'),
+    llmOpenAIModel: OPENAI_DEFAULT_MODEL,
+    operation: undefined,
+    hydrateDocuments: (docs: Document[]) => {
+      set({
+        documents: docs,
+        currentDocumentIndex: 0,
+        selectedBlockIndex: undefined,
+      })
+    },
+    openDocuments: async () => {
+      get().startOperation({ type: 'load-khr', cancellable: false })
+      try {
+        const docs: Document[] = await invoke('open_documents')
+        get().hydrateDocuments(docs)
+      } finally {
+        get().finishOperation()
+      }
+    },
+    saveDocuments: async () => {
+      get().startOperation({ type: 'save-khr', cancellable: false })
+      try {
+        await invoke('save_documents')
+      } finally {
+        get().finishOperation()
+      }
+    },
+    openExternal: async (url: string) => {
+      await invoke('open_external', { url })
+    },
+    setCurrentDocumentIndex: (index: number) => {
+      set({ currentDocumentIndex: index, selectedBlockIndex: undefined })
+    },
+    setScale: (scale: number) => {
+      const clamped = Math.max(10, Math.min(100, Math.round(scale)))
+      set({ scale: clamped })
+    },
+    setShowSegmentationMask: (show: boolean) => {
+      set({ showSegmentationMask: show })
+    },
+    setShowInpaintedImage: (show: boolean) => {
+      set({ showInpaintedImage: show })
+    },
+    setShowRenderedImage: (show: boolean) => {
+      set({ showRenderedImage: show })
+    },
+    setShowTextBlocksOverlay: (show: boolean) => {
+      set({ showTextBlocksOverlay: show })
+    },
+    setMode: (mode: ToolMode) => set({ mode }),
+    setSelectedBlockIndex: (index?: number) =>
+      set({ selectedBlockIndex: index }),
+    setAutoFitEnabled: (enabled: boolean) => set({ autoFitEnabled: enabled }),
+    updateTextBlocks: async (textBlocks: TextBlock[]) => {
+      const { documents, currentDocumentIndex } = get()
+      const doc = documents[currentDocumentIndex]
+      if (!doc) return
+      const updatedDoc: Document = {
+        ...doc,
+        textBlocks,
+      }
+      set({
+        documents: replaceDocument(documents, currentDocumentIndex, updatedDoc),
+      })
+      await textBlockSyncer.enqueue(currentDocumentIndex, textBlocks)
+    },
+    detect: async (_, index) => {
+      index = index ?? get().currentDocumentIndex
+      const doc: Document = await invoke<Document>('detect', {
+        index,
+      })
+      set((state) => ({
+        documents: replaceDocument(state.documents, index, doc),
+        showRenderedImage: false, // hide rendered image to show the boxes
+      }))
+    },
+    ocr: async (_, index) => {
+      index = index ?? get().currentDocumentIndex
+      const doc: Document = await invoke<Document>('ocr', { index })
+      set((state) => ({
+        documents: replaceDocument(state.documents, index, doc),
+      }))
+    },
+    inpaint: async (_, index) => {
+      index = index ?? get().currentDocumentIndex
+      await textBlockSyncer.flush()
+      const doc: Document = await invoke<Document>('inpaint', {
+        index,
+      })
+      set((state) => ({
+        documents: replaceDocument(state.documents, index, doc),
+        showInpaintedImage: true,
+      }))
+    },
+    render: async (_, index) => {
+      index = index ?? get().currentDocumentIndex
+      await textBlockSyncer.flush()
+      const doc: Document = await invoke<Document>('render', { index })
+      set((state) => ({
+        documents: replaceDocument(state.documents, index, doc),
+        showRenderedImage: true,
+      }))
+    },
+    llmList: async () => {
+      try {
+        const models = [
+          ...(await invoke<LlmModelInfo[]>('llm_list')),
+          OPENAI_COMPATIBLE_MODEL,
+        ]
+        set({ llmModels: models })
+        const currentModel = get().llmSelectedModel
+        const currentLanguage = get().llmSelectedLanguage
+        const hasCurrent = models.some((model) => model.id === currentModel)
+        const nextModel = hasCurrent
+          ? (currentModel ?? models[0]?.id)
+          : models[0]?.id
+        const nextLanguage = pickLanguage(
+          models,
+          nextModel,
+          hasCurrent ? currentLanguage : undefined,
+        )
+        set({
+          llmSelectedModel: nextModel,
+          llmSelectedLanguage: nextLanguage,
+        })
+        syncOpenAIReady()
+      } catch (_) {}
+    },
+    llmSetSelectedModel: async (id: string) => {
+      await invoke('llm_offload')
       const nextLanguage = pickLanguage(
-        models,
-        nextModel,
-        hasCurrent ? currentLanguage : undefined,
+        get().llmModels,
+        id,
+        get().llmSelectedLanguage,
       )
       set({
-        llmSelectedModel: nextModel,
+        llmSelectedModel: id,
         llmSelectedLanguage: nextLanguage,
+        llmLoading: false,
+        llmReady: false,
       })
-    } catch (_) {}
-  },
-  llmSetSelectedModel: async (id: string) => {
-    await invoke('llm_offload')
-    const nextLanguage = pickLanguage(
-      get().llmModels,
-      id,
-      get().llmSelectedLanguage,
-    )
-    set({
-      llmSelectedModel: id,
-      llmSelectedLanguage: nextLanguage,
-      llmLoading: false,
-      llmReady: false,
-    })
-  },
-  llmSetSelectedLanguage: (language: string) => {
-    const languages = findModelLanguages(
-      get().llmModels,
-      get().llmSelectedModel,
-    )
-    if (!languages.includes(language)) return
-    set({ llmSelectedLanguage: language })
-  },
-  llmToggleLoadUnload: async () => {
-    // unload
-    if (get().llmReady) {
-      await invoke('llm_offload')
-      set({ llmLoading: false, llmReady: false })
-      return
-    }
+      syncOpenAIReady()
+    },
+    llmSetSelectedLanguage: (language: string) => {
+      const languages = findModelLanguages(
+        get().llmModels,
+        get().llmSelectedModel,
+      )
+      if (!languages.includes(language)) return
+      set({ llmSelectedLanguage: language })
+    },
+    llmToggleLoadUnload: async () => {
+      if (isOpenAICompatible()) {
+        syncOpenAIReady()
+        return
+      }
 
-    // load
-    const id = get().llmSelectedModel
-    if (!id) return
-    get().startOperation({
-      type: 'llm-load',
-      cancellable: false,
-    })
-    let ready = false
-    try {
-      await invoke('llm_load', { id })
-
-      await get().setProgress(100, ProgressBarStatus.Paused)
-
-      set({ llmLoading: true })
-      // poll for llmCheckReady and set llmLoading false
-      let try_time = 0
-      while (try_time++ < 300) {
-        await get().llmCheckReady()
-        if (get().llmReady) {
-          ready = true
-          await get().clearProgress()
+      // unload
+      if (get().llmReady) {
+        await invoke('llm_offload')
+        set({ llmLoading: false, llmReady: false })
+        return
+      }
+
+      // load
+      const id = get().llmSelectedModel
+      if (!id) return
+      get().startOperation({
+        type: 'llm-load',
+        cancellable: false,
+      })
+      let ready = false
+      try {
+        await invoke('llm_load', { id })
+
+        await get().setProgress(100, ProgressBarStatus.Paused)
+
+        set({ llmLoading: true })
+        // poll for llmCheckReady and set llmLoading false
+        let try_time = 0
+        while (try_time++ < 300) {
+          await get().llmCheckReady()
+          if (get().llmReady) {
+            ready = true
+            await get().clearProgress()
+            set({ llmLoading: false })
+            break
+          }
+          await new Promise((resolve) => setTimeout(resolve, 100))
+        }
+      } finally {
+        if (!ready) {
           set({ llmLoading: false })
-          break
+          await get().clearProgress()
         }
-        await new Promise((resolve) => setTimeout(resolve, 100))
+        get().finishOperation()
       }
-    } finally {
-      if (!ready) {
-        set({ llmLoading: false })
-        await get().clearProgress()
+    },
+    llmCheckReady: async () => {
+      if (syncOpenAIReady()) return
+      try {
+        const ready = await invoke<boolean>('llm_ready')
+        set({ llmReady: ready })
+      } catch (_) {}
+    },
+    llmGenerate: async (_: any, index?: number, textBlockIndex?: number) => {
+      index = index ?? get().currentDocumentIndex
+      const languages = findModelLanguages(
+        get().llmModels,
+        get().llmSelectedModel,
+      )
+      const selectedLanguage = get().llmSelectedLanguage
+      const language =
+        languages.length > 0
+          ? selectedLanguage && languages.includes(selectedLanguage)
+            ? selectedLanguage
+            : languages[0]
+          : undefined
+
+      let doc: Document | void = undefined
+      if (isOpenAICompatible()) {
+        if (!syncOpenAIReady()) {
+          throw new Error(
+            'Provide an OpenAI compatible endpoint and API key to generate translations.',
+          )
+        }
+        doc = await generateWithOpenAI(index, textBlockIndex)
       }
-      get().finishOperation()
-    }
-  },
-  llmCheckReady: async () => {
-    try {
-      const ready = await invoke<boolean>('llm_ready')
-      set({ llmReady: ready })
-    } catch (_) {}
-  },
-  llmGenerate: async (_: any, index?: number, textBlockIndex?: number) => {
-    index = index ?? get().currentDocumentIndex
-    console.log(
-      'Generating LLM content for document',
-      index,
-      'text block',
-      textBlockIndex,
-    )
-    const languages = findModelLanguages(
-      get().llmModels,
-      get().llmSelectedModel,
-    )
-    const selectedLanguage = get().llmSelectedLanguage
-    const language =
-      languages.length > 0
-        ? selectedLanguage && languages.includes(selectedLanguage)
-          ? selectedLanguage
-          : languages[0]
-        : undefined
-    const doc: Document = await get().invokeWithStatus('llm_generate', {
-      index,
-      textBlockIndex,
-      language,
-    })
-    set((state) => ({
-      documents: replaceDocument(state.documents, index, doc),
-      showTextBlocksOverlay: true,
-    }))
-  },
-
-  // batch proceeses
-  processImage: async (_, index, options) => {
-    const normalizedOptions =
-      typeof options === 'function'
-        ? { onProgress: options, skipOperationTracking: false }
-        : (options ?? {})
 
-    const { onProgress, skipOperationTracking } = normalizedOptions
-    const operation = get().operation
-    const isBatchRun = operation?.type === 'process-all'
-
-    if (!get().llmReady) {
-      await get().llmList()
-      await get().llmToggleLoadUnload()
-    }
-
-    index = index ?? get().currentDocumentIndex
-    console.log('Processing image at index', index)
-    const setProgres = onProgress ?? get().setProgress
-    const shouldTrackOperation = skipOperationTracking !== true && !isBatchRun
-    const ownsOperation = shouldTrackOperation && !isBatchRun
-
-    const actions = ['detect', 'ocr', 'inpaint', 'llmGenerate'] as const
-    const totalSteps = actions.length
-
-    if (shouldTrackOperation) {
-      const firstStep = actions[0] ?? 'detect'
-      if (ownsOperation) {
-        get().startOperation({
-          type: 'process-current',
-          step: firstStep,
-          current: 0,
-          total: totalSteps,
-          cancellable: true,
-        })
-      } else {
-        get().updateOperation({
-          step: firstStep,
-          current: 0,
-          total: totalSteps,
+      if (doc === undefined) {
+        doc = await invoke<Document>('llm_generate', {
+          index,
+          textBlockIndex,
+          language,
         })
       }
-    }
-
-    await setProgres(0)
-    for (let i = 0; i < actions.length; i++) {
-      if (get().operation?.cancelRequested) {
-        break
+      set((state) => ({
+        documents: replaceDocument(state.documents, index, doc),
+        showTextBlocksOverlay: true,
+      }))
+    },
+    setLlmOpenAIEndpoint: (endpoint: string) => {
+      set({ llmOpenAIEndpoint: endpoint })
+      syncOpenAIReady()
+    },
+    setLlmOpenAIApiKey: (apiKey: string) => {
+      set({ llmOpenAIApiKey: apiKey })
+      syncOpenAIReady()
+    },
+    setLlmOpenAIPrompt: (prompt: string) => {
+      set({ llmOpenAIPrompt: prompt })
+      syncOpenAIReady()
+    },
+    setLlmOpenAIModel: (model: string) => {
+      set({ llmOpenAIModel: model })
+      syncOpenAIReady()
+    },
+
+    // batch proceeses
+    processImage: async (_, index, options) => {
+      const openAISelected = isOpenAICompatible()
+      const normalizedOptions =
+        typeof options === 'function'
+          ? { onProgress: options, skipOperationTracking: false }
+          : (options ?? {})
+
+      const { onProgress, skipOperationTracking } = normalizedOptions
+      const operation = get().operation
+      const isBatchRun = operation?.type === 'process-all'
+
+      if (!get().llmReady && !openAISelected) {
+        await get().llmList()
+        await get().llmToggleLoadUnload()
+      } else if (openAISelected) {
+        syncOpenAIReady()
+        if (!get().llmReady) {
+          throw new Error(
+            'OpenAI compatible endpoint and API key are required before processing.',
+          )
+        }
       }
 
-      const action = actions[i]
+      index = index ?? get().currentDocumentIndex
+      console.log('Processing image at index', index)
+      const setProgres = onProgress ?? get().setProgress
+      const shouldTrackOperation = skipOperationTracking !== true && !isBatchRun
+      const ownsOperation = shouldTrackOperation && !isBatchRun
+
+      const actions: Array<'detect' | 'ocr' | 'inpaint' | 'llmGenerate'> = [
+        'detect',
+        'ocr',
+        'inpaint',
+        'llmGenerate',
+      ]
+      const totalSteps = actions.length
 
       if (shouldTrackOperation) {
-        get().updateOperation({
-          step: action,
-          current: i,
-          total: totalSteps,
-        })
+        const firstStep = actions[0] ?? 'detect'
+        if (ownsOperation) {
+          get().startOperation({
+            type: 'process-current',
+            step: firstStep,
+            current: 0,
+            total: totalSteps,
+            cancellable: true,
+          })
+        } else {
+          get().updateOperation({
+            step: firstStep,
+            current: 0,
+            total: totalSteps,
+          })
+        }
       }
 
-      await (get() as any)[actions[i]](_, index)
-      await setProgres(Math.floor(((i + 1) / totalSteps) * 100))
-    }
-
-    const cancelled = get().operation?.cancelRequested
-
-    if (shouldTrackOperation && ownsOperation && !cancelled) {
-      get().updateOperation({ current: totalSteps, total: totalSteps })
-    }
+      await setProgres(0)
+      for (let i = 0; i < actions.length; i++) {
+        if (get().operation?.cancelRequested) {
+          break
+        }
 
-    if (shouldTrackOperation && ownsOperation) {
-      get().finishOperation()
-    }
+        const action = actions[i]
 
-    if (!onProgress) {
-      await get().clearProgress()
-    }
+        if (shouldTrackOperation) {
+          get().updateOperation({
+            step: action,
+            current: i,
+            total: totalSteps,
+          })
+        }
 
-    if (cancelled) {
-      return
-    }
-  },
+        await (get() as any)[actions[i]](_, index)
+        await setProgres(Math.floor(((i + 1) / totalSteps) * 100))
+      }
 
-  inpaintAndRenderImage: async (_, index) => {
-    index = index ?? get().currentDocumentIndex
-    await get().inpaint(_, index)
-    await get().render(_, index)
-  },
+      const cancelled = get().operation?.cancelRequested
 
-  processAllImages: async () => {
-    const total = get().documents.length
-    if (!total) return
+      if (shouldTrackOperation && ownsOperation && !cancelled) {
+        get().updateOperation({ current: totalSteps, total: totalSteps })
+      }
 
-    if (!get().llmReady) {
-      await get().llmList()
-      await get().llmToggleLoadUnload()
-    }
+      if (shouldTrackOperation && ownsOperation) {
+        get().finishOperation()
+      }
 
-    get().startOperation({
-      type: 'process-all',
-      cancellable: true,
-      current: 0,
-      total,
-    })
+      if (!onProgress) {
+        await get().clearProgress()
+      }
 
-    for (let index = 0; index < total; index++) {
-      if (get().operation?.cancelRequested) break
+      if (cancelled) {
+        return
+      }
+    },
+
+    inpaintAndRenderImage: async (_, index) => {
+      index = index ?? get().currentDocumentIndex
+      await get().inpaint(_, index)
+      await get().render(_, index)
+    },
+
+    processAllImages: async () => {
+      const total = get().documents.length
+      if (!total) return
+      const openAISelected = isOpenAICompatible()
+
+      if (!get().llmReady && !openAISelected) {
+        await get().llmList()
+        await get().llmToggleLoadUnload()
+      } else if (openAISelected) {
+        syncOpenAIReady()
+        if (!get().llmReady) {
+          throw new Error(
+            'OpenAI compatible endpoint and API key are required before processing.',
+          )
+        }
+      }
 
-      set({ currentDocumentIndex: index, selectedBlockIndex: undefined })
-      get().updateOperation({
-        current: index,
+      get().startOperation({
+        type: 'process-all',
+        cancellable: true,
+        current: 0,
         total,
       })
 
-      await get().processImage(null, index, {
-        onProgress: async (progress) => {
-          if (get().operation?.cancelRequested) return
-          const currentValue = index + progress / 100
-          const overall = Math.min(
-            100,
-            Math.round((currentValue / total) * 100),
-          )
-          await get().setProgress(overall)
-          get().updateOperation({ current: currentValue, total })
-        },
-        skipOperationTracking: true,
-      })
-
-      if (get().operation?.cancelRequested) {
-        break
-      }
+      for (let index = 0; index < total; index++) {
+        if (get().operation?.cancelRequested) break
 
-      get().updateOperation({ current: index + 1, total })
-    }
+        set({ currentDocumentIndex: index, selectedBlockIndex: undefined })
+        get().updateOperation({
+          current: index,
+          total,
+        })
 
-    if (!get().operation?.cancelRequested) {
-      get().updateOperation({ current: total, total })
-    }
+        await get().processImage(null, index, {
+          onProgress: async (progress) => {
+            if (get().operation?.cancelRequested) return
+            const currentValue = index + progress / 100
+            const overall = Math.min(
+              100,
+              Math.round((currentValue / total) * 100),
+            )
+            await get().setProgress(overall)
+            get().updateOperation({ current: currentValue, total })
+          },
+          skipOperationTracking: true,
+        })
 
-    await get().clearProgress()
-    get().finishOperation()
-  },
+        if (get().operation?.cancelRequested) {
+          break
+        }
 
-  exportDocument: async () => {
-    const index = get().currentDocumentIndex
-    await invoke('export_document', { index })
-  },
+        get().updateOperation({ current: index + 1, total })
+      }
 
-  exportAllDocuments: async () => {
-    if (!get().documents.length) return
-    await invoke('export_all_documents')
-  },
+      if (!get().operation?.cancelRequested) {
+        get().updateOperation({ current: total, total })
+      }
 
-  setProgress: async (progress?: number, state?: ProgressBarStatus) => {
-    await getCurrentWindow().setProgressBar({
-      status: state ?? ProgressBarStatus.Normal,
-      progress: progress,
-    })
-  },
+      await get().clearProgress()
+      get().finishOperation()
+    },
+
+    exportDocument: async () => {
+      const index = get().currentDocumentIndex
+      await invoke('export_document', { index })
+    },
+
+    exportAllDocuments: async () => {
+      if (!get().documents.length) return
+      await invoke('export_all_documents')
+    },
+
+    setProgress: async (progress?: number, state?: ProgressBarStatus) => {
+      await getCurrentWindow().setProgressBar({
+        status: state ?? ProgressBarStatus.Normal,
+        progress: progress,
+      })
+    },
 
-  clearProgress: async () => {
-    await getCurrentWindow().setProgressBar({
-      status: ProgressBarStatus.None,
-      progress: 0,
-    })
-  },
-}))
+    clearProgress: async () => {
+      await getCurrentWindow().setProgressBar({
+        status: ProgressBarStatus.None,
+        progress: 0,
+      })
+    },
+  }
+})
 
 type ConfigState = {
   maskConfig: {

ui/public/locales/en-US/translation.json

@@ -84,6 +84,15 @@
     "idle": "Idle",
     "selectPlaceholder": "Select model",
     "modelLabel": "Model",
+    "openaiCompatible": "OpenAI Compatible",
+    "openaiEndpointLabel": "OpenAI compatible endpoint",
+    "openaiEndpointPlaceholder": "https://api.openai.com/v1",
+    "openaiApiKeyLabel": "API key",
+    "openaiApiKeyPlaceholder": "sk-...",
+    "openaiModelLabel": "Model name",
+    "openaiModelPlaceholder": "gpt-4o-mini",
+    "openaiPromptLabel": "Prompt",
+    "openaiPromptPlaceholder": "Translate the following text to Chinese, retain formatting, do not add extra explanations:\n",
     "languageLabel": "Target language",
     "languagePlaceholder": "Select language",
     "load": "Load",

ui/public/locales/ja-JP/translation.json

@@ -84,6 +84,15 @@
     "idle": "待機中",
     "selectPlaceholder": "モデルを選択",
     "modelLabel": "モデル",
+    "openaiCompatible": "OpenAI 互換サービス",
+    "openaiEndpointLabel": "OpenAI 端点",
+    "openaiEndpointPlaceholder": "https://api.openai.com/v1",
+    "openaiApiKeyLabel": "API キー",
+    "openaiApiKeyPlaceholder": "sk-...",
+    "openaiModelLabel": "モデル名",
+    "openaiModelPlaceholder": "gpt-4o-mini",
+    "openaiPromptLabel": "プロンプト",
+    "openaiPromptPlaceholder": "以下のテキストを日本語に翻訳し、フォーマットを保持し、追加の説明を加えないでください：\n",
     "languageLabel": "翻訳先の言語",
     "languagePlaceholder": "言語を選択",
     "load": "読み込み",

ui/public/locales/zh-CN/translation.json

@@ -84,6 +84,15 @@
     "idle": "空闲",
     "selectPlaceholder": "选择模型",
     "modelLabel": "模型",
+    "openaiCompatible": "OpenAI 兼容服务",
+    "openaiEndpointLabel": "OpenAI 端点",
+    "openaiEndpointPlaceholder": "https://api.openai.com/v1",
+    "openaiApiKeyLabel": "API 密钥",
+    "openaiApiKeyPlaceholder": "sk-...",
+    "openaiModelLabel": "模型名称",
+    "openaiModelPlaceholder": "gpt-4o-mini",
+    "openaiPromptLabel": "提示词",
+    "openaiPromptPlaceholder": "将下列文本翻译为中文，保留格式，不要添加额外说明：\n",
     "languageLabel": "目标语言",
     "languagePlaceholder": "选择语言",
     "load": "加载",

ui/public/locales/zh-TW/translation.json

@@ -84,6 +84,15 @@
     "idle": "閒置",
     "selectPlaceholder": "選擇模型",
     "modelLabel": "模型",
+    "openaiCompatible": "OpenAI 兼容服務",
+    "openaiEndpointLabel": "OpenAI 端點",
+    "openaiEndpointPlaceholder": "https://api.openai.com/v1",
+    "openaiApiKeyLabel": "API 密鑰",
+    "openaiApiKeyPlaceholder": "sk-...",
+    "openaiModelLabel": "模型名稱",
+    "openaiModelPlaceholder": "gpt-4o-mini",
+    "openaiPromptLabel": "提示詞",
+    "openaiPromptPlaceholder": "將下列文本翻譯為繁體中文，保留格式，不要添加額外說明：\n",
     "languageLabel": "目標語言",
     "languagePlaceholder": "選擇語言",
     "load": "載入",