chore: model file description

src/pages/llmodels/components/advance-config.tsx

@@ -3,6 +3,7 @@ import LabelSelector from '@/components/label-selector';
 import ListInput from '@/components/list-input';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
+import TooltipList from '@/components/tooltip-list';
 import { PageActionType } from '@/config/types';
 import { InfoCircleOutlined, RightOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
@@ -104,31 +105,6 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
     return null;
   }, [backend]);
 
-  const renderSelectTips = (list: Array<{ title: string; tips: string }>) => {
-    return (
-      <div>
-        {list.map((item, index) => {
-          return (
-            <div className="m-b-8" key={index}>
-              <Typography.Title
-                level={5}
-                style={{
-                  color: 'var(--color-white-1)',
-                  marginRight: 10
-                }}
-              >
-                {item.title}:
-              </Typography.Title>
-              <Typography.Text style={{ color: 'var(--color-white-1)' }}>
-                {item.tips}
-              </Typography.Text>
-            </div>
-          );
-        })}
-      </div>
-    );
-  };
-
   const handleWorkerLabelsChange = useCallback(
     (labels: Record<string, any>) => {
       form.setFieldValue('worker_selector', labels);
@@ -155,7 +131,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
         <Form.Item name="scheduleType">
           <SealSelect
             label={intl.formatMessage({ id: 'models.form.scheduletype' })}
-            description={renderSelectTips(scheduleTypeTips)}
+            description={<TooltipList list={scheduleTypeTips}></TooltipList>}
             options={[
               {
                 label: intl.formatMessage({
@@ -180,7 +156,9 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
                   id: 'resources.form.placementStrategy'
                 })}
                 options={placementStrategyOptions}
-                description={renderSelectTips(placementStrategyTips)}
+                description={
+                  <TooltipList list={placementStrategyTips}></TooltipList>
+                }
               ></SealSelect>
             </Form.Item>
             <Form.Item<FormData>

src/pages/llmodels/components/catalog-item.tsx

@@ -2,6 +2,7 @@ import fallbackImg from '@/assets/images/img.png';
 import AutoTooltip from '@/components/auto-tooltip';
 import IconFont from '@/components/icon-font';
 import TagWrapper from '@/components/tags-wrapper';
+import { useIntl } from '@umijs/max';
 import { Tag, Typography } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
@@ -17,6 +18,7 @@ interface CatalogItemProps {
   onClick: (data: CatalogItemType) => void;
 }
 const CatalogItem: React.FC<CatalogItemProps> = (props) => {
+  const intl = useIntl();
   const { onClick, activeId, data } = props;
 
   const handleOnClick = useCallback(() => {
@@ -92,7 +94,10 @@ const CatalogItem: React.FC<CatalogItemProps> = (props) => {
       </div>
       <div className="item-footer">
         <div className="update-time">
-          <span className="flex-center">
+          <span
+            className="flex-center"
+            title={intl.formatMessage({ id: 'models.catalog.release.date' })}
+          >
             <IconFont
               type="icon-new_release_outlined"
               className="m-r-5"

src/pages/llmodels/components/data-form.tsx

@@ -2,6 +2,7 @@ import IconFont from '@/components/icon-font';
 import SealAutoComplete from '@/components/seal-form/auto-complete';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
+import TooltipList from '@/components/tooltip-list';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import { useIntl } from '@umijs/max';
@@ -83,6 +84,36 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
 
   const localPathCache = useRef<string>('');
 
+  const backendTipsList = [
+    {
+      title: 'llama-box',
+      tips: intl.formatMessage({ id: 'models.form.backend.llamabox' })
+    },
+    {
+      title: 'vLLM',
+      tips: intl.formatMessage({ id: 'models.form.backend.vllm' })
+    },
+    {
+      title: 'vox-box',
+      tips: intl.formatMessage({ id: 'models.form.backend.voxbox' })
+    }
+  ];
+
+  const localPathTipsList = [
+    {
+      title: intl.formatMessage({ id: 'models.localpath.gguf.tips.title' }),
+      tips: intl.formatMessage({ id: 'models.localpath.gguf.tips' })
+    },
+    {
+      title: intl.formatMessage({ id: 'models.localpat.safe.tips.title' }),
+      tips: intl.formatMessage({ id: 'models.localpath.safe.tips' })
+    },
+    {
+      title: intl.formatMessage({ id: 'models.localpath.shared.tips.title' }),
+      tips: intl.formatMessage({ id: 'models.localpath.chunks.tips' })
+    }
+  ];
+
   const getGPUList = async () => {
     const data = await queryGPUList();
     const list = _.map(data.items, (item: GPUListItem) => {
@@ -325,10 +356,11 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
           ]}
         >
           <SealInput.Input
+            required
             onBlur={handleLocalPathBlur}
             onFocus={handleOnFocus}
             label={intl.formatMessage({ id: 'models.form.filePath' })}
-            required
+            description={<TooltipList list={localPathTipsList}></TooltipList>}
           ></SealInput.Input>
         </Form.Item>
       </>
@@ -545,19 +577,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
           required
           onChange={handleBackendChange}
           label={intl.formatMessage({ id: 'models.form.backend' })}
-          description={
-            <div>
-              <div>
-                1. {intl.formatMessage({ id: 'models.form.backend.llamabox' })}
-              </div>
-              <div>
-                2. {intl.formatMessage({ id: 'models.form.backend.vllm' })}
-              </div>
-              <div>
-                3. {intl.formatMessage({ id: 'models.form.backend.voxbox' })}
-              </div>
-            </div>
-          }
+          description={<TooltipList list={backendTipsList}></TooltipList>}
           options={
             backendOptions ?? [
               {

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

@@ -257,19 +257,19 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
                 <Tooltip
                   overlayInnerStyle={{ width: 'max-content' }}
                   title={
-                    <div>
-                      <div>
+                    <ul className="tips-desc-list">
+                      <li>
                         {intl.formatMessage({ id: 'models.search.gguf.tips' })}
-                      </div>
-                      <div>
+                      </li>
+                      <li>
                         {intl.formatMessage({ id: 'models.search.vllm.tips' })}
-                      </div>
-                      <div>
+                      </li>
+                      <li>
                         {intl.formatMessage({
                           id: 'models.search.voxbox.tips'
                         })}
-                      </div>
-                    </div>
+                      </li>
+                    </ul>
                   }
                 >
                   GGUF