chore: drawer ux

src/config/hotkeys.ts

@@ -10,5 +10,6 @@ export default {
   REFRESH: ['ctrl+r', 'meta+r'],
   EDIT: ['ctrl+e', 'meta+e'],
   SEARCH: ['ctrl+f', 'meta+f'],
-  RESET: ['ctrl+shift+r', 'meta+shift+r']
+  RESET: ['ctrl+shift+r', 'meta+shift+r'],
+  INPUT: ['ctrl+k', 'meta+k']
 };

src/locales/en-US/models.ts

@@ -13,5 +13,7 @@ export default {
   'models.openinplayground': 'Open in Playground',
   'models.instances': 'instances',
   'model.form.ollama.model': 'Ollama Model',
-  'model.form.ollamaholder': 'Please select or input model name'
+  'model.form.ollamaholder': 'Please select or input model name',
+  'model.form.ollamatips':
+    'Tip: The following are the preconfigured Ollama models in GPUStack. Please select the model you want, or directly enter the model you wish to deploy in the 【{name}】 input box on the right.'
 };

src/locales/zh-CN/models.ts

@@ -13,5 +13,7 @@ export default {
   'models.openinplayground': '在 Playground 中打开',
   'models.instances': '实例',
   'model.form.ollama.model': 'Ollama 模型',
-  'model.form.ollamaholder': '请选择或输入模型名称'
+  'model.form.ollamaholder': '请选择或输入模型名称',
+  'model.form.ollamatips':
+    '提示：以下为 GPUStack 预设的 Ollama 模型，请选择你想要的模型或者直接在右侧表单 【{name}】 输入框中输入你要部署的模型。'
 };

src/pages/llmodels/apis/index.ts

@@ -1,4 +1,5 @@
 import { listFiles, listModels } from '@huggingface/hub';
