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

style: model file list

Browse Source
This commit is contained in:
jialin
2024-08-23 18:33:23 +08:00
parent a60be9c88f
commit 8bb1961a02
10 changed files with 84 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/styles/common.less
+8
View File
@@ -122,3 +122,11 @@
.font-700 {
font-weight: var(--font-weight-bold);
}
.text-secondary {
color: var(--ant-color-text-secondary);
}
.text-tertiary {
color: var(--ant-color-text-tertiary);
}
src/components/highlight-code/code-viewer-dark.tsx
+27
View File
@@ -0,0 +1,27 @@
import { memo } from 'react';
import CodeViewer from './code-viewer';
import './styles/dark.less';
interface CodeViewerProps {
code: string;
lang: string;
autodetect?: boolean;
ignoreIllegals?: boolean;
copyable?: boolean;
}
const DarkViewer: React.FC<CodeViewerProps> = (props) => {
const { code, lang, autodetect, ignoreIllegals, copyable } = props || {};
return (
<CodeViewer
code={code}
lang={lang}
theme="dark"
autodetect={autodetect}
ignoreIllegals={ignoreIllegals}
copyable={copyable}
></CodeViewer>
);
};
export default memo(DarkViewer);
src/components/highlight-code/code-viewer-light.tsx
+13 -63
View File
@@ -1,8 +1,6 @@
import hljs from 'highlight.js';
import { memo, useMemo } from 'react';
import CopyButton from '../copy-button';
import { memo } from 'react';
import CodeViewer from './code-viewer';
import './styles/light.less';
import { escapeHtml } from './utils';
interface CodeViewerProps {
code: string;
@@ -11,67 +9,19 @@ interface CodeViewerProps {
ignoreIllegals?: boolean;
copyable?: boolean;
}
const CodeViewer: React.FC<CodeViewerProps> = (props) => {
const {
code,
lang,
autodetect = true,
ignoreIllegals = true,
copyable = true
} = props || {};
const highlightedCode = useMemo(() => {
const autodetectLang = autodetect && !lang;
const cannotDetectLanguage = !autodetectLang && !hljs.getLanguage(lang);
let className = '';
if (!cannotDetectLanguage) {
className = `hljs ${lang}`;
}
// No idea what language to use, return raw code
if (cannotDetectLanguage) {
console.warn(`The language "${lang}" you specified could not be found.`);
return {
value: escapeHtml(code),
className: className
};
}
if (autodetectLang) {
const result = hljs.highlightAuto(code);
return {
value: result.value,
className: className
};
}
const result = hljs.highlight(code, {
language: lang,
ignoreIllegals: ignoreIllegals
});
return {
value: result.value,
className: className
};
}, [code, lang, autodetect, ignoreIllegals]);
const LightViewer: React.FC<CodeViewerProps> = (props) => {
const { code, lang, autodetect, ignoreIllegals, copyable } = props || {};
return (
<pre className="code-pre light">
<code
className={highlightedCode.className}
dangerouslySetInnerHTML={{
__html: highlightedCode.value
}}
></code>
{copyable && (
<CopyButton
text={code}
size="small"
style={{ color: '#abb2bf' }}
></CopyButton>
)}
</pre>
<CodeViewer
code={code}
lang={lang}
theme="light"
autodetect={autodetect}
ignoreIllegals={ignoreIllegals}
copyable={copyable}
></CodeViewer>
);
};
export default memo(CodeViewer);
export default memo(LightViewer);
src/components/highlight-code/code-viewer.tsx
+9 -2
View File
@@ -1,7 +1,7 @@
import classNames from 'classnames';
import hljs from 'highlight.js';
import { memo, useMemo } from 'react';
import CopyButton from '../copy-button';
import './styles/dark.less';
import { escapeHtml } from './utils';
interface CodeViewerProps {
@@ -10,6 +10,7 @@ interface CodeViewerProps {
autodetect?: boolean;
ignoreIllegals?: boolean;
copyable?: boolean;
theme?: 'light' | 'dark';
}
const CodeViewer: React.FC<CodeViewerProps> = (props) => {
const {
@@ -56,7 +57,13 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
}, [code, lang, autodetect, ignoreIllegals]);
return (
<pre className="code-pre dark">
<pre
className={classNames('code-pre', {
dark: props.theme === 'dark',
light: props.theme === 'light',
copyable: copyable
})}
>
<code
className={highlightedCode.className}
dangerouslySetInnerHTML={{
src/components/highlight-code/index.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import CodeViewer from './code-viewer';
import CodeViewerDark from './code-viewer-dark';
import CodeViewerLight from './code-viewer-light';
import './styles/index.less';
@@ -13,7 +13,7 @@ const HighlightCode: React.FC<{
return (
<div className="high-light-wrapper">
{theme === 'dark' ? (
<CodeViewer lang={lang} code={code} copyable={copyable} />
<CodeViewerDark lang={lang} code={code} copyable={copyable} />
) : (
<CodeViewerLight lang={lang} code={code} copyable={copyable} />
)}
src/components/highlight-code/styles/index.less
+5 -1
View File
@@ -25,10 +25,14 @@
}
.code-pre {
padding-inline: 12px 32px;
padding-inline: 12px 12px;
position: relative;
border-radius: var(--border-radius-mini);
&.copyable {
padding-inline: 12px 32px;
}
.copy-button {
position: absolute;
top: 6px;
src/locales/zh-CN/models.ts
+2 -2
View File
@@ -21,9 +21,9 @@ export default {
'提示：以下为 GPUStack 预设的 Ollama 模型，请选择你想要的模型或者直接在右侧表单 【{name}】 输入框中输入你要部署的模型。',
'models.sort.name': '名称',
'models.sort.size': '大小',
'models.sort.likes': '喜欢',
'models.sort.likes': '点赞量',
'models.sort.trending': '趋势',
'models.sort.downloads': '下载',
'models.sort.downloads': '下载量',
'models.sort.updated': '更新时间',
'models.search.result': '{count} 个结果',
'models.data.card': '模型简介',
src/pages/llmodels/components/file-parts.tsx
+13 -11
View File
@@ -8,17 +8,19 @@ const FileParts: React.FC<{
}> = ({ fileList }) => {
return (
<SimpleBar style={{ maxHeight: 200 }}>
{fileList.map((file, index) => {
return (
<div key={index} className="flex-between m-b-5">
<span>
{' '}
Part {file.part} of {file.total}
</span>
<span>{convertFileSize(file.size)}</span>
</div>
);
})}
<div style={{ padding: 10 }}>
{fileList.map((file, index) => {
return (
<div key={index} className="flex-between m-b-5">
<span>
{' '}
Part {file.part} of {file.total}
</span>
<span>{convertFileSize(file.size)}</span>
</div>
);
})}
</div>
</SimpleBar>
);
};
src/pages/llmodels/components/hf-model-file.tsx
+3 -3
View File
@@ -117,10 +117,9 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
return _.endsWith(file.path, '.gguf') || _.includes(file.path, '.gguf');
});
const newList = generateGroupByFilename(list);
// const newList = generateGroupByFilename(list);
console.log('newList==========', newList);
const sortList = _.sortBy(newList, (item: any) => {
const sortList = _.sortBy(list, (item: any) => {
return sortType === 'size' ? item.size : item.path;
});
setDataSource({ fileList: sortList, loading: false });
@@ -245,6 +244,7 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
color="var(--color-white-1)"
overlayInnerStyle={{
width: 150,
padding: 0,
color: 'var(--ant-color-text-secondary)'
}}
title={
src/pages/llmodels/components/model-card.tsx
+2 -1
View File
@@ -137,7 +137,8 @@ const ModelCard: React.FC<{
>
<span className="mkd-title" onClick={handleCollapse}>
<span>
<FileTextOutlined className="m-r-2" /> README.md
<FileTextOutlined className="m-r-2 text-tertiary" />{' '}
README.md
</span>
<span>
{collapsed ? <DownOutlined /> : <RightOutlined />}