From 7672eb3900dcc0b446054a949f4258b142c6f80f Mon Sep 17 00:00:00 2001 From: Minamiyama Date: Thu, 11 Apr 2024 18:26:17 +0800 Subject: [PATCH 1/3] hotkey to search --- .../ui/src/components/hotkeyFocusTextField.js | 59 +++++++++++++++++++ .../launch_model/LaunchModelComponent.js | 6 +- .../ui/src/scenes/launch_model/launchLLM.js | 13 ++-- 3 files changed, 67 insertions(+), 11 deletions(-) create mode 100644 xinference/web/ui/src/components/hotkeyFocusTextField.js diff --git a/xinference/web/ui/src/components/hotkeyFocusTextField.js b/xinference/web/ui/src/components/hotkeyFocusTextField.js new file mode 100644 index 0000000000..5f5aa64cde --- /dev/null +++ b/xinference/web/ui/src/components/hotkeyFocusTextField.js @@ -0,0 +1,59 @@ +import { TextField } from '@mui/material' +import InputAdornment from '@mui/material/InputAdornment' +import Typography from '@mui/material/Typography' +import React, { useEffect, useRef, useState } from 'react' + +const HotkeyFocusTextField = ({ + label, + value, + onChange, + hotkey = '/', + ...props +}) => { + const [isFocused, setIsFocused] = useState(false) + const textFieldRef = useRef(null) // 创建一个ref来引用TextField + const handleKeyDown = (event) => { + // 检测到按下'/'键 + if ( + event.key === hotkey && + document.activeElement !== textFieldRef.current + ) { + event.preventDefault() // 阻止默认行为 + setIsFocused(true) // 更新状态以聚焦TextField + // 检查并确保TextField已经渲染 + textFieldRef.current?.focus() // 使用ref聚焦TextField + } + } + + useEffect(() => { + document.addEventListener('keydown', handleKeyDown) + + return () => { + document.removeEventListener('keydown', handleKeyDown) + } + }, [hotkey]) + + return ( + setIsFocused(false)} + InputProps={{ + endAdornment: + !isFocused && !value ? ( + + + Type {hotkey} to search + + + ) : null, + }} + /> + ) +} + +export default HotkeyFocusTextField diff --git a/xinference/web/ui/src/scenes/launch_model/LaunchModelComponent.js b/xinference/web/ui/src/scenes/launch_model/LaunchModelComponent.js index 7603a394d8..082b9f3067 100644 --- a/xinference/web/ui/src/scenes/launch_model/LaunchModelComponent.js +++ b/xinference/web/ui/src/scenes/launch_model/LaunchModelComponent.js @@ -1,8 +1,9 @@ -import { Box, FormControl, TextField } from '@mui/material' +import { Box, FormControl } from '@mui/material' import React, { useContext, useEffect, useState } from 'react' import { ApiContext } from '../../components/apiContext' import fetcher from '../../components/fetcher' +import HotkeyFocusTextField from '../../components/hotkeyFocusTextField' import ModelCard from './modelCard' import style from './styles/launchModelStyle' @@ -66,13 +67,14 @@ const LaunchModelComponent = ({ modelType }) => { }} > - diff --git a/xinference/web/ui/src/scenes/launch_model/launchLLM.js b/xinference/web/ui/src/scenes/launch_model/launchLLM.js index 381f97abaf..3971b7071a 100644 --- a/xinference/web/ui/src/scenes/launch_model/launchLLM.js +++ b/xinference/web/ui/src/scenes/launch_model/launchLLM.js @@ -1,16 +1,10 @@ -import { - Box, - FormControl, - InputLabel, - MenuItem, - Select, - TextField, -} from '@mui/material' +import { Box, FormControl, InputLabel, MenuItem, Select } from '@mui/material' import React, { useContext, useEffect, useState } from 'react' import { useCookies } from 'react-cookie' import { ApiContext } from '../../components/apiContext' import fetcher from '../../components/fetcher' +import HotkeyFocusTextField from '../../components/hotkeyFocusTextField' import ModelCard from './modelCard' const LaunchLLM = ({ gpuAvailable }) => { @@ -133,13 +127,14 @@ const LaunchLLM = ({ gpuAvailable }) => { - From 726caf07bbb045aae6ea6898d23c631a62c9b3f5 Mon Sep 17 00:00:00 2001 From: Minamiyama Date: Thu, 11 Apr 2024 21:56:32 +0800 Subject: [PATCH 2/3] bug fix and remove comments --- .../web/ui/src/components/hotkeyFocusTextField.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/xinference/web/ui/src/components/hotkeyFocusTextField.js b/xinference/web/ui/src/components/hotkeyFocusTextField.js index 5f5aa64cde..4a9c00bfe6 100644 --- a/xinference/web/ui/src/components/hotkeyFocusTextField.js +++ b/xinference/web/ui/src/components/hotkeyFocusTextField.js @@ -11,17 +11,15 @@ const HotkeyFocusTextField = ({ ...props }) => { const [isFocused, setIsFocused] = useState(false) - const textFieldRef = useRef(null) // 创建一个ref来引用TextField + const textFieldRef = useRef(null) const handleKeyDown = (event) => { - // 检测到按下'/'键 if ( event.key === hotkey && document.activeElement !== textFieldRef.current ) { - event.preventDefault() // 阻止默认行为 - setIsFocused(true) // 更新状态以聚焦TextField - // 检查并确保TextField已经渲染 - textFieldRef.current?.focus() // 使用ref聚焦TextField + event.preventDefault() + setIsFocused(true) + textFieldRef.current?.focus() } } @@ -42,6 +40,7 @@ const HotkeyFocusTextField = ({ inputRef={textFieldRef} autoFocus={isFocused} onBlur={() => setIsFocused(false)} + onFocus={() => setIsFocused(true)} InputProps={{ endAdornment: !isFocused && !value ? ( From 42591690c8c83f63eb8327ce4cdb661a6462b746 Mon Sep 17 00:00:00 2001 From: Minamiyama Date: Thu, 18 Apr 2024 20:11:27 +0800 Subject: [PATCH 3/3] overwrite custom model search boxes for adding hotkey focus --- .../web/ui/src/scenes/launch_model/launchCustom.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/xinference/web/ui/src/scenes/launch_model/launchCustom.js b/xinference/web/ui/src/scenes/launch_model/launchCustom.js index 7ae13ce943..d591c77aa4 100644 --- a/xinference/web/ui/src/scenes/launch_model/launchCustom.js +++ b/xinference/web/ui/src/scenes/launch_model/launchCustom.js @@ -1,10 +1,11 @@ import { TabContext, TabList, TabPanel } from '@mui/lab' -import { Box, FormControl, Tab, TextField } from '@mui/material' +import { Box, FormControl, Tab } from '@mui/material' import React, { useContext, useEffect, useState } from 'react' import { useNavigate } from 'react-router-dom' import { ApiContext } from '../../components/apiContext' import fetcher from '../../components/fetcher' +import HotkeyFocusTextField from '../../components/hotkeyFocusTextField' import ModelCard from './modelCard' const LaunchCustom = ({ gpuAvailable }) => { @@ -169,13 +170,14 @@ const LaunchCustom = ({ gpuAvailable }) => { }} > - @@ -216,13 +218,14 @@ const LaunchCustom = ({ gpuAvailable }) => { }} > - @@ -256,13 +259,14 @@ const LaunchCustom = ({ gpuAvailable }) => { }} > -