style: help menu

2024-07-10 15:41:05 +08:00
parent f103da4178
commit 0ed7568859
25 changed files with 226 additions and 678 deletions
@@ -70,7 +70,7 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
            <RowChildren key={`${item.id}_row`}>
              <Row style={{ width: '100%' }} align="middle">
                <Col span={4}>{item.name}</Col>
-                <Col span={3}>{getWorkerIp(item)}</Col>
+                <Col span={3}>{item.worker_name || '-'}</Col>
                <Col span={4}>
                  <span>
                    {item.source === 'huggingface'
@@ -37,6 +37,7 @@ export interface ModelInstanceListItem {
  download_progress: number;
  model_id: number;
  model_name: string;
+  worker_name: string;
  id: number;
  created_at: string;
  updated_at: string;
@@ -60,7 +60,7 @@ const renderWelCome = (intl: any) => {
 const LoginForm = () => {
  const [userInfo, setUserInfo] = useAtom(userAtom);
  const [initialPassword, setInitialPassword] = useAtom(initialPasswordAtom);
-  const { initialState, setInitialState } = useModel('@@initialState');
+  const { initialState, setInitialState } = useModel('@@initialState') || {};
  const intl = useIntl();
  const [form] = Form.useForm();

@@ -8,7 +8,7 @@ import {
  PlusOutlined
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Col, Dropdown, Row, Space } from 'antd';
+import { Button, Col, Row, Space } from 'antd';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { Roles } from '../config';
 import '../style/chat-footer.less';
@@ -22,6 +22,7 @@ interface ChatFooterProps {
  disabled?: boolean;
  feedback?: React.ReactNode;
  hasTokenResult?: boolean;
+  selectedModel?: string;
 }

 const ChatFooter: React.FC<ChatFooterProps> = (props) => {
@@ -35,7 +36,8 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
    onView,
    feedback,
    disabled,
-    hasTokenResult
+    hasTokenResult,
+    selectedModel
  } = props;
  useHotkeys(
    HotKeys.SUBMIT.join(','),
@@ -58,15 +60,25 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
      <Row style={{ width: '100%' }}>
        <Col span={hasTokenResult ? 8 : 12}>
          <Space size={20}>
-            <Dropdown
+            {/* <Dropdown
              menu={{ items: MessageRoles, onClick: onNewMessage }}
              placement="topLeft"
            >
-              <Button disabled={disabled} icon={<PlusOutlined />}>
+              <Button
+                disabled={disabled}
+                icon={<PlusOutlined />}
+                onClick={onNewMessage}
+              >
                {intl.formatMessage({ id: 'playground.newMessage' })}
              </Button>
-            </Dropdown>
-
+            </Dropdown> */}
+            <Button
+              disabled={disabled}
+              icon={<PlusOutlined />}
+              onClick={onNewMessage}
+            >
+              {intl.formatMessage({ id: 'playground.newMessage' })}
+            </Button>
            <Button
              icon={<DeleteOutlined></DeleteOutlined>}
              onClick={onClear}
@@ -87,7 +99,11 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
              {intl.formatMessage({ id: 'playground.viewcode' })}
            </Button>
            {!disabled ? (
-              <Button type="primary" disabled={disabled} onClick={onSubmit}>
+              <Button
+                type="primary"
+                disabled={disabled || !selectedModel}
+                onClick={onSubmit}
+              >
                {intl.formatMessage({ id: 'common.button.submit' })}
                <span className="m-l-5 opct-7">
                  {platform.isMac ? (
@@ -56,11 +56,10 @@ const MessageList: React.FC<MessageProps> = (props) => {
  const setMessageId = () => {
    messageId.current = messageId.current + 1;
  };
-  const handleNewMessage = (role: any) => {
+  const handleNewMessage = (role?: any) => {
    messageList.push({
-      // role:
-      //   _.last(messageList)?.role === Roles.User ? Roles.Assistant : Roles.User,
-      role: role.key,
+      role:
+        _.last(messageList)?.role === Roles.User ? Roles.Assistant : Roles.User,
      content: '',
      uid: messageId.current + 1
    });
@@ -142,11 +141,14 @@ const MessageList: React.FC<MessageProps> = (props) => {
    if (!messageList.length) {
      return;
    }
-    const headItem = _.cloneDeep(_.get(messageList, '0'));
-    headItem.content = '';
-    headItem.role = Roles.User;
-    headItem.uid = messageId.current + 1;
-    setMessageList(headItem ? [headItem] : []);
+    setMessageId();
+    setMessageList([
+      {
+        role: Roles.User,
+        content: '',
+        uid: messageId.current
+      }
+    ]);
  };

  const handleView = () => {
@@ -261,6 +263,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
          onView={handleView}
          onStop={handleStopConversation}
          disabled={loading}
+          selectedModel={parameters.model}
          hasTokenResult={!!tokenResult}
          feedback={<ReferenceParams usage={tokenResult}></ReferenceParams>}
        ></ChatFooter>
@@ -2,8 +2,9 @@ import FieldWrapper from '@/components/seal-form/field-wrapper';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import { INPUT_WIDTH } from '@/constants';
+import { InfoCircleOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Form, InputNumber, Slider } from 'antd';
+import { Form, InputNumber, Slider, Tooltip } from 'antd';
 import _ from 'lodash';
 import { useEffect, useState } from 'react';
 import { queryModelsList } from '../apis';
@@ -100,13 +101,27 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
    form.setFieldsValue(initialValues);
    setParams(initialValues);
  };
-  const renderLabel = (args: { field: string; label: string }) => {
+  const renderLabel = (args: {
+    field: string;
+    label: string;
+    description: string;
+  }) => {
    return (
      <span
        className={CustomLabelStyles.label}
        style={{ width: INPUT_WIDTH.mini }}
      >
-        <span className="text">{args.label}</span>
+        <span className="text">
+          <span> {args.label}</span>
+          {args.description && (
+            <span className="m-l-5">
+              <Tooltip title={args.description}>
+                <InfoCircleOutlined />
+              </Tooltip>
+            </span>
+          )}
+        </span>
+
        <InputNumber
          className="label-val"
          variant="outlined"
@@ -150,7 +165,10 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
          <FieldWrapper
            label={renderLabel({
              field: 'temperature',
-              label: 'Temperature'
+              label: 'Temperature',
+              description: intl.formatMessage({
+                id: 'playground.params.temperature.tips'
+              })
            })}
            style={{ paddingInline: 0 }}
            variant="borderless"
@@ -173,7 +191,10 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
          <FieldWrapper
            label={renderLabel({
              field: 'max_tokens',
-              label: 'Max Tokens'
+              label: 'Max Tokens',
+              description: intl.formatMessage({
+                id: 'playground.params.maxtokens.tips'
+              })
            })}
            style={{ paddingInline: 0 }}
            variant="borderless"
@@ -196,7 +217,10 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
          <FieldWrapper
            label={renderLabel({
              field: 'top_p',
-              label: 'Top P'
+              label: 'Top P',
+              description: intl.formatMessage({
+                id: 'playground.params.topp.tips'
+              })
            })}
            style={{ paddingInline: 0 }}
            variant="borderless"
@@ -219,7 +243,10 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
          <FieldWrapper
            label={renderLabel({
              field: 'seed',
-              label: 'Seed'
+              label: 'Seed',
+              description: intl.formatMessage({
+                id: 'playground.params.seed.tips'
+              })
            })}
            style={{ paddingInline: 0 }}
            variant="borderless"
@@ -240,6 +267,9 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
        >
          <SealInput.Input
            label="Stop Sequence"
+            description={intl.formatMessage({
+              id: 'playground.params.stop.tips'
+            })}
            style={{ width: INPUT_WIDTH.mini }}
          ></SealInput.Input>
        </Form.Item>
@@ -1,27 +0,0 @@
-import { Modal } from 'antd';
-import React, { PropsWithChildren } from 'react';
-
-interface CreateFormProps {
-  modalVisible: boolean;
-  onCancel: () => void;
-}
-
-const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
-  const { modalVisible, onCancel } = props;
-
-  return (
-    <Modal
-      destroyOnClose
-      title="新建"
-      width={420}
-      centered={true}
-      open={modalVisible}
-      onCancel={() => onCancel()}
-      footer={null}
-    >
-      {props.children}
-    </Modal>
-  );
-};
-
-export default CreateForm;
@@ -1,138 +0,0 @@
-import {
-  ProFormDateTimePicker,
-  ProFormRadio,
-  ProFormSelect,
-  ProFormText,
-  ProFormTextArea,
-  StepsForm
-} from '@ant-design/pro-components';
-import { Modal } from 'antd';
-import React from 'react';
-
-export interface FormValueType extends Partial<API.UserInfo> {
-  target?: string;
-  template?: string;
-  type?: string;
-  time?: string;
-  frequency?: string;
-}
-
-export interface UpdateFormProps {
-  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
-  onSubmit: (values: FormValueType) => Promise<void>;
-  updateModalVisible: boolean;
-  values: Partial<API.UserInfo>;
-}
-
-const UpdateForm: React.FC<UpdateFormProps> = (props) => (
-  <StepsForm
-    stepsProps={{
-      size: 'small'
-    }}
-    stepsFormRender={(dom, submitter) => {
-      return (
-        <Modal
-          width={640}
-          bodyStyle={{ padding: '32px 40px 48px' }}
-          destroyOnClose
-          title="规则配置"
-          open={props.updateModalVisible}
-          footer={submitter}
-          onCancel={() => props.onCancel()}
-        >
-          {dom}
-        </Modal>
-      );
-    }}
-    onFinish={props.onSubmit}
-  >
-    <StepsForm.StepForm
-      initialValues={{
-        name: props.values.name,
-        nickName: props.values.nickName
-      }}
-      title="基本信息"
-    >
-      <ProFormText
-        width="md"
-        name="name"
-        label="规则名称"
-        rules={[{ required: true, message: '请输入规则名称！' }]}
-      />
-      <ProFormTextArea
-        name="desc"
-        width="md"
-        label="规则描述"
-        placeholder="请输入至少五个字符"
-        rules={[
-          { required: true, message: '请输入至少五个字符的规则描述！', min: 5 }
-        ]}
-      />
-    </StepsForm.StepForm>
-    <StepsForm.StepForm
-      initialValues={{
-        target: '0',
-        template: '0'
-      }}
-      title="配置规则属性"
-    >
-      <ProFormSelect
-        width="md"
-        name="target"
-        label="监控对象"
-        valueEnum={{
-          0: '表一',
-          1: '表二'
-        }}
-      />
-      <ProFormSelect
-        width="md"
-        name="template"
-        label="规则模板"
-        valueEnum={{
-          0: '规则模板一',
-          1: '规则模板二'
-        }}
-      />
-      <ProFormRadio.Group
-        name="type"
-        width="md"
-        label="规则类型"
-        options={[
-          {
-            value: '0',
-            label: '强'
-          },
-          {
-            value: '1',
-            label: '弱'
-          }
-        ]}
-      />
-    </StepsForm.StepForm>
-    <StepsForm.StepForm
-      initialValues={{
-        type: '1',
-        frequency: 'month'
-      }}
-      title="设定调度周期"
-    >
-      <ProFormDateTimePicker
-        name="time"
-        label="开始时间"
-        rules={[{ required: true, message: '请选择开始时间！' }]}
-      />
-      <ProFormSelect
-        name="frequency"
-        label="监控对象"
-        width="xs"
-        valueEnum={{
-          month: '月',
-          week: '周'
-        }}
-      />
-    </StepsForm.StepForm>
-  </StepsForm>
-);
-
-export default UpdateForm;
@@ -1,270 +0,0 @@
-import services from '@/services/demo';
-import {
-  ActionType,
-  FooterToolbar,
-  PageContainer,
-  ProDescriptions,
-  ProDescriptionsItemProps,
-  ProTable
-} from '@ant-design/pro-components';
-import { Button, Divider, Drawer, message } from 'antd';
-import React, { useRef, useState } from 'react';
-import CreateForm from './components/CreateForm';
-import UpdateForm, { FormValueType } from './components/UpdateForm';
-
-const { addUser, queryUserList, deleteUser, modifyUser } =
-  services.UserController;
-
-/**
- * 添加节点
- * @param fields
- */
-const handleAdd = async (fields: API.UserInfo) => {
-  const hide = message.loading('正在添加');
-  try {
-    await addUser({ ...fields });
-    hide();
-    message.success('添加成功');
-    return true;
-  } catch (error) {
-    hide();
-    message.error('添加失败请重试！');
-    return false;
-  }
-};
-
-/**
- * 更新节点
- * @param fields
- */
-const handleUpdate = async (fields: FormValueType) => {
-  const hide = message.loading('正在配置');
-  try {
-    await modifyUser(
-      {
-        userId: fields.id || ''
-      },
-      {
-        name: fields.name || '',
-        nickName: fields.nickName || '',
-        email: fields.email || ''
-      }
-    );
-    hide();
-
-    message.success('配置成功');
-    return true;
-  } catch (error) {
-    hide();
-    message.error('配置失败请重试！');
-    return false;
-  }
-};
-
-/**
- *  删除节点
- * @param selectedRows
- */
-const handleRemove = async (selectedRows: API.UserInfo[]) => {
-  const hide = message.loading('正在删除');
-  if (!selectedRows) return true;
-  try {
-    await deleteUser({
-      userId: selectedRows.find((row) => row.id)?.id || ''
-    });
-    hide();
-    message.success('删除成功，即将刷新');
-    return true;
-  } catch (error) {
-    hide();
-    message.error('删除失败，请重试');
-    return false;
-  }
-};
-
-const TableList: React.FC<unknown> = () => {
-  const [createModalVisible, handleModalVisible] = useState<boolean>(false);
-  const [updateModalVisible, handleUpdateModalVisible] =
-    useState<boolean>(false);
-  const [stepFormValues, setStepFormValues] = useState({});
-  const actionRef = useRef<ActionType>();
-  const [row, setRow] = useState<API.UserInfo>();
-  const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
-  const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
-    {
-      title: '名称',
-      dataIndex: 'name',
-      tip: '名称是唯一的 key',
-      formItemProps: {
-        rules: [
-          {
-            required: true,
-            message: '名称为必填项'
-          }
-        ]
-      }
-    },
-    {
-      title: '昵称',
-      dataIndex: 'nickName',
-      valueType: 'text'
-    },
-    {
-      title: '性别',
-      dataIndex: 'gender',
-      hideInForm: true,
-      valueEnum: {
-        0: { text: '男', status: 'MALE' },
-        1: { text: '女', status: 'FEMALE' }
-      }
-    },
-    {
-      title: '操作',
-      dataIndex: 'option',
-      valueType: 'option',
-      render: (_, record) => (
-        <>
-          <a
-            onClick={() => {
-              handleUpdateModalVisible(true);
-              setStepFormValues(record);
-            }}
-          >
-            配置
-          </a>
-          <Divider type="vertical" />
-          <a href="">订阅警报</a>
-        </>
-      )
-    }
-  ];
-
-  return (
-    <PageContainer
-      header={{
-        title: 'CRUD 示例'
-      }}
-    >
-      <ProTable<API.UserInfo>
-        headerTitle="查询表格"
-        actionRef={actionRef}
-        rowKey="id"
-        search={{
-          labelWidth: 120
-        }}
-        toolBarRender={() => [
-          <Button
-            key="1"
-            type="primary"
-            onClick={() => handleModalVisible(true)}
-          >
-            新建
-          </Button>
-        ]}
-        request={async (params, sorter, filter) => {
-          const { data, success } = await queryUserList({
-            ...params,
-            // FIXME: remove @ts-ignore
-            // @ts-ignore
-            sorter,
-            filter
-          });
-          return {
-            data: data?.list || [],
-            success
-          };
-        }}
-        columns={columns}
-        rowSelection={{
-          onChange: (_, selectedRows) => setSelectedRows(selectedRows)
-        }}
-      />
-      {selectedRowsState?.length > 0 && (
-        <FooterToolbar
-          extra={
-            <div>
-              已选择{' '}
-              <a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
-              项&nbsp;&nbsp;
-            </div>
-          }
-        >
-          <Button
-            onClick={async () => {
-              await handleRemove(selectedRowsState);
-              setSelectedRows([]);
-              actionRef.current?.reloadAndRest?.();
-            }}
-          >
-            批量删除
-          </Button>
-          <Button type="primary">批量审批</Button>
-        </FooterToolbar>
-      )}
-      <CreateForm
-        onCancel={() => handleModalVisible(false)}
-        modalVisible={createModalVisible}
-      >
-        <ProTable<API.UserInfo, API.UserInfo>
-          onSubmit={async (value) => {
-            const success = await handleAdd(value);
-            if (success) {
-              handleModalVisible(false);
-              if (actionRef.current) {
-                actionRef.current.reload();
-              }
-            }
-          }}
-          rowKey="id"
-          type="form"
-          columns={columns}
-        />
-      </CreateForm>
-      {stepFormValues && Object.keys(stepFormValues).length ? (
-        <UpdateForm
-          onSubmit={async (value) => {
-            const success = await handleUpdate(value);
-            if (success) {
-              handleUpdateModalVisible(false);
-              setStepFormValues({});
-              if (actionRef.current) {
-                actionRef.current.reload();
-              }
-            }
-          }}
-          onCancel={() => {
-            handleUpdateModalVisible(false);
-            setStepFormValues({});
-          }}
-          updateModalVisible={updateModalVisible}
-          values={stepFormValues}
-        />
-      ) : null}
-
-      <Drawer
-        width={600}
-        open={!!row}
-        onClose={() => {
-          setRow(undefined);
-        }}
-        closable={false}
-      >
-        {row?.name && (
-          <ProDescriptions<API.UserInfo>
-            column={2}
-            title={row?.name}
-            request={async () => ({
-              data: row || {}
-            })}
-            params={{
-              id: row?.name
-            }}
-            columns={columns}
-          />
-        )}
-      </Drawer>
-    </PageContainer>
-  );
-};
-
-export default TableList;
@@ -290,6 +290,11 @@ const Users: React.FC = () => {
              );
            }}
          />
+          <Column
+            title={intl.formatMessage({ id: 'users.form.fullname' })}
+            dataIndex="full_name"
+            key="full_name"
+          />
          <Column
            title={intl.formatMessage({ id: 'common.table.createTime' })}
            dataIndex="created_at"