style: check compatibility

src/components/alert-info/block.less

@@ -21,6 +21,12 @@
     background-color: var(--ant-color-warning-bg);
   }
 
+  &.transition {
+    color: var(--ant-geekblue-7);
+    background: var(--ant-geekblue-1);
+    border-color: var(--ant-geekblue-3);
+  }
+
   .title {
     position: absolute;
     left: 0;
@@ -38,6 +44,10 @@
       &.warning {
         color: var(--ant-color-warning);
       }
+
+      &.transition {
+        color: var(--ant-geekblue-7);
+      }
     }
 
     .text {

src/components/alert-info/block.tsx

@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import OverlayScroller from '../overlay-scroller';
 import './block.less';
 interface AlertInfoProps {
-  type: 'danger' | 'warning';
+  type: 'danger' | 'warning' | 'transition' | 'info';
   message: React.ReactNode;
   rows?: number;
   icon?: React.ReactNode;
@@ -38,7 +38,8 @@ const AlertInfo: React.FC<AlertInfoProps> = (props) => {
     ellipsis,
     style,
     title,
-    contentStyle
+    contentStyle,
+    icon
   } = props;
 
   return (
@@ -57,7 +58,9 @@ const AlertInfo: React.FC<AlertInfoProps> = (props) => {
             }
           >
             <div className={classNames('title', type)}>
-              <WarningFilled className={classNames('info-icon', type)} />
+              <span className={classNames('info-icon', type)}>
+                {icon ?? <WarningFilled />}
+              </span>
             </div>
             {title && <TitleWrapper>{title}</TitleWrapper>}
             <OverlayScroller maxHeight={80} style={{ ...contentStyle }}>

src/components/copy-button/index.tsx

@@ -11,6 +11,7 @@ type CopyButtonProps = {
   type?: 'text' | 'primary' | 'dashed' | 'link' | 'default';
   size?: 'small' | 'middle' | 'large';
   shape?: 'circle' | 'round' | 'default';
+  tips?: string;
   placement?:
     | 'top'
     | 'left'
@@ -25,6 +26,7 @@ type CopyButtonProps = {
 };
 
 const CopyButton: React.FC<CopyButtonProps> = ({
+  tips,
   text,
   disabled,
   type = 'text',
@@ -68,7 +70,7 @@ const CopyButton: React.FC<CopyButtonProps> = ({
 
   return (
     <Tooltip
-      title={intl.formatMessage({ id: 'common.button.copy' })}
+      title={tips ?? intl.formatMessage({ id: 'common.button.copy' })}
       placement={placement}
     >
       <Button

src/locales/en-US/models.ts

@@ -123,9 +123,10 @@ export default {
   'models.form.files': 'files',
   'models.table.status': 'Status',
   'models.form.submit.anyway': 'Submit Anyway',
-  'models.form.evaluating': 'Evaluating...',
-  'models.form.incompatible': 'Incompatible',
+  'models.form.evaluating': 'Evaluating Model Compatibliity',
+  'models.form.incompatible': 'Incompatibility Detected',
   'models.form.restart.onerror': 'Auto-Restart On Error',
   'models.form.restart.onerror.tips':
-    'When an error occurs, it will automatically attempt to restart.'
+    'When an error occurs, it will automatically attempt to restart.',
+  'models.form.check.params': 'Checking configuration...'
 };

src/locales/en-US/resources.ts

@@ -70,5 +70,6 @@ export default {
     'Waiting for download to complete...',
   'resources.filter.worker': 'Filter by Worker',
   'resources.filter.source': 'Filter by Source',
-  'resources.modelfiles.delete.tips': 'Also delete the file from disk!'
+  'resources.modelfiles.delete.tips': 'Also delete the file from disk!',
+  'resources.modelfiles.copy.tips': 'Copy Full Path'
 };

src/locales/ja-JP/models.ts

@@ -120,11 +120,12 @@ export default {
   'models.form.files': 'files',
   'models.table.status': 'Status',
   'models.form.submit.anyway': 'Submit Anyway',
-  'models.form.evaluating': 'Evaluating...',
-  'models.form.incompatible': 'Incompatible',
+  'models.form.evaluating': 'Evaluating Model Compatibliity',
+  'models.form.incompatible': 'Incompatibility Detected',
   'models.form.restart.onerror': 'Auto-Restart On Error',
   'models.form.restart.onerror.tips':
-    'When an error occurs, it will automatically attempt to restart.'
+    'When an error occurs, it will automatically attempt to restart.',
+  'models.form.check.params': 'Checking configuration...'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -134,5 +135,6 @@ export default {
 // 4. 'models.form.evaluating',
 // 5. 'models.form.incompatible',
 // 6. 'models.form.restart.onerror',
-// 7. 'models.form.restart.onerror.tips'
+// 7. 'models.form.restart.onerror.tips',
+// 8. 'models.form.check.params',
 // ========== End of To-Do List ==========

src/locales/ja-JP/resources.ts

@@ -71,7 +71,8 @@ export default {
     'Waiting for download to complete...',
   'resources.filter.worker': 'Filter by Worker',
   'resources.filter.source': 'Filter by Source',
-  'resources.modelfiles.delete.tips': 'Also delete the file from disk!'
+  'resources.modelfiles.delete.tips': 'Also delete the file from disk!',
+  'resources.modelfiles.copy.tips': 'Copy Full Path'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -89,4 +90,5 @@ export default {
 // 12. 'resources.modelfiles.delete.tips',
 // 13. 'resources.worker.add.step1',
 // 14. 'resources.worker.add.step2.tips',
+// 15. 'resources.modelfiles.copy.tips',
 // ========== End of To-Do List ==========

src/locales/ru-RU/models.ts

@@ -123,11 +123,12 @@ export default {
   'models.form.files': 'файлы',
   'models.table.status': 'Status',
   'models.form.submit.anyway': 'Submit Anyway',
-  'models.form.evaluating': 'Evaluating...',
-  'models.form.incompatible': 'Incompatible',
+  'models.form.evaluating': 'Evaluating Model Compatibliity',
+  'models.form.incompatible': 'Incompatibility Detected',
   'models.form.restart.onerror': 'Auto-Restart On Error',
   'models.form.restart.onerror.tips':
-    'When an error occurs, it will automatically attempt to restart.'
+    'When an error occurs, it will automatically attempt to restart.',
+  'models.form.check.params': 'Checking configuration...'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -136,5 +137,6 @@ export default {
 // 3. 'models.form.evaluating',
 // 4. 'models.form.incompatible',
 // 5. 'models.form.restart.onerror',
-// 6. 'models.form.restart.onerror.tips'
+// 6. 'models.form.restart.onerror.tips',
+// 7. 'models.form.check.params',
 // ========== End of To-Do List ==========

src/locales/ru-RU/resources.ts

@@ -69,11 +69,13 @@ export default {
   'resources.modelfiles.storagePath.holder': 'Ожидание завершения загрузки...',
   'resources.filter.worker': 'Фильтровать по узлу',
   'resources.filter.source': 'Фильтровать по источнику',
-  'resources.modelfiles.delete.tips': 'Also delete the file from disk!'
+  'resources.modelfiles.delete.tips': 'Also delete the file from disk!',
+  'resources.modelfiles.copy.tips': 'Copy Full Path'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
 // 1. 'resources.modelfiles.delete.tips',
 // 2. 'resources.worker.add.step1',
-// 3. 'resources.worker.add.step2.tips
+// 3. 'resources.worker.add.step2.tips,
+// 4. 'resources.modelfiles.copy.tips',
 // ========== End of To-Do List ==========

src/locales/zh-CN/models.ts

@@ -116,8 +116,9 @@ export default {
   'models.form.files': '文件',
   'models.table.status': '状态',
   'models.form.submit.anyway': '仍然提交',
-  'models.form.evaluating': '评估中...',
-  'models.form.incompatible': '不兼容',
+  'models.form.evaluating': '评估模型兼容性',
+  'models.form.incompatible': '检测到不兼容',
   'models.form.restart.onerror': '错误时重启',
-  'models.form.restart.onerror.tips': '当发生错误时，将自动尝试恢复'
+  'models.form.restart.onerror.tips': '当发生错误时，将自动尝试恢复',
+  'models.form.check.params': '正在校验配置...'
 };

src/locales/zh-CN/resources.ts

@@ -68,5 +68,6 @@ export default {
   'resources.modelfiles.storagePath.holder': '等待下载完成...',
   'resources.filter.worker': '按 worker 筛选',
   'resources.filter.source': '按来源筛选',
-  'resources.modelfiles.delete.tips': '同时从磁盘删除文件！'
+  'resources.modelfiles.delete.tips': '同时从磁盘删除文件！',
+  'resources.modelfiles.copy.tips': '复制完整路径'
 };

src/pages/llmodels/components/compatible-alert.tsx

@@ -1,5 +1,9 @@
 import AlertBlockInfo from '@/components/alert-info/block';
-import { CloseOutlined } from '@ant-design/icons';
+import {
+  CloseOutlined,
+  LoadingOutlined,
+  WarningFilled
+} from '@ant-design/icons';
 import { isArray } from 'lodash';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
@@ -9,6 +13,7 @@ interface CompatibilityAlertProps {
     show: boolean;
     title?: string;
     isHtml?: boolean;
+    type: 'danger' | 'warning' | 'transition' | 'info';
     message: string | string[];
   };
   contentStyle?: React.CSSProperties;
@@ -38,7 +43,7 @@ const MessageWrapper = styled.div`
 
 const CompatibilityAlert: React.FC<CompatibilityAlertProps> = (props) => {
   const { warningStatus, contentStyle, showClose, onClose } = props;
-  const { title, show, message, isHtml } = warningStatus;
+  const { title, show, message, isHtml, type } = warningStatus;
 
   const renderMessage = useMemo(() => {
     if (!message || !show) {
@@ -76,9 +81,10 @@ const CompatibilityAlert: React.FC<CompatibilityAlertProps> = (props) => {
           message={renderMessage}
           title={title}
           contentStyle={contentStyle}
-          type="warning"
+          type={type || 'warning'}
+          icon={type === 'transition' ? <LoadingOutlined /> : <WarningFilled />}
         ></AlertBlockInfo>
-        {showClose && (
+        {showClose && type !== 'transition' && (
           <CloseWrapper onClick={onClose}>
             <CloseOutlined />
           </CloseWrapper>

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

@@ -95,7 +95,8 @@ const AddModal: FC<AddModalProps> = (props) => {
   const handleSelectModelFile = useCallback((item: any) => {
     form.current?.setFieldsValue?.({
       file_name: item.fakeName,
-      backend: backendOptionsMap.llamaBox
+      backend: backendOptionsMap.llamaBox,
+      ...item.evaluateResult?.default_spec
     });
     if (item.fakeName) {
       handleShowCompatibleAlert(item.evaluateResult);
@@ -107,6 +108,9 @@ const AddModal: FC<AddModalProps> = (props) => {
     form.current?.handleOnSelectModel?.(item);
     if (!isgguf) {
       handleShowCompatibleAlert(item.evaluateResult);
+      form.current?.setFieldsValue?.({
+        ...item.evaluateResult?.default_spec
+      });
     }
   };
 

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

@@ -2,15 +2,11 @@ import { formatNumber } from '@/utils';
 import {
   DownloadOutlined,
   FolderOutlined,
-  HeartOutlined,
-  WarningOutlined
+  HeartOutlined
 } from '@ant-design/icons';
-import { useIntl } from '@umijs/max';
-import { Tooltip } from 'antd';
 import classNames from 'classnames';
 import dayjs from 'dayjs';
-import _ from 'lodash';
-import React, { useMemo } from 'react';
+import React from 'react';
 import { EvaluateResult } from '../config/types';
 import '../style/hf-model-item.less';
 import IncompatiableInfo from './incompatiable-info';
@@ -27,20 +23,9 @@ interface HFModelItemProps {
   evaluateResult?: EvaluateResult;
   isEvaluating?: boolean;
 }
-const warningTask = ['video'];
 
 const HFModelItem: React.FC<HFModelItemProps> = (props) => {
   const { evaluateResult, isEvaluating } = props;
-  console.log('evaluateResult', evaluateResult);
-  const intl = useIntl();
-  const isExcludeTask = useMemo(() => {
-    if (!props.task) {
-      return false;
-    }
-    return _.some(warningTask, (item: string) => {
-      return props.task?.toLowerCase().includes(item);
-    });
-  }, [props.task]);
 
   return (
     <div
@@ -55,13 +40,6 @@ const HFModelItem: React.FC<HFModelItemProps> = (props) => {
           style={{ color: 'var(--ant-color-text-tertiary)' }}
         />
         {props.title}
-        {isExcludeTask && (
-          <Tooltip
-            title={intl.formatMessage({ id: 'models.search.unsupport' })}
-          >
-            <WarningOutlined className="m-l-2" style={{ color: 'orange' }} />
-          </Tooltip>
-        )}
       </div>
       <div className="info">
         <div className="info-item">

src/pages/llmodels/components/incompatiable-info.tsx

@@ -1,5 +1,5 @@
 import OverlayScroller from '@/components/overlay-scroller';
-import { WarningOutlined } from '@ant-design/icons';
+import { LoadingOutlined, WarningOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Tag, Tooltip } from 'antd';
 import React from 'react';
@@ -14,6 +14,8 @@ interface IncompatiableInfoProps {
 const CompatibleTag = styled(Tag)`
   border-radius: 4px;
   margin-right: 0;
+  font-size: var(--font-size-base);
+  background: transparent !important;
 `;
 
 const IncompatibleInfo = styled.div`
@@ -50,11 +52,13 @@ const SMTitle = styled.div<{ $isTitle?: boolean }>`
 const IncompatiableInfo: React.FC<IncompatiableInfoProps> = (props) => {
   const { data, isEvaluating } = props;
   const intl = useIntl();
-  console.log('IncompatiableInfo', data, isEvaluating);
+
   if (isEvaluating) {
     return (
-      <CompatibleTag color="warning">
-        {intl.formatMessage({ id: 'models.form.evaluating' })}
+      <CompatibleTag color="blue" bordered={false}>
+        <Tooltip title={intl.formatMessage({ id: 'models.form.evaluating' })}>
+          <LoadingOutlined />
+        </Tooltip>
       </CompatibleTag>
     );
   }
@@ -67,23 +71,28 @@ const IncompatiableInfo: React.FC<IncompatiableInfoProps> = (props) => {
       title={
         <OverlayScroller maxHeight={200}>
           <IncompatibleInfo>
-            <SMTitle $isTitle={!!data?.scheduling_messages?.length}>
-              {data?.compatibility_messages}
+            <SMTitle $isTitle={true}>
+              {intl.formatMessage({ id: 'models.form.incompatible' })}
             </SMTitle>
-            {!!data?.scheduling_messages?.length && (
+            {
               <ul>
+                {data?.compatibility_messages.map((item, index) => (
+                  <li key={index}>{item}</li>
+                ))}
                 {data?.scheduling_messages.map((item, index) => (
                   <li key={index}>{item}</li>
                 ))}
               </ul>
-            )}
+            }
           </IncompatibleInfo>
         </OverlayScroller>
       }
     >
-      <CompatibleTag icon={<WarningOutlined />} color="warning">
-        {intl.formatMessage({ id: 'models.form.incompatible' })}
-      </CompatibleTag>
+      <CompatibleTag
+        icon={<WarningOutlined />}
+        color="warning"
+        bordered={false}
+      ></CompatibleTag>
     </Tooltip>
   );
 };

src/pages/llmodels/config/types.ts

@@ -217,5 +217,5 @@ export interface EvaluateResult {
   compatible: boolean;
   compatibility_messages: string[];
   scheduling_messages: string[];
-  default_backend_parameters: any[];
+  default_spec: Record<string, any>;
 }

src/pages/llmodels/hooks/index.ts

@@ -217,6 +217,7 @@ export const useCheckCompatibility = () => {
   const [warningStatus, setWarningStatus] = useState<{
     show: boolean;
     title?: string;
+    type?: 'transition' | 'warning' | 'error';
     message: string | string[];
   }>({
     show: false,
@@ -231,7 +232,8 @@ export const useCheckCompatibility = () => {
       setWarningStatus({
         show: true,
         title: '',
-        message: 'Evaluating compatibility...'
+        type: 'transition',
+        message: intl.formatMessage({ id: 'models.form.check.params' })
       });
       const evalution = await evaluationsModelSpec(
         {

src/pages/resources/components/model-files.tsx

@@ -411,6 +411,10 @@ const ModelFiles = () => {
     }
   };
 
+  const getResolvedPath = (pathList: string[]) => {
+    return _.split(pathList?.[0], /[\\/]/).pop();
+  };
+
   const columns = [
     {
       title: intl.formatMessage({ id: 'models.form.source' }),
@@ -474,6 +478,9 @@ const ModelFiles = () => {
                   text={record.resolved_paths?.[0]}
                   type="link"
                   btnStyle={{ width: 18, paddingInline: 2 }}
+                  tips={intl.formatMessage({
+                    id: 'resources.modelfiles.copy.tips'
+                  })}
                 ></CopyButton>
               </span>
               {renderParts(record)}