chore: npu ux for add worker

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

@@ -25,7 +25,8 @@ interface CompatibilityAlertProps {
 
 const DivWrapper = styled.div`
   position: relative;
-  padding-inline: 8px;
+  padding-inline: 24px;
+  padding-block: 10px 0;
   &:hover {
     .close-wrapper {
       display: block;
@@ -36,11 +37,10 @@ const DivWrapper = styled.div`
 const CloseWrapper = styled.div`
   display: none;
   position: absolute;
-  top: 6px;
-  right: 12px;
+  top: 14px;
+  right: 28px;
   line-height: 1;
   cursor: pointer;
-  background-color: var(--ant-color-warning-bg);
 `;
 
 const MessageWrapper = styled.div`
@@ -104,7 +104,7 @@ const CompatibilityAlert: React.FC<CompatibilityAlertProps> = (props) => {
           type={type || 'warning'}
           icon={renderIcon}
         ></AlertBlockInfo>
-        {showClose && !['transition', 'success'].includes(type) && (
+        {showClose && !['transition'].includes(type) && (
           <CloseWrapper className="close-wrapper">
             <Button
               onClick={onClose}

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

@@ -325,6 +325,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
       </Form.Item>
       <Form.Item<FormData> name="description">
         <SealInput.TextArea
+          scaleSize={true}
           label={intl.formatMessage({
             id: 'common.table.description'
           })}

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

@@ -320,13 +320,7 @@ const AddModal: FC<AddModalProps> = (props) => {
         >
           <FormWrapper>
             <ColumnWrapper
-              paddingBottom={
-                warningStatus.show
-                  ? Array.isArray(warningStatus.message)
-                    ? 150
-                    : 125
-                  : 50
-              }
+              paddingBottom={warningStatus.show ? 170 : 50}
               footer={
                 <>
                   <CompatibilityAlert

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

@@ -16,6 +16,7 @@ const CompatibleTag = styled(Tag)`
   margin-right: 0;
   font-size: var(--font-size-base);
   background: transparent !important;
+  padding-inline: 0;
 `;
 
 const ClaimTag = styled(Tag)`

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

@@ -432,11 +432,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
       <ColumnWrapper
         maxHeight={550}
         paddingBottom={
-          warningStatus.show
-            ? Array.isArray(warningStatus.message)
-              ? 100
-              : 70
-            : 0
+          warningStatus.show ? (warningStatus.isDefault ? 50 : 100) : 0
         }
         footer={
           <>
@@ -584,6 +580,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
             </Form.Item>
             <Form.Item<FormData> name="description">
               <SealInput.TextArea
+                scaleSize={true}
                 label={intl.formatMessage({
                   id: 'common.table.description'
                 })}

src/pages/llmodels/style/hf-model-item.less

@@ -1,5 +1,5 @@
 .hf-model-item {
-  height: 80px;
+  min-height: 82px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;

src/pages/playground/components/view-common-code.tsx

@@ -32,7 +32,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
   const { title, open, onCancel, viewCodeContent } = props || {};
 
   const intl = useIntl();
-  const [lang, setLang] = useState(langMap.shell);
+  const [lang, setLang] = useState<string>(langMap.shell);
 
   const codeValue = useMemo(() => {
     if (lang === langMap.shell) {
@@ -47,8 +47,8 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
     return '';
   }, [lang, viewCodeContent]);
 
-  const handleOnChangeLang = (value: string) => {
-    setLang(value);
+  const handleOnChangeLang = (value: string | number) => {
+    setLang(value as string);
   };
 
   const handleClose = () => {

src/pages/resources/components/container-install.tsx

@@ -1,5 +1,6 @@
 import { GPUStackVersionAtom } from '@/atoms/user';
 import { getAtomStorage } from '@/atoms/utils';
+import EditorWrap from '@/components/editor-wrap';
 import HighlightCode from '@/components/highlight-code';
 import { WarningOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
@@ -12,11 +13,17 @@ type ViewModalProps = {
   token: string;
 };
 
+const npuOptions = [
+  { label: '910B', value: 'npu' },
+  { label: '310P', value: 'npu310p' }
+];
+
 const AddWorker: React.FC<ViewModalProps> = (props) => {
   const intl = useIntl();
 
   const origin = window.location.origin;
   const [activeKey, setActiveKey] = React.useState('cuda');
+  const [npuKey, setNpuKey] = React.useState('npu');
   const versionInfo = getAtomStorage(GPUStackVersionAtom);
 
   const code = React.useMemo(() => {
@@ -25,7 +32,11 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
       version = 'main';
     }
 
-    const commandCode = addWorkerGuide[activeKey];
+    let commandCode = addWorkerGuide[activeKey];
+
+    if (npuKey === 'npu310p') {
+      commandCode = addWorkerGuide[npuKey];
+    }
 
     if (activeKey === 'cuda') {
       return commandCode?.registerWorker({
@@ -41,20 +52,15 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
       token: '${token}',
       workerip: '${workerip}'
     });
-  }, [versionInfo, activeKey, props.token]);
+  }, [versionInfo, activeKey, props.token, npuKey]);
+
+  const handleOnChange = (value: string | number) => {
+    setNpuKey(value as string);
+  };
 
   return (
     <div className="container-install">
       <ul className="notes">
-        <li>
-          <span>
-            {intl.formatMessage({ id: 'resources.worker.container.supported' })}
-          </span>
-          <WarningOutlined
-            style={{ color: 'var(--ant-color-warning)' }}
-            className="font-size-14 m-l-5"
-          />
-        </li>
         <li>
           {intl.formatMessage(
             { id: 'resources.worker.current.version' },
@@ -125,7 +131,31 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
           }}
         ></div>
       )}
-      <HighlightCode theme="dark" code={code} lang="bash"></HighlightCode>
+      {activeKey === 'npu' ? (
+        <EditorWrap
+          headerHeight={32}
+          copyText={code}
+          langOptions={npuOptions}
+          defaultValue="npu"
+          showHeader={true}
+          onChangeLang={handleOnChange}
+          styles={{
+            wrapper: {
+              backgroundColor: 'var(--color-editor-dark)'
+            }
+          }}
+        >
+          <HighlightCode
+            theme="dark"
+            code={code}
+            lang="bash"
+            copyable={false}
+            height={160}
+          ></HighlightCode>
+        </EditorWrap>
+      ) : (
+        <HighlightCode theme="dark" code={code} lang="bash"></HighlightCode>
+      )}
       <h3 className="m-b-0 m-t-10 font-size-14 font-600">
         3. {intl.formatMessage({ id: 'resources.worker.add.step3' })}
       </h3>