427 lines
15 KiB
TypeScript
427 lines
15 KiB
TypeScript
import { createFileRoute } from '@tanstack/react-router'
|
|
import { route } from '@/constants/routes'
|
|
import HeaderPage from '@/containers/HeaderPage'
|
|
import SettingsMenu from '@/containers/SettingsMenu'
|
|
import { Card, CardItem } from '@/containers/Card'
|
|
import { Switch } from '@/components/ui/switch'
|
|
import { Button } from '@/components/ui/button'
|
|
import { useTranslation } from '@/i18n/react-i18next-compat'
|
|
import { ServerHostSwitcher } from '@/containers/ServerHostSwitcher'
|
|
import { PortInput } from '@/containers/PortInput'
|
|
import { ProxyTimeoutInput } from '@/containers/ProxyTimeoutInput'
|
|
import { ApiPrefixInput } from '@/containers/ApiPrefixInput'
|
|
import { TrustedHostsInput } from '@/containers/TrustedHostsInput'
|
|
import { useLocalApiServer } from '@/hooks/useLocalApiServer'
|
|
import { useAppState } from '@/hooks/useAppState'
|
|
import { useModelProvider } from '@/hooks/useModelProvider'
|
|
import { useServiceHub } from '@/hooks/useServiceHub'
|
|
import { localStorageKey } from '@/constants/localStorage'
|
|
import { IconLogs } from '@tabler/icons-react'
|
|
import { cn } from '@/lib/utils'
|
|
import { ApiKeyInput } from '@/containers/ApiKeyInput'
|
|
import { useEffect, useState } from 'react'
|
|
import { PlatformGuard } from '@/lib/platform/PlatformGuard'
|
|
import { PlatformFeature } from '@/lib/platform'
|
|
import { toast } from 'sonner'
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
export const Route = createFileRoute(route.settings.local_api_server as any)({
|
|
component: LocalAPIServer,
|
|
})
|
|
|
|
function LocalAPIServer() {
|
|
return (
|
|
<PlatformGuard feature={PlatformFeature.LOCAL_API_SERVER}>
|
|
<LocalAPIServerContent />
|
|
</PlatformGuard>
|
|
)
|
|
}
|
|
|
|
function LocalAPIServerContent() {
|
|
const { t } = useTranslation()
|
|
const serviceHub = useServiceHub()
|
|
const {
|
|
corsEnabled,
|
|
setCorsEnabled,
|
|
verboseLogs,
|
|
setVerboseLogs,
|
|
enableOnStartup,
|
|
setEnableOnStartup,
|
|
serverHost,
|
|
serverPort,
|
|
setServerPort,
|
|
apiPrefix,
|
|
apiKey,
|
|
trustedHosts,
|
|
proxyTimeout,
|
|
} = useLocalApiServer()
|
|
|
|
const { serverStatus, setServerStatus } = useAppState()
|
|
const { selectedModel, selectedProvider, getProviderByName } =
|
|
useModelProvider()
|
|
const [showApiKeyError, setShowApiKeyError] = useState(false)
|
|
const [isApiKeyEmpty, setIsApiKeyEmpty] = useState(
|
|
!apiKey || apiKey.toString().trim().length === 0
|
|
)
|
|
|
|
useEffect(() => {
|
|
const checkServerStatus = async () => {
|
|
serviceHub
|
|
.app()
|
|
.getServerStatus()
|
|
.then((running) => {
|
|
if (running) {
|
|
setServerStatus('running')
|
|
}
|
|
})
|
|
}
|
|
checkServerStatus()
|
|
}, [serviceHub, setServerStatus])
|
|
|
|
const handleApiKeyValidation = (isValid: boolean) => {
|
|
setIsApiKeyEmpty(!isValid)
|
|
}
|
|
|
|
const getLastUsedModel = (): { provider: string; model: string } | null => {
|
|
try {
|
|
const stored = localStorage.getItem(localStorageKey.lastUsedModel)
|
|
return stored ? JSON.parse(stored) : null
|
|
} catch (error) {
|
|
console.debug('Failed to get last used model from localStorage:', error)
|
|
return null
|
|
}
|
|
}
|
|
|
|
// Helper function to determine which model to start
|
|
const getModelToStart = () => {
|
|
// Use last used model if available
|
|
const lastUsedModel = getLastUsedModel()
|
|
if (lastUsedModel) {
|
|
const provider = getProviderByName(lastUsedModel.provider)
|
|
if (
|
|
provider &&
|
|
provider.models.some((m) => m.id === lastUsedModel.model)
|
|
) {
|
|
return { model: lastUsedModel.model, provider }
|
|
}
|
|
}
|
|
|
|
// Use selected model if available
|
|
if (selectedModel && selectedProvider) {
|
|
const provider = getProviderByName(selectedProvider)
|
|
if (provider) {
|
|
return { model: selectedModel.id, provider }
|
|
}
|
|
}
|
|
|
|
// Use first model from llamacpp provider
|
|
const llamacppProvider = getProviderByName('llamacpp')
|
|
if (
|
|
llamacppProvider &&
|
|
llamacppProvider.models &&
|
|
llamacppProvider.models.length > 0
|
|
) {
|
|
return {
|
|
model: llamacppProvider.models[0].id,
|
|
provider: llamacppProvider,
|
|
}
|
|
}
|
|
|
|
return null
|
|
}
|
|
|
|
const [isModelLoading, setIsModelLoading] = useState(false)
|
|
|
|
const toggleAPIServer = async () => {
|
|
// Validate API key before starting server
|
|
if (serverStatus === 'stopped') {
|
|
console.log('Starting server with port:', serverPort)
|
|
toast.info('Starting server...', {
|
|
description: `Attempting to start server on port ${serverPort}`
|
|
})
|
|
|
|
if (!apiKey || apiKey.toString().trim().length === 0) {
|
|
setShowApiKeyError(true)
|
|
return
|
|
}
|
|
setShowApiKeyError(false)
|
|
|
|
const modelToStart = getModelToStart()
|
|
// Only start server if we have a model to load
|
|
if (!modelToStart) {
|
|
console.warn(
|
|
'Cannot start Local API Server: No model available to load'
|
|
)
|
|
return
|
|
}
|
|
|
|
setServerStatus('pending')
|
|
setIsModelLoading(true) // Start loading state
|
|
|
|
// Start the model first
|
|
serviceHub
|
|
.models()
|
|
.startModel(modelToStart.provider, modelToStart.model)
|
|
.then(() => {
|
|
console.log(`Model ${modelToStart.model} started successfully`)
|
|
setIsModelLoading(false) // Model loaded, stop loading state
|
|
|
|
// Add a small delay for the backend to update state
|
|
return new Promise((resolve) => setTimeout(resolve, 500))
|
|
})
|
|
.then(() => {
|
|
// Then start the server
|
|
return window.core?.api?.startServer({
|
|
host: serverHost,
|
|
port: serverPort,
|
|
prefix: apiPrefix,
|
|
apiKey,
|
|
trustedHosts,
|
|
isCorsEnabled: corsEnabled,
|
|
isVerboseEnabled: verboseLogs,
|
|
proxyTimeout: proxyTimeout,
|
|
})
|
|
})
|
|
.then((actualPort: number) => {
|
|
// Store the actual port that was assigned (important for mobile with port 0)
|
|
if (actualPort && actualPort !== serverPort) {
|
|
setServerPort(actualPort)
|
|
}
|
|
setServerStatus('running')
|
|
})
|
|
.catch((error: unknown) => {
|
|
console.error('Error starting server or model:', error)
|
|
setServerStatus('stopped')
|
|
setIsModelLoading(false) // Reset loading state on error
|
|
toast.dismiss()
|
|
|
|
// Extract error message from various error formats
|
|
const errorMsg = error && typeof error === 'object' && 'message' in error
|
|
? String(error.message)
|
|
: String(error)
|
|
|
|
// Port-related errors (highest priority)
|
|
if (errorMsg.includes('Address already in use')) {
|
|
toast.error('Port has been occupied', {
|
|
description: `Port ${serverPort} is already in use. Please try a different port.`
|
|
})
|
|
}
|
|
// Model-related errors
|
|
else if (errorMsg.includes('Invalid or inaccessible model path')) {
|
|
toast.error('Invalid or inaccessible model path', {
|
|
description: errorMsg
|
|
})
|
|
}
|
|
else if (errorMsg.includes('model')) {
|
|
toast.error('Failed to start model', {
|
|
description: errorMsg
|
|
})
|
|
}
|
|
// Generic server errors
|
|
else {
|
|
toast.error('Failed to start server', {
|
|
description: errorMsg
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
setServerStatus('pending')
|
|
window.core?.api
|
|
?.stopServer()
|
|
.then(() => {
|
|
setServerStatus('stopped')
|
|
})
|
|
.catch((error: unknown) => {
|
|
console.error('Error stopping server:', error)
|
|
setServerStatus('stopped')
|
|
})
|
|
}
|
|
}
|
|
|
|
const getButtonText = () => {
|
|
if (isModelLoading) {
|
|
return t('settings:localApiServer.loadingModel') // TODO: Update this translation
|
|
}
|
|
if (serverStatus === 'pending' && !isModelLoading) {
|
|
return t('settings:localApiServer.startingServer') // TODO: Update this translation
|
|
}
|
|
return isServerRunning
|
|
? t('settings:localApiServer.stopServer')
|
|
: t('settings:localApiServer.startServer')
|
|
}
|
|
|
|
const handleOpenLogs = async () => {
|
|
try {
|
|
await serviceHub.window().openLocalApiServerLogsWindow()
|
|
} catch (error) {
|
|
console.error('Failed to open logs window:', error)
|
|
}
|
|
}
|
|
|
|
const isServerRunning = serverStatus !== 'stopped'
|
|
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
<HeaderPage>
|
|
<h1 className="font-medium">{t('common:settings')}</h1>
|
|
</HeaderPage>
|
|
<div className="flex h-full w-full">
|
|
<SettingsMenu />
|
|
<div className="p-4 w-full h-[calc(100%-32px)] overflow-y-auto">
|
|
<div className="flex flex-col justify-between gap-4 gap-y-3 w-full">
|
|
{/* General Settings */}
|
|
<Card
|
|
header={
|
|
<div className="mb-3 flex w-full items-center border-b border-main-view-fg/4 pb-2">
|
|
<div className="w-full space-y-2">
|
|
<h1 className="text-base font-medium">
|
|
{t('settings:localApiServer.title')}
|
|
</h1>
|
|
<p className="text-main-view-fg/70 mb-2">
|
|
{t('settings:localApiServer.description')}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
onClick={toggleAPIServer}
|
|
variant={isServerRunning ? 'destructive' : 'default'}
|
|
size="sm"
|
|
disabled={serverStatus === 'pending'} // Disable during any loading state
|
|
>
|
|
{getButtonText()}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
}
|
|
>
|
|
<CardItem
|
|
title={t('settings:localApiServer.serverLogs')}
|
|
description={t('settings:localApiServer.serverLogsDesc')}
|
|
actions={
|
|
<Button
|
|
variant="link"
|
|
size="sm"
|
|
className="p-0"
|
|
onClick={handleOpenLogs}
|
|
title={t('settings:localApiServer.serverLogs')}
|
|
>
|
|
<div className="cursor-pointer flex items-center justify-center rounded-sm hover:bg-main-view-fg/15 bg-main-view-fg/10 transition-all duration-200 ease-in-out px-2 py-1 gap-1">
|
|
<IconLogs size={18} className="text-main-view-fg/50" />
|
|
<span>{t('settings:localApiServer.openLogs')}</span>
|
|
</div>
|
|
</Button>
|
|
}
|
|
/>
|
|
</Card>
|
|
|
|
{/* Startup Configuration */}
|
|
<Card title={t('settings:localApiServer.startupConfiguration')}>
|
|
<CardItem
|
|
title={t('settings:localApiServer.runOnStartup')}
|
|
description={t('settings:localApiServer.runOnStartupDesc')}
|
|
actions={
|
|
<Switch
|
|
checked={enableOnStartup}
|
|
onCheckedChange={(checked) => {
|
|
if (!apiKey || apiKey.toString().trim().length === 0) {
|
|
setShowApiKeyError(true)
|
|
return
|
|
}
|
|
setEnableOnStartup(checked)
|
|
}}
|
|
/>
|
|
}
|
|
/>
|
|
</Card>
|
|
|
|
{/* Server Configuration */}
|
|
<Card title={t('settings:localApiServer.serverConfiguration')}>
|
|
<CardItem
|
|
title={t('settings:localApiServer.serverHost')}
|
|
description={t('settings:localApiServer.serverHostDesc')}
|
|
actions={
|
|
<ServerHostSwitcher isServerRunning={isServerRunning} />
|
|
}
|
|
/>
|
|
<CardItem
|
|
title={t('settings:localApiServer.serverPort')}
|
|
description={t('settings:localApiServer.serverPortDesc')}
|
|
actions={<PortInput isServerRunning={isServerRunning} />}
|
|
/>
|
|
<CardItem
|
|
title={t('settings:localApiServer.apiPrefix')}
|
|
description={t('settings:localApiServer.apiPrefixDesc')}
|
|
actions={<ApiPrefixInput isServerRunning={isServerRunning} />}
|
|
/>
|
|
<CardItem
|
|
title={t('settings:localApiServer.apiKey')}
|
|
description={t('settings:localApiServer.apiKeyDesc')}
|
|
className={cn(
|
|
'flex-col sm:flex-row items-start sm:items-center sm:justify-between gap-y-2',
|
|
isApiKeyEmpty && showApiKeyError && 'pb-6'
|
|
)}
|
|
classNameWrapperAction="w-full sm:w-auto"
|
|
actions={
|
|
<ApiKeyInput
|
|
isServerRunning={isServerRunning}
|
|
showError={showApiKeyError}
|
|
onValidationChange={handleApiKeyValidation}
|
|
/>
|
|
}
|
|
/>
|
|
<CardItem
|
|
title={t('settings:localApiServer.trustedHosts')}
|
|
description={t('settings:localApiServer.trustedHostsDesc')}
|
|
className={cn(
|
|
'flex-col sm:flex-row items-start sm:items-center sm:justify-between gap-y-2'
|
|
)}
|
|
classNameWrapperAction="w-full sm:w-auto"
|
|
actions={
|
|
<TrustedHostsInput isServerRunning={isServerRunning} />
|
|
}
|
|
/>
|
|
<CardItem
|
|
title={t('settings:localApiServer.proxyTimeout')}
|
|
description={t('settings:localApiServer.proxyTimeoutDesc')}
|
|
actions={
|
|
<ProxyTimeoutInput isServerRunning={isServerRunning} />
|
|
}
|
|
/>
|
|
</Card>
|
|
|
|
{/* Advanced Settings */}
|
|
<Card title={t('settings:localApiServer.advancedSettings')}>
|
|
<CardItem
|
|
title={t('settings:localApiServer.cors')}
|
|
description={t('settings:localApiServer.corsDesc')}
|
|
className={cn(
|
|
isServerRunning && 'opacity-50 pointer-events-none'
|
|
)}
|
|
actions={
|
|
<Switch
|
|
checked={corsEnabled}
|
|
onCheckedChange={setCorsEnabled}
|
|
/>
|
|
}
|
|
/>
|
|
<CardItem
|
|
title={t('settings:localApiServer.verboseLogs')}
|
|
description={t('settings:localApiServer.verboseLogsDesc')}
|
|
className={cn(
|
|
isServerRunning && 'opacity-50 pointer-events-none'
|
|
)}
|
|
actions={
|
|
<Switch
|
|
checked={verboseLogs}
|
|
onCheckedChange={setVerboseLogs}
|
|
/>
|
|
}
|
|
/>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|