fix: avoid show remote model on system monitor (#3412)

* fix: avoid show remote model on system monitor

* fix: update copies and remove padding
This commit is contained in:
Faisal Amir 2024-08-20 16:12:37 +07:00 committed by GitHub
parent 5bbf7f8676
commit 1f5d504b3f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 50 additions and 43 deletions

View File

@ -1,5 +1,3 @@
import { Fragment } from 'react'
import { Tooltip, Button, Badge } from '@janhq/joi' import { Tooltip, Button, Badge } from '@janhq/joi'
import { useAtom } from 'jotai' import { useAtom } from 'jotai'
@ -8,12 +6,15 @@ import { useActiveModel } from '@/hooks/useActiveModel'
import { toGibibytes } from '@/utils/converter' import { toGibibytes } from '@/utils/converter'
import { localEngines } from '@/utils/modelEngine'
import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom' import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
const Column = ['Model', 'Size', ''] const Column = ['Model', 'Size', '']
const TableActiveModel = () => { const TableActiveModel = () => {
const { activeModel, stateModel, stopModel } = useActiveModel() const { activeModel, stateModel, stopModel } = useActiveModel()
const [serverEnabled, setServerEnabled] = useAtom(serverEnabledAtom) const [serverEnabled, setServerEnabled] = useAtom(serverEnabledAtom)
return ( return (
@ -34,47 +35,53 @@ const TableActiveModel = () => {
})} })}
</tr> </tr>
</thead> </thead>
{activeModel && ( {activeModel && localEngines.includes(activeModel.engine) ? (
<Fragment> <tbody>
<tbody> <tr>
<tr> <td
<td className="max-w-[200px] px-4 py-2 font-bold"
className="max-w-[200px] px-4 py-2 font-bold" title={activeModel.name}
title={activeModel.name} >
> <p className="line-clamp-2">{activeModel.name}</p>
<p className="line-clamp-2">{activeModel.name}</p> </td>
</td> <td className="px-4 py-2">
<td className="px-4 py-2"> <Badge theme="secondary">
<Badge theme="secondary"> {activeModel.metadata.size
{toGibibytes(activeModel.metadata.size)} ? toGibibytes(activeModel.metadata.size)
</Badge> : '-'}
</td> </Badge>
<td className="px-4 py-2 text-center"> </td>
<Tooltip <td className="px-4 py-2 text-center">
trigger={ <Tooltip
<Button trigger={
theme={ <Button
stateModel.state === 'stop' theme={
? 'destructive' stateModel.state === 'stop'
: 'primary' ? 'destructive'
} : 'primary'
onClick={() => { }
stopModel() onClick={() => {
window.core?.api?.stopServer() stopModel()
setServerEnabled(false) window.core?.api?.stopServer()
}} setServerEnabled(false)
> }}
Stop >
</Button> Stop
} </Button>
content="The API server is running, stop the model will }
content="The API server is running, stop the model will
also stop the server" also stop the server"
disabled={!serverEnabled} disabled={!serverEnabled}
/> />
</td> </td>
</tr> </tr>
</tbody> </tbody>
</Fragment> ) : (
<tbody>
<tr className="text-[hsla(var(--text-secondary))]">
<td className="p-4">No on-device model running</td>
</tr>
</tbody>
)} )}
</table> </table>
</div> </div>

View File

@ -88,7 +88,7 @@ const SystemMonitor = () => {
<div <div
ref={setElementExpand} ref={setElementExpand}
className={twMerge( className={twMerge(
'fixed bottom-9 left-[49px] z-50 flex w-[calc(100%-48px-8px)] flex-shrink-0 flex-col border-t border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))]', 'fixed bottom-9 left-[49px] z-50 flex w-[calc(100%-48px)] flex-shrink-0 flex-col border-t border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))]',
showFullScreen && 'h-[calc(100%-63px)]', showFullScreen && 'h-[calc(100%-63px)]',
reduceTransparent && 'w-[calc(100%-48px)] rounded-none' reduceTransparent && 'w-[calc(100%-48px)] rounded-none'
)} )}