fix(style): model status

2024-07-08 19:47:47 +08:00
parent 9ad9539b51
commit 734368dd49
25 changed files with 109 additions and 83 deletions
@@ -22,6 +22,9 @@ export default {
    Progress: {
      lineBorderRadius: 4
    },
+    Select: {
+      itemSelectedBg: 'rgba(0,0,0,0.06)'
+    },
    Slider: {
      handleSize: 8,
      handleSizeHover: 8,
@@ -0,0 +1,7 @@
+import { createFromIconfontCN } from '@ant-design/icons';
+
+const IconFont = createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_clxjnjvlf6m.js'
+});
+
+export default IconFont;
@@ -12,7 +12,7 @@
  overflow: hidden;

  &.download {
-    background-color: var(--ant-blue-2);
+    border: 1px solid var(--ant-color-border) !important;
  }

  .download {
@@ -24,12 +24,12 @@
    top: 0;
    bottom: 0;
    height: 100%;
-    background-color: var(--ant-color-primary);
+    background-color: rgba(0, 0, 0, 15%);
  }

  .progress {
    position: relative;
    z-index: 10;
-    color: var(--color-white-1);
+    color: var(--ant-color-text);
  }
 }
@@ -51,17 +51,10 @@ const StatusTag: React.FC<StatusTagProps> = ({ statusValue, download }) => {
      className={classNames('status-tag', {
        download: download?.percent
      })}
-      style={
-        download
-          ? {
-              color: StatusColorMap['success']['text'],
-              border: `1px solid ${StatusColorMap['success']['text']}`
-            }
-          : {
-              color: statusColor?.text,
-              border: `1px solid ${statusColor?.text}`
-            }
-      }
+      style={{
+        color: statusColor?.text,
+        border: `1px solid ${statusColor?.text}`
+      }}
    >
      {renderContent()}
    </span>
@@ -16,7 +16,6 @@

    .transition-content-wrapper {
      background-color: var(--color-fill-1);
-      padding: 8px;
    }
  }

@@ -73,7 +73,8 @@ const TransitionWrapper: React.FC<TransitionWrapProps> = forwardRef(
          className="transition-content-wrapper"
          style={{
            minHeight: isOpen ? height : 0,
-            height: isOpen ? 'auto' : 0
+            height: isOpen ? 'auto' : 0,
+            padding: isOpen ? '8px' : '0 8px'
          }}
          ref={contentRef}
        >
@@ -25,7 +25,7 @@ export const StatusColorMap: Record<StatusType, { text: string; bg: string }> =
      bg: `var(--ant-green-1)`
    },
    inactive: {
-      text: `var(--ant-color-border)`,
+      text: `var(--ant-color-text-secondary)`,
      bg: `var(--ant-color-fill)`
    }
  };
