Skip to content

Commit

Permalink
reloading model when engine params have new values
Browse files Browse the repository at this point in the history
  • Loading branch information
urmauur committed Jan 4, 2024
1 parent f97fdae commit 214739e
Show file tree
Hide file tree
Showing 6 changed files with 131 additions and 21 deletions.
28 changes: 26 additions & 2 deletions web/containers/Checkbox/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,20 @@ import {
TooltipTrigger,
} from '@janhq/uikit'

import { useAtomValue } from 'jotai'
import { useAtomValue, useSetAtom } from 'jotai'
import { InfoIcon } from 'lucide-react'

import { useActiveModel } from '@/hooks/useActiveModel'
import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'

import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'
import { getConfigurationsData } from '@/utils/componentSettings'
import { toSettingParams } from '@/utils/model_param'

import {
engineParamsUpdateAtom,
getActiveThreadIdAtom,
getActiveThreadModelParamsAtom,
} from '@/helpers/atoms/Thread.atom'

type Props = {
name: string
Expand All @@ -27,8 +35,24 @@ const Checkbox: React.FC<Props> = ({ name, title, checked, description }) => {
const { updateModelParameter } = useUpdateModelParameters()
const threadId = useAtomValue(getActiveThreadIdAtom)

const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom)

const modelSettingParams = toSettingParams(activeModelParams)

const engineParams = getConfigurationsData(modelSettingParams)

const setEngineParamsUpdate = useSetAtom(engineParamsUpdateAtom)

const { stopModel } = useActiveModel()

const onCheckedChange = (checked: boolean) => {
if (!threadId) return
if (engineParams.some((x) => x.name.includes(name))) {
setEngineParamsUpdate(true)
stopModel()
} else {
setEngineParamsUpdate(false)
}
updateModelParameter(threadId, name, checked)
}

Expand Down
49 changes: 49 additions & 0 deletions web/containers/Loader/ModelReload.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import React, { useEffect, useState } from 'react'

import { useActiveModel } from '@/hooks/useActiveModel'

export default function ModelReload() {
const { stateModel } = useActiveModel()
const [loader, setLoader] = useState(0)

// This is fake loader please fix this when we have realtime percentage when load model
useEffect(() => {
if (stateModel.loading) {
if (loader === 24) {
setTimeout(() => {
setLoader(loader + 1)
}, 250)
} else if (loader === 50) {
setTimeout(() => {
setLoader(loader + 1)
}, 250)
} else if (loader === 78) {
setTimeout(() => {
setLoader(loader + 1)
}, 250)
} else if (loader === 99) {
setLoader(99)
} else {
setLoader(loader + 1)
}
} else {
setLoader(0)
}
}, [stateModel.loading, loader])

if (!stateModel.loading) return null

return (
<div className=" mb-1 mt-2 py-2 text-center">
<div className="relative inline-block overflow-hidden rounded-lg border border-neutral-50 bg-blue-50 px-4 py-2 font-semibold text-blue-600 shadow-lg">
<div
className="absolute left-0 top-0 h-full bg-blue-200"
style={{ width: `${loader}%` }}
/>
<span className="relative z-10">
Reloading model {stateModel.model}
</span>
</div>
</div>
)
}
30 changes: 27 additions & 3 deletions web/containers/ModelConfigInput/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,22 @@ import {
TooltipTrigger,
} from '@janhq/uikit'

import { useAtomValue } from 'jotai'
import { useAtomValue, useSetAtom } from 'jotai'

import { InfoIcon } from 'lucide-react'

import { useActiveModel } from '@/hooks/useActiveModel'
import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'

import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'
import { getConfigurationsData } from '@/utils/componentSettings'

import { toSettingParams } from '@/utils/model_param'

import {
engineParamsUpdateAtom,
getActiveThreadIdAtom,
getActiveThreadModelParamsAtom,
} from '@/helpers/atoms/Thread.atom'

type Props = {
title: string
Expand All @@ -33,9 +42,24 @@ const ModelConfigInput: React.FC<Props> = ({
const { updateModelParameter } = useUpdateModelParameters()
const threadId = useAtomValue(getActiveThreadIdAtom)

const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom)

const modelSettingParams = toSettingParams(activeModelParams)

const engineParams = getConfigurationsData(modelSettingParams)

const setEngineParamsUpdate = useSetAtom(engineParamsUpdateAtom)

const { stopModel } = useActiveModel()

const onValueChanged = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
if (!threadId) return

if (engineParams.some((x) => x.name.includes(name))) {
setEngineParamsUpdate(true)
stopModel()
} else {
setEngineParamsUpdate(false)
}
updateModelParameter(threadId, name, e.target.value)
}

Expand Down
8 changes: 4 additions & 4 deletions web/containers/Providers/EventHandler.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -68,10 +68,10 @@ export default function EventHandler({ children }: { children: ReactNode }) {
setTimeout(async () => {
setActiveModel(undefined)
setStateModel({ state: 'start', loading: false, model: '' })
toaster({
title: 'Success!',
description: `Model ${model.id} has been stopped.`,
})
// toaster({
// title: 'Success!',
// description: `Model ${model.id} has been stopped.`,
// })
}, 500)
}

Expand Down
9 changes: 8 additions & 1 deletion web/hooks/useSendChatMessage.ts
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,9 @@ export default function useSendChatMessage() {
const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom)

const engineParamsUpdate = useAtomValue(engineParamsUpdateAtom)
const setEngineParamsUpdate = useSetAtom(engineParamsUpdateAtom)

const [reloadModel, setReloadModel] = useState(false)

useEffect(() => {
modelRef.current = activeModel
Expand Down Expand Up @@ -139,7 +142,7 @@ export default function useSendChatMessage() {
return
}

console.log(engineParamsUpdate)
if (engineParamsUpdate) setReloadModel(true)

const activeThreadState = threadStates[activeThread.id]
const runtimeParams = toRuntimeParams(activeModelParams)
Expand Down Expand Up @@ -263,9 +266,13 @@ export default function useSendChatMessage() {
}

events.emit(EventName.OnMessageSent, messageRequest)

setReloadModel(false)
setEngineParamsUpdate(false)
}

return {
reloadModel,
sendChatMessage,
resendChatMessage,
queuedMessage,
Expand Down
28 changes: 17 additions & 11 deletions web/screens/Chat/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { twMerge } from 'tailwind-merge'

import LogoMark from '@/containers/Brand/Logo/Mark'

import ModelReload from '@/containers/Loader/ModelReload'
import ModelStart from '@/containers/Loader/ModelStart'
import { currentPromptAtom } from '@/containers/Providers/Jotai'

Expand All @@ -33,6 +34,7 @@ import { getCurrentChatMessagesAtom } from '@/helpers/atoms/ChatMessage.atom'

import {
activeThreadAtom,
engineParamsUpdateAtom,
getActiveThreadIdAtom,
waitingToSendMessage,
} from '@/helpers/atoms/Thread.atom'
Expand All @@ -49,7 +51,7 @@ const ChatScreen = () => {

const [currentPrompt, setCurrentPrompt] = useAtom(currentPromptAtom)
const activeThreadState = useAtomValue(activeThreadStateAtom)
const { sendChatMessage, queuedMessage } = useSendChatMessage()
const { sendChatMessage, queuedMessage, reloadModel } = useSendChatMessage()
const isWaitingForResponse = activeThreadState?.waitingForResponse ?? false
const isDisabledChatbox =
currentPrompt.trim().length === 0 || isWaitingForResponse
Expand All @@ -61,6 +63,7 @@ const ChatScreen = () => {

const textareaRef = useRef<HTMLTextAreaElement>(null)
const modelRef = useRef(activeModel)
const engineParamsUpdate = useAtomValue(engineParamsUpdateAtom)

useEffect(() => {
modelRef.current = activeModel
Expand Down Expand Up @@ -146,17 +149,20 @@ const ChatScreen = () => {
</div>
)}

<ModelStart />

{/* {reloadModel && (
<div className="mb-2 text-center">
<span className="text-muted-foreground">
Model is reloading to apply new changes.
</span>
</div>
)} */}
{!engineParamsUpdate && <ModelStart />}

{reloadModel && (
<>
<ModelReload />
<div className="mb-2 text-center">
<span className="text-muted-foreground">
Model is reloading to apply new changes.
</span>
</div>
</>
)}

{queuedMessage && (
{queuedMessage && !reloadModel && (
<div className="mb-2 text-center">
<span className="text-muted-foreground">
Message queued. It can be sent once the model has started
Expand Down

0 comments on commit 214739e

Please sign in to comment.