feat: vllm support

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

@@ -1,6 +1,6 @@
 import { BulbOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Select } from 'antd';
+import { Checkbox, Select } from 'antd';
 import _ from 'lodash';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { queryHuggingfaceModels, queryModelScopeModels } from '../apis';
@@ -44,6 +44,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
   const cacheRepoOptions = useRef<any[]>([]);
   const axiosTokenRef = useRef<any>(null);
   const searchInputRef = useRef<any>('');
+  const filterGGUFRef = useRef<boolean>(true);
   const modelFilesSortOptions = useRef<any[]>([
     {
       label: intl.formatMessage({ id: 'models.sort.trending' }),
@@ -77,7 +78,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
         search: {
           query: searchInputRef.current || '',
           sort: sort,
-          tags: ['gguf'],
+          tags: filterGGUFRef.current ? ['gguf'] : [],
           task
         }
       };
@@ -101,7 +102,9 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
   const getModelsFromModelscope = useCallback(async (sort: string) => {
     try {
       const params = {
-        Name: searchInputRef.current || '',
+        Name: filterGGUFRef.current
+          ? `${searchInputRef.current} gguf`
+          : searchInputRef.current || '',
         SortBy: ModelScopeSortType[sort]
       };
       const data = await queryModelScopeModels(params, {
@@ -205,6 +208,12 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
     handleOnSearchRepo(value || '');
   };
 
+  const handleFilterGGUFChange = (e: any) => {
+    console.log('filterggufChange:', e.target.checked);
+    filterGGUFRef.current = e.target.checked;
+    handleOnSearchRepo();
+  };
+
   const renderHFSearch = () => {
     return (
       <>
@@ -221,21 +230,30 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
               )}
             </span>
           </span>
-          <Select
-            allowClear
-            value={dataSource.sortType}
-            onChange={handleSortChange}
-            labelRender={({ label }) => {
-              return (
-                <span>
-                  {intl.formatMessage({ id: 'model.deploy.sort' })}: {label}
-                </span>
-              );
-            }}
-            options={modelFilesSortOptions.current}
-            size="middle"
-            style={{ width: '150px' }}
-          ></Select>
+          <span>
+            <Checkbox
+              onChange={handleFilterGGUFChange}
+              className="m-r-5"
+              checked={filterGGUFRef.current}
+            >
+              GGUF
+            </Checkbox>
+            <Select
+              allowClear
+              value={dataSource.sortType}
+              onChange={handleSortChange}
+              labelRender={({ label }) => {
+                return (
+                  <span>
+                    {intl.formatMessage({ id: 'model.deploy.sort' })}: {label}
+                  </span>
+                );
+              }}
+              options={modelFilesSortOptions.current}
+              size="middle"
+              style={{ width: '150px' }}
+            ></Select>
+          </span>
         </div>
       </>
     );