@@ -117,7 +117,8 @@ export function getRightRenderContent(opts: {
            <Avatar
              size={28}
              style={{
-                color: 'var(--ant-color-text)'
+                color: 'var(--ant-color-text)',
+                fontSize: 16
              }}
            >
              {_.toUpper(opts.initialState?.currentUser?.username?.charAt(0))}
@@ -1,5 +1,5 @@
 export default {
-  'playground.system.tips': 'Enter system message here...',
+  'playground.system.tips': 'Enter system message here',
  'playground.title': 'Playground',
  'playground.system': 'System',
  'playground.user': 'User',
@@ -1,5 +1,5 @@
 export default {
-  'playground.system.tips': '在这里输入系统消息...',
+  'playground.system.tips': '在这里输入系统消息',
  'playground.title': '试验场',
  'playground.system': '系统',
  'playground.user': '用户',
@@ -89,6 +89,7 @@ const AddModal: React.FC<AddModalProps> = ({
    <Modal
      title={title}
      open={open}
+      centered={true}
      onOk={handleSumit}
      onCancel={onCancel}
      afterOpenChange={handleAfterOpenChange}
@@ -259,6 +259,14 @@ const Models: React.FC = () => {
              return dayjs(text).format('YYYY-MM-DD HH:mm:ss');
            }}
          />
+          <Column
+            title={intl.formatMessage({ id: 'common.table.description' })}
+            dataIndex="description"
+            key="description"
+            ellipsis={{
+              showTitle: true
+            }}
+          />
          <Column
            title={intl.formatMessage({ id: 'common.table.createTime' })}
            dataIndex="created_at"
@@ -276,6 +276,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
    <Modal
      title={title}
      open={open}
+      centered={true}
      onOk={handleSumit}
      onCancel={onCancel}
      destroyOnClose={true}
@@ -7,7 +7,7 @@ import { Col, Row, Space } from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
 import React from 'react';
-import { status } from '../config';
+import { InstanceStatusMap, status } from '../config';
 import { ModelInstanceListItem } from '../config/types';

 interface InstanceItemProps {
@@ -33,6 +33,15 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
      icon: <DeleteOutlined />
    }
  ];
+  const testStatus = {
+    state: InstanceStatusMap.Scheduled
+  };
+  const getWorkerIp = (item: ModelInstanceListItem) => {
+    if (item.worker_ip) {
+      return item.port ? `${item.worker_ip}:${item.port}` : item.worker_ip;
+    }
+    return '-';
+  };
  return (
    <Space size={16} direction="vertical" style={{ width: '100%' }}>
      {_.map(list, (item: ModelInstanceListItem, index: number) => {
@@ -40,18 +49,11 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
          <div
            key={`${item.id}`}
            style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}
-            className={
-              item.download_progress !== 100 && item.state !== 'Running'
-                ? 'skeleton-loading'
-                : ''
-            }
          >
            <RowChildren key={`${item.id}_row`}>
              <Row style={{ width: '100%' }} align="middle">
                <Col span={4}>{item.name}</Col>
-                <Col span={3}>
-                  {item.worker_ip ? `${item.worker_ip}:${item.port}` : '-'}
-                </Col>
+                <Col span={3}>{getWorkerIp(item)}</Col>
                <Col span={4}>
                  <span>
                    {item.source === 'huggingface'
@@ -68,7 +70,7 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
                    {item.state && (
                      <StatusTag
                        download={
-                          item.state !== 'Running'
+                          item.state === InstanceStatusMap.Downloading
                            ? { percent: item.download_progress }
                            : undefined
                        }
@@ -21,13 +21,13 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
    <Modal
      title={intl.formatMessage({ id: 'common.button.viewlog' })}
      open={open}
+      centered={true}
      onCancel={onCancel}
      destroyOnClose={true}
      closeIcon={true}
      maskClosable={false}
      keyboard={false}
-      width={'max(50%, 600px)'}
-      style={{ top: '80px' }}
+      width={600}
      footer={null}
    >
      <LogsViewer
@@ -18,9 +18,24 @@ export const modelSourceMap: Record<string, string> = {
  s3: 'S3'
 };

+export const InstanceStatusMap = {
+  Initializing: 'Initializing',
+  Pending: 'Pending',
+  Running: 'Running',
+  Scheduled: 'Scheduled',
+  Error: 'Error',
+  Downloading: 'Downloading',
+  Unknown: 'Unknown'
+};
+
 export const status: any = {
-  Running: StatusMaps.success,
-  Pending: StatusMaps.transitioning
+  [InstanceStatusMap.Running]: StatusMaps.success,
+  [InstanceStatusMap.Pending]: StatusMaps.transitioning,
+  [InstanceStatusMap.Initializing]: StatusMaps.transitioning,
+  [InstanceStatusMap.Scheduled]: StatusMaps.success,
+  [InstanceStatusMap.Error]: StatusMaps.error,
+  [InstanceStatusMap.Downloading]: StatusMaps.transitioning,
+  [InstanceStatusMap.Unknown]: StatusMaps.inactive
 };

 export const ActionList = [
@@ -40,12 +55,3 @@ export const ActionList = [
    icon: EditOutlined
  }
 ];
-
-export const InstanceStatusMap = {
-  Initializing: 'Initializing',
-  Pending: 'Pending',
-  Running: 'Running',
-  Scheduled: 'Scheduled',
-  Error: 'Error',
-  Downloading: 'Downloading'
-};
@@ -1,9 +1,9 @@
+import IconFont from '@/components/icon-font';
 import HotKeys from '@/config/hotkeys';
 import {
  CodeOutlined,
  DeleteOutlined,
  EnterOutlined,
-  MacCommandOutlined,
  PlusOutlined
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
@@ -74,7 +74,7 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
            <Button disabled={disabled} type="primary" onClick={onSubmit}>
              {intl.formatMessage({ id: 'common.button.submit' })}
              <span className="m-l-5 opct-7">
-                <MacCommandOutlined /> + <EnterOutlined />
+                <IconFont type="icon-command"></IconFont> + <EnterOutlined />
              </span>
            </Button>
          </Space>
@@ -85,6 +85,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
        uid: messageId.current
      }
    ]);
+    console.log('messageList=====', messageList, messageId.current, chunk);
    return false;
  };
  const submitMessage = async () => {
@@ -115,7 +116,6 @@ const MessageList: React.FC<MessageProps> = (props) => {
        return;
      }
      const { reader, decoder } = result;
-
      await readStreamData(reader, decoder, (chunk: any) => {
        joinMessage(chunk);
      });
@@ -207,7 +207,10 @@ const MessageList: React.FC<MessageProps> = (props) => {
              autoSize={true}
              onFocus={handleFocus}
              onBlur={handleBlur}
-              placeholder={intl.formatMessage({ id: 'playground.system.tips' })}
+              style={{ minHeight: 40 }}
+              placeholder={intl.formatMessage({
+                id: 'playground.system.tips'
+              })}
              onChange={handleSystemMessageChange}
            ></Input.TextArea>
          </TransitionWrapper>
@@ -31,18 +31,6 @@ const MessageItem: React.FC<{
  const [currentIsFocus, setCurrentIsFocus] = useState(isFocus);
  const inputRef = useRef<any>(null);

-  useHotkeys(
-    HotKeys.SUBMIT,
-    () => {
-      onSubmit();
-    },
-    {
-      enabled: currentIsFocus && !loading,
-      enableOnFormTags: currentIsFocus && !loading,
-      preventDefault: true
-    }
-  );
-
  useEffect(() => {
    if (inputRef.current && isFocus) {
      inputRef.current.focus();
@@ -110,6 +98,20 @@ const MessageItem: React.FC<{
  const handleDelete = () => {
    onDelete();
  };
+
+  useHotkeys(
+    HotKeys.SUBMIT,
+    () => {
+      inputRef.current.blur();
+      onSubmit();
+    },
+    {
+      enabled: currentIsFocus,
+      enableOnFormTags: currentIsFocus,
+      preventDefault: true
+    }
+  );
+
  return (
    <div className="message-item">
      <div className="role-type">
@@ -124,6 +126,7 @@ const MessageItem: React.FC<{
          value={messageContent}
          autoSize={true}
          variant="filled"
+          readOnly={loading}
          onChange={handleMessageChange}
          onFocus={handleFocus}
          onBlur={handleBlur}
@@ -116,6 +116,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
    },
    formatOnType: true,
    formatOnPaste: true,
+    fontWeight: '700',
    scrollbar: {
      verticalSliderSize: 8
    }
@@ -130,13 +131,13 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
      <Modal
        title={title}
        open={open}
+        centered={true}
        onCancel={handleClose}
        destroyOnClose={true}
        closeIcon={true}
        maskClosable={false}
        keyboard={false}
-        width={'max(50%, 600px)'}
-        style={{ top: '80px' }}
+        width={660}
        footer={null}
      >
        <div style={{ marginBottom: '10px' }}>
@@ -151,7 +152,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
            onChangeLang={handleOnChangeLang}
          >
            <Editor
-              height="500px"
+              height="min(500px, 90vh)"
              theme="vs-dark"
              className="monaco-editor"
              defaultLanguage="shell"
@@ -50,26 +50,6 @@ const Profile: React.FC = () => {
          onFinish={handleOnFinish}
          onFinishFailed={handleOnFinishFailed}
        >
-          {/* <Form.Item<ProfileProps>
-            name="username"
-            rules={[
-              {
-                required: true,
-                message: intl.formatMessage(
-                  { id: 'common.form.rule.input' },
-                  {
-                    name: intl.formatMessage({ id: 'common.form.username' })
-                  }
-                )
-              }
-            ]}
-          >
-            <SealInput.Input
-              label={intl.formatMessage({ id: 'common.form.username' })}
-              required
-              style={{ width: INPUT_WIDTH.default }}
-            ></SealInput.Input>
-          </Form.Item> */}
          <Form.Item<ProfileProps>
            name="current_password"
            rules={[
@@ -135,6 +115,7 @@ const Profile: React.FC = () => {
            ]}
          >
            <SealInput.Password
+              required={true}
              label={intl.formatMessage({ id: 'users.password.confirm' })}
            />
          </Form.Item>
@@ -14,6 +14,7 @@ const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
      destroyOnClose
      title="新建"
      width={420}
+      centered={true}
      open={modalVisible}
      onCancel={() => onCancel()}
      footer={null}
@@ -54,6 +54,7 @@ const AddModal: React.FC<AddModalProps> = ({
    <Modal
      title={title}
      open={open}
+      centered={true}
      onOk={handleSumit}
      onCancel={onCancel}
      destroyOnClose={true}
@@ -62,7 +62,7 @@ export const readStreamData = async (
  callback: (data: any) => void
 ) => {
  const { done, value } = await reader.read();
-
+  console.log('done====', done, value);
  if (done) {
    return;
  }
@@ -141,3 +141,17 @@ export const generateFluctuatingData = ({

  return y;
 };
+
+export const platformCall = () => {
+  const platform = navigator.userAgent;
+  const isMac = () => {
+    return platform.indexOf('Mac') !== -1;
+  };
+  const isWin = () => {
+    return platform.indexOf('Win') !== -1;
+  };
+  return {
+    isMac: isMac(),
+    isWin: isWin()
+  };
+};