root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: shortcut for start to search model

Browse Source
This commit is contained in:
jialin
2025-04-07 13:38:53 +08:00
parent b89e7c6c3d
commit f7c597d957
7 changed files with 79 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/auto-tooltip/title-tip.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ const TitleTip: React.FC<TitleTipProps> = (props) => {
<div
style={{
width: 'max-content',
maxWidth: 250,
maxWidth: 300,
paddingInline: 10
}}
>
src/global.less
+7 -6
View File
@@ -827,18 +827,19 @@ body {
.ant-tooltip-content {
.ant-tooltip-inner {
width: max-content;
max-width: 300px;
.text-tertiary {
color: var(--color-white-secondary);
}
a {
color: var(--ant-color-link-hover);
}
}
}
.ant-tooltip-inner {
.text-tertiary {
color: var(--color-white-secondary);
}
}
.light-downloading-tooltip {
&.ant-tooltip .ant-tooltip-arrow::before {
background: var(--color-white-1);
src/locales/en-US/models.ts
+2 -1
View File
@@ -21,7 +21,8 @@ export default {
'model.form.ollama.model': 'Ollama Model',
'model.form.ollamaholder': 'Please select or input model name',
'model.deploy.sort': 'Sort',
'model.deploy.search.placeholder': 'Search models from {source}',
'model.deploy.search.placeholder':
'Type <kbd>/</kbd> to search models from {source}',
'model.form.ollamatips':
'Tip: The following are the preconfigured Ollama models in GPUStack. Please select the model you want, or directly enter the model you wish to deploy in the 【{name}】 input box on the right.',
'models.sort.name': 'Name',
src/locales/ja-JP/models.ts
+3 -1
View File
@@ -21,7 +21,8 @@ export default {
'model.form.ollama.model': 'Ollamaモデル',
'model.form.ollamaholder': 'モデル名を選択または入力してください',
'model.deploy.sort': '並び替え',
'model.deploy.search.placeholder': '{source}からモデルを検索',
'model.deploy.search.placeholder':
'Type <kbd>/</kbd> to search models from {source}',
'model.form.ollamatips':
'ヒント: 以下はGPUStackで事前設定されたOllamaモデルです。希望するモデルを選択するか、右側の【{name}】入力ボックスにデプロイしたいモデルを直接入力してください。',
'models.sort.name': '名前',
@@ -142,4 +143,5 @@ export default {
// 10. 'models.form.distribution.tips,
// 11. 'models.form.check.passed',
// 12. 'models.form.check.claims',
// 13. 'model.deploy.search.placeholder',
// ========== End of To-Do List ==========
src/locales/ru-RU/models.ts
+3 -1
View File
@@ -21,7 +21,8 @@ export default {
'model.form.ollama.model': 'Модель Ollama',
'model.form.ollamaholder': 'Выберите или введите название модели',
'model.deploy.sort': 'Сортировка',
'model.deploy.search.placeholder': 'Поиск моделей в {source}',
'model.deploy.search.placeholder':
'Type <kbd>/</kbd> to search models from {source}',
'model.form.ollamatips':
'Подсказка: ниже представлены предустановленные модели Ollama в GPUStack. Выберите нужную или введите модель для развертывания в поле 【{name}】 справа.',
'models.sort.name': 'По имени',
@@ -134,4 +135,5 @@ export default {
// ========== To-Do: Translate Keys (Remove After Translation) ==========
// 1. 'models.form.check.passed',
// 2. 'models.form.partialoffload.tips
// 3. 'model.deploy.search.placeholder'
// ========== End of To-Do List ==========
src/locales/zh-CN/models.ts
+1 -1
View File
@@ -23,7 +23,7 @@ export default {
'model.form.ollama.model': 'Ollama 模型',
'model.form.ollamaholder': '请选择或输入模型名称',
'model.deploy.sort': '排序',
'model.deploy.search.placeholder': '从 {source} 搜索模型',
'model.deploy.search.placeholder': '按 <kbd>/</kbd> 开始从 {source} 搜索模型',
'model.form.ollamatips':
'提示：以下为 GPUStack 预设的 Ollama 模型，请选择你想要的模型或者直接在右侧表单 【{name}】 输入框中输入你要部署的模型。',
'models.sort.name': '名称',
src/pages/llmodels/components/search-input.tsx
+62 -21
View File
@@ -4,8 +4,26 @@ import { useIntl } from '@umijs/max';
import { Input } from 'antd';
import React, { useRef } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import styled from 'styled-components';
import { modelSourceMap, modelSourceValueMap } from '../config';
const SearchInputWrapper = styled.div`
position: relative;
width: 100%;
`;
const Holder = styled.div`
pointer-events: none;
position: absolute;
top: 12px;
left: 34px;
color: var(--ant-color-text-quaternary);
z-index: 10;
kbd {
border: 1px solid var(--ant-color-border);
border-radius: 3px;
padding: 0 2px;
}
`;
const SearchInput: React.FC<{
modelSource: string;
onChange: (e: any) => void;
@@ -14,35 +32,58 @@ const SearchInput: React.FC<{
const { onSearch, onChange, modelSource } = props;
const intl = useIntl();
const inputRef = useRef<any>(null);
const [isFocused, setIsFocused] = React.useState(false);
const [value, setValue] = React.useState('');
useHotkeys(hotkeys.FOCUS, (e: any) => {
e.preventDefault();
inputRef.current?.focus?.();
});
const handleOnChange = (e: any) => {
setValue(e.target.value);
onChange(e);
};
return (
<Input
ref={inputRef}
onPressEnter={onSearch}
onChange={onChange}
allowClear
placeholder={intl.formatMessage(
{
id: 'model.deploy.search.placeholder'
},
{ source: modelSourceValueMap[modelSource] }
<SearchInputWrapper>
<Input
ref={inputRef}
onPressEnter={onSearch}
onChange={handleOnChange}
onFocus={(e) => {
setIsFocused(true);
e.stopPropagation();
}}
onBlur={(e) => {
setIsFocused(false);
e.stopPropagation();
}}
allowClear
prefix={
<IconFont
className="font-size-16"
type={
modelSource === modelSourceMap.huggingface_value
? 'icon-huggingface'
: 'icon-tu2'
}
></IconFont>
}
></Input>
{!value && !isFocused && (
<Holder
dangerouslySetInnerHTML={{
__html: intl.formatMessage(
{
id: 'model.deploy.search.placeholder'
},
{ source: modelSourceValueMap[modelSource] }
)
}}
></Holder>
)}
prefix={
<IconFont
className="font-size-16"
type={
modelSource === modelSourceMap.huggingface_value
? 'icon-huggingface'
: 'icon-tu2'
}
></IconFont>
}
></Input>
</SearchInputWrapper>
);
};