💄 style: optimized MaxToken Slider (#2258)

* Update MaxTokenSlider

* k -> K

* i18n

* Small screen adaptation

* `next/image` Un-configured Host

* ModelSelect.featureTag.tokens

* 128k=128,000, 4K=4096, Kibi / kilo

* Restore llm.ts

* Inf -> ∞

* patch

* const Kibi = 1024;

* refactor marks

* Update MaxTokenSlider.tsx

* infinity icon

locales/ar/setting.json

@@ -71,7 +71,8 @@
         },
         "modalTitle": "تكوين النموذج المخصص",
         "tokens": {
-          "title": "أقصى عدد من الرموز"
+          "title": "أقصى عدد من الرموز",
+          "unlimited": "غير محدود"
         },
         "vision": {
           "extra": "سيتم تمكين قدرة تكوين تحميل الصور فقط في LobeChat من خلال هذا التكوين، مدى دعم التعرف على الصور يعتمد تمامًا على النموذج نفسه، يرجى اختبار قابلية التعرف على الصور لهذا النموذج بنفسك",

locales/bg-BG/setting.json

@@ -71,7 +71,8 @@
         },
         "modalTitle": "Конфигурация на персонализиран модел",
         "tokens": {
-          "title": "Максимален брой токени"
+          "title": "Максимален брой токени",
+          "unlimited": "неограничен"
         },
         "vision": {
           "extra": "Тази конфигурация ще активира само възможността за качване на изображения в LobeChat. Възможността за разпознаване на изображения зависи изцяло от самия модел. Моля, тествайте функционалността за разпознаване на изображения на модела.",

locales/de-DE/setting.json

@@ -71,7 +71,8 @@
         },
         "modalTitle": "Benutzerdefinierte Modellkonfiguration",
         "tokens": {
-          "title": "Maximale Token-Anzahl"
+          "title": "Maximale Token-Anzahl",
+          "unlimited": "unbegrenzt"
         },
         "vision": {
           "extra": "Diese Konfiguration aktiviert nur die Bild-Upload-Konfiguration in LobeChat. Die Unterstützung der Erkennung hängt vollständig von dem Modell selbst ab. Bitte testen Sie die Verfügbarkeit der visuellen Erkennungsfähigkeiten des Modells selbst.",

locales/en-US/setting.json

@@ -71,7 +71,8 @@
         },
         "modalTitle": "Custom Model Configuration",
         "tokens": {
-          "title": "Maximum Token Count"
+          "title": "Maximum Token Count",
+          "unlimited": "unlimited"
         },
         "vision": {
           "extra": "This configuration will only enable the image upload configuration in LobeChat. Whether recognition is supported depends entirely on the model itself. Please test the availability of visual recognition in this model on your own.",

locales/es-ES/setting.json

@@ -71,7 +71,8 @@
         },
         "modalTitle": "Configuración del modelo personalizado",
         "tokens": {
-          "title": "Número máximo de tokens"
+          "title": "Número máximo de tokens",
+          "unlimited": "ilimitado"
         },
         "vision": {
           "extra": "Esta configuración solo habilitará la configuración de carga de imágenes en LobeChat. La capacidad de reconocimiento depende completamente del modelo en sí. Por favor, realiza pruebas para verificar la disponibilidad de esta capacidad en el modelo.",

locales/fr-FR/setting.json

@@ -71,7 +71,8 @@
         },
         "modalTitle": "Configuration du modèle personnalisé",
         "tokens": {
-          "title": "Nombre maximal de jetons"
+          "title": "Nombre maximal de jetons",
+          "unlimited": "illimité"
         },
         "vision": {
           "extra": "Cette configuration activera uniquement la configuration de téléchargement d'images dans LobeChat. La prise en charge de la reconnaissance dépend entièrement du modèle lui-même. Veuillez tester par vous-même la disponibilité de la capacité de reconnaissance visuelle de ce modèle.",

locales/it-IT/setting.json

@@ -71,7 +71,8 @@
         },
         "modalTitle": "Configurazione del modello personalizzato",
         "tokens": {
-          "title": "Numero massimo di token"
+          "title": "Numero massimo di token",
+          "unlimited": "illimitato"
         },
         "vision": {
           "extra": "Questa configurazione abiliterà solo la funzionalità di caricamento delle immagini in LobeChat. La reale capacità di riconoscimento dipende interamente dal modello stesso, si consiglia di testare autonomamente la disponibilità di questa funzionalità nel modello.",

locales/ja-JP/setting.json

@@ -71,7 +71,8 @@
         },
         "modalTitle": "カスタムモデルの設定",
         "tokens": {
-          "title": "最大トークン数"
+          "title": "最大トークン数",
+          "unlimited": "無制限"
         },
         "vision": {
           "extra": "この設定は LobeChat での画像アップロード構成のみを有効にします。認識のサポートは完全にモデル自体に依存するため、モデルの視覚認識機能の可用性を自己でテストしてください",

locales/ko-KR/setting.json

@@ -71,7 +71,8 @@
         },
         "modalTitle": "사용자 정의 모델 구성",
         "tokens": {
-          "title": "최대 토큰 수"
+          "title": "최대 토큰 수",
+          "unlimited": "제한 없는"
         },
         "vision": {
           "extra": "이 구성은 LobeChat에서 이미지 업로드 구성만 활성화하며, 인식 지원 여부는 모델 자체에 따라 달라집니다. 모델의 시각 인식 기능을 테스트해보세요",

locales/nl-NL/setting.json

@@ -58,30 +58,31 @@
         },
         "files": {
           "extra": "Currently, the file upload implementation in LobeChat is just a temporary solution and is for self-exploration only. Please wait for the full file upload capability in the future.",
-          "title": "Support File Upload"
+          "title": "Ondersteuning voor het uploaden van bestanden"
         },
         "functionCall": {
-          "extra": "This configuration will only enable the function call capability in LobeChat. Whether function calls are supported depends entirely on the model itself. Please test the availability of function calls of this model on your own.",
-          "title": "Support Function Call"
+          "extra": "Deze configuratie schakelt alleen de functieaanroepmogelijkheid in LobeChat in. Of functieaanroepen worden ondersteund, hangt volledig af van het model zelf. Test zelf de beschikbaarheid van functieaanroepen van dit model.",
+          "title": "Ondersteuningsfunctie Oproep"
         },
         "id": {
-          "extra": "Will be displayed as the model tag",
-          "placeholder": "Please enter the model ID, for example gpt-4-turbo-preview or claude-2.1",
+          "extra": "Wordt weergegeven als de modeltag",
+          "placeholder": "Voer de model ID in, bijvoorbeeld gpt-4-turbo-preview of claude-2.1",
           "title": "Model ID"
         },
