style: deploy modal message cover the content

src/components/logs-viewer/use-size.ts

@@ -1,25 +1,32 @@
 import { useEffect, useState } from 'react';
 
-const useResizeObserver = (ref: React.RefObject<HTMLElement>) => {
+export const useResizeObserver = (ref: React.RefObject<HTMLElement>) => {
   const [size, setSize] = useState({ width: 0, height: 0 });
 
   useEffect(() => {
     const element = ref.current;
     if (!element) return;
 
-    const observer = new ResizeObserver((entries) => {
-      if (entries[0]) {
-        const { width, height } = entries[0].contentRect;
-        setSize({ width, height });
-      }
+    const updateSize = () => {
+      const rect = element.getBoundingClientRect();
+      setSize((prev) => {
+        if (prev.width === rect.width && prev.height === rect.height)
+          return prev;
+        return { width: rect.width, height: rect.height };
+      });
+    };
+
+    const observer = new ResizeObserver(() => {
+      updateSize();
     });
 
     observer.observe(element);
+    updateSize();
 
     return () => {
       observer.disconnect();
     };
-  }, [ref]);
+  }, [ref.current]);
 
   return size;
 };

src/pages/_components/column-wrapper/index.tsx

@@ -18,17 +18,17 @@ const ColumnWrapper: React.FC<ColumnWrapperProps> = ({
   children,
   footer,
   maxHeight,
-  paddingBottom = 50,
   styles = {}
 }) => {
   const scroller = React.useRef<any>(null);
+  const footerRef = React.useRef<HTMLDivElement>(null);
+  const contentRef = React.useRef<HTMLDivElement>(null);
   const {
     initialize,
     instance,
     scrollEventElement,
     scrollToBottom,
     scrollToTarget,
-    getScrollElement,
     getScrollElementScrollableHeight
   } = useOverlayScroller({
     options: {
@@ -44,13 +44,28 @@ const ColumnWrapper: React.FC<ColumnWrapperProps> = ({
     }
   }, []);
 
+  React.useLayoutEffect(() => {
+    if (!scroller.current || !footerRef.current || !contentRef.current) return;
+
+    const updatePadding = () => {
+      const height = footerRef.current!.getBoundingClientRect().height;
+      contentRef.current!.style.paddingBottom = `${height - 22}px`;
+    };
+
+    updatePadding();
+
+    const observer = new ResizeObserver(updatePadding);
+    observer.observe(footerRef.current);
+
+    return () => observer.disconnect();
+  }, []);
+
   return (
     <WrapperContext.Provider
       value={{
         scroller: scroller,
         osInstance: instance,
         scrollEventElement,
-        getScrollElement,
         getScrollElementScrollableHeight,
         scrollToBottom,
         scrollToTarget
@@ -65,15 +80,13 @@ const ColumnWrapper: React.FC<ColumnWrapperProps> = ({
           ref={scroller}
           style={{ padding: '16px 24px', ...styles.container }}
         >
-          <div
-            style={{
-              paddingBottom: footer ? paddingBottom : 0
-            }}
-          >
-            {children}
-          </div>
+          <div ref={contentRef}>{children}</div>
         </div>
-        {footer && <div className="footer">{footer}</div>}
+        {footer && (
+          <div className="footer" ref={footerRef}>
+            {footer}
+          </div>
+        )}
       </div>
     </WrapperContext.Provider>
   );

src/pages/backends/config/index.ts

@@ -192,20 +192,20 @@ export const frameworks = [
 ];
 
 export const yamlTemplate = `# backend configuration template
-backend_name: my-backend-custom
-description: this is my-backend
-default_version: v0.5.1
+backend_name: vllm-custom
+description: this is my custom vllm backend
+default_version: v0.11.0
 health_check_path: /${GPUSTACK_API_BASE_URL}/models
 default_backend_param:
   - --host
-default_run_command: myBackend serve {{model_path}} --port {{port}}
+default_run_command: vllm serve {{model_path}} --port {{port}} --served-model-name {{model_name}}
 version_configs:
-  v0.0.1:
-    image_name: lm/mybackend:latest
-    run_command: myBackend serve {{model_path}} --port {{port}}
+  v0.11.0:
+    image_name: lm/vllm:latest
+    run_command: vllm serve {{model_path}} --port {{port}} --served-model-name {{model_name}}
     custom_framework: cuda
-  v0.0.2:
-    image_name: lm/mybackend:test
+  v0.10.0:
+    image_name: lm/vllm:test
     run_command:
     custom_framework:
   `;

src/pages/backends/forms/basic.tsx

@@ -55,7 +55,7 @@ const BasicForm: React.FC<AddModalProps> = ({ action, currentData }) => {
           </Form.Item>
           <Form.Item name="default_run_command">
             <SealTextArea
-              scaleSize={true}
+              scaleSize={false}
               alwaysFocus={true}
               description={intl.formatMessage({
                 id: 'backend.form.defaultExecuteCommand.tips'

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

@@ -63,8 +63,6 @@ const FormWrapper = styled.div`
   maxwidth: 100%;
 `;
 
-const AscendNPUQuant_F16 = ['F16', 'FP16'];
-
 const AddModal: React.FC<AddModalProps> = (props) => {
   const {
     title,
@@ -97,7 +95,6 @@ const AddModal: React.FC<AddModalProps> = (props) => {
   const axiosToken = useRef<any>(null);
   const selectSpecRef = useRef<CatalogSpec>({} as CatalogSpec);
   const specListRef = useRef<any[]>([]);
-  const hasF16Ref = useRef<boolean>(false);
 
   const handleSumit = () => {
     form.current?.submit?.();
@@ -361,13 +358,6 @@ const AddModal: React.FC<AddModalProps> = (props) => {
                 paddingTop: 0
               }
             }}
-            paddingBottom={
-              warningStatus.show
-                ? Array.isArray(warningStatus.message)
-                  ? 150
-                  : 125
-                : 50
-            }
             footer={
               <>
                 <CompatibilityAlert

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

@@ -587,7 +587,6 @@ const AddModal: FC<AddModalProps> = (props) => {
 
         <FormWrapper>
           <ColumnWrapper
-            paddingBottom={warningStatus.show ? 170 : 50}
             styles={{
               container: { paddingTop: 0 }
             }}

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

@@ -262,7 +262,6 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
             paddingTop: 0
           }
         }}
-        paddingBottom={warningStatus.show ? 100 : 50}
         footer={
           <>
             <CompatibilityAlert

src/pages/llmodels/download/index.tsx

@@ -216,7 +216,6 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
         )}
         <FormWrapper>
           <ColumnWrapper
-            paddingBottom={50}
             styles={{
               container: { paddingTop: 0 }
             }}

src/pages/llmodels/forms/custom-backend.tsx

@@ -44,7 +44,7 @@ const CustomBackend: React.FC = () => {
             <SealTextArea
               allowClear
               required
-              scaleSize={true}
+              scaleSize={false}
               alwaysFocus={true}
               autoSize={{ minRows: 2, maxRows: 4 }}
               label={intl.formatMessage({ id: 'backend.runCommand' })}
@@ -53,7 +53,10 @@ const CustomBackend: React.FC = () => {
               })}
               placeholder={intl.formatMessage(
                 { id: 'common.help.eg' },
-                { content: 'vllm serve {{model_path}} --port {{port}}' }
+                {
+                  content:
+                    'vllm serve {{model_path}} --port {{port}} --served-model-name {{model_name}}'
+                }
               )}
             ></SealTextArea>
           </Form.Item>

src/pages/llmodels/forms/index.tsx

@@ -103,12 +103,9 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     onClusterChange,
     onOk
   } = props;
-  const {
-    getScrollElementScrollableHeight,
-    getScrollElement,
-    osInstance,
-    scrollEventElement
-  } = useWrapperContext();
+  const { getScrollElementScrollableHeight, osInstance, scrollEventElement } =
+    useWrapperContext();
+  console.log('data form render');
   const { backendOptions, getBackendOptions } = useQueryBackends();
   const { getGPUOptionList, gpuOptions, workerLabelOptions } =
     useGenerateGPUOptions();
@@ -171,7 +168,6 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     setActiveKey,
     segmentOptions,
     segmentedTop: segmentedTop,
-    getScrollElement,
     getScrollElementScrollableHeight: getScrollElementScrollableHeight
   });
 

src/pages/llmodels/hooks/use-field-scroll.ts

@@ -15,8 +15,7 @@ export default function useScrollAfterExpand({
   segmentOptions,
   defaultWait = 300,
   segmentedTop = { top: 0, offsetTop: 96 },
-  getScrollElementScrollableHeight,
-  getScrollElement
+  getScrollElementScrollableHeight
 }: {
   form: any;
   activeKey: string[];
@@ -26,7 +25,6 @@ export default function useScrollAfterExpand({
     scrollHeight: number;
     scrollTop: number;
   };
-  getScrollElement?: () => HTMLElement | null;
   defaultWait?: number;
   segmentedTop: {
     top: number;

src/pages/playground/config/params-config.ts

@@ -125,6 +125,9 @@ export const ImageParamsConfig: ParamsSchema[] = [
       min: 1,
       max: 4
     },
+    formItemAttrs: {
+      hidden: true
+    },
     rules: [
       {
         required: false
@@ -164,6 +167,9 @@ export const ImageCountConfig: ParamsSchema[] = [
       min: 1,
       max: 4
     },
+    formItemAttrs: {
+      hidden: true
+    },
     rules: [
       {
         required: false
@@ -223,6 +229,9 @@ export const ImageEidtParamsConfig: ParamsSchema[] = [
       min: 1,
       max: 4
     },
+    formItemAttrs: {
+      hidden: true
+    },
     rules: [
       {
         required: false

src/pages/playground/style/ground-left.less

@@ -90,6 +90,7 @@
       left: calc(50% + 10px);
       transform: translateX(-50%);
       background-color: transparent;
+      cursor: ns-resize;
     }
   }
 }