+import { PipelineType } from '@huggingface/tasks';
 import { request } from '@umijs/max';
 import {
   FormData,
@@ -129,6 +130,7 @@ export async function queryHuggingfaceModels(
     search: {
       query: string;
       tags: string[];
+      task?: PipelineType;
     };
   },
   options?: any
@@ -137,7 +139,7 @@ export async function queryHuggingfaceModels(
   for await (const model of listModels({
     ...params,
     ...options,
-    limit: 50,
+    limit: 100,
     additionalFields: ['sha'],
     fetch(url: string, config: any) {
       try {

src/pages/llmodels/components/column-wrapper.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import '../style/column-wrapper.less';
+
+const ColumnWrapper: React.FC<any> = ({ children, footer }) => {
+  if (footer) {
+    return (
+      <div className="column-wrapper-footer">
+        <div className="column-wrapper">{children}</div>
+        {<div className="footer">{footer}</div>}
+      </div>
+    );
+  }
+  return <div className="column-wrapper">{children}</div>;
+};
+
+export default ColumnWrapper;

src/pages/llmodels/components/deploy-modal.tsx

@@ -5,14 +5,17 @@ import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import { convertFileSize } from '@/utils';
 import { useIntl } from '@umijs/max';
-import { Divider, Drawer, Form } from 'antd';
+import { Drawer, Form } from 'antd';
 import _ from 'lodash';
 import { memo, useCallback, useEffect, useState } from 'react';
 import { queryHuggingfaceModelFiles, queryHuggingfaceModels } from '../apis';
 import { modelSourceMap } from '../config';
 import { FormData, ListItem } from '../config/types';
+import ColumnWrapper from './column-wrapper';
 import HFModelFile from './hf-model-file';
+import ModelCard from './model-card';
 import SearchModel from './search-model';
+import TitleWrapper from './title-wrapper';
 
 type AddModalProps = {
   title: string;
@@ -250,10 +253,20 @@ const AddModal: React.FC<AddModalProps> = (props) => {
 
   const handleOnSelectModel = useCallback((item: any) => {
     const repo = item.name;
+    let name = _.split(item.name, '/').slice(-1)[0];
+    const reg = /(-gguf)$/i;
+    name = _.toLower(name).replace(reg, '');
+
     if (form.getFieldValue('source') === modelSourceMap.huggingface_value) {
-      form.setFieldValue('huggingface_repo_id', repo);
+      form.setFieldsValue({
+        huggingface_repo_id: repo,
+        name: name
+      });
     } else {
-      form.setFieldValue('ollama_library_model_name', repo);
+      form.setFieldsValue({
+        ollama_library_model_name: repo,
+        name: name
+      });
     }
   }, []);
 
@@ -272,42 +285,50 @@ const AddModal: React.FC<AddModalProps> = (props) => {
       keyboard={false}
       styles={{
         body: {
-          height: 'calc(100vh - 110px)'
+          height: 'calc(100vh - 53px)',
+          padding: '16px 0'
         }
       }}
       width="90%"
-      footer={
-        <ModalFooter
-          onCancel={onCancel}
-          onOk={handleSumit}
-          style={{
-            display: 'flex',
-            justifyContent: 'flex-end'
-          }}
-        ></ModalFooter>
-      }
+      footer={false}
     >
       <div style={{ display: 'flex' }}>
-        <div style={{ flex: 1 }}>
+        <ColumnWrapper>
           <SearchModel
             modelSource={modelSource}
             onSelectModel={handleOnSelectModel}
           ></SearchModel>
-        </div>
-
-        <Divider type="vertical"></Divider>
-        <div style={{ flex: 1 }}>
-          <HFModelFile
-            repo={huggingfaceRepoId}
-            onSelectFile={handleSelectModelFile}
-          ></HFModelFile>
-        </div>
-        <Divider type="vertical"></Divider>
-        <div style={{ width: 450 }}>
-          <h3 className="flex-between font-size-14">
-            <span>Configuration</span>
-          </h3>
-          <Form name="deployModel" form={form} onFinish={onOk} preserve={false}>
+        </ColumnWrapper>
+        {modelSource === modelSourceMap.huggingface_value && (
+          <ColumnWrapper>
+            <ModelCard repo={huggingfaceRepoId}></ModelCard>
+            <HFModelFile
+              repo={huggingfaceRepoId}
+              onSelectFile={handleSelectModelFile}
+            ></HFModelFile>
+          </ColumnWrapper>
+        )}
+        <ColumnWrapper
+          footer={
+            <ModalFooter
+              onCancel={onCancel}
+              onOk={handleSumit}
+              style={{
+                padding: '16px 20px',
+                display: 'flex',
+                justifyContent: 'flex-end'
+              }}
+            ></ModalFooter>
+          }
+        >
+          <TitleWrapper>Configuration</TitleWrapper>
+          <Form
+            name="deployModel"
+            form={form}
+            onFinish={onOk}
+            preserve={false}
+            style={{ padding: '16px 20px' }}
+          >
             <Form.Item<FormData>
               name="name"
               rules={[
@@ -386,7 +407,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
               ></SealInput.TextArea>
             </Form.Item>
           </Form>
-        </div>
+        </ColumnWrapper>
       </div>
     </Drawer>
   );

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

@@ -1,11 +1,16 @@
 import { convertFileSize } from '@/utils';
 import { SearchOutlined } from '@ant-design/icons';
+import {
+  GGMLQuantizationType,
+  GGUF_QUANT_DESCRIPTIONS
+} from '@huggingface/gguf';
 import { Button, Col, Empty, Row, Space, Spin } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
 import { useEffect, useState } from 'react';
 import { queryHuggingfaceModelFiles } from '../apis';
 import '../style/hf-model-file.less';
+import TitleWrapper from './title-wrapper';
 
 interface HFModelFileProps {
   repo: string;
@@ -36,7 +41,8 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
       const list = _.filter(res, (file: any) => {
         return _.endsWith(file.path, '.gguf');
       });
-      setDataSource({ fileList: list, loading: false });
+      const sortList = _.sortBy(list, (item: any) => item.size);
+      setDataSource({ fileList: sortList, loading: false });
       handleSelectModelFile(list[0]);
     } catch (error) {
       setDataSource({ fileList: [], loading: false });
@@ -44,55 +50,72 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
     }
   };
 
+  const getModelQuantizationType = (item: any) => {
+    const name = _.split(item.path, '.').slice(0, -1).join('.');
+    let quanType = _.toUpper(name.split('-').slice(-1)[0]);
+    if (quanType.indexOf('.') > -1) {
+      quanType = _.split(quanType, '.')[1];
+    }
+    if (_.get(GGUF_QUANT_DESCRIPTIONS, GGMLQuantizationType[quanType])) {
+      return <span className="tag-item">{quanType}</span>;
+    }
+    return null;
+  };
+
   useEffect(() => {
     handleFetchModelFiles();
   }, [props.repo]);
   return (
     <div>
-      <h3 className="flex-between font-size-14">
-        <span>Available Files({dataSource.fileList.length || 0})</span>
-      </h3>
-      <div>
-        <Spin spinning={dataSource.loading} style={{ minHeight: 100 }}></Spin>
-        {dataSource.fileList.length ? (
-          <Row gutter={[10, 10]}>
-            {_.map(dataSource.fileList, (item: any) => {
-              return (
-                <Col span={24} key={item.path}>
-                  <div
-                    className={classNames('hf-model-file', {
-                      active: item.path === current
-                    })}
-                    onClick={() => handleSelectModelFile(item)}
-                  >
-                    <div className="title">{item.path}</div>
-                    <Space className="tags">
-                      <span className="tag-item">
-                        {convertFileSize(item.size)}
-                      </span>
-                    </Space>
-                    <div className="btn">
-                      <Button size="middle">Install</Button>
+      <TitleWrapper>
+        <span>Available Files ({dataSource.fileList.length || 0})</span>
+      </TitleWrapper>
+      <div style={{ padding: '16px 20px' }}>
+        <Spin spinning={dataSource.loading} style={{ minHeight: 100 }}>
+          {dataSource.fileList.length ? (
+            <Row gutter={[16, 16]}>
+              {_.map(dataSource.fileList, (item: any) => {
+                return (
+                  <Col span={24} key={item.path}>
+                    <div
+                      tabIndex={0}
+                      className={classNames('hf-model-file', {
+                        active: item.path === current
+                      })}
+                      onClick={() => handleSelectModelFile(item)}
+                    >
+                      <div className="title">{item.path}</div>
+                      <Space className="tags">
+                        <span className="tag-item">
+                          {convertFileSize(item.size)}
+                        </span>
+                        {getModelQuantizationType(item)}
+                      </Space>
+                      <div className="btn">
+                        <Button size="middle">
+                          {item.path === current ? 'Selected' : 'Select'}
+                        </Button>
+                      </div>
                     </div>
-                  </div>
-                </Col>
-              );
-            })}
-          </Row>
-        ) : (
-          !dataSource.loading && (
-            <Empty
-              imageStyle={{ height: 'auto', marginTop: '20px' }}
-              image={
-                <SearchOutlined
-                  className="font-size-16"
-                  style={{ color: 'var(--ant-color-text-tertiary)' }}
-                ></SearchOutlined>
-              }
-              description="No models found"
-            />
-          )
-        )}
+                  </Col>
+                );
+              })}
+            </Row>
+          ) : (
+            !dataSource.loading && (
+              <Empty
+                imageStyle={{ height: 'auto', marginTop: '20px' }}
+                image={
+                  <SearchOutlined
+                    className="font-size-16"
+                    style={{ color: 'var(--ant-color-text-tertiary)' }}
+                  ></SearchOutlined>
+                }
+                description="No files found"
+              />
+            )
+          )}
+        </Spin>
       </div>
     </div>
   );

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

@@ -4,7 +4,7 @@ import {
   FolderOutlined,
   HeartOutlined
 } from '@ant-design/icons';
-import { Space, Tag } from 'antd';
+import { Button, Space, Tag } from 'antd';
 import classNames from 'classnames';
 import dayjs from 'dayjs';
 import _ from 'lodash';
@@ -15,7 +15,8 @@ interface HFModelItemProps {
   title: string;
   downloads: number;
   likes: number;
-  lastModified: string;
+  task?: string;
+  updatedAt: string;
   active: boolean;
   source?: string;
   tags?: string[];
@@ -29,15 +30,30 @@ const HFModelItem: React.FC<HFModelItemProps> = (props) => {
       })}
     >
       <div className="title">
-        <FolderOutlined className="m-r-5" />
+        <FolderOutlined
+          className="m-r-5"
+          style={{ color: 'var(--ant-color-text-tertiary)' }}
+        />
         {props.title}
       </div>
       <div className="info">
         {props.source === modelSourceMap.huggingface_value ? (
           <Space size={16}>
+            {props.task && (
+              <Tag
+                color="rgb(236, 240, 242)"
+                style={{
+                  marginRight: 0
+                }}
+              >
+                <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
+                  {props.task}
+                </span>
+              </Tag>
+            )}
             <span>
               {dayjs().to(
-                dayjs(dayjs(props.lastModified).format('YYYY-MM-DD HH:mm:ss'))
+                dayjs(dayjs(props.updatedAt).format('YYYY-MM-DD HH:mm:ss'))
               )}
             </span>
             <span>
@@ -50,22 +66,29 @@ const HFModelItem: React.FC<HFModelItemProps> = (props) => {
             </span>
           </Space>
         ) : (
-          <Space size={10}>
-            {_.map(props.tags, (tag: string) => {
-              return (
-                <Tag
-                  style={{
-                    backgroundColor: 'var(--color-white-1)',
-                    marginRight: 0
-                  }}
-                >
-                  <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
-                    {tag}
-                  </span>
-                </Tag>
-              );
-            })}
-          </Space>
+          <div className="flex-between">
+            <Space size={10}>
+              {_.map(props.tags, (tag: string) => {
+                return (
+                  <Tag
+                    style={{
+                      backgroundColor: 'var(--color-white-1)',
+                      marginRight: 0
+                    }}
+                  >
+                    <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
+                      {tag}
+                    </span>
+                  </Tag>
+                );
+              })}
+            </Space>
+            <div className="btn">
+              <Button size="middle">
+                {props.active ? 'Selected' : 'Select'}
+              </Button>
+            </div>
+          </div>
         )}
       </div>
     </div>

src/pages/llmodels/components/model-card.tsx

@@ -0,0 +1,48 @@
+import { Space, Tag } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { queryHuggingfaceModelDetail } from '../apis';
+import '../style/model-card.less';
+import TitleWrapper from './title-wrapper';
+
+const ModelCard: React.FC<{ repo: string }> = (props) => {
+  const { repo } = props;
+  const [modelData, setModelData] = useState<any>({});
+
+  const getModelCardData = async () => {
+    if (!repo) {
+      return;
+    }
+    try {
+      const res = await queryHuggingfaceModelDetail({ repo });
+      console.log('modelcarddata==========', res);
+      setModelData(res);
+    } catch (error) {
+      setModelData({});
+    }
+  };
+
+  useEffect(() => {
+    getModelCardData();
+  }, [repo]);
+
+  return (
+    <>
+      <TitleWrapper>
+        <span>Model Card</span>
+      </TitleWrapper>
+      <div className="wrapper">
+        <div className="model-card-wrap">
+          <div className="title">{modelData.id}</div>
+          <Space>
+            <Tag className="tag-item">
+              <span className="m-r-5">Architecture:</span>
+              {modelData.config?.model_type}
+            </Tag>
+          </Space>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default React.memo(ModelCard);

src/pages/llmodels/components/search-input.tsx

@@ -0,0 +1,55 @@
+import IconFont from '@/components/icon-font';
+import hotkeys from '@/config/hotkeys';
+import { platformCall } from '@/utils';
+import { SearchOutlined } from '@ant-design/icons';
+import { Input, Tag } from 'antd';
+import React, { useRef, useState } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+
+const SearchInput: React.FC<{
+  onSearch: (e: any) => void;
+}> = (props) => {
+  const { onSearch } = props;
+  const [isFocus, setIsFocus] = useState(false);
+  const inputRef = useRef<any>(null);
+  const platform = platformCall();
+
+  useHotkeys(hotkeys.INPUT.join(','), () => {
+    inputRef.current?.focus?.();
+    setIsFocus(true);
+  });
+
+  return (
+    <Input
+      ref={inputRef}
+      onPressEnter={onSearch}
+      onFocus={() => setIsFocus(true)}
+      onBlur={() => setIsFocus(false)}
+      allowClear
+      placeholder="Search models from Hugging Face"
+      suffix={
+        !isFocus && (
+          <Tag style={{ marginRight: 0 }}>
+            {platform.isMac ? (
+              <>
+                <IconFont type="icon-command"></IconFont> + K
+              </>
+            ) : (
+              <>CTRL + K</>
+            )}
+          </Tag>
+        )
+      }
+      prefix={
+        <SearchOutlined
+          style={{
+            fontSize: '16px',
+            color: 'var(--ant-color-text-quaternary)'
+          }}
+        />
+      }
+    ></Input>
+  );
+};
+
+export default React.memo(SearchInput);

src/pages/llmodels/components/search-model.tsx

@@ -1,11 +1,16 @@
 import IconFont from '@/components/icon-font';
-import { SearchOutlined } from '@ant-design/icons';
-import { Input } from 'antd';
+import { useIntl } from '@umijs/max';
+import { Button, Input, Select } from 'antd';
 import _ from 'lodash';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { queryHuggingfaceModels } from '../apis';
-import { modelSourceMap, ollamaModelOptions } from '../config';
+import {
+  modelFilesSortOptions,
+  modelSourceMap,
+  ollamaModelOptions
+} from '../config';
 import SearchStyle from '../style/search-result.less';
+import SearchInput from './search-input';
 import SearchResult from './search-result';
 
 interface SearchInputProps {
@@ -29,14 +34,16 @@ const sourceList = [
   }
 ];
 
-const SearchInput: React.FC<SearchInputProps> = (props) => {
+const SearchModel: React.FC<SearchInputProps> = (props) => {
+  const intl = useIntl();
   const { modelSource, onSourceChange, onSelectModel } = props;
-  const [showSearch, setShowSearch] = useState(false);
   const [repoOptions, setRepoOptions] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
+  const [current, setCurrent] = useState<string>('');
+  const [sortType, setSortType] = useState<string>('downloads');
   const cacheRepoOptions = useRef<any[]>([]);
   const axiosTokenRef = useRef<any>(null);
-  const [current, setCurrent] = useState<string>('');
+  const customOllamaModelRef = useRef<any>(null);
 
   const handleOnSelectModel = (item: any) => {
     onSelectModel(item);
@@ -68,7 +75,7 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
       });
       const sortedList = _.sortBy(
         list,
-        (item: any) => item.downloads
+        (item: any) => item[sortType]
       ).reverse();
       cacheRepoOptions.current = sortedList;
       setRepoOptions(sortedList);
@@ -82,12 +89,12 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
     }
   };
 
-  const handlerSearchModels = async (e: any) => {
+  const handlerSearchModels = useCallback(async (e: any) => {
     const text = e.target.value;
     handleOnSearchRepo(text);
-  };
+  }, []);
 
-  const handleOnFocus = () => {
+  const handleOnOpen = () => {
     if (
       !repoOptions.length &&
       !cacheRepoOptions.current.length &&
@@ -98,6 +105,7 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
     if (modelSourceMap.ollama_library_value === modelSource) {
       setRepoOptions(ollamaModelOptions);
       cacheRepoOptions.current = ollamaModelOptions;
+      handleOnSelectModel(ollamaModelOptions[0]);
     }
   };
 
@@ -107,7 +115,6 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
       return item.name.includes(text);
     });
     setRepoOptions(list);
-    console.log('handleFilterModels', text);
   };
 
   const debounceFilter = _.debounce((e: any) => {
@@ -121,8 +128,73 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
     cacheRepoOptions.current = [];
   };
 
+  const handleInputChange = (e: any) => {
+    const value = e.target.value;
+    customOllamaModelRef.current = value;
+  };
+
+  const handleConfirm = () => {
+    const model = {
+      label: customOllamaModelRef.current,
+      value: customOllamaModelRef.current,
+      name: customOllamaModelRef.current,
+      id: ''
+    };
+    onSelectModel(model);
+    setCurrent('');
+  };
+
+  const handleSortChange = (value: string) => {
+    const sortedList = _.sortBy(
+      repoOptions,
+      (item: any) => item[value]
+    ).reverse();
+    setSortType(value);
+    setRepoOptions(sortedList);
+  };
+
+  const renderHFSearch = () => {
+    return (
+      <>
+        <SearchInput onSearch={handlerSearchModels}></SearchInput>
+        <div className={SearchStyle.filter}>
+          <span>
+            <span className="value">{repoOptions.length}</span>results
+          </span>
+          <Select
+            value={sortType}
+            onChange={handleSortChange}
+            labelRender={({ label }) => {
+              return <span>Sort: {label}</span>;
+            }}
+            options={modelFilesSortOptions}
+            size="middle"
+            style={{ width: '150px' }}
+          ></Select>
+        </div>
+      </>
+    );
+  };
+
+  const renderOllamaCustom = () => {
+    return (
+      <>
+        <Input
+          allowClear
+          placeholder="Input ollama model name"
+          onChange={handleInputChange}
+        ></Input>
+        <div className={SearchStyle.filter}>
+          <Button type="primary" onClick={handleConfirm}>
+            {intl.formatMessage({ id: 'common.button.confirm' })}
+          </Button>
+        </div>
+      </>
+    );
+  };
+
   useEffect(() => {
-    handleOnFocus();
+    handleOnOpen();
     return () => {
       axiosTokenRef.current?.abort?.();
     };
@@ -136,24 +208,16 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
           value={modelSource}
           onChange={handleSourceChange}
         ></RadioButtons> */}
-        <Input
-          onPressEnter={handlerSearchModels}
-          onChange={debounceFilter}
-          allowClear
-          placeholder={
-            modelSource === 'huggingface'
-              ? 'Search models from hugging face '
-              : ''
-          }
-          prefix={
-            <SearchOutlined
-              style={{
-                fontSize: '16px',
-                color: 'var(--ant-color-text-quaternary)'
-              }}
-            />
-          }
-        ></Input>
+        {modelSource === modelSourceMap.huggingface_value ? (
+          renderHFSearch()
+        ) : (
+          <div style={{ lineHeight: '18px' }}>
+            {intl.formatMessage(
+              { id: 'model.form.ollamatips' },
+              { name: intl.formatMessage({ id: 'model.form.ollama.model' }) }
+            )}
+          </div>
+        )}
       </div>
       {
         <SearchResult
@@ -168,4 +232,4 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
   );
 };
 
-export default React.memo(SearchInput);
+export default React.memo(SearchModel);

src/pages/llmodels/components/search-result.tsx

@@ -24,10 +24,10 @@ const SearchResult: React.FC<SearchResultProps> = (props) => {
     <div style={{ ...props.style }} className="search-result-wrap">
       <Spin spinning={props.loading} style={{ minHeight: 100 }}>
         {resultList.length ? (
-          <Row gutter={[10, 10]}>
+          <Row gutter={[16, 16]}>
             {resultList.map((item, index) => (
               <Col span={24} key={item.name}>
-                <div onClick={(e) => handleSelect(e, item)}>
+                <div onClick={(e) => handleSelect(e, item)} tabIndex={0}>
                   <HFModelItem
                     source={source}
                     tags={item.tags}
@@ -35,7 +35,8 @@ const SearchResult: React.FC<SearchResultProps> = (props) => {
                     title={item.name}
                     downloads={item.downloads}
                     likes={item.likes}
-                    lastModified={item.lastModified}
+                    task={item.task}
+                    updatedAt={item.updatedAt}
                     active={item.id === props.current}
                   />
                 </div>

src/pages/llmodels/components/table-list.tsx

@@ -341,7 +341,7 @@ const Models: React.FC<ModelsProps> = ({
           }
           right={
             <Space size={20}>
-              <Dropdown menu={{ items: sourceOptions }}>
+              <Dropdown menu={{ items: sourceOptions }} placement="bottomRight">
                 <Button
                   icon={<DownOutlined></DownOutlined>}
                   type="primary"

src/pages/llmodels/components/title-wrapper.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import '../style/title-wrapper.less';
+
+const TitleWrapper: React.FC<any> = ({ children }) => {
+  return (
+    <h3 className="h3">
+      <span>{children}</span>
+    </h3>
+  );
+};
+
+export default TitleWrapper;

src/pages/llmodels/config/index.ts

@@ -6,40 +6,64 @@ export const ollamaModelOptions = [
     label: 'llama3.1',
     value: 'llama3.1',
     name: 'llama3.1',
+    id: 'llama3.1',
     tags: ['8B', '70B', '405B']
   },
-  { label: 'llama3', value: 'llama3', name: 'llama3', tags: ['8B', '70B'] },
-  { label: 'gemma2', value: 'gemma2', name: 'gemma2', tags: ['9B', '27B'] },
+  {
+    label: 'llama3',
+    value: 'llama3',
+    name: 'llama3',
+    tags: ['8B', '70B'],
+    id: 'llama3'
+  },
+  {
+    label: 'gemma2',
+    value: 'gemma2',
+    name: 'gemma2',
+    tags: ['9B', '27B'],
+    id: 'gemma2'
+  },
   {
     label: 'mistral',
     value: 'mistral',
     name: 'mistral',
-    tags: ['7B']
+    tags: ['7B'],
+    id: 'mistral'
   },
   {
     label: 'llava',
     value: 'llava',
     name: 'llava',
-    tags: ['7B', '13B', '34B']
+    tags: ['7B', '13B', '34B'],
+    id: 'llava'
   },
   {
     label: 'qwen2',
     value: 'qwen2',
     name: 'qwen2',
-    tags: ['0.5B', '1.5B', '7B', '72B']
+    tags: ['0.5B', '1.5B', '7B', '72B'],
+    id: 'qwen2'
+  },
+  {
+    label: 'phi3',
+    value: 'phi3',
+    name: 'phi3',
+    tags: ['3B', '14B'],
+    id: 'phi3'
   },
-  { label: 'phi3', value: 'phi3', name: 'phi3', tags: ['3B', '14B'] },
   {
     label: 'codellama',
     value: 'codellama',
     name: 'codellama',
-    tags: ['7B', '13B', '34B', '70B']
+    tags: ['7B', '13B', '34B', '70B'],
+    id: 'codellama'
   },
   {
     label: 'deepseek-coder',
     value: 'deepseek-coder',
     name: 'deepseek-coder',
-    tags: ['1B', '7B', '33B']
+    tags: ['1B', '7B', '33B'],
+    id: 'deepseek-coder'
   }
 ];
 
@@ -102,3 +126,10 @@ export const ActionList = [
     icon: EditOutlined
   }
 ];
+
+export const modelFilesSortOptions = [
+  // { label: 'Trending', value: 'trendingScore' },
+  { label: 'Likes', value: 'likes' },
+  { label: 'Downloads', value: 'downloads' },
+  { label: 'Updated', value: 'updatedAt' }
+];

src/pages/llmodels/style/column-wrapper.less

@@ -0,0 +1,27 @@
+.column-wrapper {
+  flex: 1;
+  height: calc(100vh - 85px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  border-left: 1px solid var(--ant-color-split);
+}
+
+.column-wrapper-footer {
+  flex: 1;
+  position: relative;
+  border-left: 1px solid var(--ant-color-split);
+
+  .column-wrapper {
+    padding-bottom: 50px;
+    border-left: none;
+  }
+
+  .footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    background-color: var(--color-white-1);
+  }
+}

src/pages/llmodels/style/hf-model-file.less

@@ -24,6 +24,7 @@
     padding: 2px 4px;
     border-radius: 4px;
     font-size: 12px;
+    height: 20px;
     border: 1px solid var(--ant-color-border);
     color: var(--ant-color-text-secondary);
   }
@@ -33,3 +34,7 @@
     justify-content: flex-end;
   }
 }
+
+.wrapper {
+  padding: 16px 20px;
+}

src/pages/llmodels/style/model-card.less

@@ -0,0 +1,28 @@
+.model-card-wrap {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  border: 1px solid var(--ant-color-border);
+  border-radius: var(--border-radius-base);
+
+  .title {
+    margin-bottom: 10px;
+  }
+
+  .tag-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px 4px;
+    border-radius: 4px;
+    font-size: 12px;
+    height: 20px;
+    border: 1px solid var(--ant-color-border);
+    color: var(--ant-color-text-secondary);
+  }
+
+  .btn {
+    display: flex;
+    justify-content: flex-end;
+  }
+}

src/pages/llmodels/style/search-result.less

@@ -1,19 +1,35 @@
 .search-result-wrap {
   background-color: rgba(255, 255, 255, 100%);
-  padding: 16px;
+  padding: 16px 20px;
   border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
   overflow-y: auto;
 }
 
 .search-bar {
-  display: flex;
-  // position: absolute;
+  position: sticky;
+  top: 0;
   z-index: 100;
   left: 0;
   right: 0;
-  padding: 20px;
-  background: #fff;
-  // border-bottom: 1px solid var(--ant-color-split);
+  padding-inline: 20px;
+  background: var(--color-white-1);
+  border-bottom: 1px solid var(--ant-color-split);
   // box-shadow: 0 1px 2px rgba(5, 5, 5, 5%);
-  padding-top: 0;
+  padding-bottom: 16px;
+
+  .filter {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 16px;
+    color: var(--ant-color-text-tertiary);
+
+    :global {
+      .value {
+        color: var(--ant-color-text);
+        margin-right: 6px;
+        font-weight: var(--font-weight-bold);
+      }
+    }
+  }
 }

src/pages/llmodels/style/title-wrapper.less

@@ -0,0 +1,12 @@
+.h3 {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  padding: 16px 20px;
+  padding-top: 0;
+  margin-bottom: 0;
+  background-color: var(--color-white-1);
+}