style: change select to radio group

src/components/label-selector/wrapper.tsx

@@ -6,7 +6,7 @@ const Wrapper: React.FC<{
   label?: string;
   description?: React.ReactNode;
   children: React.ReactNode;
-}> = ({ children, label, description }) => {
+}> = ({ children, label, description, ...rest }) => {
   return (
     <div className={styles['wrapper']}>
       {label && (
@@ -14,7 +14,9 @@ const Wrapper: React.FC<{
           <LabelInfo label={label} description={description}></LabelInfo>
         </span>
       )}
-      {children}
+      {React.isValidElement(children)
+        ? React.cloneElement(children, { ...rest })
+        : children}
     </div>
   );
 };

src/components/logs-viewer/index.tsx

@@ -77,13 +77,6 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
     fitAddonRef.current = new FitAddon();
     termRef.current.loadAddon(fitAddonRef.current);
     termRef.current.open(termwrapRef.current);
-
-    // add event
-    // termRef.current.onLineFeed((e: any) => {
-    //   if (cacheDataRef.current) {
-    //     throttleScroll();
-    //   }
-    // });
   };
 
   const handleResize = _.throttle(() => {

src/components/markdown-viewer/index.tsx

@@ -51,6 +51,19 @@ const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
     return pattern.test(url);
   }, []);
 
