Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: finished new UI thread setting pannel

Browse Source
This commit is contained in:
Faisal Amir 2024-01-01 15:08:17 +07:00
parent 2332c4e1d2
commit 590fa67244
10 changed files with 216 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
uikit/src/tooltip/index.tsx
View File

@ -8,6 +8,8 @@ const TooltipProvider = TooltipPrimitive.Provider
const Tooltip = TooltipPrimitive.Root
const TooltipPortal = TooltipPrimitive.Portal
const TooltipTrigger = TooltipPrimitive.Trigger
const TooltipContent = React.forwardRef<
@ -37,4 +39,5 @@ export {
TooltipContent,
TooltipProvider,
TooltipArrow,
TooltipPortal,
}

93
web/containers/CardSidebar/index.tsx
View File

@ -13,14 +13,16 @@ import { useClickOutside } from '@/hooks/useClickOutside'
interface Props {
children: ReactNode
title: string
onRevealInFinderClick: (type: string) => void
onViewJsonClick: (type: string) => void
onRevealInFinderClick?: (type: string) => void
onViewJsonClick?: (type: string) => void
asChild?: boolean
}
export default function CardSidebar({
children,
title,
onRevealInFinderClick,
onViewJsonClick,
asChild,
}: Props) {
const [show, setShow] = useState(true)
const [more, setMore] = useState(false)
@ -39,7 +41,8 @@ export default function CardSidebar({
return (
<div
className={twMerge(
'flex w-full flex-col overflow-hidden border-t border-border bg-zinc-200 dark:bg-zinc-600/10'
'flex w-full flex-col border-t border-border bg-zinc-100 dark:bg-zinc-600/10',
asChild ? 'rounded-lg border' : 'border-t'
)}
>
<div
@ -50,16 +53,18 @@ export default function CardSidebar({
>
<span className="font-bold">{title}</span>
<div className="flex">
<div
ref={setToggle}
className="cursor-pointer rounded-md bg-zinc-200 p-2 pr-0 dark:bg-zinc-600/10"
onClick={() => setMore(!more)}
>
<MoreVerticalIcon className="h-5 w-5" />
</div>
{!asChild && (
<div
ref={setToggle}
className="cursor-pointer rounded-lg bg-zinc-100 p-2 pr-0 dark:bg-zinc-600/10"
onClick={() => setMore(!more)}
>
<MoreVerticalIcon className="h-5 w-5" />
</div>
)}
<button
onClick={() => setShow(!show)}
className="flex w-full flex-1 items-center space-x-2 bg-zinc-200 px-3 py-2 dark:bg-zinc-600/10"
className="flex w-full flex-1 items-center space-x-2 rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-600/10"
>
<ChevronDownIcon
className={twMerge(
@ -72,38 +77,76 @@ export default function CardSidebar({
{more && (
<div
className="absolute right-0 top-8 z-20 w-52 overflow-hidden rounded-lg border border-border bg-background shadow-lg"
className="absolute right-4 top-8 z-20 w-64 rounded-lg border border-border bg-background shadow-lg"
ref={setMenu}
>
<div
className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-secondary"
className={twMerge(
'flex cursor-pointer space-x-2 px-4 py-2 hover:bg-secondary',
title === 'Model' ? 'items-start' : 'items-center'
)}
onClick={() => {
onRevealInFinderClick(title)
onRevealInFinderClick && onRevealInFinderClick(title)
setMore(false)
}}
>
<FolderOpenIcon size={16} className="text-muted-foreground" />
<span className="text-bold text-black dark:text-muted-foreground">
{openFolderTitle}
</span>
<FolderOpenIcon
size={16}
className={twMerge(
'flex-shrink-0 text-muted-foreground',
title === 'Model' && 'mt-1'
)}
/>
<>
{title === 'Model' ? (
<div className="flex flex-col">
<span className="font-medium text-black dark:text-muted-foreground">
{openFolderTitle}
</span>
<span className="mt-1 text-muted-foreground">
Opens thread.json. Changes affect this thread only.
</span>
</div>
) : (
<span className="text-bold text-black dark:text-muted-foreground">
{openFolderTitle}
</span>
)}
</>
</div>
<div
className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-secondary"
className="flex cursor-pointer items-start space-x-2 px-4 py-2 hover:bg-secondary"
onClick={() => {
onViewJsonClick(title)
onViewJsonClick && onViewJsonClick(title)
setMore(false)
}}
>
<Code2Icon size={16} className="text-muted-foreground" />
<span className="text-bold text-black dark:text-muted-foreground">
View as JSON
</span>
<Code2Icon
size={16}
className="mt-0.5 flex-shrink-0 text-muted-foreground"
/>
<>
<div className="flex flex-col">
<span className="font-medium text-black dark:text-muted-foreground">
View as JSON
</span>
<span className="mt-1 text-muted-foreground">
Opens <span className="lowercase">{title}.json.</span>&nbsp;
Changes affect all new threads.
</span>
</div>
</>
</div>
</div>
)}
</div>
{show && (
<div className="flex flex-col gap-2 bg-white p-2 dark:bg-background">
<div
className={twMerge(
'flex flex-col gap-2 bg-white p-2 dark:bg-background',
asChild && 'rounded-b-lg'
)}
>
{children}
</div>
)}

30
web/containers/Checkbox/index.tsx
View File

@ -1,9 +1,18 @@
import React from 'react'
import { Switch } from '@janhq/uikit'
import {
Switch,
Tooltip,
TooltipArrow,
TooltipContent,
TooltipPortal,
TooltipTrigger,
} from '@janhq/uikit'
import { useAtomValue } from 'jotai'
import { InfoIcon } from 'lucide-react'
import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'
@ -11,10 +20,11 @@ import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'
type Props = {
name: string
title: string
description: string
checked: boolean
}
const Checkbox: React.FC<Props> = ({ name, title, checked }) => {
const Checkbox: React.FC<Props> = ({ name, title, checked, description }) => {
const { updateModelParameter } = useUpdateModelParameters()
const threadId = useAtomValue(getActiveThreadIdAtom)
@ -26,7 +36,21 @@ const Checkbox: React.FC<Props> = ({ name, title, checked }) => {
return (
<div className="flex justify-between">
<p className="mb-2 text-sm font-semibold text-gray-600">{title}</p>
<div className="mb-1 flex items-center gap-x-2">
<p className="text-sm font-semibold text-gray-600">{title}</p>
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon size={16} className="flex-shrink-0" />
</TooltipTrigger>
<TooltipPortal>
<TooltipContent side="top" className="max-w-[240px]">
<span>{description}</span>
<TooltipArrow />
</TooltipContent>
</TooltipPortal>
</Tooltip>
</div>
<Switch checked={checked} onCheckedChange={onCheckedChange} />
</div>
)

2
web/containers/Layout/TopBar/index.tsx
View File

@ -177,7 +177,7 @@ const TopBar = () => {
>
<Code2Icon
size={16}
className="mt-1 flex-shrink-0 text-muted-foreground"
className="mt-0.5 flex-shrink-0 text-muted-foreground"
/>
<div className="flex flex-col">
<span className="font-medium text-black dark:text-muted-foreground">

28
web/containers/ModelConfigInput/index.tsx
View File

@ -1,7 +1,16 @@
import { Textarea } from '@janhq/uikit'
import {
Textarea,
Tooltip,
TooltipPortal,
TooltipArrow,
TooltipContent,
TooltipTrigger,
} from '@janhq/uikit'
import { useAtomValue } from 'jotai'
import { InfoIcon } from 'lucide-react'
import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'
@ -9,6 +18,7 @@ import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'
type Props = {
title: string
name: string
description: string
placeholder: string
value: string
}
@ -17,6 +27,7 @@ const ModelConfigInput: React.FC<Props> = ({
title,
name,
value,
description,
placeholder,
}) => {
const { updateModelParameter } = useUpdateModelParameters()
@ -30,7 +41,20 @@ const ModelConfigInput: React.FC<Props> = ({
return (
<div className="flex flex-col">
<p className="mb-2 text-sm font-semibold text-gray-600">{title}</p>
<div className="mb-4 flex items-center gap-x-2">
<p className="text-sm font-semibold text-gray-600">{title}</p>
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon size={16} className="flex-shrink-0" />
</TooltipTrigger>
<TooltipPortal>
<TooltipContent side="top" className="max-w-[240px]">
<span>{description}</span>
<TooltipArrow />
</TooltipContent>
</TooltipPortal>
</Tooltip>
</div>
<Textarea
placeholder={placeholder}
onChange={onValueChanged}

27
web/containers/Slider/index.tsx
View File

@ -1,7 +1,14 @@
import React from 'react'
import { Slider, Input } from '@janhq/uikit'
import { Slider, Input, TooltipPortal } from '@janhq/uikit'
import {
Tooltip,
TooltipContent,
TooltipTrigger,
TooltipArrow,
} from '@janhq/uikit'
import { useAtomValue } from 'jotai'
import { InfoIcon } from 'lucide-react'
import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
@ -9,6 +16,7 @@ import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'
type Props = {
name: string
description: string
title: string
min: number
max: number
@ -21,6 +29,7 @@ const SliderRightPanel: React.FC<Props> = ({
title,
min,
max,
description,
step,
value,
}) => {
@ -29,13 +38,25 @@ const SliderRightPanel: React.FC<Props> = ({
const onValueChanged = (e: number[]) => {
if (!threadId) return
updateModelParameter(threadId, name, e[0])
}
return (
<div className="flex flex-col">
<p className="mb-2 text-sm font-semibold text-gray-600">{title}</p>
<div className="mb-4 flex items-center gap-x-2">
<p className="text-sm font-semibold text-gray-600">{title}</p>
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon size={16} className="flex-shrink-0" />
</TooltipTrigger>
<TooltipPortal>
<TooltipContent side="top" className="max-w-[240px]">
<span>{description}</span>
<TooltipArrow />
</TooltipContent>
</TooltipPortal>
</Tooltip>
</div>
<div className="flex items-center gap-x-4">
<div className="relative w-full">
<Slider

32
web/screens/Chat/ModelSetting/predefinedComponent.ts
View File

@ -4,7 +4,7 @@ export const presetConfiguration: Record<string, SettingComponentData> = {
prompt_template: {
name: 'prompt_template',
title: 'Prompt template',
description: 'Prompt template',
description: 'The prompt to use for internal configuration.',
controllerType: 'input',
controllerData: {
placeholder: 'Prompt template',
@ -14,7 +14,8 @@ export const presetConfiguration: Record<string, SettingComponentData> = {
stop: {
name: 'stop',
title: 'Stop',
description: 'Stop',
description:
'Defines specific tokens or phrases at which the model will stop generating further output. ',
controllerType: 'input',
controllerData: {
placeholder: 'Stop',
@ -24,7 +25,8 @@ export const presetConfiguration: Record<string, SettingComponentData> = {
ctx_len: {
name: 'ctx_len',
title: 'Context Length',
description: 'Context Length',
description:
'The context length for model operations varies; the maximum depends on the specific model used.',
controllerType: 'slider',
controllerData: {
min: 0,
@ -40,7 +42,7 @@ export const presetConfiguration: Record<string, SettingComponentData> = {
'The maximum number of tokens the model will generate in a single response.',
controllerType: 'slider',
controllerData: {
min: 0,
min: 128,
max: 4096,
step: 128,
value: 2048,
@ -48,8 +50,8 @@ export const presetConfiguration: Record<string, SettingComponentData> = {
},
ngl: {
name: 'ngl',
title: 'NGL',
description: 'Number of layers in the neural network.',
title: 'Number of GPU layers (ngl)',
description: 'The number of layers to load onto the GPU for acceleration.',
controllerType: 'slider',
controllerData: {
min: 1,
@ -61,7 +63,7 @@ export const presetConfiguration: Record<string, SettingComponentData> = {
embedding: {
name: 'embedding',
title: 'Embedding',
description: 'Indicates if embedding layers are used.',
description: 'Whether to enable embedding.',
controllerType: 'checkbox',
controllerData: {
checked: true,
@ -79,8 +81,7 @@ export const presetConfiguration: Record<string, SettingComponentData> = {
temperature: {
name: 'temperature',
title: 'Temperature',
description:
"Controls randomness in model's responses. Higher values lead to more random responses.",
description: 'Controls the randomness of the model’s output.',
controllerType: 'slider',
controllerData: {
min: 0,
@ -92,7 +93,8 @@ export const presetConfiguration: Record<string, SettingComponentData> = {
frequency_penalty: {
name: 'frequency_penalty',
title: 'Frequency Penalty',
description: 'Frequency Penalty',
description:
'Adjusts the likelihood of the model repeating words or phrases in its output. ',
controllerType: 'slider',
controllerData: {
min: 0,
@ -104,7 +106,8 @@ export const presetConfiguration: Record<string, SettingComponentData> = {
presence_penalty: {
name: 'presence_penalty',
title: 'Presence Penalty',
description: 'Presence Penalty',
description:
'Influences the generation of new and varied concepts in the model’s output. ',
controllerType: 'slider',
controllerData: {
min: 0,
@ -116,7 +119,7 @@ export const presetConfiguration: Record<string, SettingComponentData> = {
top_p: {
name: 'top_p',
title: 'Top P',
description: 'Top P',
description: 'Set probability threshold for more relevant outputs.',
controllerType: 'slider',
controllerData: {
min: 0,
@ -128,10 +131,11 @@ export const presetConfiguration: Record<string, SettingComponentData> = {
n_parallel: {
name: 'n_parallel',
title: 'N Parallel',
description: 'N Parallel',
description:
'The number of parallel operations. Only set when enable continuous batching. ',
controllerType: 'slider',
controllerData: {
min: 1,
min: 0,
max: 4,
step: 1,
value: 1,

3
web/screens/Chat/ModelSetting/settingComponentBuilder.tsx
View File

@ -38,6 +38,7 @@ const settingComponentBuilder = (componentData: SettingComponentData[]) => {
<Slider
key={data.name}
title={data.title}
description={data.description}
min={min}
max={max}
step={step}
@ -53,6 +54,7 @@ const settingComponentBuilder = (componentData: SettingComponentData[]) => {
title={data.title}
key={data.name}
name={data.name}
description={data.description}
placeholder={placeholder}
value={textValue}
/>
@ -63,6 +65,7 @@ const settingComponentBuilder = (componentData: SettingComponentData[]) => {
<Checkbox
key={data.name}
name={data.name}
description={data.description}
title={data.title}
checked={checked}
/>

102
web/screens/Chat/Sidebar/index.tsx
View File

@ -10,6 +10,7 @@ import { twMerge } from 'tailwind-merge'
import LogoMark from '@/containers/Brand/Logo/Mark'
import CardSidebar from '@/containers/CardSidebar'
import DropdownListSidebar, {
selectedModelAtom,
} from '@/containers/DropdownListSidebar'
@ -127,7 +128,7 @@ const Sidebar: React.FC = () => {
<div>
<label
id="thread-title"
className="mb-2 inline-block font-bold text-gray-600 dark:text-gray-300"
className="mb-2 inline-block font-bold text-zinc-500 dark:text-gray-300"
>
Title
</label>
@ -146,7 +147,7 @@ const Sidebar: React.FC = () => {
<div className="flex flex-col">
<label
id="thread-title"
className="mb-2 inline-block font-bold text-gray-600 dark:text-gray-300"
className="mb-2 inline-block font-bold text-zinc-500 dark:text-gray-300"
>
Threads ID
</label>
@ -156,46 +157,7 @@ const Sidebar: React.FC = () => {
</div>
</div>
{/* <CardSidebar
title="Thread"
onRevealInFinderClick={onReviewInFinderClick}
onViewJsonClick={onViewJsonClick}
>
<div className="flex flex-col space-y-4 p-2">
<div>
<label
id="thread-title"
className="mb-2 inline-block font-bold text-gray-600 dark:text-gray-300"
>
Title
</label>
<Input
id="thread-title"
value={activeThread?.title}
onChange={(e) => {
if (activeThread)
updateThreadMetadata({
...activeThread,
title: e.target.value || '',
})
}}
/>
</div>
<div className="flex flex-col">
<label
id="thread-title"
className="mb-2 inline-block font-bold text-gray-600 dark:text-gray-300"
>
Threads ID
</label>
<span className="text-xs text-muted-foreground">
{activeThread?.id || '-'}
</span>
</div>
</div>
</CardSidebar> */}
{/* <CardSidebar
<CardSidebar
title="Assistant"
onRevealInFinderClick={onReviewInFinderClick}
onViewJsonClick={onViewJsonClick}
@ -210,7 +172,7 @@ const Sidebar: React.FC = () => {
<div>
<label
id="thread-title"
className="mb-2 inline-block font-bold text-gray-600 dark:text-gray-300"
className="mb-2 inline-block font-bold text-zinc-500 dark:text-gray-300"
>
Instructions
</label>
@ -232,34 +194,62 @@ const Sidebar: React.FC = () => {
}}
/>
</div>
{/* <div>
<label
id="tool-title"
className="mb-2 inline-block font-bold text-zinc-500 dark:text-gray-300"
>
Tools
</label>
<div className="flex items-center justify-between">
<label className="font-medium text-zinc-500 dark:text-gray-300">
Retrieval
</label>
<Switch name="retrieval" />
</div>
</div> */}
</div>
</CardSidebar> */}
</CardSidebar>
{/* <CardSidebar
<CardSidebar
title="Model"
onRevealInFinderClick={onReviewInFinderClick}
onViewJsonClick={onViewJsonClick}
>
<div className="p-2">
<DropdownListSidebar />
<div className="mt-6">
<CardSidebar title="Inference Parameters" asChild>
<div className="p-2">
<ModelSetting />
</div>
</CardSidebar>
</div>
<div className="mt-4">
<ModelSetting />
<CardSidebar title="Model Parameters" asChild>
<div className="p-2">{/* <ModelSetting /> */}</div>
</CardSidebar>
</div>
{experimentalFeatureEnabed &&
Object.keys(modelSettingParams).length ? (
<CardSidebar
title="Engine"
onRevealInFinderClick={onReviewInFinderClick}
onViewJsonClick={onViewJsonClick}
>
<div className="p-2">
<EngineSetting />
</div>
</CardSidebar>
<div className="mt-4">
<CardSidebar
title="Engine Parameters"
onRevealInFinderClick={onReviewInFinderClick}
onViewJsonClick={onViewJsonClick}
asChild
>
<div className="p-2">
<EngineSetting />
</div>
</CardSidebar>
</div>
) : null}
</div>
</CardSidebar> */}
</CardSidebar>
</div>
</div>
)

1
web/utils/model_param.ts
View File

@ -39,7 +39,6 @@ export const toSettingParams = (
embedding: undefined,
n_parallel: undefined,
cpu_threads: undefined,
prompt_template: undefined,
}
const settingParams: ModelSettingParams = {}