Merge pull request #4416 from janhq/chore/enhance-cortex-settings-page

enhancement: Update Cortex page with better description & UX

core/src/types/setting/settingComponent.ts

@@ -3,7 +3,11 @@ export type SettingComponentProps = {
   title: string
   description: string
   controllerType: ControllerType
-  controllerProps: SliderComponentProps | CheckboxComponentProps | InputComponentProps
+  controllerProps:
+    | SliderComponentProps
+    | CheckboxComponentProps
+    | InputComponentProps
+    | DropdownComponentProps
 
   extensionName?: string
   requireModelReload?: boolean
@@ -12,13 +16,26 @@ export type SettingComponentProps = {
 
 export type ConfigType = 'runtime' | 'setting'
 
-export type ControllerType = 'slider' | 'checkbox' | 'input' | 'tag'
+export type ControllerType =
+  | 'slider'
+  | 'checkbox'
+  | 'input'
+  | 'tag'
+  | 'dropdown'
 
-export type InputType = 'password' | 'text' | 'email' | 'number' | 'tel' | 'url'
+export type InputType =
+  | 'password'
+  | 'text'
+  | 'email'
+  | 'number'
+  | 'tel'
+  | 'url'
+  | 'dropdown'
 
 const InputActions = ['unobscure', 'copy'] as const
 export type InputActionsTuple = typeof InputActions
 export type InputAction = InputActionsTuple[number]
+export type DropdownOption = { name: string; value: string }
 
 export type InputComponentProps = {
   placeholder: string
@@ -38,3 +55,9 @@ export type SliderComponentProps = {
 export type CheckboxComponentProps = {
   value: boolean
 }
+
+export type DropdownComponentProps = {
+  value: string
+  type?: InputType
+  options?: DropdownOption[]
+}

extensions/inference-cortex-extension/resources/default_settings.json

@@ -1,8 +1,8 @@
 [
   {
     "key": "cont_batching",
-    "title": "Continuous batching",
-    "description": "The number of parallel operations",
+    "title": "Continuous Batching",
+    "description": "Allows processing prompts in parallel with text generation, which usually improves performance.",
     "controllerType": "checkbox",
     "controllerProps": {
       "value": true
@@ -10,28 +10,32 @@
   },
   {
     "key": "n_parallel",
-    "title": "Parallel operations",
-    "description": "The number of parallel operations",
+    "title": "Parallel Operations",
+    "description": "Number of prompts that can be processed simultaneously by the model.",
     "controllerType": "input",
     "controllerProps": {
       "value": "4",
-      "placeholder": "4"
+      "placeholder": "4",
+      "type": "number",
+      "textAlign": "right"
     }
   },
   {
     "key": "cpu_threads",
     "title": "CPU Threads",
-    "description": "The number of CPU threads to use (when in CPU mode)",
+    "description": "Number of CPU cores used for model processing when running without GPU.",
     "controllerType": "input",
     "controllerProps": {
       "value": "",
-      "placeholder": "Number of CPU threads"
+      "placeholder": "Number of CPU threads",
+      "type": "number",
+      "textAlign": "right"
     }
   },
   {
     "key": "flash_attn",
-    "title": "Flash Attention enabled",
-    "description": "To enable Flash Attention, default is true",
+    "title": "Flash Attention",
+    "description": "Optimizes memory usage and speeds up model inference using an efficient attention implementation.",
     "controllerType": "checkbox",
     "controllerProps": {
       "value": true
@@ -40,8 +44,8 @@
 
   {
     "key": "caching_enabled",
-    "title": "Caching enabled",
-    "description": "To enable prompt caching or not",
+    "title": "Caching",
+    "description": "Stores recent prompts and responses to improve speed when similar questions are asked.",
     "controllerType": "checkbox",
     "controllerProps": {
       "value": true
@@ -50,17 +54,30 @@
   {
     "key": "cache_type",
     "title": "KV Cache Type",
-    "description": "KV cache type: f16, q8_0, q4_0, default is f16 (change this could break the model).",
-    "controllerType": "input",
+    "description": "Controls memory usage and precision trade-off.",
+    "controllerType": "dropdown",
     "controllerProps": {
-      "placeholder": "f16",
-      "value": "f16"
+      "value": "f16",
+      "options": [
+        {
+          "value": "q4_0",
+          "name": "q4_0"
+        },
+        {
+          "value": "q8_0",
+          "name": "q8_0"
+        },
+        {
+          "value": "f16",
+          "name": "f16"
+        }
+      ]
     }
   },
   {
     "key": "use_mmap",
-    "title": "To enable mmap",
-    "description": "To enable mmap, default is true",
+    "title": "MMAP",
+    "description": "Loads model files more efficiently by mapping them to memory, reducing RAM usage.",
     "controllerType": "checkbox",
     "controllerProps": {
       "value": true

web/screens/Settings/SettingDetail/SettingDetailItem/SettingDetailDropdownItem/index.tsx

@@ -0,0 +1,50 @@
+import { DropdownComponentProps, SettingComponentProps } from '@janhq/core'
+import { Select } from '@janhq/joi'
+import { Marked, Renderer } from 'marked'
+
+type Props = {
+  settingProps: SettingComponentProps
+  onValueChanged?: (e: string) => void
+}
+
+const marked: Marked = new Marked({
+  renderer: {
+    link: (href, title, text) => {
+      return Renderer.prototype.link
+        ?.apply(this, [href, title, text])
+        .replace(
+          '<a',
+          "<a class='text-[hsla(var(--app-link))]' target='_blank'"
+        )
+    },
+  },
+})
+
+const SettingDetailDropdownItem: React.FC<Props> = ({
+  settingProps,
+  onValueChanged,
+}) => {
+  const { value, options } =
+    settingProps.controllerProps as DropdownComponentProps
+
+  const description = marked.parse(settingProps.description ?? '', {
+    async: false,
+  })
+
+  return (
+    <div className="flex w-full justify-between py-6">
+      <div className="flex flex-1 flex-col space-y-1">
+        <h1 className="font-semibold">{settingProps.title}</h1>
+        {
+          <div
+            dangerouslySetInnerHTML={{ __html: description }}
+            className="font-medium leading-relaxed text-[hsla(var(--text-secondary))]"
+          />
+        }
+      </div>
+      <Select value={value} onValueChange={onValueChanged} options={options} />
+    </div>
+  )
+}
+
+export default SettingDetailDropdownItem

web/screens/Settings/SettingDetail/SettingDetailItem/SettingDetailTextInputItem/index.tsx

@@ -15,6 +15,7 @@ import {
   FolderOpenIcon,
 } from 'lucide-react'
 import { Marked, Renderer } from 'marked'
+import { twMerge } from 'tailwind-merge'
 
 type Props = {
   settingProps: SettingComponentProps
@@ -83,21 +84,28 @@ const SettingDetailTextInputItem = ({
           className="font-medium leading-relaxed text-[hsla(var(--text-secondary))]"
         />
       </div>
-      <div className="w-full flex-shrink-0 pr-1 sm:w-1/2">
+      <div
+        className={twMerge(
+          'w-full flex-shrink-0 pr-1 sm:w-1/2',
+          type === 'number' && 'sm:w-22 w-24'
+        )}
+      >
         <Input
           placeholder={placeholder}
           type={obscure ? 'password' : 'text'}
           textAlign={textAlign}
           value={value}
           onChange={(e) => onValueChanged?.(e.target.value)}
-          className="!pr-20"
+          className={twMerge(obscure && '!pr-20')}
           suffixIcon={
-            <InputExtraActions
-              actions={inputActions ?? []}
-              onAction={onAction}
-              copied={copied}
-              obscure={obscure}
-            />
+            obscure ? (
+              <InputExtraActions
+                actions={inputActions ?? []}
+                onAction={onAction}
+                copied={copied}
+                obscure={obscure}
+              />
+            ) : undefined
           }
         />
       </div>

web/screens/Settings/SettingDetail/SettingDetailItem/index.tsx

@@ -1,5 +1,6 @@
 import { SettingComponentProps } from '@janhq/core'
 
+import SettingDetailDropdownItem from './SettingDetailDropdownItem'
 import SettingDetailTextInputItem from './SettingDetailTextInputItem'
 import SettingDetailToggleItem from './SettingDetailToggleItem'
 
@@ -36,13 +37,23 @@ const SettingDetailItem = ({ componentProps, onValueUpdated }: Props) => {
         )
       }
 
+      case 'dropdown': {
+        return (
+          <SettingDetailDropdownItem
+            key={data.key}
+            settingProps={data}
+            onValueChanged={(value) => onValueUpdated(data.key, value)}
+          />
+        )
+      }
+
       default:
         return null
     }
   })
 
   return (
-    <div className="flex w-full flex-col">
+    <div className="flex h-full w-full flex-col overflow-y-auto">
       {components.map((component, index) => (
         <div
           className={`mx-4 ${index === components.length - 1 ? '' : 'border-b border-[hsla(var(--app-border))]'}`}