Remove middle number slider component

VelsonWang · Jan 11, 2024 · 5bd4637 · 5bd4637
1 parent c64d003
commit 5bd4637
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 23 deletions.
diff --git a/web/containers/Slider/index.tsx b/web/containers/Slider/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import {
   Slider,
@@ -14,11 +14,15 @@ import { useAtomValue, useSetAtom } from 'jotai'
 import { InfoIcon } from 'lucide-react'
 
 import { useActiveModel } from '@/hooks/useActiveModel'
+import { useClickOutside } from '@/hooks/useClickOutside'
+
 import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
 
 import { getConfigurationsData } from '@/utils/componentSettings'
 import { toSettingParams } from '@/utils/model_param'
 
+import { selectedModelAtom } from '../DropdownListSidebar'
+
 import {
   engineParamsUpdateAtom,
   getActiveThreadIdAtom,
@@ -55,8 +59,13 @@ const SliderRightPanel: React.FC<Props> = ({
 
   const setEngineParamsUpdate = useSetAtom(engineParamsUpdateAtom)
 
+  const selectedModel = useAtomValue(selectedModelAtom)
   const { stopModel } = useActiveModel()
 
+  const [showTooltip, setShowTooltip] = useState({ max: false, min: false })
+
+  useClickOutside(() => setShowTooltip({ max: false, min: false }), null, [])
+
   const onValueChanged = (e: number[]) => {
     if (!threadId) return
     if (engineParams.some((x) => x.name.includes(name))) {
@@ -68,6 +77,19 @@ const SliderRightPanel: React.FC<Props> = ({
     updateModelParameter(threadId, name, e[0])
   }
 
+  const maxValue = (name: string) => {
+    switch (name) {
+      case 'max_tokens':
+        return selectedModel?.parameters.max_tokens || max
+
+      case 'ctx_len':
+        return selectedModel?.settings.ctx_len || max
+
+      default:
+        return max
+    }
+  }
+
   return (
     <div className="flex flex-col">
       <div className="mb-3 flex items-center gap-x-2">
@@ -92,30 +114,48 @@ const SliderRightPanel: React.FC<Props> = ({
             value={[value]}
             onValueChange={onValueChanged}
             min={min}
-            max={max}
+            max={maxValue(name)}
             step={step}
           />
           <div className="relative mt-2 flex items-center justify-between text-gray-400">
             <p className="text-sm">{min}</p>
-            <p className="absolute left-1/2 -translate-x-1/2 text-sm">
-              {max / 2}
-            </p>
-            <p className="text-sm">{max}</p>
+            <p className="text-sm">{maxValue(name) as number}</p>
           </div>
         </div>
-        <Input
-          className="-mt-4 h-8 w-16"
-          min={min}
-          max={max}
-          value={String(value)}
-          onChange={(e) => {
-            if (Number(e.target.value) >= max) {
-              onValueChanged([Number(max)])
-            } else {
-              onValueChanged([Number(e.target.value)])
-            }
-          }}
-        />
+        <Tooltip open={showTooltip.max || showTooltip.min}>
+          <TooltipTrigger asChild>
+            <Input
+              type="number"
+              className="-mt-4 h-8 w-20"
+              min={min}
+              max={maxValue(name)}
+              value={String(value)}
+              onChange={(e) => {
+                if (Number(e.target.value) > Number(maxValue(name))) {
+                  onValueChanged([Number(maxValue(name))])
+                  setShowTooltip({ max: true, min: false })
+                } else if (Number(e.target.value) < Number(min)) {
+                  onValueChanged([Number(min)])
+                  setShowTooltip({ max: false, min: true })
+                } else {
+                  onValueChanged([Number(e.target.value)])
+                  setShowTooltip({ max: false, min: false })
+                }
+              }}
+            />
+          </TooltipTrigger>
+          <TooltipPortal>
+            <TooltipContent className="max-w-[240px]" side="top">
+              {showTooltip.max && (
+                <span>Automatically set to the maximum allowed tokens</span>
+              )}
+              {showTooltip.min && (
+                <span>Automatically set to the minimum allowed tokens</span>
+              )}
+              <TooltipArrow />
+            </TooltipContent>
+          </TooltipPortal>
+        </Tooltip>
       </div>
     </div>
   )

diff --git a/web/screens/Chat/ModelSetting/predefinedComponent.ts b/web/screens/Chat/ModelSetting/predefinedComponent.ts
@@ -32,7 +32,7 @@ export const presetConfiguration: Record<string, SettingComponentData> = {
       min: 0,
       max: 4096,
       step: 128,
-      value: 1024,
+      value: 4096,
     },
   },
   max_tokens: {
@@ -42,10 +42,10 @@ export const presetConfiguration: Record<string, SettingComponentData> = {
       'The maximum number of tokens the model will generate in a single response.',
     controllerType: 'slider',
     controllerData: {
-      min: 128,
+      min: 100,
       max: 4096,
-      step: 128,
-      value: 2048,
+      step: 10,
+      value: 4096,
     },
   },
   ngl: {

diff --git a/web/styles/base/global.scss b/web/styles/base/global.scss
@@ -31,4 +31,14 @@
   [type='submit'] {
     background-color: inherit;
   }
+
+  input[type='number'] {
+    -moz-appearance: textfield;
+  }
+
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
 }