fix: ui conflicts in update of multiple evalute result

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

@@ -24,6 +24,7 @@ import {
   backendLabelMap,
   backendOptionsMap,
   backendParamsHolderTips,
+  getBackendParamsTips,
   modelCategories,
   placementStrategyOptions
 } from '../config';
@@ -120,37 +121,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
   }, [backend]);
 
   const backendParamsTips = useMemo(() => {
-    if (backend === backendOptionsMap.llamaBox) {
-      return {
-        backend: 'llama-box',
-        releases: 'https://github.com/gpustack/llama-box/releases',
-        link: 'https://github.com/gpustack/llama-box?tab=readme-ov-file#usage',
-        version: 'v0.0.140'
-      };
-    }
-    if (backend === backendOptionsMap.vllm) {
-      return {
-        backend: 'vLLM',
-        releases: 'https://github.com/vllm-project/vllm/releases',
-        link: 'https://docs.vllm.ai/en/stable/serving/openai_compatible_server.html#cli-reference',
-        version: 'v0.8.5'
-      };
-    }
-    if (backend === backendOptionsMap.ascendMindie) {
-      return {
-        backend: 'Ascend MindIE',
-        releases: '',
-        link: 'http://docs.gpustack.ai/latest/user-guide/inference-backends/#parameters-reference_2',
-        version: '1.0.0'
-      };
-    }
-
-    return {
-      backend: 'vox-box',
-      releases: 'https://github.com/gpustack/vox-box/releases',
-      link: '',
-      version: 'v0.0.13'
-    };
+    return getBackendParamsTips(backend);
   }, [backend]);
 
   const handleWorkerLabelsChange = useCallback(

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

@@ -9,7 +9,13 @@ const ColumnWrapper: React.FC<any> = ({
   paddingBottom = 50
 }) => {
   const scroller = React.useRef<any>(null);
-  const { initialize } = useOverlayScroller();
+  const { initialize } = useOverlayScroller({
+    options: {
+      scrollbars: {
+        autoHide: 'move'
+      }
+    }
+  });
 
   React.useEffect(() => {
     if (scroller.current) {

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

@@ -119,6 +119,11 @@ const CompatibilityAlert: React.FC<CompatibilityAlertProps> = (props) => {
           contentStyle={contentStyle}
           type={type || 'warning'}
           icon={renderIcon}
+          overlayScrollerProps={{
+            scrollbars: {
+              autoHide: 'move'
+            }
+          }}
         ></AlertBlockInfo>
         {showClose && !['transition'].includes(type) && (
           <CloseWrapper className="close-wrapper">

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

@@ -38,8 +38,7 @@ const resetFieldsByModel = [
 
 const resetFieldsByFile = [
   'cpu_offloading',
-  'distributed_inference_across_workers',
-  'backend_parameters'
+  'distributed_inference_across_workers'
 ];
 
 const ModalFooterStyle = {
@@ -99,11 +98,12 @@ const AddModal: FC<AddModalProps> = (props) => {
     setWarningStatus,
     handleBackendChangeBefore,
     cancelEvaluate,
-    handleOnValuesChange,
+    handleOnValuesChange: handleOnValuesChangeBefore,
     handleEvaluateOnChange,
     warningStatus,
     submitAnyway
   } = useCheckCompatibility();
+
   const { onSelectModel } = useSelectModel({ gpuOptions: props.gpuOptions });
   const form = useRef<any>({});
   const intl = useIntl();
@@ -118,7 +118,22 @@ const AddModal: FC<AddModalProps> = (props) => {
     model: false,
     file: false
   });
+  const evaluateStateRef = useRef<{ state: 'model' | 'file' | 'form' }>({
+    state: 'form'
+  });
 
+  /**
+   *
+   * @param state target to distinguish the evaluate state
+   */
+  const setEvaluteState = (state: 'model' | 'file' | 'form') => {
+    evaluateStateRef.current.state = state;
+  };
+
+  /**
+   *
+   * @param flag set the evaluate status of the model or file
+   */
   const setIsHolderRef = (flag: Record<string, boolean>) => {
     isHolderRef.current = {
       ...isHolderRef.current,
@@ -126,6 +141,15 @@ const AddModal: FC<AddModalProps> = (props) => {
     };
   };
 
+  const handleOnValuesChange = (data: {
+    changedValues: any;
+    allValues: any;
+    source: SourceType;
+  }) => {
+    setEvaluteState('form');
+    handleOnValuesChangeBefore(data);
+  };
+
   const getDefaultSpec = (item: any) => {
     const defaultSpec = item.evaluateResult?.default_spec || {};
     return _.omit(defaultSpec, [
@@ -145,6 +169,10 @@ const AddModal: FC<AddModalProps> = (props) => {
   const handleSelectModelFile = async (item: any, evaluate?: boolean) => {
     form.current?.form?.resetFields(resetFieldsByFile);
     const modelInfo = onSelectModel(selectedModel, props.source);
+
+    /** display the selected model file information, but not
+     *  unitl the evaluate result is ready
+     */
     form.current?.setFieldsValue?.({
       file_name: item.fakeName,
       ...modelInfo,
@@ -158,6 +186,7 @@ const AddModal: FC<AddModalProps> = (props) => {
     });
 
     if (item.fakeName) {
+      setEvaluteState('file');
       const evaluateRes = await handleEvaluateOnChange?.({
         changedValues: {},
         allValues: form.current?.form?.getFieldsValue?.(),
@@ -166,31 +195,55 @@ const AddModal: FC<AddModalProps> = (props) => {
       const defaultSpec = getDefaultSpec({
         evaluateResult: evaluateRes
       });
-      console.log('defaultSpec', defaultSpec);
+
+      /**
+       * do not reset backend_parameters when select a model file
+       */
+
+      const formBackendParameters =
+        form.current?.getFieldValue?.('backend_parameters') || [];
+
       form.current?.setFieldsValue?.({
         file_name: item.fakeName,
         ...defaultSpec,
         ...modelInfo,
+        backend_parameters:
+          formBackendParameters.length > 0
+            ? formBackendParameters
+            : defaultSpec.backend_parameters || [],
         categories: getCategory(item)
       });
     }
   };
 
   const handleOnSelectModel = (item: any, evaluate?: boolean) => {
-    setSelectedModel(item);
-    form.current?.form?.resetFields(resetFieldsByModel);
-    if (!item.isGGUF) {
-      setIsGGUF(false);
+    // when select a model not from the evaluate result,
+    if (!evaluate) {
+      setEvaluteState('model');
+      setSelectedModel(item);
+      form.current?.form?.resetFields(resetFieldsByModel);
       const modelInfo = onSelectModel(item, props.source);
-      if (!isHolderRef.current.model) {
-        handleShowCompatibleAlert(item.evaluateResult);
-      }
       form.current?.setFieldsValue?.({
-        ...getDefaultSpec(item),
         ...modelInfo,
         categories: getCategory(item)
       });
     }
+
+    if (!item.isGGUF) {
+      setIsGGUF(false);
+      const modelInfo = onSelectModel(item, props.source);
+      if (
+        !isHolderRef.current.model &&
+        evaluateStateRef.current.state === 'model'
+      ) {
+        handleShowCompatibleAlert(item.evaluateResult);
+        form.current?.setFieldsValue?.({
+          ...getDefaultSpec(item),
+          ...modelInfo,
+          categories: getCategory(item)
+        });
+      }
+    }
   };
 
   const handleOnOk = async (allValues: FormData) => {