From 3deaa8f7eefc2aedb0a1f75f10af026ba8b03ce6 Mon Sep 17 00:00:00 2001 From: NamH Date: Thu, 11 Apr 2024 15:49:39 +0700 Subject: [PATCH] fix: not able to update model setting in local api (#2687) Signed-off-by: James Co-authored-by: James --- web/containers/Checkbox/index.tsx | 6 +- web/containers/ModelConfigInput/index.tsx | 6 +- web/containers/SliderRightPanel/index.tsx | 8 +-- web/screens/Chat/EngineSetting/index.tsx | 57 +++++-------------- .../Chat/ModelSetting/SettingComponent.tsx | 10 ++-- web/screens/Chat/ModelSetting/index.tsx | 52 +++++------------ web/screens/Chat/Sidebar/index.tsx | 36 +++++++++++- web/screens/LocalServer/index.tsx | 31 ++++++++-- 8 files changed, 102 insertions(+), 104 deletions(-) diff --git a/web/containers/Checkbox/index.tsx b/web/containers/Checkbox/index.tsx index a545771b6..6e16eb02f 100644 --- a/web/containers/Checkbox/index.tsx +++ b/web/containers/Checkbox/index.tsx @@ -14,7 +14,7 @@ import { InfoIcon } from 'lucide-react' type Props = { name: string title: string - enabled?: boolean + disabled?: boolean description: string checked: boolean onValueChanged?: (e: string | number | boolean) => void @@ -23,7 +23,7 @@ type Props = { const Checkbox: React.FC = ({ title, checked, - enabled = true, + disabled = false, description, onValueChanged, }) => { @@ -52,7 +52,7 @@ const Checkbox: React.FC = ({ ) diff --git a/web/containers/ModelConfigInput/index.tsx b/web/containers/ModelConfigInput/index.tsx index 0c16c916c..715ca5e48 100644 --- a/web/containers/ModelConfigInput/index.tsx +++ b/web/containers/ModelConfigInput/index.tsx @@ -11,7 +11,7 @@ import { InfoIcon } from 'lucide-react' type Props = { title: string - enabled?: boolean + disabled?: boolean name: string description: string placeholder: string @@ -21,7 +21,7 @@ type Props = { const ModelConfigInput: React.FC = ({ title, - enabled = true, + disabled = false, value, description, placeholder, @@ -48,7 +48,7 @@ const ModelConfigInput: React.FC = ({ placeholder={placeholder} onChange={(e) => onValueChanged?.(e.target.value)} value={value} - disabled={!enabled} + disabled={disabled} /> ) diff --git a/web/containers/SliderRightPanel/index.tsx b/web/containers/SliderRightPanel/index.tsx index 7c017e70f..3f7bef2c2 100644 --- a/web/containers/SliderRightPanel/index.tsx +++ b/web/containers/SliderRightPanel/index.tsx @@ -17,7 +17,7 @@ import { useClickOutside } from '@/hooks/useClickOutside' type Props = { name: string title: string - enabled: boolean + disabled: boolean description: string min: number max: number @@ -28,7 +28,7 @@ type Props = { const SliderRightPanel: React.FC = ({ title, - enabled, + disabled, min, max, step, @@ -65,7 +65,7 @@ const SliderRightPanel: React.FC = ({ min={min} max={max} step={step} - disabled={!enabled} + disabled={disabled} />

{min}

@@ -80,7 +80,7 @@ const SliderRightPanel: React.FC = ({ min={min} max={max} value={String(value)} - disabled={!enabled} + disabled={disabled} onBlur={(e) => { if (Number(e.target.value) > Number(max)) { onValueChanged?.(Number(max)) diff --git a/web/screens/Chat/EngineSetting/index.tsx b/web/screens/Chat/EngineSetting/index.tsx index 9269bd1c7..57b19a484 100644 --- a/web/screens/Chat/EngineSetting/index.tsx +++ b/web/screens/Chat/EngineSetting/index.tsx @@ -1,54 +1,23 @@ -import { useCallback } from 'react' - import { SettingComponentProps } from '@janhq/core/.' -import { useAtomValue, useSetAtom } from 'jotai' - -import { useActiveModel } from '@/hooks/useActiveModel' -import useUpdateModelParameters from '@/hooks/useUpdateModelParameters' - import SettingComponentBuilder from '../../Chat/ModelSetting/SettingComponent' -import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom' -import { - activeThreadAtom, - engineParamsUpdateAtom, -} from '@/helpers/atoms/Thread.atom' - type Props = { componentData: SettingComponentProps[] + onValueChanged: (key: string, value: string | number | boolean) => void + disabled?: boolean } -const EngineSetting: React.FC = ({ componentData }) => { - const isLocalServerRunning = useAtomValue(serverEnabledAtom) - const activeThread = useAtomValue(activeThreadAtom) - - const { stopModel } = useActiveModel() - const { updateModelParameter } = useUpdateModelParameters() - - const setEngineParamsUpdate = useSetAtom(engineParamsUpdateAtom) - - const onValueChanged = useCallback( - (key: string, value: string | number | boolean) => { - if (!activeThread) return - - setEngineParamsUpdate(true) - stopModel() - - updateModelParameter(activeThread, { - params: { [key]: value }, - }) - }, - [activeThread, setEngineParamsUpdate, stopModel, updateModelParameter] - ) - - return ( - - ) -} +const EngineSetting: React.FC = ({ + componentData, + onValueChanged, + disabled = false, +}) => ( + +) export default EngineSetting diff --git a/web/screens/Chat/ModelSetting/SettingComponent.tsx b/web/screens/Chat/ModelSetting/SettingComponent.tsx index 8dda7a1ad..43df16430 100644 --- a/web/screens/Chat/ModelSetting/SettingComponent.tsx +++ b/web/screens/Chat/ModelSetting/SettingComponent.tsx @@ -11,13 +11,13 @@ import SliderRightPanel from '@/containers/SliderRightPanel' type Props = { componentProps: SettingComponentProps[] - enabled?: boolean + disabled?: boolean onValueUpdated: (key: string, value: string | number | boolean) => void } const SettingComponent: React.FC = ({ componentProps, - enabled = true, + disabled = false, onValueUpdated, }) => { const components = componentProps.map((data) => { @@ -35,7 +35,7 @@ const SettingComponent: React.FC = ({ step={step} value={value} name={data.key} - enabled={enabled} + disabled={disabled} onValueChanged={(value) => onValueUpdated(data.key, value)} /> ) @@ -47,7 +47,7 @@ const SettingComponent: React.FC = ({ return ( = ({ return ( void + disabled?: boolean } -const ModelSetting: React.FC = ({ componentProps }) => { - const isLocalServerRunning = useAtomValue(serverEnabledAtom) - const activeThread = useAtomValue(activeThreadAtom) - const { updateModelParameter } = useUpdateModelParameters() - - const onValueChanged = useCallback( - (key: string, value: string | number | boolean) => { - if (!activeThread) return - - if (key === 'stop' && typeof value === 'string') { - updateModelParameter(activeThread, { - params: { [key]: [value] }, - }) - } else { - updateModelParameter(activeThread, { - params: { [key]: value }, - }) - } - }, - [activeThread, updateModelParameter] - ) - - return ( - - ) -} +const ModelSetting: React.FC = ({ + componentProps, + onValueChanged, + disabled = false, +}) => ( + +) export default React.memo(ModelSetting) diff --git a/web/screens/Chat/Sidebar/index.tsx b/web/screens/Chat/Sidebar/index.tsx index 78249c242..62bda54d0 100644 --- a/web/screens/Chat/Sidebar/index.tsx +++ b/web/screens/Chat/Sidebar/index.tsx @@ -2,7 +2,7 @@ import React, { useCallback, useMemo } from 'react' import { Input, Textarea } from '@janhq/uikit' -import { atom, useAtomValue } from 'jotai' +import { atom, useAtomValue, useSetAtom } from 'jotai' import { twMerge } from 'tailwind-merge' @@ -13,8 +13,11 @@ import DropdownListSidebar, { selectedModelAtom, } from '@/containers/DropdownListSidebar' +import { useActiveModel } from '@/hooks/useActiveModel' import { useCreateNewThread } from '@/hooks/useCreateNewThread' +import useUpdateModelParameters from '@/hooks/useUpdateModelParameters' + import { getConfigurationsData } from '@/utils/componentSettings' import { toRuntimeParams, toSettingParams } from '@/utils/modelParam' @@ -27,6 +30,7 @@ import PromptTemplateSetting from './PromptTemplateSetting' import { activeThreadAtom, + engineParamsUpdateAtom, getActiveThreadModelParamsAtom, } from '@/helpers/atoms/Thread.atom' @@ -39,6 +43,10 @@ const Sidebar: React.FC = () => { const selectedModel = useAtomValue(selectedModelAtom) const { updateThreadMetadata } = useCreateNewThread() + const setEngineParamsUpdate = useSetAtom(engineParamsUpdateAtom) + const { stopModel } = useActiveModel() + const { updateModelParameter } = useUpdateModelParameters() + const modelSettings = useMemo(() => { const modelRuntimeParams = toRuntimeParams(activeModelParams) @@ -96,6 +104,22 @@ const Sidebar: React.FC = () => { [activeThread, updateThreadMetadata] ) + const onValueChanged = useCallback( + (key: string, value: string | number | boolean) => { + if (!activeThread) { + return + } + + setEngineParamsUpdate(true) + stopModel() + + updateModelParameter(activeThread, { + params: { [key]: value }, + }) + }, + [activeThread, setEngineParamsUpdate, stopModel, updateModelParameter] + ) + return (
{ {modelSettings.length > 0 && (
- +
)} @@ -188,7 +215,10 @@ const Sidebar: React.FC = () => { {engineSettings.length > 0 && (
- +
)} diff --git a/web/screens/LocalServer/index.tsx b/web/screens/LocalServer/index.tsx index 609de8b31..435f61886 100644 --- a/web/screens/LocalServer/index.tsx +++ b/web/screens/LocalServer/index.tsx @@ -73,10 +73,15 @@ const LocalServerScreen = () => { const { startModel, stateModel } = useActiveModel() const selectedModel = useAtomValue(selectedModelAtom) - const modelEngineParams = toSettingParams(selectedModel?.settings) const modelRuntimeParams = toRuntimeParams(selectedModel?.settings) - const componentDataEngineSetting = getConfigurationsData(modelEngineParams) + const [currentModelSettingParams, setCurrentModelSettingParams] = useState( + toSettingParams(selectedModel?.settings) + ) + + const componentDataEngineSetting = getConfigurationsData( + currentModelSettingParams + ) const componentDataRuntimeSetting = getConfigurationsData( modelRuntimeParams, selectedModel @@ -177,6 +182,16 @@ const LocalServerScreen = () => { } } + const onValueChanged = useCallback( + (key: string, value: string | number | boolean) => { + setCurrentModelSettingParams({ + ...currentModelSettingParams, + [key]: value, + }) + }, + [currentModelSettingParams] + ) + return (
{/* Left SideBar */} @@ -495,7 +510,11 @@ const LocalServerScreen = () => {
- +
@@ -505,7 +524,11 @@ const LocalServerScreen = () => {
- +