style: model file list

src/assets/styles/common.less

@@ -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

@@ -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

@@ -1,8 +1,6 @@
-import hljs from 'highlight.js';
+import { memo } from 'react';
-import { memo, useMemo } from 'react';
+import CodeViewer from './code-viewer';
-import CopyButton from '../copy-button';
 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 LightViewer: React.FC<CodeViewerProps> = (props) => {
-  const {
+  const { code, lang, autodetect, ignoreIllegals, copyable } = props || {};
-    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]);
 
   return (
-    <pre className="code-pre light">
+    <CodeViewer
-      <code
+      code={code}
-        className={highlightedCode.className}
+      lang={lang}
-        dangerouslySetInnerHTML={{
+      theme="light"
-          __html: highlightedCode.value
+      autodetect={autodetect}
-        }}
+      ignoreIllegals={ignoreIllegals}
-      ></code>
+      copyable={copyable}
-      {copyable && (
+    ></CodeViewer>
-        <CopyButton
-          text={code}
-          size="small"
-          style={{ color: '#abb2bf' }}
-        ></CopyButton>
-      )}
-    </pre>
   );
 };
 
-export default memo(CodeViewer);
+export default memo(LightViewer);

src/components/highlight-code/code-viewer.tsx

@@ -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

@@ -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

@@ -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

@@ -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

@@ -8,17 +8,19 @@ const FileParts: React.FC<{
 }> = ({ fileList }) => {
   return (
     <SimpleBar style={{ maxHeight: 200 }}>
-      {fileList.map((file, index) => {
+      <div style={{ padding: 10 }}>
-        return (
+        {fileList.map((file, index) => {
-          <div key={index} className="flex-between m-b-5">
+          return (
-            <span>
+            <div key={index} className="flex-between m-b-5">
-              {' '}
+              <span>
-              Part {file.part} of {file.total}
+                {' '}
-            </span>
+                Part {file.part} of {file.total}
-            <span>{convertFileSize(file.size)}</span>
+              </span>
-          </div>
+              <span>{convertFileSize(file.size)}</span>
-        );
+            </div>
-      })}
+          );
+        })}
+      </div>
     </SimpleBar>
   );
 };

src/pages/llmodels/components/hf-model-file.tsx

@@ -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(list, (item: any) => {
-      const sortList = _.sortBy(newList, (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

@@ -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 />}