From 694ffb0a8123f20f3f51c3e9310c92bbcf102a5a Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Wed, 9 Apr 2025 17:45:17 +0800
Subject: [PATCH] style: add model selection tips in playground

---
 src/components/overlay-scroller/index.tsx     |  1 +
 src/locales/en-US/playground.ts               |  4 +-
 src/locales/ja-JP/playground.ts               |  8 ++-
 src/locales/ru-RU/playground.ts               | 60 ++++++++++++-------
 src/locales/zh-CN/playground.ts               | 20 ++++---
 .../llmodels/components/hf-model-file.tsx     |  3 +-
 .../llmodels/components/search-model.tsx      | 13 +++-
 src/pages/llmodels/hooks/index.ts             |  9 +--
 .../playground/components/dynamic-params.tsx  |  3 +
 .../resources/components/model-files.tsx      | 13 +++-
 src/pages/resources/components/workers.tsx    |  5 +-
 11 files changed, 97 insertions(+), 42 deletions(-)

diff --git a/src/components/overlay-scroller/index.tsx b/src/components/overlay-scroller/index.tsx
index adefaa1f..650f3728 100644
--- a/src/components/overlay-scroller/index.tsx
+++ b/src/components/overlay-scroller/index.tsx
@@ -32,6 +32,7 @@ const OverlayScroller: React.FC<any> = ({
   return (
     <Wrapper
       ref={scroller}
+      className="overlay-scroller-wrapper"
       $maxHeight={maxHeight || '100%'}
       hidden={false}
       as="div"
diff --git a/src/locales/en-US/playground.ts b/src/locales/en-US/playground.ts
index 27e5788c..e3ce0413 100644
--- a/src/locales/en-US/playground.ts
+++ b/src/locales/en-US/playground.ts
@@ -149,5 +149,7 @@ export default {
   'playground.image.origin': 'Original',
   'playground.image.mask': 'Mask',
   'playground.image.negativeMask.tips':
-    '1. After selection, no further masking can be drawn; therefore, you should draw the mask first and then check the option.\n 2. Once a mask image is uploaded, no further masks can be generated.'
+    '1. After selection, no further masking can be drawn; therefore, you should draw the mask first and then check the option.\n 2. Once a mask image is uploaded, no further masks can be generated.',
+  'playground.model.noavailable.tips2':
+    'If the expected model isn’t showing up, make sure it’s running and correctly categorized. If the category is incorrect, you can manually adjust it in the model’s settings.'
 };
diff --git a/src/locales/ja-JP/playground.ts b/src/locales/ja-JP/playground.ts
index 31efef31..a6f4877c 100644
--- a/src/locales/ja-JP/playground.ts
+++ b/src/locales/ja-JP/playground.ts
@@ -152,5 +152,11 @@ export default {
   'playground.image.origin': 'オリジナル',
   'playground.image.mask': 'マスク',
   'playground.image.negativeMask.tips':
-    '1. 選択後は追加のマスクを描画できません。そのため、最初にマスクを描画してからオプションを選択してください。\n 2. マスク画像をアップロードすると、追加のマスクを生成することはできません。'
+    '1. 選択後は追加のマスクを描画できません。そのため、最初にマスクを描画してからオプションを選択してください。\n 2. マスク画像をアップロードすると、追加のマスクを生成することはできません。',
+  'playground.model.noavailable.tips2':
+    'If the expected model isn’t showing up, make sure it’s running and correctly categorized. If the category is incorrect, you can manually adjust it in the model’s settings.'
 };
+
+// ========== To-Do: Translate Keys (Remove After Translation) ==========
+// 1. 'playground.model.noavailable.tips2'
+// ========== End of To-Do List ==========
diff --git a/src/locales/ru-RU/playground.ts b/src/locales/ru-RU/playground.ts
index 75e3f451..fc9b7618 100644
--- a/src/locales/ru-RU/playground.ts
+++ b/src/locales/ru-RU/playground.ts
@@ -9,7 +9,8 @@ export default {
   'playground.viewcode': 'Посмотреть код',
   'playground.model': 'Модель',
   'playground.parameters': 'Параметры',
-  'playground.viewcode.info': 'Используйте этот код для интеграции текущих настроек в ваше приложение.',
+  'playground.viewcode.info':
+    'Используйте этот код для интеграции текущих настроек в ваше приложение.',
   'playground.completion': 'Завершение',
   'playground.prompt': 'Промпт',
   'playground.timeToFirstToken': 'Время до первого токена',
@@ -17,12 +18,18 @@ export default {
   'playground.tokenusage': 'Использование токенов',
   'models.openinplayground': 'Открыть в Песочнице',
   'playground.tokenoutput': 'Вывод',
-  'playground.params.temperature.tips': 'Контроль случайности: меньше значение — более предсказуемые результаты. При нуле модель становится детерминированной.',
-  'playground.params.maxtokens.tips': 'Максимальное количество генерируемых токенов. Ограничено длиной контекста модели.',
-  'playground.params.topp.tips': 'Контроль разнообразия через ядерную выборку: 0.5 означает рассмотрение половины вариантов.',
-  'playground.params.seed.tips':  'При указании seed система будет стараться генерировать детерминированные результаты.',
-  'playground.params.stop.tips': 'Стоп-последовательность останавливает генерацию при её появлении в выводе.',
-  'playground.viewcode.tips':  'Ваш API-ключ можно найти {here}. Используйте переменные окружения для его защиты.',
+  'playground.params.temperature.tips':
+    'Контроль случайности: меньше значение — более предсказуемые результаты. При нуле модель становится детерминированной.',
+  'playground.params.maxtokens.tips':
+    'Максимальное количество генерируемых токенов. Ограничено длиной контекста модели.',
+  'playground.params.topp.tips':
+    'Контроль разнообразия через ядерную выборку: 0.5 означает рассмотрение половины вариантов.',
+  'playground.params.seed.tips':
+    'При указании seed система будет стараться генерировать детерминированные результаты.',
+  'playground.params.stop.tips':
+    'Стоп-последовательность останавливает генерацию при её появлении в выводе.',
+  'playground.viewcode.tips':
+    'Ваш API-ключ можно найти {here}. Используйте переменные окружения для его защиты.',
   'playground.viewcode.here': 'здесь',
   'playground.delete.img': 'Удалить изображение',
   'playground.img.upload': 'Загрузить изображение',
@@ -42,7 +49,8 @@ export default {
   'playground.compare.apply': 'Применить',
   'playground.compare.applytoall': 'Применить ко всем моделям',
   'playground.model.noavailable': 'Нет доступных моделей',
-  'playground.model.noavailable.tips':  'Сначала разверните модель (не embedding-типа).',
+  'playground.model.noavailable.tips':
+    'Сначала разверните модель (не embedding-типа).',
   'playground.params.counts': 'Количество',
   'playground.params.quality': 'Качество',
   'playground.params.style': 'Стиль',
@@ -74,14 +82,16 @@ export default {
   'playground.audio.speechtotext': 'Речь в текст',
   'playground.audio.texttospeech.tips': 'Здесь появится сгенерированная речь',
   'playground.audio.speechtotext.tips': 'Загрузите аудио или начните запись',
-  'playground.audio.enablemic': 'Разрешите доступ к микрофону в настройках браузера.',
+  'playground.audio.enablemic':
+    'Разрешите доступ к микрофону в настройках браузера.',
   'playground.audio.enablemic.doc': 'Инструкция',
   'playground.audio.startrecord': 'Начать запись',
   'playground.audio.stoprecord': 'Остановить запись',
   'playground.audio.generating.tips': 'Здесь появится распознанный текст',
   'playground.audio.uploadfile.tips': 'Поддерживаемые форматы: {formats}',
   'playground.input.multiplePaste': 'Пакетный ввод',
-  'playground.input.multiplePaste.tips': 'Многострочный текст будет автоматически разделён на отдельные записи.',
+  'playground.input.multiplePaste.tips':
+    'Многострочный текст будет автоматически разделён на отдельные записи.',
   'playground.audio.button.generate': 'Сгенерировать текст',
   'playground.multiple.on': 'Включить',
   'playground.multiple.off': 'Выключить',
@@ -96,8 +106,10 @@ export default {
   'playground.image.params.custom.tips': 'Стиль API',
   'playground.image.params.openai': 'Совместимость с OpenAI',
   'playground.embedding.handler.tips': 'Изменить высоту',
-  'playground.embedding.pcatips1': 'PCA используется для визуализации эмбеддингов путём снижения размерности.',
-  'playground.embedding.pcatips2': 'Близкие точки означают схожесть документов.',
+  'playground.embedding.pcatips1':
+    'PCA используется для визуализации эмбеддингов путём снижения размерности.',
+  'playground.embedding.pcatips2':
+    'Близкие точки означают схожесть документов.',
   'playground.audio.button.play': 'Воспроизвести',
   'playground.audio.button.download': 'Скачать',
   'playground.audio.button.stop': 'Остановить',
@@ -105,13 +117,17 @@ export default {
   'playground.audio.button.fast': 'Ускорить',
   'playground.audio.button.slow': 'Замедлить',
   'playground.audio.generating': 'Генерация',
-  'playgorund.audio.voice.error': 'Голоса недоступны. Модель инициализируется. Обновите через некоторое время.',
-  'playground.params.size.description': 'Максимальный размер изображения зависит от параметров модели. <a href="https://github.com/gpustack/llama-box" target="_blank">Подробнее</a>',
+  'playgorund.audio.voice.error':
+    'Голоса недоступны. Модель инициализируется. Обновите через некоторое время.',
+  'playground.params.size.description':
+    'Максимальный размер изображения зависит от параметров модели. <a href="https://github.com/gpustack/llama-box" target="_blank">Подробнее</a>',
   'playground.documents.verify.embedding': 'Добавьте минимум два текста.',
   'playground.documents.verify.rerank': 'Документы не могут быть пустыми.',
-  'playground.image.guidance.tip': 'Уровень контроля: влияет на качество и разнообразие изображений.',
+  'playground.image.guidance.tip':
+    'Уровень контроля: влияет на качество и разнообразие изображений.',
   'playground.image.cfg_scale.tip': 'Уровень соответствия промпту.',
-  'playground.image.strength.tip': 'Чем выше значение — тем сильнее изменения исходного изображения.',
+  'playground.image.strength.tip':
+    'Чем выше значение — тем сильнее изменения исходного изображения.',
   'playground.image.edit.tips': 'Перетащите изображение для загрузки',
   'playground.image.saveMask': 'Сохранить маску',
   'playground.image.negativeMask': 'Негативная маска',
@@ -123,16 +139,18 @@ export default {
   'playground.chat.aithought': 'Рассуждение (CoT)',
   'playground.chat.thinking': 'Рассуждение...',
   'playground.image.mask.uploaded': 'Маска загружена',
-  'playground.image.mask.upload': 'Маска загрузки: Дополнительное редактирование запрещено после загрузки.',
+  'playground.image.mask.upload':
+    'Маска загрузки: Дополнительное редактирование запрещено после загрузки.',
   'playground.params.frequency_penalty.tips': `Число от -2.0 до 2.0. Положительные значения снижают вероятность повторения токенов, уже часто встречающихся в тексте, уменьшая склонность модели дословно повторять одни и те же фразы.`,
   'playground.params.presence_penalty.tips': `Число от -2.0 до 2.0. Положительные значения снижают вероятность повторения любых токенов, присутствующих в тексте, повышая склонность модели к обсуждению новых тем.`,
   'playground.image.origin': 'Оригинал',
   'playground.image.mask': 'Маска',
-  'playground.image.negativeMask.tips': '1. После выделения области создание маски станет недоступным; поэтому сначала нарисуйте маску, а затем активируйте опцию. \n 2. После загрузки изображения маски создание новых масок невозможно.'
+  'playground.image.negativeMask.tips':
+    '1. После выделения области создание маски станет недоступным; поэтому сначала нарисуйте маску, а затем активируйте опцию. \n 2. После загрузки изображения маски создание новых масок невозможно.',
+  'playground.model.noavailable.tips2':
+    'If the expected model isn’t showing up, make sure it’s running and correctly categorized. If the category is incorrect, you can manually adjust it in the model’s settings.'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
-
-
-
+// 1. 'playground.model.noavailable.tips2'
 // ========== End of To-Do List ==========
diff --git a/src/locales/zh-CN/playground.ts b/src/locales/zh-CN/playground.ts
index 09dd6364..443cec51 100644
--- a/src/locales/zh-CN/playground.ts
+++ b/src/locales/zh-CN/playground.ts
@@ -13,21 +13,21 @@ export default {
     '你可以使用以下代码将当前的提示和设置集成到你的应用程序中。',
   'playground.completion': '补全',
   'playground.prompt': '提示',
-  'playground.timeToFirstToken': '输出首个 token 时间',
-  'playground.timePerOutputToken': '生成每个 token 时间',
+  'playground.timeToFirstToken': '输出首个 Token 时间',
+  'playground.timePerOutputToken': '生成每个 Token 时间',
   'playground.tokenusage': 'Token 使用量',
   'models.openinplayground': '打开试验场',
   'playground.tokenoutput': '输出',
   'playground.params.temperature.tips':
     '控制随机性：降低温度会导致更少的随机完成。当温度接近零时，模型将变得确定性和重复性。',
   'playground.params.maxtokens.tips':
-    '生成的最大 token 数。输入的 token 和生成的 token 的总长度受模型上下文长度的限制。',
+    '生成的最大 Token 数。输入的 Token 和生成的 Token 的总长度受模型上下文长度的限制。',
   'playground.params.topp.tips':
     '通过核心采样控制多样性：0.5 表示考虑所有基于概率权重选项的一半。',
   'playground.params.seed.tips':
-    '如果指定，我们的系统将尽最大努力进行确定性采样，以便使用相同 seed 和参数的重复请求应返回相同的结果。',
+    '如果指定，系统将尽最大努力进行确定性采样，以便使用相同 Seed 和参数的重复请求应返回相同的结果。',
   'playground.params.stop.tips':
-    '停止序列是一个预定义或用户指定的文本字符串，当这些序列出现时，它会提示 AI 停止生成后续的 token。',
+    '停止序列是一个预定义或用户指定的文本字符串，当这些序列出现时，它会提示 AI 停止生成后续的 Token',
   'playground.viewcode.tips':
     '{here} 查看 API 密钥。您应该使用环境变量或密钥管理工具将您的密钥暴露给您的应用程序。',
   'playground.viewcode.here': '这里',
@@ -122,10 +122,10 @@ export default {
     '图片生成的最大尺寸受控于模型的部署参数。<a href="https://github.com/gpustack/llama-box" target="_blank">参考文档</a>',
   'playground.documents.verify.embedding': '至少输入两条文本',
   'playground.documents.verify.rerank': '文档不能为空',
-  'playground.image.guidance.tip': '引导比例，影响图片的质量和多样性',
+  'playground.image.guidance.tip': '引导比例，影响图片的质量和多样性。',
   'playground.image.cfg_scale.tip':
-    '无分类器引导比例，影响图片的对Prompt的贴合度',
-  'playground.image.strength.tip': '值越高，它对原图的修改越大',
+    '无分类器引导比例，影响图片的对 Prompt 的贴合度。',
+  'playground.image.strength.tip': '值越高，它对原图的修改越大。',
   'playground.image.edit.tips': '点击或拖动图片到此区域上传',
   'playground.image.saveMask': '保存遮罩',
   'playground.image.negativeMask': '反向遮罩',
@@ -143,5 +143,7 @@ export default {
   'playground.image.origin': '原图',
   'playground.image.mask': '遮罩',
   'playground.image.negativeMask.tips':
-    '1. 选择后，将不可再绘制遮罩；因此，你应该先绘制遮罩然后再勾选.\n 2. 当上传了遮罩图片，将不可再生成遮罩'
+    '1. 选择后，将不可再绘制遮罩；因此，你应该先绘制遮罩然后再勾选.\n 2. 当上传了遮罩图片，将不可再生成遮罩',
+  'playground.model.noavailable.tips2':
+    '若预期的模型未显示，请检查模型是否已正常运行并被正确分类。如分类不正确，请编辑模型并手动调整其类别。'
 };
diff --git a/src/pages/llmodels/components/hf-model-file.tsx b/src/pages/llmodels/components/hf-model-file.tsx
index c9e57897..e6f098fb 100644
--- a/src/pages/llmodels/components/hf-model-file.tsx
+++ b/src/pages/llmodels/components/hf-model-file.tsx
@@ -19,7 +19,7 @@ import {
   queryHuggingfaceModelFiles,
   queryModelScopeModelFiles
 } from '../apis';
-import { modelSourceMap } from '../config';
+import { backendOptionsMap, modelSourceMap } from '../config';
 import '../style/hf-model-file.less';
 import ModelFileItem from './model-file-item';
 import TitleWrapper from './title-wrapper';
@@ -228,6 +228,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
     try {
       const evaluateFileList = list.map((item: any) => {
         return {
+          backend: backendOptionsMap.llamaBox,
           source: modelSource,
           ...(modelSource === modelSourceMap.huggingface_value
             ? {
diff --git a/src/pages/llmodels/components/search-model.tsx b/src/pages/llmodels/components/search-model.tsx
index f9ed1ad7..f1ca3d76 100644
--- a/src/pages/llmodels/components/search-model.tsx
+++ b/src/pages/llmodels/components/search-model.tsx
@@ -207,8 +207,19 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
     try {
       const repoList = list.map((item) => {
         const res = handleRecognizeAudioModel(item, modelSource);
+        let backendObj = {};
+        if (res.isAudio) {
+          backendObj = {
+            backend: backendOptionsMap.voxBox
+          };
+        } else if (item.isGGUF) {
+          // backendObj = {
+          //   backend: backendOptionsMap.llamaBox
+          // };
+        }
+
         return {
-          ...(res.isAudio ? { backend: backendOptionsMap.voxBox } : {}),
+          ...backendObj,
           source: modelSource,
           ...(modelSource === modelSourceMap.huggingface_value
             ? {
diff --git a/src/pages/llmodels/hooks/index.ts b/src/pages/llmodels/hooks/index.ts
index 15412219..216a02ba 100644
--- a/src/pages/llmodels/hooks/index.ts
+++ b/src/pages/llmodels/hooks/index.ts
@@ -431,10 +431,6 @@ export const useCheckCompatibility = () => {
     const { scheduleType } = allValues;
     const gpuIds = allValues.gpu_selector?.gpu_ids || [];
 
-    if (scheduleType === 'manual') {
-      return !gpuIds.length;
-    }
-
     const noLocalValue =
       allValues.source === modelSourceMap.local_path_value &&
       !allValues.local_path;
@@ -443,6 +439,10 @@ export const useCheckCompatibility = () => {
       allValues.source === modelSourceMap.ollama_library_value &&
       !allValues.ollama_library_model_name;
 
+    if (scheduleType === 'manual') {
+      return !gpuIds.length || noLocalValue || noOllamaValue;
+    }
+
     return noLocalValue || noOllamaValue;
   };
 
@@ -455,6 +455,7 @@ export const useCheckCompatibility = () => {
     if (_.isEqual(cacheFormValuesRef.current, allValues)) {
       return;
     }
+
     if (checkRequiredValue(allValues)) {
       setWarningStatus({
         show: false,
diff --git a/src/pages/playground/components/dynamic-params.tsx b/src/pages/playground/components/dynamic-params.tsx
index 1fc0b2bb..2ea9c911 100644
--- a/src/pages/playground/components/dynamic-params.tsx
+++ b/src/pages/playground/components/dynamic-params.tsx
@@ -174,6 +174,9 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
                   ]}
                 >
                   <SealSelect
+                    description={intl.formatMessage({
+                      id: 'playground.model.noavailable.tips2'
+                    })}
                     onChange={handleOnModelChange}
                     showSearch={true}
                     options={modelList}
diff --git a/src/pages/resources/components/model-files.tsx b/src/pages/resources/components/model-files.tsx
index 0ef33fab..397ee56c 100644
--- a/src/pages/resources/components/model-files.tsx
+++ b/src/pages/resources/components/model-files.tsx
@@ -97,6 +97,13 @@ const PathWrapper = styled.div`
   }
 `;
 
+const OverlayScrollerWrapper = styled.div`
+  .overlay-scroller-wrapper {
+    padding-block: 0;
+    padding-inline: 6px 0;
+  }
+`;
+
 const ItemWrapper = styled.ul`
   max-width: 300px;
   margin: 0;
@@ -331,7 +338,11 @@ const ModelFiles = () => {
 
     return (
       <Tooltip
-        title={<OverlayScroller>{renderItem()}</OverlayScroller>}
+        title={
+          <OverlayScrollerWrapper>
+            <OverlayScroller>{renderItem()}</OverlayScroller>
+          </OverlayScrollerWrapper>
+        }
         overlayInnerStyle={{ width: 'max-content', maxWidth: 300 }}
       >
         <FilesTag color="purple" icon={<InfoCircleOutlined />}>
diff --git a/src/pages/resources/components/workers.tsx b/src/pages/resources/components/workers.tsx
index ae1a03ac..86898dba 100644
--- a/src/pages/resources/components/workers.tsx
+++ b/src/pages/resources/components/workers.tsx
@@ -246,8 +246,7 @@ const Workers: React.FC = () => {
                   style={{
                     display: 'flex',
                     flexWrap: 'wrap',
-                    gap: 6,
-                    maxWidth: 200
+                    gap: 6
                   }}
                 >
                   {_.map(record.labels, (value: any, key: string) => {
@@ -255,7 +254,7 @@ const Workers: React.FC = () => {
                       <AutoTooltip
                         key={key}
                         className="m-r-0"
-                        maxWidth={120}
+                        maxWidth={155}
                         style={{
                           paddingInline: 8,
                           borderRadius: 12