-        "modalTitle": "Custom Model Configuration",
+        "modalTitle": "Aangepaste modelconfiguratie",
         "tokens": {
-          "title": "Maximum Token Count"
+          "title": "Maximaal tokenaantal",
+          "unlimited": "onbeperkt"
         },
         "vision": {
-          "extra": "This configuration will only enable the image upload feature in LobeChat. Whether image recognition is supported depends entirely on the model itself. Please test the availability of visual recognition capability of this model on your own.",
-          "title": "Support Visual Recognition"
+          "extra": "Deze configuratie schakelt alleen de configuratie voor het uploaden van afbeeldingen in LobeChat in. Of herkenning wordt ondersteund, hangt volledig af van het model zelf. Test zelf de beschikbaarheid van visuele herkenning in dit model.",
+          "title": "Ondersteuning van visuele herkenning"
         }
       }
     },
     "fetchOnClient": {
-      "desc": "使用客户端请求模式将直接从浏览器发起会话请求，可提升响应速度",
-      "title": "使用客户端请求模式"
+      "desc": "De ophaalmodus aan de clientzijde initieert sessieverzoeken rechtstreeks vanuit de browser, waardoor de reactiesnelheid wordt verbeterd.",
+      "title": "Gebruik de ophaalmodus aan de clientzijde"
     },
     "fetcher": {
       "fetch": "Haal model lijst op",

locales/pl-PL/setting.json

@@ -71,7 +71,8 @@
         },
         "modalTitle": "Konfiguracja niestandardowego modelu",
         "tokens": {
-          "title": "Maksymalna liczba tokenów"
+          "title": "Maksymalna liczba tokenów",
+          "unlimited": "Nieograniczony"
         },
         "vision": {
           "extra": "Ta konfiguracja aktywuje tylko możliwość przesyłania obrazów w LobeChat. Możliwość rozpoznawania zależy wyłącznie od modelu. Proszę przetestować dostępność rozpoznawania wizyjnego tego modelu",

locales/pt-BR/setting.json

@@ -71,7 +71,8 @@
         },
         "modalTitle": "Configuração de Modelo Personalizado",
         "tokens": {
-          "title": "Número Máximo de Tokens"
+          "title": "Número Máximo de Tokens",
+          "unlimited": "ilimitado"
         },
         "vision": {
           "extra": "Esta configuração ativará apenas a configuração de upload de imagens no LobeChat. A capacidade de reconhecimento depende inteiramente do modelo em si. Por favor, teste a disponibilidade da capacidade de reconhecimento visual deste modelo.",

locales/ru-RU/setting.json

@@ -71,7 +71,8 @@
         },
         "modalTitle": "Настройка пользовательской модели",
         "tokens": {
-          "title": "Максимальное количество токенов"
+          "title": "Максимальное количество токенов",
+          "unlimited": "неограниченный"
         },
         "vision": {
           "extra": "Эта настройка активирует только конфигурацию загрузки изображений в LobeChat. Поддержка распознавания полностью зависит от самой модели, пожалуйста, протестируйте доступность распознавания изображений этой модели самостоятельно",

locales/tr-TR/setting.json

@@ -71,7 +71,8 @@
         },
         "modalTitle": "Özel Model Yapılandırması",
         "tokens": {
-          "title": "Maksimum token sayısı"
+          "title": "Maksimum token sayısı",
+          "unlimited": "Sınırsız"
         },
         "vision": {
           "extra": "Bu yapılandırma yalnızca LobeChat'teki görüntü yükleme yapılandırmasını etkinleştirir, tanıma desteğinin olup olmadığı tamamen modelin kendisine bağlıdır, bu modelin görüntü tanıma yeteneğini test etmek size kalmıştır",

locales/vi-VN/setting.json

@@ -71,7 +71,8 @@
         },
         "modalTitle": "Cấu hình mô hình tùy chỉnh",
         "tokens": {
-          "title": "Số lượng token tối đa"
+          "title": "Số lượng token tối đa",
+          "unlimited": "vô hạn"
         },
         "vision": {
           "extra": "Cấu hình này chỉ mở khả năng tải lên hình ảnh trong LobeChat, việc hỗ trợ nhận diện hoàn toàn phụ thuộc vào mô hình chính mình, hãy tự kiểm tra tính khả dụng của khả năng nhận diện hình ảnh của mô hình",

locales/zh-CN/setting.json

@@ -71,7 +71,8 @@
         },
         "modalTitle": "自定义模型配置",
         "tokens": {
-          "title": "最大 token 数"
+          "title": "最大 token 数",
+          "unlimited": "无限制"
         },
         "vision": {
           "extra": "此配置将仅开启 LobeChat 中的图片上传配置，是否支持识别完全取决于模型本身，请自行测试该模型的视觉识别能力可用性",

locales/zh-TW/setting.json

@@ -71,7 +71,8 @@
         },
         "modalTitle": "自定義模型配置",
         "tokens": {
-          "title": "最大 token 數"
+          "title": "最大 token 數",
+          "unlimited": "無限制"
         },
         "vision": {
           "extra": "此配置將僅開啟 LobeChat 中的圖片上傳配置，是否支持識別完全取決於模型本身，請自行測試該模型的視覺識別能力可用性",

src/app/(main)/settings/llm/components/ProviderModelList/MaxTokenSlider.tsx

@@ -1,23 +1,17 @@
-import { InputNumber, Slider, SliderSingleProps } from 'antd';
-import { memo } from 'react';
+import { InputNumber, Slider } from 'antd';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import useMergeState from 'use-merge-value';
 
+import { useServerConfigStore } from '@/store/serverConfig';
+import { serverConfigSelectors } from '@/store/serverConfig/selectors';
+
+const Kibi = 1024;
+
 const exponent = (num: number) => Math.log2(num);
 const getRealValue = (num: number) => Math.round(Math.pow(2, num));
-
-const marks: SliderSingleProps['marks'] = {
-  [exponent(1)]: '1k',
-  [exponent(2)]: '2k',
-  [exponent(4)]: '4k',
-  [exponent(8)]: '8k',
-  [exponent(16)]: '16k',
-  [exponent(32)]: '32k',
-  [exponent(64)]: '64k',
-  [exponent(128)]: '128k',
-  [exponent(200)]: '200k',
-  [exponent(1000)]: '1M',
-};
+const powerKibi = (num: number) => Math.round(Math.pow(2, num) * Kibi);
 
 interface MaxTokenSliderProps {
   defaultValue?: number;
@@ -26,59 +20,80 @@ interface MaxTokenSliderProps {
 }
 
 const MaxTokenSlider = memo<MaxTokenSliderProps>(({ value, onChange, defaultValue }) => {
+  const { t } = useTranslation('setting');
+
   const [token, setTokens] = useMergeState(0, {
     defaultValue,
     onChange,
     value: value,
   });
 
   const [powValue, setPowValue] = useMergeState(0, {
-    defaultValue: exponent(typeof defaultValue === 'undefined' ? 0 : defaultValue / 1000),
-    value: exponent(typeof value === 'undefined' ? 0 : value / 1000),
+    defaultValue: exponent(typeof defaultValue === 'undefined' ? 0 : defaultValue / 1024),
+    value: exponent(typeof value === 'undefined' ? 0 : value / Kibi),
   });
 
   const updateWithPowValue = (value: number) => {
     setPowValue(value);
 
-    setTokens(getRealValue(value) * 1024);
+    setTokens(getRealValue(value) === 1 ? 0 : powerKibi(value));
   };
+
   const updateWithRealValue = (value: number) => {
-    setTokens(value);
+    setTokens(Math.round(value));
 
-    setPowValue(exponent(value / 1024));
+    setPowValue(exponent(value / Kibi));
   };
 
+  const isMobile = useServerConfigStore(serverConfigSelectors.isMobile);
+
+  const marks = useMemo(() => {
+    return {
+      [exponent(1)]: '0',
+      [exponent(2)]: isMobile ? '2' : '2K', // 2 Kibi = 2048
+      [exponent(4)]: isMobile ? '4' : '4K',
+      [exponent(8)]: isMobile ? '8' : '8K',
+      [exponent(16)]: isMobile ? '16' : '16K',
+      [exponent(32)]: isMobile ? '32' : '32K',
+      [exponent(64)]: isMobile ? '64' : '64K',
+      [exponent((128 / Kibi) * 1000)]: ' ', // hide tick mark
+      [exponent((200 / Kibi) * 1000)]: isMobile ? '200' : '200k', // 200,000
+      [exponent(Kibi)]: isMobile ? '1024' : '1M',
+    };
+  }, [isMobile]);
+
   return (
     <Flexbox align={'center'} gap={12} horizontal>
       <Flexbox flex={1}>
         <Slider
           marks={marks}
-          max={exponent(1000)}
+          max={exponent(Kibi)}
           min={0}
           onChange={updateWithPowValue}
-          step={1}
+          step={null}
           tooltip={{
             formatter: (x) => {
               if (typeof x === 'undefined') return;
+              if (x === 0) return t('llm.customModelCards.modelConfig.tokens.unlimited');
 
-              const value = getRealValue(x);
-
-              if (value < 1000) return value.toFixed(0) + 'K';
-
-              return (value / 1000).toFixed(0) + 'M';
+              let value = getRealValue(x);
+              if (value < 125) return value.toFixed(0) + 'K';
+              else if (value < Kibi) return ((value * Kibi) / 1000).toFixed(0) + 'k';
+              return (value / Kibi).toFixed(0) + 'M';
             },
           }}
           value={powValue}
         />
       </Flexbox>
       <div>
         <InputNumber
+          min={0}
           onChange={(e) => {
-            if (!e) return;
+            if (!e && e !== 0) return;
 
             updateWithRealValue(e);
           }}
-          step={1024}
+          step={2 * Kibi}
           value={token}
         />
       </div>

src/components/ModelSelect/index.tsx

@@ -1,6 +1,6 @@
 import { Icon, Tooltip } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { LucideEye, LucidePaperclip, ToyBrick } from 'lucide-react';
+import { Infinity, LucideEye, LucidePaperclip, ToyBrick } from 'lucide-react';
 import numeral from 'numeral';
 import { rgba } from 'polished';
 import { memo } from 'react';
@@ -57,10 +57,14 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 const formatTokenNumber = (num: number): string => {
-  if (num < 1000) return '1K';
-  const kiloToken = Math.floor(num / 1000);
+  if (num > 0 && num < 1024) return '1K';
+
+  let kiloToken = Math.floor(num / 1024);
+  if (num >= 128_000 && num < 1_024_000) {
+    kiloToken = Math.floor(num / 1000);
+  }
   return kiloToken < 1000 ? `${kiloToken}K` : `${Math.floor(kiloToken / 1000)}M`;
-}
+};
 
 interface ModelInfoTagsProps extends ChatModelCard {
   directionReverse?: boolean;
@@ -83,7 +87,7 @@ export const ModelInfoTags = memo<ModelInfoTagsProps>(
         )}
         {model.vision && (
           <Tooltip placement={placement} title={t('ModelSelect.featureTag.vision')}>
-            <div className={cx(styles.tag, styles.tagGreen)}>
+            <div className={cx(styles.tag, styles.tagGreen)} style={{ cursor: 'pointer' }} title="">
               <Icon icon={LucideEye} />
             </div>
           </Tooltip>
@@ -94,20 +98,26 @@ export const ModelInfoTags = memo<ModelInfoTagsProps>(
             placement={placement}
             title={t('ModelSelect.featureTag.functionCall')}
           >
-            <div className={cx(styles.tag, styles.tagBlue)}>
+            <div className={cx(styles.tag, styles.tagBlue)} style={{ cursor: 'pointer' }} title="">
               <Icon icon={ToyBrick} />
             </div>
           </Tooltip>
         )}
-        {model.tokens && (
+        {model.tokens !== undefined && (
           <Tooltip
             overlayStyle={{ maxWidth: 'unset' }}
             placement={placement}
             title={t('ModelSelect.featureTag.tokens', {
-              tokens: numeral(model.tokens).format('0,0'),
+              tokens: model.tokens === 0 ? '∞' : numeral(model.tokens).format('0,0'),
             })}
           >
-            <Center className={styles.token}>{formatTokenNumber(model.tokens)}</Center>
+            <Center className={styles.token} title="">
+              {model.tokens === 0 ? (
+                <Infinity size={17} strokeWidth={1.6} />
+              ) : (
+                formatTokenNumber(model.tokens)
+              )}
+            </Center>
           </Tooltip>
         )}
         {/*{model.isCustom && (*/}