+  const generateImgSrc = useCallback(
+    (src: string | null) => {
+      if (!src) {
+        return '';
+      }
+      if (generateImgLink) {
+        return isValidURL(src) ? src : generateImgLink(src);
+      }
+      return src;
+    },
+    [generateImgLink]
+  );
+
   const renderItem = useCallback(
     (token: any, render: any) => {
       if (!reDefineTypes.includes(token.type)) {
@@ -97,10 +110,7 @@ const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
       }
 
       if (token.type === 'image') {
-        let href = token.href;
+        let href = generateImgSrc(token.href);
-        if (!isValidURL(token.href)) {
-          href = generateImgLink ? generateImgLink(token.href) : token.href;
-        }
         htmlstr = (
           <Image
             src={href}
@@ -149,7 +159,7 @@ const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
 
       return htmlstr;
     },
-    [generateImgLink]
+    [generateImgSrc]
   );
   const renderTokens = (tokens: TokensList): any => {
     return tokens?.map((token: any, index: number) => {
@@ -164,11 +174,9 @@ const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
     const imgs = document.querySelectorAll('.markdown-viewer img');
     imgs.forEach((img) => {
       const src = img.getAttribute('src');
-      if (src && !isValidURL(src)) {
+      img.setAttribute('src', generateImgSrc(src));
-        img.setAttribute('src', generateImgLink ? generateImgLink(src) : src);
-      }
     });
-  }, [content, generateImgLink]);
+  }, [content, generateImgSrc]);
 
   return (
     <div

src/components/seal-form/field-wrapper.tsx

@@ -9,7 +9,7 @@ interface WrapperProps {
   className?: string;
   disabled?: boolean;
   required?: boolean;
-  description?: string;
+  description?: React.ReactNode;
   variant?: string;
   style?: React.CSSProperties;
   onClick?: () => void;

src/global.less

@@ -444,6 +444,16 @@ body {
   }
 
   &.user-menu-collapsed {
+    .ant-menu-submenu-title {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: var(--color-text-1) !important;
+      padding-inline: unset !important;
+      width: 100%;
+      margin-inline: 0 !important;
+    }
+
     .user-avatar.ant-menu-submenu {
       .ant-menu-submenu-title {
         padding: 0 !important;

src/layouts/index.tsx

@@ -225,6 +225,9 @@ export default (props: any) => {
         layout="side"
         disableMobile={true}
         siderWidth={220}
+        onCollapse={(collapsed) => {
+          setCollapsed(collapsed);
+        }}
         onMenuHeaderClick={(e) => {
           e.stopPropagation();
           e.preventDefault();

src/layouts/rightRender.tsx

@@ -99,11 +99,6 @@ export const getRightRenderContent = (opts: {
       icon: <InfoCircleOutlined />,
       label: intl.formatMessage({ id: 'common.button.version' })
     }
-    // {
-    //   key: 'shortcuts',
-    //   icon: <IconFont type="icon-keyboard"></IconFont>,
-    //   label: intl.formatMessage({ id: 'common.button.shortcut' })
-    // }
   ];
 
   const helpMenu = {
@@ -113,7 +108,7 @@ export const getRightRenderContent = (opts: {
       : 'user-menu-container',
     mode: 'vertical',
     expandIcon: false,
-    inlineCollapsed: collapsed,
+    // inlineCollapsed: collapsed,
     triggerSubMenuAction: 'hover',
     items: [
       {
@@ -163,7 +158,7 @@ export const getRightRenderContent = (opts: {
       : 'user-menu-container',
     mode: 'vertical',
     expandIcon: false,
-    inlineCollapsed: collapsed,
+    // inlineCollapsed: collapsed,
     triggerSubMenuAction: 'hover',
     items: [
       {
@@ -196,7 +191,7 @@ export const getRightRenderContent = (opts: {
       : 'user-menu-container',
     mode: 'vertical',
     expandIcon: false,
-    inlineCollapsed: collapsed,
+    // inlineCollapsed: collapsed,
     triggerSubMenuAction: 'hover',
     items: [
       {
@@ -263,19 +258,19 @@ export const getRightRenderContent = (opts: {
       <Menu
         {...helpMenu}
         style={{
-          width: collapsed ? 64 : `calc(${siderWidth}px - 16px)`
+          width: collapsed ? 40 : `calc(${siderWidth}px - 16px)`
         }}
       ></Menu>
       <Menu
         {...langMenu}
         style={{
-          width: collapsed ? 64 : `calc(${siderWidth}px - 16px)`
+          width: collapsed ? 40 : `calc(${siderWidth}px - 16px)`
         }}
       ></Menu>
       <Menu
         {...userMenu}
         style={{
-          width: collapsed ? 64 : `calc(${siderWidth}px - 16px)`,
+          width: collapsed ? 40 : `calc(${siderWidth}px - 16px)`,
           marginTop: 20
         }}
       ></Menu>

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

@@ -1,22 +1,25 @@
 import LabelSelector from '@/components/label-selector';
+import FieldWrapper from '@/components/label-selector/wrapper';
 import ListInput from '@/components/list-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import { InfoCircleOutlined, RightOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
+
 import {
   Checkbox,
   Collapse,
   Form,
   FormInstance,
+  Radio,
   Select,
   Tooltip,
   Typography
 } from 'antd';
 import _ from 'lodash';
 import React, { useCallback, useMemo } from 'react';
-import { backendOptionsMap, placementStrategyOptions } from '../config';
+import { backendOptionsMap } from '../config';
 import llamaConfig from '../config/llama-config';
 import { FormData } from '../config/types';
 import vllmConfig from '../config/vllm-config';
@@ -116,7 +119,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
     const children = (
       <>
         <Form.Item name="scheduleType">
-          <SealSelect
+          {/* <SealSelect
             label={intl.formatMessage({ id: 'models.form.scheduletype' })}
             description={renderSelectTips(scheduleTypeTips)}
             options={[
@@ -133,18 +136,46 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
                 value: 'manual'
               }
             ]}
-          ></SealSelect>
+          ></SealSelect> */}
+          <FieldWrapper
+            label={intl.formatMessage({ id: 'models.form.scheduletype' })}
+            description={renderSelectTips(scheduleTypeTips)}
+          >
+            <Radio.Group style={{ marginTop: 5 }}>
+              <Radio value="auto">
+                {intl.formatMessage({
+                  id: 'models.form.scheduletype.auto'
+                })}
+              </Radio>
+              <Radio value="manual">
+                {intl.formatMessage({
+                  id: 'models.form.scheduletype.manual'
+                })}
+              </Radio>
+            </Radio.Group>
+          </FieldWrapper>
         </Form.Item>
         {scheduleType === 'auto' && (
           <>
             <Form.Item<FormData> name="placement_strategy">
-              <SealSelect
+              {/* <SealSelect
                 label={intl.formatMessage({
                   id: 'resources.form.placementStrategy'
                 })}
                 options={placementStrategyOptions}
                 description={renderSelectTips(placementStrategyTips)}
-              ></SealSelect>
+              ></SealSelect> */}
+              <FieldWrapper
+                label={intl.formatMessage({
+                  id: 'resources.form.placementStrategy'
+                })}
+                description={renderSelectTips(placementStrategyTips)}
+              >
+                <Radio.Group style={{ marginTop: 5 }}>
+                  <Radio value="spread">Spread</Radio>
+                  <Radio value="binpack">Binpack</Radio>
+                </Radio.Group>
+              </FieldWrapper>
             </Form.Item>
             <Form.Item<FormData>
               name="worker_selector"
@@ -219,7 +250,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
           </Form.Item>
         )}
         <Form.Item name="backend">
-          <SealSelect
+          {/* <SealSelect
             label={intl.formatMessage({ id: 'models.form.backend' })}
             options={[
               {
@@ -234,7 +265,25 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
               }
             ]}
             disabled={action === PageAction.EDIT}
-          ></SealSelect>
+          ></SealSelect> */}
+          <FieldWrapper
+            label={intl.formatMessage({ id: 'models.form.backend' })}
+          >
+            <Radio.Group>
+              <Radio
+                value={backendOptionsMap.llamaBox}
+                disabled={!isGGUF || action === PageAction.EDIT}
+              >
+                llama-box(llama.cpp)
+              </Radio>
+              <Radio
+                value={backendOptionsMap.vllm}
+                disabled={isGGUF || action === PageAction.EDIT}
+              >
+                vLLM
+              </Radio>
+            </Radio.Group>
+          </FieldWrapper>
         </Form.Item>
         <Form.Item<FormData> name="backend_parameters">
           <ListInput

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

@@ -72,33 +72,21 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
     setGpuOptions(list);
   };
 
-  const initFormValue = () => {
+  const initFormValue = useMemo(() => {
-    if (action === PageAction.CREATE && open) {
+    const result = setSourceRepoConfigValue(
-      form.setFieldsValue({
+      props.data?.source || '',
-        source: modelSourceMap.huggingface_value,
+      props.data
-        replicas: 1
+    );
-      });
-    }
-    if (action === PageAction.EDIT && open) {
-      const result = setSourceRepoConfigValue(
-        props.data?.source || '',
-        props.data
-      );
 
-      form.setFieldsValue({
+    return {
-        ...result.values,
+      ...result.values,
-        ..._.omit(props.data, result.omits),
+      ..._.omit(props.data, result.omits),
-        scheduleType: props.data?.gpu_selector ? 'manual' : 'auto',
+      scheduleType: props.data?.gpu_selector ? 'manual' : 'auto',
-        gpu_selector: props.data?.gpu_selector
+      gpu_selector: props.data?.gpu_selector
-          ? `${props.data?.gpu_selector.worker_name}-${props.data?.gpu_selector.gpu_name}-${props.data?.gpu_selector.gpu_index}`
+        ? `${props.data?.gpu_selector.worker_name}-${props.data?.gpu_selector.gpu_name}-${props.data?.gpu_selector.gpu_index}`
-          : null
+        : null
-      });
+    };
-    }
+  }, [props.data]);
-  };
-
-  useEffect(() => {
-    initFormValue();
-  }, [open]);
 
   useEffect(() => {
     setIsGGUF(props.data?.backend === backendOptionsMap.llamaBox);
@@ -306,6 +294,9 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
             padding: 'var(--ant-modal-content-padding)',
             paddingBlock: 0
           }}
+          initialValues={{
+            ...initFormValue
+          }}
         >
           <Form.Item<FormData>
             name="name"

src/pages/llmodels/components/view-logs-modal.tsx

@@ -41,7 +41,10 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
     <Modal
       title={
         <span className="flex flex-center">
-          <span> {intl.formatMessage({ id: 'common.button.viewlog' })}</span>
+          <span style={{ fontWeight: 'var(--font-weight-bold)' }}>
+            {' '}
+            {intl.formatMessage({ id: 'common.button.viewlog' })}
+          </span>
         </span>
       }
       open={open}

src/pages/playground/components/multiple-chat/content-item.tsx

@@ -119,7 +119,6 @@ const ContentItem: React.FC<MessageItemProps> = ({
 
   const handleUpdateImgList = useCallback(
     (list: { uid: number | string; dataUrl: string }[]) => {
-      console.log('list===========', data.imgs, list);
       updateMessage?.({
         role: data.role,
         content: data.content,

src/pages/playground/style/content-item.less

@@ -12,7 +12,6 @@
 
   .role {
     position: relative;
-    cursor: pointer;
     padding: 0 4px;
     border-radius: var(--border-radius-mini);
   }