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

chore: playground hotkey

Browse Source
This commit is contained in:
jialin
2024-06-25 17:09:47 +08:00
parent a7ea167298
commit ad9775db69
13 changed files with 122 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -27,6 +27,7 @@
"lodash": "^4.17.21",
"numeral": "^2.0.6",
"query-string": "^9.0.0",
"react-hotkeys-hook": "^4.5.0",
"umi-presets-pro": "^2.0.3"
},
"devDependencies": {
pnpm-lock.yaml
Generated
+13
View File
@@ -53,6 +53,9 @@ dependencies:
query-string:
specifier: ^9.0.0
version: 9.0.0
react-hotkeys-hook:
specifier: ^4.5.0
version: 4.5.0(react-dom@18.3.1)(react@18.3.1)
umi-presets-pro:
specifier: ^2.0.3
version: 2.0.3(@babel/core@7.24.5)(@types/react-dom@18.3.0)(@types/react@18.3.1)(antd@5.17.0)(dva@2.5.0-beta.2)(rc-field-form@1.44.0)(react-dom@18.3.1)(react@18.3.1)(umi@4.2.1)
@@ -14203,6 +14206,16 @@ packages:
shallowequal: 1.1.0
dev: false
/react-hotkeys-hook@4.5.0(react-dom@18.3.1)(react@18.3.1):
resolution: {integrity: sha512-Samb85GSgAWFQNvVt3PS90LPPGSf9mkH/r4au81ZP1yOIFayLC3QAvqTgGtJ8YEDMXtPmaVBs6NgipHO6h4Mug==, tarball: https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-4.5.0.tgz}
peerDependencies:
react: '>=16.8.1'
react-dom: '>=16.8.1'
dependencies:
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
dev: false
/react-intl@3.12.1(react@18.3.1):
resolution: {integrity: sha512-cgumW29mwROIqyp8NXStYsoIm27+8FqnxykiLSawWjOxGIBeLuN/+p2srei5SRIumcJefOkOIHP+NDck05RgHg==}
peerDependencies:
src/assets/styles/common.less
+8
View File
@@ -27,3 +27,11 @@
display: flex;
align-items: center;
}
.opct-7 {
opacity: 0.7;
}
.opct-8 {
opacity: 0.8;
}
src/config/hotkeys.ts
+12 -11
View File
@@ -1,13 +1,14 @@
export default {
Create: ['ctrl+n', 'cmd+n'],
Save: ['ctrl+s', 'cmd+s'],
SaveAs: ['ctrl+shift+s', 'cmd+shift+s'],
Open: ['ctrl+o', 'cmd+o'],
Cancel: ['ctrl+w', 'cmd+w'],
Delete: ['delete'],
Copy: ['ctrl+c', 'cmd+c'],
Refresh: ['ctrl+r', 'cmd+r'],
Edit: ['ctrl+e', 'cmd+e'],
Search: ['ctrl+f', 'cmd+f'],
Reset: ['ctrl+shift+r', 'cmd+shift+r']
CREATE: ['ctrl+n', 'meta+n'],
SAVE: ['ctrl+s', 'meta+s'],
SUBMIT: ['ctrl+enter', 'meta+enter'],
SAVEAS: ['ctrl+shift+s', 'meta+shift+s'],
OPEN: ['ctrl+o', 'meta+o'],
CANCEL: ['ctrl+w', 'meta+w'],
DELETE: ['delete'],
COPY: ['ctrl+c', 'meta+c'],
REFRESH: ['ctrl+r', 'meta+r'],
EDIT: ['ctrl+e', 'meta+e'],
SEARCH: ['ctrl+f', 'meta+f'],
RESET: ['ctrl+shift+r', 'meta+shift+r']
};
src/pages/llmodels/config/types.ts
+2 -2
View File
@@ -26,8 +26,8 @@ export interface ModelInstanceListItem {
huggingface_repo_id: string;
huggingface_filename: string;
s3_address: string;
node_id: number;
node_ip: string;
worker_id: number;
worker_ip: string;
pid: number;
port: number;
state: string;
src/pages/llmodels/index.tsx
+1 -1
View File
@@ -338,7 +338,7 @@ const Models: React.FC = () => {
<RowChildren>
<Row style={{ width: '100%' }} align="middle">
<Col span={4}>
{item.node_ip}:{item.port}
{item.worker_ip}:{item.port}
</Col>
<Col span={5}>
<span>{item.huggingface_filename}</span>
src/pages/playground/components/chat-footer.tsx
+17 -8
View File
@@ -1,11 +1,14 @@
import HotKeys from '@/config/hotkeys';
import {
CodeOutlined,
DeleteOutlined,
PlusOutlined,
SaveOutlined
EnterOutlined,
MacCommandOutlined,
PlusOutlined
} from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Col, Row, Space } from 'antd';
import { useHotkeys } from 'react-hotkeys-hook';
import '../style/chat-footer.less';
interface ChatFooterProps {
@@ -20,6 +23,14 @@ interface ChatFooterProps {
const ChatFooter: React.FC<ChatFooterProps> = (props) => {
const intl = useIntl();
const { onSubmit, onClear, onNewMessage, onView, feedback, disabled } = props;
useHotkeys(
HotKeys.SUBMIT.join(','),
() => {
onSubmit();
},
{ enabled: !disabled }
);
return (
<div className="chat-footer">
<Row style={{ width: '100%' }}>
@@ -52,13 +63,11 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
>
{intl.formatMessage({ id: 'playground.viewcode' })}
</Button>
<Button
disabled={disabled}
type="primary"
icon={<SaveOutlined></SaveOutlined>}
onClick={onSubmit}
>
<Button disabled={disabled} type="primary" onClick={onSubmit}>
{intl.formatMessage({ id: 'common.button.submit' })}
<span className="m-l-5 opct-7">
<MacCommandOutlined /> + <EnterOutlined />
</span>
</Button>
</Space>
</Col>
src/pages/playground/components/ground-left.tsx
+28
View File
@@ -1,10 +1,12 @@
import TransitionWrapper from '@/components/transition';
import HotKeys from '@/config/hotkeys';
import { EyeInvisibleOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { Button, Input, Spin } from 'antd';
import _ from 'lodash';
import { useRef, useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { fetchChatStream, receiveChatStream } from '../apis';
import { Roles } from '../config';
import '../style/ground-left.less';
@@ -13,6 +15,7 @@ import ChatFooter from './chat-footer';
import MessageItem from './message-item';
import ReferenceParams from './reference-params';
import ViewCodeModal from './view-code-modal';
interface MessageProps {
parameters: any;
}
@@ -40,6 +43,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
const [loading, setLoading] = useState(false);
const [activeIndex, setActiveIndex] = useState(-1);
const [tokenResult, setTokenResult] = useState<any>(null);
const [currentIsFocus, setCurrentIsFocus] = useState(false);
const systemRef = useRef<any>(null);
const contentRef = useRef<any>('');
@@ -153,6 +157,27 @@ const MessageList: React.FC<MessageProps> = (props) => {
</div>
);
};
const handleFocus = () => {
setCurrentIsFocus(true);
};
const handleBlur = () => {
setCurrentIsFocus(false);
};
useHotkeys(
HotKeys.SUBMIT,
() => {
handleSubmit();
},
{
enabled: currentIsFocus && !loading,
enableOnFormTags: currentIsFocus && !loading,
preventDefault: true
}
);
return (
<div className="ground-left">
<PageContainer title={false} className="message-list-wrap">
@@ -166,6 +191,8 @@ const MessageList: React.FC<MessageProps> = (props) => {
value={systemMessage}
variant="filled"
autoSize={true}
onFocus={handleFocus}
onBlur={handleBlur}
placeholder={intl.formatMessage({ id: 'playground.system.tips' })}
onChange={handleSystemMessageChange}
></Input.TextArea>
@@ -184,6 +211,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
updateMessage={(message: MessageItemProps) =>
handleUpdateMessage(index, message)
}
onSubmit={handleSubmit}
message={item}
/>
);
src/pages/playground/components/message-item.tsx
+24 -1
View File
@@ -1,7 +1,9 @@
import HotKeys from '@/config/hotkeys';
import { MinusCircleOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Input } from 'antd';
import { memo, useEffect, useRef, useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { Roles } from '../config';
import '../style/message-item.less';
interface MessageItemProps {
@@ -14,18 +16,32 @@ const MessageItem: React.FC<{
message: MessageItemProps;
loading?: boolean;
islast?: boolean;
onSubmit: () => void;
updateMessage: (message: MessageItemProps) => void;
isFocus: boolean;
onDelete: () => void;
}> = ({ message, isFocus, onDelete, updateMessage }) => {
}> = ({ message, isFocus, onDelete, updateMessage, onSubmit, loading }) => {
const intl = useIntl();
const [roleType, setRoleType] = useState(message.role);
const [isTyping, setIsTyping] = useState(false);
const [messageContent, setMessageContent] = useState(message.content);
const isInitialRender = useRef(true);
const [isAnimating, setIsAnimating] = useState(false);
const [currentIsFocus, setCurrentIsFocus] = useState(isFocus);
const inputRef = useRef<any>(null);
useHotkeys(
HotKeys.SUBMIT,
() => {
onSubmit();
},
{
enabled: currentIsFocus && !loading,
enableOnFormTags: currentIsFocus && !loading,
preventDefault: true
}
);
useEffect(() => {
if (inputRef.current && isFocus) {
inputRef.current.focus();
@@ -75,6 +91,11 @@ const MessageItem: React.FC<{
const handleBlur = () => {
setIsTyping(true);
setCurrentIsFocus(false);
};
const handleFocus = () => {
setCurrentIsFocus(true);
};
const handleRoleChange = () => {
@@ -103,6 +124,7 @@ const MessageItem: React.FC<{
autoSize={true}
variant="filled"
onChange={handleMessageChange}
onFocus={handleFocus}
onBlur={handleBlur}
></Input.TextArea>
</div>
@@ -110,6 +132,7 @@ const MessageItem: React.FC<{
<Button
type="text"
shape="circle"
size="small"
style={{ color: 'var(--ant-color-primary)' }}
onClick={handleDelete}
icon={<MinusCircleOutlined />}
src/pages/resources/apis/index.ts
+3 -3
View File
@@ -1,12 +1,12 @@
import { request } from '@umijs/max';
import { ListItem } from '../config/types';
export const NODES_API = '/nodes';
export const WORKERS_API = '/workers';
export async function queryNodesList(
export async function queryWorkersList(
params: Global.Pagination & { query?: string }
) {
return request<Global.PageResponse<ListItem>>(`${NODES_API}`, {
return request<Global.PageResponse<ListItem>>(`${WORKERS_API}`, {
methos: 'GET',
params
});
src/pages/resources/components/nodes.tsx
+8 -7
View File
@@ -8,7 +8,7 @@ import { useIntl } from '@umijs/max';
import { Button, Input, Space, Table } from 'antd';
import _ from 'lodash';
import { useEffect, useState } from 'react';
import { queryNodesList } from '../apis';
import { queryWorkersList } from '../apis';
import { ListItem } from '../config/types';
const { Column } = Table;
@@ -33,8 +33,8 @@ const Models: React.FC = () => {
const params = {
..._.pickBy(queryParams, (val: any) => !!val)
};
const res = await queryNodesList(params);
console.log('res=======', res);
const res = await queryWorkersList(params);
setDataSource(res.items);
setTotal(res.pagination.total);
} catch (error) {
@@ -131,15 +131,16 @@ const Models: React.FC = () => {
return (
<StatusTag
statusValue={{
status:
record.status?.state === 'active' ? 'success' : 'error',
text: record.status?.state
status: ['Inactive', 'unknown'].includes(record.state)
? 'inactive'
: 'success',
text: record.state
}}
></StatusTag>
);
}}
/>
<Column title="IP" dataIndex="address" key="address" />
<Column title="IP" dataIndex="ip" key="address" />
<Column
title="CPU"
dataIndex="CPU"
src/pages/resources/config/types.ts
+2 -1
View File
@@ -34,6 +34,8 @@ export interface ListItem {
hostname: string;
address: string;
labels: object;
state: string;
ip: string;
status: {
cpu: {
total: number;
@@ -60,7 +62,6 @@ export interface ListItem {
uptime: number;
boot_time: string;
};
state: string;
};
id: number;
created_at: string;
src/pages/resources/index.tsx
+3 -3
View File
@@ -8,8 +8,8 @@ import Nodes from './components/nodes';
const items: TabsProps['items'] = [
{
key: 'nodes',
label: 'Nodes',
key: 'workers',
label: 'Workers',
children: <Nodes />
},
{
@@ -38,7 +38,7 @@ const Resources = () => {
<div style={{ marginTop: 70 }}>
<Tabs
type="card"
defaultActiveKey="nodes"
defaultActiveKey="workers"
items={items}
accessKey={activeKey}
onChange={handleChangeTab}