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

chore: rename ground-left as ground-llm

Browse Source
This commit is contained in:
jialin
2025-12-10 15:50:53 +08:00
parent af4849d6cc
commit a08f1e2512
15 changed files with 161 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/icon-font/index.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
import { createFromIconfontCN } from '@ant-design/icons';
import './iconfont/iconfont.js';
// import './iconfont/iconfont.js';
const IconFont = createFromIconfontCN({
scriptUrl: ''
scriptUrl: '//at.alicdn.com/t/c/font_4613488_5idsv7urmzf.js'
});
export default IconFont;
src/config/settings.ts
+1 -1
View File
@@ -7,5 +7,5 @@ export const DEFAULT_ENTER_PAGE = {
login: '/login'
};
export const GPUSTACK_API_BASE_URL = 'v2';
export const GPUSTACK_API_BASE_URL = 'v1';
export const OPENAI_COMPATIBLE = 'v1';
src/pages/_components/terminal-tabs/index.tsx
+5 -10
View File
@@ -3,7 +3,6 @@ import TerminalTabs from './tabs';
export interface TerminalModalProps {
terminals: { url: string; name: string }[];
height: number;
open: boolean;
onClose: () => void;
currentActive?: string;
@@ -11,20 +10,16 @@ export interface TerminalModalProps {
const TerminalModal: React.FC<TerminalModalProps> = ({
terminals,
height,
open,
onClose,
currentActive
}) => {
return (
<div>
<TerminalTabs
terminals={terminals}
height={height}
currentActive={currentActive}
onClose={onClose}
/>
</div>
<TerminalTabs
terminals={terminals}
currentActive={currentActive}
onClose={onClose}
/>
);
};
src/pages/_components/terminal-tabs/resize-container.tsx
+98
View File
@@ -0,0 +1,98 @@
import { HolderOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button } from 'antd';
import { Resizable, ResizableProps } from 're-resizable';
import React, { forwardRef, useImperativeHandle, useRef } from 'react';
import styled from 'styled-components';
const StyledButton = styled(Button)`
position: absolute;
padding: 0;
top: -12px;
font-size: var(--font-size-middle);
left: calc(50% + 10px);
transform: translateX(-50%);
background: none !important;
cursor: ns-resize;
&::hover {
background: none !important;
}
`;
const ResizeContainer: React.FC<
React.PropsWithChildren<
ResizableProps & {
ref?: any;
defaultHeight?: number;
defaultWidth?: number;
minHeight?: number;
maxHeight?: number;
onReSize?: (
e: MouseEvent | TouchEvent,
dir: any,
refToElement: HTMLElement
) => void;
onReSizeStop?: (
e: MouseEvent | TouchEvent,
dir: any,
refToElement: HTMLElement,
delta: { width: number; height: number }
) => void;
}
>
> = forwardRef((props, ref) => {
const {
defaultWidth,
defaultHeight = 180,
minHeight = 180,
maxHeight = 400,
children,
onReSize,
onReSizeStop,
...restProps
} = props;
const intl = useIntl();
const resizeRef = useRef<Resizable>(null);
useImperativeHandle(ref, () => ({
container: resizeRef.current
}));
const dragHanle = (
<StyledButton
size="small"
type="text"
icon={
<HolderOutlined
rotate={90}
style={{ fontSize: 'var(--font-size-14)' }}
/>
}
></StyledButton>
);
return (
<Resizable
ref={resizeRef}
enable={{
top: true
}}
defaultSize={{
height: defaultHeight,
width: defaultWidth
}}
handleComponent={{
top: undefined
}}
maxHeight={maxHeight}
minHeight={minHeight}
onResize={onReSize}
onResizeStop={onReSizeStop}
{...restProps}
>
{children}
</Resizable>
);
});
export default ResizeContainer;
src/pages/_components/terminal-tabs/tabs.tsx
+40 -22
View File
@@ -3,6 +3,7 @@ import { CloseOutlined } from '@ant-design/icons';
import { Button, Tabs } from 'antd';
import React, { useEffect, useMemo, useState } from 'react';
import styled from 'styled-components';
import ResizeContainer from './resize-container';
import { TerminalProps } from './types';
const TabsContainer = styled.div`
@@ -30,7 +31,22 @@ const TabsContainer = styled.div`
display: none;
}
&::before {
display: none;
content: '';
left: 5px;
top: 5px;
bottom: 5px;
right: 5px;
position: absolute;
border-radius: 4px;
background-color: var(--ant-color-fill-tertiary);
}
&:hover {
&::before {
display: block;
}
.ant-tabs-tab-remove {
display: inline-block;
}
@@ -50,20 +66,19 @@ const TabsContainer = styled.div`
export interface TerminalTabsProps {
terminals: TerminalProps[];
height: number;
currentActive?: string;
onClose: () => void;
}
const TerminalTabs: React.FC<TerminalTabsProps> = ({
terminals,
height,
currentActive,
onClose
}) => {
const [activeKey, setActiveKey] = useState(
currentActive || terminals[0]?.url || ''
);
const [height, setHeight] = useState(300);
const items = useMemo(() => {
return terminals.map((terminal) => {
@@ -82,26 +97,29 @@ const TerminalTabs: React.FC<TerminalTabsProps> = ({
}, [currentActive]);
return (
<TabsContainer>
<Tabs
type="editable-card"
hideAdd
activeKey={activeKey}
onChange={setActiveKey}
tabBarStyle={{ marginBottom: 0 }}
items={items}
tabBarExtraContent={{
right: (
<Button
icon={<CloseOutlined />}
type="text"
size="small"
onClick={onClose}
></Button>
)
}}
></Tabs>
</TabsContainer>
<ResizeContainer>
<TabsContainer>
<Tabs
type="editable-card"
hideAdd
activeKey={activeKey}
onChange={setActiveKey}
tabBarStyle={{ marginBottom: 0 }}
items={items}
tabBarExtraContent={{
right: (
<Button
icon={<CloseOutlined />}
type="text"
size="small"
style={{ marginRight: 8 }}
onClick={onClose}
></Button>
)
}}
></Tabs>
</TabsContainer>
</ResizeContainer>
);
};
src/pages/playground/components/ground-embedding.tsx
+7 -36
View File
@@ -5,9 +5,9 @@ import IconFont from '@/components/icon-font';
import SealInputNumber from '@/components/seal-form/input-number';
import useOverlayScroller from '@/hooks/use-overlay-scroller';
import useRequestToken from '@/hooks/use-request-token';
import ResizeContainer from '@/pages/_components/terminal-tabs/resize-container';
import {
ClearOutlined,
HolderOutlined,
PlusOutlined,
QuestionCircleOutlined,
SendOutlined
@@ -17,7 +17,6 @@ import { Button, Checkbox, Form, Segmented, Spin, Tabs, Tooltip } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import 'overlayscrollbars/overlayscrollbars.css';
import { Resizable } from 're-resizable';
import React, {
forwardRef,
useCallback,
@@ -33,7 +32,7 @@ import { embeddingSamples } from '../config/samples';
import { LLM_METAKEYS } from '../hooks/config';
import useEmbeddingWorker from '../hooks/use-embedding-worker';
import { useInitLLmMeta } from '../hooks/use-init-meta';
import '../style/ground-left.less';
import '../style/ground-llm.less';
import '../style/rerank.less';
import { generateEmbeddingCode } from '../view-code/embedding';
import DynamicParams from './dynamic-params';
@@ -132,7 +131,7 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
setCollapse(!collapse);
},
calculateNewMaxFromBoundary: (maxWidth?: number, maxHeight?: number) => {
resizeRef.current?.calculateNewMaxFromBoundary();
resizeRef.current?.container?.calculateNewMaxFromBoundary();
},
collapse: collapse
};
@@ -259,8 +258,7 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
};
const handleScaleResize = () => {
console.log('handleScaleResize', resizeRef.current);
const height = resizeRef.current?.state?.height;
const height = resizeRef.current?.container?.state?.height;
if (height) {
setOutputHeight(height);
}
@@ -638,38 +636,11 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
<Spin spinning={true}></Spin>
</div>
)}
<Resizable
<ResizeContainer
ref={resizeRef}
enable={{
top: true
}}
defaultSize={{
height: 180
}}
handleComponent={{
top: (
<Tooltip
title={intl.formatMessage({
id: 'playground.embedding.handler.tips'
})}
>
<Button
size="small"
className="drag-handler"
color="default"
variant="filled"
icon={
<HolderOutlined
rotate={90}
style={{ fontSize: 'var(--font-size-14)' }}
/>
}
></Button>
</Tooltip>
)
}}
maxHeight={resizeMaxHeight}
minHeight={180}
defaultHeight={180}
onResize={handleScaleResize}
onResizeStop={handleScaleOutputSize}
>
@@ -689,7 +660,7 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
items={outputItems}
></Tabs>
</div>
</Resizable>
</ResizeContainer>
</div>
</div>
</div>
src/pages/playground/components/ground-images.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ import React, {
import { CREAT_IMAGE_API } from '../apis';
import { useInitImageMeta } from '../hooks/use-init-meta';
import useTextImage from '../hooks/use-text-image';
import '../style/ground-left.less';
import '../style/ground-llm.less';
import '../style/system-message-wrap.less';
import { generateImageCode, generateOpenaiImageCode } from '../view-code/image';
import DynamicParams from './dynamic-params';
src/pages/playground/components/ground-left.tsx → src/pages/playground/components/ground-llm.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ import { MessageItem, MessageItemAction } from '../config/types';
import { LLM_METAKEYS, llmInitialValues } from '../hooks/config';
import useChatCompletion from '../hooks/use-chat-completion';
import { useInitLLmMeta } from '../hooks/use-init-meta';
import '../style/ground-left.less';
import '../style/ground-llm.less';
import '../style/system-message-wrap.less';
import { generateLLMCode } from '../view-code/llm';
import DynamicParams from './dynamic-params';
src/pages/playground/components/ground-reranker.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ import { rerankerSamples } from '../config/samples';
import { ParamsSchema } from '../config/types';
import { LLM_METAKEYS } from '../hooks/config';
import { useInitLLmMeta } from '../hooks/use-init-meta';
import '../style/ground-left.less';
import '../style/ground-llm.less';
import '../style/rerank.less';
import '../style/system-message-wrap.less';
import { generateRerankCode } from '../view-code/rerank';
src/pages/playground/components/ground-stt.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ import React, {
import { AUDIO_SPEECH_TO_TEXT_API, speechToText } from '../apis';
import { SpeechToTextFormat, extractErrorMessage } from '../config';
import { RealtimeParamsConfig as paramsConfig } from '../config/params-config';
import '../style/ground-left.less';
import '../style/ground-llm.less';
import '../style/speech-to-text.less';
import '../style/system-message-wrap.less';
import { speechToTextCode } from '../view-code/audio';
src/pages/playground/components/ground-tts.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ import { AUDIO_TEXT_TO_SPEECH_API, CHAT_API, textToSpeech } from '../apis';
import { extractErrorMessage } from '../config';
import { TTSParamsConfig as paramsConfig } from '../config/params-config';
import { MessageItem, ParamsSchema } from '../config/types';
import '../style/ground-left.less';
import '../style/ground-llm.less';
import '../style/system-message-wrap.less';
import { TextToSpeechCode } from '../view-code/audio';
import DynamicParams from './dynamic-params';
src/pages/playground/components/image-edit.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ import { EDIT_IMAGE_API } from '../apis';
import { EDIT_IMAGE_ACCEPT, scaleImageSize } from '../config';
import { useInitImageMeta } from '../hooks/use-init-meta';
import useTextImage from '../hooks/use-text-image';
import '../style/ground-left.less';
import '../style/ground-llm.less';
import '../style/system-message-wrap.less';
import { generateImageCode, generateOpenaiImageCode } from '../view-code/image';
import DynamicParams from './dynamic-params';
src/pages/playground/index.tsx
+2 -2
View File
@@ -13,7 +13,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { PageContainerInner } from '../_components/page-box';
import { queryModelsList } from './apis';
import GroundLeft from './components/ground-left';
import GroundLLM from './components/ground-llm';
import MultipleChat from './components/multiple-chat';
import ViewCodeButtons from './components/view-code-buttons';
import './style/play-ground.less';
@@ -65,7 +65,7 @@ const Playground: React.FC = () => {
label: 'Chat',
icon: <MessageOutlined />,
children: (
<GroundLeft ref={groundLeftRef} modelList={modelList}></GroundLeft>
<GroundLLM ref={groundLeftRef} modelList={modelList}></GroundLLM>
)
},
{
src/pages/playground/style/ground-left.less → src/pages/playground/style/ground-llm.less
-12
View File
@@ -80,17 +80,5 @@
.embed-chart {
position: relative;
.drag-handler {
position: absolute;
padding: 0;
height: fit-content;
top: -10px;
font-size: var(--font-size-middle);
left: calc(50% + 10px);
transform: translateX(-50%);
background-color: transparent;
cursor: ns-resize;
}
}
}
src/pages/resources/hooks/use-terminal-tabs.tsx
-1
View File
@@ -34,7 +34,6 @@ const useTerminalTabs = () => {
const TerminalPanel = (
<TerminalTabs
height={300}
key="terminal-tabs"
terminals={terminals}
open={terminalModalStatus.open}