Merge pull request #6250 from menloresearch/feat/local-api-server

urmauur · web-flow · commit 7b9e752301a4 · 2025-08-21T12:43:13.000+07:00
feat: run on startup setting for local api server
diff --git a/web-app/src/hooks/__tests__/useLocalApiServer.test.ts b/web-app/src/hooks/__tests__/useLocalApiServer.test.ts
@@ -24,7 +24,7 @@ describe('useLocalApiServer', () => {
     vi.clearAllMocks()
     // Reset store state to defaults
     const store = useLocalApiServer.getState()
-    store.setRunOnStartup(true)
+    store.setEnableOnStartup(true)
     store.setServerHost('127.0.0.1')
     store.setServerPort(1337)
     store.setApiPrefix('/v1')
@@ -37,7 +37,7 @@ describe('useLocalApiServer', () => {
   it('should initialize with default values', () => {
     const { result } = renderHook(() => useLocalApiServer())
 
-    expect(result.current.runOnStartup).toBe(true)
+    expect(result.current.enableOnStartup).toBe(true)
     expect(result.current.serverHost).toBe('127.0.0.1')
     expect(result.current.serverPort).toBe(1337)
     expect(result.current.apiPrefix).toBe('/v1')
@@ -47,21 +47,21 @@ describe('useLocalApiServer', () => {
     expect(result.current.apiKey).toBe('')
   })
 
-  describe('runOnStartup', () => {
+  describe('enableOnStartup', () => {
     it('should set run on startup', () => {
       const { result } = renderHook(() => useLocalApiServer())
 
       act(() => {
-        result.current.setRunOnStartup(false)
+        result.current.setEnableOnStartup(false)
       })
 
-      expect(result.current.runOnStartup).toBe(false)
+      expect(result.current.enableOnStartup).toBe(false)
 
       act(() => {
-        result.current.setRunOnStartup(true)
+        result.current.setEnableOnStartup(true)
       })
 
-      expect(result.current.runOnStartup).toBe(true)
+      expect(result.current.enableOnStartup).toBe(true)
     })
   })
 
@@ -323,7 +323,7 @@ describe('useLocalApiServer', () => {
       const { result: result2 } = renderHook(() => useLocalApiServer())
 
       act(() => {
-        result1.current.setRunOnStartup(false)
+        result1.current.setEnableOnStartup(false)
         result1.current.setServerHost('0.0.0.0')
         result1.current.setServerPort(8080)
         result1.current.setApiPrefix('/api')
@@ -333,7 +333,7 @@ describe('useLocalApiServer', () => {
         result1.current.addTrustedHost('example.com')
       })
 
-      expect(result2.current.runOnStartup).toBe(false)
+      expect(result2.current.enableOnStartup).toBe(false)
       expect(result2.current.serverHost).toBe('0.0.0.0')
       expect(result2.current.serverPort).toBe(8080)
       expect(result2.current.apiPrefix).toBe('/api')
diff --git a/web-app/src/hooks/useLocalApiServer.ts b/web-app/src/hooks/useLocalApiServer.ts
@@ -4,8 +4,8 @@ import { localStorageKey } from '@/constants/localStorage'
 
 type LocalApiServerState = {
   // Run local API server once app opens
-  runOnStartup: boolean
-  setRunOnStartup: (value: boolean) => void
+  enableOnStartup: boolean
+  setEnableOnStartup: (value: boolean) => void
   // Server host option (127.0.0.1 or 0.0.0.0)
   serverHost: '127.0.0.1' | '0.0.0.0'
   setServerHost: (value: '127.0.0.1' | '0.0.0.0') => void
@@ -33,8 +33,8 @@ type LocalApiServerState = {
 export const useLocalApiServer = create<LocalApiServerState>()(
   persist(
     (set) => ({
-      runOnStartup: true,
-      setRunOnStartup: (value) => set({ runOnStartup: value }),
+      enableOnStartup: false,
+      setEnableOnStartup: (value) => set({ enableOnStartup: value }),
       serverHost: '127.0.0.1',
       setServerHost: (value) => set({ serverHost: value }),
       serverPort: 1337,
diff --git a/web-app/src/locales/en/settings.json b/web-app/src/locales/en/settings.json
@@ -160,6 +160,9 @@
     "serverLogs": "Server Logs",
     "serverLogsDesc": "View detailed logs of the local API server.",
     "openLogs": "Open Logs",
+    "startupConfiguration": "Startup Configuration",
+    "runOnStartup": "Enable by default on startup",
+    "runOnStartupDesc": "Automatically start the Local API Server when the application launches.",
     "serverConfiguration": "Server Configuration",
     "serverHost": "Server Host",
     "serverHostDesc": "Network address for the server.",
diff --git a/web-app/src/providers/DataProvider.tsx b/web-app/src/providers/DataProvider.tsx
@@ -17,10 +17,15 @@ import {
 import { useNavigate } from '@tanstack/react-router'
 import { route } from '@/constants/routes'
 import { useThreads } from '@/hooks/useThreads'
+import { useLocalApiServer } from '@/hooks/useLocalApiServer'
+import { useAppState } from '@/hooks/useAppState'
 import { AppEvent, events } from '@janhq/core'
+import { startModel } from '@/services/models'
+import { localStorageKey } from '@/constants/localStorage'
 
 export function DataProvider() {
-  const { setProviders } = useModelProvider()
+  const { setProviders, selectedModel, selectedProvider, getProviderByName } =
+    useModelProvider()
 
   const { setMessages } = useMessages()
   const { checkForUpdate } = useAppUpdater()
@@ -29,6 +34,19 @@ export function DataProvider() {
   const { setThreads } = useThreads()
   const navigate = useNavigate()
 
+  // Local API Server hooks
+  const {
+    enableOnStartup,
+    serverHost,
+    serverPort,
+    apiPrefix,
+    apiKey,
+    trustedHosts,
+    corsEnabled,
+    verboseLogs,
+  } = useLocalApiServer()
+  const { setServerStatus } = useAppState()
+
   useEffect(() => {
     console.log('Initializing DataProvider...')
     getProviders().then(setProviders)
@@ -78,6 +96,102 @@ export function DataProvider() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  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
+  }
+
+  // Auto-start Local API Server on app startup if enabled
+  useEffect(() => {
+    if (enableOnStartup) {
+      // Validate API key before starting
+      if (!apiKey || apiKey.toString().trim().length === 0) {
+        console.warn('Cannot start Local API Server: API key is required')
+        return
+      }
+
+      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')
+
+      // Start the model first
+      startModel(modelToStart.provider, modelToStart.model)
+        .then(() => {
+          console.log(`Model ${modelToStart.model} started successfully`)
+
+          // Then start the server
+          return window.core?.api?.startServer({
+            host: serverHost,
+            port: serverPort,
+            prefix: apiPrefix,
+            apiKey,
+            trustedHosts,
+            isCorsEnabled: corsEnabled,
+            isVerboseEnabled: verboseLogs,
+          })
+        })
+        .then(() => {
+          setServerStatus('running')
+        })
+        .catch((error: unknown) => {
+          console.error('Failed to start Local API Server on startup:', error)
+          setServerStatus('stopped')
+        })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   const handleDeepLink = (urls: string[] | null) => {
     if (!urls) return
     console.log('Received deeplink:', urls)
diff --git a/web-app/src/routes/settings/local-api-server.tsx b/web-app/src/routes/settings/local-api-server.tsx
@@ -13,6 +13,9 @@ import { TrustedHostsInput } from '@/containers/TrustedHostsInput'
 import { useLocalApiServer } from '@/hooks/useLocalApiServer'
 import { WebviewWindow } from '@tauri-apps/api/webviewWindow'
 import { useAppState } from '@/hooks/useAppState'
+import { useModelProvider } from '@/hooks/useModelProvider'
+import { startModel } from '@/services/models'
+import { localStorageKey } from '@/constants/localStorage'
 import { windowKey } from '@/constants/windows'
 import { IconLogs } from '@tabler/icons-react'
 import { cn } from '@/lib/utils'
@@ -32,6 +35,8 @@ function LocalAPIServer() {
     setCorsEnabled,
     verboseLogs,
     setVerboseLogs,
+    enableOnStartup,
+    setEnableOnStartup,
     serverHost,
     serverPort,
     apiPrefix,
@@ -40,6 +45,7 @@ function LocalAPIServer() {
   } = 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
@@ -60,6 +66,54 @@ function LocalAPIServer() {
     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 toggleAPIServer = async () => {
     // Validate API key before starting server
     if (serverStatus === 'stopped') {
@@ -68,19 +122,33 @@ function LocalAPIServer() {
         return
       }
       setShowApiKeyError(false)
-    }
 
-    setServerStatus('pending')
-    if (serverStatus === 'stopped') {
-      window.core?.api
-        ?.startServer({
-          host: serverHost,
-          port: serverPort,
-          prefix: apiPrefix,
-          apiKey,
-          trustedHosts,
-          isCorsEnabled: corsEnabled,
-          isVerboseEnabled: verboseLogs,
+      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')
+
+      // Start the model first
+      startModel(modelToStart.provider, modelToStart.model)
+        .then(() => {
+          console.log(`Model ${modelToStart.model} started successfully`)
+
+          // Then start the server
+          return window.core?.api?.startServer({
+            host: serverHost,
+            port: serverPort,
+            prefix: apiPrefix,
+            apiKey,
+            trustedHosts,
+            isCorsEnabled: corsEnabled,
+            isVerboseEnabled: verboseLogs,
+          })
         })
         .then(() => {
           setServerStatus('running')
@@ -90,6 +158,7 @@ function LocalAPIServer() {
           setServerStatus('stopped')
         })
     } else {
+      setServerStatus('pending')
       window.core?.api
         ?.stopServer()
         .then(() => {
@@ -199,6 +268,26 @@ function LocalAPIServer() {
               />
             </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
