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

fix(style): compare sroll

Browse Source
This commit is contained in:
jialin
2024-09-26 19:52:54 +08:00
parent cc7d2ded6c
commit 7e985991cd
16 changed files with 147 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/styles/common.less
+4
View File
@@ -70,6 +70,10 @@
padding-left: 6px;
}
.p-l-8 {
padding-left: 8px;
}
.flex {
display: flex;
}
src/components/markdown-viewer/index.tsx
+1
View File
@@ -88,6 +88,7 @@ const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
htmlstr = (
<Image
src={token.href}
alt={token.text}
preview={{
mask: <EyeOutlined />
}}
src/components/seal-form/components/wrapper.less
+1
View File
@@ -95,6 +95,7 @@
align-items: flex-start;
flex: 1;
padding-block: 20px 0;
max-width: 100%;
&.no-wrapper-style {
padding-block: 0;
src/global.less
+8
View File
@@ -518,6 +518,14 @@ body {
}
}
.ant-dropdown-menu
.ant-dropdown-menu-item.ant-dropdown-menu-item-danger:not(
.ant-dropdown-menu-item-disabled
):hover {
background-color: var(--ant-color-error-bg) !important;
color: var(--ant-color-error) !important;
}
.ant-message-notice-wrapper {
.ant-message-notice-error {
.ant-message-notice-content {
src/pages/llmodels/components/data-form.tsx
+1 -1
View File
@@ -219,10 +219,10 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
filterOption
defaultActiveFirstOption
disabled={action === PageAction.EDIT}
options={ollamaModelOptions}
label={intl.formatMessage({ id: 'model.form.ollama.model' })}
placeholder={intl.formatMessage({ id: 'model.form.ollamaholder' })}
required
options={ollamaModelOptions}
></SealAutoComplete>
</Form.Item>
</>
src/pages/llmodels/components/deploy-modal.tsx
+1 -1
View File
@@ -118,7 +118,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
width={width}
footer={false}
>
<div style={{ display: 'flex' }}>
<div style={{ display: 'flex', height: '100%' }}>
{SEARCH_SOURCE.includes(props.source) && (
<>
<div style={{ display: 'flex', flex: 1 }}>
src/pages/llmodels/components/gpu-card.tsx
+28 -18
View File
@@ -6,30 +6,40 @@ import '../style/gpu-card.less';
const GPUCard: React.FC<{
data: any;
}> = ({ data }) => {
header?: React.ReactNode;
info?: React.ReactNode;
}> = ({ data, header, info }) => {
const intl = useIntl();
return (
<div className="gpu-card">
<div className="header">
{data.label}({data.worker_name})[
{intl.formatMessage({ id: 'resources.table.index' })}:{data.index}]
{header ?? (
<>
{data.label}({data.worker_name})[
{intl.formatMessage({ id: 'resources.table.index' })}:{data.index}]
</>
)}
</div>
<div className="info">
<span>
{intl.formatMessage({ id: 'resources.table.vram' })}(
{intl.formatMessage({ id: 'resources.table.used' })}/
{intl.formatMessage({ id: 'resources.table.total' })}):{' '}
<span>
{convertFileSize(data?.memory?.used || 0)} /{' '}
{convertFileSize(data?.memory?.total || 0)}
</span>
</span>
<span>
<span>
{intl.formatMessage({ id: 'resources.table.gpuutilization' })}:{' '}
</span>
{_.round(data?.memory?.utilization_rate || 0, 2)}%
</span>
{info ?? (
<>
<span>
{intl.formatMessage({ id: 'resources.table.vram' })}(
{intl.formatMessage({ id: 'resources.table.used' })}/
{intl.formatMessage({ id: 'resources.table.total' })}):{' '}
<span>
{convertFileSize(data?.memory?.used || 0)} /{' '}
{convertFileSize(data?.memory?.total || 0)}
</span>
</span>
<span>
<span>
{intl.formatMessage({ id: 'resources.table.gpuutilization' })}:{' '}
</span>
{_.round(data?.memory?.utilization_rate || 0, 2)}%
</span>
</>
)}
</div>
</div>
);
src/pages/llmodels/components/model-card.tsx
+2 -1
View File
@@ -111,6 +111,7 @@ const ModelCard: React.FC<{
const getModelCardData = async () => {
if (!props.selectedModel.name) {
setModelData(null);
setReadmeText(null);
return;
}
requestToken.current?.cancel?.();
@@ -191,7 +192,7 @@ const ModelCard: React.FC<{
<div className="card-wrapper">
{modelData ? (
<div className="model-card-wrap">
<div className="flex-between flex-center">
<div className="flex-center">
{modelData.config?.model_type && (
<Tag className="tag-item" color="gold">
<span style={{ opacity: 0.65 }}>
src/pages/llmodels/config/index.ts
+7 -7
View File
@@ -44,13 +44,13 @@ export const ollamaModelOptions = [
tags: ['7B'],
id: 'mistral'
},
// {
// label: 'llava',
// value: 'llava',
// name: 'llava',
// tags: ['7B', '13B', '34B'],
// id: 'llava'
// },
{
label: 'llava',
value: 'llava',
name: 'llava',
tags: ['7B', '13B', '34B'],
id: 'llava'
},
{
label: 'qwen2',
value: 'qwen2',
src/pages/llmodels/style/separator.less
+4 -3
View File
@@ -5,14 +5,15 @@
position: absolute;
border-radius: 0 2px 0 0;
top: 10px;
left: -10px;
width: 22px;
height: 22px;
left: -13px;
width: 24px;
height: 24px;
border: 2px solid var(--ant-color-split);
transform: rotate(45deg);
border-left: none;
border-bottom: none;
background-color: var(--color-white-1);
z-index: 100;
clip-path: polygon(0 -1px, 24px 0, 24px 23px);
}
}
src/pages/playground/components/ground-left.tsx
+5 -7
View File
@@ -93,13 +93,11 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
};
const joinMessage = (chunk: any) => {
if (!chunk) {
return;
}
if (!_.get(chunk, 'choices', []).length) {
setTokenResult({
...chunk?.usage
});
setTokenResult({
...(chunk?.usage ?? {})
});
if (!chunk || !_.get(chunk, 'choices', []).length) {
return;
}
contentRef.current =
src/pages/playground/components/message-input.tsx
+2 -4
View File
@@ -291,9 +291,9 @@ const MessageInput: React.FC<MessageInputProps> = ({
useHotkeys(
HotKeys.SUBMIT,
() => {
(e: any) => {
console.log('submit message', loading);
inputRef.current?.blur?.();
e.preventDefault();
handleSendMessage();
},
{
@@ -307,8 +307,6 @@ const MessageInput: React.FC<MessageInputProps> = ({
(e: any) => {
e.preventDefault();
e.stopPropagation();
console.log('add message', loading);
inputRef.current?.blur?.();
handleAddMessage();
},
{
src/pages/playground/components/multiple-chat/index.tsx
+20 -18
View File
@@ -252,24 +252,26 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
return (
<div className="multiple-chat" style={{ height: boxHeight }}>
<div className="chat-list">
<CompareContext.Provider
value={{
spans,
globalParams,
loadingStatus,
modelFullList: modelList,
handleApplySystemChangeToAll,
setGlobalParams,
setLoadingStatus: handleSetLoadingStatus,
handleDeleteModel: handleDeleteModel
}}
>
<ActiveModels
spans={spans}
modelSelections={modelSelections}
setModelRefs={setModelRefs}
></ActiveModels>
</CompareContext.Provider>
<div className="chat-list-inner">
<CompareContext.Provider
value={{
spans,
globalParams,
loadingStatus,
modelFullList: modelList,
handleApplySystemChangeToAll,
setGlobalParams,
setLoadingStatus: handleSetLoadingStatus,
handleDeleteModel: handleDeleteModel
}}
>
<ActiveModels
spans={spans}
modelSelections={modelSelections}
setModelRefs={setModelRefs}
></ActiveModels>
</CompareContext.Provider>
</div>
</div>
<div>
<MessageInput
src/pages/playground/components/multiple-chat/model-item.tsx
+50 -52
View File
@@ -2,7 +2,7 @@ import IconFont from '@/components/icon-font';
import { fetchChunkedData, readStreamData } from '@/utils/fetch-chunk-data';
import {
ClearOutlined,
CloseOutlined,
DeleteOutlined,
MoreOutlined,
SettingOutlined
} from '@ant-design/icons';
@@ -11,7 +11,6 @@ import { Button, Checkbox, Dropdown, Popover, Select, Spin } from 'antd';
import _ from 'lodash';
import React, {
forwardRef,
useCallback,
useContext,
useEffect,
useImperativeHandle,
@@ -81,18 +80,17 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
};
const joinMessage = (chunk: any) => {
if (!chunk) {
return;
}
if (!_.get(chunk, 'choices', [].length)) {
setTokenResult({
...chunk?.usage
});
setTokenResult({
...(chunk?.usage ?? {})
});
if (!chunk || !_.get(chunk, 'choices', [].length)) {
return;
}
contentRef.current =
contentRef.current + _.get(chunk, 'choices.0.delta.content', '');
console.log('currentMessage==========5', messageList);
setMessageList([
...messageList,
...currentMessageRef.current,
@@ -202,15 +200,10 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
setLoadingStatus(instanceId, false);
}
};
const handleDropdownAction = useCallback(({ key }: { key: string }) => {
if (key === 'clear') {
setMessageList([]);
setSystemMessage('');
}
if (key === 'viewCode') {
setShow(true);
}
}, []);
const handleDelete = () => {
handleDeleteModel(instanceId);
};
const handleSubmit = (currentMessage: Omit<MessageItem, 'uid'>) => {
const currentMsg =
@@ -234,7 +227,6 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
changeValues: any,
allValues: Record<string, any>
) => {
console.log('value:', allValues, isApplyToAllModels.current);
if (isApplyToAllModels.current) {
setParams({
...params,
@@ -256,7 +248,6 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
setTokenResult(null);
setSystemMessage('');
currentMessageRef.current = [];
console.log('clear message', systemMessage);
};
const handleCloseViewCode = () => {
@@ -285,16 +276,48 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
setMessageList(messages);
};
const handleDelete = () => {
handleDeleteModel(instanceId);
};
const modelOptions = useMemo(() => {
return modelFullList.filter((item) => {
return item.type !== 'empty';
});
}, [modelFullList]);
const actionItems = useMemo(() => {
const list = [
{
label: intl.formatMessage({ id: 'common.button.clear' }),
key: 'clear',
icon: <ClearOutlined />,
danger: false,
onClick: () => {
setMessageList([]);
setSystemMessage('');
}
},
{
label: intl.formatMessage({ id: 'playground.viewcode' }),
key: 'viewcode',
icon: <IconFont type="icon-code" />,
onClick: () => {
setShow(true);
}
}
];
if (modelList.length > 2) {
list.push({
label: intl.formatMessage({ id: 'common.button.delete' }),
key: 'delete',
icon: <DeleteOutlined />,
danger: true,
onClick: () => {
handleDelete();
}
});
}
return list;
}, [modelList]);
useEffect(() => {
console.log('globalParams:', globalParams.model, globalParams);
setParams({
@@ -327,7 +350,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
<div className="header">
<span className="title">
<Select
style={{ minWidth: '120px' }}
style={{ minWidth: '120px', maxWidth: '200px' }}
variant="borderless"
options={modelFullList}
onChange={handleModelChange}
@@ -338,24 +361,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
<span className="action">
<Dropdown
menu={{
items: [
{
label: intl.formatMessage({ id: 'common.button.clear' }),
key: 'clear',
icon: <ClearOutlined />,
onClick: () => {
handleDropdownAction({ key: 'clear' });
}
},
{
label: intl.formatMessage({ id: 'playground.viewcode' }),
key: 'viewcode',
icon: <IconFont type="icon-code" />,
onClick: () => {
handleDropdownAction({ key: 'viewCode' });
}
}
]
items: actionItems
}}
placement="bottomRight"
>
@@ -396,14 +402,6 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
size="small"
></Button>
</Popover>
{modelList.length > 2 && (
<Button
type="text"
icon={<CloseOutlined />}
size="small"
onClick={handleDelete}
></Button>
)}
</span>
</div>
<SystemMessage
src/pages/playground/style/model-item.less
+6
View File
@@ -14,6 +14,12 @@
border-bottom: 1px solid var(--ant-color-border);
}
.action {
display: flex;
align-items: center;
gap: 2px;
}
.content {
flex: 1;
padding: 16px;
src/pages/playground/style/multiple-chat.less
+7
View File
@@ -5,7 +5,14 @@
.chat-list {
flex: 1;
overflow-y: auto;
padding-bottom: 16px;
padding-inline: var(--layout-content-inlinepadding);
}
.chat-list-inner {
min-height: calc(100vh - 199px);
max-height: max-content;
height: 100%;
}
}