-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
13 changed files
with
265 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| export enum MainViewState { | ||
| Hub, | ||
| MyModels, | ||
| Setting, | ||
| Settings, | ||
| Thread, | ||
| SystemMonitor, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,137 @@ | ||
| import { useState } from 'react' | ||
|
|
||
| import { Model } from '@janhq/core' | ||
| import { Badge } from '@janhq/uikit' | ||
|
|
||
| import { | ||
| MoreVerticalIcon, | ||
| Trash2Icon, | ||
| PlayIcon, | ||
| StopCircleIcon, | ||
| } from 'lucide-react' | ||
|
|
||
| import { useActiveModel } from '@/hooks/useActiveModel' | ||
| import { useClickOutside } from '@/hooks/useClickOutside' | ||
|
|
||
| import useDeleteModel from '@/hooks/useDeleteModel' | ||
|
|
||
| import { toGigabytes } from '@/utils/converter' | ||
|
|
||
| type RowModelProps = { | ||
| data: Model | ||
| } | ||
|
|
||
| export default function RowModel(props: RowModelProps) { | ||
| const [more, setMore] = useState(false) | ||
|
|
||
| const [menu, setMenu] = useState<HTMLDivElement | null>(null) | ||
| const [toggle, setToggle] = useState<HTMLDivElement | null>(null) | ||
| useClickOutside(() => setMore(false), null, [menu, toggle]) | ||
|
|
||
| const { activeModel, startModel, stopModel, stateModel } = useActiveModel() | ||
| const { deleteModel } = useDeleteModel() | ||
|
|
||
| const isActiveModel = stateModel.model === props.data.id | ||
|
|
||
| const onModelActionClick = (modelId: string) => { | ||
| if (activeModel && activeModel.id === modelId) { | ||
| stopModel(modelId) | ||
| } else { | ||
| startModel(modelId) | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <tr className="relative border-b border-border last:border-none"> | ||
| <td className="px-6 py-4 font-bold">{props.data.name}</td> | ||
| <td className="px-6 py-4 font-bold">{props.data.id}</td> | ||
| <td className="px-6 py-4"> | ||
| <Badge themes="secondary"> | ||
| {toGigabytes(props.data.metadata.size)} | ||
| </Badge> | ||
| </td> | ||
| <td className="px-6 py-4"> | ||
| <Badge themes="secondary">v{props.data.version}</Badge> | ||
| </td> | ||
| <td className="px-6 py-4"> | ||
| {stateModel.loading && stateModel.model === props.data.id ? ( | ||
| <Badge | ||
| className="inline-flex items-center space-x-2" | ||
| themes="secondary" | ||
| > | ||
| <span className="h-2 w-2 rounded-full bg-gray-500" /> | ||
| <span className="capitalize"> | ||
| {stateModel.state === 'start' ? 'Starting...' : 'Stopping...'} | ||
| </span> | ||
| </Badge> | ||
| ) : activeModel && activeModel.id === props.data.id ? ( | ||
| <Badge | ||
| themes="success" | ||
| className="inline-flex items-center space-x-2" | ||
| > | ||
| <span className="h-2 w-2 rounded-full bg-green-500" /> | ||
| <span>Active</span> | ||
| </Badge> | ||
| ) : ( | ||
| <Badge | ||
| themes="secondary" | ||
| className="inline-flex items-center space-x-2" | ||
| > | ||
| <span className="h-2 w-2 rounded-full bg-gray-500" /> | ||
| <span>Inactive</span> | ||
| </Badge> | ||
| )} | ||
| </td> | ||
| <td className="px-6 py-4 text-center"> | ||
| <div | ||
| className="cursor-pointer" | ||
| ref={setToggle} | ||
| onClick={() => { | ||
| setMore(!more) | ||
| }} | ||
| > | ||
| <MoreVerticalIcon className="h-5 w-5" /> | ||
| </div> | ||
| {more && ( | ||
| <div | ||
| className="absolute right-4 top-10 z-20 w-52 overflow-hidden rounded-lg border border-border bg-background py-2 shadow-lg" | ||
| ref={setMenu} | ||
| > | ||
| <div | ||
| className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-secondary" | ||
| onClick={() => { | ||
| onModelActionClick(props.data.id) | ||
| setMore(false) | ||
| }} | ||
| > | ||
| {activeModel && activeModel.id === props.data.id ? ( | ||
| <StopCircleIcon size={16} className="text-muted-foreground" /> | ||
| ) : ( | ||
| <PlayIcon size={16} className="text-muted-foreground" /> | ||
| )} | ||
| <span className="text-bold capitalize text-black dark:text-muted-foreground"> | ||
| {isActiveModel ? stateModel.state : 'Start'} | ||
| Model | ||
| </span> | ||
| </div> | ||
| <div | ||
| className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-secondary" | ||
| onClick={() => { | ||
| setTimeout(async () => { | ||
| await stopModel(props.data.id) | ||
| deleteModel(props.data) | ||
| }, 500) | ||
| setMore(false) | ||
| }} | ||
| > | ||
| <Trash2Icon size={16} className="text-muted-foreground" /> | ||
| <span className="text-bold text-black dark:text-muted-foreground"> | ||
| Delete Model | ||
| </span> | ||
| </div> | ||
| </div> | ||
| )} | ||
| </td> | ||
| </tr> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import { useState } from 'react' | ||
|
|
||
| import { Input } from '@janhq/uikit' | ||
|
|
||
| import { SearchIcon } from 'lucide-react' | ||
|
|
||
| import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels' | ||
|
|
||
| import RowModel from './Row' | ||
|
|
||
| const Column = ['Name', 'Model ID', 'Size', 'Version', 'Status', ''] | ||
|
|
||
| export default function Models() { | ||
| const { downloadedModels } = useGetDownloadedModels() | ||
| const [searchValue, setsearchValue] = useState('') | ||
|
|
||
| const filteredDownloadedModels = downloadedModels.filter((x) => { | ||
| return x.name.toLowerCase().includes(searchValue.toLowerCase()) | ||
| }) | ||
|
|
||
| return ( | ||
| <div className="rounded-xl border border-border shadow-sm"> | ||
| <div className="px-6 py-5"> | ||
| <div className="relative w-1/3"> | ||
| <SearchIcon | ||
| size={20} | ||
| className="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" | ||
| /> | ||
| <Input | ||
| placeholder="Search" | ||
| className="pl-8" | ||
| onChange={(e) => { | ||
| setsearchValue(e.target.value) | ||
| }} | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className="relative"> | ||
| <table className="w-full px-8"> | ||
| <thead className="w-full border-b border-border bg-secondary"> | ||
| <tr> | ||
| {Column.map((col, i) => { | ||
| return ( | ||
| <th | ||
| key={i} | ||
| className="px-6 py-2 text-left font-normal last:text-center" | ||
| > | ||
| {col} | ||
| </th> | ||
| ) | ||
| })} | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {filteredDownloadedModels | ||
| ? filteredDownloadedModels.map((x, i) => { | ||
| return <RowModel key={i} data={x} /> | ||
| }) | ||
| : null} | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
Oops, something went wrong.