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

fix: playground edit message

Browse Source
This commit is contained in:
jialin
2024-09-25 16:17:25 +08:00
parent 3cd96ba2e8
commit a698c65a07
32 changed files with 338 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/config.ts
+1 -1
View File
@@ -14,7 +14,7 @@ const isProduction = env === 'production';
const t = Date.now();
export default defineConfig({
proxy: {
...proxy()
...proxy('http://192.168.50.4')
},
history: {
type: 'hash'
src/components/highlight-code/code-viewer.tsx
+8 -5
View File
@@ -60,11 +60,14 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
return (
<pre
className={classNames('code-pre custome-scrollbar ', {
dark: props.theme === 'dark',
light: props.theme === 'light',
copyable: copyable
})}
className={classNames(
'code-pre custome-scrollbar custom-scrollbar-horizontal ',
{
dark: props.theme === 'dark',
light: props.theme === 'light',
copyable: copyable
}
)}
style={{
height: height
}}
src/components/highlight-code/styles/index.less
+13 -6
View File
@@ -12,17 +12,20 @@
}
&::-webkit-scrollbar-thumb {
background-color: rgba(211, 211, 220, 50%);
border-radius: 6px;
&:hover {
background-color: rgba(190, 190, 190, 100%);
}
background-color: transparent;
border-radius: 4px;
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
&:hover {
&::-webkit-scrollbar-thumb {
background-color: var(--color-scrollbar-thumb);
border-radius: 4px;
}
}
}
.code-pre {
@@ -30,6 +33,10 @@
position: relative;
border-radius: var(--border-radius-mini);
code {
line-height: 1.5;
}
&.copyable {
padding-inline: 12px 32px;
}
src/components/markdown-viewer/index.less
+3 -1
View File
@@ -18,7 +18,7 @@
h4 {
font-weight: 700;
font-weight: var(--font-weight-bold);
font-size: 14px;
font-size: var(--font-size-small);
}
.hj-wrapper {
@@ -50,12 +50,14 @@
line-height: 2;
padding-inline: 6px;
border-bottom: 1px solid var(--ant-color-split);
word-break: break-word;
}
td {
line-height: 2;
padding-inline: 6px;
border-bottom: 1px solid var(--ant-color-split);
word-break: break-word;
}
div {
src/components/markdown-viewer/index.tsx
+12 -6
View File
@@ -1,7 +1,8 @@
import { EyeOutlined } from '@ant-design/icons';
import { Image, Typography } from 'antd';
import { unescape } from 'lodash';
import { TokensList, marked } from 'marked';
import React, { Fragment } from 'react';
import React, { Fragment, useCallback } from 'react';
import HighlightCode from '../highlight-code';
import './index.less';
@@ -34,12 +35,13 @@ const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
'list',
'list_item',
'br',
'html'
'html',
'escape'
];
const renderItem = (token: any, render: any) => {
// console.log('token======66==', token.raw, token.type);
const renderItem = useCallback((token: any, render: any) => {
if (!reDefineTypes.includes(token.type)) {
console.log('token======66==', token.type, token);
return (
<span
dangerouslySetInnerHTML={{
@@ -53,7 +55,11 @@ const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
if (token.tokens?.length) {
child = render?.(token.tokens as TokensList, render);
}
const text = child ? child : token.text;
const text = child ? child : unescape(token.text);
if (token.type === 'escape') {
htmlstr = text;
}
if (token.type === 'html') {
htmlstr = <div dangerouslySetInnerHTML={{ __html: token.text }} />;
@@ -125,7 +131,7 @@ const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
}
return htmlstr;
};
}, []);
const renderTokens = (tokens: TokensList): any => {
return tokens?.map((token: any, index: number) => {
return <Fragment key={index}>{renderItem(token, renderTokens)}</Fragment>;
src/components/markdown-viewer/utils.ts
+16
View File
@@ -0,0 +1,16 @@
const htmlUnescapes: Record<string, string> = {
'&amp;': '&',
'&lt;': '<',
'&gt;': '>',
'&quot;': '"',
'&#39;': "'"
};
const reEscapedHtml = /&(?:amp|lt|gt|quot|#(?:0+)?39);/g;
const reHasEscapedHtml = RegExp(reEscapedHtml.source);
export const unescape = (str = '') => {
return reHasEscapedHtml.test(str)
? str.replace(reEscapedHtml, (entity) => htmlUnescapes[entity] || "'")
: str;
};
src/components/seal-form/auto-complete.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import Wrapper from './components/wrapper';
import { SealFormItemProps } from './types';
const SealAutoComplete: React.FC<
AutoCompleteProps & SealFormItemProps & { onInput: (e: Event) => void }
AutoCompleteProps & SealFormItemProps & { onInput?: (e: Event) => void }
> = (props) => {
const {
label,
src/global.less
+1
View File
@@ -42,6 +42,7 @@ html {
--color-text-3: rgba(0, 0, 0, 45%);
--color-text-2: rgba(0, 0, 0, 65%);
--color-bg-light-1: #e6f6ff;
--font-size-small: 13px;
--font-size-base: 12px;
--font-size-large: 16px;
--font-size-middle: 14px;
src/locales/en-US/playground.ts
+4 -1
View File
@@ -40,5 +40,8 @@ export default {
'playground.toolbar.compare2Model': '2-Model Compare',
'playground.toolbar.compare3Model': '3-Model Compare',
'playground.toolbar.compare4Model': '4-Model Compare',
'playground.toolbar.compare6Model': '6-Model Compare'
'playground.toolbar.compare6Model': '6-Model Compare',
'playground.input.holder': 'Type <kbd>/</kbd> to input message',
'playground.compare.apply': 'Apply',
'playground.compare.applytoall': 'Apply to all models'
};
src/locales/zh-CN/playground.ts
+4 -1
View File
@@ -40,5 +40,8 @@ export default {
'playground.toolbar.compare2Model': '2 模型对比',
'playground.toolbar.compare3Model': '3 模型对比',
'playground.toolbar.compare4Model': '4 模型对比',
'playground.toolbar.compare6Model': '6 模型对比'
'playground.toolbar.compare6Model': '6 模型对比',
'playground.input.holder': '按 <kbd>/</kbd> 开始输入',
'playground.compare.apply': '应用',
'playground.compare.applytoall': '应用到所有模型'
};
src/pages/llmodels/components/advance-config.tsx
+4 -6
View File
@@ -1,7 +1,5 @@
import LabelSelector from '@/components/label-selector';
import ListInput from '@/components/list-input';
import SealSelect from '@/components/seal-form/seal-select';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import { InfoCircleOutlined, RightOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
@@ -193,7 +191,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
</Form.Item>
</>
)}
<Form.Item name="backend">
{/* <Form.Item name="backend">
<SealSelect
label={intl.formatMessage({ id: 'models.form.backend' })}
options={[
@@ -210,8 +208,8 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
]}
disabled={action === PageAction.EDIT}
></SealSelect>
</Form.Item>
<Form.Item<FormData> name="backend_parameters">
</Form.Item> */}
{/* <Form.Item<FormData> name="backend_parameters">
<ListInput
btnText="common.button.addParams"
label={intl.formatMessage({ id: 'models.form.backend_parameters' })}
@@ -219,7 +217,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
onChange={handleBackendParametersChange}
options={paramsConfig}
></ListInput>
</Form.Item>
</Form.Item> */}
{scheduleType === 'manual' && (
<Form.Item<FormData>
name="gpu_selector"
src/pages/llmodels/components/data-form.tsx
+1
View File
@@ -220,6 +220,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
>
<SealAutoComplete
filterOption
defaultActiveFirstOption
disabled={action === PageAction.EDIT}
label={intl.formatMessage({ id: 'model.form.ollama.model' })}
placeholder={intl.formatMessage({ id: 'model.form.ollamaholder' })}
src/pages/llmodels/components/gpu-card.tsx
+1 -1
View File
@@ -35,4 +35,4 @@ const GPUCard: React.FC<{
);
};
export default GPUCard;
export default React.memo(GPUCard);
src/pages/llmodels/components/hf-model-file.tsx
+3 -1
View File
@@ -159,7 +159,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
}
);
const fileList = _.filter(_.get(data, ['Data', 'Files']), (file: any) => {
return filterReg.test(file.path) || _.includes(includeReg, file.path);
return filterReg.test(file.Path) || _.includes(includeReg, file.Path);
});
const list = _.map(fileList, (item: any) => {
return {
@@ -192,6 +192,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
}
const newList = generateGroupByFilename(list);
console.log('newList====', newList);
const sortList = _.sortBy(newList, (item: any) => {
return sortType === 'size' ? item.size : item.path;
});
@@ -199,6 +200,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
handleSelectModelFile(sortList[0]);
setDataSource({ fileList: sortList, loading: false });
} catch (error) {
console.log('error======', error);
setDataSource({ fileList: [], loading: false });
handleSelectModelFile({});
}
src/pages/llmodels/components/instance-item.tsx
+1
View File
@@ -210,6 +210,7 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
)}
{item?.distributed_servers?.rpc_servers?.length && (
<Tooltip
trigger={['click']}
overlayInnerStyle={{
width: '400px'
}}
src/pages/llmodels/components/model-card.tsx
+11 -5
View File
@@ -31,7 +31,7 @@ const ModelCard: React.FC<{
const { onCollapse, setIsGGUF, collapsed, modelSource } = props;
const intl = useIntl();
const requestSource = useRequestToken();
const [modelData, setModelData] = useState<any>({});
const [modelData, setModelData] = useState<any>(null);
const [readmeText, setReadmeText] = useState<string | null>(null);
const requestToken = useRef<any>(null);
const axiosTokenRef = useRef<any>(null);
@@ -76,7 +76,7 @@ const ModelCard: React.FC<{
setIsGGUF(modelcard.tags?.includes('gguf'));
setIsGGUFModel(modelcard.tags?.includes('gguf'));
} catch (error) {
setModelData({});
setModelData(null);
setReadmeText(null);
setIsGGUF(false);
setIsGGUFModel(false);
@@ -101,7 +101,7 @@ const ModelCard: React.FC<{
setIsGGUF(data.Data?.Tags?.includes('gguf'));
setIsGGUFModel(data.Data?.Tags?.includes('gguf'));
} catch (error) {
setModelData({});
setModelData(null);
setReadmeText(null);
setIsGGUF(false);
setIsGGUFModel(false);
@@ -140,7 +140,7 @@ const ModelCard: React.FC<{
size="small"
type="link"
target="_blank"
href={`https://huggingface.co/${modelData.id}`}
href={`https://huggingface.co/${modelData?.id}`}
>
<IconFont type="icon-external-link"></IconFont>
</Button>
@@ -155,7 +155,7 @@ const ModelCard: React.FC<{
size="small"
type="link"
target="_blank"
href={`https://modelscope.cn/models/${modelData.name}`}
href={`https://modelscope.cn/models/${modelData?.name}`}
>
<IconFont type="icon-external-link"></IconFont>
</Button>
@@ -202,6 +202,11 @@ const ModelCard: React.FC<{
</span>
</Tag>
)}
{isGGUFModel && (
<Tag className="tag-item" color="magenta">
<span style={{ opacity: 0.65 }}>GGUF</span>
</Tag>
)}
</div>
{readmeText && isGGUFModel && (
<div
@@ -222,6 +227,7 @@ const ModelCard: React.FC<{
</span>
<SimpleBar
style={{
paddingTop: collapsed ? 12 : 0,
maxHeight: collapsed ? 300 : 0
}}
>
src/pages/llmodels/components/search-input.tsx
-6
View File
@@ -32,12 +32,6 @@ const SearchInput: React.FC<{
)}
prefix={
<>
{/* <SearchOutlined
style={{
fontSize: '16px',
color: 'var(--ant-color-text-quaternary)'
}}
/> */}
<IconFont
className="font-size-16"
type={
src/pages/llmodels/components/search-model.tsx
+10 -8
View File
@@ -1,6 +1,6 @@
import { BulbOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Checkbox, Select } from 'antd';
import { Select } from 'antd';
import _ from 'lodash';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { queryHuggingfaceModels, queryModelScopeModels } from '../apis';
@@ -78,7 +78,8 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
search: {
query: searchInputRef.current || '',
sort: sort,
tags: filterGGUFRef.current ? ['gguf'] : [],
// tags: filterGGUFRef.current ? ['gguf'] : [],
tags: ['gguf'],
task
}
};
@@ -102,9 +103,10 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
const getModelsFromModelscope = useCallback(async (sort: string) => {
try {
const params = {
Name: filterGGUFRef.current
? `${searchInputRef.current} gguf`
: searchInputRef.current || '',
// Name: filterGGUFRef.current
// ? `${searchInputRef.current} gguf`
// : searchInputRef.current || '',
Name: `${searchInputRef.current} gguf`,
SortBy: ModelScopeSortType[sort]
};
const data = await queryModelScopeModels(params, {
@@ -115,7 +117,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
path: item.Path,
name: `${item.Path}/${item.Name}`,
downloads: item.Downloads,
id: item.Name,
id: `${item.Path}/${item.Name}`,
updatedAt: item.LastUpdatedTime * 1000,
likes: item.Stars,
value: item.Name,
@@ -231,13 +233,13 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
</span>
</span>
<span>
<Checkbox
{/* <Checkbox
onChange={handleFilterGGUFChange}
className="m-r-5"
checked={filterGGUFRef.current}
>
GGUF
</Checkbox>
</Checkbox> */}
<Select
allowClear
value={dataSource.sortType}
src/pages/llmodels/components/search-result.tsx
-1
View File
@@ -20,7 +20,6 @@ interface SearchResultProps {
}
const SearchResult: React.FC<SearchResultProps> = (props) => {
console.log('SearchResult======');
const { resultList, onSelect, source, networkError } = props;
const intl = useIntl();
src/pages/llmodels/components/table-list.tsx
-1
View File
@@ -265,7 +265,6 @@ const Models: React.FC<ModelsProps> = ({
);
const handleModalCancel = useCallback(() => {
console.log('handleModalCancel');
setOpenAddModal(false);
}, []);
src/pages/llmodels/config/types.ts
+3 -3
View File
@@ -32,7 +32,7 @@ export interface FormData {
huggingface_repo_id: string;
huggingface_filename: string;
s3_address: string;
ollama_library_model_name: 'string';
ollama_library_model_name: string;
distributed_inference_across_workers?: boolean;
model_scope_model_id?: string;
model_scope_file_path?: string;
@@ -85,8 +85,8 @@ export interface ModelInstanceFormData {
model_id: number;
model_name: string;
source: string;
huggingface_repo_id: 'string';
huggingface_filename: 'string';
huggingface_repo_id: string;
huggingface_filename: string;
}
export interface GPUListItem {
src/pages/playground/components/message-input.tsx
+57 -50
View File
@@ -123,11 +123,11 @@ const MessageInput: React.FC<MessageInputProps> = ({
});
};
const handleInputChange = (value: string) => {
console.log('input change:', value);
const handleInputChange = (e: any) => {
console.log('input change:', e.target?.value);
setMessage({
...message,
content: value
content: e.target?.value
});
};
const handleSendMessage = () => {
@@ -177,54 +177,57 @@ const MessageInput: React.FC<MessageInputProps> = ({
resetMessage();
};
const getPasteContent = useCallback(async (event: any) => {
const clipboardData = event.clipboardData || window.clipboardData;
const items = clipboardData.items;
const imgPromises: Promise<string>[] = [];
const getPasteContent = useCallback(
async (event: any) => {
const clipboardData = event.clipboardData || window.clipboardData;
const items = clipboardData.items;
const imgPromises: Promise<string>[] = [];
for (let i = 0; i < items.length; i++) {
let item = items[i];
console.log('item===========', item);
for (let i = 0; i < items.length; i++) {
let item = items[i];
if (item.kind === 'file' && item.type.indexOf('image') !== -1) {
const file = item.getAsFile();
const imgPromise = new Promise<string>((resolve, reject) => {
const reader = new FileReader();
reader.onload = function (event) {
const base64String = event.target?.result as string;
if (base64String) {
resolve(base64String);
} else {
reject('Failed to convert image to base64');
}
};
reader.readAsDataURL(file);
});
imgPromises.push(imgPromise);
} else if (item.kind === 'string') {
// string
if (item.kind === 'file' && item.type.indexOf('image') !== -1) {
const file = item.getAsFile();
const imgPromise = new Promise<string>((resolve, reject) => {
const reader = new FileReader();
reader.onload = function (event) {
const base64String = event.target?.result as string;
if (base64String) {
resolve(base64String);
} else {
reject('Failed to convert image to base64');
}
};
reader.readAsDataURL(file);
});
imgPromises.push(imgPromise);
} else if (item.kind === 'string') {
// string
}
}
}
try {
const imgs = await Promise.all(imgPromises);
if (imgs.length) {
const list = _.map(imgs, (img: string) => {
imgCountRef.current += 1;
return {
uid: imgCountRef.current,
dataUrl: img
};
});
setMessage({
...message,
imgs: [...(message.imgs || []), ...list]
});
try {
const imgs = await Promise.all(imgPromises);
if (imgs.length) {
const list = _.map(imgs, (img: string) => {
imgCountRef.current += 1;
return {
uid: imgCountRef.current,
dataUrl: img
};
});
setMessage({
...message,
imgs: [...(message.imgs || []), ...list]
});
}
} catch (error) {
console.error('Error processing images:', error);
}
} catch (error) {
console.error('Error processing images:', error);
}
}, []);
},
[message]
);
// ========== upload image ==========
const handleUpdateImgList = (
@@ -248,6 +251,7 @@ const MessageInput: React.FC<MessageInputProps> = ({
};
const handleOnPaste = (e: any) => {
e.preventDefault();
const text = e.clipboardData.getData('text');
if (text) {
setMessage?.({
@@ -446,7 +450,7 @@ const MessageInput: React.FC<MessageInputProps> = ({
<TextArea
ref={inputRef}
autoSize={{ minRows: 3, maxRows: 8 }}
onChange={(e) => handleInputChange(e.target.value)}
onChange={handleInputChange}
value={message.content}
size="large"
variant="borderless"
@@ -456,9 +460,12 @@ const MessageInput: React.FC<MessageInputProps> = ({
onPaste={handleOnPaste}
></TextArea>
{!message.content && !focused && (
<span className="holder">
Type <kbd>/</kbd> to input message
</span>
<span
className="holder"
dangerouslySetInnerHTML={{
__html: intl.formatMessage({ id: 'playground.input.holder' })
}}
></span>
)}
</div>
<PromptModal
src/pages/playground/components/multiple-chat/content-item.tsx
+60 -59
View File
@@ -48,74 +48,75 @@ const ContentItem: React.FC<MessageItemProps> = ({
});
};
const getPasteContent = useCallback(async (event: any) => {
const clipboardData = event.clipboardData || window.clipboardData;
const items = clipboardData.items;
const imgPromises: Promise<string>[] = [];
const getPasteContent = useCallback(
async (event: any) => {
const clipboardData = event.clipboardData || window.clipboardData;
const items = clipboardData.items;
const imgPromises: Promise<string>[] = [];
for (let i = 0; i < items.length; i++) {
let item = items[i];
console.log('item===========', item);
for (let i = 0; i < items.length; i++) {
let item = items[i];
console.log('item===========', item);
if (item.kind === 'file' && item.type.indexOf('image') !== -1) {
const file = item.getAsFile();
const imgPromise = new Promise<string>((resolve, reject) => {
const reader = new FileReader();
reader.onload = function (event) {
const base64String = event.target?.result as string;
if (base64String) {
resolve(base64String);
} else {
reject('Failed to convert image to base64');
}
};
reader.readAsDataURL(file);
});
imgPromises.push(imgPromise);
} else if (item.kind === 'string') {
// string
if (item.kind === 'file' && item.type.indexOf('image') !== -1) {
const file = item.getAsFile();
const imgPromise = new Promise<string>((resolve, reject) => {
const reader = new FileReader();
reader.onload = function (event) {
const base64String = event.target?.result as string;
if (base64String) {
resolve(base64String);
} else {
reject('Failed to convert image to base64');
}
};
reader.readAsDataURL(file);
});
imgPromises.push(imgPromise);
} else if (item.kind === 'string') {
// string
}
}
}
try {
const imgs = await Promise.all(imgPromises);
if (imgs.length) {
const list = _.map(imgs, (img: string) => {
imgCountRef.current += 1;
return {
uid: imgCountRef.current,
dataUrl: img
};
});
try {
const imgs = await Promise.all(imgPromises);
if (imgs.length) {
const list = _.map(imgs, (img: string) => {
imgCountRef.current += 1;
return {
uid: imgCountRef.current,
dataUrl: img
};
});
updateMessage?.({
role: data.role,
content: data.content,
uid: data.uid,
imgs: [...(data.imgs || []), ...list]
});
}
} catch (error) {
console.error('Error processing images:', error);
}
}, []);
const handleOnPaste = useCallback(
(e: any) => {
const text = e.clipboardData.getData('text');
if (text) {
updateMessage?.({
role: data.role,
content: inputRef.current?.resizableTextArea?.textArea?.value || '',
uid: data.uid
});
} else {
getPasteContent(e);
updateMessage?.({
role: data.role,
content: data.content,
uid: data.uid,
imgs: [...(data.imgs || []), ...list]
});
}
} catch (error) {
console.error('Error processing images:', error);
}
},
[getPasteContent, data, updateMessage]
[data]
);
const handleOnPaste = (e: any) => {
e.preventDefault();
const text = e.clipboardData.getData('text');
if (text) {
updateMessage?.({
role: data.role,
content: data.content + text,
uid: data.uid
});
} else {
getPasteContent(e);
}
};
const handleUpdateImgList = useCallback(
(list: { uid: number | string; dataUrl: string }[]) => {
console.log('list===========', data.imgs, list);
src/pages/playground/components/multiple-chat/index.tsx
+38 -6
View File
@@ -111,16 +111,38 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
});
};
const adjustSpan = () => {
const count = spans.count - 1;
if (spans.count === 6) {
setSpans({
span: 8,
count: count
});
} else if (spans.count === 5) {
setSpans({
span: 12,
count: count
});
} else if (spans.count === 4) {
setSpans({
span: 8,
count: count
});
} else if (spans.count === 3) {
setSpans({
span: 12,
count: count
});
}
};
const handleDeleteModel = (instanceId: symbol) => {
const newModelList = modelSelections.filter(
(model) => model.instanceId !== instanceId
);
pruneInstanceSymbol(instanceId);
const span = Math.floor(24 / (24 / spans.span - 1));
setSpans({
span,
count: spans.count
});
adjustSpan();
setModelSelections(newModelList);
};
@@ -143,6 +165,14 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
setModelSelections(updateList);
};
const handleApplySystemChangeToAll = (message: string) => {
const modelRefList = Object.getOwnPropertySymbols(modelRefs.current);
modelRefList.forEach((instanceId: symbol) => {
const ref = modelRefs.current[instanceId];
ref?.setSystemMessage(message);
});
};
const handlePresetPrompt = (list: { role: string; content: string }[]) => {
const sysMsg = list.filter((item) => item.role === 'system');
const userMsg = list.filter((item) => item.role === 'user');
@@ -227,6 +257,8 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
spans,
globalParams,
loadingStatus,
modelFullList: modelList,
handleApplySystemChangeToAll,
setGlobalParams,
setLoadingStatus: handleSetLoadingStatus,
handleDeleteModel: handleDeleteModel
@@ -252,7 +284,7 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
setModelSelections={handleUpdateModelSelections}
presetPrompt={handlePresetPrompt}
modelList={modelFullList}
showModelSelection={true}
showModelSelection={false}
/>
</div>
</div>
src/pages/playground/components/multiple-chat/model-item.tsx
+12 -6
View File
@@ -47,6 +47,8 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
setGlobalParams,
setLoadingStatus,
handleDeleteModel,
handleApplySystemChangeToAll,
modelFullList,
loadingStatus
} = useContext(CompareContext);
const intl = useIntl();
@@ -224,7 +226,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
isApplyToAllModels.current = e.target.checked;
if (e.target.checked) {
setGlobalParams({
...params
..._.omit(params, 'model')
});
}
};
@@ -289,10 +291,10 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
};
const modelOptions = useMemo(() => {
return modelList.filter((item) => {
return modelFullList.filter((item) => {
return item.type !== 'empty';
});
}, [modelList]);
}, [modelFullList]);
useEffect(() => {
console.log('globalParams:', globalParams.model, globalParams);
@@ -326,9 +328,9 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
<div className="header">
<span className="title">
<Select
style={{ minWidth: '100px' }}
style={{ minWidth: '120px' }}
variant="borderless"
options={modelOptions}
options={modelFullList}
onChange={handleModelChange}
value={params.model}
></Select>
@@ -379,7 +381,9 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
title={
<div>
<Checkbox onChange={handleApplyToAllModels}>
Apply to all models
{intl.formatMessage({
id: 'playground.compare.applytoall'
})}
</Checkbox>
</div>
}
@@ -401,7 +405,9 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
</span>
</div>
<SystemMessage
showApplyToAll={true}
systemMessage={systemMessage}
applyToAll={handleApplySystemChangeToAll}
setSystemMessage={setSystemMessage}
></SystemMessage>
<SimpleBar style={{ maxHeight: maxHeight }}>
src/pages/playground/components/multiple-chat/system-message.tsx
+45 -6
View File
@@ -1,18 +1,23 @@
import { CloseOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Divider, Input, Tooltip } from 'antd';
import { Button, Checkbox, Divider, Input, Tooltip } from 'antd';
import classNames from 'classnames';
import React, { useState } from 'react';
import '../../style/sys-message.less';
interface SystemMessageProps {
style?: React.CSSProperties;
systemMessage: string;
showApplyToAll?: boolean;
applyToAll?: (e: any) => void;
setSystemMessage: (value: string) => void;
}
const SystemMessage: React.FC<SystemMessageProps> = (props) => {
const { systemMessage, setSystemMessage, style } = props;
const { systemMessage, showApplyToAll, setSystemMessage, style, applyToAll } =
props;
const intl = useIntl();
const [isChange, setIsChange] = useState(false);
const systemMessageRef = React.useRef<any>(null);
const [autoSize, setAutoSize] = useState<{
minRows: number;
@@ -33,26 +38,51 @@ const SystemMessage: React.FC<SystemMessageProps> = (props) => {
}, 100);
};
const handleBlur = () => {
const handleBlur = (e: any) => {
setAutoSize({
minRows: 1,
maxRows: 1,
focus: false
});
setIsChange(false);
};
const handleOnChange = (e: any) => {
setSystemMessage(e.target.value);
setIsChange(true);
};
const handleClearSystemMessage = () => {
setSystemMessage('');
};
const handleClickCheckbox = (e?: any) => {
e.preventDefault();
};
const handleApplyToAllModels = (e: any) => {
if (e.target.checked) {
applyToAll?.(systemMessage);
}
};
return (
<div className="sys-message" style={{ ...style }}>
<div
className={classNames('sys-message', {
focus: autoSize.focus
})}
style={{ ...style }}
>
{
<div style={{ display: autoSize.focus ? 'block' : 'none' }}>
<div
style={{ display: autoSize.focus ? 'block' : 'none' }}
className="textarea-wrapper"
>
<span className="system-label">
{intl.formatMessage({ id: 'playground.systemMessage' })}
</span>
<Input.TextArea
className="custome-scrollbar"
ref={systemMessageRef}
variant="filled"
placeholder={intl.formatMessage({ id: 'playground.system.tips' })}
@@ -68,8 +98,17 @@ const SystemMessage: React.FC<SystemMessageProps> = (props) => {
onFocus={handleFocus}
onBlur={handleBlur}
allowClear={false}
onChange={(e) => setSystemMessage(e.target.value)}
onChange={handleOnChange}
></Input.TextArea>
{isChange && showApplyToAll && (
<span className="apply-check" onMouseDown={handleClickCheckbox}>
<Checkbox onChange={handleApplyToAllModels}>
{intl.formatMessage({
id: 'playground.compare.applytoall'
})}
</Checkbox>
</span>
)}
<Divider style={{ margin: '0' }}></Divider>
</div>
}
src/pages/playground/components/prompt-modal.tsx
+1 -1
View File
@@ -57,7 +57,7 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
type="default"
onClick={() => handleSelect(item)}
>
Apply
{intl.formatMessage({ id: 'playground.compare.apply' })}
</Button>
</h3>
{item.data.map((data, i) => {
src/pages/playground/config/compare-context.ts
+2
View File
@@ -8,6 +8,8 @@ interface CompareContextProps {
systemMessage?: string;
globalParams: Record<string, any>;
loadingStatus: Record<symbol, boolean>;
modelFullList: (Global.BaseOption<string> & { type?: string })[];
handleApplySystemChangeToAll: (val: string) => void;
handleDeleteModel: (instanceId: symbol) => void;
setSystemMessage?: (message: string) => void;
setGlobalParams: (value: Record<string, any>) => void;
src/pages/playground/style/content-item.less
+1 -1
View File
@@ -13,7 +13,7 @@
.role {
position: relative;
cursor: pointer;
padding: 2px 4px;
padding: 0 4px;
border-radius: var(--border-radius-mini);
}
src/pages/playground/style/message-input.less
+9 -2
View File
@@ -48,14 +48,21 @@
}
textarea::-webkit-scrollbar-track {
background-color: #f1f1f1;
background-color: transparent;
}
textarea::-webkit-scrollbar-thumb {
background-color: #d9d9d9;
background-color: transparent;
border-radius: 6px;
}
textarea:hover {
&::-webkit-scrollbar-thumb {
background-color: var(--color-scrollbar-thumb);
border-radius: 6px;
}
}
.send-btn {
display: flex;
justify-content: center;
src/pages/playground/style/sys-message.less
+14 -1
View File
@@ -1,6 +1,19 @@
.sys-message {
position: relative;
&.focus {
padding-top: 9px;
}
.apply-check {
position: absolute;
bottom: 10px;
right: 10px;
direction: rtl;
background-color: var(--color-white-1);
box-shadow: var(--ant-box-shadow-tertiary);
}
.sys-content-wrap {
position: relative;
display: flex;
@@ -26,7 +39,7 @@
.system-label {
font-weight: var(--font-weight-bold);
padding-left: 16px;
padding-left: 14px;
}
.sys-content {
src/pages/resources/components/workers.tsx
+2 -4
View File
@@ -45,8 +45,6 @@ const ActionList = [
];
const Resources: React.FC = () => {
console.log('resources======workers');
const { sortOrder, setSortOrder } = useTableSort({
defaultSortOrder: 'descend'
});
@@ -400,7 +398,7 @@ const Resources: React.FC = () => {
return (
<span className="flex-column flex-gap-2">
{_.map(
record?.status?.gpu_devices,
_.sortBy(record?.status?.gpu_devices || [], ['index']),
(item: GPUDeviceItem, index: string) => {
return (
<span className="flex-center" key={index}>
@@ -431,7 +429,7 @@ const Resources: React.FC = () => {
return (
<span className="flex-column">
{_.map(
record?.status?.gpu_devices,
_.sortBy(record?.status?.gpu_devices || [], ['index']),
(item: GPUDeviceItem, index: string) => {
return (
<span key={index}>