fix: model params settings local api server (janhq#4077)

* fix: model params local api server

* chore: fix linter

joi/src/core/Slider/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import * as SliderPrimitive from '@radix-ui/react-slider'
+import { twMerge } from 'tailwind-merge'
 
 import './styles.scss'
 
@@ -25,7 +26,7 @@ const Slider = ({
   disabled,
 }: Props) => (
   <SliderPrimitive.Root
-    className="slider"
+    className={twMerge('slider', disabled && 'slider--disabled')}
     name={name}
     min={min}
     max={max}

joi/src/core/Slider/styles.scss

@@ -6,6 +6,11 @@
   touch-action: none;
   height: 16px;
 
+  &--disabled {
+    cursor: not-allowed;
+    opacity: 0.2;
+  }
+
   &__track {
     background-color: hsla(var(--slider-track-bg));
     position: relative;

web/helpers/atoms/LocalServer.atom.ts

@@ -1,3 +1,5 @@
 import { atom } from 'jotai'
 
 export const serverEnabledAtom = atom<boolean>(false)
+
+export const LocalAPIserverModelParamsAtom = atom()

web/screens/LocalServer/LocalServerLeftPanel/index.tsx

@@ -1,5 +1,6 @@
 import { Fragment, useCallback, useState } from 'react'
 
+import { EngineManager, Model, ModelSettingParams } from '@janhq/core'
 import { Button, Tooltip, Select, Input, Checkbox } from '@janhq/joi'
 
 import { useAtom, useAtomValue, useSetAtom } from 'jotai'
@@ -22,7 +23,10 @@ import {
   hostOptions,
 } from '@/helpers/atoms/ApiServer.atom'
 
-import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
+import {
+  LocalAPIserverModelParamsAtom,
+  serverEnabledAtom,
+} from '@/helpers/atoms/LocalServer.atom'
 import { selectedModelAtom } from '@/helpers/atoms/Model.atom'
 
 const LocalServerLeftPanel = () => {
@@ -31,7 +35,7 @@ const LocalServerLeftPanel = () => {
   const [serverEnabled, setServerEnabled] = useAtom(serverEnabledAtom)
   const [isLoading, setIsLoading] = useState(false)
 
-  const { startModel, stateModel } = useActiveModel()
+  const { stateModel } = useActiveModel()
   const selectedModel = useAtomValue(selectedModelAtom)
 
   const [isCorsEnabled, setIsCorsEnabled] = useAtom(apiServerCorsEnabledAtom)
@@ -42,9 +46,19 @@ const LocalServerLeftPanel = () => {
   const [port, setPort] = useAtom(apiServerPortAtom)
   const [prefix, setPrefix] = useAtom(apiServerPrefix)
   const setLoadModelError = useSetAtom(loadModelErrorAtom)
-
+  const localAPIserverModelParams = useAtomValue(LocalAPIserverModelParamsAtom)
   const FIRST_TIME_VISIT_API_SERVER = 'firstTimeVisitAPIServer'
 
+  const model: Model | undefined = selectedModel
+    ? {
+        ...selectedModel,
+        object: selectedModel.object || '',
+        settings: (typeof localAPIserverModelParams === 'object'
+          ? { ...(localAPIserverModelParams as ModelSettingParams) }
+          : { ...selectedModel.settings }) as ModelSettingParams,
+      }
+    : undefined
+
   const [firstTimeVisitAPIServer, setFirstTimeVisitAPIServer] =
     useState<boolean>(false)
 
@@ -80,7 +94,9 @@ const LocalServerLeftPanel = () => {
         localStorage.setItem(FIRST_TIME_VISIT_API_SERVER, 'false')
         setFirstTimeVisitAPIServer(false)
       }
-      startModel(selectedModel.id, false).catch((e) => console.error(e))
+      const engine = EngineManager.instance().get((model as Model).engine)
+      engine?.loadModel(model as Model)
+      // startModel(selectedModel.id, false).catch((e) => console.error(e))
       setIsLoading(false)
     } catch (e) {
       console.error(e)

web/screens/LocalServer/LocalServerRightPanel/index.tsx

@@ -17,13 +17,15 @@ import { useClipboard } from '@/hooks/useClipboard'
 
 import { getConfigurationsData } from '@/utils/componentSettings'
 
-import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
+import {
+  LocalAPIserverModelParamsAtom,
+  serverEnabledAtom,
+} from '@/helpers/atoms/LocalServer.atom'
 import { selectedModelAtom } from '@/helpers/atoms/Model.atom'
-import { getActiveThreadModelParamsAtom } from '@/helpers/atoms/Thread.atom'
 
 const LocalServerRightPanel = () => {
-  const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom)
   const loadModelError = useAtomValue(loadModelErrorAtom)
+  const setLocalAPIserverModelParams = useSetAtom(LocalAPIserverModelParamsAtom)
   const serverEnabled = useAtomValue(serverEnabledAtom)
   const setModalTroubleShooting = useSetAtom(modalTroubleShootingAtom)
 
@@ -35,12 +37,19 @@ const LocalServerRightPanel = () => {
     extractModelLoadParams(selectedModel?.settings)
   )
 
+  const overriddenSettings =
+    selectedModel?.settings.ctx_len && selectedModel.settings.ctx_len > 2048
+      ? { ctx_len: 4096 }
+      : {}
+
   useEffect(() => {
     if (selectedModel) {
-      setCurrentModelSettingParams(
-        extractModelLoadParams(selectedModel?.settings)
-      )
+      setCurrentModelSettingParams({
+        ...selectedModel?.settings,
+        ...overriddenSettings,
+      })
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedModel])
 
   const modelRuntimeParams = extractInferenceParams(selectedModel?.settings)
@@ -50,17 +59,8 @@ const LocalServerRightPanel = () => {
     selectedModel
   )
 
-  const modelEngineParams = extractModelLoadParams(
-    {
-      ...selectedModel?.settings,
-      ...activeModelParams,
-    },
-    selectedModel?.settings
-  )
-
   const componentDataEngineSetting = getConfigurationsData(
-    modelEngineParams,
-    selectedModel
+    currentModelSettingParams
   )
 
   const engineSettings = useMemo(
@@ -78,16 +78,27 @@ const LocalServerRightPanel = () => {
     )
   }, [componentDataRuntimeSetting])
 
+  const onUpdateParams = useCallback(() => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    setLocalAPIserverModelParams(() => {
+      return { ...currentModelSettingParams }
+    })
+  }, [currentModelSettingParams, setLocalAPIserverModelParams])
+
   const onValueChanged = useCallback(
     (key: string, value: string | number | boolean) => {
-      setCurrentModelSettingParams({
-        ...currentModelSettingParams,
+      setCurrentModelSettingParams((prevParams) => ({
+        ...prevParams,
         [key]: value,
-      })
+      }))
     },
-    [currentModelSettingParams]
+    []
   )
 
+  useEffect(() => {
+    onUpdateParams()
+  }, [currentModelSettingParams, onUpdateParams])
+
   return (
     <RightPanelContainer>
       <div className="mb-4 px-4 pt-4">
@@ -156,6 +167,7 @@ const LocalServerRightPanel = () => {
             <ModelSetting
               componentProps={modelSettings}
               onValueChanged={onValueChanged}
+              disabled={serverEnabled}
             />
           </AccordionItem>
         )}
@@ -165,6 +177,7 @@ const LocalServerRightPanel = () => {
             <EngineSetting
               componentData={engineSettings}
               onValueChanged={onValueChanged}
+              disabled={serverEnabled}
             />
           </AccordionItem>
         )}